:root{
  --accent: #d63434; /* red border and hover */
  --bg: #fafafa;
  --card: #fff;
  --muted: #666;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  background:var(--card);
  border-bottom:1px solid #eee;
}
header h1{margin:0;font-size:20px}
header small{display:block;color:var(--muted);font-size:12px}
.card{margin:12px;padding:12px;border-radius:10px;background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,0.04); border:1px solid transparent}
input, textarea, select{width:100%;padding:10px;margin:8px 0;border-radius:8px;border:1px solid #ddd}
button{background:transparent;color:var(--accent);border:2px solid var(--accent);padding:8px 12px;border-radius:8px;cursor:pointer}
button:hover{background:var(--accent);color:#fff}
#postsList .post{padding:12px;border-radius:8px;border:1px solid #eee;margin-bottom:10px; transition:box-shadow .12s, transform .08s}
#postsList .post:hover{box-shadow:0 6px 18px rgba(0,0,0,0.06); transform:translateY(-3px); border-color:var(--accent)}
.post .meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.post img, .post video{max-width:100%;border-radius:8px}
.modal{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;padding:12px;z-index:80}
.modal .modal-content{width:100%;max-width:520px;background:var(--card);padding:16px;border-radius:12px;border:1px solid #eee}
.fileLabel input{display:block;margin-top:8px}
.feedButtons{display:flex;gap:8px;margin-top:8px}
.feedButtons button{border-radius:8px}
.channelCard{padding:8px;border-radius:8px;border:1px solid #eee;margin-bottom:8px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#222;color:#fff;padding:8px 14px;border-radius:8px;opacity:.95}
@media(min-width:700px){
  main{max-width:900px;margin:18px auto}
}