.topnav{display:flex;gap:2px;margin-left:10px}
.topnav a{color:#c9d6e6;text-decoration:none;font-size:14px;font-weight:500;padding:7px 11px;border-radius:7px}
.topnav a:hover{background:#1f3657;color:#fff}
.topnav a.on{background:#24406a;color:#fff}
.me-btn{color:#c9d6e6;text-decoration:none;font-size:12.5px;border:1px solid #2e4a70;border-radius:99px;padding:5px 11px;white-space:nowrap}
.me-btn:hover{border-color:var(--ice);color:#fff}
.me-btn span{font:600 13px var(--mono);color:#fff}
.search{max-width:360px}
@media (max-width:1100px){.topnav a{padding:7px 7px;font-size:13.5px}.me-btn{display:none}}
@media (max-width:860px){.topnav{display:none}}

/* mobile tab bar */
.tabbar{display:none}
@media (max-width:860px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a{flex:1;text-align:center;padding:9px 0 8px;font-size:12px;color:var(--ink2);text-decoration:none;font-weight:500}
  .tabbar a.on{color:var(--accent-2)}
  main{padding-bottom:90px}
}

/* hub */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
@media (max-width:900px){.hub-grid{grid-template-columns:1fr}}
.hub-col{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.hub-col h3{margin:0;padding:11px 14px;font-size:14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.hub-col ul{list-style:none;margin:0;padding:6px}
.hub-col li a{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:7px;text-decoration:none;color:var(--ink);font-size:14px}
.hub-col li a:hover{background:var(--line2)}
.hub-col .ok{color:var(--easy);font-weight:700}
.lesson-list{list-style:none;padding:0;margin:0 0 8px;counter-reset:l}
.lesson-list li{border:1px solid var(--line);background:var(--panel);border-radius:10px;margin:8px 0}
.lesson-list a{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:12px 14px;text-decoration:none;color:var(--ink)}
.lesson-list a:hover{border-color:var(--accent)}
.lesson-list .ln{font:600 13px var(--mono);color:var(--ink3)}
.lesson-list .lt{font-weight:600}
.lesson-list .lm{font-size:12.5px;color:var(--ink3);white-space:nowrap}
.beginner{font-size:14px;color:var(--ink2)}

/* question list inside lesson */
.qlist{width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0 10px}
.qlist td{padding:9px 8px;border-bottom:1px solid var(--line2)}
.qlist a{color:var(--ink);text-decoration:none;font-weight:500}
.qlist a:hover{color:var(--accent-2)}

/* quiz */
.quiz{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px 18px;margin:18px 0}
.quiz .qh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--ink3)}
.quiz .qq{font-weight:600;margin:0 0 10px}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:9px 12px;margin:6px 0;cursor:pointer;font-size:14.5px}
.opt:hover{border-color:var(--accent)}
.opt b{font-family:var(--mono);color:var(--ink3)}
.opt.right{border-color:var(--easy);background:var(--easy-bg)}
.opt.wrong{border-color:var(--hard);background:var(--hard-bg)}
.quiz .qx{font-size:14px;color:var(--ink2);margin:8px 0 0}
.quiz .qnav{display:flex;justify-content:space-between;margin-top:12px}

/* question page */
.qpage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px;align-items:start}
@media (max-width:1000px){.qpage{grid-template-columns:1fr}}
.pane{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 8px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:11px 12px;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.pane-b{padding:16px 18px}
.qmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px}
.qmeta .pts{font:500 12px var(--mono);color:var(--ink3)}
.side-pane{display:flex;flex-direction:column;gap:14px;position:sticky;top:80px}
.side-pane .pane-b h4{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.timer{display:flex;align-items:center;gap:10px}
.timer .tv{font:600 22px var(--mono);min-width:84px}
textarea.notes{width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:14px/1.5 var(--mono);padding:10px}
.warn{border:1px solid var(--tip-line);background:var(--tip-bg);border-radius:9px;padding:12px 14px;font-size:14px}
.qfoot{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.status-pill{font:600 11.5px var(--sans);padding:4px 8px;border-radius:99px}
.st-solved{background:var(--easy-bg);color:var(--easy)} .st-help{background:var(--med-bg);color:var(--med)}

/* qotd + progress */
.qotd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px 18px;margin:0 0 22px}
.qotd .k{font:600 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.qotd h3{margin:4px 0 6px;font-size:19px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:340px}
.cal .dw{font-size:11px;color:var(--ink3);text-align:center}
.cal .d{aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;font:12px var(--mono);background:var(--line2);color:var(--ink2)}
.cal .d.done{background:var(--accent);color:var(--accent-ink)}
.cal .d.today{outline:2px solid var(--accent);outline-offset:1px}
.cal .d.blank{background:none}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:10px 0 22px}
.kpi{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px}
.kpi b{display:block;font:600 26px var(--serif)}
.kpi span{font-size:13px;color:var(--ink3)}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);gap:3px;overflow-x:auto;padding-bottom:4px}
.heat i{width:12px;height:12px;border-radius:3px;background:var(--line2)}
.heat i.l1{background:color-mix(in srgb,var(--accent) 35%,var(--line2))}
.heat i.l2{background:color-mix(in srgb,var(--accent) 65%,var(--line2))}
.heat i.l3{background:var(--accent)}
.bars .br{display:grid;grid-template-columns:140px 1fr 60px;gap:10px;align-items:center;font-size:14px;margin:7px 0}
.bars .track{height:9px;border-radius:9px;background:var(--line2);overflow:hidden}
.bars .track i{display:block;height:100%;background:var(--accent)}
.plan-day{display:grid;grid-template-columns:70px 1fr;gap:14px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:12px 14px;margin:8px 0}
.plan-day .dn{font:600 13px var(--mono);color:var(--ink3)}
.plan-day ul{margin:0;padding-left:18px}
.res-cat{margin:22px 0 8px;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:6px 12px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip .n{font:12px var(--mono);opacity:.75;margin-left:4px}

.h2s{font-family:var(--serif);font-weight:650;font-size:22px;margin:24px 0 12px}

/* ---- premium UI layer ---- */
body{font-size:15.5px}
h1,.h2s,article h2{font-weight:600;letter-spacing:-.015em}
h1{font-weight:700}
.btn{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;border-radius:10px;font-weight:600;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .2s ease,background-position .4s ease,border-color .15s,color .15s,background-color .15s}
.btn:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.pri{background-image:var(--grad);background-size:180% 100%;background-position:0% 50%;border:0;color:#fff}
.btn.pri:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(41,100,253,.7);color:#fff;filter:none}
.btn.pri:active{transform:translateY(0);filter:brightness(.93)}
.card{border-radius:16px}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(20,40,67,.35);border-color:#afc3e6}
.bar i,.bars .track i{background-image:var(--grad)}
.tag{font-weight:600}
.pill.live{background:var(--accent)}
.hero{background:var(--navy);color:#fff;margin:-26px calc(-1*clamp(16px,4vw,48px)) 28px;padding:48px clamp(16px,4vw,48px) 44px;border-bottom:0;border-radius:0 0 22px 22px;position:relative;overflow:hidden}
.hero h1{color:#fff;font-size:clamp(34px,4.6vw,54px);max-width:18ch;line-height:1.06}
.hero p{color:#c8d8e8}
.hero .crumbs{color:#9fb3cc}
.hero .stats{color:#9fb3cc}.hero .stats b{color:#fff;font-family:var(--mono)}
.hero .btn:not(.pri){background:transparent;color:#e6eef7;border-color:#3a5579}
.hero .btn:not(.pri):hover{background:#1b3355;color:#fff;border-color:#c8d8e8}
.rot{display:inline-block;height:1.08em;overflow:hidden;vertical-align:bottom}
.rot-in{display:flex;flex-direction:column;animation:rot 10s cubic-bezier(.7,0,.3,1) infinite;background-image:linear-gradient(90deg,#7fa6ff,#ee7878);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes rot{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-1.08em)}40%,56%{transform:translateY(-2.16em)}60%,76%{transform:translateY(-3.24em)}80%,96%{transform:translateY(-4.32em)}100%{transform:translateY(0)}}
.ticker{overflow:hidden;background:#0e1e36;margin:0 calc(-1*clamp(16px,4vw,48px)) 26px;padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-in{display:flex;gap:56px;width:max-content;animation:tick 30s linear infinite;font:600 17px var(--serif);color:#7f93ae}
.ticker:hover .ticker-in{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.fadeup{animation:fadeup .6s ease both}
@keyframes fadeup{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}
.check input.ok-in{border-color:var(--easy);box-shadow:0 0 0 4px rgba(22,163,74,.14)}
.check input.no-in{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.check input:focus,.notes:focus,.dr-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(41,100,253,.15)}
.top .me-btn{background:#2a2240;border-color:#3a2f55;color:#ffb4b4}
@media (prefers-reduced-motion:reduce){.rot-in,.ticker-in,.fadeup{animation:none}.btn,.card{transition:none}}
/* drills */
.dr-wrap{max-width:760px}
.dr-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:28px}
.dr-top{display:flex;justify-content:space-between;align-items:center;font:600 14px var(--mono);color:var(--ink2);margin-bottom:18px}
.dr-top .tl{font-size:22px;color:var(--ink)}
.dr-top .tl.low{color:#dc2626}
.dr-q{font:600 44px var(--mono);text-align:center;margin:18px 0 22px;color:var(--ink)}
.dr-q .fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-size:.62em;line-height:1.1;margin:0 4px}
.dr-q .fr span:first-child{border-bottom:2px solid currentColor;padding:0 4px}
.dr-in{width:100%;height:56px;font:600 24px var(--mono);text-align:center;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);box-sizing:border-box}
.dr-seq{font:600 26px var(--mono);text-align:center;margin:10px 0 22px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.dr-opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:640px){.dr-opts{grid-template-columns:repeat(2,minmax(0,1fr))}.dr-q{font-size:34px}}
.dr-opt{height:56px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);font:600 18px var(--mono);color:var(--ink);cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.dr-opt:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.dr-prog{height:6px;border-radius:9px;background:var(--line2);overflow:hidden;margin-bottom:18px}
.dr-prog i{display:block;height:100%;background-image:var(--grad);transition:width .2s}
.dr-set{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.dr-set label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:7px 12px;font-size:14px;cursor:pointer;background:var(--panel)}
.dr-set input{accent-color:var(--accent)}
.dr-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:14px 0 20px}
.rv{width:100%;border-collapse:collapse;font-size:14.5px}
.rv td{padding:8px 10px;border-bottom:1px solid var(--line2);font-family:var(--mono)}
.rv .w{color:#dc2626}.rv .r{color:var(--easy)}
.spark{display:block;width:100%;height:60px}