:root{
  --bg:#05070b;
  --panel:#0b0f18;
  --panel2:#121a2d;
  --text:#f7f8fb;
  --muted:#b8c0d4;
  --gold:#f0c64c;
  --line:#23314d;
  --danger:#ff7a59;
  --ok:#61d095;
  --shadow:0 8px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
.shell{max-width:1100px;margin:0 auto;padding:16px}
.card{
  background:linear-gradient(180deg, rgba(12,18,31,.98), rgba(8,12,21,.98));
  border:1px solid rgba(255,255,255,.05);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.hero{padding:22px 20px 18px}
.eyebrow{margin:0 0 10px;color:var(--gold);font-size:14px;letter-spacing:.18em;font-weight:700}
h1{margin:0 0 14px;color:var(--gold);font-size:56px;line-height:1}
.hero-copy{max-width:900px;color:var(--text);font-size:20px;line-height:1.55;margin:0 0 16px}
.teacher{margin:0 0 18px;color:var(--muted);font-size:18px}
.top-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
button{
  border:none;border-radius:18px;cursor:pointer;font-weight:700;
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
button:hover{transform:translateY(-1px)}
.nav-btn,.action-btn,.speed-btn,.small-btn{
  background:var(--gold);color:#181818;padding:16px 14px;font-size:18px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.secondary-btn{background:#202a42;color:#fff;padding:16px 14px;font-size:18px}
.nav-btn.active,.speed-btn.active{outline:2px solid rgba(255,223,115,.65)}
.progress-wrap{margin-top:10px}
.progress-bar{height:18px;background:#1b2640;border-radius:999px;overflow:hidden}
#progressFill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold), var(--danger));border-radius:999px}
.progress-text{font-size:18px;font-weight:700;color:#d6dcef;margin-top:10px}
.section-card{padding:20px;margin-top:18px}
.section-title{margin:0 0 10px;font-size:28px;color:var(--gold)}
.section-copy,.muted{color:var(--muted);font-size:17px;line-height:1.6}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.kpi-grid,.score-grid,.term-grid,.speed-grid,.event-grid,.control-grid{
  display:grid;gap:14px
}
.kpi-grid,.score-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.speed-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.event-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.control-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:16px}
.kpi,.score-pill,.event-pill,.term-card,.summary-panel{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;padding:16px
}
.kpi-label,.score-pill strong,.event-pill strong,.term-card h4{
  display:block;color:var(--muted);font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px
}
.kpi-value{font-size:34px;font-weight:800;color:var(--gold)}
.practice-chart{
  margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);position:relative
}
#chartCanvas{
  width:100%;height:240px;display:block;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border-radius:14px
}
.market-headline{font-size:42px;line-height:1.05;color:var(--gold);margin:10px 0 10px;font-weight:800}
.feedback-box,.coach-box,.summary-panel{margin-top:16px}
.feedback-box h3,.coach-box h3,.summary-panel h3{margin:0 0 10px;color:var(--gold);font-size:22px}
.feedback-copy{font-size:18px;line-height:1.6}
.good{color:#9ef1c3}
.bad{color:#ffb2a1}
.pass-box,.fail-box{margin-top:14px;padding:16px;border-radius:18px}
.pass-box{background:rgba(97,208,149,.08);border:1px solid rgba(97,208,149,.24)}
.fail-box{background:rgba(255,122,89,.08);border:1px solid rgba(255,122,89,.22)}
.term-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
.term-btn{
  width:100%;text-align:left;background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.07);
  padding:14px 16px;border-radius:18px;margin-bottom:10px;font-weight:700
}
.term-btn.active{border-color:rgba(240,198,76,.6);color:var(--gold)}
.overlay-badge{
  position:absolute;top:16px;right:16px;background:rgba(5,7,11,.9);border:1px solid rgba(240,198,76,.35);
  border-radius:16px;padding:10px 12px;max-width:280px
}
.overlay-badge h4{margin:0 0 6px;color:var(--gold);font-size:15px}
.overlay-badge p{margin:0;color:var(--text);font-size:14px;line-height:1.4}
@media (max-width: 860px){
  h1{font-size:38px}
  .hero-copy{font-size:18px}
  .top-nav,.control-grid,.speed-grid{grid-template-columns:repeat(2,1fr)}
  .grid,.kpi-grid,.score-grid,.term-grid,.event-grid{grid-template-columns:1fr}
  .kpi-value{font-size:30px}
  .market-headline{font-size:34px}
}