:root{
  --bg:#0b0b0c; --card:#161618; --card2:#1f1f23; --line:#2a2a2e;
  --fg:#f5f5f7; --muted:#9a9aa2; --accent:#0a84ff; --accent2:#30d158;
  --block:#ff453a; --annoy:#ff9f0a; --idea:#5e5ce6; --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}
#app{max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px 64px}
.center{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center}
.muted{color:var(--muted)}
.sub{color:var(--muted);font-size:14px}
h1{font-size:26px;font-weight:700;letter-spacing:-.4px;margin:6px 0 2px}
h2{font-size:20px;font-weight:700;margin:22px 0 8px}
a{color:var(--accent)}

header.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.pill{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--muted)}

nav.tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin:14px 0 18px;position:sticky;top:6px;z-index:5}
nav.tabs button{flex:1;border:0;background:transparent;color:var(--muted);
  padding:9px 6px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer}
nav.tabs button.on{background:var(--accent);color:#fff}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:12px 0}
label.fld{display:block;margin:14px 0 6px;font-weight:600;font-size:15px}
label.fld .id{display:block;color:var(--muted);font-weight:400;font-size:13px}
input[type=text],input[type=url],textarea,select{width:100%;background:var(--card2);color:var(--fg);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit}
textarea{min-height:84px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);border-color:transparent}

.sev{display:flex;gap:8px;margin-top:6px}
.sev button{flex:1;border:1px solid var(--line);background:var(--card2);color:var(--fg);
  border-radius:12px;padding:12px 6px;font-size:14px;font-weight:600;cursor:pointer;text-align:center}
.sev button .id{display:block;font-weight:400;color:var(--muted);font-size:12px}
.sev button.on[data-s=block]{background:var(--block);border-color:var(--block);color:#fff}
.sev button.on[data-s=annoy]{background:var(--annoy);border-color:var(--annoy);color:#000}
.sev button.on[data-s=idea]{background:var(--idea);border-color:var(--idea);color:#fff}
.sev button.on .id{color:rgba(255,255,255,.8)}

.drop{border:1.5px dashed var(--line);border-radius:12px;padding:16px;text-align:center;
  color:var(--muted);margin-top:6px;cursor:pointer;font-size:14px}
.drop.hot{border-color:var(--accent);color:var(--fg)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumb{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--card2);border:1px solid var(--line)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .x{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:0;
  border-radius:999px;width:22px;height:22px;font-size:14px;line-height:22px;cursor:pointer}
.thumb .vid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}

button.primary{width:100%;background:var(--accent);color:#fff;border:0;border-radius:14px;
  padding:15px;font-size:17px;font-weight:700;margin-top:18px;cursor:pointer}
button.primary:disabled{opacity:.5}
button.ghost{background:var(--card2);color:var(--fg);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer}

.rep{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 0}
.rep .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.tag{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.tag.block{background:rgba(255,69,58,.18);color:#ff6b61}
.tag.annoy{background:rgba(255,159,10,.18);color:#ffb340}
.tag.idea{background:rgba(94,92,230,.22);color:#9b99f0}
.tag.st{background:var(--card2);color:var(--fg);border:1px solid var(--line)}
.rep p{margin:8px 0 2px}
.rep .q{font-weight:600;font-size:14px;color:var(--muted);margin-top:8px}
.thread{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.msg{font-size:14px;margin:6px 0;padding:8px 10px;border-radius:10px;background:var(--card2)}
.msg.admin{background:rgba(10,132,255,.14)}
.msg b{font-size:12px;color:var(--muted)}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.filters select{width:auto;flex:1;min-width:120px;font-size:14px;padding:8px 10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grp{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0}
.grp .n{font-size:13px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--accent2);
  color:#04210d;padding:12px 20px;border-radius:999px;font-weight:700;z-index:50;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.hidden{display:none}
.ok{color:var(--accent2)}
small.hint{color:var(--muted);font-size:13px}