/* =========================================================
   TOKENS — baby pink & white theme
   ========================================================= */
:root{
  --ink:        #7A2E4D;   /* deep rose-plum — headings, body text */
  --ink-soft:   #A6567A;
  --paper:      #FFF3F7;   /* soft blush-white page background */
  --card:       #FFFFFF;
  --line:       #F6D3E2;
  --muted:      #A8859A;

  --pink:       #FF9FC0;   /* signature accent — timer / focus */
  --pink-deep:  #F0629A;
  --pink-pale:  #FFE3EE;
  --gold:       #C9962E;
  --gold-bg:    #FFF7E6;
  --correct:    #3FAE81;
  --correct-bg: #E7F7EF;
  --incorrect:  #E85C82;
  --incorrect-bg:#FDE7EE;
  --info-bg:    #FCE9F2;

  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(180,60,110,.05), 0 10px 26px -14px rgba(180,60,110,.28);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--font-display); color: var(--ink); margin:0; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--pink-deep); outline-offset: 2px; }

/* The hidden attribute must always win, even over elements that also set
   their own display (e.g. .app and .signin-overlay use display:flex).
   Without this, toggling .hidden in JS has no visible effect. */
[hidden]{ display: none !important; }

/* =========================================================
   SIGN-IN GATE
   ========================================================= */
.signin-overlay{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 20%, #FFD4E6 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #FFC9DE 0%, transparent 45%),
    var(--paper);
}
.signin-card{
  width:100%;
  max-width:380px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:center;
}
.signin-mark{
  width:52px; height:52px;
  margin:0 auto 4px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#fff;
  font-family: var(--font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
}
.signin-card h1{ font-size:24px; font-weight:600; }
.signin-card p{ color: var(--muted); font-size:13.5px; line-height:1.55; margin-bottom:6px; }
.signin-card label{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  font-size:12.5px;
  font-weight:600;
  color: var(--ink-soft);
}
.signin-row{ display:grid; grid-template-columns: 1fr 1.4fr; gap:12px; }
.signin-card input, .signin-card select{
  font-family: inherit;
  font-size:14.5px;
  padding:11px 13px;
  border-radius: var(--radius-sm);
  border:1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.signin-card input:focus, .signin-card select:focus{ border-color: var(--pink-deep); }
.btn-block{ width:100%; margin-top:6px; }

/* =========================================================
   LAYOUT
   ========================================================= */
.app{
  display:flex;
  min-height:100vh;
}

/* ---- Sidebar ---- */
.sidebar{
  width:72px;
  flex-shrink:0;
  background: linear-gradient(180deg, #FFA9C6, #F0629A);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:20px 0;
  position: sticky;
  top:0;
  height:100vh;
}
.sidebar-mark{
  width:40px; height:40px;
  border-radius:10px;
  background: #fff;
  color: var(--pink-deep);
  font-family: var(--font-display);
  font-weight:700;
  font-size:11px;
  letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.nav-icon{
  width:44px; height:44px;
  border:none;
  background:transparent;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.75);
  transition: background .15s ease, color .15s ease;
}
.nav-icon svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.nav-icon:hover{ color:#fff; background: rgba(255,255,255,.18); }
.nav-icon.active{ color: var(--pink-deep); background: #fff; }
.nav-icon-bottom{ margin-top:auto; }

/* ---- Main ---- */
.main{
  flex:1;
  min-width:0;
  padding: 32px 48px 64px;
}
.view{ display:none; }
.view.active{ display:block; animation: fadeUp .25s ease; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---- User bar ---- */
.user-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:12px 16px;
  margin-bottom:24px;
  box-shadow: var(--shadow);
}
.user-chip{ display:flex; align-items:center; gap:12px; }
.user-avatar{
  width:38px; height:38px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#fff;
  font-family: var(--font-display);
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.user-chip strong{ display:block; font-size:14.5px; }
.user-chip small{ display:block; color: var(--muted); font-size:12px; margin-top:2px; }
.btn-sm{ padding:8px 14px; font-size:12.5px; }

.view-head{ max-width: 640px; margin-bottom: 32px; }
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: var(--pink-deep);
  margin-bottom:8px;
}
.view-head h1{ font-size: 32px; font-weight:600; line-height:1.15; margin-bottom:10px; }
.sub{ color: var(--muted); font-size:15px; line-height:1.6; }

/* =========================================================
   DASHBOARD
   ========================================================= */
.subject-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:16px;
  margin-bottom:36px;
}
.subject-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:20px;
  text-align:left;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  transition: transform .15s ease, border-color .15s ease;
}
.subject-card:hover{ transform: translateY(-3px); border-color: var(--pink); }
.subject-card .icon{
  width:38px; height:38px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  background: var(--info-bg);
}
.subject-card h3{ font-size:19px; }
.subject-card p{ color: var(--muted); font-size:13.5px; line-height:1.5; }
.subject-card .meta{
  font-family: var(--font-mono);
  font-size:11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing:.04em;
}

.dash-stats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:16px;
  max-width:720px;
}
.stat-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  padding:16px 18px;
}
.stat-num{ display:block; font-family: var(--font-display); font-size:26px; font-weight:600; }
.stat-label{ display:block; margin-top:4px; font-size:12.5px; color: var(--muted); }

.mock-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  background: linear-gradient(135deg, var(--pink-pale), #fff);
  border:1.5px dashed var(--pink);
  border-radius: var(--radius);
  padding:22px 26px;
  margin-bottom:24px;
}
.mock-card h3{ font-size:19px; margin:4px 0 6px; }
.mock-card p{ color: var(--muted); font-size:13.5px; max-width:420px; }

.pro-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  background: linear-gradient(135deg, var(--gold-bg), #fff);
  border:1.5px solid var(--gold);
  border-radius: var(--radius);
  padding:22px 26px;
  margin-bottom:20px;
}
.pro-card .eyebrow{ color: var(--gold); }
.pro-card h3{ font-size:19px; margin:4px 0 6px; }
.pro-card p{ color: var(--muted); font-size:13.5px; max-width:440px; }
.pro-card.is-unlocked{ border-style: solid; }
.pro-card.is-unlocked .eyebrow{ color: var(--correct); }

.pro-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  background: var(--gold-bg);
  border:1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding:10px 16px;
  margin-bottom:18px;
  font-size:13px;
  color: var(--ink-soft);
}
.pro-banner em{ color: var(--gold); font-style:normal; font-weight:600; }
.pro-banner-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pro-banner-close{
  border:none; background:transparent; color: var(--muted);
  font-size:18px; line-height:1; padding:2px 6px; border-radius:6px;
}
.pro-banner-close:hover{ background: rgba(0,0,0,.06); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  border-radius: 999px;
  padding:11px 20px;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color:#fff; }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-ghost{ background:transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--pink-deep); }
.btn-mark{ background: var(--info-bg); color: var(--ink-soft); }
.btn-mark.is-marked{ background: var(--pink); color: #fff; }
.btn-submit{
  width:100%;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #fff;
  padding:12px;
  margin-top:14px;
}
.btn-submit:hover{ filter: brightness(1.05); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* =========================================================
   QUIZ / CBT VIEW
   ========================================================= */
.quiz-empty, .result-empty{
  max-width:480px;
  padding: 60px 0;
}
.quiz-empty h2, .result-empty h2{ font-size:22px; margin: 8px 0 20px; font-weight:600; }

.quiz-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:24px;
}
.quiz-top h2{ font-size:24px; font-weight:600; }

.timer{ display:flex; align-items:center; gap:10px; }
.timer-ring{ width:44px; height:44px; transform: rotate(-90deg); }
.timer-track{ fill:none; stroke: var(--line); stroke-width:5; }
.timer-progress{
  fill:none; stroke: var(--pink); stroke-width:5; stroke-linecap:round;
  stroke-dasharray: 169.6; stroke-dashoffset:0;
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}
.timer-text{ font-family: var(--font-mono); font-size:15px; font-weight:700; min-width:48px; }
.timer.low .timer-text{ color: var(--incorrect); }

.quiz-body{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:20px;
  align-items:start;
}
.question-card, .palette-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:26px;
}
.qtype{
  font-family: var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--muted);
  margin-bottom:14px;
}
.question-text{ font-size:19px; line-height:1.5; font-weight:500; margin-bottom:22px; }

.options{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.option{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  width:100%;
  padding:13px 16px;
  border-radius: var(--radius-sm);
  border:1.5px solid var(--line);
  background:#fff;
  font-size:14.5px;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.option:hover{ border-color: var(--pink-deep); }
.option .letter{
  width:26px; height:26px; flex-shrink:0;
  border-radius:7px;
  background: var(--info-bg);
  color: var(--ink-soft);
  font-weight:700; font-size:12.5px;
  display:flex; align-items:center; justify-content:center;
}
.option.selected{ border-color: var(--pink-deep); background: var(--pink-pale); }
.option.selected .letter{ background: var(--pink-deep); color:#fff; }
.option:disabled{ opacity:.55; cursor:not-allowed; }
.option:disabled:hover{ border-color: var(--line); }

/* review-mode coloring (results screen) */
.option.correct{ border-color: var(--correct); background: var(--correct-bg); }
.option.correct .letter{ background: var(--correct); color:#fff; }
.option.incorrect{ border-color: var(--incorrect); background: var(--incorrect-bg); }
.option.incorrect .letter{ background: var(--incorrect); color:#fff; }

.quiz-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.quiz-actions .btn-primary{ margin-left:auto; }

.palette-title{ font-size:13px; font-weight:700; margin-bottom:12px; }
.palette-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
  margin-bottom:16px;
}
.palette-cell{
  aspect-ratio:1;
  border-radius:7px;
  border:1.5px solid var(--line);
  background:#fff;
  font-family: var(--font-mono);
  font-size:12px;
  font-weight:700;
  color: var(--ink-soft);
}
.palette-cell.answered{ background: var(--correct-bg); border-color: var(--correct); color: var(--correct); }
.palette-cell.marked{ background: var(--pink-pale); border-color: var(--pink); color: var(--pink-deep); }
.palette-cell.timeout{ background: var(--incorrect-bg); border-color: var(--incorrect); color: var(--incorrect); }
.palette-cell.current{ outline: 2px solid var(--pink-deep); outline-offset:1px; }
.palette-cell:disabled{ cursor:default; }

.palette-legend{ list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--muted); }
.palette-legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; }
.dot-answered{ background: var(--correct); }
.dot-marked{ background: var(--pink); }
.dot-current{ background: var(--pink-deep); }
.dot-unseen{ background: var(--line); border:1px solid var(--muted); }
.dot-timeout{ background: var(--incorrect); }

/* =========================================================
   RESULTS VIEW
   ========================================================= */
.score-panel{
  display:flex;
  align-items:center;
  gap:32px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:28px 32px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.score-ring-wrap{ position:relative; width:120px; height:120px; flex-shrink:0; }
.score-ring{ width:120px; height:120px; transform: rotate(-90deg); }
.score-track{ fill:none; stroke: var(--line); stroke-width:9; }
.score-progress{
  fill:none; stroke: var(--pink); stroke-width:9; stroke-linecap:round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1s ease, stroke .3s ease;
}
.score-ring-label{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-ring-label span{ font-family: var(--font-display); font-size:26px; font-weight:600; }
.score-ring-label small{ color: var(--muted); font-size:12px; }
.score-copy h3{ font-size:21px; margin-bottom:6px; }
.score-copy p{ color: var(--muted); font-size:14.5px; margin-bottom:16px; max-width:420px; }
.score-btns{ display:flex; gap:10px; flex-wrap:wrap; }

.review-title{ font-size:19px; font-weight:600; margin-bottom:16px; }
.review-list{ display:flex; flex-direction:column; gap:16px; }
.review-item{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:22px 24px;
}
.review-item .q-num{ font-family: var(--font-mono); font-size:11px; color: var(--muted); margin-bottom:6px; }
.review-item .q-text{ font-size:16px; font-weight:500; margin-bottom:14px; }
.review-item .options{ margin-bottom:14px; }
.explanation{
  background: var(--info-bg);
  border-radius: var(--radius-sm);
  padding:12px 14px;
  font-size:13.5px;
  line-height:1.55;
  color: var(--ink-soft);
}
.explanation b{ color: var(--ink); }

/* =========================================================
   LEADERBOARD
   ========================================================= */
.leaderboard-table{
  width:100%;
  max-width:720px;
  border-collapse: collapse;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.leaderboard-table th, .leaderboard-table td{
  text-align:left;
  padding:13px 18px;
  font-size:14px;
  border-bottom:1px solid var(--line);
}
.leaderboard-table th{
  font-family: var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--muted);
  background: var(--paper);
}
.leaderboard-table tr:last-child td{ border-bottom:none; }
.leaderboard-table tr.is-you td{ background: var(--pink-pale); font-weight:700; }

/* =========================================================
   NOTES
   ========================================================= */
.notes-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:16px;
  max-width:960px;
}
.note-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:20px 22px;
}
.note-card h3{ font-size:17px; margin-bottom:10px; }
.note-card ul{ margin:0; padding-left:18px; color: var(--ink-soft); font-size:13.5px; line-height:1.7; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px){
  .quiz-body{ grid-template-columns: 1fr; }
  .main{ padding: 24px 20px 48px; }
  .view-head h1{ font-size:25px; }
  .score-panel{ flex-direction:column; text-align:center; align-items:center; }
  .score-btns{ justify-content:center; }
  .signin-row{ grid-template-columns: 1fr; }
  .mock-card{ flex-direction:column; align-items:flex-start; }
  .pro-card{ flex-direction:column; align-items:flex-start; }
  .pro-banner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 520px){
  .sidebar{ width:60px; }
  .nav-icon{ width:38px; height:38px; }
}