/* ============================================================
   SecureMoot — "encrypted terminal", refined.
   Dark, phosphor-mint accents, violet for anonymity, warm amber
   for owner. Distinctive type (Space Mono + IBM Plex Sans),
   layered depth, calm motion, accessible focus.
   ============================================================ */
:root{
  --bg:#070b09;
  --bg-soft:#0a0f0c;
  --panel:#0e1613;
  --panel-2:#121d18;
  --raise:#16231d;
  --line:#1d2c25;
  --line-2:#283a31;
  --txt:#cfe0d6;
  --txt-dim:#7c9085;
  --txt-mute:#4f6157;
  --acc:#4ff2ac;            /* phosphor mint — signed / primary */
  --acc-2:#39d893;
  --acc-deep:#1f7f59;
  --acc-rgb:79,242,172;     /* accent as RGB triplet so themes can recolor tints */
  --violet:#a99bff;         /* anonymity */
  --violet-deep:#534a8f;
  --violet-rgb:169,155,255;
  --amber:#f3c06a;          /* owner / warnings */
  --danger:#ff7a7a;
  --danger-rgb:255,122,122;
  --on-acc:#04150d;         /* text on accent buttons */
  --inset-bg:#06100b;       /* server-view / code insets */
  --toast-bg:rgba(18,29,24,.96);
  --sel-bg:rgba(var(--acc-rgb),.25);
  --sel-text:#eafff5;
  --grain:.45;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --r:14px; --r-sm:10px; --r-xs:8px;
  --sh:0 18px 40px -24px rgba(0,0,0,.8);
  --glow:0 0 24px -4px rgba(var(--acc-rgb),.45);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- alternate themes (override only what changes) ---------- */
html[data-theme="slate"]{           /* dark, cool blue accent (no green) */
  --bg:#0a0e15; --bg-soft:#0c1119; --panel:#111824; --panel-2:#151d2b; --raise:#1a2536;
  --line:#212c3e; --line-2:#2c3a50; --txt:#ccd6e6; --txt-dim:#7e8ca3; --txt-mute:#52617a;
  --acc:#5aa9ff; --acc-2:#3f8fe6; --acc-deep:#2b5f9e; --acc-rgb:90,169,255;
  --violet:#b79bff; --violet-deep:#4f4a8f; --violet-rgb:183,155,255;
  --amber:#f3c06a; --danger:#ff7a7a; --danger-rgb:255,122,122;
  --on-acc:#04101f; --inset-bg:#070d16; --toast-bg:rgba(17,24,36,.96);
  --sel-bg:rgba(var(--acc-rgb),.25); --sel-text:#eaf4ff; --grain:.4;
}
html[data-theme="light"]{           /* light / paper */
  --bg:#f3f5f3; --bg-soft:#ecefec; --panel:#ffffff; --panel-2:#f6f9f6; --raise:#eef3ef;
  --line:#dde4de; --line-2:#c8d3cb; --txt:#15201a; --txt-dim:#4d5b53; --txt-mute:#7d8a82;
  --acc:#0f9d63; --acc-2:#0c8a57; --acc-deep:#0a7a4d; --acc-rgb:15,157,99;
  --violet:#5b46c9; --violet-deep:#b6abe8; --violet-rgb:91,70,201;
  --amber:#b77512; --danger:#cf3b3b; --danger-rgb:207,59,59;
  --on-acc:#ffffff; --inset-bg:#eef3ef; --toast-bg:rgba(255,255,255,.97);
  --sel-bg:rgba(var(--acc-rgb),.2); --sel-text:#06140d; --grain:.16;
  --sh:0 14px 34px -22px rgba(20,40,30,.4); --glow:0 0 18px -6px rgba(var(--acc-rgb),.5);
}
html[data-theme="contrast"]{        /* high contrast, accessibility */
  --bg:#000000; --bg-soft:#000000; --panel:#0b0b0b; --panel-2:#121212; --raise:#161616;
  --line:#5a5a5a; --line-2:#7d7d7d; --txt:#ffffff; --txt-dim:#dadada; --txt-mute:#a8a8a8;
  --acc:#ffe000; --acc-2:#ffd200; --acc-deep:#b39a00; --acc-rgb:255,224,0;
  --violet:#7fd4ff; --violet-deep:#3a6e8c; --violet-rgb:127,212,255;
  --amber:#ffb000; --danger:#ff5b5b; --danger-rgb:255,91,91;
  --on-acc:#000000; --inset-bg:#0a0a0a; --toast-bg:rgba(10,10,10,.98);
  --sel-bg:rgba(var(--acc-rgb),.3); --sel-text:#000000; --grain:0;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(var(--acc-rgb),.07), transparent 60%),
    radial-gradient(820px 460px at -8% 4%, rgba(var(--violet-rgb),.05), transparent 55%),
    var(--bg);
  color:var(--txt); font-family:var(--sans); font-size:15.5px; line-height:1.55;
  min-height:100vh; -webkit-font-smoothing:antialiased; letter-spacing:.005em;
}
::selection{background:var(--sel-bg); color:var(--sel-text)}
a{color:var(--acc)}

/* grain */
.grain{position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* ---------- topbar ---------- */
.topbar{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:16px clamp(16px,5vw,46px); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px) saturate(1.1);
  background:var(--bg-soft)}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--mono); font-weight:700; letter-spacing:.03em}
.brand .glyph{color:var(--acc); font-size:1.2rem; text-shadow:var(--glow)}
.brand .name{font-size:1.02rem}
.brand .dim{color:var(--txt-mute)}
.meta{display:flex; gap:9px; align-items:center; font-family:var(--mono); font-size:.72rem; flex-wrap:wrap; justify-content:flex-end}
.pill{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border:1px solid var(--line-2);
  border-radius:999px; color:var(--txt-dim); text-transform:uppercase; letter-spacing:.07em}
.pill b{color:var(--txt); font-weight:700; text-transform:none}
.dot{width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:var(--glow); animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- layout ---------- */
.wrap{max-width:780px; margin:0 auto; padding:clamp(20px,4vw,38px) clamp(14px,5vw,22px); display:flex; flex-direction:column; gap:20px}
.panel{background:linear-gradient(180deg,var(--panel),var(--bg-soft)); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(18px,4vw,28px); box-shadow:var(--sh); animation:rise .55s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.foot{max-width:780px; margin:8px auto 44px; padding:0 22px; font-family:var(--mono);
  font-size:.69rem; color:var(--txt-mute); line-height:1.7}

/* ---------- typography helpers ---------- */
h1{font-size:clamp(1.55rem,4vw,2.15rem); line-height:1.12; margin:0 0 14px; font-weight:600; letter-spacing:-.015em}
.accent{color:var(--acc); text-shadow:0 0 22px rgba(var(--acc-rgb),.25)}
.lede{color:var(--txt-dim); margin:0 0 22px; max-width:56ch}
.lede em{color:var(--txt); font-style:normal; border-bottom:1px dashed var(--acc-deep)}
.lede.small{font-size:.9rem; margin-bottom:16px}
.ctitle{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; color:var(--txt-dim); margin:0 0 15px; font-weight:700}
.rtitle{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.13em; color:var(--txt-dim); margin:6px 0 2px; font-weight:700}
.fineprint{font-family:var(--mono); font-size:.71rem; color:var(--txt-mute); margin:13px 0 0; line-height:1.55}
.fineprint.warn{color:var(--amber)} .fineprint.ok{color:var(--acc)}

/* ---------- inputs ---------- */
input,textarea{font-family:var(--sans); font-size:1rem; color:var(--txt); width:100%;
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:12px 14px; outline:none; transition:border-color .2s, box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--txt-mute)}
input:focus,textarea:focus{border-color:var(--acc-deep); box-shadow:0 0 0 3px rgba(var(--acc-rgb),.13)}
textarea{resize:vertical; line-height:1.55}

/* ---------- buttons ---------- */
.btn{font-family:var(--mono); font-size:.8rem; letter-spacing:.03em; border-radius:var(--r-sm);
  padding:12px 18px; cursor:pointer; border:1px solid transparent; transition:transform .12s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(var(--acc-rgb),.35)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--acc),var(--acc-2)); color:var(--on-acc); font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px -12px rgba(var(--acc-rgb),.7)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.primary:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; filter:none}
.btn.ghost{background:transparent; color:var(--acc); border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--acc-deep); background:rgba(var(--acc-rgb),.07)}
.btn.link{background:none; border:none; color:var(--txt-dim); padding:6px 4px; font-size:.76rem; font-family:var(--mono)}
.btn.link:hover{color:var(--acc)}

/* ---------- avatars (identicons) ---------- */
.ava{width:30px; height:30px; min-width:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:.82rem; color:#06140d; text-transform:uppercase;
  background:linear-gradient(135deg, hsl(var(--h,150) 70% 62%), hsl(calc(var(--h,150) + 40) 65% 48%));
  box-shadow:0 2px 8px -2px rgba(0,0,0,.6)}
.ava.lg{width:36px; height:36px; border-radius:10px; font-size:.95rem}
.ava.anon{background:repeating-linear-gradient(45deg,#1c2230,#1c2230 4px,#222a3b 4px,#222a3b 8px);
  color:var(--violet); border:1px solid var(--violet-deep); box-shadow:none}

/* ---------- auth ---------- */
.tabs{display:flex; gap:8px; margin:18px 0 14px}
.tab{flex:1; font-family:var(--mono); font-size:.8rem; padding:11px; cursor:pointer; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--txt-dim); transition:all .2s}
.tab:hover{border-color:var(--line-2)}
.tab.active{border-color:var(--acc-deep); background:rgba(var(--acc-rgb),.08); color:var(--acc)}
.authform{display:flex; flex-direction:column; gap:10px}

/* ---------- nav ---------- */
.nav{display:flex; gap:8px; margin-bottom:18px}
.navbtn{font-family:var(--mono); font-size:.82rem; padding:10px 18px; cursor:pointer; color:var(--txt-dim);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); transition:all .2s; position:relative}
.navbtn:hover{border-color:var(--line-2)}
.navbtn.active{border-color:var(--acc-deep); background:rgba(var(--acc-rgb),.08); color:var(--acc)}
.ndot{position:absolute; top:6px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber)}

/* ---------- composer ---------- */
.composer input#thTitle{margin-bottom:10px}
.composer textarea{margin-bottom:14px}
.mode{display:flex; gap:8px; margin-bottom:16px}
.mode.small{margin-bottom:10px}
.mode-btn{flex:1; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 14px; cursor:pointer; color:var(--txt-dim); transition:border-color .2s, background .2s, color .2s}
.mode-btn b{display:block; font-family:var(--mono); font-size:.88rem; color:var(--txt)}
.mode-btn span{font-size:.73rem}
.mode-btn span i{font-style:normal; color:var(--acc)}
.mode-btn:hover{border-color:var(--line-2)}
.mode-btn.active{border-color:var(--acc-deep); background:rgba(var(--acc-rgb),.08); color:var(--txt)}
.mode-btn.active b{color:var(--acc)}
.mode-btn[data-mode="anon"].active,.mode-btn[data-rmode="anon"].active{border-color:var(--violet-deep); background:rgba(var(--violet-rgb),.09)}
.mode-btn[data-mode="anon"].active b,.mode-btn[data-rmode="anon"].active b{color:var(--violet)}
.mode.small .mode-btn{padding:8px 12px}
.mode.small .mode-btn b{font-size:.78rem}
.composer-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.tokens{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:.78rem; color:var(--txt-dim)}
.tk-count b{color:var(--acc); font-size:1rem}

/* ---------- board controls ---------- */
.feed{display:flex; flex-direction:column; gap:0}
.feed-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.feed-head h2{font-family:var(--mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.13em; color:var(--txt-dim); font-weight:700; margin:0}
.board-controls{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.search{flex:1; min-width:160px; padding:10px 13px 10px 36px; font-size:.92rem;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237c9085' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 12px center}
.sortbtns{display:flex; gap:6px}
.sortbtn{font-family:var(--mono); font-size:.73rem; padding:9px 14px; cursor:pointer; color:var(--txt-dim);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xs); transition:all .15s}
.sortbtn:hover{border-color:var(--line-2)}
.sortbtn.active{border-color:var(--acc-deep); background:rgba(var(--acc-rgb),.08); color:var(--acc)}

/* ---------- posts / threads ---------- */
.posts{display:flex; flex-direction:column; gap:11px}
.post{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line-2);
  border-radius:var(--r-sm); padding:15px 17px; animation:rise .4s var(--ease) both}
.post.signed{border-left-color:var(--acc-deep)}
.post.anon{border-left-color:var(--violet-deep); background:linear-gradient(180deg,var(--panel),var(--bg))}
.post.thread{cursor:pointer; transition:border-color .18s, transform .12s var(--ease), box-shadow .2s}
.post.thread:hover{border-left-color:var(--acc); transform:translateX(2px); box-shadow:var(--sh)}
.who{display:flex; align-items:center; gap:9px; margin-bottom:9px; font-family:var(--mono); font-size:.75rem; flex-wrap:wrap}
.who-name{font-weight:700; color:var(--txt)}
.who-name.anonh{color:var(--violet); letter-spacing:.05em; text-transform:uppercase; font-weight:700}
.verified{color:var(--acc); display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border:1px solid var(--acc-deep); border-radius:50%; font-size:.62rem}
.fp{color:var(--txt-mute); font-size:.68rem}
.when{margin-left:auto; color:var(--txt-mute); font-size:.68rem; white-space:nowrap}
.tag{color:var(--txt-mute); font-size:.66rem; border:1px solid var(--line); padding:2px 8px; border-radius:6px}
.tag.pin{color:var(--acc); border-color:var(--acc-deep)}
.badge-soft{color:var(--violet); font-size:.64rem; border:1px solid var(--violet-deep); padding:2px 8px; border-radius:6px}
.rc{color:var(--txt-mute); font-size:.7rem; padding-left:6px}
.ttitle{font-weight:600; font-size:1.08rem; margin:3px 0 6px; color:var(--txt); letter-spacing:-.01em}
.snippet{color:var(--txt-dim); font-size:.92rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.text{white-space:pre-wrap; word-break:break-word}

/* thread detail */
#detailView{display:flex; flex-direction:column; gap:13px}
#lockNotice{margin:0}
.replybox{padding:16px}
.replybox textarea{margin-bottom:10px}

/* ---------- server view ---------- */
.serverview{font-family:var(--mono); font-size:.73rem; color:var(--txt-dim); background:var(--inset-bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:14px 16px; margin-bottom:14px; white-space:pre-wrap; line-height:1.65; background:var(--inset-bg)}
.serverview .k{color:var(--amber)}
.serverview .note{color:var(--acc); display:block; margin-top:8px}

/* ---------- moderation ---------- */
.modbar{display:flex; gap:6px; margin-top:11px; padding-top:11px; border-top:1px dashed var(--line)}
.modbtn{font-family:var(--mono); font-size:.67rem; padding:5px 11px; cursor:pointer; border-radius:6px;
  background:var(--bg); border:1px solid var(--line-2); color:var(--txt-dim); transition:all .15s}
.modbtn:hover{border-color:var(--acc-deep); color:var(--acc)}
.modbtn.del{border-color:rgba(var(--danger-rgb),.3); color:var(--danger)}
.modbtn.del:hover{background:rgba(var(--danger-rgb),.1); border-color:var(--danger)}
.post .modbtn.del{margin-top:9px}

/* ---------- DM ---------- */
.dm-layout{display:grid; grid-template-columns:248px 1fr; gap:16px; align-items:start}
.dm-side{padding:18px}
.addfriend{display:flex; gap:8px; margin-bottom:6px}
.addfriend input{flex:1; min-width:0; padding:9px 11px}
.friendlist{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.friend{display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; font-family:var(--mono); font-size:.84rem; transition:all .15s; background:var(--bg)}
.friend:hover{border-color:var(--acc-deep)}
.friend.active{border-color:var(--acc); background:rgba(var(--acc-rgb),.08)}
.friend .fu{color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.friend .fdot{width:7px; height:7px; min-width:7px; border-radius:50%; background:var(--txt-mute); margin-left:auto}
.friend .fdot.on{background:var(--acc); box-shadow:0 0 7px var(--acc)}
.req{display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px dashed var(--line-2); border-radius:var(--r-sm);
  margin-bottom:6px; font-family:var(--mono); font-size:.76rem}
.req .rq{overflow:hidden; text-overflow:ellipsis}
.req .acc{margin-left:auto; color:var(--acc); background:none; border:1px solid var(--acc-deep); border-radius:6px;
  padding:4px 10px; cursor:pointer; font-family:var(--mono); font-size:.7rem}
.req .acc:hover{background:rgba(var(--acc-rgb),.1)}

.dm-main{padding:0; min-height:460px; display:flex; flex-direction:column; overflow:hidden}
.chat-empty{padding:52px 30px; text-align:center; color:var(--txt-dim); line-height:1.75; margin:auto; max-width:42ch}
.chat-head{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--mono)}
.chat-head b{color:var(--txt); display:flex; align-items:center; gap:9px}
.chat-head .lock{margin-left:auto; font-size:.7rem; color:var(--acc); letter-spacing:.05em}
.chat-log{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:9px; max-height:440px}
.bubble{max-width:78%; padding:9px 13px; border-radius:14px; font-size:.92rem; line-height:1.45; word-break:break-word; animation:pop .22s var(--ease) both}
@keyframes pop{from{opacity:0; transform:translateY(5px) scale(.98)}to{opacity:1; transform:none}}
.bubble.them{align-self:flex-start; background:var(--panel-2); border:1px solid var(--line-2); border-bottom-left-radius:5px}
.bubble.me{align-self:flex-end; background:rgba(var(--acc-rgb),.14); border:1px solid var(--acc-deep); border-bottom-right-radius:5px; color:var(--txt)}
.bubble .ts{display:block; font-family:var(--mono); font-size:.58rem; color:var(--txt-mute); margin-top:4px}
.chat-input{display:flex; gap:8px; padding:13px 16px; border-top:1px solid var(--line)}

/* ---------- admin ---------- */
.slider-row{display:flex; align-items:center; gap:20px; margin:6px 0 4px}
input[type=range]{-webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:99px;
  background:linear-gradient(90deg,var(--acc-deep),var(--acc)); outline:none; padding:0; border:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--acc); cursor:pointer; box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18), var(--glow); border:none}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--acc); cursor:pointer; border:none; box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18)}
.capreadout{text-align:center; font-family:var(--mono); min-width:64px}
.capreadout b{display:block; font-size:1.85rem; color:var(--acc); line-height:1}
.capreadout span{font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:var(--txt-mute)}
.checkrow{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.82rem; color:var(--txt-dim); margin:16px 0; cursor:pointer}
.checkrow input{width:17px; height:17px; accent-color:var(--acc)}
.invite-gen{margin:6px 0 4px}
.invite-codes{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.code{font-family:var(--mono); font-size:.8rem; background:var(--inset-bg); border:1px solid var(--acc-deep); color:var(--acc);
  padding:6px 12px; border-radius:7px; cursor:pointer; transition:background .15s}
.code:hover{background:rgba(var(--acc-rgb),.12)}
.memberlist{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.member{display:flex; align-items:center; gap:10px; padding:10px 13px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-sm); font-family:var(--mono); font-size:.82rem}
.member .mu{color:var(--txt)}
.member .badge{font-size:.6rem; color:var(--acc); border:1px solid var(--acc-deep); border-radius:5px; padding:1px 7px; text-transform:uppercase}
.member .badge.owner{color:var(--amber); border-color:var(--amber)}
.member .mk{color:var(--txt-mute); font-size:.68rem; margin-left:auto}
.member .rm{color:var(--danger); background:none; border:1px solid rgba(var(--danger-rgb),.3); border-radius:7px;
  padding:5px 10px; cursor:pointer; font-family:var(--mono); font-size:.7rem; transition:background .15s}
.member .rm:hover{background:rgba(var(--danger-rgb),.1)}
.member .rm.promote{color:var(--acc); border-color:var(--acc-deep)}
.member .rm.promote:hover{background:rgba(var(--acc-rgb),.1)}

/* ---------- toasts ---------- */
.toasts{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:10000;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{font-family:var(--mono); font-size:.8rem; padding:11px 18px; border-radius:999px; color:var(--txt);
  background:var(--toast-bg); border:1px solid var(--line-2); box-shadow:var(--sh); backdrop-filter:blur(8px);
  animation:toastin .3s var(--ease) both}
.toast.ok{border-color:var(--acc-deep); color:var(--acc)}
.toast.warn{border-color:var(--amber); color:var(--amber)}
.toast.out{animation:toastout .3s var(--ease) forwards}
@keyframes toastin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes toastout{to{opacity:0; transform:translateY(8px)}}

/* ---------- responsive ---------- */
@media (max-width:680px){ .dm-layout{grid-template-columns:1fr} }
@media (max-width:520px){
  .mode{flex-direction:column}
  .composer-foot{flex-direction:column; align-items:stretch}
  .composer-foot .btn.primary{width:100%}
  .board-controls{flex-direction:column; align-items:stretch}
  .sortbtns{justify-content:space-between} .sortbtn{flex:1}
}

/* ---------- board: clean topic list ---------- */
.board-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.board-title{font-family:var(--mono); font-size:.95rem; text-transform:uppercase; letter-spacing:.14em; color:var(--txt); font-weight:700; margin:0}
.btnsm{padding:9px 15px; font-size:.78rem}
.peekrow{display:flex; justify-content:flex-end; margin:-4px 0 12px}
.composer-actions{display:flex; align-items:center; gap:10px}

/* topic rows read as a list, not full posts */
.thread-row{display:flex; align-items:center; gap:12px}
.thread-main{flex:1; min-width:0}
.thread-row .ttitle{margin:4px 0 0}
.thread-meta{font-family:var(--mono); font-size:.7rem; color:var(--txt-mute); margin-top:7px}
.chev{font-size:1.7rem; color:var(--txt-mute); line-height:1; transition:color .15s, transform .15s var(--ease)}
.post.thread:hover .chev{color:var(--acc); transform:translateX(3px)}

/* ---------- thread detail: clear separation + obvious back ---------- */
.btn.back{display:inline-flex; align-items:center; align-self:flex-start; background:var(--raise);
  color:var(--acc); border:1px solid var(--acc-deep); padding:11px 18px; font-size:.82rem; margin-bottom:4px}
.btn.back:hover{background:rgba(var(--acc-rgb),.12); transform:translateX(-2px)}
.op-label{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; color:var(--txt-mute)}
.post.op{border-left-width:3px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); box-shadow:var(--sh)}
.post.op .ttitle{font-size:1.25rem; margin-top:6px}
#repliesTitle{margin-top:6px}

/* ---------- theme picker ---------- */
.themesel{font-family:var(--mono); font-size:.72rem; color:var(--txt-dim); background:var(--bg);
  border:1px solid var(--line-2); border-radius:999px; padding:5px 10px; cursor:pointer; outline:none;
  transition:border-color .2s}
.themesel:hover{border-color:var(--acc-deep)}
.themesel:focus-visible{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.35)}

/* ---------- capacity: exact number input next to slider ---------- */
.capnum{width:84px; text-align:center; font-family:var(--mono); font-size:1.1rem; padding:8px;
  color:var(--acc); background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm)}
.cap-exact{display:flex; align-items:center; gap:10px; margin-top:12px; font-family:var(--mono);
  font-size:.74rem; color:var(--txt-dim)}

/* ---------- register acknowledgment ---------- */
.ackrow{display:flex; gap:9px; align-items:flex-start; font-size:.76rem; line-height:1.5;
  color:var(--txt-dim); background:rgba(var(--danger-rgb),.07); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:11px 13px; cursor:pointer; text-align:left}
.ackrow input{margin-top:2px; accent-color:var(--acc); width:16px; height:16px; flex:0 0 auto}
.ackrow b{color:var(--txt)}

/* ---------- mentions + links in bodies ---------- */
.mention{color:var(--acc); font-weight:600}
.link-url{color:var(--acc); text-decoration:underline; text-underline-offset:2px; word-break:break-all}

/* ---------- category selects + tag ---------- */
.catselect{font-family:var(--mono); font-size:.78rem; color:var(--txt); background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:9px 11px; cursor:pointer; outline:none}
.catselect:focus-visible{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.35)}
.tag.cat{background:rgba(var(--acc-rgb),.12); color:var(--acc); border:1px solid var(--acc-deep)}
.loadmore{display:block; margin:18px auto 0}

/* ---------- notifications bell + panel ---------- */
.bell{position:relative; font-size:1rem}
.bellcount{position:absolute; top:-4px; right:-6px; min-width:16px; height:16px; padding:0 4px;
  font-size:.62rem; font-weight:700; line-height:16px; text-align:center; border-radius:999px;
  background:var(--danger); color:#fff; font-family:var(--mono)}
.notifpanel{position:fixed; top:62px; right:18px; z-index:60; width:min(340px,92vw); max-height:60vh; overflow:auto;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh); padding:6px}
.notif-item{display:flex; gap:10px; justify-content:space-between; align-items:flex-start; width:100%; text-align:left;
  background:none; border:none; border-radius:var(--r-sm); padding:10px 11px; cursor:pointer; color:var(--txt); font-size:.84rem; line-height:1.4}
.notif-item:hover{background:var(--raise)}
.notif-item.unseen{background:rgba(var(--acc-rgb),.07)}
.notif-when{font-family:var(--mono); font-size:.66rem; color:var(--txt-mute); white-space:nowrap; flex:0 0 auto}

/* ---------- chat safety numbers ---------- */
.btn.verify{color:var(--acc); margin-left:auto; font-size:.76rem}
.safety{background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:13px 15px; margin-bottom:10px}
.safetynum{display:grid; grid-template-columns:repeat(4,1fr); gap:7px 12px; margin-top:11px;
  font-family:var(--mono); font-size:.92rem; letter-spacing:.06em; color:var(--acc); text-align:center}

/* ---------- admin category editor ---------- */
.cat-edit{display:flex; gap:9px}
.cat-edit input{flex:1; font-family:var(--mono); font-size:.82rem; color:var(--txt); background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:10px 12px; outline:none}
.cat-edit input:focus-visible{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.35)}

/* ---------- admin category chips ---------- */
.catchips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.catchip{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.8rem;
  color:var(--txt); background:rgba(var(--acc-rgb),.10); border:1px solid var(--acc-deep);
  border-radius:999px; padding:6px 6px 6px 13px}
.catx{display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; padding:0;
  font-size:1.05rem; line-height:1; color:var(--txt-mute); background:var(--bg); border:1px solid var(--line-2);
  border-radius:999px; cursor:pointer; transition:color .15s, border-color .15s}
.catx:hover{color:var(--danger); border-color:var(--danger)}

/* ---------- ephemeral DM controls ---------- */
.ephemeral-bar{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:8px 4px 2px}
.eph{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.72rem; color:var(--txt-dim)}
.eph select{font-family:var(--mono); font-size:.72rem; color:var(--txt); background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px 7px; cursor:pointer; outline:none}
.burn-toggle{cursor:pointer}
.burn-toggle input{accent-color:var(--danger); width:14px; height:14px}
.eph-tag{margin-left:7px; font-size:.62rem; opacity:.85}
.eph-tag.burn{filter:saturate(1.3)}

/* ---------- category request + search ---------- */
.cat-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cat-row .catselect{flex:1; min-width:160px}
.reqcat{font-size:.72rem; white-space:nowrap}
.cat-search{width:100%; margin-bottom:10px; font-family:var(--mono); font-size:.8rem; color:var(--txt);
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px 11px; outline:none}
.cat-search:focus{border-color:var(--acc)}
.catreqs{display:flex; flex-direction:column; gap:8px}
.catreq{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 12px;
  background:rgba(var(--acc-rgb),.06); border:1px solid var(--line-2); border-radius:var(--r-sm)}
.catreq .cr-name{font-family:var(--mono); font-weight:600; color:var(--txt)}
.catreq .cr-actions{margin-left:auto; display:flex; align-items:center; gap:8px}

/* ---------- home / announcement ---------- */
#homeView .home-wrap{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.post.op.announce{cursor:pointer; transition:border-color .15s, transform .15s}
.post.op.announce:hover{border-color:var(--acc)}
.post.op.announce.empty{cursor:default}
.post.op.announce.empty:hover{border-color:var(--line-2)}
#toBoard{align-self:flex-start}

/* ---------- modal (change password) ---------- */
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); padding:18px; backdrop-filter:blur(2px)}
.modal-card{width:100%; max-width:380px; display:flex; flex-direction:column; gap:11px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-md); padding:20px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.modal-card input{font-family:var(--mono); font-size:.85rem; color:var(--txt); background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:11px 12px; outline:none}
.modal-card input:focus{border-color:var(--acc)}
.modal-actions{display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:4px}