/* BintangNetwork v2 - lapisan visual & komponen live */
:root[data-theme='light']{
  --bg:#F4F7FC; --panel:#FFFFFF; --panel2:#EEF2F9; --line:#DFE5F0;
  --ink:#1A2130; --muted:#6C768B; --soft:#3E485C;
  --shadow:0 22px 48px -32px rgba(26,38,70,.42);
}
:root[data-theme='light'] .bn-input{background:#fff;border-color:#D9E0EC;color:var(--ink)}
:root[data-theme='light'] .bn-input::placeholder{color:#9AA4B6}
:root[data-theme='light'] .bn-hero{background:radial-gradient(900px 320px at 12% -20%,rgba(255,61,119,.13),transparent 70%),#fff}
:root[data-theme='light'] .bn-tile--adult{background:linear-gradient(160deg,rgba(255,61,119,.09),#fff 55%)}
:root[data-theme='light'] .bn-lock{background:linear-gradient(150deg,rgba(139,92,246,.09),#fff)}
:root[data-theme='light'] .bn-table td{border-bottom-color:#EEF1F7}
:root[data-theme='light'] .bn-table th{background:#F7F9FD}
:root[data-theme='light'] .bn-top{background:rgba(244,247,252,.86)}

/* ---------- langit berbintang ---------- */
.bn-hero{isolation:isolate;position:relative}
#bnStars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.8}
.bn-hero>*:not(#bnStars){position:relative;z-index:1}
:root[data-theme='light'] #bnStars{opacity:.35}

.bn-iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer;font-size:15px;line-height:1;transition:transform .15s,border-color .15s}
.bn-iconbtn:hover{transform:translateY(-1px);border-color:var(--pink)}
.bn-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.bn-live i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(53,214,196,.6);animation:bnPulse 2s infinite}
@keyframes bnPulse{70%{box-shadow:0 0 0 9px rgba(53,214,196,0)}100%{box-shadow:0 0 0 0 rgba(53,214,196,0)}}

/* ---------- hero stats & ticker ---------- */
.bn-stats b{font-variant-numeric:tabular-nums}
.bn-ticker{display:flex;gap:9px;overflow:hidden;margin-top:16px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.bn-ticker .tick{flex:0 0 auto;display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:11px;color:var(--muted);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.bn-ticker .tick b{color:var(--coral)}

/* ---------- composer ---------- */
.bn-composer{display:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.bn-composer.open{display:block;animation:bnFade .25s ease}
.bn-composer .bn-composerrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px}
.bn-select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:13px;outline:none}

/* ---------- skeleton ---------- */
.bn-skel{height:64px;border-radius:13px;margin-bottom:10px;background:linear-gradient(90deg,var(--panel2) 25%,var(--line) 50%,var(--panel2) 75%);background-size:200% 100%;animation:bnShimmer 1.4s linear infinite}
@keyframes bnShimmer{to{background-position:-200% 0}}

/* ---------- forum ---------- */
.bn-thread{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:10px;cursor:pointer;transition:transform .18s,border-color .18s}
.bn-thread:hover{transform:translateX(3px);border-color:rgba(255,61,119,.5)}
.bn-thread .av{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--grad);font-size:14px}
.bn-thread .body{min-width:0;flex:1}
.bn-thread h3{font-family:Inter Tight,Inter,sans-serif;font-size:15px;font-weight:700;margin:0 0 4px}
.bn-thread p{margin:0;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-thread .rmeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--muted)}
.bn-newthread{display:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}
.bn-newthread.open{display:block;animation:bnFade .25s ease}

/* ---------- chat ---------- */
.bn-bubbles{min-height:230px;max-height:340px;overflow:auto;padding-right:6px}
.bn-bubble{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--soft)}
.bn-bubble b{color:var(--pink);font-size:12px;flex:0 0 96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-bubble span{flex:1;word-break:break-word}
.bn-bubble time{font-size:10px;color:var(--muted);white-space:nowrap}
.bn-chatbody .bn-chatinput{margin-top:12px}

/* ---------- overlay: pencarian & detail thread ---------- */
.bn-overlay{position:fixed;inset:0;z-index:70;background:rgba(5,6,10,.7);backdrop-filter:blur(9px);display:none;align-items:flex-start;justify-content:center;padding:11vh 16px}
.bn-overlay.open{display:flex;animation:bnFade .2s ease}
.bn-modal{width:min(640px,100%);max-height:76vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.bn-modalhead{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.bn-modalhead h2{font-size:21px;flex:1}
.bn-result{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:9px;cursor:pointer;color:var(--ink)}
.bn-result:hover{border-color:var(--pink)}
.bn-result b{font-size:13px}
.bn-result small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.bn-reply{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:9px;font-size:13px}
.bn-reply b{color:var(--coral);font-size:12px}
.bn-reply time{float:right;color:var(--muted);font-size:10px}

.bn-empty{text-align:center;color:var(--muted);font-size:13px;padding:26px 12px;border:1px dashed var(--line);border-radius:14px}
.bn-shortcut{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted)}
@media(max-width:560px){.bn-bubble b{flex-basis:70px}.bn-ticker{display:none}}