/* Темы календаря. Базовая тема — «пластилин» (style.css). Здесь четыре остальные.
   Тема хранится на устройстве (localStorage cal_theme): телевизор может жить в «ночной», телефон — в «пластилине». */

:root{--tilt:8;--depth:rgba(160,140,120,.55)}
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .6s,color .6s,border-color .6s,box-shadow .6s,border-radius .6s!important}
.bg::before{content:'';position:absolute;inset:-50%;pointer-events:none;opacity:0}

/* ============ 1. БРЕНД UGCITY · тиснение ============ */
[data-theme=brand]{--tilt:0;--depth:#111;--base:#FFFFEB;--card:#fff;--solid:#fff;--ink:#111;--mute:#6b6b5e;
 --flow:#EA4501;--flowi:#fff;--call:#cfe3ff;--calli:#111;--hot:#111;--hoti:#D8FF64;--task:#fff;--taski:#111;--ok:#D8FF64;--sh:#111}
[data-theme=brand] body{font-family:Inter,Manrope,sans-serif}
[data-theme=brand] .bg::before{opacity:.18;background:radial-gradient(#111 1.2px,transparent 1.3px) 0 0/26px 26px;animation:dots 30s linear infinite}
@keyframes dots{to{transform:translate(26px,26px)}}
[data-theme=brand] .blob{width:15vmax;height:15vmax;opacity:1;border:3px solid #111;box-shadow:10px 10px 0 #111}
[data-theme=brand] .b1{background:#EA4501;border-radius:50%;left:4vw;top:auto;bottom:6vh;animation:bshape1 22s ease-in-out infinite alternate}
[data-theme=brand] .b2{background:#D8FF64;border-radius:26px;right:5vw;top:30vh;animation:bshape2 26s ease-in-out infinite alternate}
[data-theme=brand] .b3{background:#A3C1BF;border-radius:50% 0;left:42vw;bottom:-4vh;animation:bshape3 30s ease-in-out infinite alternate}
[data-theme=brand] .b4{background:#fff;border-radius:30%;right:30vw;bottom:auto;top:-3vh;animation:bshape1 34s ease-in-out infinite alternate-reverse}
@keyframes bshape1{to{transform:translate(8vw,-10vh) rotate(160deg)}}
@keyframes bshape2{to{transform:translate(-6vw,14vh) rotate(-120deg) scale(1.1)}}
@keyframes bshape3{to{transform:translate(-10vw,-8vh) rotate(90deg)}}
[data-theme=brand] .dust{display:none}
[data-theme=brand] .clay{background:#fff;border:2px solid #111;border-radius:16px;box-shadow:6px 6px 0 #111}
[data-theme=brand] .clock{background:linear-gradient(120deg,#EA4501,#ff7a3d,#EA4501);background-size:250% 250%;animation:shimmer 10s ease-in-out infinite}
[data-theme=brand] .clock .d,[data-theme=brand] .clock .s,[data-theme=brand] .clock .t{color:#fff}
[data-theme=brand] .clock .t,[data-theme=brand] .bar h2,[data-theme=brand] .card h3,[data-theme=brand] .cell .n,[data-theme=brand] .login h1,[data-theme=brand] .mon h5,[data-theme=brand] .pad button,[data-theme=brand] .day .card-ev .tt{font-family:Inter,sans-serif;font-weight:900;letter-spacing:-.02em}
[data-theme=brand] .box h4,[data-theme=brand] .dows div{font-family:'IBM Plex Mono',monospace}
[data-theme=brand] .btn,[data-theme=brand] .pad button{border:2px solid #111;border-radius:10px;box-shadow:3px 3px 0 #111}
[data-theme=brand] .btn:active,[data-theme=brand] .pad button:active{transform:translate(3px,3px);box-shadow:0 0 0 #111}
[data-theme=brand] .btn.p{background:#EA4501;color:#fff}
[data-theme=brand] .seg button.on{background:#111;color:#fff;box-shadow:none}
[data-theme=brand] .cell{border-radius:14px}
[data-theme=brand] .cell:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #111}
[data-theme=brand] .cell.today{background:#D8FF64;animation:bpulse 2.4s ease-in-out infinite}
@keyframes bpulse{50%{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #111}}
[data-theme=brand] .cell.today .n{background:#111;color:#D8FF64;box-shadow:none}
[data-theme=brand] .ev{border:1.5px solid #111;border-radius:8px;box-shadow:2px 2px 0 #111}
[data-theme=brand] .ev:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #111}
[data-theme=brand] .k-hot.open{animation:bhot 1.2s steps(2) infinite}
@keyframes bhot{50%{box-shadow:4px 4px 0 #EA4501}}
[data-theme=brand] .inp{background:#fff;border:2px solid #111;border-radius:10px;box-shadow:none}
[data-theme=brand] .inp:focus{box-shadow:3px 3px 0 #EA4501}
[data-theme=brand] .chk,[data-theme=brand] .legend input{border:2px solid #111;border-radius:6px;box-shadow:none;background:#fff}
[data-theme=brand] .chk:checked,[data-theme=brand] .legend input:checked{background:#D8FF64}
[data-theme=brand] .fab{background:#EA4501;color:#fff;border:2px solid #111;border-radius:18px;box-shadow:5px 5px 0 #111}
[data-theme=brand] .pins i{border:2px solid #111;box-shadow:none;background:#fff}
[data-theme=brand] .pins i.on{background:#EA4501}
[data-theme=brand] .sheet{background:rgba(17,17,17,.25)}
[data-theme=brand] .move-q span{background:#FFFFEB;border:2px solid #111}
[data-theme=brand] .dot{box-shadow:none;border:1.5px solid #111}
[data-theme=brand] .mon .md.today{outline-color:#EA4501}
[data-theme=brand] .kinds button{border:1.5px solid #111;box-shadow:2px 2px 0 #111}

/* ============ 2. СТЕКЛО · liquid glass ============ */
[data-theme=glass]{color-scheme:dark;--tilt:10;--depth:rgba(0,0,0,.55);--base:#0d0f1a;--card:rgba(255,255,255,.08);--solid:rgba(26,28,44,.92);--ink:#f3f3f7;--mute:rgba(255,255,255,.58);
 --flow:rgba(255,106,43,.34);--flowi:#fff;--call:rgba(107,91,255,.36);--calli:#fff;--hot:rgba(255,61,109,.4);--hoti:#fff;--task:rgba(61,224,197,.2);--taski:#fff;--ok:#3de0c5;--sh:rgba(0,0,0,.3)}
[data-theme=glass] .blob{opacity:.95;width:70vmax;height:70vmax}
[data-theme=glass] .b1{background:radial-gradient(circle,#ff6a2b 0,rgba(255,106,43,0) 60%);animation-duration:18s}
[data-theme=glass] .b2{background:radial-gradient(circle,#6b5bff 0,rgba(107,91,255,0) 60%);animation-duration:22s}
[data-theme=glass] .b3{background:radial-gradient(circle,#00c2a8 0,rgba(0,194,168,0) 60%);animation-duration:25s}
[data-theme=glass] .b4{background:radial-gradient(circle,#ff3d9a 0,rgba(255,61,154,0) 60%);animation-duration:20s}
[data-theme=glass] .dust{background:#fff;box-shadow:0 0 8px #fff;opacity:.35!important}
[data-theme=glass] .clay{background:var(--card);border:1px solid rgba(255,255,255,.18);border-radius:22px;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 30px rgba(0,0,0,.3)}
[data-theme=glass] .clock{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,106,43,.5),rgba(107,91,255,.4),rgba(0,194,168,.35),rgba(255,106,43,.5));background-size:300% 300%}
[data-theme=glass] .clock::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 6s ease-in-out infinite}
@keyframes sweep{60%,100%{transform:translateX(120%)}}
[data-theme=glass] .clock .d,[data-theme=glass] .clock .s,[data-theme=glass] .clock .t{color:#fff}
[data-theme=glass] .clock .t{font-weight:500}
[data-theme=glass] .btn,[data-theme=glass] .pad button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none}
[data-theme=glass] .btn.p{background:#ff6a2b;border-color:#ff6a2b}
[data-theme=glass] .btn.g{background:#3de0c5;color:#04342c;border-color:#3de0c5}
[data-theme=glass] .seg button{color:rgba(255,255,255,.6)}
[data-theme=glass] .seg button.on{background:rgba(255,255,255,.2);color:#fff;box-shadow:none}
[data-theme=glass] .cell.today{background:rgba(255,106,43,.14);border-color:#ff8a4c;animation:gglow 3s ease-in-out infinite}
@keyframes gglow{0%,100%{box-shadow:0 0 0 1px #ff8a4c,0 0 18px rgba(255,120,60,.3)}50%{box-shadow:0 0 0 1px #ff8a4c,0 0 42px rgba(255,120,60,.6)}}
[data-theme=glass] .cell.today .n{background:#ff6a2b;color:#fff;box-shadow:none}
[data-theme=glass] .ev{border-left:3px solid #fff;border-radius:10px;box-shadow:none}
[data-theme=glass] .ev:hover{filter:brightness(1.3);box-shadow:none}
[data-theme=glass] .k-flow{border-left-color:#ff8a4c}[data-theme=glass] .k-call{border-left-color:#8f84ff}
[data-theme=glass] .k-hot{border-left-color:#ff4d6d}[data-theme=glass] .k-task{border-left-color:#3de0c5}
[data-theme=glass] .k-hot.open{animation:ghot 2s ease-in-out infinite}
@keyframes ghot{50%{box-shadow:0 0 16px rgba(255,77,109,.6)}}
[data-theme=glass] .card{background:rgba(22,24,40,.82);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
[data-theme=glass] .inp{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);box-shadow:none;color:#fff}
[data-theme=glass] .chk,[data-theme=glass] .legend input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);box-shadow:none}
[data-theme=glass] .chk:checked,[data-theme=glass] .legend input:checked{background:#3de0c5}
[data-theme=glass] .fab{background:#ff6a2b;color:#fff;box-shadow:0 10px 30px rgba(255,106,43,.5)}
[data-theme=glass] .pins i{background:rgba(255,255,255,.12);box-shadow:none}
[data-theme=glass] .pins i.on{background:#ff6a2b}
[data-theme=glass] .box li:hover,[data-theme=glass] .steps label:hover{background:rgba(255,255,255,.08)}
[data-theme=glass] .move-q span{background:rgba(255,255,255,.1)}
[data-theme=glass] .sheet{background:rgba(0,0,0,.35)}
[data-theme=glass] .toast button{color:#ffb48a}

/* ============ 3. 3D-ПЛИТКИ · изометрия ============ */
[data-theme=iso]{--tilt:0;--depth:#b9bdc6;--base:#eceef2;--card:#fff;--solid:#fff;--ink:#1c2230;--mute:#6b7285;
 --flow:#EA4501;--flowi:#fff;--call:#3d6bff;--calli:#fff;--hot:#e0203f;--hoti:#fff;--task:#e6e9ef;--taski:#1c2230;--ok:#20b26b;--sh:rgba(0,0,0,.12)}
[data-theme=iso] body{background:linear-gradient(180deg,#f7f7f5,#e1e4ea) fixed}
[data-theme=iso] .blob{display:none}
[data-theme=iso] .bg::before{opacity:.5;background:repeating-linear-gradient(30deg,transparent 0 46px,rgba(28,34,48,.07) 46px 47px),repeating-linear-gradient(-30deg,transparent 0 46px,rgba(28,34,48,.07) 46px 47px);animation:isogrid 40s linear infinite}
@keyframes isogrid{to{transform:translate(0,-108px)}}
[data-theme=iso] .dust{border-radius:3px;background:#fff;box-shadow:0 3px 0 #c8cbd3,0 6px 10px rgba(0,0,0,.08);animation-name:cube}
@keyframes cube{from{transform:translateY(105vh) rotate(0)}to{transform:translateY(-10vh) rotate(360deg)}}
[data-theme=iso] .clay{background:#fff;border-radius:14px;box-shadow:0 1px 0 #d6d8de,0 2px 0 #cfd2d9,0 3px 0 #c8cbd3,0 4px 0 #c1c5cd,0 5px 0 #babec7,0 16px 24px rgba(0,0,0,.14)}
[data-theme=iso] .clock{background:#1c2230;animation:float 6s ease-in-out infinite}
[data-theme=iso] .clock .d,[data-theme=iso] .clock .s{color:#b9c0d0}
[data-theme=iso] .clock .t{color:#fff;font-family:'IBM Plex Mono',monospace;font-weight:500}
[data-theme=iso] .box h4,[data-theme=iso] .dows div{font-family:'IBM Plex Mono',monospace}
[data-theme=iso] .cell{border-radius:12px;box-shadow:0 1px 0 #d6d8de,0 6px 14px rgba(0,0,0,.08)}
[data-theme=iso] .cell:hover{transform:translateY(-3px);box-shadow:0 1px 0 #d6d8de,0 12px 22px rgba(0,0,0,.14)}
[data-theme=iso] .cell.today{background:#ffe9dd;animation:isolift 3.2s ease-in-out infinite}
@keyframes isolift{50%{transform:translateY(-4px)}}
[data-theme=iso] .cell.today .n{background:#EA4501;color:#fff;box-shadow:0 3px 0 #a33000}
[data-theme=iso] .ev{border-radius:8px;box-shadow:0 2px 0 rgba(0,0,0,.2)}
[data-theme=iso] .ev:hover{transform:translateY(-3px);box-shadow:0 5px 0 rgba(0,0,0,.2)}
[data-theme=iso] .k-hot.open{animation:isohot 1.6s ease-in-out infinite}
@keyframes isohot{50%{transform:translateY(-3px);box-shadow:0 5px 0 rgba(0,0,0,.25)}}
[data-theme=iso] .btn,[data-theme=iso] .pad button{background:#fff;border-radius:10px;box-shadow:0 3px 0 #c6c9d1,0 6px 12px rgba(0,0,0,.08)}
[data-theme=iso] .btn:active,[data-theme=iso] .pad button:active{transform:translateY(3px);box-shadow:0 0 0 #c6c9d1}
[data-theme=iso] .btn.p{background:#EA4501;color:#fff;box-shadow:0 3px 0 #a33000}
[data-theme=iso] .btn.g{background:#20b26b;color:#fff;box-shadow:0 3px 0 #127044}
[data-theme=iso] .seg button.on{background:#1c2230;color:#fff;box-shadow:0 3px 0 #000}
[data-theme=iso] .inp{background:#f4f5f8;border:1px solid #d6d9e0;border-radius:10px;box-shadow:inset 0 2px 0 rgba(0,0,0,.05)}
[data-theme=iso] .chk,[data-theme=iso] .legend input{background:#fff;border:2px solid #c1c5cd;border-radius:6px;box-shadow:0 2px 0 #c1c5cd}
[data-theme=iso] .chk:checked,[data-theme=iso] .legend input:checked{background:#20b26b;border-color:#127044}
[data-theme=iso] .fab{background:#EA4501;color:#fff;border-radius:18px;box-shadow:0 5px 0 #a33000,0 14px 24px rgba(0,0,0,.2)}
[data-theme=iso] .pins i{background:#fff;box-shadow:0 2px 0 #c1c5cd;border:2px solid #c1c5cd}
[data-theme=iso] .pins i.on{background:#EA4501;border-color:#a33000}
[data-theme=iso] .move-q span{background:#f4f5f8}

/* ============ 4. НОЧНОЙ · для телевизора ============ */
[data-theme=night]{color-scheme:dark;--tilt:0;--depth:#000;--base:#07080b;--card:#12141a;--solid:#161922;--ink:#eceef3;--mute:#7b8190;
 --flow:#2a1a12;--flowi:#ffc1a0;--call:#161d33;--calli:#b4c4ff;--hot:#2e1118;--hoti:#ff8397;--task:#18200f;--taski:#D8FF64;--ok:#D8FF64;--sh:rgba(0,0,0,.5)}
[data-theme=night] .blob{opacity:.22;width:80vmax;height:50vmax}
[data-theme=night] .b1{background:radial-gradient(ellipse,#D8FF64 0,rgba(216,255,100,0) 60%);top:auto;bottom:-30vmax;animation:aur1 24s ease-in-out infinite alternate}
[data-theme=night] .b2{background:radial-gradient(ellipse,#5b8cff 0,rgba(91,140,255,0) 60%);top:auto;bottom:-28vmax;animation:aur2 30s ease-in-out infinite alternate}
[data-theme=night] .b3{background:radial-gradient(ellipse,#EA4501 0,rgba(234,69,1,0) 60%);animation:aur1 36s ease-in-out infinite alternate-reverse}
[data-theme=night] .b4{background:radial-gradient(ellipse,#9b5bff 0,rgba(155,91,255,0) 60%);animation:aur2 28s ease-in-out infinite alternate-reverse}
@keyframes aur1{to{transform:translate(30vw,-6vh) scale(1.3,.8)}}
@keyframes aur2{to{transform:translate(-28vw,-10vh) scale(.8,1.3)}}
[data-theme=night] .dust{width:3px!important;height:3px!important;background:#fff;box-shadow:0 0 6px #fff;animation-duration:60s!important}
[data-theme=night] .clay{background:var(--card);border:1px solid #23262f;border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
[data-theme=night] .clock{background:#0d0f14;animation:none}
[data-theme=night] .clock .d{color:#D8FF64}
[data-theme=night] .clock .s{color:#7b8190}
[data-theme=night] .clock .t{color:#fff;text-shadow:0 0 34px rgba(216,255,100,.28);font-size:72px}
[data-theme=night] .box h4,[data-theme=night] .dows div{font-family:'IBM Plex Mono',monospace}
[data-theme=night] .box li{font-size:15px}
[data-theme=night] .btn,[data-theme=night] .pad button{background:#1c1f27;color:#fff;border:1px solid #2a2e39;box-shadow:none}
[data-theme=night] .btn.p,[data-theme=night] .btn.g{background:#D8FF64;color:#07080b;border-color:#D8FF64}
[data-theme=night] .seg button.on{background:#D8FF64;color:#07080b;box-shadow:none}
[data-theme=night] .cell:hover{border-color:#D8FF64;transform:scale(1.03);box-shadow:0 0 0 1px #D8FF64,0 20px 40px rgba(0,0,0,.6)}
[data-theme=night] .cell.today{background:#141a0b;border-color:#D8FF64;animation:nglow 3.5s ease-in-out infinite}
@keyframes nglow{0%,100%{box-shadow:0 0 0 1px #D8FF64,0 0 20px rgba(216,255,100,.15)}50%{box-shadow:0 0 0 1px #D8FF64,0 0 46px rgba(216,255,100,.35)}}
[data-theme=night] .cell.today .n{background:#D8FF64;color:#07080b;box-shadow:none}
[data-theme=night] .cell .n{color:#fff}
[data-theme=night] .ev{border-left:4px solid #555;border-radius:8px;box-shadow:none}
[data-theme=night] .ev:hover{filter:brightness(1.35);box-shadow:none}
[data-theme=night] .k-flow{border-left-color:#EA4501}[data-theme=night] .k-call{border-left-color:#5b8cff}
[data-theme=night] .k-hot{border-left-color:#ff3355}[data-theme=night] .k-task{border-left-color:#D8FF64}
[data-theme=night] .k-hot.open{animation:nhot 2s ease-in-out infinite}
@keyframes nhot{50%{box-shadow:0 0 18px rgba(255,51,85,.45)}}
[data-theme=night] .card{background:#12141a;border:1px solid #D8FF64}
[data-theme=night] .inp{background:#0d0f14;border:1px solid #2a2e39;box-shadow:none;color:#fff}
[data-theme=night] .chk,[data-theme=night] .legend input{background:#0d0f14;border:1px solid #3a3f4c;box-shadow:none}
[data-theme=night] .chk:checked,[data-theme=night] .legend input:checked{background:#D8FF64}
[data-theme=night] .fab{background:#D8FF64;color:#07080b;box-shadow:0 0 30px rgba(216,255,100,.35)}
[data-theme=night] .pins i{background:#1c1f27;box-shadow:none;border:1px solid #3a3f4c}
[data-theme=night] .pins i.on{background:#D8FF64}
[data-theme=night] .box li:hover,[data-theme=night] .steps label:hover{background:#1c1f27}
[data-theme=night] .move-q span{background:#1c1f27}
[data-theme=night] .sheet{background:rgba(0,0,0,.55)}
[data-theme=night] .toast button{color:#D8FF64}
[data-theme=night] .mon .md.today{outline-color:#D8FF64}

/* ============ выбор темы ============ */
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:16px}
.th{border:0;border-radius:18px;padding:0;overflow:hidden;text-align:left;background:transparent;box-shadow:0 6px 16px rgba(0,0,0,.15);transition:transform .3s cubic-bezier(.2,.9,.3,1.5)}
.th:hover{transform:translateY(-4px) scale(1.03)}
.th.on{outline:3px solid var(--ok);outline-offset:3px}
.th .pv{height:84px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px;align-content:end}
.th .pv i{height:22px;border-radius:6px}
.th .nm{display:block;padding:10px 12px;font-weight:800;font-size:14px;background:#fff;color:#1c2230}
.th .nm small{display:block;font-weight:700;font-size:12px;color:#6b7285;margin-top:2px}

/* точки и «просрочено» на тёмном фоне */
[data-theme=glass] .d-flow{background:#ff8a4c}[data-theme=glass] .d-call{background:#8f84ff}[data-theme=glass] .d-hot{background:#ff4d6d}[data-theme=glass] .d-task{background:#3de0c5}
[data-theme=night] .d-flow{background:#EA4501}[data-theme=night] .d-call{background:#5b8cff}[data-theme=night] .d-hot{background:#ff3355}[data-theme=night] .d-task{background:#D8FF64}
[data-theme=glass] .box li small.late,[data-theme=night] .box li small.late{color:#ff7a90}
[data-theme=glass] .err,[data-theme=night] .err{color:#ff7a90}

/* ============ переключатели для любой темы ============ */
/* Объёмные 3D-плитки: у ячейки появляется боковая грань, при наведении она поднимается */
html.opt-3d .cell{box-shadow:0 2px 0 var(--depth),0 4px 0 var(--depth),0 6px 0 var(--depth),0 8px 0 var(--depth),0 18px 26px rgba(0,0,0,.22)}
html.opt-3d .cell:hover{transform:translateY(-8px) translateZ(30px);box-shadow:0 2px 0 var(--depth),0 4px 0 var(--depth),0 6px 0 var(--depth),0 8px 0 var(--depth),0 10px 0 var(--depth),0 12px 0 var(--depth),0 14px 0 var(--depth),0 36px 42px rgba(0,0,0,.28)}
html.opt-3d .cell.today{animation:lift3d 3.2s ease-in-out infinite}
@keyframes lift3d{50%{transform:translateY(-6px) translateZ(20px)}}
html.opt-3d .ev{box-shadow:0 2px 0 rgba(0,0,0,.25),0 5px 10px rgba(0,0,0,.12)}
html.opt-3d .ev:hover{transform:translateY(-3px);box-shadow:0 5px 0 rgba(0,0,0,.25),0 10px 16px rgba(0,0,0,.15)}
/* Наклон календаря: сетка лежит в перспективе, как стол */
html.opt-tilt .app{perspective:1800px}
html.opt-tilt .view.month,html.opt-tilt .view.week{transform:rotateX(12deg);transform-origin:50% 100%;transform-style:preserve-3d}
html.opt-tilt .grid{transform-style:preserve-3d}

.opts{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:16px;background:rgba(127,127,127,.08);font-weight:800;font-size:15px;cursor:pointer}
.opt small{display:block;font-weight:700;font-size:12px;color:var(--mute);margin-top:2px}
.sw{appearance:none;flex:none;width:54px;height:32px;border-radius:16px;position:relative;cursor:pointer;background:rgba(127,127,127,.3);transition:background .3s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.2,.9,.3,1.5)}
.sw:checked{background:var(--ok)}
.sw:checked::after{transform:translateX(22px)}
[data-theme=night] .me{background:#D8FF64;color:#07080b}
[data-theme=glass] .me{background:rgba(255,255,255,.3);color:#fff}
[data-theme=brand] .me{background:#111;color:#D8FF64}
[data-theme=night] .mine-tag{background:#D8FF64;color:#07080b}
[data-theme=glass] .linkbtn,[data-theme=night] .linkbtn{color:#ff7a90}
@media(max-width:900px){.themes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.th .pv{height:56px;padding:8px;gap:4px}.th .pv i{height:16px}.th .nm{padding:8px 10px;font-size:13px}.th .nm small{font-size:11px}}