/* ─────────────────────── VARIABLES ─────────────────────── */
:root{
  --bg:   #070810;
  --bg2:  #0b0c18;
  --bg3:  #10121e;
  --bg4:  #161824;
  --bg5:  #1c1f2c;
  --line: rgba(255,255,255,.06);
  --lne2: rgba(255,255,255,.03);
  --dim:  #252a40;
  --soft: #363d5a;
  --mid:  #525c80;
  --pale: #7f8db4;
  --lite: #b4c0e0;
  --wht:  #dde8ff;
  --ac:   #5b6ef5;
  --aca:  rgba(91,110,245,.1);
  --acb:  rgba(91,110,245,.25);
  --acc:  rgba(91,110,245,.4);
  --admin-c:    #ff4d6a; --admin-bg:   rgba(255,77,106,.1);  --admin-br:   rgba(255,77,106,.25);
  --arch-c:     #f0a428; --arch-bg:    rgba(240,164,40,.08); --arch-br:    rgba(240,164,40,.22);
  --dev-c:      #5b6ef5; --dev-bg:     rgba(91,110,245,.08); --dev-br:     rgba(91,110,245,.22);
  --user-c:     #7f8db4; --user-bg:    rgba(127,141,180,.05);--user-br:    rgba(127,141,180,.15);
  --gr:   #34d77a; --gra:  rgba(52,215,122,.08); --grb:  rgba(52,215,122,.2);
  --rd:   #ff4d6a; --rda:  rgba(255,77,106,.08);
  --fh: 'Space Grotesk',sans-serif;
  --fm: 'Fira Code',monospace;
  --fb: 'Inter',sans-serif;
  --sidebar-w: 240px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { height:100%; scroll-behavior:smooth }
body { background:var(--bg); color:var(--lite); font-family:var(--fb); height:100vh; display:flex; flex-direction:column; overflow:hidden; transition:background .25s,color .25s }
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px }
a { color:inherit; text-decoration:none }

/* ─────────────── HEADER ─────────────── */
.hdr {
  flex-shrink:0; height:52px; padding:0 20px;
  display:flex; align-items:center; gap:14px;
  background:var(--bg2); border-bottom:1px solid var(--line);
  position:relative; z-index:100;
}
.hdr-logo {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--fh); font-size:14px; font-weight:700;
  color:var(--wht); letter-spacing:-.02em; white-space:nowrap; flex-shrink:0;
}
.hdr-logo-hex {
  width:30px; height:30px; flex-shrink:0;
  background:linear-gradient(135deg,var(--ac),#3a4ecc);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:#fff; font-family:var(--fh);
}
.hdr-search {
  flex:1; max-width:380px; position:relative;
}
.hdr-search input {
  width:100%; background:var(--bg3); border:1px solid var(--line);
  border-radius:8px; padding:7px 14px 7px 34px;
  font-family:var(--fb); font-size:12px; color:var(--lite); outline:none; transition:.2s;
}
.hdr-search input:focus { border-color:var(--acb); box-shadow:0 0 0 3px var(--aca) }
.hdr-search input::placeholder { color:var(--soft) }
.hdr-search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--soft); font-size:13px }
.hdr-search-results {
  display:none; position:absolute; top:calc(100%+4px); left:0; right:0;
  background:var(--bg3); border:1px solid var(--acb); border-radius:8px;
  overflow:hidden; z-index:300; box-shadow:0 8px 32px rgba(0,0,0,.6);
}
.hdr-search-results.open { display:block }
.sr-item { padding:9px 14px; cursor:pointer; display:flex; flex-direction:column; gap:2px; transition:.12s; border-bottom:1px solid var(--lne2) }
.sr-item:last-child { border-bottom:none }
.sr-item:hover { background:var(--aca) }
.sr-item-title { font-family:var(--fh); font-size:12px; color:var(--wht) }
.sr-item-meta  { font-family:var(--fm); font-size:9px; color:var(--soft) }
.hdr-right { margin-left:auto; display:flex; align-items:center; gap:8px }
.hdr-btn {
  font-family:var(--fh); font-size:11px; font-weight:500; letter-spacing:.01em;
  padding:5px 12px; border-radius:6px; cursor:pointer; transition:.15s; border:none;
}
.btn-ghost { background:none; color:var(--mid) }
.btn-ghost:hover { color:var(--lite); background:var(--bg3) }
.btn-outline { background:none; color:var(--lite); border:1px solid var(--line)!important }
.btn-outline:hover { border-color:var(--acb)!important; color:var(--wht) }
.btn-solid { background:var(--ac); color:#fff }
.btn-solid:hover { filter:brightness(1.1); box-shadow:0 0 16px rgba(91,110,245,.35) }

/* theme toggle */
.theme-toggle { background:none; border:1px solid var(--line); border-radius:6px; padding:4px 8px; font-size:14px; cursor:pointer; color:var(--pale); transition:.15s; line-height:1 }
.theme-toggle:hover { border-color:var(--acb); background:var(--aca) }

/* User chip */
.user-chip {
  display:flex; align-items:center; gap:7px; padding:4px 10px 4px 4px;
  border-radius:20px; background:var(--bg3); border:1px solid var(--line);
  cursor:pointer; transition:.15s; position:relative;
}
.user-chip:hover { border-color:var(--acb) }
.user-avatar {
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
}
.user-info { display:flex; flex-direction:column; gap:0 }
.user-name { font-family:var(--fh); font-size:11px; font-weight:600; color:var(--wht); line-height:1.2 }
.user-menu {
  display:none; position:absolute; top:calc(100%+6px); right:0; min-width:170px;
  background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  overflow:hidden; z-index:200; box-shadow:0 8px 32px rgba(0,0,0,.6);
}
.user-menu.open { display:block }
.um-item { padding:9px 14px; cursor:pointer; font-family:var(--fh); font-size:12px; color:var(--pale); transition:.12s; display:flex; align-items:center; gap:8px }
.um-item:hover { background:var(--aca); color:var(--wht) }
.um-item.danger { color:var(--rd) }
.um-item.danger:hover { background:var(--rda) }
.um-sep { height:1px; background:var(--line) }

/* ─────────────── LAYOUT ─────────────── */
.body { flex:1; display:flex; overflow:hidden }
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; border-right:1px solid var(--line);
  background:var(--bg2); overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column;
}
.sidebar::-webkit-scrollbar { width:2px }
.sb-section { font-family:var(--fm); font-size:7px; color:var(--dim); letter-spacing:.22em; text-transform:uppercase; padding:14px 16px 4px }
.sb-item {
  display:flex; align-items:center; gap:8px; padding:7px 16px;
  cursor:pointer; font-family:var(--fb); font-size:12px; color:var(--mid);
  border-left:2px solid transparent; transition:.12s; white-space:nowrap; overflow:hidden;
}
.sb-item:hover { color:var(--lite); background:rgba(91,110,245,.04) }
.sb-item.on { color:var(--wht); background:var(--aca); border-left-color:var(--ac) }
.sb-icon { font-size:13px; flex-shrink:0 }
.sb-count { margin-left:auto; font-family:var(--fm); font-size:8px; color:var(--dim); flex-shrink:0 }
.sb-lock { font-size:9px; color:var(--soft); margin-left:2px; flex-shrink:0 }
.sb-cat-hdr {
  display:flex; align-items:center; gap:7px; padding:10px 16px 6px;
  font-family:var(--fh); font-size:10px; font-weight:600; color:var(--pale);
  letter-spacing:.04em; border-top:1px solid var(--lne2); margin-top:4px;
}
.sb-cat-icon { font-size:12px }
.sb-stats {
  margin-top:auto; padding:14px 16px; border-top:1px solid var(--lne2);
  font-family:var(--fm); font-size:9px; color:var(--soft); display:flex; flex-direction:column; gap:5px;
}
.ss-row { display:flex; justify-content:space-between; align-items:center }
.ss-val { color:var(--pale) }
.ss-online { display:flex; align-items:center; gap:5px }
.ss-dot { width:5px; height:5px; border-radius:50%; background:var(--gr); box-shadow:0 0 5px var(--gr); animation:pulse 2s ease-in-out infinite }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }

/* ─────────────── MAIN CONTENT ─────────────── */
.main { flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column }
.main::-webkit-scrollbar { width:3px }
.view { display:none; flex:1 }
.view.active { display:flex; flex-direction:column }

/* ─── HOME VIEW ─── */
.home-hero {
  padding:28px 28px 20px; background:linear-gradient(to bottom,var(--bg2),var(--bg));
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.home-eyebrow { font-family:var(--fm); font-size:8px; color:var(--ac); letter-spacing:.3em; text-transform:uppercase; margin-bottom:8px }
.home-title { font-family:var(--fh); font-size:clamp(18px,2.5vw,28px); font-weight:700; color:var(--wht); letter-spacing:-.02em; margin-bottom:6px }
.home-sub { font-family:var(--fb); font-size:13px; font-weight:300; color:var(--mid) }
.home-stats-bar { display:flex; gap:20px; margin-top:16px; flex-wrap:wrap }
.hstat { display:flex; flex-direction:column }
.hstat-v { font-family:var(--fh); font-size:18px; font-weight:700; color:var(--wht) }
.hstat-l { font-family:var(--fm); font-size:7px; color:var(--soft); letter-spacing:.14em; text-transform:uppercase; margin-top:2px }
.home-body { padding:24px 28px; flex:1 }
.home-cols { display:grid; grid-template-columns:1fr 300px; gap:20px }
@media(max-width:1000px) { .home-cols { grid-template-columns:1fr } }
.section-label { font-family:var(--fm); font-size:8px; color:var(--mid); letter-spacing:.2em; text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:8px }
.section-label::after { content:''; flex:1; height:1px; background:var(--lne2) }

/* Recent threads */
.thread-list { display:flex; flex-direction:column; gap:2px }
.tl-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--bg2); border:1px solid var(--line); border-radius:7px;
  cursor:pointer; transition:border-color .15s, transform .15s;
}
.tl-item:hover { border-color:var(--acb); transform:translateX(2px) }
.tl-icon { font-size:16px; flex-shrink:0 }
.tl-body { flex:1; min-width:0 }
.tl-title { font-family:var(--fh); font-size:12px; font-weight:600; color:var(--wht); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:2px }
.tl-meta  { font-family:var(--fm); font-size:9px; color:var(--soft) }
.tl-right { text-align:right; flex-shrink:0 }
.tl-replies { font-family:var(--fh); font-size:11px; font-weight:600; color:var(--pale) }
.tl-sub { font-family:var(--fm); font-size:8px; color:var(--dim) }

/* Widgets */
.widget { background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:14px }
.widget-title { font-family:var(--fh); font-size:11px; font-weight:700; color:var(--pale); margin-bottom:12px; letter-spacing:.02em }
.widget-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--lne2) }
.widget-row:last-child { border-bottom:none }
.wr-avatar { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:9px; font-weight:700; color:#fff }
.wr-name { font-family:var(--fh); font-size:11px; color:var(--lite) }
.wr-count { margin-left:auto; font-family:var(--fm); font-size:9px; color:var(--dim) }

/* ─── BOARD VIEW ─── */
.board-hdr {
  padding:20px 28px 16px; border-bottom:1px solid var(--line);
  background:var(--bg2); flex-shrink:0;
}
.board-breadcrumb { font-family:var(--fm); font-size:9px; color:var(--soft); margin-bottom:6px; display:flex; align-items:center; gap:5px }
.bc-link { cursor:pointer; transition:.12s }
.bc-link:hover { color:var(--pale) }
.bc-sep { color:var(--dim) }
.board-name { font-family:var(--fh); font-size:20px; font-weight:700; color:var(--wht); letter-spacing:-.02em; margin-bottom:3px }
.board-desc { font-family:var(--fb); font-size:12px; font-weight:300; color:var(--mid) }
.board-actions { display:flex; align-items:center; gap:8px; margin-top:14px }
.new-thread-btn {
  display:flex; align-items:center; gap:6px; padding:8px 16px; border-radius:7px;
  background:var(--ac); color:#fff; border:none; cursor:pointer; font-family:var(--fh); font-size:11px;
  font-weight:600; transition:.2s;
}
.new-thread-btn:hover { filter:brightness(1.1); box-shadow:0 0 16px rgba(91,110,245,.3) }
.new-thread-btn:disabled { background:var(--bg4); color:var(--soft); cursor:not-allowed }
.thread-table { flex:1; overflow-y:auto }
.tt-header {
  display:grid; grid-template-columns:1fr 80px 80px 140px;
  padding:7px 28px; font-family:var(--fm); font-size:8px; color:var(--soft);
  letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--lne2);
  position:sticky; top:0; background:var(--bg); z-index:10;
}
.tt-row {
  display:grid; grid-template-columns:1fr 80px 80px 140px;
  padding:11px 28px; border-bottom:1px solid var(--lne2);
  cursor:pointer; transition:background .12s; align-items:center;
}
.tt-row:hover { background:rgba(91,110,245,.03) }
.tt-main { display:flex; flex-direction:column; gap:3px; min-width:0 }
.tt-title-wrap { display:flex; align-items:center; gap:6px }
.tt-title { font-family:var(--fh); font-size:13px; font-weight:600; color:var(--wht); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tt-meta  { font-family:var(--fm); font-size:9px; color:var(--soft) }
.tt-badge { font-family:var(--fm); font-size:7px; letter-spacing:.1em; padding:1px 5px; border-radius:2px }
.badge-pinned { background:rgba(240,164,40,.1); color:var(--arch-c); border:1px solid rgba(240,164,40,.2) }
.badge-locked { background:rgba(127,141,180,.06); color:var(--mid); border:1px solid rgba(127,141,180,.12) }
.badge-hot    { background:var(--rda); color:var(--rd); border:1px solid rgba(255,77,106,.2) }
.tt-num { font-family:var(--fh); font-size:13px; font-weight:600; color:var(--pale); text-align:center }
.tt-last { font-family:var(--fm); font-size:9px; color:var(--soft) }
.tt-last strong { color:var(--pale); font-weight:400 }
.tt-empty { text-align:center; padding:60px; font-family:var(--fm); font-size:10px; color:var(--soft) }
.pager { display:flex; justify-content:center; gap:5px; padding:16px 0 }
.pg-btn { font-family:var(--fm); font-size:9px; color:var(--mid); padding:5px 10px; border:1px solid var(--line); border-radius:4px; cursor:pointer; background:none; transition:.12s }
.pg-btn:hover { color:var(--pale); border-color:var(--soft) }
.pg-btn.on { color:var(--ac); border-color:var(--acb); background:var(--aca); cursor:default }
.pg-btn:disabled { color:var(--dim); cursor:not-allowed }

/* ─── THREAD VIEW ─── */
.thread-hdr {
  padding:20px 28px 16px; border-bottom:1px solid var(--line);
  background:var(--bg2); flex-shrink:0;
}
.thread-title { font-family:var(--fh); font-size:18px; font-weight:700; color:var(--wht); letter-spacing:-.02em; margin-bottom:4px }
.thread-meta-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.posts-list { flex:1; overflow-y:auto; padding:20px 28px; display:flex; flex-direction:column; gap:0 }
.posts-list::-webkit-scrollbar { width:3px }
.post-wrap {
  display:grid; grid-template-columns:160px 1fr;
  border:1px solid var(--line); border-radius:8px; margin-bottom:10px;
  overflow:hidden; background:var(--bg2); transition:border-color .15s;
}
.post-wrap:hover { border-color:rgba(91,110,245,.14) }
.post-wrap.op-post { border-color:rgba(91,110,245,.2) }
.post-author {
  background:var(--bg3); border-right:1px solid var(--line);
  padding:16px 14px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.pa-avatar {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-size:18px; font-weight:700; color:#fff; border:2px solid rgba(255,255,255,.08);
}
.pa-name { font-family:var(--fh); font-size:11px; font-weight:600; color:var(--wht); text-align:center }
.pa-stats { font-family:var(--fm); font-size:8px; color:var(--soft); text-align:center; line-height:1.8 }
.post-body { padding:14px 18px; display:flex; flex-direction:column; min-width:0 }
.post-ts { font-family:var(--fm); font-size:8px; color:var(--dim); margin-bottom:10px }
.post-content { flex:1 }
.post-footer { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--lne2) }
.vote-btn {
  display:flex; align-items:center; gap:5px; padding:4px 10px; border-radius:5px;
  background:none; border:1px solid var(--line); color:var(--soft); cursor:pointer;
  font-family:var(--fm); font-size:9px; transition:.15s;
}
.vote-btn:hover { border-color:var(--acb); color:var(--ac) }
.vote-btn.voted { border-color:var(--acb); color:var(--ac); background:var(--aca) }
.post-del-btn { margin-left:auto; background:none; border:none; color:var(--soft); cursor:pointer; font-size:10px; transition:.12s; padding:3px 7px; border-radius:3px; font-family:var(--fm) }
.post-del-btn:hover { color:var(--rd); background:var(--rda) }

/* Reply box */
.reply-box {
  flex-shrink:0; border-top:1px solid var(--line); background:var(--bg2); padding:16px 28px;
}
.reply-box-inner { display:flex; flex-direction:column; gap:8px }
.reply-label { font-family:var(--fm); font-size:8px; color:var(--soft); letter-spacing:.14em; text-transform:uppercase }
.reply-textarea {
  width:100%; background:var(--bg3); border:1px solid var(--line); border-radius:7px;
  padding:10px 14px; font-family:var(--fb); font-size:13px; color:var(--lite);
  outline:none; resize:vertical; min-height:90px; transition:.2s; line-height:1.7;
}
.reply-textarea:focus { border-color:var(--acb); box-shadow:0 0 0 3px var(--aca) }
.reply-textarea::placeholder { color:var(--soft) }
.reply-actions { display:flex; align-items:center; gap:8px }
.reply-hint { font-family:var(--fm); font-size:8px; color:var(--dim) }
.reply-submit { padding:8px 20px; border-radius:7px; background:var(--ac); color:#fff; border:none; font-family:var(--fh); font-size:11px; font-weight:600; cursor:pointer; transition:.2s }
.reply-submit:hover { filter:brightness(1.1) }
.reply-submit:disabled { background:var(--bg4); color:var(--soft); cursor:not-allowed }
.reply-locked { font-family:var(--fm); font-size:10px; color:var(--mid); text-align:center; padding:8px; background:var(--bg3); border-radius:6px; border:1px solid var(--line) }

/* ─────────────── MARKDOWN ─────────────── */
.post-content h1{font-family:var(--fh);font-size:18px;font-weight:700;color:var(--wht);margin:14px 0 8px;letter-spacing:-.01em}
.post-content h2{font-family:var(--fh);font-size:15px;font-weight:600;color:var(--wht);margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--lne2)}
.post-content h3{font-family:var(--fh);font-size:13px;font-weight:600;color:var(--lite);margin:10px 0 5px}
.post-content p{line-height:1.75;font-size:13px;margin:4px 0}
.post-content code{font-family:var(--fm);font-size:11px;background:var(--bg);color:var(--ac);padding:1px 5px;border-radius:3px;border:1px solid var(--lne2)}
.post-content pre{background:var(--bg);border:1px solid var(--lne2);border-radius:7px;padding:12px 14px;overflow-x:auto;margin:8px 0}
.post-content pre code{background:none;border:none;padding:0;font-size:12px;color:var(--lite);line-height:1.7}
.post-content ul{padding-left:18px;margin:6px 0}
.post-content li{line-height:1.75;font-size:13px;margin:2px 0}
.post-content table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12px}
.post-content th{font-family:var(--fh);font-size:10px;text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);color:var(--pale);font-weight:600}
.post-content td{padding:6px 10px;border-bottom:1px solid var(--lne2);color:var(--lite)}
.post-content a{color:var(--ac);text-decoration:underline;text-decoration-color:var(--acb)}
.post-content hr{border:none;border-top:1px solid var(--line);margin:14px 0}
.post-content strong{color:var(--wht);font-weight:600}
.post-content em{color:var(--pale)}
.post-content s{color:var(--soft)}
.md-code[data-lang]::before{content:attr(data-lang);display:block;font-family:var(--fm);font-size:8px;color:var(--soft);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}

/* ─────────────── ROLE BADGES ─────────────── */
.rbadge {
  display:inline-flex; align-items:center; gap:3px;
  font-family:var(--fm); font-size:7px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px; border:1px solid; flex-shrink:0;
}
.rbadge-admin    { color:var(--admin-c); border-color:var(--admin-br); background:var(--admin-bg) }
.rbadge-architect{ color:var(--arch-c);  border-color:var(--arch-br);  background:var(--arch-bg) }
.rbadge-dev      { color:var(--dev-c);   border-color:var(--dev-br);   background:var(--dev-bg) }
.rbadge-user     { color:var(--user-c);  border-color:var(--user-br);  background:var(--user-bg) }
.rbadge-op       { color:var(--gr); border-color:var(--grb); background:var(--gra) }

/* ─────────────── MODALS ─────────────── */
.modal-bg { display:none; position:fixed; inset:0; z-index:500; background:rgba(7,8,16,.85); backdrop-filter:blur(8px); align-items:center; justify-content:center }
.modal-bg.open { display:flex }
.modal { background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:28px; width:90%; max-width:440px }
.modal-title { font-family:var(--fh); font-size:17px; font-weight:700; color:var(--wht); margin-bottom:20px; letter-spacing:-.01em }
.fg { display:flex; flex-direction:column; gap:5px; margin-bottom:14px }
.fl { font-family:var(--fm); font-size:8px; color:var(--soft); letter-spacing:.14em; text-transform:uppercase }
.fi { background:var(--bg3); border:1px solid var(--line); border-radius:6px; padding:9px 13px; font-family:var(--fb); font-size:13px; color:var(--lite); outline:none; transition:.2s; width:100% }
.fi:focus { border-color:var(--acb); box-shadow:0 0 0 3px var(--aca) }
.fi::placeholder { color:var(--soft) }
.modal-error { font-family:var(--fm); font-size:9px; color:var(--rd); margin-bottom:10px; display:none }
.modal-error.show { display:block }
.modal-actions { display:flex; gap:8px; margin-top:6px }
.modal-btn { flex:1; padding:10px; border-radius:7px; font-family:var(--fh); font-size:11px; font-weight:600; cursor:pointer; border:none; transition:.2s }
.mbtn-primary { background:var(--ac); color:#fff }
.mbtn-primary:hover { filter:brightness(1.1) }
.mbtn-ghost { background:var(--bg3); color:var(--pale); border:1px solid var(--line)!important }
.mbtn-ghost:hover { border-color:var(--acb)!important; color:var(--wht) }
.modal-switch { text-align:center; margin-top:14px; font-family:var(--fb); font-size:12px; color:var(--soft) }
.modal-switch a { color:var(--ac); cursor:pointer }
.nexus-sso-btn {
  width:100%; padding:10px; border-radius:7px; font-family:var(--fh); font-size:11px; font-weight:600;
  cursor:pointer; border:1px solid var(--acb); background:var(--aca); color:var(--ac);
  transition:.2s; margin-top:10px;
}
.nexus-sso-btn:hover { background:var(--acb) }
.modal-divider { text-align:center; font-family:var(--fm); font-size:8px; color:var(--soft); margin:12px 0; position:relative }
.modal-divider::before,.modal-divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--line) }
.modal-divider::before { left:0 }
.modal-divider::after { right:0 }
.nt-modal { max-width:600px }
.nt-textarea { background:var(--bg3); border:1px solid var(--line); border-radius:7px; padding:12px 14px; font-family:var(--fb); font-size:13px; color:var(--lite); outline:none; resize:vertical; min-height:200px; transition:.2s; width:100%; line-height:1.7 }
.nt-textarea:focus { border-color:var(--acb); box-shadow:0 0 0 3px var(--aca) }
.nt-textarea::placeholder { color:var(--soft) }
.md-hint { font-family:var(--fm); font-size:8px; color:var(--dim) }

/* Toast */
.toast { position:fixed; bottom:20px; right:20px; z-index:700; background:var(--bg2); border:1px solid var(--acb); border-radius:8px; padding:9px 16px; font-family:var(--fm); font-size:9px; color:var(--pale); box-shadow:0 4px 20px rgba(0,0,0,.6); animation:fadeup .3s ease }
@keyframes fadeup { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none} }
.skeleton { background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:6px }
@keyframes shimmer { to{background-position:-200% 0} }
.loading-placeholder { padding:20px 28px; display:flex; flex-direction:column; gap:8px }
.restricted-notice { margin:28px; padding:20px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; text-align:center }
.rn-icon { font-size:28px; margin-bottom:10px }
.rn-title { font-family:var(--fh); font-size:15px; font-weight:700; color:var(--wht); margin-bottom:6px }
.rn-desc { font-family:var(--fb); font-size:13px; font-weight:300; color:var(--mid) }

/* Hamburger */
.forum-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:3px;flex-shrink:0}
.forum-burger span{display:block;width:16px;height:2px;background:var(--mid);border-radius:1px;transition:.3s}
.forum-burger:hover span{background:var(--ac)}
.forum-burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.forum-burger.open span:nth-child(2){opacity:0}
.forum-burger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.forum-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:49;backdrop-filter:blur(4px)}
.forum-sidebar-overlay.open{display:block}

/* ─────────────── HOME TABS ─────────────── */
.home-tabs {
  display:flex; gap:2px; margin-bottom:16px;
  background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:3px;
  width:fit-content;
}
.home-tab {
  font-family:var(--fh); font-size:11px; font-weight:500; color:var(--mid);
  padding:6px 16px; border-radius:6px; border:none; background:none;
  cursor:pointer; transition:.15s; letter-spacing:.02em;
}
.home-tab:hover { color:var(--lite) }
.home-tab.active { color:var(--wht); background:var(--ac) }
.home-sidebar-panel { display:flex; flex-direction:column; gap:14px }

/* ─────────────── MARKDOWN TOOLBAR ─────────────── */
.md-toolbar {
  display:flex; gap:2px; padding:4px; background:var(--bg3);
  border:1px solid var(--line); border-bottom:none;
  border-radius:6px 6px 0 0;
}
.md-toolbar + .nt-textarea,
.md-toolbar + textarea { border-radius:0 0 7px 7px }
.md-toolbar button {
  background:none; border:1px solid transparent; border-radius:4px;
  color:var(--mid); cursor:pointer; padding:4px 8px; font-size:11px;
  font-family:var(--fm); transition:.12s; line-height:1;
}
.md-toolbar button:hover { background:var(--aca); border-color:var(--acb); color:var(--wht) }

/* ─────────────── THREAD TITLE ROW ─────────────── */
.thread-title-row { display:flex; align-items:flex-start; gap:12px }
.thread-title-row .thread-title { flex:1 }
.thread-mod-tools { display:flex; gap:4px; flex-shrink:0 }
.mod-btn {
  font-family:var(--fm); font-size:9px; letter-spacing:.06em;
  padding:4px 10px; border-radius:4px; border:1px solid var(--line);
  background:none; color:var(--soft); cursor:pointer; transition:.15s;
}
.mod-btn:hover { border-color:var(--acb); color:var(--pale); background:var(--aca) }
.mod-btn.active { border-color:var(--acb); color:var(--ac); background:var(--aca) }

/* ─────────────── COLOR PICKER ─────────────── */
.color-picker { display:flex; flex-wrap:wrap; gap:6px }
.cp-option {
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:.15s;
}
.cp-option:hover { transform:scale(1.15) }
.cp-option.active { border-color:var(--wht); box-shadow:0 0 0 2px var(--ac) }

/* ─────────────── POST ACTIONS ─────────────── */
.post-edit-btn, .post-quote-btn {
  background:none; border:none; color:var(--soft); cursor:pointer;
  font-size:10px; transition:.12s; padding:3px 7px; border-radius:3px; font-family:var(--fm);
}
.post-edit-btn:hover { color:var(--ac); background:var(--aca) }
.post-quote-btn:hover { color:var(--pale); background:rgba(127,141,180,.08) }

/* ─────────────── USER PROFILE ─────────────── */
.profile-wrap { padding:28px; overflow-y:auto; flex:1 }
.profile-header {
  display:flex; align-items:flex-start; gap:20px; padding:24px;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  margin-bottom:20px;
}
.profile-avatar {
  width:72px; height:72px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-size:28px; font-weight:700; color:#fff;
  border:3px solid rgba(255,255,255,.1);
}
.profile-info { flex:1; min-width:0 }
.profile-name { font-family:var(--fh); font-size:22px; font-weight:700; color:var(--wht); margin-bottom:4px }
.profile-bio { font-family:var(--fb); font-size:13px; color:var(--mid); line-height:1.7; margin-top:8px }
.profile-stats-row {
  display:flex; gap:20px; margin-top:12px;
}
.profile-stat {
  display:flex; flex-direction:column;
}
.profile-stat-v { font-family:var(--fh); font-size:16px; font-weight:700; color:var(--wht) }
.profile-stat-l { font-family:var(--fm); font-size:7px; color:var(--soft); letter-spacing:.12em; text-transform:uppercase; margin-top:2px }

.profile-section-title {
  font-family:var(--fm); font-size:8px; color:var(--mid); letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.profile-section-title::after { content:''; flex:1; height:1px; background:var(--lne2) }

.profile-thread-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--bg2); border:1px solid var(--line); border-radius:7px;
  cursor:pointer; transition:border-color .15s; margin-bottom:4px;
}
.profile-thread-item:hover { border-color:var(--acb) }
.pti-title { font-family:var(--fh); font-size:12px; font-weight:600; color:var(--wht); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pti-meta { font-family:var(--fm); font-size:9px; color:var(--soft); flex-shrink:0 }

.profile-post-item {
  padding:12px; background:var(--bg2); border:1px solid var(--line);
  border-radius:7px; margin-bottom:4px; cursor:pointer; transition:border-color .15s;
}
.profile-post-item:hover { border-color:var(--acb) }
.ppi-thread { font-family:var(--fm); font-size:9px; color:var(--ac); margin-bottom:4px }
.ppi-content { font-family:var(--fb); font-size:12px; color:var(--lite); line-height:1.6 }
.ppi-meta { font-family:var(--fm); font-size:9px; color:var(--soft); margin-top:6px }

/* ─────────────── ONLINE USERS CHIP ─────────────── */
.online-chip {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 2px;
  background:var(--bg3); border:1px solid var(--lne2); border-radius:10px;
  font-family:var(--fh); font-size:9px; color:var(--pale); cursor:pointer; transition:.12s;
}
.online-chip:hover { border-color:var(--acb); color:var(--wht) }
.online-chip .oc-dot {
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:7px; font-weight:700; color:#fff;
}

/* ─────────────── LIGHT THEME ─────────────── */
:root.light {
  --bg:#f4f6ff; --bg2:#edf0ff; --bg3:#e3e8ff; --bg4:#d8ddff; --bg5:#cdd3ff;
  --line:rgba(80,90,160,.12); --lne2:rgba(80,90,160,.06);
  --dim:#bdc5f0; --soft:#8090c8; --mid:#5060a8; --pale:#3048a0; --lite:#162088; --wht:#0a1060;
  --ac:#4a5fe0; --aca:rgba(74,95,224,.08); --acb:rgba(74,95,224,.22); --acc:rgba(74,95,224,.45);
  --admin-c:#c0102a; --admin-bg:rgba(192,16,42,.07); --admin-br:rgba(192,16,42,.2);
  --arch-c:#8a5a00; --arch-bg:rgba(138,90,0,.07); --arch-br:rgba(138,90,0,.2);
  --dev-c:#2a40c8; --dev-bg:rgba(42,64,200,.07); --dev-br:rgba(42,64,200,.2);
  --user-c:#4050a0; --user-bg:rgba(64,80,160,.05); --user-br:rgba(64,80,160,.15);
  --gr:#0e7a3a; --gra:rgba(14,122,58,.07); --grb:rgba(14,122,58,.18);
  --rd:#c02030; --rda:rgba(192,32,48,.07);
}
:root.light .hdr { background:rgba(237,240,255,.96) }
:root.light .sidebar { background:var(--bg2) }
:root.light .tt-header { background:var(--bg) }
:root.light .modal-bg { background:rgba(10,20,100,.65) }
:root.light .toast { box-shadow:0 4px 20px rgba(74,95,224,.2) }

/* ─────────────── RESPONSIVE ─────────────── */
@media(max-width:800px) {
  :root { --sidebar-w:60px }
  .sb-item span:not(.sb-icon) { display:none }
  .sb-count { display:none }
  .sb-cat-hdr span:not(.sb-cat-icon) { display:none }
  .sidebar:hover { width:240px; position:absolute; z-index:50; height:100%; box-shadow:4px 0 20px rgba(0,0,0,.5) }
  .post-wrap { grid-template-columns:80px 1fr }
  .pa-stats { display:none }
  .tt-header,.tt-row { grid-template-columns:1fr 60px 60px }
  .tt-header>:last-child,.tt-row>:last-child { display:none }
}
@media(max-width:640px) {
  .forum-burger{display:flex}
  .sidebar{position:fixed;top:52px;left:0;bottom:0;width:240px!important;transform:translateX(-100%);transition:transform .3s;z-index:60}
  .sidebar.open{transform:translateX(0)}
  .sidebar .sb-item span:not(.sb-icon){display:inline}
  .sidebar .sb-count{display:inline}
  .sidebar .sb-cat-hdr span:not(.sb-cat-icon){display:inline}
  .hdr{padding:0 12px;gap:8px}
  .hdr-search{max-width:none;flex:1}
  .hdr-search input{font-size:11px;padding:6px 10px 6px 28px}
  .hdr-right{gap:4px}
  .hdr-btn{font-size:10px;padding:4px 8px}
  .user-name{font-size:10px}
  .tt-header,.tt-row{grid-template-columns:1fr 50px;padding:8px 14px}
  .tt-header>:nth-child(2),.tt-header>:nth-child(3),.tt-header>:last-child,
  .tt-row>:nth-child(2),.tt-row>:nth-child(3),.tt-row>:last-child{display:none}
  .tt-title{font-size:12px}
  .board-hdr{padding:14px 14px 12px}
  .board-name{font-size:16px}
  .board-actions{flex-wrap:wrap}
  .thread-hdr{padding:14px}
  .thread-title{font-size:15px}
  .post-wrap{grid-template-columns:1fr!important}
  .post-author{flex-direction:row;align-items:center;gap:10px;padding:10px 14px;border-right:none!important;border-bottom:1px solid var(--line)}
  .pa-avatar{width:32px!important;height:32px!important;font-size:11px!important}
  .post-body{padding:12px 14px}
  .home-hero{padding:16px 14px 12px}
  .home-title{font-size:18px}
  .home-body{padding:14px}
}
@media(max-width:400px) {
  .hdr-logo{font-size:12px;gap:6px}
  .hdr-logo-hex{width:24px;height:24px;font-size:9px}
  .hdr-search{display:none}
}