:root{--surface:#fff;--soft:#f4f4f2;--hover:#f1f1ef;--on-ink:#fafafa;--scroll-thumb:#ccc;--border-strong:#d7d7d7;--glass:rgba(250,250,250,.94)}
html[data-theme=dark]{--bg:#282b30;--text:#e4e6e8;--sub:#a8adb4;--line:#3d4249;--ink:#f0f1f2;--surface:#30343a;--soft:#353940;--hover:#3d424a;--on-ink:#282b30;--scroll-thumb:#6d747d;--border-strong:#555c66;--glass:rgba(40,43,48,.95);--danger:#e5867d;color-scheme:dark}
.side-footer{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--sub);font:11px var(--sans);letter-spacing:.08em;padding:2px 0;cursor:pointer;width:fit-content;transition:color .2s}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-moon{display:none}
html[data-theme=dark] .theme-toggle .theme-sun{display:none}
html[data-theme=dark] .theme-toggle .theme-moon{display:block}
html .theme-toggle:focus-visible{outline:1px solid var(--ink)!important;outline-offset:5px}
html[data-theme=dark] ::selection{background:rgba(240,240,237,.18)}
html[data-theme=dark]{scrollbar-color:var(--scroll-thumb) transparent}
html[data-theme=dark]::-webkit-scrollbar-thumb{background:var(--scroll-thumb)}
html[data-theme=dark] :is(.sheet,.bd-card,.reply-card){scrollbar-color:var(--scroll-thumb) transparent}
html[data-theme=dark] :is(.sheet,.bd-card,.reply-card)::-webkit-scrollbar-thumb{background:var(--scroll-thumb)}
html[data-theme=dark] :is(.topbar,.bm-tabs.stuck,.lightbox){background:var(--glass)}
html[data-theme=dark] :is(.site-head,.thumb,.music .m-cover.ph,.edit-cur .ec-cell,.rm-thumb,.sk,.draw-gallery-skeleton>i){background:var(--soft)}
html[data-theme=dark] .media{background:transparent}
html[data-theme=dark] .neko-pick .nk-item{background:var(--soft)}
.md-body .md-image{cursor:zoom-in}
.md-body .md-image:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
html[data-theme=dark] :is(.dd-opt:hover,.r-menu button:hover,.modal .m-btns button:hover,.demo-command:hover,.demo-icon:hover,.draw-speed-menu button:hover){background:var(--hover)}
html[data-theme=dark] :is(.rm-quote,.draw-import-intro,.draw-layer-row.is-active,.draw-segments button.on,.draw-progress-track){background:var(--soft);border-color:var(--line)}
html[data-theme=dark] :is(.draw-import-mark,.draw-import-input,.draw-import-input:hover,.draw-import-input:focus-within,.draw-replay-progress){background:var(--surface);border-color:var(--border-strong)}
html[data-theme=dark] :is(.draw-segments,.draw-popover,.draw-color-pair,.draw-speed-trigger){border-color:var(--border-strong)}
html[data-theme=dark] body .app-field>.app-field-control{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
html[data-theme=dark] body .app-field>.app-field-control:hover:not(:disabled){border-color:var(--sub)}
html[data-theme=dark] body .app-field>.app-field-control:focus{border-color:var(--ink)}
html[data-theme=dark] body .app-field>.app-field-control:disabled{background:var(--soft);color:var(--sub)}
html[data-theme=dark] :is(input,textarea,select){color:var(--text)}
html[data-theme=dark] :is(.fab,.tg.on,.tchip.on,.tm-hide.on,.fsedit-done,.login-btn,.submit-btn,.sh-submit,.edit-row .sv,.rm-submit.ready,.s-go,.demo-primary,.draw-primary,.hm-tip){background:var(--ink);color:var(--on-ink)}
html[data-theme=dark] :is(.fab:hover,.fsedit-done:hover,.login-btn:hover,.demo-primary:hover){background:var(--text);color:var(--on-ink)}
html[data-theme=dark] .fab svg{fill:var(--on-ink)}
html[data-theme=dark] :is(.ttab.active,.btn-primary,.cm-av-edit .sv){background:var(--ink);color:var(--on-ink)}
html[data-theme=dark] :is(.ttab.active:hover,.btn-primary:hover,.cm-av-edit .sv:hover){background:var(--text);color:var(--on-ink)}
html[data-theme=dark] .tm-hide.on:hover{color:var(--on-ink)}
html[data-theme=dark] .draw-help kbd{background:var(--surface);border-color:var(--border-strong)}
html[data-theme=dark] .hm-tip .hm-go{color:var(--on-ink);border-color:var(--sub)}
html[data-theme=dark] :is(.md-body pre,.md-body code,.md-body th){background:var(--soft);color:var(--text)}
html[data-theme=dark] .md-body pre code{background:transparent}
html[data-theme=dark] :is(.md-body blockquote,.md-body hr,.md-body td,.md-body th){border-color:var(--line)}
html[data-theme=dark] :is(.md-body blockquote,.md-body del){color:var(--sub)}
html[data-theme=dark] .md-body mark{background:rgba(240,240,237,.14)}
html[data-theme=dark] .md-body.collapsed::after{background:linear-gradient(transparent,var(--bg) 90%)}
html[data-theme=dark] :is(.hm-cell.l1,.hm-legend i.l1){background:#464a4e}
html[data-theme=dark] :is(.hm-cell.l2,.hm-legend i.l2){background:#777d81}
html[data-theme=dark] :is(.hm-cell.l3,.hm-legend i.l3){background:#acb1b2}
html[data-theme=dark] :is(.hm-cell.l4,.hm-legend i.l4){background:#e0e1df}
html[data-theme=dark] img:is([src^="/vendor/lucide/"],[src^="/drawing-icons/"]){filter:invert(.9)}
html[data-theme=dark] :is(.demo-primary,.draw-primary) img:is([src^="/vendor/lucide/"],[src^="/drawing-icons/"]){filter:none}
html[data-theme=dark] :is(.draw-card,.draw-replay-card,.draw-token-card,.draw-submit-card,.draw-comments-card,.draw-comment-compose-card,.draw-popover,.draw-speed-menu,.draw-blend-menu){background:var(--surface);border-color:var(--border-strong)}
html[data-theme=dark] :is(.draw-card.is-focus,.draw-canvas-wrap,#drawViewport,.draw-replay-canvas-wrap){background:var(--soft)}
html[data-theme=dark] .draw-card.is-focus #drawViewport{background:var(--soft)}
html[data-theme=dark] :is(.draw-layer-blend-control,.draw-layer-blend-control:hover,.draw-layer-blend-control:focus-within,.draw-layer-row.is-clipping){background:var(--soft);border-color:var(--border-strong)}
html[data-theme=dark] :is(.draw-blend-option:hover,.draw-blend-option:focus-visible,.draw-blend-option[aria-selected=true],.draw-layer-row .draw-icon.on){background:var(--hover);color:var(--ink);border-color:var(--border-strong)}
html[data-theme=dark] .draw-blend-divider{background:var(--line)}
html[data-theme=dark] :is(.media,.thumb,.edit-cur,.lightbox,.about-gallery,.md-body,.emotion-editor,.bm-cover,.tl-cover,.bd-cover,.draw-comment-subject,.emotion-choice,.emotion-pack-tab) img,
html[data-theme=dark] img:is(.draw-artwork,.m-cover,.side-av,.p-av,.r-av,.rm-my-av,.draw-avatar,.draw-avatar-preview){filter:brightness(.85)}
html[data-theme=dark] #drawReplayCanvas{filter:brightness(.85)}
html[data-theme=dark] .sk::after,html[data-theme=dark] .ag-cell::after,html[data-theme=dark] .draw-artwork-frame.is-loading::after{background:linear-gradient(90deg,transparent,rgba(140,148,158,.1),transparent)}

/* The same narrow, quiet scrollbar on pages, dialogs, and nested panels. */
html,html *{scrollbar-width:thin!important;scrollbar-color:var(--scroll-thumb,#ccc) transparent!important}
html::-webkit-scrollbar,html *::-webkit-scrollbar{width:3px!important;height:3px!important}
html::-webkit-scrollbar-track,html *::-webkit-scrollbar-track{background:transparent!important}
html::-webkit-scrollbar-thumb,html *::-webkit-scrollbar-thumb{background:var(--scroll-thumb,#ccc)!important;border:0!important;border-radius:3px!important}
html::-webkit-scrollbar-button,html *::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}
html::-webkit-scrollbar-corner,html *::-webkit-scrollbar-corner{background:transparent!important}
@supports selector(::-webkit-scrollbar){html,html *{scrollbar-width:auto!important;scrollbar-color:auto!important}}
html :is(.media,.thumb-row,.edit-cur,.more-panel,.draw-tools,.draw-view-tools>.draw-tool-group:first-child){scrollbar-width:none!important}
html :is(.media,.thumb-row,.edit-cur,.more-panel,.draw-tools,.draw-view-tools>.draw-tool-group:first-child)::-webkit-scrollbar{display:none!important}

html .app-toast{position:fixed;inset:auto auto max(22px,env(safe-area-inset-bottom)) 50%;margin:0;max-width:calc(100vw - 32px);width:max-content;padding:10px 16px;border:1px solid transparent;border-radius:4px;background:var(--ink);color:var(--on-ink);font:13px/1.6 var(--sans);letter-spacing:0;box-shadow:0 4px 20px rgba(0,0,0,.1);z-index:10000;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none;overflow-wrap:anywhere;text-align:center}
html .app-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
html[data-theme=dark] .app-toast{background:var(--soft);color:var(--text);border-color:var(--border-strong)}
@media(prefers-reduced-motion:reduce){.theme-toggle,html .app-toast{transition:none}}