:root{
    --bg:#000000;
    --surface:#111111;
    --text:#ffffff;
    --text-strong:#ffffff;
    --muted:rgba(255,255,255,.68);
    --border:rgba(255,255,255,.18);
    --toggle-bg:rgba(0,0,0,.56);
    --toggle-text:#ffffff;
    --toggle-border:rgba(255,255,255,.18);
    --chip-bg:rgba(255,255,255,.08);
}
html[data-theme="light"]{
    --bg:#f6f4ef;
    --surface:#ffffff;
    --text:#111111;
    --text-strong:#111111;
    --muted:rgba(17,17,17,.68);
    --border:rgba(17,17,17,.16);
    --toggle-bg:rgba(255,255,255,.88);
    --toggle-text:#111111;
    --toggle-border:rgba(17,17,17,.14);
    --chip-bg:rgba(17,17,17,.06);
}
body{
    transition:background .35s ease,color .35s ease;
}
.theme-toggle{
    position:fixed;
    right:84px;
    top:20px;
    z-index:10001;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--toggle-border);
    background:var(--toggle-bg);
    color:var(--toggle-text);
    padding:10px 14px;
    border-radius:999px;
    cursor:pointer;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    font-size:14px;
    line-height:1;
    box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.theme-toggle .theme-icon{font-size:15px}
html[data-theme="light"] .theme-toggle .theme-label-dark{display:none}
html[data-theme="dark"] .theme-toggle .theme-label-light{display:none}
@media (max-width:640px){
    .theme-toggle{top:14px;right:70px;padding:9px 12px;font-size:13px}
}