/* Circl dark mode: follows the phone's setting, or the choice in Profile → Appearance. */
:root[data-theme="dark"]{
  --bg:#0E0F13; --panel:#191B21; --hover:#22252D; --ink:#F1F2F5; --muted:#9A9EAB; --line:#2A2D36;
  --online:#2DC26B; --danger:#F0605D; --on-ink:#0E0F13;
  --l1:#A3A8B8; --l2:#4CC3AE; --l3:#7FA3FF; --l4:#E7B04A;
  --t-warn:#2A2312; --t-warn-line:#5C4A1D; --t-blue:#17213A; --t-blue-line:#2E4373; --t-green:#132A1C; --t-green-line:#24503A; --t-dash:#3A3D47;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F13; --panel:#191B21; --hover:#22252D; --ink:#F1F2F5; --muted:#9A9EAB; --line:#2A2D36;
    --online:#2DC26B; --danger:#F0605D; --on-ink:#0E0F13;
    --l1:#A3A8B8; --l2:#4CC3AE; --l3:#7FA3FF; --l4:#E7B04A;
    --t-warn:#2A2312; --t-warn-line:#5C4A1D; --t-blue:#17213A; --t-blue-line:#2E4373; --t-green:#132A1C; --t-green-line:#24503A; --t-dash:#3A3D47;
    color-scheme:dark;
  }
}
/* Everything below only applies when dark is active (set by theme.js as data-dark on <html>). */
html[data-dark] body{background:var(--bg);color:var(--ink)}
html[data-dark] header.top{background:rgba(14,15,19,.78)}
html[data-dark] nav.tabs{background:rgba(14,15,19,.86)}
html[data-dark].scrolled header.top{box-shadow:0 6px 24px -12px rgba(0,0,0,.8)}
html[data-dark] .lv1{background:#22252D}html[data-dark] .lv2{background:#12302B}html[data-dark] .lv3{background:#1A2547}html[data-dark] .lv4{background:#33280F}
html[data-dark] .status-btn i,html[data-dark] .st{background:#4A4E5A}
html[data-dark] .st.on{background:var(--online)}
html[data-dark] .status-btn.on i{background:var(--online)}
html[data-dark] .lv-name.lv3,html[data-dark] .mention{color:#8FB0FF}
html[data-dark] .lv-name.lv4,html[data-dark] .verified.auto{color:#E7B04A}
html[data-dark] .cm.mine .mention{color:#2B59C3}
html[data-dark] .cm-bub.tome{background:var(--t-blue);box-shadow:inset 3px 0 0 #7FA3FF}
html[data-dark] .rpill[aria-pressed="true"]{background:var(--t-blue);border-color:#7FA3FF}
html[data-dark] .rxpick button[aria-pressed="true"]{background:var(--t-blue)}
html[data-dark] .autobanner,html[data-dark] .e2ecard.warn,html[data-dark] .cm-bub.q,html[data-dark] .askchip[aria-pressed="true"],html[data-dark] .t-win .ptype{background:var(--t-warn);border-color:var(--t-warn-line)}
html[data-dark] .autobanner.gift{background:var(--t-green);border-color:var(--t-green-line)}
html[data-dark] .t-ask .ptype,html[data-dark] .t-collab .ptype{background:var(--t-blue)}
html[data-dark] .fpost.t-win{border-color:var(--t-warn-line)}html[data-dark] .fpost.t-collab{border-color:var(--t-blue-line)}
html[data-dark] .popt .pbar{background:#22252D}html[data-dark] .popt.on .pbar{background:#2C303A}
html[data-dark] .introcard,html[data-dark] .goalslots span,html[data-dark] .promo,html[data-dark] .upload{border-color:var(--t-dash)}
html[data-dark] .sheet-bg,html[data-dark] .sheet-out{background:rgba(0,0,0,.6)}
html[data-dark] .sheet{box-shadow:0 -10px 40px -10px rgba(0,0,0,.8)}
html[data-dark] .toast{box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
html[data-dark] .ibn-card{background:rgba(30,32,39,.88);border-color:rgba(255,255,255,.08);color:var(--ink)}
html[data-dark] .ibn-txt p{color:#C5C8D1}
html[data-dark] .ibn-grab{background:rgba(255,255,255,.18)}
html[data-dark] .setup-card.done{background:linear-gradient(180deg,var(--t-green),var(--bg));border-color:var(--t-green-line)}
html[data-dark] .tact.on{background:var(--t-warn);border-color:var(--t-warn-line)}
html[data-dark] .tapp-ic img,html[data-dark] .plogo img.real,html[data-dark] .plogo.has-img,html[data-dark] .conn-ic{background:#F1F2F5}
html[data-dark] .tdd-panel,html[data-dark] .tdd-search{background:var(--panel)}
html[data-dark] .tdd-opt:hover,html[data-dark] .tdd-opt:focus-visible,html[data-dark] .tdd-opt[aria-selected="true"]{background:var(--hover)}
html[data-dark] .tdd-panel{box-shadow:0 24px 60px -18px rgba(0,0,0,.9)}
html[data-dark] .tsyms button[aria-pressed="true"],html[data-dark] .seg button[aria-pressed="true"]{background:var(--hover);box-shadow:none}
html[data-dark] .front-rings circle{stroke:#22252D}
html[data-dark] .devpill{background:var(--panel)}
html[data-dark] input.in:focus,html[data-dark] textarea.in:focus,html[data-dark] select.in:focus{box-shadow:0 0 0 4px rgba(255,255,255,.08)}
html[data-dark] .tdd.open .tdd-btn{box-shadow:0 0 0 4px rgba(255,255,255,.07)}
html[data-dark] img[src$="icon-192.png"]{background:#fff}
html[data-dark] .entering{background:var(--bg)}
html[data-dark] ::selection{background:#3A4A7A}
html[data-dark] .switch{background:#3A3D47}
html[data-dark] .switch:checked{background:var(--online)}
/* smooth switch between light and dark */
html.theme-anim,html.theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease!important}