:root { --bg:#0b1220; --panel:#0f172a; --ink:#e5e7eb; --muted:#9ca3af; --accent:#22d3ee;
  --ok:#34d399; --bad:#f87171; --bd:1px solid rgba(255,255,255,.08); --br:16px; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;background:var(--bg);color:var(--ink)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.card{background:var(--panel);border:var(--bd);border-radius:var(--br);padding:20px;margin-bottom:14px}
.h1{font-size:24px;margin:0 0 6px;font-weight:800}
.p{color:var(--muted)}

/* Header full-width */
.app-header{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 20px;background:#0d1426;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.app-header .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800}
.app-header .logo img{width:28px;height:28px;border-radius:6px;object-fit:cover}
.app-header .spacer{flex:1}

/* Footer/Top sticky progress shells (not used on this page but kept for consistency) */
.page-wrap{padding:16px 0 70px}
.progress-shell{position:sticky;bottom:0;z-index:1000;width:100%;background:#0d1426;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -2px 0 rgba(0,0,0,.15)}
.progress-top{top:0;bottom:auto;border-bottom:1px solid rgba(255,255,255,.08);border-top:none;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.progress-inner{max-width:1100px;margin:0 auto;padding:10px 16px}
.progress-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin-bottom:6px}
.progress-bar{width:100%;height:12px;background:#0a1020;border:1px solid #223049;border-radius:999px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#22d3ee,#34d399)}

/* Buttons & inputs */
.btn{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid #334155;background:#0b1220;color:#e5e7eb;cursor:pointer;text-decoration:none}
.btn.primary{border-color:#0891b2;background:#0b1720}
.btn.warn{border-color:#b45309;background:#1f1205}
.btn:disabled{opacity:.6;cursor:not-allowed}
.input{width:100%;padding:12px;border-radius:12px;border:1px solid #334155;background:#0b1220;color:#e5e7eb}
.badge{padding:4px 8px;border-radius:999px;border:1px solid #334155;color:#a3a3a3}
.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}

/* Grade chips */
.grade-row{margin:8px 0 12px;display:flex;gap:8px;flex-wrap:wrap}
.grade-chip{padding:6px 10px;border-radius:999px;border:1px solid #233147;background:#0b1220;color:#cbd5e1;text-decoration:none}
.grade-chip.active{outline:2px solid var(--accent)}

/* OMR question row */
.question{padding:12px;border:1px solid #223049;border-radius:12px;background:#0b1220}
.qhead{margin-bottom:6px;font-weight:600}
.opts.row{display:flex;gap:12px}
.opts.row .opt{flex:0 0 auto;min-width:40px;text-align:center;padding:10px;border:1px solid #2a3a50;border-radius:10px;background:#0a1020;cursor:pointer}
.opt.selected{outline:2px solid var(--accent)}

/* Answer sheet */
.sheet-wrap{background:#fff;color:#111;border-radius:12px;padding:18px}
.sheet-table{width:100%;border-collapse:collapse}
.sheet-table th,.sheet-table td{border:1px solid #111;padding:6px 8px;text-align:center}
.sheet-table th{background:#f2f2f2}
.ok{color:#15803d;font-weight:600}
.bad{color:#b91c1c;font-weight:600}

/* Podium */
.board-hero{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:18px}
.tile{display:flex;align-items:center;gap:12px;background:#0b1220;border:1px solid #1f2a3b;border-radius:14px;padding:14px}
.avatar{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;background:#0a1020;border:1px solid #2a3a50;color:#cbd5e1}
.rank-chip{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:700;margin-right:6px;background:#0b1220;color:#e5e7eb;border:1px solid #334155}
.rank-chip.gold{background:#fef08a;color:#7c2d12;border-color:#7c2d12}
.rank-chip.silver{background:#e5e7eb;color:#111;border-color:#111}
.rank-chip.bronze{background:#fcd9bd;color:#7c2d12;border-color:#7c2d12}
.score-big{margin-left:auto;font-size:32px;font-weight:900;background:#0a1020;border:1px solid #2a3a50;padding:8px 14px;border-radius:12px;min-width:64px;text-align:center}
.rows{padding:0 18px 18px 18px;display:grid;gap:10px}
.row-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0b1220;border:1px solid #1f2a3b;border-radius:12px;padding:12px}
.avatar.sm{width:36px;height:36px;border-radius:10px;font-size:14px}
.score-pill{font-weight:800;padding:6px 12px;border-radius:999px;background:#0a1020;border:1px solid #2a3a50;min-width:42px;text-align:center}
@media (max-width: 820px){.podium{grid-template-columns:1fr}.score-big{font-size:26px}}

/* ---- My Rank (podium-style, with NO-JS animated bar) ---- */
.my-rank.card{
  display:flex; align-items:center; gap:18px;
  padding:18px 20px; background: var(--panel); border: var(--bd); border-radius: var(--br);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.my-rank .left{ display:flex; align-items:center; gap:14px; min-width:0; }
.my-rank .avatar.lg{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-weight:800;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
}
.my-rank .rank-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-weight:700;
  background: var(--chip, #0b1220); color: var(--ink);
  border: 1px solid rgba(255,255,255,.08);
}
.my-rank .rank-pill .hash{ opacity:.65; font-weight:700; }
.my-rank .rank-pill.gold   { box-shadow: 0 0 0 2px rgba(255,215,0,.15), 0 6px 16px rgba(255,215,0,.15); }
.my-rank .rank-pill.silver { box-shadow: 0 0 0 2px rgba(192,192,192,.12), 0 6px 16px rgba(192,192,192,.12); }
.my-rank .rank-pill.bronze { box-shadow: 0 0 0 2px rgba(205,127,50,.12), 0 6px 16px rgba(205,127,50,.12); }

.my-rank .mid{ flex:1; min-width:0; }
.my-rank .name{ font-weight:800; letter-spacing:.2px; }
.my-rank .sub{ display:flex; align-items:center; gap:10px; margin-top:6px; color:var(--muted); font-size:.92rem; white-space:nowrap; }

/* Progress bar */
.my-rank .bar{
  position:relative; flex:1; height:8px; border-radius:999px;
  background: rgba(255,255,255,.06); overflow:hidden;
  border: 1px solid rgba(255,255,255,.07);
}
.my-rank .bar > i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent), rgba(34,211,238,.5));
  border-right: 1px solid rgba(255,255,255,.25);
  animation: growWidth .8s ease .15s forwards; /* no JS: animate to --pct */
}
/* Keyframes using CSS variable for target width */
@keyframes growWidth { to { width: var(--pct); } }

.my-rank .right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:92px; }
.my-rank .score-big{ font-size:1.6rem; font-weight:900; letter-spacing:.3px; }
.my-rank .delta{ font-size:.9rem; color:var(--muted); }

/* First place “leader” accent */
.my-rank.leader{
  border-left: 4px solid var(--ok);
  box-shadow: 0 10px 24px rgba(16,185,129,.15), inset 0 0 0 1px rgba(16,185,129,.12);
}

/* Responsive */
@media (max-width:640px){
  .my-rank.card { flex-direction:column; align-items:stretch; gap:12px; }
  .my-rank .right { align-items:flex-start; }
}