:root{
  color-scheme:dark;
  --c-accent:0,255,156; --c-accent2:0,229,255; --c-alt:177,140,255;
  --c-danger:255,45,111; --c-danger2:255,92,138; --c-warn:241,250,140;
  --c-shadow:0,0,0; --c-hi:255,255,255; --c-ink:255,255,255;
  --c-term:2,6,4; --c-solid:3,16,10; --c-scrim:0,5,3;
  --green:#00ff9c; --cyan:#00e5ff; --purple:#b18cff; --red:#ff2d6f; --yellow:#f1fa8c; --dim:#5f8f7c;
  --bg:#04070a; --bg2:#071a13; --panel:#07130d; --term:#020604;
  --tx:#c8ffe6; --tx2:#a8e0c8; --tx3:#79a893; --tx4:#3f7059; --tx-hi:#fff;
  --tx-cyan:#3df0ff; --tx-warn:#ffef9e; --tx-alt:#c9a9ff; --tx-h3:#43ffb0; --tx-danger:#ff5c8a; --tx-danger2:#ffd9e6;
  --on-accent:#001a10; --on-accent2:#001318; --on-danger:#1a0008; --on-warn:#1a1600;
  --line:rgba(var(--c-accent),.28); --line-soft:rgba(var(--c-accent),.16);
  --edge:rgba(var(--c-accent),.75);
}
html[data-theme="midnight"]{
  --c-accent:94,234,212; --c-accent2:125,211,252; --c-alt:196,181,253;
  --c-term:4,6,6; --c-solid:8,12,11; --c-scrim:0,0,0; --c-shadow:0,0,0;
  --green:#5eead4; --cyan:#7dd3fc; --purple:#c4b5fd; --red:#f87171; --yellow:#fde047; --dim:#6b7f78;
  --bg:#000; --bg2:#0a0f0e; --panel:#0b100f; --term:#050807;
  --tx:#dbe7e1; --tx2:#a9bcb4; --tx3:#7d918a; --tx4:#57675f; --tx-hi:#fff;
  --tx-cyan:#7dd3fc; --tx-warn:#fde047; --tx-alt:#c4b5fd; --tx-h3:#5eead4; --tx-danger:#fca5a5; --tx-danger2:#fecaca;
  --on-accent:#02120e; --on-accent2:#04141c; --on-danger:#1a0000; --on-warn:#1a1600;
  --line:rgba(var(--c-accent),.2); --line-soft:rgba(var(--c-accent),.11); --edge:rgba(var(--c-accent),.75);
}
html[data-theme="ocean"]{
  --c-accent:56,189,248; --c-accent2:129,140,248; --c-alt:45,212,191;
  --c-term:3,10,20; --c-solid:6,18,32; --c-scrim:0,2,10; --c-shadow:0,2,10;
  --green:#38bdf8; --cyan:#818cf8; --purple:#2dd4bf; --red:#fb7185; --yellow:#fde68a; --dim:#5b7f99;
  --bg:#030814; --bg2:#061a2e; --panel:#051220; --term:#030a14;
  --tx:#cfeaff; --tx2:#a9d2ee; --tx3:#7ba3c2; --tx4:#4a6f8c; --tx-hi:#fff;
  --tx-cyan:#7dd3fc; --tx-warn:#fde68a; --tx-alt:#a5b4fc; --tx-h3:#5eead4; --tx-danger:#fca5a5; --tx-danger2:#fecaca;
  --on-accent:#02121f; --on-accent2:#04141c; --on-danger:#1a0000; --on-warn:#1a1600;
  --line:rgba(var(--c-accent),.28); --line-soft:rgba(var(--c-accent),.15); --edge:rgba(var(--c-accent),.75);
}
html[data-theme="violet"]{
  --c-accent:196,132,252; --c-accent2:244,114,182; --c-alt:129,140,248;
  --c-term:8,4,16; --c-solid:16,8,30; --c-scrim:4,0,12; --c-shadow:4,0,12;
  --green:#c484fc; --cyan:#f472b6; --purple:#818cf8; --red:#fb7185; --yellow:#fcd34d; --dim:#8b7ba8;
  --bg:#08040f; --bg2:#170a2c; --panel:#10061e; --term:#08040f;
  --tx:#edd8ff; --tx2:#cfb3ee; --tx3:#a086c0; --tx4:#6b5286; --tx-hi:#fff;
  --tx-cyan:#f9a8d4; --tx-warn:#fcd34d; --tx-alt:#a5b4fc; --tx-h3:#d8b4fe; --tx-danger:#fca5a5; --tx-danger2:#fecaca;
  --on-accent:#160725; --on-accent2:#1a0b2e; --on-danger:#1a0000; --on-warn:#1a1600;
  --line:rgba(var(--c-accent),.3); --line-soft:rgba(var(--c-accent),.16); --edge:rgba(var(--c-accent),.75);
}
html[data-theme="amber"]{
  --c-accent:251,191,36; --c-accent2:251,146,60; --c-alt:163,230,53;
  --c-term:12,8,2; --c-solid:22,14,4; --c-scrim:8,5,0; --c-shadow:8,5,0;
  --green:#fbbf24; --cyan:#fb923c; --purple:#a3e635; --red:#f87171; --yellow:#fde68a; --dim:#a08a5c;
  --bg:#0a0703; --bg2:#1e1406; --panel:#150e04; --term:#0c0802;
  --tx:#ffedc8; --tx2:#e8d3a8; --tx3:#bda479; --tx4:#8a7550; --tx-hi:#fff;
  --tx-cyan:#fdba74; --tx-warn:#fde68a; --tx-alt:#bef264; --tx-h3:#fcd34d; --tx-danger:#fca5a5; --tx-danger2:#fecaca;
  --on-accent:#1a1200; --on-accent2:#1a1200; --on-danger:#1a0000; --on-warn:#1a1600;
  --line:rgba(var(--c-accent),.3); --line-soft:rgba(var(--c-accent),.16); --edge:rgba(var(--c-accent),.75);
}
html[data-theme="light"]{
  color-scheme:light;
  --c-accent:12,122,84; --c-accent2:11,109,158; --c-alt:104,70,196;
  --c-term:238,243,241; --c-solid:247,250,249; --c-scrim:16,32,26; --c-shadow:24,46,38; --c-ink:11,19,16;
  --green:#0c7a54; --cyan:#0b6d9e; --purple:#6846c4; --red:#c8204e; --yellow:#966900; --dim:#7c8b84;
  --bg:#f6f9f7; --bg2:#e7efea; --panel:#fff; --term:#eef3f1;
  --tx:#1f2a25; --tx2:#42544b; --tx3:#5f7168; --tx4:#8b9a92; --tx-hi:#0b1310;
  --tx-cyan:#0b6d9e; --tx-warn:#8a5f00; --tx-alt:#5b3fb3; --tx-h3:#0c7a54; --tx-danger:#b81a45; --tx-danger2:#8f1236;
  --on-accent:#fff; --on-accent2:#fff; --on-danger:#fff; --on-warn:#fff;
  --line:rgba(var(--c-accent),.22); --line-soft:rgba(var(--c-accent),.13); --edge:rgba(var(--c-accent),.75);
}
html[data-theme="light"] *{text-shadow:none !important;}
html[data-theme="light"] body::before{display:none;}

:root{--side-w:225px;--ease:cubic-bezier(.22,.8,.28,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--t-fast:.15s;--t:.26s;--t-slow:.45s;}
*{box-sizing:border-box;margin:0;padding:0;}
html{scrollbar-color:rgba(var(--c-accent),.35) var(--term);}
body{
  background:var(--bg);color:var(--green);
  font-family:"JetBrains Mono","Cascadia Mono","Consolas","Monaco","Sarasa Mono SC","Microsoft YaHei UI","Courier New",monospace;
  font-size:15px;line-height:1.78;height:100vh;display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.15px;
}
body::before{
  content:"";position:fixed;inset:-20%;pointer-events:none;z-index:-2;filter:blur(30px);
  background:
    radial-gradient(42% 38% at 15% 12%,rgba(var(--c-accent),.11),transparent 70%),
    radial-gradient(46% 42% at 85% 18%,rgba(var(--c-accent2),.09),transparent 72%),
    radial-gradient(40% 44% at 72% 88%,rgba(var(--c-alt),.07),transparent 74%),
    radial-gradient(38% 40% at 28% 82%,rgba(var(--c-accent),.06),transparent 72%);
  animation:aurora 34s var(--ease) infinite alternate;
}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(1.4%,-1.4%,0) scale(1.04);}100%{transform:translate3d(-1.4%,1.4%,0) scale(1.02);}}
#bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(var(--c-accent),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--c-accent),.035) 1px,transparent 1px);
  background-size:42px 42px,42px 42px;
  mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 78%);
  animation:gridDrift 48s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0,0 0;}to{background-position:0 42px,42px 0;}}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(to bottom,rgba(var(--c-accent),0.014) 0px,rgba(var(--c-accent),0.014) 1px,transparent 1px,transparent 3px);
}
::selection{background:var(--green);color:var(--on-accent);}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:var(--term);}
::-webkit-scrollbar-thumb{background:rgba(var(--c-accent),.35);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--green);}
button{font-family:inherit;cursor:pointer;}
a{color:var(--cyan);text-decoration:none;}
.hidden{display:none !important;}

#progressbar{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;opacity:0;transition:width .35s ease,opacity .3s ease;
  background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 12px var(--green),0 0 6px var(--cyan);
}
#progressbar.on{opacity:1;animation:barPulse 1.1s ease-in-out infinite;}
@keyframes barPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.5);}}

header{
  display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap;flex-shrink:0;position:relative;z-index:60;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(var(--c-accent),.09),transparent);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:.7;
  background:linear-gradient(90deg,transparent,rgba(var(--c-accent),.7),rgba(var(--c-accent2),.7),transparent);
  background-size:220% 100%;animation:lineFlow 7s linear infinite;
}
@keyframes lineFlow{from{background-position:200% 0;}to{background-position:-200% 0;}}
header h1{
  font-size:18px;letter-spacing:3px;color:var(--tx-hi);white-space:nowrap;cursor:pointer;font-weight:600;
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 8px var(--green),0 0 20px var(--green);
}
header h1:hover{text-shadow:0 0 12px var(--green),0 0 32px var(--green);}
.crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx3);white-space:nowrap;flex:0 1 auto;min-width:0;}
.crumb a{color:var(--cyan);min-width:0;overflow:hidden;text-overflow:ellipsis;}
.crumb a:hover{text-shadow:0 0 8px var(--cyan);}
.search-wrap{position:relative;flex:1;min-width:150px;max-width:420px;}
#search{width:100%;background:var(--term);border:1px solid var(--line);border-radius:6px;padding:8px 13px;color:var(--green);font-family:inherit;font-size:14px;outline:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);}
#search:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--c-accent),.1),0 0 18px rgba(var(--c-accent),.25);}
#search::placeholder{color:var(--tx3);}
#searchResults{position:absolute;top:110%;left:0;right:0;max-height:380px;overflow-y:auto;display:none;z-index:70;
  background:rgba(var(--c-solid),.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--green);border-radius:8px;box-shadow:0 12px 40px rgba(var(--c-shadow),.85),0 0 30px rgba(var(--c-accent),.12);}
#searchResults.show{display:block;animation:dropIn .2s var(--ease-out);}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px) scale(.99);}to{opacity:1;transform:none;}}
.sr-item{padding:9px 13px;border-bottom:1px solid rgba(var(--c-accent),.12);cursor:pointer;transition:background var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);}
.sr-item:hover{background:rgba(var(--c-accent),.12);padding-left:16px;}
.sr-item .sr-kind{font-size:11px;color:var(--tx-cyan);letter-spacing:1px;margin-right:6px;}
.sr-item .sr-label{font-size:14px;}
.sr-item .sr-desc{font-size:12.5px;color:var(--tx2);margin-top:2px;}
.sr-none{padding:14px;color:var(--tx3);font-size:14px;text-align:center;}

.hud{display:flex;align-items:center;flex-wrap:nowrap;gap:7px;margin-left:auto;font-size:13px;min-width:0;flex:0 0 auto;}
.hud .stat{border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--tx-cyan);letter-spacing:1px;white-space:nowrap;flex:0 0 auto;background:rgba(var(--c-accent2),.05);font-variant-numeric:tabular-nums;transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);}
.hud .stat:hover{box-shadow:0 0 14px rgba(var(--c-accent2),.25);border-color:rgba(var(--c-accent2),.5);}
.hud .streak{color:var(--tx-warn);}
.hud button{position:relative;overflow:hidden;flex:0 0 auto;background:rgba(var(--c-accent),.1);color:var(--green);border:1px solid rgba(var(--c-accent),.45);border-radius:6px;padding:5px 10px;font-size:13px;letter-spacing:.5px;white-space:nowrap;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease),border-color var(--t) var(--ease);}
.hud button:hover{background:var(--green);color:var(--on-accent);box-shadow:0 0 18px rgba(var(--c-accent),.45);border-color:var(--green);}
.hud button.on{background:var(--cyan);color:var(--on-accent2);border-color:var(--cyan);box-shadow:0 0 18px rgba(var(--c-accent2),.45);}
.hud button.warn{color:var(--yellow);border-color:rgba(var(--c-warn),.5);}
.hud button.warn:hover{background:var(--yellow);color:var(--on-warn);border-color:var(--yellow);box-shadow:0 0 18px rgba(var(--c-warn),.4);}
.hud .hud-sep{width:1px;height:20px;background:var(--line);flex:0 0 auto;}
#btnMenu{display:none;background:transparent;border:none;color:var(--green);font-size:24px;padding:0 10px;}
@media (max-width:820px){#btnMenu{display:block;}}

.layout{display:flex;flex:1;overflow:hidden;}
aside{width:var(--side-w);flex-shrink:0;border-right:1px solid var(--line);overflow-y:auto;background:rgba(var(--c-accent),.02);transition:margin-left var(--t-slow) var(--ease);}
body.focus aside{margin-left:calc(-1 * var(--side-w));}
aside .side-title{padding:13px 15px 7px;font-size:12.5px;letter-spacing:2px;color:var(--cyan);font-weight:600;text-shadow:0 0 10px rgba(var(--c-accent2),.35);}
.chap-title{padding:11px 15px 5px;font-size:12px;letter-spacing:1px;color:var(--tx-alt);font-weight:600;border-top:1px solid rgba(var(--c-accent),.12);margin-top:5px;}
.lesson-item{padding:9px 15px;cursor:pointer;font-size:14px;line-height:1.5;color:var(--tx-h3);border-left:3px solid transparent;position:relative;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);}
.lesson-item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(var(--c-accent),.16),transparent);transition:width var(--t) var(--ease);pointer-events:none;}
.lesson-item:hover{background:rgba(var(--c-accent),.1);padding-left:19px;color:var(--tx);}
.lesson-item:hover::after{width:100%;}
.lesson-item.active{background:linear-gradient(90deg,rgba(var(--c-accent),.22),rgba(var(--c-accent),.06));border-left-color:var(--green);color:var(--tx-hi);font-weight:600;box-shadow:inset 0 0 18px rgba(var(--c-accent),.15);}
.lesson-item .idx{color:var(--cyan);opacity:.85;margin-right:7px;font-weight:600;}
.lesson-item .st{font-size:12px;color:var(--tx2);opacity:.85;display:block;margin-top:2px;}
.lesson-item .done{color:var(--yellow);opacity:1;}
#calendar{padding:2px 12px 10px;}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:11px;color:var(--tx3);text-align:center;margin-bottom:3px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11.5px;border-radius:3px;color:var(--tx4);border:1px solid transparent;}
.cal-day.on{background:rgba(var(--c-accent),.25);color:var(--green);border-color:rgba(var(--c-accent),.5);}
.cal-day.today{border-color:var(--cyan);color:var(--cyan);font-weight:bold;}
.cal-day.on.today{background:rgba(var(--c-accent2),.25);color:var(--tx-hi);}
.side-actions{display:flex;gap:6px;padding:4px 12px 16px;flex-wrap:wrap;}
.side-actions button{flex:1;min-width:88px;background:rgba(var(--c-accent),.08);color:var(--green);border:1px solid rgba(var(--c-accent),.3);border-radius:4px;padding:6px;font-size:12px;letter-spacing:1px;}
.side-actions button:hover{background:var(--green);color:var(--on-accent);}

main{flex:1;overflow-y:auto;padding:22px 24px 96px;scroll-behavior:smooth;display:flex;flex-direction:column;align-items:center;}
main > *{width:100%;max-width:960px;flex:0 0 auto;}
.card{position:relative;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:18px 22px;margin-bottom:18px;
  background:linear-gradient(180deg,rgba(var(--c-accent),.055),rgba(var(--c-accent),.025));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 22px rgba(var(--c-shadow),.35);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);}
.card:hover{border-color:rgba(var(--c-accent),.5);box-shadow:0 10px 32px rgba(var(--c-shadow),.45),0 0 26px rgba(var(--c-accent),.1);}
.card h2{font-size:19px;color:var(--tx-cyan);letter-spacing:2px;margin:2px 0 12px;font-weight:600;padding-bottom:10px;border-bottom:1px solid rgba(var(--c-accent2),.18);}
.card h3{font-size:15.5px;color:var(--tx-h3);margin:20px 0 10px;letter-spacing:1px;font-weight:600;}
.card h3:first-child{margin-top:2px;}
.empty{color:var(--tx3);text-align:center;padding:40px 0;letter-spacing:2px;font-size:14px;}

.blk-h{font-size:16px;color:var(--tx-cyan);letter-spacing:1px;font-weight:600;margin:20px 0 9px;padding-left:10px;border-left:3px solid var(--cyan);}
.card .blk-h:first-child{margin-top:0;}
.blk-p{font-size:14.5px;line-height:1.9;color:var(--tx);margin:10px 0;}
.blk-p code,.blk-list code{color:var(--yellow);background:rgba(var(--c-warn),.1);padding:1px 6px;border-radius:3px;}
.blk-list{margin:9px 0 9px 24px;font-size:14.5px;line-height:1.9;color:var(--tx);}
.blk-list li{margin:4px 0;}
.blk-list li::marker{color:var(--cyan);}
.blk-note{margin:12px 0;padding:11px 15px;border-radius:0 6px 6px 0;border-left:3px solid var(--green);background:rgba(var(--c-accent),.08);font-size:14px;line-height:1.85;color:var(--tx);}
.blk-note b{display:block;color:var(--green);letter-spacing:1px;font-size:12.5px;margin-bottom:3px;}
.blk-warn{margin:12px 0;padding:11px 15px;border-radius:0 6px 6px 0;border-left:3px solid var(--red);background:rgba(var(--c-danger),.09);font-size:14px;line-height:1.85;color:var(--tx-danger2);}
.blk-warn b{display:block;color:var(--tx-danger);letter-spacing:1px;font-size:12.5px;margin-bottom:3px;}
.blk-table{width:100%;border-collapse:collapse;margin:13px 0;font-size:13.8px;}
.blk-table th{text-align:left;color:var(--tx-cyan);font-weight:600;letter-spacing:1px;padding:8px 10px;border-bottom:1px solid rgba(var(--c-accent2),.4);background:rgba(var(--c-accent2),.05);}
.blk-table td{padding:7px 10px;border-bottom:1px solid rgba(var(--c-accent),.15);color:var(--tx);vertical-align:top;}
.blk-table tr:hover td{background:rgba(var(--c-accent),.06);}
.codewrap{position:relative;margin:10px 0;}
pre.code{background:var(--term);border:1px solid rgba(var(--c-accent),.3);border-radius:6px;padding:14px;overflow-x:auto;font-size:14px;line-height:1.7;color:var(--tx);white-space:pre;}
pre.code .k{color:var(--purple);}pre.code .s{color:var(--yellow);}pre.code .c{color:var(--tx4);}pre.code .n{color:var(--tx-danger2);}
.copy{position:absolute;top:7px;right:7px;background:rgba(var(--c-accent),.1);color:var(--green);border:1px solid rgba(var(--c-accent),.45);border-radius:5px;padding:2px 9px;font-size:10.5px;letter-spacing:1px;}
.copy:hover{background:var(--green);color:var(--on-accent);}
.copy.done{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent2);}

.pep{position:relative;margin:14px 0 2px;padding:11px 15px 11px 42px;border-radius:8px;border:1px dashed rgba(var(--c-accent),.35);background:linear-gradient(120deg,rgba(var(--c-accent),.09),rgba(var(--c-accent2),.05));color:var(--tx);font-size:14px;line-height:1.85;opacity:0;animation:pepIn .5s var(--ease-out) forwards;animation-delay:.35s;overflow:hidden;}
.pep::before{content:"⚡";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;animation:pepSpark 2.2s ease-in-out infinite;}
.pep b{color:var(--yellow);}
.pep::after{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(var(--c-accent),.16) 50%,transparent 70%);background-size:220% 100%;animation:sheen 4.5s linear infinite;}
@keyframes pepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes pepSpark{0%,100%{transform:translateY(-50%) scale(1);}50%{transform:translateY(-50%) scale(1.22);}}
@keyframes sheen{0%{left:-45%;}55%,100%{left:125%;}}

.resume{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px;padding:16px 20px;border:1px solid var(--edge);border-radius:14px;background:linear-gradient(135deg,rgba(var(--c-accent),.10),rgba(var(--c-accent),.03));box-shadow:0 0 24px rgba(var(--c-accent),.10);}
.resume.fresh{border-style:dashed;}
.rs-main{flex:1 1 260px;min-width:0;}
.rs-tag{display:inline-block;font-size:11px;letter-spacing:1px;color:var(--cyan);border:1px solid rgba(var(--c-accent),.4);border-radius:20px;padding:1px 9px;margin-bottom:7px;}
.rs-title{font-size:17px;color:var(--tx-hi);font-weight:600;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rs-sub{font-size:12px;color:var(--tx3);line-height:1.7;}
.rs-act{flex:0 0 auto;}
.rs-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding-left:18px;border-left:1px solid var(--line);}
.rs-today{font-size:13px;color:var(--tx3);}
.rs-today b{font-size:22px;color:var(--tx-hi);font-weight:700;font-variant-numeric:tabular-nums;}
.rs-today.done b{color:var(--green);}
.rs-streak{font-size:12px;color:var(--tx2);}
.rs-week{display:flex;gap:3px;margin-top:2px;}
.rs-week i{width:11px;height:11px;border-radius:3px;display:block;background:rgba(var(--c-accent),.16);border:1px solid var(--line);}
.rs-week i.on{background:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(var(--c-accent),.5);}

.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;padding:30px 30px 26px;margin-bottom:22px;
  background:radial-gradient(circle at 92% 12%,rgba(var(--c-accent2),.16),transparent 55%),radial-gradient(circle at 8% 90%,rgba(var(--c-accent),.12),transparent 55%),linear-gradient(160deg,rgba(var(--c-accent),.08),rgba(var(--c-accent2),.02));
  box-shadow:0 14px 46px rgba(var(--c-shadow),.45),inset 0 1px 0 rgba(var(--c-accent),.16);}
.hero::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(var(--c-accent),.09),transparent);animation:heroSheen 6.5s var(--ease) infinite;}
@keyframes heroSheen{0%{left:-45%;}55%,100%{left:125%;}}
.hero .tag{font-size:12px;letter-spacing:3px;color:var(--tx-cyan);opacity:.92;font-family:inherit;}
.hero h2{font-size:31px;color:var(--tx-hi);letter-spacing:3px;margin:9px 0 8px;line-height:1.3;}
.hero h2 .caret{display:inline-block;width:.6ch;margin-left:2px;color:var(--cyan);animation:caretBlink 1.05s step-end infinite;}
@keyframes caretBlink{0%,100%{opacity:1;}50%{opacity:0;}}
.hero .tl{color:var(--tx-warn);font-size:15px;line-height:1.8;max-width:70ch;}
.hero .stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.hero .stats span{border:1px solid rgba(var(--c-accent),.4);border-radius:999px;padding:6px 15px;font-size:13px;color:var(--tx-cyan);letter-spacing:1px;background:rgba(var(--c-accent),.05);transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease);}
.hero .stats span:hover{box-shadow:0 0 16px rgba(var(--c-accent),.3);transform:translateY(-2px);}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center;}
.hero-cta .cta-main{position:relative;overflow:hidden;border:1px solid var(--green);border-radius:8px;padding:11px 26px;background:linear-gradient(120deg,rgba(var(--c-accent),.22),rgba(var(--c-accent2),.14));color:var(--tx-hi);font-family:inherit;font-size:15px;letter-spacing:2px;font-weight:600;box-shadow:0 0 22px rgba(var(--c-accent),.25);transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease),background var(--t) var(--ease);}
.hero-cta .cta-main:hover{transform:translateY(-2px);background:linear-gradient(120deg,var(--green),var(--cyan));color:var(--on-accent);box-shadow:0 0 34px rgba(var(--c-accent),.55);}
.hero-cta .cta-sub{border:1px solid rgba(var(--c-accent2),.4);border-radius:8px;padding:11px 22px;background:transparent;color:var(--tx2);font-family:inherit;font-size:14px;letter-spacing:1px;}
.hero-cta .cta-sub:hover{border-color:var(--cyan);color:var(--tx-hi);background:rgba(var(--c-accent2),.08);}

.subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:10px;}
@media (max-width:1100px){.subject-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}}
@media (max-width:720px){.subject-grid{grid-template-columns:1fr;}}
.subject-card{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:linear-gradient(165deg,rgba(var(--c-accent),.08),rgba(var(--c-accent),.03));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:220px;transition:transform var(--t) var(--ease-out),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);}
.subject-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t) var(--ease);background:linear-gradient(120deg,transparent 30%,rgba(var(--c-accent),.12) 50%,transparent 70%);}
.subject-card:hover::before{opacity:1;}
.subject-card:hover{border-color:var(--green);background:rgba(var(--c-accent),.12);box-shadow:0 14px 40px rgba(var(--c-shadow),.5),0 0 30px rgba(var(--c-accent),.25);transform:translateY(-6px);}
.subject-card .sc-ico{font-size:11px;letter-spacing:2px;color:var(--tx-cyan);opacity:.8;text-transform:uppercase;}
.subject-card h3{font-size:22px;color:var(--tx-hi);letter-spacing:1px;margin:10px 0 8px;font-weight:600;line-height:1.2;}
.subject-card .sc-tl{font-size:14px;color:var(--tx-warn);opacity:.9;flex:1;line-height:1.6;}
.subject-card .sc-meta{margin-top:14px;font-size:12px;color:var(--tx3);letter-spacing:1px;}
.subject-card .sc-go{margin-top:14px;padding-top:4px;font-size:14px;color:var(--green);letter-spacing:2px;font-weight:600;}
.subject-card.planned{cursor:default;opacity:.5;border-style:dashed;}
.subject-card.planned:hover{transform:none;box-shadow:none;background:rgba(var(--c-accent),.03);border-color:rgba(var(--c-accent),.35);}
.subject-card.planned h3{color:var(--tx2);}
.subject-card.planned .sc-go{color:var(--dim);}

.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.track-card{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:linear-gradient(160deg,rgba(var(--c-accent),.06),rgba(var(--c-accent2),.02));position:relative;overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t) var(--ease-out),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);}
.track-card::after{content:"";position:absolute;top:-40%;right:-30%;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(var(--c-accent2),.18),transparent 70%);pointer-events:none;opacity:.7;}
.track-card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 16px 44px rgba(var(--c-shadow),.45),0 0 30px rgba(var(--c-accent),.18);}
.track-card .tc-no{font-size:12px;letter-spacing:3px;color:var(--tx-alt);}
.track-card .tc-title{font-size:20px;color:var(--tx-hi);letter-spacing:2px;margin:7px 0 5px;}
.track-card .tc-tag{font-size:13.5px;color:var(--tx-warn);opacity:.95;}
.track-card .tc-badges{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 4px;}
.track-card .tc-badges span{font-size:12px;color:var(--tx-cyan);border:1px solid rgba(var(--c-accent2),.4);border-radius:4px;padding:2px 9px;letter-spacing:1px;}
.track-card .tc-for{font-size:13.5px;color:var(--tx2);line-height:1.8;margin-top:8px;flex:1;}
.track-card .tc-go{margin-top:14px;font-size:13.5px;color:var(--green);letter-spacing:1px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.track-card .tc-go:hover{text-shadow:0 0 10px var(--green);}
.track-body{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(var(--c-accent),.22);}

.roadmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.rm-card{border:1px solid rgba(var(--c-accent),.25);border-radius:8px;padding:14px 16px;background:rgba(var(--c-accent),.03);}
.rm-card .rm-no{font-size:12px;color:var(--tx-alt);letter-spacing:2px;}
.rm-card .rm-title{font-size:16px;color:var(--tx-hi);letter-spacing:1px;margin:4px 0 6px;}
.rm-card .rm-desc{font-size:13.5px;color:var(--tx2);line-height:1.75;}
.rm-card .rm-n{margin-top:9px;font-size:12.5px;color:var(--tx-cyan);}

.faq-item{border:1px solid rgba(var(--c-accent),.22);border-radius:7px;padding:13px 16px;margin-bottom:9px;background:rgba(var(--c-accent),.03);cursor:pointer;}
.faq-item:hover{border-color:rgba(var(--c-accent),.5);}
.faq-item .q{font-size:14.5px;color:var(--tx-cyan);font-weight:600;}
.faq-item .q::before{content:"Q ";color:var(--green);}
.faq-item .a{display:none;margin-top:9px;padding-top:9px;font-size:14px;color:var(--tx);line-height:1.85;border-top:1px dashed rgba(var(--c-accent),.25);}
.faq-item.open .a{display:block;}
.faq-item .a::before{content:"A ";color:var(--yellow);}

.lesson-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.lesson-head .lh-no{font-size:12px;letter-spacing:2px;color:var(--tx-alt);}
.lesson-head .lh-lv{font-size:11px;letter-spacing:1px;padding:1px 8px;border-radius:4px;background:rgba(var(--c-accent2),.12);color:var(--tx-cyan);border:1px solid rgba(var(--c-accent2),.35);}
.card.quiz-card{border-left-color:var(--cyan);}
.q-item{padding:14px 0;border-bottom:1px dashed rgba(var(--c-accent2),.16);}
.q-item:last-child{border-bottom:none;}
.q-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px;}
.q-no{flex:none;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:rgba(var(--c-accent),.14);color:var(--green);font-size:12.5px;font-weight:700;border:1px solid rgba(var(--c-accent),.4);}
.q-type{flex:none;font-size:11px;letter-spacing:1px;padding:1px 7px;border-radius:3px;background:rgba(var(--c-accent2),.12);color:var(--tx-cyan);border:1px solid rgba(var(--c-accent2),.35);}
.q-text{font-size:14.5px;line-height:1.8;color:var(--tx);flex:1;min-width:180px;}
.q-opts{display:flex;flex-direction:column;gap:7px;margin-left:31px;}
.q-opt{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px 12px;border-radius:6px;border:1px solid rgba(var(--c-accent2),.16);background:rgba(var(--c-accent2),.03);transition:all .16s var(--ease-out);font-size:13.8px;line-height:1.6;color:var(--tx);}
.q-opt:hover{border-color:rgba(var(--c-accent2),.5);background:rgba(var(--c-accent2),.08);transform:translateX(2px);}
.q-opt .q-mark{flex:none;width:22px;height:22px;line-height:22px;text-align:center;border-radius:5px;background:rgba(var(--c-accent2),.1);color:var(--tx-cyan);font-weight:700;font-size:12.5px;border:1px solid rgba(var(--c-accent2),.3);}
.q-opt.picked{border-color:var(--cyan);background:rgba(var(--c-accent2),.14);}
.q-opt.picked .q-mark{background:var(--cyan);color:var(--on-accent2);}
.q-opt.right{border-color:var(--green);background:rgba(var(--c-accent),.13);}
.q-opt.right .q-mark{background:var(--green);color:var(--on-accent);}
.q-opt.right::after{content:"✓";margin-left:auto;color:var(--green);font-weight:700;}
.q-opt.wrong{border-color:var(--red);background:rgba(var(--c-danger2),.12);}
.q-opt.wrong .q-mark{background:var(--red);color:var(--on-danger);}
.q-opt.wrong::after{content:"✗";margin-left:auto;color:var(--red);font-weight:700;}
.quiz-score{margin-top:16px;padding:18px 20px;border-radius:10px;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(var(--c-accent2),.3);background:rgba(var(--c-accent2),.05);animation:pepIn .35s var(--ease-out) both;}
.quiz-score.pass{border-color:rgba(var(--c-accent),.45);background:linear-gradient(120deg,rgba(var(--c-accent),.1),rgba(var(--c-accent2),.05));}
.quiz-score.fail{border-color:rgba(var(--c-danger2),.45);background:linear-gradient(120deg,rgba(var(--c-danger2),.09),rgba(var(--c-accent2),.03));}
.quiz-score .qs-num{font-size:44px;font-weight:800;letter-spacing:2px;color:var(--green);line-height:1.1;animation:scorePop .5s var(--ease-spring) both;}
.quiz-score.fail .qs-num{color:var(--red);}
.quiz-score .qs-num span{font-size:15px;font-weight:500;color:var(--dim);margin-left:4px;}
.quiz-score .qs-detail{margin-top:8px;font-size:13.5px;color:var(--tx);}
@keyframes scorePop{0%{opacity:0;transform:scale(.6);}60%{transform:scale(1.08);}100%{opacity:1;transform:scale(1);}}

.btns{display:flex;gap:10px;margin:12px 0;flex-wrap:wrap;}
button.act{position:relative;overflow:hidden;font-size:14px;letter-spacing:2px;padding:9px 22px;border-radius:7px;background:rgba(var(--c-accent),.12);color:var(--green);border:1px solid var(--green);transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease);}
button.act:hover{background:var(--green);color:var(--on-accent);box-shadow:0 0 22px rgba(var(--c-accent),.55);}
button.act.primary{background:rgba(var(--c-accent2),.12);color:var(--cyan);border-color:var(--cyan);}
button.act.primary:hover{background:var(--cyan);color:var(--on-accent2);box-shadow:0 0 22px rgba(var(--c-accent2),.55);}
button.act.ghost{background:transparent;border-color:rgba(var(--c-accent),.35);color:var(--tx-h3);font-size:13px;padding:7px 15px;}
button.act.ghost:hover{background:rgba(var(--c-accent),.15);color:var(--green);}
button.act:active{transform:scale(.96);}

.gtip{position:fixed;z-index:9999;max-width:300px;pointer-events:none;opacity:0;transition:opacity .12s ease;
  background:rgba(var(--c-solid),.97);border:1px solid var(--green);border-radius:9px;padding:10px 13px;font-size:12.5px;line-height:1.65;color:var(--tx);
  box-shadow:0 8px 26px rgba(var(--c-shadow),.6),0 0 16px rgba(var(--c-accent),.28);font-family:inherit;}
.gtip.show{opacity:1;}
.gtip .gt-title{color:var(--green);font-weight:600;font-size:13px;margin-bottom:5px;padding-bottom:5px;border-bottom:1px dashed rgba(var(--c-accent),.28);}
.gtip .gt-row{display:flex;gap:8px;margin-top:3px;}
.gtip .gt-k{color:var(--cyan);flex:0 0 auto;opacity:.9;}
.gtip .gt-desc{color:var(--tx2);margin-top:4px;}
[data-tip]{cursor:help;}

.modal{position:fixed;inset:0;background:rgba(var(--c-scrim),.8);z-index:200;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{background:rgba(var(--c-solid),.96);border:1px solid var(--green);border-radius:12px;width:100%;max-width:780px;max-height:84vh;overflow-y:auto;box-shadow:0 0 60px rgba(var(--c-accent),.25),0 30px 80px rgba(var(--c-shadow),.7);animation:popIn .3s var(--ease-spring);}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
.modal-head{position:sticky;top:0;background:rgba(var(--c-solid),.98);display:flex;align-items:center;padding:13px 20px;border-bottom:1px solid rgba(var(--c-accent),.3);z-index:2;}
.modal-head h2{font-size:16.5px;color:var(--tx-cyan);letter-spacing:2px;flex:1;font-weight:600;}
.modal-head button{background:transparent;border:1px solid rgba(var(--c-accent),.4);color:var(--green);border-radius:5px;padding:4px 13px;font-size:13px;}
.modal-head button:hover{background:var(--green);color:var(--on-accent);}
.modal-body{padding:16px 20px 24px;}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.swatch{border:1px solid var(--line-soft);border-radius:10px;padding:14px 8px;text-align:center;cursor:pointer;font-size:12.5px;letter-spacing:1px;color:var(--tx2);background:rgba(var(--c-accent),.04);transition:.2s;font-family:inherit;}
.swatch:hover{border-color:var(--line);transform:translateY(-2px);}
.swatch i{display:block;width:22px;height:22px;border-radius:50%;margin:0 auto 8px;box-shadow:0 0 14px currentColor;}
.swatch.on{border-color:var(--edge);background:rgba(var(--c-accent),.08);}
.swatch.on::after{content:" ✓";color:var(--green);}
.kbd-table{width:100%;font-size:14px;border-collapse:collapse;}
.kbd-table td{padding:8px 6px;border-bottom:1px solid rgba(var(--c-accent),.13);}
.kbd-table td:first-child{width:190px;}
kbd{display:inline-block;background:rgba(var(--c-accent),.13);border:1px solid rgba(var(--c-accent),.4);border-bottom-width:2px;border-radius:4px;padding:1px 7px;font-size:12.5px;color:var(--green);font-family:inherit;margin-right:3px;}

.glitch{position:relative;display:inline-block;}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;white-space:nowrap;pointer-events:none;}
.glitch::before{color:var(--cyan);mix-blend-mode:screen;animation:glitch-top 3.2s infinite steps(2);}
.glitch::after{color:var(--red);mix-blend-mode:screen;animation:glitch-bot 2.4s infinite steps(2);}
@keyframes glitch-top{
  0%,86%,100%{opacity:0;clip-path:inset(0 0 100% 0);}
  87%{opacity:.85;clip-path:inset(0 0 62% 0);transform:translate(-4px,-2px);}
  90%{opacity:.85;clip-path:inset(12% 0 48% 0);transform:translate(3px,1px);}
  93%{opacity:.5;clip-path:inset(30% 0 30% 0);transform:translate(-2px,2px);}
}
@keyframes glitch-bot{
  0%,88%,100%{opacity:0;clip-path:inset(100% 0 0 0);}
  89%{opacity:.8;clip-path:inset(58% 0 0 0);transform:translate(4px,2px);}
  92%{opacity:.8;clip-path:inset(42% 0 8% 0);transform:translate(-3px,-1px);}
  95%{opacity:.45;clip-path:inset(70% 0 10% 0);transform:translate(2px,-2px);}
}
.rgb{text-shadow:1.5px 0 rgba(var(--c-accent2),.55),-1.5px 0 rgba(var(--c-danger),.45);}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.view-enter{animation:fadeUp .4s var(--ease-out);}
.view-enter > *{opacity:0;animation:arrive .5s var(--ease-out) forwards;}
@keyframes arrive{from{opacity:0;transform:translateY(16px) scale(.995);}to{opacity:1;transform:none;}}
.view-enter > *:nth-child(1){animation-delay:.02s;}
.view-enter > *:nth-child(2){animation-delay:.07s;}
.view-enter > *:nth-child(3){animation-delay:.12s;}
.view-enter > *:nth-child(4){animation-delay:.17s;}
.view-enter > *:nth-child(5){animation-delay:.22s;}
.view-enter > *:nth-child(n+6){animation-delay:.27s;}
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;background:radial-gradient(circle,rgba(var(--c-hi),.5),rgba(var(--c-hi),0) 70%);animation:rippleGo .55s var(--ease-out) forwards;z-index:1;}
@keyframes rippleGo{to{transform:scale(2.6);opacity:0;}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}.view-enter > *{opacity:1 !important;}}
@media (max-width:1320px){header{gap:10px;padding:10px 14px;}.hud{gap:5px;}.hud button{padding:4px 8px;letter-spacing:0;}.hud .stat{padding:3px 10px;}.hud .hud-sep{display:none;}.search-wrap{min-width:120px;}}
@media (max-width:1100px){header{flex-wrap:wrap;gap:8px;}.search-wrap{order:3;flex-basis:100%;width:100%;max-width:none;}.hud{flex-wrap:wrap;width:100%;margin-left:0;justify-content:flex-start;}}
@media (max-width:820px){
  header{gap:8px;padding:8px 12px;}header h1{font-size:16px;letter-spacing:2px;}
  .hud{flex-wrap:wrap;width:100%;margin-left:0;justify-content:flex-start;font-size:12.5px;gap:5px;}
  .hud button{padding:4px 8px;font-size:12.5px;}
  .layout{position:relative;}
  aside{position:absolute;left:0;top:0;bottom:0;z-index:50;background:var(--term);box-shadow:6px 0 24px rgba(var(--c-shadow),.7);transform:translateX(-100%);transition:transform var(--t) var(--ease);}
  body.show-sidebar aside{transform:translateX(0);}
  main{padding:16px 14px 76px;}
  .card{padding:15px;}
  .hero{padding:22px 20px 20px;}.hero h2{font-size:24px;}
  .resume{gap:12px;padding:14px 16px;}.rs-title{white-space:normal;}
  .rs-side{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:10px;}
}


.hidden { display: none !important; }

input, textarea, select {
    width: 100%; font-family: inherit; font-size: 14px; padding: 9px 12px;
    border-radius: 8px; background: rgba(var(--c-accent), .05); color: var(--tx);
    border: 1px solid var(--line-soft); outline: none; transition: .2s;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(var(--c-accent), .15), 0 0 14px rgba(var(--c-accent), .25);
}
input::placeholder, textarea::placeholder { color: var(--tx4); }
select option { background: var(--panel); color: var(--tx-hi); }

.navlink {
    display: block; padding: 9px 14px; margin: 3px 8px; border-radius: 8px;
    color: var(--tx2); font-size: 13.5px; letter-spacing: 1px; cursor: pointer;
    border: 1px solid transparent; transition: .18s;
}
.navlink:hover { color: var(--green); background: rgba(var(--c-accent), .08); border-color: var(--line-soft); }
.navlink.on {
    color: var(--green); background: rgba(var(--c-accent), .12); border-color: var(--line);
    box-shadow: inset 0 0 16px rgba(var(--c-accent), .12);
}

main.full { padding: 0 !important; align-items: stretch !important; overflow: hidden !important; }
main.full > * { max-width: none !important; }
.ifr { flex: 1; width: 100%; height: 100%; border: 0; background: transparent; display: block; }

.field { margin-bottom: 14px; }
.field label { display: block; color: var(--tx3); font-size: 12.5px; letter-spacing: 1px; margin-bottom: 7px; }
.row2 { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row2 > .field { margin-bottom: 0; flex: 1; min-width: 160px; }

.toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.toast {
    background: rgba(var(--c-solid), .97); border: 1px solid var(--green); color: var(--tx);
    padding: 9px 18px; border-radius: 9px; font-size: 13px; letter-spacing: 1px;
    box-shadow: 0 0 22px rgba(var(--c-accent), .25); animation: popIn .22s var(--ease-spring);
}
.toast.err { border-color: var(--red); box-shadow: 0 0 22px rgba(var(--c-danger), .28); }

.empty2 { color: var(--tx3); text-align: center; padding: 36px 0; letter-spacing: 2px; }
.pager { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 0; color: var(--tx3); font-size: 12px; }
.pager .pg {
    min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-soft); border-radius: 7px; cursor: pointer; color: var(--tx2); transition: .18s;
}
.pager .pg:hover { border-color: var(--line); color: var(--green); }
.pager .pg.on { background: var(--green); color: var(--on-accent); border-color: var(--green); }
.pager .pg.disabled { opacity: .4; cursor: not-allowed; }
.pager .pg-sel { width: auto; min-width: 132px; height: 30px; padding: 0 8px; border: 1px solid var(--line-soft);
    border-radius: 7px; background: rgba(var(--c-solid), .6); color: var(--tx2); font-family: inherit;
    font-size: 12.5px; cursor: pointer; outline: none; }
.pager .pg-sel:hover { border-color: var(--line); color: var(--green); }
.pager .pg-sel:focus { border-color: var(--edge); box-shadow: 0 0 0 3px rgba(var(--c-accent), .12); }
.load-more { text-align: center; color: var(--tx4); font-size: 12.5px; letter-spacing: 1px; padding: 14px 0 6px; }
.load-more[data-more] { cursor: pointer; }
.load-more[data-more]:hover { color: var(--green); }

.lg-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.lg-box { width: 100%; max-width: 400px; }



.badge{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;letter-spacing:1px;
  color:var(--green);border:1px solid rgba(var(--c-accent),.45);background:rgba(var(--c-accent),.08);white-space:nowrap;}
.badge.ok{color:var(--green);border-color:rgba(var(--c-accent),.5);background:rgba(var(--c-accent),.1);}
.badge.warn{color:var(--yellow);border-color:rgba(var(--c-warn),.5);background:rgba(var(--c-warn),.08);}
.badge.err{color:var(--red);border-color:rgba(var(--c-danger),.5);background:rgba(var(--c-danger),.08);}
.badge.muted{color:var(--tx3);border-color:var(--line-soft);background:transparent;}

.mono{font-variant-numeric:tabular-nums;letter-spacing:.2px;}
.blk-table td input[type=checkbox]{width:15px;height:15px;accent-color:var(--green);cursor:pointer;vertical-align:middle;}

.card-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid rgba(var(--c-accent2),.18);}
.card-h h2{margin:0;padding:0;border:0;}
.card-h .tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.card-h .tools input,.card-h .tools select{width:auto;padding:6px 11px;font-size:13px;}

.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;}
.kv .k{color:var(--tx3);letter-spacing:1px;white-space:nowrap;}
.kv .k::after{content:"";}
.kv .v{color:var(--tx);word-break:break-all;}

.grid{display:grid;gap:18px;align-items:stretch;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:820px){.grid-2{grid-template-columns:1fr;}}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:820px){.grid-3{grid-template-columns:1fr;}}
.grid > .span-all{grid-column:1/-1;}
.grid > .card{margin-bottom:0;}
.card.tall{min-height:270px;display:flex;flex-direction:column;}

.tip{color:var(--tx3);font-size:12.5px;line-height:1.8;margin-top:10px;letter-spacing:.5px;}
.tip.req-hint{color:var(--yellow);}
.req{color:var(--red);margin-left:3px;}

.quick{display:grid;gap:10px;}
.quick a{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line-soft);
  border-radius:8px;color:var(--tx2);font-size:14px;transition:var(--t) var(--ease);}
.quick a i{font-style:normal;color:var(--cyan);}
.quick a:hover{color:var(--green);border-color:var(--line);background:rgba(var(--c-accent),.07);
  box-shadow:0 0 16px rgba(var(--c-accent),.14);transform:translateX(3px);}
.quick a b{margin-left:auto;color:var(--tx4);font-weight:400;font-size:12px;}

.notice-item{padding:11px 0;border-bottom:1px dashed rgba(var(--c-accent),.16);cursor:pointer;}
.notice-item:last-child{border-bottom:0;}
.notice-item .t{color:var(--tx);font-size:14.5px;transition:var(--t) var(--ease);}
.notice-item .d{color:var(--tx4);font-size:12px;margin-top:3px;}
.notice-item:hover .t{color:var(--green);text-shadow:0 0 10px rgba(var(--c-accent),.3);}

.note-text{white-space:pre-wrap;line-height:1.95;color:var(--tx2);font-size:14px;}

.auth{flex:1;display:flex;overflow:hidden;position:relative;}
.auth-hero{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:52px 60px;position:relative;overflow:hidden;}
.auth-hero .tag{color:var(--tx-cyan);font-size:12px;letter-spacing:3px;opacity:.9;}
.auth-hero h1{margin:0;font-size:clamp(24px,3.4vw,44px);line-height:1.45;font-weight:700;letter-spacing:2px;color:var(--tx-hi);}
.auth-hero .sub{color:var(--tx2);font-size:14px;line-height:1.9;max-width:52ch;margin:0;}
.auth-hero .kv{max-width:420px;}
.auth-hero .stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px;}
.auth-hero .stats span{border:1px solid rgba(var(--c-accent),.4);border-radius:999px;padding:5px 14px;
  font-size:13px;color:var(--tx-cyan);letter-spacing:1px;background:rgba(var(--c-accent),.05);}
.auth-panel{width:460px;flex:0 0 460px;display:flex;align-items:center;justify-content:center;padding:36px;
  background:linear-gradient(180deg,rgba(var(--c-accent),.05),transparent);border-left:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.auth-box{width:100%;max-width:360px;}
.auth-box h2{margin:0 0 6px;font-size:22px;color:var(--tx-hi);letter-spacing:2px;}
.auth-box .lead{margin:0 0 22px;color:var(--tx3);font-size:13px;}
.auth-field{margin-bottom:15px;}
.auth-field label{display:block;color:var(--tx3);font-size:12.5px;letter-spacing:1px;margin-bottom:7px;}
.auth-field label .req{color:var(--red);}
button.act.block{display:block;width:100%;text-align:center;padding:11px;font-size:15px;}
.auth-links{margin-top:16px;display:flex;justify-content:space-between;font-size:13px;}
.auth-foot{margin-top:20px;text-align:center;color:var(--tx4);font-size:12px;}
.auth-foot a{color:var(--tx3);}
.auth-foot a:hover{color:var(--green);}
@media (max-width:880px){
  .auth-hero{display:none;}
  .auth-panel{width:100%;flex:1;border-left:0;}
}

.page{padding:22px 24px 80px;flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.page > *{width:100%;max-width:1000px;margin-left:auto;margin-right:auto;flex:0 0 auto;}

.hud-info{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-left:0;}
@media (max-width:1180px){
  .hud-info{position:static;transform:none;margin-left:auto;}
}

.hero .stats{justify-content:center;}

header h1 .brand-grad,.brand-grad{
  background-image:linear-gradient(100deg,var(--cyan),var(--purple) 52%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none !important;
}
.brand-grad::before,.brand-grad::after{-webkit-text-fill-color:currentColor;}

@supports (height:100dvh){body{height:100dvh;}}

@media (max-width:880px){
  .auth{flex-direction:column;overflow-y:auto;}
  .auth-hero{display:flex;flex:none;order:1;padding:26px 22px 4px;gap:8px;justify-content:flex-start;}
  .auth-hero h1{font-size:clamp(20px,6vw,30px);}
  .auth-panel{order:2;width:100%;flex:none;border-left:0;padding:16px 22px 34px;align-items:flex-start;}
  .auth-box{max-width:420px;margin:0 auto;}
}

.tbl-scroll{overflow:auto;max-height:440px;-webkit-overflow-scrolling:touch;margin:13px 0;border-radius:6px;}
.tbl-scroll .blk-table thead th{position:sticky;top:0;z-index:2;background:var(--panel);}
.tbl-scroll > .blk-table{margin:0;}
.tbl-scroll .blk-table td{height:40px;vertical-align:middle;}
.tbl-scroll .blk-table thead th:first-child,.tbl-scroll .blk-table tbody td:first-child{width:38px;text-align:center;}

@media (max-width:820px){
  header{padding:8px 12px;gap:8px;}
  header h1{font-size:15px;letter-spacing:1.5px;}
  .crumb{display:none;}
  #btnMenu{display:block;padding:0 6px;font-size:22px;}
  .hud{order:2;margin-left:auto;flex-wrap:nowrap;gap:5px;}
  .hud button{padding:4px 8px;font-size:12.5px;letter-spacing:0;}
  .hud-info{order:3;position:static;left:auto;top:auto;transform:none;
    flex-basis:100%;width:100%;margin:0;flex-wrap:wrap;justify-content:flex-start;
    gap:6px;font-size:12.5px;}
  .hud-info .stat{padding:3px 10px;}

  aside{width:min(78vw,300px);}

  .page{padding:14px 12px 64px;}
  .hero{padding:18px 16px 16px;margin-bottom:16px;}
  .hero h2{font-size:22px;}
  .hero .tl{font-size:13.5px;}
  .hero .stats{gap:8px;margin-top:14px;}
  .hero .stats span{padding:4px 12px;font-size:12px;}

  .card{padding:14px 15px;}
  .card h2{font-size:17px;letter-spacing:1px;}
  .card-h{flex-wrap:wrap;gap:8px;}
  .card-h .tools{width:100%;margin-left:0;}
  .card-h .tools button{flex:1;}

  .row2{flex-direction:column;align-items:stretch;gap:10px;}
  .row2 > .field,.row2 > .field[style]{flex:1 1 auto !important;width:100%;min-width:0;}
  .row2 > button.act{width:100%;}
  .field input,.field select{width:100%;}
  #kw{width:100% !important;}

  .blk-table{font-size:13px;}
  .tbl-scroll .blk-table th,.tbl-scroll .blk-table td{white-space:nowrap;padding:7px 9px;}

  .modal{padding:14px;}
  .modal-box{max-width:100% !important;}
  .gtip{display:none !important;}
}

@media (max-width:560px){
  .kv{grid-template-columns:1fr;gap:0;}
  .kv .k{padding-top:8px;font-size:12px;}
  .kv .v{padding-bottom:8px;border-bottom:1px dashed rgba(var(--c-accent2),.14);}
  .kv .k:first-child{padding-top:0;}
  header h1{font-size:14px;letter-spacing:1px;}
  .hero h2{font-size:20px;}
  .auth-panel{padding:24px 18px;}
  .card-h .tools button{font-size:12px;padding:6px 8px;}
}