*{box-sizing:border-box;margin:0;padding:0}

:root {
 --bg-grad: #f0f4f8;
 --canvas: #ffffff;
 --soft: rgba(255,255,255,0.9);
 --surf2: #f0f4f8;
 --text: #1a1a2e;
 --text2: rgba(26,26,46,0.7);
 --bd: rgba(0,0,0,0.1);
 --blue: #0066cc;
 --blueS: rgba(0,102,204,0.16);
 --green: #00e676;
 --greenS: rgba(0,230,118,0.16);
 --orange: #D5803B;
 --orangeS: rgba(213,128,59,0.16);
 --red: #E05B4E;
 --redS: rgba(224,91,78,0.16);
 --primary: #0066cc;
 --tline: #8A8781;
 --tfill: #FFFFFF;
 --sh: 0 4px 12px rgba(0,0,0,0.05);
 --glass-bg: rgba(255,255,255,0.9);
 --glass-bd: rgba(0,0,0,0.05);
}
[data-theme="dark"] {
 --bg-grad: linear-gradient(135deg, #0a0f1e 0%, #0d1b2a 50%, #0a1628 100%);
 --canvas: rgba(255,255,255,0.05);
 --soft: rgba(10, 15, 40, 0.85);
 --surf2: rgba(255,255,255,0.1);
 --text: #ffffff;
 --text2: rgba(255,255,255,0.6);
 --bd: rgba(255,255,255,0.1);
 --blue: #00d4ff;
 --blueS: rgba(0,212,255,0.16);
 --green: #00e676;
 --greenS: rgba(0,230,118,0.16);
 --orange: #DE9255;
 --orangeS: rgba(222,146,85,0.16);
 --red: #E97366;
 --redS: rgba(233,115,102,0.16);
 --primary: #00d4ff;
 --tline: rgba(255,255,255,0.62);
 --tfill: #1a1a2e;
 --sh: 0 4px 14px rgba(0,0,0,0.3);
 --glass-bg: rgba(255,255,255,0.05);
 --glass-bd: rgba(255,255,255,0.1);
}
body { background: var(--bg-grad) !important; background-attachment: fixed !important; min-height: 100vh; font-family: "Poppins", sans-serif !important;}
.card { background: var(--glass-bg) !important; backdrop-filter: blur(10px); border: 1px solid var(--glass-bd) !important; }
.sb { background: var(--soft) !important; backdrop-filter: blur(15px); }
.nav.on { background: var(--blueS) !important; border-left: 3px solid var(--primary); box-shadow: 0 0 10px var(--blueS); color: var(--text) !important; }
.btn:hover { box-shadow: 0 0 8px var(--blueS); }
.btn.pri { background: var(--primary) !important; border-color: var(--primary) !important; color: #000 !important; font-weight: 600; box-shadow: 0 0 10px var(--blueS); }
.btn.pri:hover { background: #00b8e6 !important; }
.tw{width:52px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 1px;border-radius:8px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;position:relative;will-change:transform}
.tw:hover{transform:translateY(-5px) scale(1.08);z-index:10;}
.tw.sel{background:var(--blueS);box-shadow:0 0 12px var(--primary),inset 0 0 0 1px var(--primary)}
.tw::after{content:attr(data-tt);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.85);background:rgba(0,0,0,.85);color:#fff;padding:4px 9px;border-radius:6px;font-size:10.5px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:all .15s;z-index:99;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15)}
.tw:hover::after{opacity:1;transform:translateX(-50%) scale(1)}
.tsvg{width:48px;height:88px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.tsvg .cr{fill:var(--tfill);stroke:var(--tline);stroke-width:1.6;stroke-linejoin:round;transition:fill .15s}
.tsvg .rt{fill:var(--tfill);stroke:var(--tline);stroke-width:1.3;stroke-linejoin:round}
.tsvg .cr-e{fill:none;stroke:var(--tline);stroke-width:.7;opacity:.45}
.whl{width:38px;height:38px;display:block;cursor:pointer}
.whl .ring{fill:none;stroke:var(--tline);stroke-width:1.2}
.whl .z{cursor:pointer;stroke:var(--tline);stroke-width:.8;fill:var(--tfill);transition:fill .12s,filter .12s}
.whl .z:hover{filter:brightness(1.4)}
.whl .zc{fill:var(--tfill);stroke:var(--tline);stroke-width:.8;cursor:pointer;transition:fill .12s}
.whl .zc:hover{filter:brightness(1.4)}
.tb { background: color-mix(in srgb,var(--bg-grad) 88%,transparent) !important; backdrop-filter: blur(10px) !important;}

body{background:var(--canvas);color:var(--text);font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.app{display:flex;min-height:100vh}
.sp{flex:1}
.muted{color:var(--text2)}
.nw{white-space:nowrap}
.hint{font-size:11.5px;color:var(--text2);line-height:1.6}