:root{
  --bg:#202020; --bg2:#fff; --card:#1a1919; --card2:#131313;
  --line:#222a38; --txt:#fff; --muted:#8a94a6; --muted2:#5c6675;
  --accent:#42ee4d; --accent2:#7c5cff; --danger:#ff5a6e; --ok:#37d39b;
  --radius:16px; --max:680px;
  --grad:linear-gradient(135deg,#3bff50,#668f3d);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
  padding-bottom:90px;
}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
img{display:block}
b{font-weight:700;color: #fff;}

/* ---------- topbar ---------- */
#topbar{position:sticky;top:0;z-index:40;background:rgba(11,14,19,.85);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;
  gap:10px;padding:9px 14px}
.ch-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.ch-photo{width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  background:var(--grad);background-size:cover;background-position:center}
.ch-meta{min-width:0;flex:1}
.ch-name{font-weight:700;font-size:15.5px;line-height:1.2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.ch-sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:1px}
.ch-sub b{color:var(--txt);font-weight:600}
.ch-sub .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin:0 5px 0 1px;vertical-align:middle}
.bar-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}

.icon-btn{background:transparent;border:0;color:var(--muted);
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  cursor:pointer;transition:.15s}
.icon-btn:hover{background:var(--card2);color:var(--txt)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:21px;height:21px}
.btn-pill{background:var(--grad);color:#fff;border:0;padding:8px 15px;border-radius:11px;
  font-weight:600;font-size:14px;cursor:pointer;transition:.15s;white-space:nowrap}
.btn-pill:active{transform:scale(.96)}
.btn-pill.ghost{background:var(--card2);color:var(--txt)}
.me-wrap{position:relative;flex:0 0 auto}
.me-chip{display:flex;align-items:center;gap:7px;cursor:pointer;padding:2px 4px 2px 2px;
  border-radius:30px;background:none;border:0}
.me-chip:hover{background:var(--card2)}
.me-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--card2);
  border:2px solid var(--line)}
.me-chip span{font-weight:600;font-size:13.5px;color:var(--txt)}
.me-chip .caret{width:16px;height:16px;color:var(--muted);transition:transform .18s}
.me-chip.open .caret{transform:rotate(180deg)}

.dropdown{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);
  border:1px solid var(--line);border-radius:14px;min-width:200px;padding:6px;
  box-shadow:0 16px 44px rgba(0,0,0,.5);z-index:50;animation:rise .15s}
.dropdown a,.dropdown button{display:flex;align-items:center;gap:11px;width:100%;background:none;
  border:0;color:var(--txt);padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;
  cursor:pointer;text-align:left;text-decoration:none;font-family:inherit}
.dropdown a:hover,.dropdown button:hover{background:var(--card2)}
.dropdown svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto}
.dropdown .dd-sep{height:1px;background:var(--line);margin:5px 8px;padding:0}
.dropdown .danger{color:#fe3b96;}
.dropdown .danger svg{color:var(--danger)}

/* ---------- feed ---------- */
#feed{max-width:var(--max);margin:0 auto;padding:14px}
#pinnedWrap{margin-bottom:6px}
.post{background:var(--card);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.post.pinned{border-color:#2e3b54;}
.post-head{display:flex;align-items:center;gap:10px;padding:13px 14px 6px}
.post-head .av{width:38px;height:38px;border-radius:12px;object-fit:cover;background:var(--grad)}
.ph-meta{flex:1;min-width:0}
.ph-name{font-weight:700;font-size:14.5px;color:var(--txt);text-decoration:none}
.ph-name:hover{text-decoration:underline}
.ph-time{color:var(--muted);font-size:12px}
.pin-flag{display:flex;align-items:center;gap:4px;color:var(--accent);font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pin-flag svg{width:14px;height:14px}
.post-menu{margin-left:auto;color:var(--muted2);background:none;border:0;cursor:pointer;
  padding:4px;border-radius:8px}
.post-menu:hover{color:var(--txt)}
.post-body{padding:4px 15px 12px;white-space:pre-wrap;word-break:break-word;font-size:15px}
.post-body a{color:var(--accent);text-decoration:none}
.post-body a:hover{text-decoration:underline}

.media{background:#000;position:relative}
.media img,.media video{width:100%;max-height:560px;object-fit:contain;display:block}
.media .play-ov{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.media .play-ov span{width:62px;height:62px;border-radius:50%;background:rgba(0,0,0,.55);
  display:grid;place-items:center;backdrop-filter:blur(2px)}
.media .play-ov svg{width:26px;height:26px;fill:#fff;stroke:#fff;margin-left:3px}

/* link card */
.link-card{margin:0 15px 12px;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  display:block;text-decoration:none;color:inherit;background:var(--card2);transition:.15s}
.link-card:hover{border-color:#2c3548}
.link-card img{width:100%;max-height:230px;object-fit:cover}
.link-card .lc-body{padding:11px 13px}
.link-card .lc-site{color:var(--accent);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:3px}
.link-card .lc-title{font-weight:700;font-size:14.5px;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-card .lc-desc{color:var(--muted);font-size:13px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* actions */
.post-actions{display:flex;align-items:center;gap:6px;padding:6px 10px 12px;flex-wrap:wrap}
.act{display:flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--line);
  color:var(--muted);padding:7px 12px;border-radius:11px;cursor:pointer;font-size:13.5px;
  font-weight:600;transition:.15s}
.act svg{width:18px;height:18px}
.act:hover{color:var(--txt);border-color:#2c3548}
.act:active{transform:scale(.95)}
.act.on{color:#fff;border-color:transparent}
.act.react.on{background:rgba(255,90,110,.16);color:#ff8a98;border-color:rgba(255,90,110,.3)}
.act .views{color:var(--muted2)}
.act.viewstat{margin-left:auto;background:none;border:0;cursor:default}
.act.viewstat:hover{color:var(--muted)}

.react-bar{display:flex;gap:5px;padding:18px 13px 13px;flex-wrap:wrap}
.react-chip{background:var(--card2);border:1px solid var(--line);border-radius:30px;
  padding:4px 10px;font-size:13px;cursor:pointer;transition:.12s;display:flex;gap:4px;align-items:center}
.react-chip:hover{border-color:#2c3548}
.react-chip.mine{background:rgba(59,158,255,.15);border-color:rgba(59,158,255,.4)}

/* comments */
.comments{border-top:1px solid var(--line);padding:10px 14px;display:none}
.comments.open{display:block}
.cmt{display:flex;gap:9px;margin-bottom:10px}
.cmt img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--card2);flex:0 0 auto}
.cmt .cb{background:var(--card2);border-radius:12px;padding:7px 11px;min-width:0}
.cmt .cb .nm{font-weight:700;font-size:12.5px;margin-bottom:1px}
.cmt .cb .tx{font-size:13.5px;word-break:break-word}
.cmt-form{display:flex;gap:8px;margin-top:8px}
.cmt-form input{flex:1;background:var(--bg2);border:1px solid var(--line);color:#1a1919;
  border-radius:11px;padding:10px 13px;font-size:14px;outline:none}
.cmt-form input:focus{border-color:var(--accent)}
.cmt-send{background:var(--grad);border:0;color:#fff;width:42px;border-radius:11px;
  display:grid;place-items:center;cursor:pointer}

/* ---------- fab / bars ---------- */
#composerBar{position:fixed;right:0;left:0;bottom:0;pointer-events:none;z-index:30}
.fab{pointer-events:auto;position:fixed;right:max(16px,calc(50% - var(--max)/2 + 16px));
  bottom:calc(74px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:18px;
  background:var(--grad);border:0;color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:.18s}
.fab svg{width:27px;height:27px}
.fab:active{transform:scale(.93)}

#bottomBar{position:fixed;left:0;right:0;bottom:0;z-index:31;
  background:rgba(0, 0, 0, 0.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px max(14px,calc(50% - var(--max)/2 + 14px));
  padding-bottom:max(9px,env(safe-area-inset-bottom))}
.bb-explore{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);
  color:var(--txt);text-decoration:none;font-weight:700;font-size:14px;padding:10px 18px;border-radius:12px;
  transition:.15s}
.bb-explore svg{width:19px;height:19px}
.bb-explore:hover{border-color:#2c3548}
.bb-join{display:flex;gap:8px}

/* ---------- loader/end ---------- */
.loader,.end-msg{text-align:center;color:var(--muted);padding:18px;font-size:13.5px}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(4,6,10,.7);backdrop-filter:blur(4px);
  z-index:60;display:grid;place-items:center;padding:16px;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--card);border:1px solid var(--line);border-radius:20px;width:100%;
  max-width:440px;max-height:90vh;overflow:auto;animation:rise .25s}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:17px;font-weight:800}
.modal-b{padding:18px}
.modal-x{background:var(--card2);border:1px solid var(--line);color:var(--txt);width:34px;height:34px;
  border-radius:10px;display:grid;place-items:center;cursor:pointer}
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field input,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--line);
  color:#181717;border-radius:12px;padding:12px 14px;font-size:15px;outline:none;font-family:inherit}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{resize:vertical;min-height:90px}
.modal .btn-pill{width:100%;padding:13px;font-size:15px;margin-top:4px}
.tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--bg2);padding:4px;border-radius:12px}
.tabs button{flex:1;background:none;border:0;color:var(--muted);padding:9px;border-radius:9px;
  font-weight:700;cursor:pointer;font-size:14px}
.tabs button.active{background:var(--card2);color:var(--txt)}
.err{color:var(--danger);font-size:13px;margin-top:8px;min-height:18px}
.hint{color:var(--muted2);font-size:12px;margin-top:6px}

.avatar-pick{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.avatar-pick .pv{width:64px;height:64px;border-radius:16px;object-fit:cover;background:var(--grad)}
.avatar-pick label{background:var(--card2);border:1px solid var(--line);color:var(--txt);
  padding:9px 14px;border-radius:11px;cursor:pointer;font-size:13.5px;font-weight:600}
.avatar-pick input{display:none}

/* share sheet */
.share-list{display:grid;gap:8px}
.share-list button{display:flex;align-items:center;gap:12px;background:var(--card2);
  border:1px solid var(--line);color:var(--txt);padding:13px 15px;border-radius:13px;cursor:pointer;
  font-weight:600;font-size:14.5px;width:100%;text-align:left}
.share-list button:hover{border-color:#2c3548}
.share-list .sdot{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.sdot.tg{background:#229ED9}.sdot.wa{background:#25D366}.sdot.tw{background:#111}.sdot.cp{background:var(--grad)}
.share-list .sdot svg{width:20px;height:20px;stroke:#fff;fill:none}

/* composer media preview */
.cmp-media{margin-top:10px;border:1px solid var(--line);border-radius:13px;overflow:hidden;position:relative;display:none}
.cmp-media img,.cmp-media video{width:100%;max-height:300px;object-fit:contain;background:#000}
.cmp-media .rm{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);border:0;color:#fff;
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;cursor:pointer}
.cmp-row{display:flex;gap:8px;margin-top:12px}
.cmp-row label{flex:0 0 auto;background:var(--card2);border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:0 14px;display:grid;place-items:center;cursor:pointer}
.cmp-row .btn-pill{flex:1;margin-top:0}

.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--card2);border:1px solid var(--line);color:var(--txt);padding:11px 18px;
  border-radius:12px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:80}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:520px){
  .bar-inner{padding:8px 12px;gap:8px}
  .ch-name{font-size:15px}
  .icon-btn{width:36px;height:36px}
  .icon-btn svg{width:20px;height:20px}
  .btn-pill{padding:8px 14px}
  .me-chip span{display:none}
  .me-chip img{width:32px;height:32px}
  #feed{padding:12px 12px}
}

/* ============================================================
   Discovery / Explore
   ============================================================ */
.ex-home{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--txt);min-width:0}
.ex-logo{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;flex:0 0 auto}
.ex-logo svg{width:21px;height:21px;stroke:#fff}
.ex-home b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.sel{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:12px 14px;font-size:15px;outline:none;font-family:inherit;
  appearance:none;-webkit-appearance:none}
.sel:focus{border-color:var(--accent)}

.ex-wrap{max-width:var(--max);margin:0 auto;padding:14px}
.ex-wrap h2{font-size:16px;font-weight:800;margin:22px 2px 12px;display:flex;align-items:center;gap:7px}
.ex-wrap h2 .h2i{width:18px;height:18px;stroke:#ff8a3d;fill:none}

.ex-search{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:0 12px;height:48px;margin-bottom:14px}
.ex-search svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.ex-search input{flex:1;background:none;border:0;color:var(--txt);font-size:15px;outline:none;font-family:inherit}
.ex-search button{background:var(--card2);border:0;color:var(--muted);width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;cursor:pointer}
.ex-search button svg{width:16px;height:16px}

.ex-tabs{display:flex;gap:7px;margin-bottom:12px}
.ex-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--card);border:1px solid var(--line);color:var(--muted);padding:10px;border-radius:12px;
  font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.ex-tabs button svg{width:17px;height:17px}
.ex-tabs button.active{background:var(--grad);border-color:transparent;color:#fff}

.ex-cats{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:4px;
  scrollbar-width:none}
.ex-cats::-webkit-scrollbar{display:none}
.cat-chip{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:7px 13px;border-radius:30px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.cat-chip b{color:var(--muted2);font-weight:700}
.cat-chip:hover{color:var(--txt)}
.cat-chip.active{background:rgba(0, 0, 0, 0.15);border-color:rgb(68, 233, 76);color:#fff;}
.cat-chip.active b{color:var(--accent)}

/* trending posts strip */
.trend-strip{display:flex;gap:11px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.trend-strip::-webkit-scrollbar{display:none}
.trend-card{flex:0 0 152px;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--card);transition:.15s}
.trend-card:hover{border-color:#2c3548;transform:translateY(-2px)}
.tc-media{height:120px;background:var(--card2);background-size:cover;background-position:center;
  position:relative;display:grid;place-items:center}
.tc-text{padding:10px;font-size:12.5px;color:var(--muted);text-align:center;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tc-play{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.55);display:grid;place-items:center}
.tc-play svg{width:14px;height:14px;stroke:#ff8a3d;fill:none}
.tc-foot{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;gap:6px}
.tc-ch{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-views{display:flex;align-items:center;gap:3px;color:var(--muted2);font-size:12px;flex:0 0 auto}
.tc-views svg{width:14px;height:14px}

/* channel grid */
.ch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ch-card{text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:9px;transition:.15s}
.ch-card:hover{border-color:#2c3548;transform:translateY(-2px)}
.cc-top{display:flex;align-items:center;gap:11px;min-width:0}
.cc-photo{width:46px;height:46px;border-radius:13px;flex:0 0 auto;background:var(--grad);
  background-size:cover;background-position:center;display:grid;place-items:center;
  font-weight:800;font-size:19px;color:#fff}
.cc-meta{min-width:0;flex:1}
.cc-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-stat{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12.5px;margin-top:2px}
.cc-stat svg{width:14px;height:14px;color:var(--muted2)}
.cc-desc{color:var(--muted);font-size:13px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.cat-pill{background:rgba(0, 0, 0, 0.16);color:#f9f9f9;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:20px}
.tag{color:var(--muted2);font-size:11.5px;font-weight:600;padding:3px 0}

/* profile */
.back-link{display:inline-flex;align-items:center;gap:5px;color:var(--muted);text-decoration:none;
  font-size:13.5px;font-weight:600;margin-bottom:14px}
.back-link svg{width:18px;height:18px}
.back-link:hover{color:var(--txt)}
.prof-head{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:18px}
.prof-av{width:76px;height:76px;border-radius:22px;object-fit:cover;background:var(--grad);flex:0 0 auto}
.prof-meta{min-width:0}
.prof-name{font-size:20px;font-weight:800;letter-spacing:-.01em}
.prof-bio{color:var(--muted);font-size:14px;margin-top:3px}
.prof-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;color:var(--muted);font-size:13px}
.prof-stats b{color:var(--txt);font-weight:700}

@media(max-width:520px){
  .ch-grid{grid-template-columns:1fr}
  .ex-home b{font-size:16px}
  .prof-av{width:64px;height:64px;border-radius:18px}
  .prof-name{font-size:18px}
}

/* ============================================================
   Confetti + join celebration
   ============================================================ */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:95;overflow:hidden}
.confetti i{position:absolute;top:-16px;width:9px;height:15px;border-radius:2px;opacity:.95;
  animation:confFall linear forwards}
@keyframes confFall{
  0%{transform:translateY(-16px) rotate(0deg)}
  100%{transform:translateY(106vh) rotate(680deg)}
}
.join-pop{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%) scale(.8);
  background:var(--grad);color:#fff;font-weight:800;font-size:18px;padding:16px 26px;
  border-radius:18px;box-shadow:0 14px 50px rgba(59,158,255,.5);z-index:96;
  opacity:0;transition:.3s cubic-bezier(.2,1.3,.4,1);pointer-events:none;white-space:nowrap}
.join-pop.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ============================================================
   Admin panel
   ============================================================ */
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 16px}
.adm-stats .stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center}
.adm-stats .sv{font-size:22px;font-weight:800;letter-spacing:-.02em}
.adm-stats .sl{color:var(--muted);font-size:12px;margin-top:2px}

.adm-tabs{display:flex;gap:7px;margin-bottom:14px}
.adm-tabs button{flex:1;background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:10px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer}
.adm-tabs button.active{background:var(--grad);border-color:transparent;color:#fff}

.adm-list{display:flex;flex-direction:column;gap:9px}
.adm-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:11px 12px}
.adm-row.is-banned{opacity:.6;border-color:rgba(255,90,110,.35)}
.ar-photo{width:46px;height:46px;border-radius:12px;flex:0 0 auto;background:var(--grad);
  background-size:cover;background-position:center;display:grid;place-items:center;
  font-weight:800;color:#fff;font-size:18px}
.ar-photo.media{background-color:var(--card2)}
.ar-photo svg{width:20px;height:20px;color:var(--muted2)}
.ar-main{min-width:0;flex:1}
.ar-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:7px}
.ar-sub{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-sub .i12{width:13px;height:13px;vertical-align:-2px;color:var(--muted2)}
.ban-tag{background:rgba(255,90,110,.18);color:#ff8a98;font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.priv-tag{background:var(--card2);color:var(--muted);font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.ar-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.ar-btn{display:flex;align-items:center;gap:5px;background:var(--card2);border:1px solid var(--line);
  color:var(--txt);border-radius:10px;padding:8px 11px;font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:none}
.ar-btn svg{width:16px;height:16px}
.ar-btn:hover{border-color:#2c3548}
.ar-btn.danger{color:#ff8a98;border-color:rgba(255,90,110,.3)}
.ar-btn.ok{color:var(--ok);border-color:rgba(55,211,155,.35)}
.ar-btn:disabled{opacity:.5;cursor:default}

@media(max-width:520px){
  .adm-stats{grid-template-columns:repeat(2,1fr)}
  .ar-btn span{display:none}
  .adm-row{gap:10px}
}

/* report/reports extra's */
.stat.alert{border-color:rgba(255,90,110,.4);background:rgba(255,90,110,.06)}
.stat.alert .sv{color:#ff8a98}
.tab-badge{background:var(--danger);color:#fff;font-size:11px;font-weight:800;padding:1px 7px;
  border-radius:20px;margin-left:3px}
.rep-count{background:rgba(255,90,110,.18);color:#ff8a98;font-size:11.5px;font-weight:800;
  padding:1px 7px;border-radius:6px;margin-right:3px}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{max-width:var(--max);margin:14px auto 0;padding:22px 16px 34px;
  border-top:1px solid var(--line);text-align:center}
.ft-links{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:9px;flex-wrap:wrap}
.ft-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:13.5px}
.ft-links a:hover{color:var(--txt)}
.ft-dot{color:var(--muted2)}
.ft-note{color:var(--muted2);font-size:12px;line-height:1.55;max-width:460px;margin:0 auto}
.ft-note a{color:var(--accent);text-decoration:none}
.ft-note a:hover{text-decoration:underline}
body.chan .site-footer{margin-bottom:70px}

/* ============================================================
   Lightbox
   ============================================================ */
.media.video{aspect-ratio:16/10;background:#000;background-size:cover;background-position:center;
  cursor:pointer;position:relative}
.media[data-media]{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(2,4,8,.94);
  display:grid;place-items:center;padding:20px;animation:fade .18s}
.lightbox .lb-stage{max-width:100%;max-height:100%;display:grid;place-items:center}
.lightbox img,.lightbox video{max-width:96vw;max-height:90vh;width:auto;height:auto;
  border-radius:8px;display:block}
.lb-close{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:13px;
  background:rgba(255,255,255,.12);border:0;color:#fff;display:grid;place-items:center;cursor:pointer;z-index:1}
.lb-close:hover{background:rgba(255,255,255,.2)}

/* ============================================================
   Lock card (join to see all)
   ============================================================ */
.lock-card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:30px 22px;text-align:center;margin-bottom:14px;position:relative;overflow:hidden}
.lock-card::before{content:"";position:absolute;left:0;right:0;top:-40px;height:40px;
  box-shadow:0 -22px 34px 22px var(--bg)}
.lock-ic{font-size:30px;margin-bottom:8px}
.lock-title{font-size:17px;font-weight:800;letter-spacing:-.01em}
.lock-sub{color:var(--muted);font-size:13.5px;margin-top:5px;margin-bottom:16px}
.lock-actions{display:flex;gap:9px;justify-content:center}
.lock-actions .btn-pill{padding:11px 22px}

/* ============================================================
   Stats modal
   ============================================================ */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:6px}
.stat-grid .sg{background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:13px;text-align:center}
.stat-grid .sgv{font-size:22px;font-weight:800;letter-spacing:-.02em}
.stat-grid .sgl{color:var(--muted);font-size:11.5px;margin-top:2px}
.stat-h{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin:18px 2px 9px}
.spark{display:flex;align-items:flex-end;gap:2px;height:52px;background:var(--bg2);
  border:1px solid var(--line);border-radius:12px;padding:6px 8px}
.sp-bar{flex:1;display:flex;align-items:flex-end;justify-content:center;height:100%}
.sp-bar i{display:block;width:100%;max-width:9px;background:var(--accent);border-radius:3px 3px 0 0;
  opacity:.85;transition:.2s}
.sp-bar:hover i{opacity:1}
.src-list{display:flex;flex-direction:column;gap:9px}
.src-row{display:flex;align-items:center;gap:9px;font-size:13.5px}
.src-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.src-l{width:84px;flex:0 0 auto;color:var(--txt);font-weight:600}
.src-bar{flex:1;height:8px;background:var(--bg2);border-radius:20px;overflow:hidden}
.src-bar i{display:block;height:100%;border-radius:20px;min-width:2px}
.src-v{width:38px;text-align:right;color:var(--muted);font-weight:700;font-size:12.5px}
.ref-list{display:flex;flex-direction:column;gap:7px}
.ref-row{display:flex;align-items:center;justify-content:space-between;background:var(--card2);
  border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-size:13.5px}
.ref-row span{color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-row b{color:var(--accent);font-weight:700;margin-left:10px;flex:0 0 auto}

/* notify form (admin) */
.notify-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.notify-card .btn-pill{width:100%;margin-top:6px}
.adm-tabs{overflow-x:auto;scrollbar-width:none}
.adm-tabs::-webkit-scrollbar{display:none}

/* iOS add-to-home-screen hint */
.ios-hint p{font-size:14px;color:var(--txt);margin:0 0 12px}
.ios-hint ol{margin:0 0 12px;padding-left:20px;color:var(--txt);font-size:14px;line-height:1.7}
.ios-hint ol b{font-weight:700}
.ios-hint .hint{color:var(--muted2);font-size:12.5px}

/* ============================================================
   Push opt-in popup
   ============================================================ */
.push-pop{position:fixed;left:12px;right:12px;bottom:80px;z-index:60;max-width:var(--max);margin:0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 14px;
  display:flex;align-items:center;gap:12px;box-shadow:0 16px 50px rgba(0,0,0,.55);
  transform:translateY(150%);transition:transform .32s cubic-bezier(.2,1,.3,1)}
.push-pop.show{transform:translateY(0)}
.pp-ic{width:44px;height:44px;border-radius:13px;background:var(--grad);display:grid;place-items:center;flex:0 0 auto}
.pp-ic svg{width:23px;height:23px;stroke:#fff;fill:none}
.pp-text{flex:1;min-width:0}
.pp-text b{display:block;font-size:14.5px;font-weight:700}
.pp-text span{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.pp-actions{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.pp-yes{background:var(--grad);color:#fff;border:0;padding:9px 18px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer}
.pp-yes:active{transform:scale(.96)}
.pp-no{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;font-weight:600}

/* ============================================================
   Admin notify: image picker + notification preview
   ============================================================ */
.img-pick{display:inline-flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);
  color:var(--txt);padding:11px 14px;border-radius:12px;cursor:pointer;font-size:14px;font-weight:600}
.img-pick svg{width:18px;height:18px;color:var(--muted)}
.img-prev{position:relative;margin-top:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.img-prev img{width:100%;max-height:220px;object-fit:cover;display:block}
.img-prev button{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);border:0;color:#fff;
  width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:700}
.np-label{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:16px 2px 8px}
.notif-preview{background:#1f242e;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:14px}
.np-top .np-app{color:var(--muted2);font-size:11.5px;font-weight:600;margin-bottom:5px}
.np-body b{display:block;font-size:14px;font-weight:700;color:#fff}
.np-body span{display:block;color:#c7ced8;font-size:13px;margin-top:2px;white-space:pre-wrap;word-break:break-word}
.np-image{margin-top:10px;border-radius:9px;overflow:hidden}
.np-image img{width:100%;max-height:200px;object-fit:cover;display:block}


.banner{
    width:100%;
    max-width:720px;
    aspect-ratio:8/1;
    overflow:hidden;
    border-radius:8px;
    position:relative;
}

.banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}