/*
  style.css — Styles for every page in this project.

  Rough order from top to bottom:
  1) Color variables and basic page look
  2) Top header, page title area, card layout
  3) User menu, result screen, history screen
  4) Login / register screen
  5) Quiz screen and pop-up
  6) Admin dashboard, quizzes, and modals
  7) Rules for phones and small windows (uses Flexbox; media queries at 768px and below)

  Units: rem, %, and min() are used so layouts can shrink on small screens.
*/

:root{
  --primary:#2B5CE6;
  --primary-2:#1f3f9b;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e6eaf2;
}

*{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  font-family: Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Top header: logo on the left, user menu on the right, wraps on small screens */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
}

.site-header .inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px min(20px, 4vw);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  row-gap:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  min-width:0;
}

.brand img{
  height:36px;
  width:auto;
  display:block;
}

.site-nav a{
  text-decoration:none;
  color:var(--primary);
  font-weight:800;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(43,92,230,0.25);
  background:#fff;
}

.site-nav a:hover{
  background:rgba(43,92,230,0.08);
}

/* Main page area: centered, with big title and subtitle text */
.page{
  max-width:1100px;
  margin:0 auto;
  padding:28px min(20px, 4vw) 36px;
  min-width:0;
}

.page h1{
  margin:0;
  font-size:38px;
  letter-spacing:-0.02em;
  text-align:center;
}

.page .page-subtitle{
  margin:10px auto 0;
  max-width:720px;
  text-align:center;
  color:var(--muted);
  line-height:1.5;
}

.subject-welcome{
  margin:18px auto 0;
  max-width:860px;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
}

.subject-welcome__avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:15px;
  letter-spacing:0.3px;
  flex-shrink:0;
}

.subject-welcome__content{
  min-width:0;
  flex:1;
}

.subject-welcome__greeting{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

.subject-welcome__hint{
  margin:4px 0 0;
  font-size:14px;
  color:var(--muted);
}

.subject-welcome__meta{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.subject-welcome__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
}

.subject-welcome__value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(43, 92, 230, 0.12);
  color:var(--primary);
  font-size:13px;
  font-weight:700;
}

/* Cards in a grid: three across on a wide screen, fewer on a narrow screen */
.card-container{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 25px rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  min-height:190px;
  transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(15,23,42,0.10);
  border-color:rgba(43,92,230,0.35);
}

.card-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(43,92,230,0.08);
  margin-bottom:14px;
}

.card-icon svg{
  width:22px;
  height:22px;
  stroke:var(--primary);
}

.card h2{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.card p{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.4;
  font-size:13.5px;
}

.card .card-button{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:12px 14px;
  border-radius:10px;
  background:#2B5CE6;
  color:#fff;
  font-weight:900;
  box-shadow:none;
}

.card .card-button:hover{
  filter:brightness(1.03);
}

/* Subject page — space between description and Select Subject button */
.page-subject .card p{
  margin-bottom:16px;
}

/* Buttons used in cards/result pages */
.card-container a{ text-decoration:none; }

.card-container button,
.result-box button{
  border:none;
  cursor:pointer;
  font-family:inherit;
  padding:12px 14px;
  border-radius:10px;
  background:#2B5CE6;
  color:#fff;
  font-weight:900;
  box-shadow:none;
  transition: filter 120ms ease, transform 120ms ease;
}

.card-container button:hover,
.result-box button:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
  box-shadow:none;
}

.back-link{
  border:none;
  cursor:pointer;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-weight:800;
}

/* Result screen (older/simple result block; some pages use .result-card instead) */
.result-box{
  max-width:520px;
  margin:20px auto 0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:0 10px 25px rgba(15,23,42,0.06);
}

.result-box p{
  margin:8px 0;
  color:var(--muted);
  font-weight:700;
}

/* Topic cards: user pill in header, meta row under card text */
.user-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(2,132,199,0.0);
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,0.04);
  border-color:rgba(15,23,42,0.08);
}

.user-avatar{
  width:28px;
  height:28px;
  border-radius:10px;
  background:rgba(43,92,230,0.12);
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:12px;
}

.user-name{
  font-weight:900;
  font-size:13px;
  color:#0f172a;
}

.user-caret{
  color:#64748b;
  font-weight:900;
  font-size:12px;
}

.user-caret--chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:18px;
  height:18px;
  line-height:0;
}

.user-caret--chevron svg{
  width:14px;
  height:14px;
  display:block;
  transition:transform 160ms ease;
}

.user-menu.is-open .user-caret--chevron svg{
  transform:rotate(180deg);
}

.user-menu{
  position:relative;
}

button.user-pill{
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-align:left;
}

.user-menu__dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:168px;
  max-width:min(260px, calc(100vw - 24px));
  padding:6px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.1);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,0.12);
  z-index:100;
}

.user-menu__dropdown[hidden]{
  display:none !important;
}

.user-menu__item{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  font-weight:800;
  font-size:13px;
  color:#0f172a;
  text-decoration:none;
}

.user-menu__item:hover{
  background:rgba(43,92,230,0.08);
  color:var(--primary);
}

.user-menu__item:focus-visible{
  outline:2px solid rgba(43,92,230,0.35);
  outline-offset:2px;
}

.meta-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 18px;
  margin-top:12px;
  margin-bottom:10px;
}

/* Topics page — clearer gap between meta row and Start Quiz button */
.page-topics .meta-row{
  margin-bottom:16px;
}

.meta-item{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-weight:800;
  font-size:12.5px;
}

.meta-item svg{
  width:16px;
  height:16px;
  stroke:var(--primary);
}

.prev-row{
  margin-top:22px;
  display:flex;
  justify-content:flex-start;
}

.prev-link{
  margin-top:0;
}

/* Quiz result page layout: full height, header actions, result card */
.result-page{
  min-height:100vh;
}

.result-main{
  padding-top:26px;
}

.result-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.action-primary{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  font-weight:900;
  color:#fff;
  background:#2B5CE6;
  box-shadow:none;
}

.action-primary:hover{
  filter:brightness(1.03);
}

.action-primary--fill{
  min-width:190px;
  justify-content:center;
}

.result-card{
  max-width:560px;
  margin:18px auto 0;
  background:#fff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:20px;
  padding:26px 22px 22px;
  box-shadow:0 22px 60px rgba(15,23,42,0.10);
}

.result-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 8px;
  color:#2B5CE6;
  background:rgba(43,92,230,0.08);
  border-radius:16px;
}

.result-hero svg{
  width:28px;
  height:28px;
}

.result-title{
  text-align:center;
  margin:8px 0 4px;
  font-size:28px;
  letter-spacing:-0.02em;
}

.result-subtitle{
  margin:0 auto 20px;
  max-width:430px;
  text-align:center;
  color:var(--muted);
  line-height:1.5;
  font-weight:700;
  font-size:13.5px;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.stat-box{
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:14px;
  padding:16px 12px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.stat-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

.stat-icon svg{
  width:20px;
  height:20px;
}

.stat-icon--blue{
  color:#2B5CE6;
  background:rgba(43,92,230,0.10);
}

.stat-icon--green{
  color:#16a34a;
  background:rgba(22,163,74,0.10);
}

.stat-icon--red{
  color:#dc2626;
  background:rgba(220,38,38,0.10);
}

.stat-value{
  font-size:18px;
  font-weight:1000;
  color:#0f172a;
}

.stat-label{
  margin-top:4px;
  font-weight:900;
  color:var(--muted);
  font-size:12.5px;
  text-align:center;
}

.time-row{
  margin-top:16px;
  border:1px solid rgba(15,23,42,0.06);
  background:#f7f9ff;
  border-radius:14px;
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.time-left{
  display:flex;
  align-items:center;
  gap:10px;
  color:#334155;
  font-weight:1000;
}

.time-icon{
  width:26px;
  height:26px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#334155;
  background:rgba(2,132,199,0.10);
}

.time-icon svg{
  width:16px;
  height:16px;
}

.time-label{
  font-weight:1000;
  font-size:12.5px;
  color:#64748b;
}

.time-value{
  font-weight:1000;
  color:#1f3f9b;
  font-size:13px;
}

.result-actions{
  margin-top:16px;
  display:flex;
  gap:14px;
  align-items:center;
}

.result-actions .result-back{
  margin-top:0;
  flex:1;
  justify-content:center;
}

.result-actions .action-primary--fill{
  flex:1;
}

.result-actions a{
  text-decoration:none;
}

/* Wide but not full screen: use two columns of cards instead of three */
@media (max-width: 980px){
  .card-container{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .page h1{ font-size:30px; }
  .stat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Narrow screens: one column of cards */
@media (max-width: 768px){
  .card-container{
    grid-template-columns:1fr;
  }
}

@media (max-width: 620px){
  .site-header .inner{ padding:12px min(14px, 4vw); }
  .page{ padding:22px min(14px, 4vw) 30px; }
  .card-container{ grid-template-columns:1fr; gap:16px; }
  .page h1{ font-size:26px; }

  .stat-grid{ grid-template-columns:1fr; }
  .result-actions{ flex-direction:column; }
  .action-primary--fill{ min-width:0; width:100%; }

  .result-header-actions,
  .history-header-actions,
  .subject-header-actions{
    width:100%;
    justify-content:flex-start;
  }

  .user-pill .user-name{
    max-width:42vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .result-card{ padding:20px min(16px, 4vw); }
  .result-title{ font-size:22px; }
}

@media (max-width: 480px){
  .page h1{ font-size:22px; }
  .breadcrumb{ flex-wrap:wrap; row-gap:4px; }
  .time-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .time-value{ align-self:flex-end; }
  .create-quiz{ padding:10px 12px; font-size:12.5px; }
}

/* History page */
.history-page{
  background:#f5f7fb;
}

.history-header-actions,
.subject-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.create-quiz{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#fff;
  font-weight:900;
  box-shadow:none;
}

.breadcrumb{
  color:#64748b;
  font-weight:900;
  font-size:12.5px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.breadcrumb-sep{
  color:#94a3b8;
  font-size:14px;
}

.breadcrumb-link{
  color:inherit;
  text-decoration:none;
}

.breadcrumb-link:hover{
  color:#334155;
  text-decoration:underline;
}

.breadcrumb-link:focus-visible{
  outline:2px solid rgba(43,92,230,0.45);
  outline-offset:2px;
  border-radius:4px;
}

/* Profile page: big title on the left with space below before the profile box */
.history-main h1.history-title{
  margin:10px 0 28px;
  font-size:30px;
  letter-spacing:-0.02em;
  font-weight:1000;
  text-align:left;
}

.profile-card{
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:16px;
  padding:18px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.profile-avatar{
  width:56px;
  height:56px;
  border-radius:18px;
  background:rgba(37,99,235,0.08);
  color:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
}

.profile-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.profile-name{
  font-weight:1000;
  font-size:16px;
}

.profile-email{
  color:#64748b;
  font-weight:800;
  font-size:13px;
}

.history-stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.stat-tile{
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:14px;
  padding:16px 14px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.stat-tile-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

.stat-tile-icon svg{
  width:18px;
  height:18px;
  stroke:currentColor;
}

.stat-tile-icon--blue{
  color:#2563eb;
  background:rgba(37,99,235,0.10);
}

.stat-tile-icon--blue2{
  color:#2563eb;
  background:rgba(37,99,235,0.08);
}

.stat-tile-icon--star{
  color:#f59e0b;
  background:rgba(245,158,11,0.10);
}

.stat-tile-value{
  font-weight:1000;
  font-size:22px;
  color:#0f172a;
  line-height:1.1;
  margin-bottom:4px;
}

.stat-tile-label{
  color:#64748b;
  font-weight:900;
  font-size:12.5px;
}

.history-quizzes{
  margin-top:18px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:16px;
  padding:16px 16px 18px;
  box-shadow:0 12px 30px rgba(15,23,42,0.03);
}

.history-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

.history-section-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.history-section-title{
  margin:0;
  font-size:16px;
  font-weight:1000;
  color:#0f172a;
}

.history-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  background:#f1f5ff;
  color:#2563eb;
  font-weight:1000;
  font-size:12px;
}

.history-section-subtitle{
  margin:0 0 14px;
  color:#64748b;
  font-weight:800;
  font-size:13px;
}

.attempt-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.attempt-row{
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:14px;
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.attempt-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.attempt-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.attempt-icon svg{
  width:20px;
  height:20px;
}

.attempt-icon--math{ color:#2563eb; background:rgba(37,99,235,0.10); }
.attempt-icon--code{ color:#2563eb; background:rgba(37,99,235,0.10); }
.attempt-icon--english{ color:#2563eb; background:rgba(37,99,235,0.10); }
.attempt-icon--computer{ color:#2563eb; background:rgba(37,99,235,0.10); }

.attempt-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.attempt-subject{
  font-weight:1000;
  color:#0f172a;
  font-size:14px;
}

.attempt-meta{
  color:#64748b;
  font-weight:900;
  font-size:12.5px;
  display:flex;
  align-items:center;
  gap:8px;
}

.meta-dot{
  color:#94a3b8;
}

.attempt-score{
  text-align:right;
  flex:0 0 auto;
}

.attempt-score-label{
  color:#64748b;
  font-weight:900;
  font-size:12.5px;
}

.attempt-score-value{
  font-weight:1000;
  font-size:16px;
  color:#16a34a;
}

.attempt-score-value--wrong{
  color:#dc2626;
}

.history-page .attempt-score .attempt-score-value.attempt-score-value--wrong{
  color:#dc2626;
}

.history-pagination{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.history-page-link{
  text-decoration:none;
  color:#0f172a;
  font-weight:1000;
  font-size:13px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.06);
  background:#fff;
}

.history-page-numbers{
  display:flex;
  align-items:center;
  gap:10px;
}

.history-page-btn{
  width:36px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
  color:#334155;
}

.history-page-btn--active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.history-page-btn--muted{
  border:none;
  background:transparent;
  width:auto;
  padding:0 6px;
  color:#94a3b8;
}

@media (max-width: 980px){
  .history-stats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .history-pagination{ flex-direction:column; align-items:flex-start; }
  .history-page-numbers{ width:100%; justify-content:center; }
}

@media (max-width: 560px){
  .history-main h1.history-title{ font-size:24px; }
  .profile-card{ padding:14px 12px; }
  .history-stats-grid{ grid-template-columns:1fr; }
  .attempt-row{ flex-direction:column; align-items:flex-start; }
  .attempt-score{ text-align:left; }
}

/* ----- Admin dashboard (sidebar + main + table) ----- */
.admin-dashboard{
  display:flex;
  min-height:100vh;
  margin:0;
  background:var(--bg);
}

.admin-sidebar{
  width:260px;
  flex-shrink:0;
  background:#1e3a8a;
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:22px 16px 20px;
  box-sizing:border-box;
}

.admin-sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}

.admin-sidebar-brand img{
  height:44px;
  width:auto;
  max-width:min(100%, 200px);
  display:block;
  object-fit:contain;
  object-position:left center;
}

.admin-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.admin-nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  color:rgba(255,255,255,0.88);
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  transition:background 0.15s ease;
}

.admin-nav-link svg{
  width:20px;
  height:20px;
  flex-shrink:0;
  opacity:0.95;
}

.admin-nav-link:hover{
  background:rgba(255,255,255,0.08);
  color:#fff;
}

.admin-nav-link--active{
  background:rgba(255,255,255,0.18);
  color:#fff;
}

.admin-sidebar-footer{
  margin-top:auto;
  padding-top:28px;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.72);
  line-height:1.45;
}

.admin-dashboard-main{
  flex:1;
  min-width:0;
  padding:22px min(24px, 4vw) 40px;
}

.admin-dashboard-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:22px;
}

.admin-dashboard-title{
  margin:0;
  font-size:28px;
  font-weight:1000;
  letter-spacing:-0.02em;
  color:var(--text);
}

.admin-dashboard-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.admin-dashboard-stats{
  margin-bottom:20px;
}

.admin-table-panel{
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 12px 30px rgba(15,23,42,0.04);
}

/* Dashboard results table — same body/header text treatment as admin-quizzes */
.admin-dashboard .admin-table--dashboard-results th{
  padding:14px 12px;
  color:#94a3b8;
  font-weight:800;
  font-size:12px;
  letter-spacing:0.01em;
}

.admin-dashboard .admin-table--dashboard-results td{
  padding:22px 12px;
  font-weight:400;
  font-size:14px;
  color:#0f172a;
  vertical-align:middle;
}

.admin-dashboard .admin-table--dashboard-results .admin-user-name{
  font-weight:400;
  color:#0f172a;
  font-size:14px;
}

.admin-dashboard .admin-table--dashboard-results .admin-user-email{
  font-weight:400;
  color:#64748b;
}

.admin-table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.admin-toolbar-tools{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.admin-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.admin-search-icon{
  position:absolute;
  left:12px;
  color:#94a3b8;
  display:flex;
  pointer-events:none;
}

.admin-search-input{
  width:min(220px, 42vw);
  padding:10px 12px 10px 38px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:13px;
  font-family:inherit;
  font-weight:700;
  color:var(--text);
  background:#fff;
  outline:none;
}

.admin-search-input::placeholder{
  color:#94a3b8;
}

.admin-search-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(43,92,230,0.15);
}

.admin-filter-select{
  padding:10px 32px 10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:13px;
  font-weight:400;
  font-family:inherit;
  color:var(--text);
  background:#fff;
  cursor:pointer;
}

.admin-table-scroll{
  overflow-x:auto;
  margin:0 -4px;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.admin-table th{
  text-align:left;
  padding:12px 10px;
  color:#64748b;
  font-weight:900;
  font-size:12px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

.admin-table td{
  padding:14px 10px;
  border-bottom:1px solid rgba(15,23,42,0.06);
  color:var(--text);
  font-weight:800;
  vertical-align:middle;
}

.admin-table tbody tr:last-child td{
  border-bottom:none;
}

.admin-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.admin-user-cell{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:200px;
}

.admin-user-avatar{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(37,99,235,0.12);
  color:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:11px;
  flex-shrink:0;
}

.admin-user-name{
  font-weight:1000;
  color:var(--text);
  font-size:14px;
}

.admin-user-email{
  font-size:12px;
  color:#64748b;
  font-weight:800;
  margin-top:2px;
}

.admin-score-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:7px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border:1px solid transparent;
  box-sizing:border-box;
  line-height:1.2;
}

.admin-score-pill--high{
  background:#f0fdf4;
  color:#15803d;
  border-color:#86efac;
}

.admin-score-pill--low{
  background:#fef2f2;
  color:#b91c1c;
  border-color:#fca5a5;
}

.admin-score-pill--neutral{
  background:#f8fafc;
  color:#64748b;
  border-color:#cbd5e1;
}

.admin-action-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  color:#64748b;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.admin-action-btn:hover{
  background:#f8fafc;
  color:#0f172a;
}

.admin-table-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.admin-page-info{
  font-size:13px;
  font-weight:900;
  color:#64748b;
}

.admin-page-arrows{
  display:flex;
  gap:12px;
}

.admin-arrow-btn{
  width:40px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  cursor:pointer;
  font-size:15px;
  font-weight:900;
  color:#334155;
  font-family:inherit;
}

.admin-arrow-btn--chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  line-height:0;
}

.admin-arrow-btn--chevron svg{
  flex-shrink:0;
  color:#475569;
}

.admin-arrow-btn:hover:not(:disabled){
  border-color:var(--primary);
  color:var(--primary);
}

.admin-arrow-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

/* Admin quizzes page: toolbar, question column, status & score badges */
.admin-table-toolbar--quizzes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}

.admin-table-toolbar--quizzes .history-section-left{
  flex:0 0 auto;
}

.admin-quizzes-toolbar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex-wrap:wrap;
  min-width:0;
}

.admin-search-input--quizzes{
  width:min(280px, 36vw);
}

.admin-quizzes-panel{
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 1px 3px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.04);
}

.admin-quizzes-section-title{
  color:#334155;
}

.admin-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-weight:800;
  font-size:12px;
}

.admin-quizzes-panel .admin-filter-select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  padding-right:38px;
}

.admin-table--all-questions .admin-th--wide{
  min-width:220px;
}

.admin-table--all-questions .admin-th--center,
.admin-table--all-questions .admin-td--center{
  text-align:left;
}

.admin-table--all-questions .admin-th--wide,
.admin-table--all-questions .admin-td--question{
  text-align:left;
}

.admin-table--all-questions .admin-th--actions,
.admin-table--all-questions .admin-td--actions{
  text-align:right;
  width:1%;
  white-space:nowrap;
}

.admin-table--all-questions .admin-td--question{
  vertical-align:top;
}

.admin-quizzes-panel .admin-table--all-questions th{
  padding:14px 12px;
  color:#94a3b8;
  font-weight:800;
  font-size:12px;
  letter-spacing:0.01em;
}

.admin-quizzes-panel .admin-table--all-questions td{
  padding:22px 12px;
  font-weight:400;
  color:#0f172a;
}

.admin-question-text{
  margin:0;
  max-width:min(560px, 72vw);
  font-size:14px;
  font-weight:400;
  line-height:1.55;
  color:#0f172a;
}

.admin-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-weight:1000;
  font-size:11px;
  white-space:nowrap;
}

.admin-status-pill--answers{
  background:#eff6ff;
  color:#2563eb;
}

.admin-status-pill--none{
  background:#f1f5f9;
  color:#64748b;
}

.admin-action-btn svg{
  display:block;
}

@media (max-width: 900px){
  .admin-table-toolbar--quizzes{
    flex-direction:column;
    align-items:stretch;
  }
  .admin-quizzes-toolbar-right{
    margin-left:0;
    justify-content:flex-start;
  }
  .admin-search-input--quizzes{
    flex:1 1 200px;
    width:auto;
    min-width:0;
  }
}

@media (max-width: 980px){
  .admin-dashboard-stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .admin-dashboard{
    flex-direction:column;
  }
  .admin-sidebar{
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    padding:16px;
    min-height:auto;
  }
  .admin-sidebar-brand{
    margin-bottom:0;
    flex:1;
    min-width:min(100%, 180px);
  }
  .admin-sidebar-nav{
    flex-direction:row;
    flex-wrap:wrap;
    width:100%;
    order:3;
    margin-top:12px;
  }
  .admin-sidebar-footer{
    margin-top:0;
    padding-top:0;
    width:100%;
    order:4;
    text-align:center;
  }
}

@media (max-width: 560px){
  .admin-dashboard-stats{
    grid-template-columns:1fr;
  }
  .admin-dashboard-title{
    font-size:22px;
  }
  .admin-table-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .admin-search-input{
    width:100%;
  }
}

/* --- Login / register page and quiz page (special layouts) --- */

body.auth-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:60px;
  background:#f3f4f6;
}

/* Auth page only */
.auth-page{
  width:100%;
}

.auth-page .page-wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Logo */
.auth-page .logo img{
  width:132px;
  margin-bottom:16px;
}

/* Card */
.auth-page .container{
  background:rgba(255,255,255,0.98);
  width:min(420px, 92vw);
  padding:32px;
  border-radius:16px;
  box-shadow:0 12px 35px rgba(17,24,39,0.12);
  border:1px solid rgba(43,92,230,0.08);
}

/* Title */
.auth-page h1{
  text-align:center;
  margin:0 0 6px;
  font-size:28px;
  letter-spacing:-0.02em;
  color:var(--text);
}

.auth-page .subtitle{
  text-align:center;
  color:#64748b;
  margin:0 0 18px;
  font-size:14px;
}

.auth-page .auth-header{
  margin-bottom:10px;
}

/* Tabs */
.auth-page .tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#eef2ff;
  border-radius:999px;
  padding:4px;
  gap:4px;
  margin-bottom:18px;
}

.auth-page .tab{
  padding:12px 0;
  border:none;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  font-weight:800;
  color:#334155;
  transition:background 160ms, box-shadow 160ms, transform 160ms, color 160ms;
}

.auth-page .tab.active{
  background:white;
  color:#0f172a;
  box-shadow:0 8px 22px rgba(15,23,42,0.10);
}

.auth-page .tab:focus-visible{
  outline:3px solid rgba(43,92,230,0.25);
  outline-offset:2px;
}

/* Form */
.auth-page label{
  display:block;
  margin-top:16px;
  margin-bottom:8px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}

.auth-page .form-control{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
  transition:border-color 120ms, box-shadow 120ms;
  font-size:14px;
}

.auth-page .form-control::placeholder{
  color:#94a3b8;
}

.auth-page .form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(43,92,230,0.15);
}

.auth-page .form-control.is-invalid{
  border-color:#dc2626;
  box-shadow:0 0 0 4px rgba(220,38,38,0.12);
}

.auth-page .form-control.is-invalid:focus{
  border-color:#dc2626;
  box-shadow:0 0 0 4px rgba(220,38,38,0.18);
}

.auth-page .field-error{
  margin:6px 0 0;
  min-height:0;
  font-size:12px;
  font-weight:700;
  color:#dc2626;
  line-height:1.35;
}

.auth-page .field-success{
  margin:6px 0 0;
  min-height:0;
  font-size:12px;
  font-weight:700;
  color:#16a34a;
  line-height:1.35;
}

.auth-page .field-error:empty{
  display:none;
}

.auth-page .input-with-action{
  position:relative;
}

.auth-page .input-with-action .form-control{
  padding-right:112px;
}

.auth-page .toggle-password{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:var(--primary);
  font-weight:900;
  cursor:pointer;
  padding:8px 10px;
  border-radius:8px;
}

.auth-page .toggle-password:hover{
  background:rgba(43,92,230,0.08);
}

/* Button — matches .card-button / .action-primary on other screens */
.auth-page .login-btn{
  width:100%;
  margin-top:22px;
  padding:12px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
  font-weight:900;
  font-family:inherit;
  box-shadow:none;
  transition:filter 120ms ease;
}

.auth-page .login-btn:hover{
  filter:brightness(1.03);
}

.auth-page .login-btn:active{
  filter:brightness(0.98);
}

/* Hide register form */
.auth-page .hidden{
  display:none;
}

/* Mobile Responsive — login / register */
@media (max-width: 640px){
  body.auth-page{
    margin-top:28px;
    padding-left:min(16px, 4vw);
    padding-right:min(16px, 4vw);
  }

  .auth-page .container{
    width:100%;
    max-width:420px;
  }
}

@media (max-width: 500px){
  .auth-page .container{
    padding:24px min(20px, 5vw);
    border-radius:14px;
  }

  .auth-page .logo img{
    width:110px;
  }

  .auth-page h1{
    font-size:24px;
  }
}

/* Admin login — same card, form, and page background as other auth pages; content starts from the top */
body.auth-page.admin-login-page{
  min-height:100vh;
  margin-top:36px;
  justify-content:flex-start;
  padding:16px min(16px, 4vw);
  box-sizing:border-box;
}

.admin-login-footer{
  text-align:center;
  margin:18px 0 0;
  font-size:13px;
  font-weight:700;
  color:#64748b;
}

.admin-login-footer a{
  color:var(--primary);
  text-decoration:none;
  font-weight:800;
}

.admin-login-footer a:hover{
  text-decoration:underline;
}

/* Quiz page — body.quiz-page is a flex column so the quiz layout can stretch on small screens */
.quiz-page{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background:#f3f4f8;
  min-height:100vh;
  margin-top:0;
  padding:18px 14px 42px;
}

.quiz-page .quiz-header{
  width:100%;
  max-width:1120px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  row-gap:10px;
  min-width:0;
}

.quiz-page .quiz-logo{
  height:36px;
  width:auto;
  display:block;
}

.quiz-page .quiz-header__right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:0;
  margin-left:auto;
}

.quiz-page .change-subject{
  border:none;
  background:#2B5CE6;
  color:#fff;
  font-weight:900;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  box-shadow:none;
}

.quiz-page .score-pill{
  background:#fff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color:#0f172a;
}

.quiz-page .score-pill--mobile{
  display:none;
}

.quiz-page .score-icon{
  color:#64748b;
}

.quiz-page .score-sep{
  color:#94a3b8;
}

.quiz-page .user-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.08);
}

.quiz-page .user-avatar{
  width:30px;
  height:30px;
  border-radius:12px;
  background:rgba(43,92,230,0.12);
  color:#2B5CE6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:12px;
}

.quiz-page .user-name{
  font-weight:900;
  font-size:13px;
  color:#0f172a;
}

.quiz-page .user-caret{
  color:#64748b;
  font-weight:900;
  font-size:12px;
}

.quiz-page .user-caret--chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:18px;
  height:18px;
  line-height:0;
}

.quiz-page .user-caret--chevron svg{
  width:14px;
  height:14px;
  display:block;
  transition:transform 160ms ease;
}

.quiz-page .user-menu.is-open .user-caret--chevron svg{
  transform:rotate(180deg);
}

.quiz-page .user-menu{
  position:relative;
}

.quiz-page button.user-pill{
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-align:left;
}

.quiz-page .user-menu__dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:168px;
  max-width:min(260px, calc(100vw - 24px));
  padding:6px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.1);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,0.12);
  z-index:100;
}

.quiz-page .user-menu__dropdown[hidden]{
  display:none !important;
}

.quiz-page .user-menu__item{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  font-weight:800;
  font-size:13px;
  color:#0f172a;
  text-decoration:none;
}

.quiz-page .user-menu__item:hover{
  background:rgba(43,92,230,0.08);
  color:#2B5CE6;
}

.quiz-page .user-menu__item:focus-visible{
  outline:2px solid rgba(43,92,230,0.35);
  outline-offset:2px;
}

.quiz-page .quiz-main{
  width:100%;
  max-width:1120px;
  margin:0 auto;
}

.quiz-page .quiz-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin:18px 0 18px;
}

.quiz-page .quiz-title h1{
  margin:0;
  font-size:34px;
  letter-spacing:-0.02em;
  color:#0f172a;
}

.quiz-page .quiz-subtitle{
  margin:6px 0 0;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
  max-width:650px;
}

.quiz-page .quiz-box{
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:16px;
  padding:clamp(16px, 4vw, 22px);
  box-shadow:0 10px 25px rgba(15,23,42,0.04);
  min-width:0;
}

.quiz-page .quiz-box h2{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#0f172a;
}

.quiz-page .quiz-box p{
  margin:8px 0 0;
  color:#334155;
  font-size:14px;
  line-height:1.5;
}

.quiz-page .options-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}

.quiz-page .quiz-option{
  cursor:pointer;
  position:relative;
  display:block;
  min-width:0;
}

.quiz-page .quiz-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.quiz-page .quiz-option .option-box{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 14px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  color:#0f172a;
  font-weight:900;
  transition:border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.quiz-page .quiz-option .option-letter{
  width:26px;
  color:#334155;
}

.quiz-page .quiz-option .option-text{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
}

.quiz-page .quiz-option input:checked ~ .option-box{
  border-color:rgba(37,99,235,0.55);
  background:rgba(37,99,235,0.06);
  /* Soft border inside the box so the highlight does not overlap the next cell */
  box-shadow:inset 0 0 0 1px rgba(37,99,235,0.25);
}

.quiz-page .feedback{
  margin-top:16px;
  padding:12px 14px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:13px;
  border:1px solid transparent;
  min-width:0;
}

.quiz-page .feedback-text{
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* Keep feedback hidden when the attribute says hidden */
.quiz-page .feedback[hidden]{
  display:none !important;
}

.quiz-page .feedback-icon{
  flex-shrink:0;
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.quiz-page .feedback-icon svg{
  display:none;
  width:100%;
  height:100%;
}

.quiz-page .feedback--success .feedback-icon__check,
.quiz-page .feedback--error .feedback-icon__cross{
  display:block;
}

.quiz-page .feedback--success{
  background:#ecfdf3;
  color:#16a34a;
  border-color:#bbf7d0;
}

.quiz-page .feedback--error{
  background:#fef2f2;
  color:#dc2626;
  border-color:#fecaca;
}

.quiz-page .question-actions{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.quiz-page .nav-link{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.12);
  background:#fff;
  color:#0f172a;
  font-weight:900;
  font-size:13px;
}

.quiz-page .skip-btn{
  border:none;
  background:transparent;
  cursor:pointer;
  color:#64748b;
  font-weight:900;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.quiz-page .continue-btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:10px;
  background:#2B5CE6;
  color:#fff;
  font-weight:900;
  box-shadow:none;
}

.quiz-page .navigator-card{
  margin-top:18px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:16px;
  padding:18px 18px 16px;
}

.quiz-page .navigator-title{
  margin:0 0 14px;
  font-size:14px;
  font-weight:900;
  color:#0f172a;
}

.quiz-page .navigator-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.quiz-page .qnav-btn{
  width:40px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:#334155;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.quiz-page .qnav-btn.active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

@media (max-width: 900px){
  .quiz-page .quiz-title-row{ flex-direction:column; }
}

@media (max-width: 640px){
  .quiz-page .quiz-header__left{
    flex:1 1 auto;
    min-width:0;
  }
}

@media (max-width: 560px){
  .quiz-page{ padding:14px min(12px, 3.5vw) 30px; }
  .quiz-page .quiz-header__right{ gap:10px; }
  .quiz-page .change-subject{ display:none; }
  .quiz-page .score-pill{ display:none; }
  .quiz-page .score-pill--mobile{ display:flex; }
  .quiz-page .quiz-title h1{ font-size:clamp(22px, 5.5vw, 26px); }
  .quiz-page .options-grid{ grid-template-columns:1fr; }
  .quiz-page .question-actions{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }
  .quiz-page .nav-link,
  .quiz-page .continue-btn{
    flex:1 1 auto;
    min-width:min(140px, 42vw);
    justify-content:center;
  }
  .quiz-page .skip-btn{ display:none; }
  .quiz-page .navigator-card{
    padding:14px min(14px, 4vw);
  }
  .quiz-page .qnav-btn{
    min-width:40px;
    min-height:40px;
  }
}

@media (max-width: 420px){
  .quiz-page .question-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .quiz-page .nav-link,
  .quiz-page .continue-btn{
    width:100%;
    min-width:0;
  }
}

/* Keep the Change Subject pop-up hidden when the attribute says hidden */
.quiz-page .modal-overlay[hidden]{
  display:none !important;
}

.quiz-page .modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  z-index:9999;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.quiz-page .modal{
  width:min(520px, calc(100vw - 32px));
  max-width:100%;
  max-height:min(90dvh, calc(100vh - 32px));
  overflow-y:auto;
  box-sizing:border-box;
  margin:auto;
  background:#fff;
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 30px 80px rgba(2,6,23,0.30);
  border:1px solid rgba(15,23,42,0.08);
}

.quiz-page .modal-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.quiz-page .modal-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,0.10);
  color:#2563eb;
  font-weight:1000;
  font-size:18px;
}

.quiz-page .modal h2{
  margin:0;
  font-size:18px;
  font-weight:1000;
  color:#0f172a;
}

.quiz-page .modal p{
  margin:0;
  color:#64748b;
  font-weight:800;
  font-size:13.5px;
  line-height:1.5;
}

.quiz-page .modal-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px;
}

.quiz-page .modal-btn{
  border:none;
  cursor:pointer;
  border-radius:10px;
  padding:10px 14px;
  font-weight:1000;
  font-size:13px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
}

.quiz-page .modal-btn--secondary{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  color:#0f172a;
}

.quiz-page .modal-btn--primary{
  background:#2B5CE6;
  color:#fff;
}

.quiz-page .modal-btn--primary:hover{
  filter:brightness(1.03);
}

/* Quiz: Change Subject dialog — small viewports and notched devices */
@media (max-width: 480px){
  .quiz-page .modal-overlay{
    align-items:flex-start;
    padding-top:max(20px, env(safe-area-inset-top, 0px));
    padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
  }
  .quiz-page .modal{
    width:100%;
    max-width:min(520px, calc(100vw - 24px));
    max-height:min(85dvh, calc(100svh - max(40px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
    padding:16px 16px 14px;
    border-radius:14px;
  }
  .quiz-page .modal-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .quiz-page .modal-btn{
    width:100%;
    min-width:0;
  }
}

/* Admin: Create Quiz modal (admin-quizzes.html) */
button.create-quiz{
  border:none;
  cursor:pointer;
  font:inherit;
}

.admin-modal-overlay[hidden]{
  display:none !important;
}

.admin-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:min(24px, 4vw);
  z-index:10000;
  overflow-y:auto;
}

.admin-modal{
  width:min(520px, 100%);
  margin:auto;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 24px 64px rgba(2,6,23,0.28);
  padding:20px 22px 22px;
}

.admin-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.admin-modal__title{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-0.02em;
  line-height:1.3;
}

.admin-modal__close{
  flex-shrink:0;
  width:40px;
  height:40px;
  margin:-8px -8px 0 0;
  border:none;
  border-radius:10px;
  background:transparent;
  color:#64748b;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  padding:0;
}

.admin-modal__close:hover{
  background:#f1f5f9;
  color:#0f172a;
}

.admin-modal__form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.admin-modal__field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.admin-modal__field label{
  font-size:13px;
  font-weight:600;
  color:#334155;
}

.admin-modal__textarea,
.admin-modal__input,
.admin-modal__select{
  width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:14px;
  font-family:inherit;
  font-weight:400;
  color:var(--text);
  background:#fff;
  outline:none;
}

.admin-modal__textarea{
  min-height:100px;
  resize:vertical;
  line-height:1.5;
}

.admin-modal__textarea::placeholder,
.admin-modal__input::placeholder{
  color:#94a3b8;
}

.admin-modal__textarea:focus,
.admin-modal__input:focus,
.admin-modal__select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(43,92,230,0.15);
}

.admin-modal__select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}

.admin-modal__submit{
  margin-top:4px;
  width:100%;
  border:none;
  cursor:pointer;
  border-radius:10px;
  padding:14px 16px;
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#fff;
  font-weight:800;
  font-size:15px;
  font-family:inherit;
}

.admin-modal__submit:hover{
  filter:brightness(1.03);
}

/* Delete question confirmation (admin-quizzes.html) */
.admin-modal-overlay--delete-question{
  z-index:10001;
}

.admin-modal-overlay--delete-success{
  z-index:10002;
}

.admin-modal--success{
  width:min(400px, 100%);
  padding:28px 28px 26px;
  text-align:center;
}

.admin-success__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.admin-success__icon svg{
  display:block;
}

.admin-success__title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-0.02em;
  line-height:1.3;
}

.admin-success__text{
  margin:0 0 22px;
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  color:#64748b;
}

.admin-success__ok{
  width:100%;
  border:none;
  cursor:pointer;
  border-radius:10px;
  padding:14px 16px;
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#fff;
  font-weight:800;
  font-size:15px;
  font-family:inherit;
}

.admin-success__ok:hover{
  filter:brightness(1.03);
}

.admin-modal--delete-confirm{
  width:min(440px, 100%);
  padding:26px 28px 24px;
}

.admin-delete-confirm__icon{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.12);
  background:#f8fafc;
  color:#475569;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}

.admin-delete-confirm__title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-0.02em;
  line-height:1.3;
}

.admin-delete-confirm__text{
  margin:0 0 22px;
  font-size:14px;
  font-weight:400;
  line-height:1.55;
  color:#64748b;
}

.admin-delete-confirm__actions{
  display:flex;
  gap:12px;
}

.admin-delete-confirm__btn{
  flex:1;
  min-height:46px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
}

.admin-delete-confirm__btn--cancel{
  border:1px solid rgba(15,23,42,0.12);
  background:#fff;
  color:#0f172a;
}

.admin-delete-confirm__btn--cancel:hover{
  background:#f8fafc;
}

.admin-delete-confirm__btn--delete{
  border:none;
  background:#E60C0C;
  color:#fff;
}

.admin-delete-confirm__btn--delete:hover{
  filter:brightness(0.92);
}

/* End of this style sheet */