:root{
  --bg:#07111f;
  --panel:#0f1b2f;
  --panel-2:#12213a;
  --text:#eaf2ff;
  --muted:#a6b7d4;
  --line:rgba(255,255,255,.08);
  --accent:#7dd3fc;
  --accent-2:#a78bfa;
  --good:#4ade80;
  --warn:#fbbf24;
  --bad:#fb7185;
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --radius:24px;
  font-synthesis-weight:none;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at top left, rgba(125,211,252,.16), transparent 22%),
  radial-gradient(circle at top right, rgba(167,139,250,.14), transparent 20%),
  linear-gradient(180deg,#06111e 0%, #081426 50%, #07111f 100%);
  color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
.bg-orb{position:fixed;filter:blur(36px);opacity:.45;pointer-events:none;z-index:0;border-radius:50%}
.orb-1{width:18rem;height:18rem;background:rgba(125,211,252,.15);top:-4rem;left:-3rem}
.orb-2{width:22rem;height:22rem;background:rgba(167,139,250,.14);right:-6rem;top:12rem}
.orb-3{width:16rem;height:16rem;background:rgba(74,222,128,.12);left:30%;bottom:-5rem}

.hero,.shell{position:relative;z-index:1;width:min(1180px,calc(100% - 2rem));margin:0 auto}
.hero{padding:28px 0 16px}
.brand{display:flex;gap:16px;align-items:center}
.logo{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(125,211,252,.22),rgba(167,139,250,.22));box-shadow:var(--shadow);font-size:2rem}
.eyebrow{color:var(--accent);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;margin-bottom:4px}
.hero h1{margin:0;font-size:clamp(2rem,5vw,4.2rem);line-height:1.05}
.hero-text{max-width:68ch;color:var(--muted);font-size:1.05rem;margin:14px 0 18px}
.hero-bottom{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero-subtitle{color:#d7e5ff;font-weight:600}
.hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{min-width:min(420px,100%);padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(6,12,23,.65);color:var(--text);outline:none}
.search::placeholder{color:#7f90ab}

.shell{display:grid;gap:18px;padding-bottom:40px}
.panel{background:linear-gradient(180deg,rgba(16,28,48,.88),rgba(12,21,38,.88));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.grade-tabs{display:flex;gap:10px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);padding:12px 14px;border-radius:999px;display:inline-flex;gap:8px;align-items:center}
.tab span{opacity:.75}
.tab.active{background:linear-gradient(135deg,rgba(125,211,252,.18),rgba(167,139,250,.18));border-color:rgba(125,211,252,.35)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.stat-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:20px;padding:14px;display:grid;gap:6px}
.stat-card span{color:var(--muted);font-size:.9rem}
.stat-card strong{font-size:1.7rem}
.stat-card small{color:var(--muted)}

.lesson-list{display:grid;gap:18px}
.grade-section{background:linear-gradient(180deg,rgba(16,28,48,.72),rgba(12,21,38,.72));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.grade-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.grade-name{font-weight:800;font-size:1.25rem}
.grade-desc{color:var(--muted);margin-top:4px}
.grade-chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#d7e5ff}
.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lesson-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:22px;padding:16px;transition:transform .18s ease,border-color .18s ease;cursor:pointer;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.lesson-card:hover{transform:translateY(-2px);border-color:rgba(125,211,252,.34)}
.lesson-card.locked{opacity:.58;filter:saturate(.75)}
.lesson-card.passed{border-color:rgba(74,222,128,.34)}
.lesson-top,.lesson-footer{display:flex;justify-content:space-between;gap:10px;align-items:center}
.lesson-badge,.lesson-tag,.lesson-status,.lesson-stars{font-size:.85rem}
.lesson-badge{padding:6px 10px;border-radius:999px;background:rgba(125,211,252,.12);color:#dff6ff}
.lesson-stars{color:#ffd76e;letter-spacing:1px}
.lesson-card h3{margin:12px 0 8px;font-size:1.2rem}
.lesson-card p{margin:0;color:var(--muted);line-height:1.5}
.lesson-footer{margin-top:12px;color:var(--muted)}
.lesson-tag{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.05)}
.lesson-status{color:#d7e5ff}
.empty-state{padding:32px;text-align:center;color:var(--muted)}

.modal{position:fixed;inset:0;background:rgba(1,6,16,.72);display:none;place-items:center;padding:16px;z-index:20}
.modal.show{display:grid}
.modal-panel{position:relative;width:min(960px,100%);max-height:90vh;overflow:auto;background:linear-gradient(180deg,#0f1b2f,#0b1424);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:22px}
.modal-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font-size:1.4rem}
.modal-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.modal-kicker{color:var(--accent);font-size:.88rem;letter-spacing:.08em}
.modal-head h2{margin:.15rem 0 .35rem;font-size:clamp(1.5rem,4vw,2.2rem)}
.modal-head p{margin:0;color:var(--muted)}
.modal-badge,.progress-pill{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);white-space:nowrap;color:#ffd76e}
.lesson-visual-wrap,.quiz-visual{margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03)}
.lesson-copy{display:grid;gap:8px;margin-bottom:12px}
.lesson-story{font-size:1.03rem;line-height:1.6}
.lesson-meta{color:var(--muted)}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.primary-btn,.secondary-btn,.ghost-btn{border-radius:16px;padding:12px 16px;border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.05)}
.primary-btn{background:linear-gradient(135deg,rgba(125,211,252,.2),rgba(167,139,250,.2));border-color:rgba(125,211,252,.35)}
.secondary-btn{background:rgba(255,255,255,.05)}
.ghost-btn{background:transparent}
.primary-btn:disabled,.secondary-btn:disabled{opacity:.45;cursor:not-allowed}
.progress-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden;border:1px solid var(--line);margin:12px 0 16px}
.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.quiz-card,.result-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:24px;padding:18px}
.quiz-prompt{font-size:1.2rem;font-weight:700;line-height:1.5}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.option{padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);min-height:56px}
.option.selected{border-color:rgba(125,211,252,.6);background:rgba(125,211,252,.13)}
.quiz-note{margin-top:14px;color:#cfe0ff;line-height:1.5;min-height:28px}
.result-card{text-align:center}
.result-stars{font-size:2rem;color:#ffd76e;letter-spacing:2px;margin-bottom:8px}
.result-detail{margin-top:12px;color:var(--muted)}
.small-note{color:var(--muted)}
.visual-grid,.array-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.dot{display:grid;place-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.tenframe{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:420px;margin:0 auto}
.tenframe .cell{aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.tenframe .cell.filled{background:rgba(125,211,252,.26);border-color:rgba(125,211,252,.35)}
.blocks{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.block-set{display:grid;grid-template-columns:repeat(4,18px);gap:8px}
.block{width:18px;height:18px;border-radius:6px;background:rgba(125,211,252,.36);border:1px solid rgba(125,211,252,.55)}
.block.alt{background:rgba(167,139,250,.36);border-color:rgba(167,139,250,.55)}
.plus{font-size:2rem;font-weight:700}
.numberline{position:relative;height:84px;margin:10px auto 0;max-width:520px}
.numberline .line{position:absolute;left:5%;right:5%;top:50%;height:4px;background:rgba(255,255,255,.18);transform:translateY(-50%);border-radius:999px}
.numberline .marker{position:absolute;top:18px;width:18px;height:18px;background:var(--accent);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 8px rgba(125,211,252,.12)}
.clock{position:relative;width:180px;height:180px;border-radius:50%;margin:0 auto;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.1), rgba(255,255,255,.04));border:4px solid rgba(255,255,255,.18)}
.clock .hand{position:absolute;left:50%;top:50%;transform-origin:bottom center;background:var(--text);border-radius:999px}
.clock .hand.hour{width:6px;height:46px;transform:translate(-50%,-100%) rotate(calc(var(--hour) * 30deg))}
.clock .hand.minute{width:4px;height:68px;transform:translate(-50%,-100%) rotate(calc(var(--minute) * 6deg))}
.clock .center{position:absolute;left:50%;top:50%;width:12px;height:12px;background:var(--text);border-radius:50%;transform:translate(-50%,-50%)}
.clock-label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-weight:700}
.coins{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.coin{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.26), rgba(255,215,110,.16));border:1px solid rgba(255,215,110,.45);font-weight:800}
.coin.small{width:54px;height:54px}
.base10{display:flex;justify-content:center;gap:18px;align-items:flex-end;min-height:120px}
.tower,.rod,.cube{display:block;border:1px solid rgba(255,255,255,.18);background:rgba(125,211,252,.18);border-radius:14px}
.tower{width:44px;height:96px}
.rod{width:24px;height:72px;background:rgba(167,139,250,.18)}
.cube{width:24px;height:24px}
.group-board{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.group{display:grid;grid-template-columns:repeat(3,14px);gap:4px;padding:10px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.group i{display:block;width:14px;height:14px;border-radius:50%;background:rgba(125,211,252,.36)}
.ruler{display:flex;justify-content:space-between;gap:8px;padding:14px 10px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line);max-width:520px;margin:0 auto}
.ruler span{position:relative;flex:1;text-align:center;color:#d8e6ff}
.ruler span::before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:12px;background:rgba(255,255,255,.2);transform:translateX(-50%)}
.bar-chart{display:flex;align-items:flex-end;justify-content:center;gap:14px;min-height:180px;padding-top:10px}
.bar-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;width:56px;min-height:180px}
.bar-fill{display:block;width:100%;border-radius:16px 16px 8px 8px;background:linear-gradient(180deg,rgba(125,211,252,.76),rgba(167,139,250,.66));border:1px solid rgba(255,255,255,.12)}
.bar-item small{text-align:center;color:var(--muted)}
.fraction-bar{display:grid;grid-template-columns:repeat(var(--count,6),1fr);gap:6px;max-width:520px;margin:0 auto}
.fraction-bar span{height:38px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.fraction-bar span.filled{background:rgba(74,222,128,.25);border-color:rgba(74,222,128,.4)}
.decimal-strip{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.decimal-box{padding:12px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.decimal-box.alt{background:rgba(167,139,250,.12)}
.calendar-card{display:grid;gap:6px;justify-items:center;padding:18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line);max-width:250px;margin:0 auto}
.angle-visual{position:relative;height:180px;max-width:300px;margin:0 auto}
.angle-visual .ray{position:absolute;bottom:38px;left:50%;width:110px;height:4px;background:rgba(255,255,255,.22);transform-origin:left center}
.angle-visual .ray.left{transform:translateX(-50%) rotate(35deg)}
.angle-visual .ray.right{transform:translateX(-50%) rotate(-35deg)}
.angle-visual .arc{position:absolute;bottom:20px;left:50%;width:76px;height:76px;border:3px solid rgba(125,211,252,.45);border-top-color:transparent;border-right-color:transparent;border-radius:50%;transform:translateX(-50%)}
.mirror-card{display:flex;align-items:center;justify-content:center;gap:10px}
.mirror-card .shape{width:70px;height:70px;border-radius:20px;background:rgba(125,211,252,.2);border:1px solid rgba(125,211,252,.35)}
.mirror-card .split{width:2px;height:88px;background:rgba(255,255,255,.2)}
.grid-visual{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:360px;margin:0 auto}
.grid-visual span{display:block;padding-top:100%;background:rgba(125,211,252,.12);border:1px solid var(--line);border-radius:10px}
.coordinate{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:320px;margin:0 auto}
.coordinate .point{display:block;padding-top:100%;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.coordinate .point.active{background:rgba(74,222,128,.3);border-color:rgba(74,222,128,.45)}
.cube-stack{display:grid;justify-items:center;gap:10px}
.cube-line{display:block;width:180px;height:48px;border:1px solid var(--line);border-radius:16px;background:rgba(125,211,252,.12)}
.cube-line.small{width:140px}
.cube-line.tiny{width:100px}
.pie-chart{position:relative;width:180px;height:180px;border-radius:50%;margin:0 auto;background:conic-gradient(rgba(125,211,252,.42) 0 calc(var(--pct,25) * 1%), rgba(255,255,255,.07) 0 100%);border:1px solid var(--line);display:grid;place-items:center}
.pie-chart span{font-weight:800}
.dice-set{display:flex;justify-content:center;gap:12px}
.die{width:74px;height:74px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--line);display:grid;place-items:center;font-size:1.35rem}
.ratio-strip{display:flex;max-width:420px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.ratio-strip span{height:46px;background:rgba(125,211,252,.22);border-right:1px solid rgba(255,255,255,.08)}
.ratio-strip span:last-child{border-right:none;background:rgba(167,139,250,.22)}
.pattern-row{display:flex;justify-content:center;gap:12px;font-size:1.4rem;font-weight:700}
.track{position:relative;max-width:520px;height:70px;margin:0 auto;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);overflow:hidden}
.runner{position:absolute;left:10%;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,rgba(125,211,252,.42),rgba(167,139,250,.42));box-shadow:0 0 0 12px rgba(125,211,252,.12)}
.mixed-card{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.mixed-card span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}

@media (max-width: 860px){
  .stats-grid,.lesson-grid,.option-grid{grid-template-columns:1fr 1fr}
  .modal-head{flex-direction:column}
}
@media (max-width: 640px){
  .hero-bottom,.hero-actions,.grade-header{flex-direction:column;align-items:flex-start}
  .search{min-width:0;width:100%}
  .stats-grid,.lesson-grid,.option-grid{grid-template-columns:1fr}
  .modal-panel{padding:16px}
  .lesson-card{min-height:auto}
}