/* ═══════════════════════════════════════════════════════════
   NOO天 BOARDS — stylesheet
   Deploy to: /var/www/boards/static/boards.css
═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Poppins';src:url('/fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Sans JP';src:url('/fonts/notojp-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Sans JP';src:url('/fonts/notojp-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Sans JP';src:url('/fonts/notojp-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'DotGothic16';src:url('/fonts/dotgothic16.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'VCR OSD Mono';src:url('/fonts/vcr.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

.kanji{font-family:'DotGothic16',sans-serif !important;}
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --vcr:'VCR OSD Mono','Poppins',monospace;
  --blue:#6ea8ff;--pink:#ff4fd8;--purple:#b56bff;
  --dim:#9db7ff;--bg:#050b14;
  --panel:rgba(10,15,25,0.72);--border:rgba(255,255,255,0.06);
}
body{font-family:'Poppins','Noto Sans JP',sans-serif;background:var(--bg);color:#e6eefc;min-height:100vh;overflow-x:hidden;position:relative;}
body::before{content:"";position:fixed;inset:0;z-index:-4;
  background:linear-gradient(rgba(5,10,20,0.92),rgba(5,10,20,0.98)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%230a1a2f'/%3E%3Cstop offset='1' stop-color='%23030610'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23g)'/%3E%3Cg fill='%230b2a4a'%3E%3Crect x='50' y='500' width='80' height='300'/%3E%3Crect x='140' y='450' width='60' height='350'/%3E%3Crect x='220' y='520' width='100' height='280'/%3E%3Crect x='340' y='430' width='90' height='370'/%3E%3Crect x='450' y='480' width='70' height='320'/%3E%3Crect x='540' y='410' width='120' height='390'/%3E%3Crect x='680' y='470' width='90' height='330'/%3E%3Crect x='790' y='520' width='80' height='280'/%3E%3Crect x='890' y='440' width='110' height='360'/%3E%3Crect x='1030' y='500' width='90' height='300'/%3E%3C/g%3E%3Cg fill='%23106bff' opacity='0.15'%3E%3Ccircle cx='200' cy='300' r='120'/%3E%3Ccircle cx='900' cy='250' r='160'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-position:center;filter:brightness(0.55) contrast(1.15) saturate(1.2);}
/* .clouds + body::after scanlines + their keyframes now live in nooten-ui.js —
   the single owner of all ambient layers, perf-gated by data-perf. The forum
   previously carried its own copy with NO mobile mitigation, which is why the
   boards janked worse than the homepage. (AUDIT §5.1/§6a) */

[hidden]{display:none !important;}

/* ── NAV ────────────────────────────────────────────────── */
.nav{position:sticky;top:0;backdrop-filter:blur(14px);background:rgba(5,10,18,0.6);padding:16px 24px;border-bottom:1px solid var(--border);z-index:200;}
.nav-inner{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.logo{font-family:var(--vcr);font-weight:800;letter-spacing:2px;color:#eaf2ff;text-decoration:none;animation:logoFlicker 4s infinite;text-shadow:0 0 10px rgba(120,200,255,0.6),0 0 25px rgba(120,200,255,0.35);font-size:clamp(14px,2vw,18px);flex-shrink:0;}
.logo .kanji{color:var(--blue);text-shadow:0 0 12px rgba(110,168,255,0.8),0 0 22px rgba(255,255,255,0.25);}
@keyframes logoFlicker{0%,100%{opacity:1;}90%{opacity:1;}91%{opacity:0.7;}92%{opacity:1;}94%{opacity:0.4;}96%{opacity:1;}}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{color:#cfe0ff;margin-left:14px;text-decoration:none;font-size:14px;}
.nav-links a:hover{color:var(--blue);}
.nav-links a.active{color:var(--pink);border-bottom:1px solid var(--pink);padding-bottom:2px;}
.nav-auth{display:flex;gap:8px;margin-left:20px;}
.nav-auth-btn{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:5px 11px;border-radius:6px;cursor:pointer;transition:all 0.2s;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--dim);}
.nav-auth-btn:hover{background:rgba(110,168,255,0.1);color:var(--blue);}
.nav-auth-btn.primary{background:rgba(110,168,255,0.12);border-color:rgba(110,168,255,0.3);color:var(--blue);}
.nav-user{display:flex;align-items:center;gap:8px;margin-left:20px;}
.nav-avatar{width:28px;height:28px;border-radius:50%;background:rgba(110,168,255,0.2);border:1px solid rgba(110,168,255,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--blue);overflow:hidden;flex-shrink:0;cursor:pointer;padding:0;}
.nav-avatar img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.nav-username{font-family:var(--vcr);font-size:10px;color:var(--blue);letter-spacing:1px;background:none;border:none;cursor:pointer;padding:0;}
.nav-logout{font-family:var(--vcr);font-size:9px;color:var(--dim);opacity:.6;cursor:pointer;letter-spacing:1px;background:none;border:none;padding:0;}
.nav-logout:hover{color:var(--pink);opacity:1;}

/* Hamburger + drawer */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:7px 9px;cursor:pointer;flex-shrink:0;}
.nav-hamburger span{display:block;width:18px;height:2px;background:var(--dim);border-radius:2px;transition:all 0.25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-drawer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:199;background:rgba(5,10,18,0.97);backdrop-filter:blur(20px);flex-direction:column;padding:80px 28px 28px;gap:6px;overflow-y:auto;}
.nav-drawer.open{display:flex;}
.nav-drawer a{color:#cfe0ff;text-decoration:none;font-size:18px;font-weight:600;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
.nav-drawer a.active{color:var(--pink);}
.nav-drawer .drawer-auth{display:flex;gap:10px;margin-top:18px;}
.nav-drawer .drawer-auth button{flex:1;font-family:var(--vcr);font-size:11px;letter-spacing:1px;padding:12px;border-radius:8px;cursor:pointer;transition:all 0.2s;}
.nav-drawer .drawer-auth .login-btn{border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:var(--dim);}
.nav-drawer .drawer-auth .reg-btn{border:1px solid rgba(110,168,255,0.35);background:rgba(110,168,255,0.12);color:var(--blue);}
.nav-drawer .drawer-user{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px;background:rgba(110,168,255,0.07);border-radius:10px;border:1px solid rgba(110,168,255,0.15);}
.nav-drawer .drawer-username{font-family:var(--vcr);font-size:13px;color:var(--blue);flex:1;}
.nav-drawer .drawer-logout{font-family:var(--vcr);font-size:10px;color:var(--dim);background:none;border:1px solid rgba(255,255,255,0.1);border-radius:5px;padding:5px 10px;cursor:pointer;}
.drawer-settings{font-family:var(--vcr);font-size:14px;background:rgba(110,168,255,0.08);border:1px solid rgba(110,168,255,0.2);border-radius:6px;padding:5px 9px;cursor:pointer;color:var(--blue);}

/* ── PAGE HEADER ─────────────────────────────────────────── */
.page-header{max-width:1200px;margin:0 auto;padding:30px 24px 14px;}
.boards-title{font-family:var(--vcr);font-size:clamp(1.3rem,3.2vw,2.2rem);letter-spacing:3px;line-height:1;animation:neonFlicker 3.5s infinite;}
.boards-title .t1{color:var(--blue);text-shadow:0 0 18px rgba(110,168,255,0.7);}
.boards-title .t2{color:var(--pink);text-shadow:0 0 18px rgba(255,79,216,0.6);}
.boards-sub{font-family:var(--vcr);font-size:10px;color:var(--dim);letter-spacing:2px;opacity:.6;margin-top:6px;}
@keyframes neonFlicker{0%,100%{opacity:1;}92%{opacity:1;}93%{opacity:0.5;}94%{opacity:1;}96%{opacity:0.35;}98%{opacity:1;}}

/* ── LAYOUT ──────────────────────────────────────────────── */
.boards-layout{max-width:1200px;margin:0 auto;padding:16px 24px 80px;display:grid;grid-template-columns:210px 1fr;gap:18px;align-items:start;}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.boards-sidebar{position:sticky;top:72px;display:flex;flex-direction:column;gap:5px;padding-right:2px;}
.sidebar-label{font-family:var(--vcr);font-size:9px;color:var(--blue);letter-spacing:3px;opacity:.5;margin-bottom:3px;padding-left:2px;}
.cat-btn{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;background:var(--panel);border:1px solid var(--border);cursor:pointer;transition:all 0.18s;text-align:left;color:#e6eefc;font-family:'Poppins',sans-serif;backdrop-filter:blur(10px);position:relative;width:100%;}
.cat-btn:hover{background:rgba(110,168,255,0.07);border-color:rgba(110,168,255,0.2);}
.cat-btn.active{border-color:rgba(110,168,255,0.4);background:rgba(110,168,255,0.1);}
.cat-btn.active .cat-name{color:var(--blue);}
.cat-icon{font-size:15px;flex-shrink:0;display:flex;}
.cat-name{font-size:11px;font-weight:600;flex:1;}
.cat-dot{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:0 0 6px var(--pink);animation:blink 1.2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.1;}}
.sidebar-stats{margin-top:8px;padding:11px 12px;background:var(--panel);border:1px solid var(--border);border-radius:10px;backdrop-filter:blur(10px);}
.stat-row{display:flex;justify-content:space-between;margin-bottom:4px;}
.stat-row:last-child{margin-bottom:0;}
.stat-k{font-size:10px;opacity:.5;color:var(--dim);}
.stat-v{font-family:var(--vcr);font-size:10px;color:var(--blue);}

/* ── FEED PANEL ──────────────────────────────────────────── */
.feed-panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;backdrop-filter:blur(10px);}
.feed-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.07);flex-wrap:wrap;gap:8px;}
.feed-title{font-family:var(--vcr);font-size:11px;color:var(--blue);letter-spacing:2px;}
.feed-controls{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
.sort-btn{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:4px 9px;border-radius:5px;cursor:pointer;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:var(--dim);transition:all 0.2s;}
.sort-btn:hover{background:rgba(110,168,255,0.1);color:var(--blue);}
.sort-btn.active{background:rgba(110,168,255,0.15);border-color:rgba(110,168,255,0.3);color:var(--blue);}
.new-btn{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:5px 11px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,79,216,0.3);background:rgba(255,79,216,0.1);color:var(--pink);transition:all 0.2s;}
.new-btn:hover{background:rgba(255,79,216,0.2);border-color:var(--pink);}

/* ── DISCUSSION LIST ─────────────────────────────────────── */
.disc-list{display:flex;flex-direction:column;gap:7px;}
.disc-card{display:flex;gap:12px;padding:11px 13px;background:rgba(255,255,255,0.03);border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:all 0.18s;position:relative;overflow:hidden;}
.disc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--card-col,var(--blue));opacity:0.5;transition:opacity 0.2s;}
.disc-card:hover{background:rgba(110,168,255,0.06);border-color:rgba(110,168,255,0.2);}
.disc-card:hover::before{opacity:1;}
.disc-card.open{background:rgba(110,168,255,0.08);border-color:rgba(110,168,255,0.3);}
.disc-replies{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:34px;gap:1px;flex-shrink:0;}
.disc-reply-count{font-family:var(--vcr);font-size:13px;color:var(--blue);line-height:1;}
.disc-reply-lbl{font-size:9px;opacity:.4;color:var(--dim);}
.disc-main{flex:1;min-width:0;}
.disc-title{font-size:13px;font-weight:600;color:#e6eefc;line-height:1.4;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.disc-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:11px;opacity:.55;color:var(--dim);}
.disc-tag{font-family:var(--vcr);font-size:8px;padding:2px 6px;border-radius:4px;letter-spacing:1px;}
.disc-author{color:var(--blue);opacity:.8;text-decoration:none;}
a.disc-author:hover{text-decoration:underline;opacity:1;}
.disc-time{opacity:.45;}
.disc-last{opacity:.38;font-size:10px;color:var(--dim);}
.disc-preview{font-size:11px;color:#9db7ff;opacity:.6;margin-top:3px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.pinned{font-family:var(--vcr);font-size:8px;background:rgba(255,79,216,0.12);color:var(--pink);border:1px solid rgba(255,79,216,0.2);padding:2px 5px;border-radius:3px;letter-spacing:1px;}

/* ── INLINE THREAD VIEW ──────────────────────────────────── */
.thread-view{margin-top:6px;border-radius:10px;background:rgba(5,10,20,0.6);border:1px solid rgba(110,168,255,0.15);overflow:hidden;animation:threadOpen 0.25s ease;}
@keyframes threadOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.thread-header{padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,0.07);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.thread-title{font-size:15px;font-weight:700;color:#e6eefc;line-height:1.4;flex:1;}
.thread-close{font-family:var(--vcr);font-size:9px;color:var(--dim);background:none;border:1px solid rgba(255,255,255,0.1);border-radius:5px;padding:4px 8px;cursor:pointer;flex-shrink:0;transition:all 0.2s;letter-spacing:1px;}
.thread-close:hover{border-color:var(--pink);color:var(--pink);}
.thread-posts{max-height:55vh;min-height:420px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scroll-behavior:smooth;padding:12px 16px;display:flex;flex-direction:column;gap:12px;}
.post-item{display:flex;gap:12px;}
.post-avatar{width:36px;height:36px;border-radius:50%;background:rgba(110,168,255,0.15);border:1px solid rgba(110,168,255,0.2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--blue);flex-shrink:0;overflow:hidden;}
.post-avatar img{width:100%;height:100%;object-fit:cover;}
.post-body{flex:1;min-width:0;}
.post-meta{display:flex;gap:8px;align-items:center;margin-bottom:5px;flex-wrap:wrap;}
.post-author{font-size:12px;font-weight:600;color:var(--blue);text-decoration:none;}
a.post-author:hover{text-decoration:underline;}
.post-time{font-size:10px;opacity:.45;color:var(--dim);}
.post-num{font-family:var(--vcr);font-size:9px;color:var(--dim);opacity:.4;letter-spacing:1px;}
.post-op{font-family:var(--vcr);font-size:8px;background:rgba(110,168,255,0.12);color:var(--blue);padding:1px 5px;border-radius:3px;letter-spacing:1px;}
.post-content{font-size:13px;line-height:1.7;color:#d4e4fc;opacity:.9;}
.post-content p{margin-bottom:8px;}
.post-content p:last-child{margin-bottom:0;}
.post-content a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(110,168,255,0.3);}
.post-content a:hover{color:#e6eefc;}
.post-content blockquote{border-left:3px solid var(--blue);padding-left:12px;margin:12px 0;opacity:.9;}
.post-content code{font-family:var(--vcr);font-size:11px;background:rgba(255,255,255,0.06);padding:2px 5px;border-radius:5px;}
.post-content pre{background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:12px;overflow:auto;margin:12px 0;}
.post-content pre code{background:none;padding:0;}
.post-content img.emoji{height:1.2em;width:1.2em;vertical-align:-0.2em;}
.post-content .mention{color:var(--blue);text-decoration:none;font-weight:600;}
.post-content .mention:hover{text-decoration:underline;}
.post-content .mention-group{color:var(--purple);font-weight:600;}
.post-divider{height:1px;background:rgba(255,255,255,0.05);margin:2px 0;}

/* ── LOAD MORE ───────────────────────────────────────────── */
.load-more-wrap{padding:0 16px 8px;}
.load-more-btn{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:7px;border-radius:6px;width:100%;cursor:pointer;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--dim);transition:all 0.2s;margin-top:4px;}
.load-more-btn:hover{background:rgba(110,168,255,0.1);color:var(--blue);}
.load-more-btn:disabled{opacity:.4;cursor:default;}

/* ── REPLY BOX ───────────────────────────────────────────── */
.reply-area{padding:12px 16px;border-top:1px solid rgba(255,255,255,0.07);}
.reply-login-prompt{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.07);flex-wrap:wrap;gap:8px;}
.reply-login-text{font-size:12px;opacity:.6;color:var(--dim);}
.reply-login-btns{display:flex;gap:6px;}
.reply-box{display:flex;flex-direction:column;gap:8px;}
.reply-header{display:flex;align-items:center;gap:8px;}
.reply-as{font-family:var(--vcr);font-size:9px;color:var(--dim);opacity:.6;letter-spacing:1px;}
.reply-textarea{width:100%;min-height:80px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#e6eefc;font-family:'Poppins',sans-serif;font-size:13px;padding:10px 12px;resize:vertical;outline:none;transition:border-color 0.2s;line-height:1.6;}
.reply-textarea:focus{border-color:rgba(110,168,255,0.35);}
.reply-textarea::placeholder{opacity:.4;color:var(--dim);}
.reply-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.reply-hint{font-size:10px;opacity:.4;color:var(--dim);}
.reply-submit{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:6px 14px;border-radius:6px;cursor:pointer;border:1px solid rgba(110,168,255,0.3);background:rgba(110,168,255,0.12);color:var(--blue);transition:all 0.2s;}
.reply-submit:hover{background:rgba(110,168,255,0.22);border-color:var(--blue);}
.reply-submit:disabled{opacity:.4;cursor:default;}

/* ── POST TOOLS ──────────────────────────────────────────── */
.post-tools{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.emoji-btn{font-family:var(--vcr);font-size:10px;letter-spacing:1px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--dim);border-radius:7px;padding:7px 10px;cursor:pointer;transition:all .2s;}
.emoji-btn:hover{color:var(--blue);border-color:rgba(110,168,255,0.35);background:rgba(110,168,255,0.08);}
.mod-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;background:rgba(255,79,216,0.12);border:1px solid rgba(255,79,216,0.25);color:var(--pink);font-family:var(--vcr);font-size:8px;letter-spacing:1px;margin-left:6px;}
.guest-banner{margin-bottom:12px;padding:10px 14px;border-radius:8px;background:rgba(110,168,255,0.06);border:1px solid rgba(110,168,255,0.18);color:var(--blue);font-family:var(--vcr);font-size:9px;letter-spacing:1px;}

/* ── EMOJI PICKER ────────────────────────────────────────── */
.emoji-picker-pop{position:fixed;z-index:9999;background:#0d1525;border:1px solid rgba(110,168,255,0.25);border-radius:12px;padding:10px;width:280px;box-shadow:0 8px 32px rgba(0,0,0,0.6);display:none;flex-wrap:wrap;gap:2px;max-height:220px;overflow-y:auto;}
.emoji-picker-pop.open{display:flex;}
.emoji-picker-pop button{background:none;border:none;font-size:20px;cursor:pointer;padding:3px 4px;border-radius:5px;transition:background .15s;line-height:1;}
.emoji-picker-pop button:hover{background:rgba(110,168,255,0.15);}
.emoji-picker-search{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:#e6eefc;font-size:12px;padding:5px 8px;outline:none;margin-bottom:6px;}

.turnstile-wrap{margin:10px 0 4px;display:flex;justify-content:flex-start;}

/* ── LOCK NOTICE ─────────────────────────────────────────── */
.thread-locked{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,79,216,0.06);border:1px solid rgba(255,79,216,0.18);border-radius:8px;font-family:var(--vcr);font-size:9px;color:var(--pink);letter-spacing:1px;}

/* ── POST ACTIONS ────────────────────────────────────────── */
.post-action-btn{font-family:var(--vcr);font-size:9px;letter-spacing:1px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--dim);border-radius:7px;padding:4px 9px;cursor:pointer;transition:all .2s;}
.post-action-btn:hover{background:rgba(110,168,255,0.08);color:var(--blue);border-color:rgba(110,168,255,0.25);}
.post-action-btn.danger:hover{background:rgba(255,79,216,0.08);color:var(--pink);border-color:rgba(255,79,216,0.25);}
.post-edit-area{margin-top:8px;display:flex;flex-direction:column;gap:8px;}
.post-edit-textarea{width:100%;min-height:80px;background:rgba(255,255,255,0.04);border:1px solid rgba(110,168,255,0.3);border-radius:8px;color:#e6eefc;font-family:'Poppins',sans-serif;font-size:13px;padding:10px 12px;resize:vertical;outline:none;line-height:1.6;}
.post-edit-actions{display:flex;gap:8px;justify-content:flex-end;}
.post-edit-save{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:5px 13px;border-radius:6px;cursor:pointer;border:1px solid rgba(110,168,255,0.3);background:rgba(110,168,255,0.12);color:var(--blue);transition:all .2s;}
.post-edit-save:hover{background:rgba(110,168,255,0.22);}
.post-edit-save:disabled{opacity:.4;cursor:default;}
.post-edit-cancel{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:5px 11px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:var(--dim);transition:all .2s;}
.post-edit-cancel:hover{color:#e6eefc;}

/* ── LIKES / REACTIONS ───────────────────────────────────── */
.like-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--vcr);font-size:9px;letter-spacing:1px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:var(--dim);border-radius:7px;padding:4px 9px;cursor:pointer;transition:all .2s;}
.like-btn:hover{color:var(--pink);border-color:rgba(255,79,216,0.35);background:rgba(255,79,216,0.07);}
.like-btn.liked{color:var(--pink);border-color:rgba(255,79,216,0.4);background:rgba(255,79,216,0.1);}
.like-btn .like-count{opacity:.7;}
.reactions-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.reaction-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--vcr);font-size:9px;letter-spacing:1px;border:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.04);color:var(--dim);border-radius:999px;padding:3px 8px;cursor:pointer;transition:all .2s;}
.reaction-chip:hover{background:rgba(110,168,255,0.1);border-color:rgba(110,168,255,0.3);}
.reaction-chip.reacted{border-color:rgba(110,168,255,0.4);background:rgba(110,168,255,0.12);color:var(--blue);}
.reaction-chip img.emoji{height:1em;width:1em;vertical-align:-.1em;}

/* ── POLLS ───────────────────────────────────────────────── */
.poll-block{background:rgba(255,255,255,0.03);border:1px solid rgba(110,168,255,0.15);border-radius:10px;padding:14px 16px;margin:12px 16px 0;}
.poll-question{font-family:var(--vcr);font-size:10px;color:var(--blue);letter-spacing:1px;margin-bottom:10px;}
.poll-option{margin-bottom:7px;}
.poll-opt-bar-wrap{position:relative;background:rgba(255,255,255,0.05);border-radius:5px;height:26px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,0.07);transition:border-color .2s;}
.poll-opt-bar-wrap:hover{border-color:rgba(110,168,255,0.3);}
.poll-opt-bar-wrap.voted{border-color:rgba(110,168,255,0.4);}
.poll-opt-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(110,168,255,0.25),rgba(181,107,255,0.2));border-radius:5px;transition:width .4s ease;}
.poll-opt-label{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 10px;height:100%;font-size:11px;color:#d4e4fc;}
.poll-opt-pct{font-family:var(--vcr);font-size:9px;color:var(--blue);}
.poll-footer{font-family:var(--vcr);font-size:9px;color:var(--dim);opacity:.5;margin-top:8px;letter-spacing:1px;}

/* ── NEW THREAD FORM ─────────────────────────────────────── */
.new-thread-form{background:rgba(5,10,20,0.6);border:1px solid rgba(110,168,255,0.2);border-radius:12px;padding:16px;margin-bottom:12px;animation:threadOpen 0.25s ease;}
.form-title{font-family:var(--vcr);font-size:10px;color:var(--blue);letter-spacing:2px;margin-bottom:12px;}
.form-row{margin-bottom:10px;}
.form-label{font-family:var(--vcr);font-size:9px;color:var(--dim);letter-spacing:1px;opacity:.6;margin-bottom:5px;display:block;}
.form-input{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#e6eefc;font-family:'Poppins',sans-serif;font-size:13px;padding:9px 12px;outline:none;transition:border-color 0.2s;}
.form-input:focus{border-color:rgba(110,168,255,0.35);}
.form-input::placeholder{opacity:.4;color:var(--dim);}
.form-textarea{width:100%;min-height:120px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#e6eefc;font-family:'Poppins',sans-serif;font-size:13px;padding:10px 12px;resize:vertical;outline:none;transition:border-color 0.2s;line-height:1.6;}
.form-textarea:focus{border-color:rgba(110,168,255,0.35);}
.form-textarea::placeholder{opacity:.4;color:var(--dim);}
.form-select{width:100%;background:rgba(5,10,20,0.8);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#e6eefc;font-family:'Poppins',sans-serif;font-size:13px;padding:9px 12px;outline:none;cursor:pointer;}
.form-select option{background:#0b1220;}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
.form-cancel{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:6px 12px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--dim);transition:all 0.2s;}
.form-cancel:hover{color:#e6eefc;}
.form-submit{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:6px 14px;border-radius:6px;cursor:pointer;border:1px solid rgba(110,168,255,0.3);background:rgba(110,168,255,0.12);color:var(--blue);transition:all 0.2s;}
.form-submit:hover{background:rgba(110,168,255,0.22);}
.form-submit:disabled{opacity:.4;cursor:default;}
.char-counter{margin-top:6px;text-align:right;font-size:10px;color:var(--dim);opacity:.6;font-family:var(--vcr);letter-spacing:1px;}

/* ── MODALS ──────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;backdrop-filter:blur(10px);}
.modal-overlay.open{display:flex;}
.modal-box{max-width:420px;width:100%;background:#0b1220;border-radius:16px;border:1px solid rgba(110,168,255,0.2);overflow:hidden;}
.modal-header{padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center;}
.modal-title{font-family:var(--vcr);font-size:12px;color:var(--blue);letter-spacing:2px;}
.modal-close-btn{font-family:var(--vcr);font-size:10px;color:var(--dim);background:none;border:1px solid rgba(255,255,255,0.1);border-radius:5px;padding:3px 8px;cursor:pointer;letter-spacing:1px;}
.modal-close-btn:hover{border-color:var(--pink);color:var(--pink);}
.modal-tabs{display:flex;gap:0;padding:16px 20px 0;}
.modal-tab{font-family:var(--vcr);font-size:10px;letter-spacing:1px;padding:6px 16px;cursor:pointer;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--dim);transition:all 0.2s;}
.modal-tab:first-child{border-radius:6px 0 0 6px;}
.modal-tab:last-child{border-radius:0 6px 6px 0;border-left:none;}
.modal-tab.active{background:rgba(110,168,255,0.15);border-color:rgba(110,168,255,0.3);color:var(--blue);}
.modal-body{padding:20px;}
.modal-field{margin-bottom:12px;}
.modal-field label{font-family:var(--vcr);font-size:9px;color:var(--dim);letter-spacing:1px;opacity:.6;display:block;margin-bottom:5px;}
.modal-input{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#e6eefc;font-family:'Poppins',sans-serif;font-size:13px;padding:9px 12px;outline:none;transition:border-color 0.2s;}
.modal-input:focus{border-color:rgba(110,168,255,0.4);}
.modal-input::placeholder{opacity:.4;color:var(--dim);}
.modal-btn{width:100%;font-family:var(--vcr);font-size:10px;letter-spacing:2px;padding:11px;border-radius:8px;cursor:pointer;border:1px solid rgba(110,168,255,0.3);background:rgba(110,168,255,0.12);color:var(--blue);transition:all 0.2s;margin-top:4px;}
.modal-btn:hover{background:rgba(110,168,255,0.22);}
.modal-btn:disabled{opacity:.4;cursor:default;}
.modal-error{font-size:11px;color:var(--pink);margin-top:8px;padding:8px 10px;background:rgba(255,79,216,0.08);border-radius:6px;border:1px solid rgba(255,79,216,0.2);display:none;}
.modal-error.show{display:block;}
.modal-success{font-size:11px;color:#6eff9e;margin-top:8px;padding:8px 10px;background:rgba(110,255,158,0.08);border-radius:6px;border:1px solid rgba(110,255,158,0.2);display:none;}
.modal-success.show{display:block;}

/* ── SETTINGS MODAL ──────────────────────────────────────── */
.settings-box{width:min(540px,96vw);max-height:88vh;overflow-y:auto;padding-bottom:20px;}
.settings-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 20px 20px;border-bottom:1px solid var(--border);padding:16px 0 10px;}
.stab{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:5px 11px;border-radius:6px;cursor:pointer;border:1px solid transparent;background:rgba(255,255,255,0.03);color:var(--dim);transition:all .2s;}
.stab:hover{color:var(--blue);background:rgba(110,168,255,0.07);}
.stab.active{background:rgba(110,168,255,0.12);border-color:rgba(110,168,255,0.3);color:var(--blue);}
.stab.danger-tab{color:rgba(255,79,216,0.6);}
.stab.danger-tab:hover,.stab.danger-tab.active{color:var(--pink);background:rgba(255,79,216,0.08);border-color:rgba(255,79,216,0.25);}
.stab-panel{display:flex;flex-direction:column;gap:14px;padding:0 20px;}
.sfield{display:flex;flex-direction:column;gap:5px;}
.sfield-label{font-family:var(--vcr);font-size:9px;letter-spacing:1px;color:var(--dim);opacity:.7;}
.s-input{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#e6eefc;font-family:'Poppins',sans-serif;font-size:13px;padding:9px 12px;outline:none;transition:border .2s;}
.s-input:focus{border-color:rgba(110,168,255,0.4);}
.s-btn{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:7px 14px;border-radius:7px;cursor:pointer;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--dim);transition:all .2s;align-self:flex-start;}
.s-btn:hover{background:rgba(110,168,255,0.08);color:var(--blue);}
.s-btn.primary{background:rgba(110,168,255,0.12);border-color:rgba(110,168,255,0.3);color:var(--blue);}
.s-btn.primary:hover{background:rgba(110,168,255,0.22);}
.s-btn.danger{background:rgba(255,79,216,0.07);border-color:rgba(255,79,216,0.25);color:var(--pink);}
.s-btn.danger:hover{background:rgba(255,79,216,0.15);}
.s-btn:disabled{opacity:.4;cursor:default;}
.s-msg{font-size:12px;min-height:16px;transition:all .2s;}
.s-msg.ok{color:#6affb2;}
.s-msg.err{color:var(--pink);}
.s-hint{font-size:12px;color:var(--dim);opacity:.65;line-height:1.6;}
.danger-hint{color:var(--pink);opacity:.8;}
.danger-section{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid rgba(255,79,216,0.2);border-radius:10px;background:rgba(255,79,216,0.04);}
.settings-avatar-row{display:flex;align-items:center;gap:16px;}
.settings-avatar{width:64px;height:64px;border-radius:50%;background:rgba(110,168,255,0.2);border:2px solid rgba(110,168,255,0.3);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--blue);overflow:hidden;flex-shrink:0;}
.settings-avatar img{width:100%;height:100%;object-fit:cover;}
.settings-avatar-btns{display:flex;flex-direction:column;gap:6px;}
.avatar-preview-row{display:flex;align-items:center;gap:14px;padding:10px;background:rgba(110,168,255,0.05);border:1px solid rgba(110,168,255,0.2);border-radius:10px;}
.avatar-preview-img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(110,168,255,0.3);}
.tfa-status-row{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--border);flex-wrap:wrap;}
.tfa-badge{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:4px 10px;border-radius:5px;}
.tfa-badge.on{background:rgba(106,255,178,0.12);border:1px solid rgba(106,255,178,0.3);color:#6affb2;}
.tfa-badge.off{background:rgba(255,79,216,0.1);border:1px solid rgba(255,79,216,0.25);color:var(--pink);}
.tfa-qr-wrap{padding:16px;background:#fff;border-radius:10px;display:inline-block;margin:4px 0;align-self:flex-start;}
.tfa-qr-wrap img{display:block;}
.tfa-secret-box{font-family:var(--vcr);font-size:11px;letter-spacing:2px;padding:10px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:7px;color:var(--blue);word-break:break-all;}
.notif-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
.notif-row:last-child{border-bottom:none;}
.notif-label{font-size:12px;color:#e6eefc;}
.notif-sub{font-size:10px;color:var(--dim);opacity:.6;margin-top:2px;}
.toggle-wrap{position:relative;width:38px;height:22px;flex-shrink:0;}
.toggle-wrap input{opacity:0;width:0;height:0;position:absolute;}
.toggle-slider{position:absolute;inset:0;border-radius:11px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.12);cursor:pointer;transition:.2s;}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:var(--dim);transition:.2s;}
.toggle-wrap input:checked + .toggle-slider{background:rgba(110,168,255,0.25);border-color:rgba(110,168,255,0.4);}
.toggle-wrap input:checked + .toggle-slider::before{transform:translateX(16px);background:var(--blue);}

/* ── LOADING / EMPTY / ERROR ─────────────────────────────── */
.feed-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;gap:14px;}
.loading-bar{width:200px;height:3px;background:rgba(255,255,255,0.07);border-radius:2px;overflow:hidden;}
.loading-bar-inner{height:100%;width:35%;background:linear-gradient(90deg,var(--blue),var(--pink));animation:loadSlide 1.1s ease-in-out infinite;}
@keyframes loadSlide{0%{transform:translateX(-100%);}100%{transform:translateX(620%);}}
.loading-text{font-family:var(--vcr);font-size:11px;color:var(--blue);letter-spacing:2px;opacity:.8;}
.feed-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;gap:8px;font-family:var(--vcr);font-size:11px;color:var(--dim);letter-spacing:2px;opacity:.5;text-align:center;}
.feed-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;gap:8px;font-family:var(--vcr);font-size:11px;color:var(--pink);letter-spacing:2px;text-align:center;}

/* ── PAGINATION ──────────────────────────────────────────── */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06);}
.page-btn{font-family:var(--vcr);font-size:9px;letter-spacing:1px;padding:5px 11px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--dim);transition:all 0.2s;}
.page-btn:hover:not(:disabled){background:rgba(110,168,255,0.12);color:var(--blue);}
.page-btn:disabled{opacity:.3;cursor:default;}
.page-info{font-family:var(--vcr);font-size:9px;color:var(--dim);opacity:.5;}

/* ── STAGGER ─────────────────────────────────────────────── */
@keyframes staggerFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.stagger{opacity:0;animation:staggerFadeUp 0.3s ease forwards;}

/* ── TOAST ───────────────────────────────────────────────── */
.toast{position:fixed;bottom:24px;right:24px;z-index:9999;font-family:var(--vcr);font-size:10px;letter-spacing:1px;padding:10px 16px;border-radius:8px;background:#0b1220;border:1px solid rgba(110,168,255,0.3);color:var(--blue);transform:translateY(80px);opacity:0;transition:all 0.3s;pointer-events:none;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.error{border-color:rgba(255,79,216,0.3);color:var(--pink);}

/* ── SCROLLBAR / FOOTER ──────────────────────────────────── */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,0.02);}
::-webkit-scrollbar-thumb{background:rgba(110,168,255,0.25);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(110,168,255,0.5);}
.footer{text-align:center;padding:30px;opacity:.38;font-size:11px;font-family:var(--vcr);letter-spacing:2px;}

/* ── PROFILE BANNER PRESETS ──────────────────────────────
   Shared by profile.html (hero banner) and members.html (card strips) */
.bn-city{background:linear-gradient(rgba(5,10,20,0.35),rgba(5,10,20,0.7)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%230a1a2f'/%3E%3Cstop offset='1' stop-color='%23030610'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23g)'/%3E%3Cg fill='%230b2a4a'%3E%3Crect x='50' y='500' width='80' height='300'/%3E%3Crect x='140' y='450' width='60' height='350'/%3E%3Crect x='220' y='520' width='100' height='280'/%3E%3Crect x='340' y='430' width='90' height='370'/%3E%3Crect x='450' y='480' width='70' height='320'/%3E%3Crect x='540' y='410' width='120' height='390'/%3E%3Crect x='680' y='470' width='90' height='330'/%3E%3Crect x='790' y='520' width='80' height='280'/%3E%3Crect x='890' y='440' width='110' height='360'/%3E%3Crect x='1030' y='500' width='90' height='300'/%3E%3C/g%3E%3Cg fill='%23106bff' opacity='0.2'%3E%3Ccircle cx='200' cy='300' r='120'/%3E%3Ccircle cx='900' cy='250' r='160'/%3E%3C/g%3E%3C/svg%3E") center/cover;}
.bn-sakura{background:
  radial-gradient(circle at 15% 30%,rgba(255,138,194,0.5),transparent 45%),
  radial-gradient(circle at 70% 60%,rgba(255,90,168,0.4),transparent 50%),
  radial-gradient(circle at 45% 90%,rgba(255,184,107,0.3),transparent 45%),
  linear-gradient(180deg,#2a0d1e,#150710);}
.bn-stars{background:
  radial-gradient(1px 1px at 12% 25%,#fff,transparent),
  radial-gradient(1px 1px at 28% 65%,#fff,transparent),
  radial-gradient(2px 2px at 44% 15%,rgba(255,255,255,0.9),transparent),
  radial-gradient(1px 1px at 58% 45%,#fff,transparent),
  radial-gradient(1px 1px at 71% 78%,#fff,transparent),
  radial-gradient(2px 2px at 83% 30%,rgba(255,255,255,0.85),transparent),
  radial-gradient(1px 1px at 93% 60%,#fff,transparent),
  radial-gradient(1px 1px at 6% 80%,#fff,transparent),
  radial-gradient(circle at 75% 20%,rgba(110,168,255,0.25),transparent 40%),
  linear-gradient(180deg,#060d1f,#02040c);}
.bn-vapor{background:
  linear-gradient(transparent 60%,rgba(255,79,216,0.15)),
  repeating-linear-gradient(90deg,rgba(255,79,216,0.12) 0 1px,transparent 1px 60px),
  repeating-linear-gradient(0deg,rgba(255,79,216,0.12) 0 1px,transparent 1px 30px),
  radial-gradient(circle at 50% 0%,rgba(255,122,93,0.5),transparent 60%),
  linear-gradient(180deg,#1a0a2e,#0a0518);}
.bn-crt{background:
  repeating-linear-gradient(0deg,rgba(93,255,165,0.06) 0 2px,transparent 2px 6px),
  radial-gradient(circle at 50% 40%,rgba(93,255,165,0.18),transparent 70%),
  linear-gradient(180deg,#03150c,#020a06);}
.bn-noise{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"),
  linear-gradient(180deg,#101018,#050508);background-size:140px,cover;}

/* Links styled as s-btns (settings modal profile link, etc.) */
a.s-btn{text-decoration:none;display:inline-block;}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  /* clouds/scanlines reduced-motion now centralized in nooten-ui.js */
  .loading-bar-inner,.cat-dot{animation-duration:99s;}
}

/* ══════════════════════════════════════════════════════════
   MOBILE — ≤ 768px
══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .nav{padding:12px 16px;}
  .nav-links{display:none;}
  .nav-hamburger{display:flex;}

  .page-header{padding:20px 16px 10px;}
  .boards-sub{font-size:9px;letter-spacing:1px;}

  .boards-layout{grid-template-columns:1fr;grid-template-rows:auto auto;padding:8px 12px 60px;gap:10px;}

  .emoji-picker-pop{width:min(92vw,320px);left:4vw !important;}

  /* Sidebar → horizontal pill strip */
  .boards-sidebar{position:static;max-height:none;overflow-y:visible;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-behavior:smooth;touch-action:pan-x;gap:6px;padding:4px 0 8px;order:-1;scrollbar-width:none;}
  .boards-sidebar::-webkit-scrollbar{display:none;}
  .sidebar-stats{display:none;}
  .sidebar-label{display:none;}
  .cat-btn{flex-shrink:0;width:auto;padding:7px 12px;border-radius:20px;white-space:nowrap;gap:6px;}
  .cat-btn .cat-dot{position:static;transform:none;margin-left:2px;}
  .cat-name{font-size:12px;}
  .cat-icon{font-size:16px;}

  .feed-panel{padding:12px;border-radius:10px;}
  .feed-topbar{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:10px;}
  .feed-controls{width:100%;justify-content:space-between;}
  .new-btn{flex:1;text-align:center;padding:8px;font-size:10px;}
  .sort-btn{padding:6px 10px;font-size:9px;flex:1;text-align:center;white-space:nowrap;}

  .disc-card{padding:10px 10px 10px 12px;gap:10px;}
  .disc-title{font-size:13px;white-space:normal;overflow:visible;text-overflow:unset;line-height:1.35;}
  .disc-replies{min-width:28px;}
  .disc-reply-count{font-size:12px;}
  .disc-meta{gap:5px;font-size:10px;}

  .thread-header{padding:12px 12px 10px;}
  .thread-title{font-size:14px;}
  .thread-posts{padding:10px 12px;max-height:55vh;min-height:320px;touch-action:pan-y;}
  .post-avatar{width:30px;height:30px;font-size:11px;}
  .post-item{gap:8px;}
  .post-content pre{font-size:11px;}

  .reply-area{padding:10px 12px;}
  .reply-login-prompt{flex-direction:column;align-items:flex-start;gap:10px;}
  .reply-login-btns{width:100%;}
  .reply-login-btns button{flex:1;text-align:center;padding:8px;}
  .reply-footer{flex-direction:column;align-items:stretch;gap:6px;}
  .reply-submit{width:100%;padding:10px;font-size:10px;text-align:center;}
  .reply-hint{text-align:center;}

  .new-thread-form{padding:14px 12px;}
  .form-actions{flex-direction:column;}
  .form-submit,.form-cancel{width:100%;text-align:center;padding:10px;}

  .modal-box{border-radius:12px;}
  .modal-body{padding:16px;}
  /* 16px inputs prevent iOS zoom-on-focus */
  .modal-input,.form-input,.form-textarea,.form-select,.reply-textarea,.s-input,.post-edit-textarea{font-size:16px;}

  .pagination{gap:6px;}
  .page-btn{padding:8px 14px;font-size:10px;}

  .toast{left:16px;right:16px;bottom:16px;text-align:center;}
}

/* ── EXTRA SMALL — ≤ 380px ───────────────────────────────── */
@media (max-width: 380px){
  .boards-title{letter-spacing:1px;}
  .disc-title{font-size:12px;}
  .feed-controls{flex-wrap:wrap;}
  .sort-btn{flex:none;padding:6px 8px;}
}