:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;background:#07101d;color:#eaf2ff;color-scheme:dark}
*{box-sizing:border-box}
html{background:#07101d}
body{margin:0;background:radial-gradient(circle at 80% 0,#17315a 0,#07101d 38%);min-height:100vh}
button,select,input{font:inherit}
button{cursor:pointer}
.app{min-height:100vh;display:grid;grid-template-columns:260px 1fr}
aside{padding:28px 20px;border-left:1px solid #ffffff18;background:#07101dcc;backdrop-filter:blur(20px);position:sticky;top:0;height:100vh}
aside h1{font-size:22px;margin:0}
aside p,small{color:#93a4bd}
nav{display:grid;gap:8px;margin-top:30px}
nav button,.panel button,.hero button{border:0;border-radius:14px;padding:13px 16px;background:#15243b;color:white;text-align:right;font-size:15px}
.hero button,.panel button{background:linear-gradient(135deg,#5b8cff,#8c6cff);font-weight:700}
.panel button.secondary,.hero button.secondary{background:#15243b;border:1px solid #ffffff22}
button.danger{background:#361923;border:1px solid #ff6b8a44}
button:disabled{opacity:.45;cursor:not-allowed}
main{padding:0 34px 120px;max-width:1300px;width:100%;margin:auto;min-width:0}
header{height:82px;display:flex;align-items:center;justify-content:space-between;gap:12px}
header div{display:grid}
.pill,.eyebrow{font-size:12px;border:1px solid #ffffff24;padding:7px 10px;border-radius:999px;color:#b8c8df}
.page{display:none}.page.active{display:block}
.hero{min-height:390px;border:1px solid #ffffff16;border-radius:28px;padding:46px;display:flex;align-items:center;background:linear-gradient(145deg,#122542aa,#0b1628cc);box-shadow:0 30px 80px #0005}
.hero h2{font-size:clamp(32px,5vw,64px);max-width:850px;margin:18px 0;line-height:1.15}
.hero p{color:#b5c3d8;font-size:18px;line-height:1.8}
.heroActions{max-width:440px}
.cards,.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.stats{grid-template-columns:repeat(4,1fr)}
article,.panel{border:1px solid #ffffff16;background:#0d192bbb;border-radius:20px;padding:22px}
article p,.panel p{color:#9fb0c8}
.stats article{display:grid;gap:10px}
.stats strong{font-size:28px}
.panel{margin:16px 0;display:grid;gap:14px}
.stack{display:grid;gap:16px}
label{display:grid;gap:8px}
select,input[type="range"]{width:100%;padding:12px;border-radius:12px;background:#111f33;color:white;border:1px solid #ffffff20}
select:disabled{opacity:.75}
.sample{padding:16px;border-radius:14px;background:#07101d}
.en{direction:ltr;text-align:left}.fa{direction:rtl;text-align:right}
pre{white-space:pre-wrap;color:#9ed0ff;max-height:320px;overflow:auto;direction:ltr;text-align:left}
.mobile{display:none}
.status,.notice{padding:12px 14px;border-radius:12px;background:#10223a;color:#bcd3f2;line-height:1.7}
.notice.ok{border:1px solid #4bd28a55}
.notice.warn{border:1px solid #ffb45466;color:#ffd39a;background:#2a1d0e}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions button{flex:1;min-width:120px}
.lessonCard{cursor:pointer;transition:transform .18s ease,border-color .18s ease}
.lessonCard:hover{transform:translateY(-2px);border-color:#7b8cff88}
.done{border-color:#4bd28a55;background:#0d211fbb}
.cardTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cardTop span{color:#72e3a7;font-size:13px}
.reader{scroll-margin-top:20px}
.lessonStep,.modelAnswer{margin:14px 0;padding:16px;border-radius:16px;background:#07101d;border:1px solid #ffffff10}
.lessonStep>b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#5b8cff}
.lessonStep p,.modelAnswer p{margin:10px 0;line-height:1.8}
.lessonStep .en,.modelAnswer .en{color:#b9c9df}
.practiceCard p{line-height:1.8}
.quizPanel{max-width:900px}
.quizOptions{display:grid;gap:10px}
.quizOption{display:flex;grid-template-columns:auto 1fr;align-items:flex-start;gap:12px;padding:14px;border:1px solid #ffffff16;border-radius:14px;background:#0a1424;cursor:pointer}
.quizOption input{margin-top:4px;accent-color:#7b8cff}
.quizOption span{display:grid;gap:6px;width:100%}
.quizOption.correct{border-color:#4bd28aaa;background:#0c211b}
.quizOption.wrong{border-color:#ff6b6baa;background:#2a1218}
#mockQuestion{font-size:clamp(24px,4vw,42px);line-height:1.3}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){
  .app{display:block}aside{display:none}main{padding:0 16px 116px}
  header{height:72px}.pill{font-size:10px}
  .hero{padding:26px;min-height:360px}.hero h2{font-size:36px}
  .cards,.stats{grid-template-columns:1fr}
  .mobile{display:flex;position:fixed;bottom:0;left:0;right:0;margin:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#07101df5;border-top:1px solid #ffffff18;z-index:20;gap:5px;overflow-x:auto;direction:rtl}
  .mobile button{flex:0 0 76px;text-align:center;font-size:11px;padding:11px 4px;white-space:nowrap}
  .actions{display:grid;grid-template-columns:1fr 1fr}.actions button{min-width:0}
  .heroActions{grid-template-columns:1fr}
}
@media(max-width:420px){
  main{padding-left:12px;padding-right:12px}
  .hero{padding:22px;border-radius:22px}.hero h2{font-size:32px}
  article,.panel{padding:17px}
  .actions{grid-template-columns:1fr}
}
.bankTools{grid-template-columns:2fr 1fr;align-items:end}
.bankTools .status{grid-column:1/-1}
.bankTools input[type="search"]{width:100%;padding:13px 14px;border-radius:12px;background:#111f33;color:white;border:1px solid #ffffff20;outline:none}
.bankTools input[type="search"]:focus{border-color:#7b8cff}
.bankList{margin-top:16px}
.bankCard{display:grid;gap:10px}
.bankQuestion{font-size:17px;line-height:1.65;color:#e7eefb!important;margin:4px 0 8px}
.bankMeta{color:#8fa8c8;font-size:12px}
.bankHeader{background:#101d32;border-style:dashed}
.bankHeader .bankQuestion{font-size:15px;font-weight:800;letter-spacing:.04em;color:#9ed0ff!important}
.loadMore{display:block;width:min(420px,100%);margin:20px auto;border:1px solid #ffffff24;border-radius:14px;padding:14px;background:#15243b;color:#fff;font-weight:700}
.stats{grid-template-columns:repeat(5,1fr)}
@media(max-width:1150px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.bankTools{grid-template-columns:1fr}.bankTools .status{grid-column:auto}.stats{grid-template-columns:1fr}}

.testLink{display:block;text-align:center;text-decoration:none;border:1px solid #ffffff24;border-radius:14px;padding:13px 16px;background:#10223a;color:#dceaff;font-weight:700}
.testLink:hover{border-color:#7b8cff88;background:#142a47}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;padding:7px 10px;border-radius:999px;background:#122746;border:1px solid #6d8cff55;color:#c9d9ff}
.starGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.starGrid>div{padding:16px;border-radius:16px;background:#091526;border:1px solid #ffffff12}
.starGrid b{color:#9ed0ff}
.starGrid p{line-height:1.8;margin-bottom:0}
.confidence{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.confidence button{border:1px solid #ffffff20;border-radius:14px;padding:14px;background:#132238;color:white;font-weight:700}
.confidence button.selected{border-color:#7b8cff;background:#263a67;box-shadow:0 0 0 2px #7b8cff33 inset}
#drillQuestion{font-size:clamp(24px,4vw,44px);line-height:1.4}
@media(max-width:850px){.starGrid{grid-template-columns:1fr}.confidence{grid-template-columns:1fr}}