:root{
  --bg: #070a18;
  --panel: rgba(255,255,255,0.06);
  --panel-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --muted-2: rgba(255,255,255,0.55);
  --shadow: 0 18px 70px rgba(0,0,0,0.45);

  --radius: 18px;
  --radius-sm: 12px;

  --accent: #7B6CF6;
  --accent-glow: rgba(123,108,246,0.28);
  --accent-warm: #F5A524;

  --focus: rgba(123,108,246,0.55);
  --ok: rgba(70, 220, 150, 0.22);
  --warn: rgba(255, 200, 70, 0.22);
  --bad: rgba(255, 90, 90, 0.20);

  /* State palette — used for buttons, status boxes, and solution box */
  --green-bg:       #dcf7e5;
  --green-bg-hover: #c9f0d8;
  --green-border:   #9ed8b3;
  --green-bar:      #3a9e68;
  --green-text:     #1c5b35;

  --yellow-bg:       #fff1cd;
  --yellow-bg-hover: #ffe6b0;
  --yellow-border:   #ebcb7f;
  --yellow-bar:      #c99a2e;
  --yellow-text:     #6c4a0f;

  --red-bg:       #ffe1e1;
  --red-bg-hover: #ffd0d0;
  --red-border:   #e8b0b0;
  --red-bar:      #c43030;
  --red-text:     #8d2e2e;
}

* { box-sizing: border-box; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(99,120,246,0.20), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(30,80,220,0.12), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(13,94,175,0.14), transparent 55%),
    var(--bg);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 270 180'%3E%3Crect width='270' height='20' fill='%230D5EAF'/%3E%3Crect y='20' width='270' height='20' fill='%23FFFFFF'/%3E%3Crect y='40' width='270' height='20' fill='%230D5EAF'/%3E%3Crect y='60' width='270' height='20' fill='%23FFFFFF'/%3E%3Crect y='80' width='270' height='20' fill='%230D5EAF'/%3E%3Crect y='100' width='270' height='20' fill='%23FFFFFF'/%3E%3Crect y='120' width='270' height='20' fill='%230D5EAF'/%3E%3Crect y='140' width='270' height='20' fill='%23FFFFFF'/%3E%3Crect y='160' width='270' height='20' fill='%230D5EAF'/%3E%3Crect width='100' height='100' fill='%230D5EAF'/%3E%3Crect x='40' width='20' height='100' fill='%23FFFFFF'/%3E%3Crect y='40' width='100' height='20' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 18px 36px;
  position: relative;
  background: rgba(7, 10, 24, 0.80);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  min-height: 100vh;
}

.header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

h1{
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0;
  background: linear-gradient(120deg, #a78bfa 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card{
  background: linear-gradient(180deg, var(--panel), rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(10px);
}

.quiz-card{
  background: linear-gradient(155deg, #f8f7ff 0%, #f0edff 45%, #e8f3ff 100%);
  border-color: rgba(123,108,246,0.18);
  color: #1d2b3b;
  position: relative;
  overflow: hidden;
}


.quiz-card strong{
  color: #14273d;
}

.quiz-card .label,
.quiz-card .note{
  color: #41556d;
}

.quiz-card .pill{
  background: #e3effc;
  border-color: #c8dbf2;
  color: #2f435a;
}

.quiz-card select{
  background: #f4f9ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2335506d' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px 6px;
  color: #203247;
  border-color: #c8dbf2;
}

.quiz-card input[type="text"]{
  background: #f8fbff;
  color: #1a2b3d;
  border-color: #c3d7ee;
  font-size: 1.2rem;
  padding: 14px 16px;
}

.quiz-card input[type="text"]:focus{
  border-color: rgba(123,108,246,0.60);
  box-shadow: 0 0 0 4px rgba(123,108,246,0.14);
}

.quiz-card button{
  background: #e4effc;
  border-color: #c8dbf2;
  color: #1f344b;
}

.quiz-card button:hover{
  background: #dcebfd;
}

.quiz-card .primary{
  background: linear-gradient(135deg, #7B6CF6, #5b8dee);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(123,108,246,0.35);
}

.quiz-card .primary:hover{
  background: linear-gradient(135deg, #6d5ee6, #4e82e0);
  box-shadow: 0 6px 18px rgba(123,108,246,0.45);
  transform: translateY(-1px);
}

.quiz-card .primary:active{
  transform: translateY(0);
}

.quiz-card .setsBox{
  background: #f0f7ff;
  border-color: #c8dbf2;
}

.quiz-card .setsBox label{
  color: #1f3348;
}

.quiz-card .setsBox span{
  color: #4c617a;
}

.quiz-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
  align-items: start;
}

.quiz-main-col{
  display: grid;
  gap: 12px;
  min-width: 0;
}

.quiz-side-col{
  min-height: 60px;
}

.feedback-card{
  margin-top: 0;
  border: 1px solid #c8dbf2;
  border-radius: 14px;
  background: #f5faff;
  overflow: hidden;
  display: block;
  transition: background .2s ease, border-color .2s ease;
}

.feedback-card img{
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  display: block;
  background: #e6f1fd;
  transition: opacity .18s ease;
}

.feedback-card[data-state="idle"]{
  background: #f5faff;
  border-color: #c8dbf2;
}

.feedback-card[data-state="perfect"]{
  background: #ecfbf3;
  border-color: #b9e9cc;
}

.feedback-card[data-state="retry"]{
  background: #fff8ea;
  border-color: #f0ddb4;
}

.feedback-card[data-state="wrong"]{
  background: #fff1f1;
  border-color: #efc6c6;
}

.feedback-copy{
  padding: 10px 12px 12px;
}

.feedback-title{
  font-weight: 750;
  font-size: 1.08rem;
  color: #1f334b;
}

.feedback-line{
  margin-top: 6px;
  font-size: 1rem;
  color: #3d5269;
}

.quiz-footer-meta{
  margin-top: 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-pill{
  font-size: 0.78rem;
  padding: 5px 8px;
  color: #4f647c;
  background: #eaf3ff;
  border-color: #ccddf3;
}

.mini-btn{
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  background: #eaf3ff;
  border-color: #ccddf3;
  color: #35506d;
}

.mini-btn:hover{
  background: #deecff;
}

@media (max-width: 820px){
  .quiz-layout{
    grid-template-columns: 1fr;
  }
  .feedback-card img{
    max-height: 210px;
  }
}

.mascot{
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mascot-frame{
  width: min(380px, 86vw);
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 20px rgba(0,0,0,0.28);
}

.mascot img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.mascot-note{
  margin-top: 0;
  margin-bottom: 2px;
  text-align: center;
}

.login-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.login-form button{
  width: 100%;
}

.row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.topbar{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.topbar-left, .topbar-right{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.label{
  color: var(--muted);
  font-size: 0.95rem;
  display:flex;
  align-items:center;
  gap: 8px;
}

select{
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px 6px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 28px 8px 10px;
  outline: none;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 0.9rem;
}

strong{ color: var(--text); }

.setsBox{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}

.setsBox label{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-right: 14px;
  margin-bottom: 8px;
  color: var(--text);
}

.setsBox span{
  color: var(--muted-2);
}

input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: #7B6CF6;
}

.question{
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 14px 0 6px 0;
}

.meta{
  color: var(--muted);
  margin: 0 0 14px 0;
}

.quiz-card .lesson-badge{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #c4b5fd;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0;
}
.quiz-card .lesson-badge:empty{
  display: none;
}

.quiz-lesson-head{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.lesson-title{
  min-height: 34px;
  color: #1f2f45;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.3;
}

.quiz-progress-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mastery-pill{
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #e9f4ff;
  border-color: #c8dbf2;
  color: #32506e;
  font-size: 0.85rem;
  font-weight: 700;
}

.question-shell{
  min-width: 0;
}

.quiz-card .question-box{
  background: #ffffff;
  border: 1px solid #c8c0fa;
  border-left: 4px solid #7B6CF6;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0;
  box-shadow: 0 8px 22px rgba(123,108,246,0.12);
}

.quiz-card .question{
  margin: 0;
  color: #1e1b4b;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.45;
}

.quiz-answer-panel{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.quiz-answer-row{
  margin: 0;
}

.quiz-answer-row input[type="text"]{
  min-height: 58px;
  font-size: 1.12rem;
  background: #ffffff;
  border-color: #bfd4ec;
  color: #1a2b3d;
  box-shadow: 0 8px 22px rgba(74, 93, 129, 0.10);
}

.quiz-control-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  padding: 14px 16px;
  border: 1px solid rgba(200,219,242,0.95);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(245,249,255,0.95), rgba(234,242,252,0.92));
  box-shadow: 0 10px 26px rgba(74, 93, 129, 0.08);
}

.quiz-control-row button{
  min-height: 44px;
  padding: 10px 16px;
  font-weight: 700;
}

.quiz-primary-actions button{
  flex: 1 1 180px;
}

.quiz-run-row{
  justify-content: center;
}

.quiz-run-row .mastery-pill,
.quiz-run-row .lesson-clock{
  flex: 0 0 auto;
}

.quiz-response-stack{
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  min-height: 118px; /* reserves space for 2 boxes so the card doesn't reflow */
  align-content: start;
}

.visually-hidden-control{
  display: none !important;
}

input[type="text"]{
  width: 100%;
  min-width: 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  outline: none;
}

input[type="password"]{
  width: 100%;
  min-width: 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  outline: none;
}

input[type="text"]:focus{
  border-color: rgba(123,108,246,0.55);
  box-shadow: 0 0 0 4px rgba(123,108,246,0.16);
}

input[type="password"]:focus{
  border-color: rgba(123,108,246,0.55);
  box-shadow: 0 0 0 4px rgba(123,108,246,0.16);
}

button{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  transition: transform .04s ease, background .15s ease, border-color .15s ease;
}

button:hover{
  background: rgba(255,255,255,0.09);
}

button:active{
  transform: translateY(1px);
}

button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.primary{
  background: rgba(123,108,246,0.22);
  border-color: rgba(123,108,246,0.40);
  color: #c4b5fd;
}
.primary:hover{
  background: rgba(123,108,246,0.30);
}

.status{
  margin-top: 12px;
  font-weight: 650;
}

.status--correct,
.status--retry,
.status--wrong{
  padding: 14px 18px;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-left-width: 3px;
  font-size: 1.1rem;
}

.status--correct{
  border-color: var(--green-border);
  border-left-color: var(--green-bar);
  background: var(--green-bg);
  color: var(--green-text);
}

.status--retry{
  border-color: var(--yellow-border);
  border-left-color: var(--yellow-bar);
  background: var(--yellow-bg);
  color: var(--yellow-text);
}

.status--wrong{
  border-color: var(--red-border);
  border-left-color: var(--red-bar);
  background: var(--red-bg);
  color: var(--red-text);
}

.solution{
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--yellow-border);
  border-left: 3px solid var(--yellow-bar);
  background: var(--yellow-bg);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--yellow-text);
  display: none;
}

.note{
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.35;
}

.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 0.9rem;
  padding: 0.08rem 0.45rem;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
}


/* ===== Component styles ===== */

    .tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 12px; }
    .tabbtn {
      padding: 10px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
      font-weight: 550;
    }
    .tabbtn:hover { background: rgba(255,255,255,0.10); }
    .tabbtn.active {
      background: rgba(123,108,246,0.18);
      border-color: rgba(123,108,246,0.45);
      box-shadow: 0 0 0 1px rgba(123,108,246,0.20) inset, 0 2px 14px rgba(123,108,246,0.18);
      font-weight: 750;
      color: #c4b5fd;
    }
    .panel { display:none; }
    .panel.active { display:block; }

    .grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    @media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }

    .statcard{
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      transition: background .15s ease, border-color .15s ease;
    }
    .statcard:hover{
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.18);
    }
    .statlabel{ color: rgba(255,255,255,0.65); font-size: .92rem; }
    .statvalue{ font-size: 1.25rem; font-weight: 750; margin-top: 4px; }
    .small{ color: rgba(255,255,255,0.65); font-size: .92rem; margin-top: 6px; }
    .achievements-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .time-stats-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .achievement-medal{
      border-radius: 16px;
      padding: 14px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.06);
      text-align: center;
    }
    .achievement-medal.bronze{
      background: linear-gradient(180deg, rgba(170,110,70,0.28), rgba(120,78,50,0.20));
      border-color: rgba(196,138,95,0.44);
    }
    .achievement-medal.silver{
      background: linear-gradient(180deg, rgba(155,171,186,0.34), rgba(122,136,150,0.22));
      border-color: rgba(176,193,207,0.45);
    }
    .achievement-medal.gold{
      background: linear-gradient(180deg, rgba(220,181,76,0.35), rgba(170,129,40,0.24));
      border-color: rgba(239,211,133,0.48);
    }
    .medal-icon{ font-size: 1.55rem; }
    .medal-label{ margin-top: 4px; font-weight: 700; color: rgba(255,255,255,0.92); }
    .medal-value{ margin-top: 6px; font-size: 1.35rem; font-weight: 760; color: rgba(255,255,255,0.98); }
    .ach-progress{
      width: 140px;
      height: 10px;
      margin-left: auto;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.16);
    }
    .ach-progress > span{
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #7B6CF6, #38bdf8);
    }
    .ach-progress-text{
      text-align: right;
      margin-top: 4px;
      color: rgba(255,255,255,0.78);
      font-size: .82rem;
    }
    .ach-mini-spark{
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      min-width: 96px;
    }
    .ach-mini-spark-bars{
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 4px;
      height: 32px;
    }
    .ach-mini-spark-bar{
      display: inline-block;
      width: 24px;
      min-height: 4px;
      border-radius: 2px;
      opacity: 0.95;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
    }
    .ach-mini-spark-label{
      color: rgba(255,255,255,0.82);
      font-size: .82rem;
      font-weight: 700;
      line-height: 1;
    }
    .ach-mastery{
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 5px;
      min-width: 132px;
    }
    .ach-mastery-bar{
      display: flex;
      width: 132px;
      height: 16px;
      overflow: hidden;
      border-radius: 3px;
      background: rgba(255,255,255,0.08);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
    }
    .ach-mastery-seg{
      display: block;
      height: 100%;
    }
    .ach-mastery-seg.lvl-0{ background: #c74a4a; }
    .ach-mastery-seg.lvl-1{ background: #e39a3b; }
    .ach-mastery-seg.lvl-2{ background: #6b8cff; }
    .ach-mastery-seg.lvl-3{ background: #4caf7d; }
    .ach-mastery-label{
      color: rgba(255,255,255,0.82);
      font-size: .82rem;
      font-weight: 700;
      line-height: 1;
    }
    .achievement-toast{
      position: fixed;
      right: 18px;
      bottom: 18px;
      max-width: min(420px, calc(100vw - 36px));
      z-index: 120;
      border-radius: 14px;
      border: 1px solid rgba(242,203,106,0.68);
      background: linear-gradient(180deg, rgba(58,41,9,0.96), rgba(45,32,8,0.94));
      color: #ffe8aa;
      padding: 12px 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.38);
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .25s ease, transform .25s ease;
    }
    .achievement-toast.show{
      opacity: 1;
      transform: translateY(0);
    }
    .medal-pop-modal .modal-card{
      width: min(640px, 100%);
      text-align: center;
      background:
        radial-gradient(120% 110% at 50% 0%, rgba(255,226,146,0.52), rgba(255,240,198,0.95) 48%, #fff9ed 100%);
      border: 1px solid rgba(218,170,61,0.42);
      color: #4d3506;
      box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    }

    /* ── BRONZE: gold-level effects ── */
    .medal-pop-modal.tier-bronze .modal-card{
      background: radial-gradient(120% 110% at 50% 0%, rgba(205,127,50,0.38), rgba(255,240,220,0.97) 48%, #fff8f2 100%);
      border-color: rgba(180,110,40,0.55);
      box-shadow: 0 0 0 3px rgba(205,127,50,0.22), 0 28px 70px rgba(0,0,0,0.36);
    }
    .tier-bronze .medal-pop-icon{
      font-size: 7.5rem;
      animation: icon-bounce 0.45s cubic-bezier(.36,1.72,.64,1) both,
                 icon-spin-glow-bronze 2.4s ease-in-out 0.45s infinite;
    }
    .tier-bronze .medal-pop-title{
      background: linear-gradient(90deg, #7a3d00, #d4722a, #f5a623, #d4722a, #7a3d00);
      background-size: 250% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 2.2s linear infinite;
    }
    .tier-bronze.shake .modal-card{
      animation: card-shake 0.55s cubic-bezier(.36,.07,.19,.97) both;
    }
    @keyframes icon-spin-glow-bronze {
      0%   { transform: scale(1)    rotate(-4deg); filter: drop-shadow(0 0 14px rgba(205,127,50,0.8)); }
      25%  { transform: scale(1.09) rotate( 5deg); filter: drop-shadow(0 0 32px rgba(220,150,40,1));  }
      50%  { transform: scale(1)    rotate(-3deg); filter: drop-shadow(0 0 14px rgba(205,127,50,0.8)); }
      75%  { transform: scale(1.06) rotate( 3deg); filter: drop-shadow(0 0 26px rgba(220,150,40,0.9)); }
      100% { transform: scale(1)    rotate(-4deg); filter: drop-shadow(0 0 14px rgba(205,127,50,0.8)); }
    }

    /* ── SILVER: crazier than bronze ── */
    .medal-pop-modal.tier-silver .modal-card{
      background: radial-gradient(130% 120% at 50% 0%, rgba(180,190,255,0.45), rgba(235,238,255,0.97) 48%, #f0f2ff 100%);
      border-color: rgba(140,150,220,0.7);
      box-shadow: 0 0 0 4px rgba(160,170,255,0.28), 0 0 0 8px rgba(160,170,255,0.10), 0 30px 80px rgba(0,0,0,0.38);
      animation: silver-card-pulse 2s ease-in-out 0.6s infinite;
    }
    .tier-silver .medal-pop-icon{
      font-size: 8.5rem;
      animation: icon-bounce-big 0.4s cubic-bezier(.36,1.9,.64,1) both,
                 icon-spin-glow-silver 1.6s ease-in-out 0.4s infinite;
    }
    .tier-silver .medal-pop-title{
      font-size: 1.65rem;
      background: linear-gradient(90deg, #3a3080, #a0aaff, #e8eaff, #a0aaff, #3a3080);
      background-size: 250% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 1.5s linear infinite;
    }
    .tier-silver.shake .modal-card{
      animation: card-shake-hard 0.65s cubic-bezier(.36,.07,.19,.97) both;
    }
    @keyframes icon-spin-glow-silver {
      0%   { transform: scale(1)    rotate(-6deg); filter: drop-shadow(0 0 18px rgba(160,170,255,0.9)) drop-shadow(0 0 36px rgba(140,160,255,0.5)); }
      20%  { transform: scale(1.12) rotate( 7deg); filter: drop-shadow(0 0 42px rgba(180,190,255,1))   drop-shadow(0 0 70px rgba(160,180,255,0.7)); }
      50%  { transform: scale(0.97) rotate(-5deg); filter: drop-shadow(0 0 18px rgba(160,170,255,0.9)) drop-shadow(0 0 36px rgba(140,160,255,0.5)); }
      75%  { transform: scale(1.08) rotate( 5deg); filter: drop-shadow(0 0 32px rgba(180,190,255,1))   drop-shadow(0 0 56px rgba(160,180,255,0.6)); }
      100% { transform: scale(1)    rotate(-6deg); filter: drop-shadow(0 0 18px rgba(160,170,255,0.9)) drop-shadow(0 0 36px rgba(140,160,255,0.5)); }
    }
    @keyframes silver-card-pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(160,170,255,0.28), 0 0 0 8px rgba(160,170,255,0.10), 0 30px 80px rgba(0,0,0,0.38); }
      50%       { box-shadow: 0 0 0 6px rgba(160,170,255,0.45), 0 0 0 14px rgba(160,170,255,0.18), 0 30px 80px rgba(0,0,0,0.38); }
    }

    /* ── GOLD: absolute chaos ── */
    .medal-pop-modal.tier-gold .modal-card{
      background: radial-gradient(140% 130% at 50% 0%, rgba(255,230,0,0.55), rgba(255,252,210,0.97) 48%, #fffde0 100%);
      border-color: rgba(218,170,0,0.8);
      box-shadow: 0 0 0 4px rgba(255,215,0,0.4), 0 0 0 10px rgba(255,215,0,0.15), 0 0 0 20px rgba(255,215,0,0.06), 0 32px 90px rgba(0,0,0,0.42);
      animation: gold-card-throb 1.2s ease-in-out 0.5s infinite;
    }
    .tier-gold .medal-pop-icon{
      font-size: 10rem;
      animation: icon-bounce-big 0.38s cubic-bezier(.36,2,.64,1) both,
                 icon-rainbow-spin 1.8s ease-in-out 0.38s infinite;
    }
    .tier-gold .medal-pop-title{
      font-size: 1.85rem;
      background: linear-gradient(90deg, #ff0000,#ff8800,#ffdd00,#00ff88,#00aaff,#aa00ff,#ff0000);
      background-size: 300% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer-rainbow 1.1s linear infinite;
    }
    .tier-gold.shake .modal-card{
      animation: card-shake-wild 0.8s cubic-bezier(.36,.07,.19,.97) both;
    }
    @keyframes icon-rainbow-spin {
      0%   { transform: scale(1)    rotate(-8deg); filter: drop-shadow(0 0 20px #ff0080) drop-shadow(0 0 50px rgba(255,0,128,0.5)); }
      16%  { transform: scale(1.14) rotate( 9deg); filter: drop-shadow(0 0 28px #ff8800) drop-shadow(0 0 60px rgba(255,136,0,0.6)); }
      33%  { transform: scale(0.96) rotate(-7deg); filter: drop-shadow(0 0 22px #ffdd00) drop-shadow(0 0 55px rgba(255,221,0,0.6)); }
      50%  { transform: scale(1.16) rotate(10deg); filter: drop-shadow(0 0 30px #00ff88) drop-shadow(0 0 65px rgba(0,255,136,0.6)); }
      66%  { transform: scale(0.97) rotate(-8deg); filter: drop-shadow(0 0 24px #00aaff) drop-shadow(0 0 58px rgba(0,170,255,0.6)); }
      83%  { transform: scale(1.12) rotate( 7deg); filter: drop-shadow(0 0 28px #aa00ff) drop-shadow(0 0 62px rgba(170,0,255,0.6)); }
      100% { transform: scale(1)    rotate(-8deg); filter: drop-shadow(0 0 20px #ff0080) drop-shadow(0 0 50px rgba(255,0,128,0.5)); }
    }
    @keyframes shimmer-rainbow {
      0%   { background-position: 300% center; }
      100% { background-position: -300% center; }
    }
    @keyframes gold-card-throb {
      0%, 100% { box-shadow: 0 0 0 4px rgba(255,215,0,0.4),  0 0 0 10px rgba(255,215,0,0.15), 0 0 0 20px rgba(255,215,0,0.06), 0 32px 90px rgba(0,0,0,0.42); }
      50%       { box-shadow: 0 0 0 7px rgba(255,215,0,0.65), 0 0 0 16px rgba(255,215,0,0.28), 0 0 0 32px rgba(255,215,0,0.10), 0 32px 90px rgba(0,0,0,0.42); }
    }

    /* ── shared keyframes ── */
    @keyframes icon-bounce {
      0%   { transform: scale(0.3) translateY(30px); opacity: 0; }
      70%  { transform: scale(1.12) translateY(-8px); opacity: 1; }
      100% { transform: scale(1) translateY(0); opacity: 1; }
    }
    @keyframes icon-bounce-big {
      0%   { transform: scale(0.2) translateY(40px); opacity: 0; }
      65%  { transform: scale(1.18) translateY(-12px); opacity: 1; }
      85%  { transform: scale(0.95) translateY(4px); }
      100% { transform: scale(1) translateY(0); opacity: 1; }
    }
    @keyframes card-shake {
      10%, 90%  { transform: translateX(-3px) rotate(-0.4deg); }
      20%, 80%  { transform: translateX(5px)  rotate(0.5deg); }
      30%, 50%, 70% { transform: translateX(-6px) rotate(-0.5deg); }
      40%, 60%  { transform: translateX(6px)  rotate(0.4deg); }
      100%      { transform: translateX(0) rotate(0); }
    }
    @keyframes card-shake-hard {
      8%,92%    { transform: translateX(-5px)  rotate(-0.7deg); }
      18%,82%   { transform: translateX(8px)   rotate(0.8deg); }
      28%,52%,72%{ transform: translateX(-10px) rotate(-0.9deg); }
      40%,62%   { transform: translateX(10px)  rotate(0.8deg); }
      100%      { transform: translateX(0) rotate(0); }
    }
    @keyframes card-shake-wild {
      6%  { transform: translateX(-8px)  rotate(-1.2deg) scale(1.01); }
      14% { transform: translateX(12px)  rotate( 1.4deg) scale(0.99); }
      22% { transform: translateX(-14px) rotate(-1.5deg) scale(1.02); }
      30% { transform: translateX(14px)  rotate( 1.5deg) scale(0.98); }
      40% { transform: translateX(-12px) rotate(-1.2deg) scale(1.01); }
      52% { transform: translateX(10px)  rotate( 1.0deg) scale(1.00); }
      64% { transform: translateX(-8px)  rotate(-0.8deg); }
      76% { transform: translateX(6px)   rotate( 0.6deg); }
      88% { transform: translateX(-4px)  rotate(-0.3deg); }
      100%{ transform: translateX(0) rotate(0) scale(1); }
    }
    @keyframes shimmer {
      0%   { background-position: 250% center; }
      100% { background-position: -250% center; }
    }

    .medal-pop-icon{
      font-size: 4.2rem;
      line-height: 1;
      margin-top: 4px;
      margin-bottom: 10px;
      display: inline-block;
      transform-origin: center;
    }
    .medal-pop-title{
      margin: 0;
      color: #5f3e06;
      font-size: 1.42rem;
      font-weight: 840;
    }
    .medal-pop-body{
      margin-top: 10px;
      color: #6b4b15;
      line-height: 1.45;
      font-size: 1.05rem;
    }
    .medal-pop-body .line{
      display: block;
      margin-bottom: 5px;
      font-weight: 630;
    }
    .medal-pop-modal .modal-actions{
      justify-content: center;
      margin-top: 16px;
    }
    .medal-pop-btn{
      min-width: 180px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid #d7b065;
      background: #f8d98d;
      color: #4e3408;
      font-weight: 740;
      cursor: pointer;
    }
    .medal-pop-btn:hover{ background: #f5cf76; }

    /* screen flash overlays */
    .screen-flash{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 139;
      animation: flash-fade var(--flash-dur, 0.7s) ease-out forwards;
    }
    @keyframes flash-fade{
      0%   { opacity: 1; }
      100% { opacity: 0; }
    }
    /* gold rainbow viewport border */
    .rainbow-border{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 138;
      border: 6px solid transparent;
      border-radius: 0;
      background: linear-gradient(#0000,#0000) padding-box,
                  linear-gradient(90deg,#ff0000,#ff8800,#ffdd00,#00ff88,#00aaff,#aa00ff,#ff0000) border-box;
      background-size: 300% 100%;
      animation: rainbow-border-scroll 1s linear infinite, flash-fade 3s ease-out forwards;
    }
    @keyframes rainbow-border-scroll{
      0%  { background-position: 300% 0; }
      100%{ background-position: -300% 0; }
    }

    .confetti-layer{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 140;
      overflow: hidden;
    }
    .confetti-piece{
      position: absolute;
      border-radius: 2px;
      opacity: 0.92;
      animation: confetti-fall linear forwards;
      will-change: transform, opacity;
    }
    .confetti-piece.star{
      border-radius: 0;
      clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    }
    .confetti-piece.circle{ border-radius: 50%; }
    .confetti-piece.rise{ animation-name: confetti-rise; }
    @keyframes confetti-fall{
      0%  { transform: translate3d(0,-18px,0) rotate(0deg); opacity:.95; }
      100%{ transform: translate3d(var(--dx,0px),105vh,0) rotate(var(--rot,540deg)); opacity:0; }
    }
    @keyframes confetti-rise{
      0%  { transform: translate3d(0,105vh,0) rotate(0deg); opacity:.92; }
      100%{ transform: translate3d(var(--dx,0px),-20vh,0) rotate(var(--rot,-540deg)); opacity:0; }
    }

    table { width:100%; border-collapse: collapse; margin-top: 8px; }
    th, td { padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,0.10); text-align:left; }
    th { color: rgba(255,255,255,0.70); font-weight: 650; }
    td { color: rgba(255,255,255,0.90); }
    .right { text-align:right; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

    .rowgap { gap: 10px; }

    .menuBtn { white-space: nowrap; }
    .filters-panel {
      margin-top: 10px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      display: grid;
      gap: 10px;
    }
    .filters-panel.collapsed { display: none; }
    .filter-modal-card{
      width: min(780px, 100%);
      color-scheme: light;
    }
    .filter-modal-card .label{
      color: #35506d;
    }
    .filter-modal-card select{
      -webkit-appearance: none;
      appearance: none;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2335506d' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
      background-size: 10px 6px;
      color: #203247;
      border-color: #c8dbf2;
      color-scheme: light;
    }
    .filter-modal-card select option{
      background: #fff;
      color: #203247;
    }
    .filter-modal-card button{
      background: #eaf3ff;
      color: #1f344b;
      border-color: #c8dbf2;
    }
    .filter-modal-card button:hover{
      background: #e1eeff;
    }
    .filter-stack{
      display: grid;
      gap: 8px;
    }
    .filter-mode-row{
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .filter-mode-label{
      font-size: 0.8rem;
      font-weight: 700;
      color: #35506d;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .mode-switch{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .mode-btn{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 10px 6px 8px;
      border: 1.5px solid #c8dbf2;
      border-radius: 10px;
      background: #f9fcff;
      color: #35506d;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
      text-align: center;
    }
    .mode-btn:hover:not(:disabled){
      border-color: rgba(123,108,246,0.5);
      background: #f0ebff;
    }
    .mode-btn.active{
      border-color: #7B6CF6;
      background: #ede9fe;
      color: #4c1d95;
    }
    .mode-btn:disabled{
      opacity: 0.45;
      cursor: not-allowed;
    }
    .mode-btn-icon{
      font-size: 1.25rem;
      line-height: 1;
    }
    .mode-btn-name{
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .mode-btn-desc{
      font-size: 0.7rem;
      color: #6b7a90;
      line-height: 1.25;
    }
    .mode-btn.active .mode-btn-desc{
      color: #6d28d9;
    }
    .mode-info-box{
      background: #eef4ff;
      border: 1px solid #c8dbf2;
      border-radius: 9px;
      padding: 9px 12px;
      font-size: 0.82rem;
      color: #35506d;
      line-height: 1.5;
    }
    .mode-info-box.trouble{
      background: #f5f0ff;
      border-color: rgba(123,108,246,0.3);
      color: #4c1d95;
    }
    .filter-actions{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .filter-actions.bottom{
      margin-top: 4px;
    }
    .filter-search-wrap{
      position: relative;
      width: 100%;
    }
    .filter-modal-card .filter-search{
      width: 100%;
      padding: 8px 34px 8px 10px;
      border-radius: 9px;
      border: 1px solid rgba(140,170,205,0.5);
      background: #fff;
      color: #223851;
      outline: none;
      box-sizing: border-box;
    }
    .filter-modal-card .filter-search:focus{
      border-color: rgba(123,108,246,0.55);
      box-shadow: 0 0 0 4px rgba(123,108,246,0.12);
    }
    .filter-search-clear{
      display: none;
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border: none;
      background: rgba(123,108,246,0.12);
      color: #7B6CF6;
      border-radius: 50%;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
    }
    .filter-search-clear:hover{
      background: rgba(123,108,246,0.25);
    }
    .filter-sets{
      height: 220px;
      overflow: auto;
    }
    .filter-modal-card .filter-sets{
      background: #ffffff;
      border: 1px solid #c8dbf2;
      border-radius: 10px;
      padding: 8px;
    }
    .filter-modal-card .filter-sets label{
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      margin: 0 0 6px 0;
      padding: 6px 8px;
      border: 1px solid #d6e5f7;
      border-radius: 8px;
      background: #f9fcff;
      color: #1f344b;
      font-size: 0.93rem;
      line-height: 1.25;
    }
    .filter-modal-card .filter-sets label:last-child{
      margin-bottom: 0;
    }
    .filter-modal-card .filter-sets label:has(input:checked){
      background: #ede9fe;
      border-color: #a78bfa;
      color: #3b1fa8;
    }
    .filter-modal-card .filter-sets label span{
      color: #4c627b;
    }
    .tipbtn{
      min-width: 120px;
    }
    .start-toggle{
      min-width: 132px;
    }
    .run-toggle{
      min-width: 190px;
      font-weight: 700;
    }
    .run-toggle.state-start,
    .run-toggle.state-resume{
      background: var(--green-bg);
      border-color: var(--green-border);
      color: var(--green-text);
    }
    .run-toggle.state-start:hover,
    .run-toggle.state-resume:hover{
      background: var(--green-bg-hover);
    }
    .run-toggle.state-pause{
      background: var(--yellow-bg);
      border-color: var(--yellow-border);
      color: var(--yellow-text);
    }
    .run-toggle.state-pause:hover{
      background: var(--yellow-bg-hover);
    }
    .run-stop-btn{
      min-width: 110px;
      background: var(--red-bg);
      border-color: var(--red-border);
      color: var(--red-text);
      font-weight: 700;
    }
    .run-stop-btn:hover{
      background: var(--red-bg-hover);
    }
    .lesson-clock{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      min-width: 84px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid #c8dbf2;
      background: #f5faff;
      color: #35506d;
      font-size: 0.86rem;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .trouble-on{
      background: #fff0cf !important;
      border-color: #e9c880 !important;
      color: #6c490c !important;
      font-weight: 700;
    }
    /* ── Help panel content (dark theme) ── */
    #helpBody .help-section{
      margin-top: 24px;
    }
    #helpBody .help-section:first-child{
      margin-top: 4px;
    }
    .help-section-title{
      display: flex;
      align-items: center;
      gap: 7px;
      font-weight: 700;
      font-size: 0.97rem;
      color: rgba(255,255,255,0.95);
      margin-bottom: 8px;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .help-list{
      margin: 0 0 0 18px;
      padding: 0;
      color: rgba(255,255,255,0.75);
      line-height: 1.65;
    }
    .help-list li{
      margin-bottom: 6px;
    }
    #helpBody strong{
      color: #c4b5fd;
      background: rgba(123,108,246,0.18);
      padding: 1px 5px;
      border-radius: 4px;
      font-weight: 700;
    }
    .help-callout{
      margin-top: 10px;
      padding: 10px 14px;
      border-radius: 9px;
      border-left: 3px solid rgba(70,220,150,0.55);
      background: rgba(70,220,150,0.08);
      color: rgba(255,255,255,0.80);
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .help-callout.warn{
      border-left-color: rgba(255,200,70,0.55);
      background: rgba(255,200,70,0.08);
    }
    .filters-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .tipbox {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(121, 181, 255, 0.14);
      color: rgba(255,255,255,0.92);
      display: none;
    }
    .menu-wrap { position: relative; }
    .top-menu-dropdown{
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      min-width: 180px;
      display: none;
      background: rgba(14, 26, 43, 0.96);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 12px;
      box-shadow: 0 12px 34px rgba(0,0,0,.35);
      padding: 6px;
      z-index: 40;
    }
    .top-menu-dropdown.open{ display: block; }
    .top-menu-item{
      width: 100%;
      text-align: left;
      border-radius: 8px;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,0.92);
      padding: 9px 10px;
      cursor: pointer;
      font-size: .95rem;
      text-decoration: none;
      display: block;
    }
    .top-menu-item:hover{ background: rgba(255,255,255,0.09); }
    .overlay-modal{
      position: fixed;
      inset: 0;
      background: rgba(8,14,24,0.56);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
      padding: 16px;
    }
    .overlay-modal.open{ display: flex; }
    .modal-card{
      width: min(760px, 100%);
      max-height: 90vh;
      overflow-y: auto;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.16);
      background: #f4f9ff;
      color: #21364d;
      color-scheme: light;
      padding: 14px;
      box-shadow: 0 20px 46px rgba(0,0,0,0.35);
    }
    .modal-title{
      margin: 0;
      font-size: 1.1rem;
      color: #1b3249;
    }
    .modal-body{
      margin-top: 10px;
      color: #35506d;
      line-height: 1.45;
    }
    .modal-body strong{
      color: #1b3249;
      background: rgba(33,54,77,0.09);
      padding: 1px 5px;
      border-radius: 4px;
      font-weight: 700;
    }
    .modal-actions{
      position: sticky;
      bottom: 0;
      background: #f4f9ff;
      padding-top: 12px;
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
    }
    @media (max-width: 820px) {
      .filters-row { grid-template-columns: 1fr; }
      .achievements-grid{ grid-template-columns: 1fr; }
      .time-stats-grid{ grid-template-columns: 1fr; }
      .quiz-layout{ grid-template-columns: 1fr; }
      .quiz-control-row{
        padding: 12px;
      }
      .quiz-primary-actions button,
      .quiz-run-row button{
        flex: 1 1 180px;
      }
      .lesson-clock{
        flex: 1 1 120px;
      }
      .quiz-run-row .mastery-pill{
        flex: 1 1 180px;
      }
    }
  
/* ===== Design polish ===== */

/* Table row hover */
tbody tr {
  transition: background .12s ease;
}
tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

/* Achievement medal hover lift */
.achievement-medal {
  transition: transform .15s ease, box-shadow .15s ease;
}
.achievement-medal:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

/* Lesson badge in quiz card */
.quiz-card .lesson-badge {
  transition: background .15s ease;
  margin: 0;
}

/* Solution box animation */
.solution {
  animation: fadeSlideIn .22s cubic-bezier(.22,.68,0,1.2) forwards;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Question box slight shadow on focus-within */
.quiz-card .question-box {
  transition: box-shadow .15s ease;
}
.quiz-card:focus-within .question-box {
  box-shadow: 0 8px 24px rgba(123,108,246,0.16);
}

/* Smoother card load */
.card {
  animation: cardFadeIn .22s ease both;
}
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Admin panel ===== */
.admin-add-form {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.admin-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admin-add-row input[type=text],
.admin-add-row input[type=password] {
  flex: 1;
  min-width: 130px;
}
.admin-role-checks {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-role-checks label {
  font-size: .8rem;
  color: #a8c0d8;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-roles-cell {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-role-check {
  font-size: .8rem;
  color: #a8c0d8;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-test-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-delete-btn {
  background: rgba(220, 80, 80, 0.18);
  color: #f08080;
  border: 1px solid rgba(220, 80, 80, 0.3);
}
.admin-delete-btn:hover {
  background: rgba(220, 80, 80, 0.32);
}

/* ===== Compact stats strip ===== */
.compact-stats-card { padding: 10px 14px; }
.compact-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.cstat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  gap: 2px;
}
.cstat-label {
  font-size: .72rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.cstat-value {
  font-size: 1.25rem;
  font-weight: 750;
  color: #e8eeff;
  line-height: 1.1;
}
.cstat-value[data-trend="up"]   { color: #6ee7a0; }
.cstat-value[data-trend="down"] { color: #f08080; }
.cstat-sub {
  font-size: .7rem;
  color: rgba(255,255,255,0.38);
  text-align: center;
  white-space: nowrap;
}
.cstat-divider {
  width: 1px;
  background: rgba(255,255,255,0.10);
  margin: 4px 0;
  align-self: stretch;
}
@media (max-width: 520px) {
  .compact-strip { flex-wrap: wrap; }
  .cstat { min-width: 45%; }
  .cstat-divider { display: none; }
}

/* ===== Achievements detailed stats ===== */
.ach-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .ach-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.vocab-prog-track {
  margin-top: 6px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.vocab-prog-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #6b8cff, #4caf7d);
  transition: width .6s ease;
  width: 0%;
}

/* ===== Sparkline ===== */
.sparkline-section {
  margin-top: 16px;
  margin-bottom: 4px;
}
.sparkline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sparkline-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: rgba(255,255,255,0.45);
}
.spark-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 2px;
}
.sparkline-wrap {
  width: 100%;
  min-height: 72px;
}
.sparkline-wrap svg { overflow: visible; }

/* ===== Section divider ===== */
.section-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 18px 0 14px;
}