/* ============================================================
    NELCO Explains — 30 Days U to A
    ============================================================ */

  :root {
    /* ── Brand / Primary — sky blue ── */
    --sky:            #0EA5E9;
    --sky-dark:       #0284C7;
    --sky-deeper:     #0369A1;
    --sky-light:      #E0F2FE;
    --sky-pale:       #F0F9FF;
    --sky-glow:       rgba(14,165,233,0.20);
  --bg-card: #ffffff;
  --bg-secondary: #f9fafb;

    /* ── Accent — light blue ── */
    --blue:           #3B82F6;
    --blue-light:     #DBEAFE;
    --blue-pale:      #EFF6FF;

    /* ── Semantic ── */
    --green:          #22C55E;
    --green-light:    #DCFCE7;
    --red:            #EF4444;
    --red-light:      #FEE2E2;
    --yellow:         #F59E0B;
    --yellow-light:   #FEF3C7;
    --purple:         #7C3AED;
    --purple-light:   #EDE9FE;
    --orange:         #F97316;

    /* ── Neutrals ── */
    --black:     #0D1117;
    --gray-900:  #1A1F2E;
    --gray-800:  #252B3B;
    --gray-700:  #374151;
    --gray-600:  #4B5563;
    --gray-500:  #6B7280;
    --gray-400:  #9CA3AF;
    --gray-300:  #D1D5DB;
    --gray-200:  #E5E7EB;
    --gray-150:  #ECEEF2;
    --gray-100:  #F3F4F6;
    --gray-50:   #F9FAFB;
    --white:     #FFFFFF;

    /* ── Shadows ── */
    --shadow-xs:      0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:      0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow:         0 4px 16px rgba(0,0,0,0.08);
    --shadow-md:      0 8px 28px rgba(0,0,0,0.10);
    --shadow-lg:      0 20px 60px rgba(0,0,0,0.14);
    --shadow-sky:     0 4px 20px rgba(14,165,233,0.30);
    --shadow-sky-lg:   0 8px 36px rgba(14,165,233,0.28);

    /* ── Radii ── */
    --r-xs:   4px;
    --r-sm:   8px;
    --r:      12px;
    --r-md:   14px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-2xl:  28px;
    --r-full: 9999px;

    /* ── Layout ── */
    --nav-w:  260px;
    --topbar: 62px;

    /* ── Typography ── */
    --font-head: 'Readex Pro', sans-serif;
    --font:      'Manrope', sans-serif;

    /* ── Motion ── */
    --ease:   cubic-bezier(0.4,0,0.2,1);
    --spring: cubic-bezier(0.34,1.56,0.64,1);
  }

  /* ── Reset ── */
  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
  html { font-size:16px; scroll-behavior:smooth }
  body {
    font-family: var(--font);
    background: #EDF2F4;
    color: var(--black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a { color:inherit; text-decoration:none }
  button { cursor:pointer; font-family:var(--font); border:none; background:none }
  input,select,textarea { font-family:var(--font) }
  img { display:block; max-width:100% }
  ul,ol { list-style:none }

  /* ── Typography ── */
  h1 { font-family:var(--font-head); font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; line-height:1.1 }
  h2 { font-family:var(--font-head); font-size:clamp(1.1rem,3vw,1.5rem); font-weight:700; line-height:1.15 }
  h3 { font-family:var(--font-head); font-size:1rem; font-weight:600; line-height:1.3 }
  h4 { font-family:var(--font-head); font-size:0.875rem; font-weight:600 }
  p  { font-size:0.875rem; color:var(--gray-500) }

  /* ── Utility ── */
  .hidden  { display:none!important }
  .flex    { display:flex } .flex-col { flex-direction:column }
  .items-center { align-items:center } .justify-between { justify-content:space-between }
  .gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}
  .w-full{width:100%} .flex-1{flex:1} .text-center{text-align:center}
  .text-sky{color:var(--sky)} .text-blue{color:var(--blue)} .text-teal{color:var(--sky-dark)}
  .text-red{color:var(--red)} .text-muted{color:var(--gray-400)}
  .text-gray-600{color:var(--gray-600)}
  .text-sm{font-size:0.8125rem} .text-xs{font-size:0.75rem}
  .font-500{font-weight:500} .font-600{font-weight:600} .font-700{font-weight:700}
  .mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px}
  .mt-4{margin-top:16px} .mt-6{margin-top:24px} .mt-8{margin-top:32px}
  .mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px}
  .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
  /* Hover utilities used in auth forms */
  a.text-teal:hover { color:var(--sky-deeper); text-decoration:underline }

  /* ──────────────────────────────────────────────────────────
    APP LOADER
  ────────────────────────────────────────────────────────── */
  .app-loader {
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    background:var(--white);
  }
  .loader-inner { text-align:center }
  .loader-logo {
    width:64px; height:64px;
    border-radius:var(--r-xl); margin:0 auto 20px;
    object-fit:cover; box-shadow:var(--shadow-sky);
    animation: loaderPop 0.5s var(--spring) both;
  }
  .loader-ring {
    width:44px; height:44px;
    border:3px solid var(--sky-light);
    border-top-color:var(--sky);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
    margin:0 auto 14px;
  }
  .loader-status {
    font-size:0.8rem; color:var(--gray-400); font-weight:500;
    letter-spacing:0.03em;
  }

  /* ──────────────────────────────────────────────────────────
    BUTTONS
  ────────────────────────────────────────────────────────── */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 20px; border-radius:var(--r-full);
    font-size:0.875rem; font-weight:600; font-family:var(--font);
    transition:all 0.18s var(--ease); white-space:nowrap;
    letter-spacing:0.01em; position:relative; overflow:hidden;
  }
  .btn:active { transform:scale(0.973) }
  .btn:disabled { opacity:0.45; cursor:not-allowed; pointer-events:none }

  .btn-primary {
    background:var(--sky); color:#fff;
    box-shadow:var(--shadow-sky);
  }
  .btn-primary:hover { background:var(--sky-dark); box-shadow:var(--shadow-sky-lg); transform:translateY(-1px) }

  .btn-secondary {
    background:var(--white); color:var(--black);
    border:1.5px solid var(--gray-200); box-shadow:var(--shadow-xs);
  }
  .btn-secondary:hover { background:var(--gray-50); border-color:var(--gray-300) }

  .btn-ghost { background:transparent; color:var(--gray-500) }
  .btn-ghost:hover { background:var(--gray-100); color:var(--black) }

  .btn-danger { background:var(--red); color:#fff }
  .btn-danger:hover { background:#dc2626 }

  .btn-success { background:var(--blue); color:#fff; box-shadow:0 4px 16px rgba(59,130,246,0.28) }
  .btn-success:hover { background:#2563EB }

  .btn-sm  { padding:6px 14px; font-size:0.8rem }
  .btn-lg  { padding:13px 28px; font-size:1rem }
  .btn-xl  { padding:16px 36px; font-size:1.05rem }
  .btn-full { width:100%; border-radius:var(--r-lg) }

  /* ──────────────────────────────────────────────────────────
    CARDS
  ────────────────────────────────────────────────────────── */
  .card {
    background:var(--white);
    border:1px solid var(--gray-200);
    border-radius:var(--r-xl);
    padding:20px 22px;
    box-shadow:var(--shadow-sm);
  }
  .card-label {
    font-size:0.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--gray-400); margin-bottom:6px;
  }

  /* ──────────────────────────────────────────────────────────
    FORM ELEMENTS
  ────────────────────────────────────────────────────────── */
  .form-group { margin-bottom:16px }
  .form-label {
    display:block; font-size:0.8rem; font-weight:600;
    color:var(--gray-700); margin-bottom:6px;
  }
  .form-hint { font-size:0.72rem; color:var(--gray-400); margin-top:4px }
  .input-wrap { position:relative }
  .form-control {
    width:100%; padding:11px 14px;
    border:1.5px solid var(--gray-200);
    border-radius:var(--r-lg); font-size:0.875rem; font-family:var(--font);
    color:var(--black); background:var(--white);
    transition:all 0.18s var(--ease); outline:none;
  }
  .form-control:focus {
    border-color:var(--sky);
    box-shadow:0 0 0 3px var(--sky-glow);
  }
  .form-control::placeholder { color:var(--gray-400); font-weight:400 }
  .form-control.has-icon { padding-left:42px }
  .form-control.has-suffix { padding-right:44px }
  textarea.form-control { resize:vertical; min-height:82px }
  .input-icon {
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    color:var(--gray-400); pointer-events:none;
    display:flex; align-items:center;
  }
  .input-suffix {
    position:absolute; right:11px; top:50%; transform:translateY(-50%);
    color:var(--gray-400); cursor:pointer; padding:4px;
    border-radius:var(--r-sm); transition:all 0.15s;
  }
  .input-suffix:hover { color:var(--black); background:var(--gray-100) }

  /* ──────────────────────────────────────────────────────────
    ALERTS
  ────────────────────────────────────────────────────────── */
  .alert {
    padding:12px 15px; border-radius:var(--r-lg);
    font-size:0.8125rem; font-weight:500;
    margin-bottom:14px; display:flex; align-items:flex-start;
    gap:9px; line-height:1.5;
  }
  .alert-error   { background:var(--red-light);    color:#991B1B; border:1px solid #FCA5A5 }
  .alert-success { background:var(--green-light);  color:#166534; border:1px solid #86EFAC }
  .alert-info    { background:var(--sky-light);   color:var(--sky-deeper); border:1px solid rgba(14,165,233,0.4) }
  .alert-warning { background:var(--yellow-light); color:#92400E; border:1px solid #FCD34D }

  /* ──────────────────────────────────────────────────────────
    BADGES
  ────────────────────────────────────────────────────────── */
  .badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:var(--r-full);
    font-size:0.7rem; font-weight:700; letter-spacing:0.03em;
  }
  .badge-sky    { background:var(--sky-light);   color:var(--sky-deeper) }
  .badge-blue   { background:var(--blue-light);  color:#1E40AF }
  .badge-green  { background:var(--green-light); color:#166534 }
  .badge-red    { background:var(--red-light);    color:var(--red) }
  .badge-yellow { background:var(--yellow-light); color:#92400E }
  .badge-gray   { background:var(--gray-100);     color:var(--gray-500) }
  .badge-purple { background:var(--purple-light); color:var(--purple) }
  .badge-mint   { background:var(--blue-light);   color:#1E40AF }

  /* ──────────────────────────────────────────────────────────
    AVATARS
  ────────────────────────────────────────────────────────── */
  .avatar { border-radius:50%; object-fit:cover; flex-shrink:0 }
  .avatar-placeholder {
    border-radius:50%; display:inline-flex; align-items:center;
    justify-content:center; font-weight:700; flex-shrink:0;
    background:linear-gradient(135deg,var(--sky),var(--blue));
    color:#fff; font-family:var(--font-head);
  }
  .avatar-sm, .avatar-placeholder.avatar-sm { width:32px; height:32px; font-size:0.68rem }
  .avatar-md, .avatar-placeholder.avatar-md { width:40px; height:40px; font-size:0.82rem }
  .avatar-lg, .avatar-placeholder.avatar-lg { width:48px; height:48px; font-size:0.95rem }
  .avatar-xl, .avatar-placeholder.avatar-xl { width:64px; height:64px; font-size:1.2rem }
  .avatar-2xl,.avatar-placeholder.avatar-2xl{ width:88px; height:88px; font-size:1.6rem }

  /* ──────────────────────────────────────────────────────────
    DIVIDER
  ────────────────────────────────────────────────────────── */
  .divider { height:1px; background:var(--gray-200); border:none; margin:18px 0 }
  .divider-text {
    display:flex; align-items:center; gap:12px; margin:20px 0;
    color:var(--gray-400); font-size:0.78rem; font-weight:500;
  }
  .divider-text::before,.divider-text::after { content:''; flex:1; height:1px; background:var(--gray-200) }

  [data-theme="light"] {
  --bg-primary: #ffffff;
}
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-card: #1e1e2e;
  --bg-secondary: #181825;
}
  /* ──────────────────────────────────────────────────────────
    MODAL
  ────────────────────────────────────────────────────────── */
  .modal-backdrop {
    position:fixed; inset:0;
    background:rgba(10,15,30,0.6);
    backdrop-filter:blur(8px);
    z-index:1000;
    display:flex; align-items:center; justify-content:center;
    padding:16px; animation:fadeIn 0.18s ease;
  }
  .modal {
    background:var(--white); border-radius:var(--r-2xl);
    width:100%; max-width:520px; max-height:92vh;
    overflow-y:auto; box-shadow:var(--shadow-lg);
    animation:slideUp 0.24s var(--spring);
  }
  .modal-lg { max-width:780px }
  .modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 24px 0;
  }
  .modal-header h3 { font-size:1rem; font-weight:700; font-family:var(--font-head) }
  .modal-body { padding:18px 24px 24px }
  .modal-close {
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-full); color:var(--gray-500); font-size:1rem;
    transition:all 0.15s;
  }
  .modal-close:hover { background:var(--gray-100); color:var(--black) }

  /* ──────────────────────────────────────────────────────────
    TABLE
  ────────────────────────────────────────────────────────── */
  .table-wrap {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-radius:var(--r-xl);
    border:1px solid var(--gray-200); background:var(--white);
  }
  table { width:100%; border-collapse:collapse; font-size:0.8125rem }
  thead { background:var(--gray-50) }
  th {
    padding:11px 15px; text-align:left;
    font-size:0.67rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.09em;
    color:var(--gray-400); border-bottom:1px solid var(--gray-200);
    white-space:nowrap;
  }
  td {
    padding:12px 15px; border-bottom:1px solid var(--gray-100);
    vertical-align:middle; color:var(--gray-700);
  }
  tr:last-child td { border-bottom:none }
  tbody tr:hover { background:var(--sky-pale) }
  .row-pending { background:#FFFBEB!important }

  /* ──────────────────────────────────────────────────────────
    SKELETON
  ────────────────────────────────────────────────────────── */
  .skeleton {
    background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);
    background-size:200% 100%;
    animation:shimmer 1.6s infinite;
    border-radius:var(--r-lg);
  }
  @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

  /* ──────────────────────────────────────────────────────────
    TOAST
  ────────────────────────────────────────────────────────── */
  .copy-flash {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
    color:var(--white); padding:11px 22px;
    border-radius:var(--r-full); font-size:0.8125rem; font-weight:600;
    z-index:9999; animation:slideUpFade 0.25s ease;
    pointer-events:none; white-space:nowrap; box-shadow:var(--shadow-md);
  }
  @media(max-width:768px){
    .copy-flash { bottom:84px }
  }

  /* ──────────────────────────────────────────────────────────
    PROGRESS BAR
  ────────────────────────────────────────────────────────── */
  .progress-bar-wrap {
    height:6px; background:var(--gray-100);
    border-radius:var(--r-full); overflow:hidden;
  }
  .progress-bar-fill {
    height:100%;
    background:linear-gradient(90deg,var(--sky),var(--blue));
    border-radius:var(--r-full);
    transition:width 0.8s var(--ease);
  }

  /* ──────────────────────────────────────────────────────────
    SCROLLBAR
  ────────────────────────────────────────────────────────── */
  ::-webkit-scrollbar { width:5px; height:5px }
  ::-webkit-scrollbar-track { background:transparent }
  ::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:99px }
  ::-webkit-scrollbar-thumb:hover { background:var(--gray-300) }

  /* ──────────────────────────────────────────────────────────
    ANIMATIONS
  ────────────────────────────────────────────────────────── */
  @keyframes fadeIn     { from{opacity:0} to{opacity:1} }
  @keyframes slideUp    { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
  @keyframes slideUpFade{ from{transform:translateX(-50%) translateY(10px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
  @keyframes slideDown  { from{transform:translateY(-8px);opacity:0} to{transform:translateY(0);opacity:1} }
  @keyframes spin       { to{transform:rotate(360deg)} }
  @keyframes pulse      { 0%,100%{opacity:1} 50%{opacity:0.4} }
  @keyframes loaderPop  { from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1} }
  @keyframes bounceIn   { 0%{transform:scale(0.7);opacity:0} 70%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }

  .animate-fade { animation:fadeIn 0.28s ease }
  .animate-up   { animation:slideUp 0.3s var(--spring) }

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

  /* ── Sidebar ── */
  .sidebar {
    width:var(--nav-w);
    background:var(--white);
    border-right:1px solid var(--gray-150);
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0;
    z-index:100;
    transition:transform 0.28s var(--ease);
    overflow-y:auto; overflow-x:hidden;
  }

  .sidebar-logo {
    padding:18px 16px 14px;
    display:flex; align-items:center; gap:11px;
    border-bottom:1px solid var(--gray-100);
  }
  .sidebar-logo img {
    width:34px; height:34px; border-radius:var(--r-sm);
    object-fit:cover; box-shadow:var(--shadow-sky);
  }
  .sidebar-logo-text .brand {
    font-family:var(--font-head);
    font-size:0.85rem; font-weight:700; color:var(--black); line-height:1.2;
  }
  .sidebar-logo-text .sub { font-size:0.65rem; color:var(--gray-400); font-weight:500 }

  .sidebar-nav { flex:1; padding:12px 10px }
  .nav-section-label {
    font-size:0.62rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.12em; color:var(--gray-300); padding:10px 10px 5px;
  }
  .nav-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border-radius:var(--r-lg);
    color:var(--gray-500); font-size:0.82rem; font-weight:500;
    transition:all 0.18s var(--ease); margin-bottom:2px;
    cursor:pointer; position:relative;
  }
  .nav-item .nav-icon { font-size:1rem; flex-shrink:0; width:20px; text-align:center }
  .nav-item:hover { background:var(--sky-pale); color:var(--sky-dark); transform:translateX(2px) }
  .nav-item.active {
    background:var(--sky-light); color:var(--sky-dark); font-weight:600;
    transform:translateX(4px);
  }
  .nav-item.active::before {
    content:''; position:absolute; left:0; top:7px; bottom:7px;
    width:3px; background:var(--sky); border-radius:0 3px 3px 0;
  }

  .sidebar-footer { padding:12px; border-top:1px solid var(--gray-100) }
  .user-chip {
    display:flex; align-items:center; gap:10px;
    padding:10px 11px; border-radius:var(--r-lg);
    cursor:pointer; transition:all 0.15s;
  }
  .user-chip:hover { background:var(--sky-pale) }
  .user-chip-info .name  { font-size:0.8rem; font-weight:600; color:var(--black); line-height:1.2 }
  .user-chip-info .role  { font-size:0.68rem; color:var(--gray-400) }

  /* ── Main content ── */
  .main-content { margin-left:var(--nav-w); flex:1; display:flex; flex-direction:column; min-height:100vh }

  /* ── Topbar ── */
  .topbar {
    height:var(--topbar);
    background:rgba(255,255,255,0.96); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--gray-150);
    padding:0 26px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:90; gap:14px;
  }
  .topbar-left  { display:flex; align-items:center; gap:10px }
  .topbar-right { display:flex; align-items:center; gap:8px }
  .topbar-title {
    font-family:var(--font-head);
    font-size:0.95rem; font-weight:700; color:var(--black);
  }
  .topbar-sub { font-size:0.72rem; color:var(--gray-400) }

  .topbar-pill {
    display:flex; align-items:center; gap:5px;
    padding:5px 13px; border-radius:var(--r-full);
    font-size:0.75rem; font-weight:600; white-space:nowrap;
  }
  .topbar-pill.sky   { background:var(--sky-light); color:var(--sky-dark) }
  .topbar-pill.green  { background:var(--green-light); color:#166534 }
  .topbar-pill.purple { background:var(--purple-light); color:var(--purple) }

  /* topbar-stat: same as topbar-pill, used in student/admin shells */
  .topbar-stat {
    display:inline-flex; align-items:center;
    padding:5px 13px; border-radius:var(--r-full);
    font-size:0.75rem; font-weight:600; white-space:nowrap;
    background:var(--gray-100); color:var(--gray-600);
  }
  .topbar-stat.green  { background:var(--green-light); color:#166534 }
  .topbar-stat.blue   { background:var(--blue-light);  color:#1E40AF }
  .topbar-stat.sky    { background:var(--sky-light);   color:var(--sky-dark) }
  .topbar-stat.purple { background:var(--purple-light);color:var(--purple) }

  /* User dropdown */
  .user-dropdown-wrap { position:relative }
  .user-btn {
    display:flex; align-items:center; gap:8px;
    padding:5px 11px 5px 5px; border-radius:var(--r-full);
    cursor:pointer; transition:all 0.15s;
    border:1.5px solid transparent;
  }
  .user-btn:hover { background:var(--gray-100) }
  .user-btn .uname {
    font-size:0.8rem; font-weight:600;
    max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .user-btn .chevron { color:var(--gray-400); transition:transform 0.2s; font-size:0.7rem }
  .user-btn.open .chevron { transform:rotate(180deg) }

  .user-dropdown {
    position:absolute; top:calc(100% + 8px); right:0;
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
    min-width:220px; z-index:200; animation:slideDown 0.18s ease; overflow:hidden;
  }
  .dd-header {
    padding:14px 16px; border-bottom:1px solid var(--gray-100);
    display:flex; align-items:center; gap:10px;
  }
  .dd-header .dname  { font-size:0.82rem; font-weight:700 }
  .dd-header .demail { font-size:0.72rem; color:var(--gray-400) }
  .dd-item {
    display:flex; align-items:center; gap:9px;
    padding:10px 16px; font-size:0.82rem; font-weight:500;
    color:var(--gray-700); cursor:pointer; transition:all 0.12s;
  }
  .dd-item:hover { background:var(--gray-50); color:var(--black) }
  .dd-item.danger { color:var(--red) }
  .dd-item.danger:hover { background:var(--red-light) }
  .dd-divider { height:1px; background:var(--gray-100); margin:3px 0 }

  /* ── Mobile topbar ── */
  .mobile-topbar {
    display:none; height:var(--topbar);
    background:var(--white); border-bottom:1px solid var(--gray-150);
    padding:0 16px; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:90;
  }
  .mobile-topbar-logo { display:flex; align-items:center; gap:9px }
  .mobile-topbar-logo img { width:28px; border-radius:var(--r-sm) }
  .mobile-topbar-logo span { font-family:var(--font-head); font-size:0.85rem; font-weight:700 }

  .hamburger {
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-lg); background:var(--gray-100);
    color:var(--gray-700); transition:all 0.15s;
  }
  .hamburger:hover { background:var(--sky-light); color:var(--sky) }

  .sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.4); z-index:99;
  }

  /* ── Bottom nav ── */
  .bottom-nav {
    display:none; position:fixed; bottom:0; left:0; right:0;
    background:var(--white); border-top:1px solid var(--gray-150);
    padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));
    z-index:100; justify-content:space-around;
  }
  .bnav-item, .bottom-nav-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:6px 14px; border-radius:var(--r-sm);
    color:var(--gray-400); font-size:0.62rem; font-weight:600;
    cursor:pointer; transition:all 0.15s; min-width:52px;
    letter-spacing:0.02em;
  }
  .bnav-item .bnav-icon { font-size:1.15rem }
  .bnav-item.active, .bottom-nav-item.active {
    color:var(--sky); font-weight:700;
  }

  /* ──────────────────────────────────────────────────────────
    PAGE LAYOUT
  ────────────────────────────────────────────────────────── */
  .page-wrap { display:flex; flex-direction:column; min-height:calc(100vh - var(--topbar)) }
  .page-header {
    padding:24px 28px 0;
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px; flex-wrap:wrap;
  }
  .page-header-title h2 { font-size:1.3rem; font-weight:700 }
  .page-header-title p  { color:var(--gray-400); font-size:0.78rem; margin-top:2px }
  .page-body { padding:18px 28px 72px; flex:1 }

  /* ── Grids ── */
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px }
  .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
  .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }

  /* ──────────────────────────────────────────────────────────
    STAT CARDS
  ────────────────────────────────────────────────────────── */
  .stat-card {
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:var(--r-xl); padding:18px 20px;
    cursor:pointer; transition:all 0.18s; position:relative; overflow:hidden;
  }
  .stat-card::after {
    content:''; position:absolute; top:-20px; right:-20px;
    width:80px; height:80px; border-radius:50%;
    background:var(--sky-glow); pointer-events:none;
  }
  .stat-card:hover { border-color:var(--sky); box-shadow:var(--shadow-sky); transform:translateY(-3px) }
  .stat-card .stat-label {
    font-size:0.67rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.09em; color:var(--gray-400); margin-bottom:6px;
  }
  .stat-card .stat-value {
    font-family:var(--font-head);
    font-size:1.8rem; font-weight:700; color:var(--black); line-height:1;
  }
  .stat-card .stat-sub { font-size:0.72rem; color:var(--gray-400); margin-top:5px }

  /* ──────────────────────────────────────────────────────────
    HERO / BANNER CARD (Day countdown)
  ────────────────────────────────────────────────────────── */
  .day-hero {
    background:linear-gradient(135deg,var(--sky-deeper) 0%,var(--sky) 55%,var(--blue) 100%);
    color:white; border-radius:var(--r-2xl); padding:24px 28px;
    display:flex; align-items:center; justify-content:space-between;
    position:relative; overflow:hidden; margin-bottom:16px;
    box-shadow:var(--shadow-sky-lg);
  }
  .day-hero::before {
    content:''; position:absolute; top:-50px; right:-50px;
    width:160px; height:160px; border-radius:50%;
    background:rgba(255,255,255,0.07);
  }
  .day-hero::after {
    content:''; position:absolute; bottom:-70px; right:80px;
    width:200px; height:200px; border-radius:50%;
    background:rgba(255,255,255,0.04);
  }
  .day-hero-left  { position:relative; z-index:1 }
  .day-hero-right { position:relative; z-index:1; text-align:right }
  .day-hero-eyebrow {
    font-size:0.65rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.14em; opacity:0.7; margin-bottom:5px;
  }
  .day-hero-day {
    font-family:var(--font-head);
    font-size:1.6rem; font-weight:700; line-height:1.1; margin-bottom:4px;
  }
  .day-hero-title { font-size:0.82rem; opacity:0.75; max-width:280px }
  .day-hero-countdown {
    font-family:var(--font-head);
    font-size:2.2rem; font-weight:700; letter-spacing:0.06em;
    font-variant-numeric:tabular-nums; line-height:1;
  }
  .day-hero-countdown-label {
    font-size:0.62rem; opacity:0.65; margin-top:4px;
    text-transform:uppercase; letter-spacing:0.09em;
  }
  .day-hero-progress { margin-top:18px; position:relative; z-index:1 }
  .day-hero-progress-bar {
    height:5px; background:rgba(255,255,255,0.22);
    border-radius:var(--r-full); overflow:hidden;
  }
  .day-hero-progress-fill {
    height:100%; background:rgba(255,255,255,0.88);
    border-radius:var(--r-full); transition:width 0.8s var(--ease);
  }
  .day-hero-progress-label { font-size:0.65rem; opacity:0.65; margin-top:5px }

  /* ──────────────────────────────────────────────────────────
    FOCUS TIMER CARD
  ────────────────────────────────────────────────────────── */
  .focus-card {
    background:var(--gray-900); border-radius:var(--r-2xl);
    padding:20px 22px; position:relative; overflow:hidden;
  }
  .focus-card::before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:radial-gradient(ellipse at 20% 50%,rgba(55,185,197,0.15) 0%,transparent 65%);
    pointer-events:none;
  }
  .focus-card-label {
    font-size:0.65rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.11em; color:rgba(255,255,255,0.4);
    margin-bottom:9px; display:flex; align-items:center; gap:7px;
  }
  .live-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--blue); animation:pulse 1.5s infinite;
  }
  .focus-display {
    font-family:var(--font-head);
    font-size:2.4rem; font-weight:700; color:var(--white);
    letter-spacing:0.06em; font-variant-numeric:tabular-nums;
    margin-bottom:14px; position:relative; z-index:1;
  }
  .focus-display.running { color:#60E8D6; animation:pulse 2s infinite }
  .focus-display.paused  { color:var(--yellow) }
  .focus-controls { display:flex; gap:8px; position:relative; z-index:1 }
  .focus-btn {
    flex:1; padding:9px 10px; border-radius:var(--r-lg);
    font-size:0.78rem; font-weight:600; font-family:var(--font);
    transition:all 0.15s; display:flex; align-items:center; justify-content:center; gap:5px;
  }
  .focus-btn-start { background:var(--sky); color:#fff }
  .focus-btn-start:hover { background:var(--sky-dark) }
  .focus-btn-pause { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.85) }
  .focus-btn-pause:hover { background:rgba(255,255,255,0.18) }
  .focus-btn-stop  { background:rgba(239,68,68,0.18); color:#FCA5A5 }
  .focus-btn-stop:hover  { background:rgba(239,68,68,0.32) }
  .focus-btn:disabled { opacity:0.3; cursor:not-allowed }

  /* ──────────────────────────────────────────────────────────
    MINI STATS
  ────────────────────────────────────────────────────────── */
  .mini-stat {
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:var(--r-xl); padding:14px 18px;
  }
  .mini-stat-label {
    font-size:0.65rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.09em; color:var(--gray-400); margin-bottom:4px;
  }
  .mini-stat-value {
    font-family:var(--font-head);
    font-size:1.5rem; font-weight:700; color:var(--black); line-height:1;
  }
  .mini-stat-sub { font-size:0.72rem; color:var(--gray-400); margin-top:3px }

  /* ──────────────────────────────────────────────────────────
    PDF VIEWER
  ────────────────────────────────────────────────────────── */
  .pdf-container { border-radius:var(--r-xl); border:1px solid var(--gray-200); overflow:hidden; background:var(--gray-100) }
  .pdf-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 16px; background:var(--white);
    border-bottom:1px solid var(--gray-200); gap:10px;
  }
  .pdf-toolbar-left  { display:flex; align-items:center; gap:9px }
  .pdf-toolbar-right { display:flex; align-items:center; gap:6px }
  .pdf-title { font-size:0.82rem; font-weight:600; color:var(--black) }
  .pdf-day-badge {
    padding:3px 9px; background:var(--sky-light); color:var(--sky-dark);
    border-radius:var(--r-full); font-size:0.65rem; font-weight:700;
  }
  .pdf-frame-wrap { position:relative; height:520px; overflow:hidden }
  .pdf-frame-wrap iframe {
    width:100%; height:100%; border:none; display:block;
    /* Allow the PDF to be scrolled with touch and mouse inside the iframe */
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
  .pdf-fullscreen-mode {
    position:fixed; inset:0; z-index:2000;
    background:#111; display:flex; flex-direction:column; border-radius:0;
  }
  /* In fullscreen the frame fills all remaining height and MUST scroll */
  .pdf-fullscreen-mode .pdf-frame-wrap {
    flex:1; height:0; min-height:0; overflow:hidden;
  }
  .pdf-fullscreen-mode .pdf-frame-wrap iframe {
    width:100%; height:100%; border:none; display:block;
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
  .pdf-fullscreen-mode .pdf-toolbar { background:rgba(20,20,20,0.95); border-color:rgba(255,255,255,0.1) }
  .pdf-fullscreen-mode .pdf-title  { color:rgba(255,255,255,0.9) }

  /* ──────────────────────────────────────────────────────────
    MCQ
  ────────────────────────────────────────────────────────── */
  .mcq-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:11px }
  .mcq-label { font-size:0.78rem; font-weight:600; color:var(--gray-700); margin-bottom:6px }
  .mcq-options { display:flex; gap:5px }
  .mcq-btn {
    flex:1; padding:8px 4px; border:1.5px solid var(--gray-200);
    border-radius:var(--r-lg); font-size:0.8rem; font-weight:600;
    font-family:var(--font); color:var(--gray-500); background:var(--white);
    transition:all 0.15s; text-align:center;
  }
  .mcq-btn:hover  { border-color:var(--sky); color:var(--sky); background:var(--sky-pale) }
  .mcq-btn.selected { background:var(--sky); border-color:var(--sky); color:#fff }
  .mcq-btn.correct  { background:var(--blue); border-color:var(--blue); color:#fff }
  .mcq-btn.wrong    { background:var(--red);  border-color:var(--red);  color:#fff }
  .mcq-btn.correct-reveal { background:var(--blue-light); border-color:var(--blue); color:#1E40AF; font-weight:700 }

  /* MCQ Dropdown Styles */
  .mcq-grid-dropdown {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px;
  }
  .mcq-item-dropdown {
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:var(--r-lg); padding:12px; transition:all 0.15s;
  }
  .mcq-item-dropdown:hover { border-color:var(--sky); }
  .mcq-dropdown-wrap { margin-top:6px }
  .mcq-dropdown {
    font-size:0.8rem; font-weight:500;
    padding:8px 10px; border-radius:var(--r-sm);
    border:1.5px solid var(--gray-200);
    transition:all 0.15s;
  }
  .mcq-dropdown:focus {
    border-color:var(--sky);
    box-shadow:0 0 0 3px var(--sky-glow);
  }

  /* ──────────────────────────────────────────────────────────
    UPLOAD ZONE
  ────────────────────────────────────────────────────────── */
  .upload-area {
    border:2px dashed var(--gray-200); border-radius:var(--r-xl);
    padding:32px 24px; text-align:center; cursor:pointer;
    transition:all 0.18s; background:var(--white);
    position:relative; overflow:hidden;
  }
  .upload-area::before {
    content:'';
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:linear-gradient(135deg,var(--sky-pale) 0%,var(--blue-light) 100%);
    opacity:0; transition:opacity 0.18s;
  }
  .upload-area:hover, .upload-area.dragover {
    border-color:var(--sky); background:var(--sky-pale);
    transform:translateY(-2px); box-shadow:var(--shadow-sky);
  }
  .upload-area:hover::before, .upload-area.dragover::before {
    opacity:0.1;
  }
  .upload-icon { 
    font-size:2.5rem; margin-bottom:12px; color:var(--sky);
    transition:transform 0.18s;
  }
  .upload-area:hover .upload-icon { transform:scale(1.1); }
  .upload-area h4 { 
    font-size:1rem; font-weight:600; color:var(--black); margin-bottom:6px;
  }
  .upload-area p  { font-size:0.875rem; color:var(--gray-500); margin-bottom:4px; }
  .upload-area strong { color:var(--sky); font-weight:600; }
  .upload-area small { font-size:0.72rem; color:var(--gray-400); }

  .upload-preview {
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; background:var(--sky-pale);
    border-radius:var(--r-lg); border:1.5px solid var(--sky-light); 
    margin-top:12px; position:relative;
    animation:slideUp 0.3s var(--spring);
  }
  .upload-preview::before {
    content:'✓';
    position:absolute; top:-8px; left:16px;
    width:20px; height:20px; background:var(--sky);
    color:white; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:0.7rem; font-weight:700;
  }
  .preview-name { font-size:0.82rem; font-weight:600; flex:1; color:var(--black) }
  .preview-size { font-size:0.72rem; color:var(--gray-400) }
  .upload-preview .btn {
    transition:all 0.15s;
  }
  .upload-preview .btn:hover {
    background:var(--red-light); color:var(--red);
    border-color:var(--red);
  }

  /* Enhanced upload strip for student submissions */
  .upload-preview-strip {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; background:var(--sky-pale);
    border:1.5px solid var(--sky-light); border-radius:var(--r-lg);
    margin-top:12px; animation:slideUp 0.3s var(--spring);
  }
  .fname { font-size:0.82rem; font-weight:600; flex:1; color:var(--black) }
  .fsize { font-size:0.72rem; color:var(--gray-400) }

  /* ──────────────────────────────────────────────────────────
    SCORE CARDS
  ────────────────────────────────────────────────────────── */
  .score-section-row {
    padding:12px 15px; background:var(--gray-50);
    border-radius:var(--r-lg); border:1px solid var(--gray-200); margin-bottom:9px;
  }
  .score-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
  .score-section-name { font-size:0.82rem; font-weight:600; color:var(--black) }
  .score-section-pts  { font-size:0.95rem; font-weight:700 }
  .score-total-bar {
    margin-top:14px; padding:14px 18px;
    background:linear-gradient(135deg,var(--sky-deeper),var(--blue));
    border-radius:var(--r-xl); display:flex; align-items:center;
    justify-content:space-between; color:white; box-shadow:var(--shadow-sky);
  }

  .mcq-result-tile { padding:8px; border-radius:var(--r-sm); text-align:center; min-width:52px }
  .mcq-result-tile .q-label  { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-400) }
  .mcq-result-tile .q-answer { font-size:0.95rem; font-weight:700; margin:2px 0 }
  .mcq-result-tile .q-status { font-size:0.85rem }
  .mcq-result-correct { background:var(--blue-light); border:1px solid var(--blue) }
  .mcq-result-wrong   { background:var(--red-light);  border:1px solid #FCA5A5 }
  .mcq-result-pending { background:var(--gray-100);   border:1px solid var(--gray-200) }

  .feedback-block { padding:12px 15px; border-radius:var(--r-lg); border-left:3px solid; margin-bottom:9px }
  .feedback-block-b { background:var(--sky-pale);  border-color:var(--sky) }
  .feedback-block-c { background:var(--purple-light); border-color:var(--purple) }
  .feedback-label  { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; margin-bottom:4px }
  .feedback-text   { font-size:0.82rem; color:var(--gray-700); line-height:1.55; white-space:pre-wrap; word-break:break-word }

  /* ──────────────────────────────────────────────────────────
    DAY GRID (Admin)
  ────────────────────────────────────────────────────────── */
  .day-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:8px;
  }
  .day-tile {
    border:1.5px solid var(--gray-200); border-radius:var(--r-lg);
    padding:12px 8px; cursor:pointer; transition:all 0.15s;
    background:var(--white); text-align:center;
  }
  .day-tile:hover { border-color:var(--sky); transform:translateY(-2px); box-shadow:var(--shadow-sky) }
  .day-tile.complete { border-color:var(--blue); background:var(--blue-light) }
  .day-tile.partial  { border-color:var(--yellow); background:var(--yellow-light) }
  .day-num  { font-family:var(--font-head); font-size:0.95rem; font-weight:700; color:var(--black) }
  .day-tile.complete .day-num { color:#1E40AF }
  .day-tile.partial  .day-num { color:#92400E }
  .day-title-short {
    font-size:0.6rem; color:var(--gray-400); margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* ──────────────────────────────────────────────────────────
    LEADERBOARD
  ────────────────────────────────────────────────────────── */
  .lb-row {
    display:flex; align-items:center; gap:11px;
    padding:10px 13px; border-radius:var(--r-lg); transition:all 0.12s;
  }
  .lb-row:hover { background:var(--sky-pale) }
  .lb-row.self  { background:var(--sky-light); border:1px solid rgba(14,165,233,0.3) }
  .lb-rank {
    font-size:0.82rem; font-weight:700; width:34px;
    text-align:center; color:var(--gray-400); flex-shrink:0;
    border-radius:var(--r-sm); padding:3px 0;
  }
  .lb-rank.r1 { color:#fff; background:#D97706 }
  .lb-rank.r2 { color:#fff; background:#6B7280 }
  .lb-rank.r3 { color:#fff; background:#92400E }
  .lb-info { flex:1 }
  .lb-name { font-size:0.82rem; font-weight:600; color:var(--black) }
  .lb-sub  { font-size:0.7rem; color:var(--gray-400) }
  .lb-csp  { font-family:var(--font-head); font-size:0.9rem; font-weight:700; color:var(--sky) }

  /* ──────────────────────────────────────────────────────────
    REFERRAL
  ────────────────────────────────────────────────────────── */
  .ref-code-box {
    display:flex; align-items:center; gap:11px;
    padding:14px 18px; background:var(--sky-pale);
    border:1.5px dashed var(--sky); border-radius:var(--r-xl);
  }
  .ref-code-text {
    font-family:var(--font-head);
    font-size:1.4rem; font-weight:700; letter-spacing:0.18em;
    color:var(--sky); flex:1;
  }

  /* ──────────────────────────────────────────────────────────
    DAYS OVERVIEW (Student)
  ────────────────────────────────────────────────────────── */
  .days-table-status { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0 }

  /* ──────────────────────────────────────────────────────────
    PROGRESS RING (SVG)
  ────────────────────────────────────────────────────────── */
  .progress-ring-wrap { display:flex; flex-direction:column; align-items:center }
  .progress-ring-track { fill:none; stroke:var(--gray-150) }
  .progress-ring-bar   { fill:none; stroke:url(#ringGrad); stroke-linecap:round; transform:rotate(-90deg); transform-origin:center }
  .line-chart-wrap     { width:100% }

  /* ──────────────────────────────────────────────────────────
    AUTH PAGE
  ────────────────────────────────────────────────────────── */
  .auth-page {
    min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
    width:100%; overflow-x:hidden;
  }
  .auth-left {
    background:linear-gradient(160deg,#061422 0%,#0B2038 55%,var(--sky-deeper) 100%);
    padding:56px; display:flex; flex-direction:column;
    justify-content:space-between; position:relative; overflow:hidden;
    min-width:0;
  }
  .auth-left::before {
    content:''; position:absolute; top:25%; left:-90px;
    width:380px; height:380px; border-radius:50%;
    background:var(--sky-glow); filter:blur(70px);
  }
  .auth-left::after {
    content:''; position:absolute; bottom:-50px; right:-50px;
    width:280px; height:280px; border-radius:50%;
    background:rgba(77,209,170,0.08); filter:blur(50px);
  }
  .auth-left-content { position:relative; z-index:1 }
  .auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:48px }
  .auth-brand img { width:38px; border-radius:var(--r-sm); box-shadow:var(--shadow-sky) }
  .auth-brand-name { font-family:var(--font-head); font-size:0.9rem; font-weight:700; color:#fff }
  .auth-hero-text {
    font-family:var(--font-head);
    font-size:clamp(1.8rem,3vw,2.5rem); font-weight:700;
    color:var(--white); line-height:1.1; margin-bottom:16px;
  }
  .auth-hero-text .accent { color:#60E8D6 }
  .auth-hero-desc {
    font-size:0.875rem; color:rgba(255,255,255,0.52);
    line-height:1.75; margin-bottom:32px;
  }
  .auth-features { display:flex; flex-direction:column; gap:13px }
  .auth-feature-item { display:flex; align-items:center; gap:12px; font-size:0.82rem; color:rgba(255,255,255,0.75) }
  .auth-feature-check {
    width:26px; height:26px; border-radius:var(--r-sm);
    background:rgba(55,185,197,0.25); display:flex; align-items:center;
    justify-content:center; flex-shrink:0; font-size:0.75rem; color:var(--sky);
  }
  .auth-left-footer { position:relative; z-index:1; font-size:0.72rem; color:rgba(255,255,255,0.3) }

  .auth-right {
    background:var(--white); display:flex; align-items:center;
    justify-content:center; padding:44px; overflow-y:auto;
    min-width:0;
  }
  .auth-form-card { width:100%; max-width:400px }
  .auth-form-title { font-family:var(--font-head); font-size:1.6rem; font-weight:700; margin-bottom:6px }
  .auth-form-sub   { font-size:0.82rem; color:var(--gray-400); margin-bottom:28px }

  /* Auth tabs */
  .auth-tabs {
    display:flex; background:var(--gray-100); border-radius:var(--r-lg);
    padding:3px; margin-bottom:24px;
  }
  .auth-tab {
    flex:1; text-align:center; padding:9px;
    border-radius:var(--r-sm); font-size:0.83rem; font-weight:600;
    color:var(--gray-400); cursor:pointer; transition:all 0.15s;
  }
  .auth-tab.active { background:var(--white); color:var(--black); box-shadow:var(--shadow-xs) }

  /* Auth UX helpers */
  .auth-row-between { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .auth-remember    { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--gray-500); cursor:pointer; }
  .auth-link        { font-size:0.82rem; color:var(--sky); font-weight:600; text-decoration:none; }
  .auth-link:hover  { text-decoration:underline; }
  .auth-switch-hint { font-size:0.78rem; color:var(--gray-400); text-align:center; margin-top:14px; }
  .auth-forgot-desc { font-size:0.85rem; color:var(--gray-400); line-height:1.6; margin-bottom:20px; }
  .req-star         { color:#ef4444; margin-left:1px; }
  button.input-suffix { background:none; border:none; cursor:pointer; }

  /* Password requirements */
  .pw-requirements   { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .pw-req            { font-size:0.72rem; padding:3px 9px; border-radius:99px; background:var(--gray-100); color:var(--gray-400); font-weight:600; transition:all 0.2s; }
  .pw-req.met        { background:#dcfce7; color:#166534; }
  .pw-tip            { font-size:0.7rem; padding:3px 9px; border-radius:99px; background:#EFF6FF; color:#1E40AF; font-weight:500; }

  /* Strength bar */
  .pw-strength       { display:flex; align-items:center; gap:10px; margin-top:8px; }
  .pw-strength-bars  { display:flex; gap:5px; flex:1; }
  .pw-bar            { flex:1; height:4px; border-radius:3px; background:var(--gray-200); transition:background 0.25s; }
  .pw-bar.weak       { background:#ef4444; }
  .pw-bar.medium     { background:#f59e0b; }
  .pw-bar.strong     { background:#10b981; }
  .pw-strength-label { font-size:0.72rem; font-weight:700; min-width:52px; text-align:right; }
  .pw-strength-label.weak   { color:#ef4444; }
  .pw-strength-label.medium { color:#f59e0b; }
  .pw-strength-label.strong { color:#10b981; }

  /* Forgot password success */
  .auth-reset-success       { background:var(--gray-50); border:1.5px solid var(--gray-200); border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden; }
  .auth-reset-success-inner { text-align:center; padding:24px 16px; }
  .auth-reset-icon          { font-size:2.2rem; margin-bottom:10px; }
  .auth-reset-title         { font-weight:700; font-size:1rem; margin-bottom:6px; }
  .auth-reset-sub           { font-size:0.82rem; color:var(--gray-400); line-height:1.6; }

  /* ──────────────────────────────────────────────────────────
    LANDING PAGE
  ────────────────────────────────────────────────────────── */
  .landing { background:var(--white); min-height:100vh }
  .landing-nav {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 40px; border-bottom:1px solid var(--gray-100);
    position:sticky; top:0;
    background:rgba(255,255,255,0.97); backdrop-filter:blur(14px); z-index:50;
  }
  .landing-nav-logo { display:flex; align-items:center; gap:10px }
  .landing-nav-logo img { width:32px; border-radius:var(--r-sm); flex-shrink:0 }
  .landing-nav-logo .brand { font-family:var(--font-head); font-size:0.9rem; font-weight:700; white-space:nowrap }
  .landing-nav-brand { display:flex; flex-direction:column; gap:1px }
  .landing-nav-sub { font-size:0.65rem; color:var(--gray-400); font-weight:500; white-space:nowrap }
  /* "Start →" short label — hidden on wide screens */
  .landing-nav-cta-short { display:none }

  /* Hero */
  .landing-hero {
    max-width:1120px; margin:0 auto;
    padding:72px 40px 56px;
    display:grid; grid-template-columns:1fr 1fr;
    gap:60px; align-items:center;
  }
  .hero-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 13px; background:var(--sky-light);
    border-radius:var(--r-full);
    font-size:0.72rem; font-weight:600; color:var(--sky); margin-bottom:16px;
  }
  .hero-title {
    font-family:var(--font-head);
    font-size:clamp(2rem,4.5vw,3.1rem); font-weight:700;
    line-height:1.07; margin-bottom:18px; color:var(--black);
  }
  .hero-title span { color:var(--sky) }
  .hero-desc { font-size:0.95rem; color:var(--gray-500); line-height:1.75; margin-bottom:28px }
  .hero-actions { display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap }
  .hero-stats { display:flex; align-items:center; gap:28px }
  .hero-stat-val { font-family:var(--font-head); font-size:1.5rem; font-weight:700; color:var(--black) }
  .hero-stat-lbl { font-size:0.72rem; color:var(--gray-400); font-weight:500 }

  .hero-card {
    background:var(--gray-50); border:1px solid var(--gray-200);
    border-radius:var(--r-2xl); padding:24px; transition:all 0.18s;
  }
  .feature-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px }
  .feature-item {
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:var(--r-xl); padding:14px; transition:all 0.15s;
  }
  .feature-item:hover { border-color:var(--sky); box-shadow:var(--shadow-sky) }
  .feature-item h4 { font-size:0.8rem; font-weight:700; margin-bottom:3px }
  .feature-item p  { font-size:0.72rem; color:var(--gray-400) }

  /* How it works */
  .how-section { max-width:1120px; margin:0 auto; padding:56px 40px }
  .step-cards  { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px }
  .step-card {
    background:var(--white); border:1px solid var(--gray-200);
    border-radius:var(--r-2xl); padding:24px; transition:all 0.18s;
  }
  .step-card:hover { border-color:var(--sky); box-shadow:var(--shadow-sky); transform:translateY(-3px) }
  .step-number {
    width:34px; height:34px; background:var(--sky); color:white;
    border-radius:var(--r-lg); display:flex; align-items:center;
    justify-content:center; font-size:0.85rem; font-weight:700; margin-bottom:14px;
  }

  /* CTA banner */
  .cta-banner { max-width:1120px; margin:0 auto 80px; padding:0 40px }
  .cta-inner {
    background:linear-gradient(135deg,var(--black) 0%,var(--gray-900) 100%);
    border-radius:var(--r-2xl); padding:48px 56px;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; flex-wrap:wrap; position:relative; overflow:hidden;
  }
  .cta-inner::before {
    content:''; position:absolute; top:-60px; right:-60px;
    width:200px; height:200px; border-radius:50%;
    background:var(--sky-glow);
  }

  /* Testing banner */
  .testing-banner {
    background:linear-gradient(90deg,var(--purple),#9B59B6);
    color:white; padding:9px 18px;
    font-size:0.75rem; font-weight:600;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .testing-banner .tag {
    background:rgba(255,255,255,0.2); padding:2px 9px;
    border-radius:var(--r-full); font-size:0.65rem;
    letter-spacing:0.07em; text-transform:uppercase;
  }




  

  /* ──────────────────────────────────────────────────────────
    RESPONSIVE
  ────────────────────────────────────────────────────────── */
  @media(max-width:1080px){
    :root{ --nav-w:240px }
    .grid-4 { grid-template-columns:repeat(2,1fr) }
    .landing-hero { gap:36px }
  }
  @media(max-width:1100px){
    .auth-left  { padding:40px 36px }
    .auth-hero-text { font-size:clamp(1.4rem,2.4vw,2rem) }
    .auth-right { padding:32px 28px }
  }
  @media(max-width:900px){
    .auth-page  { grid-template-columns:1fr }
    .auth-left  { display:none }
    .auth-right { padding:32px 22px; min-height:100vh; align-items:flex-start; padding-top:52px }
  }
  @media(max-width:768px){
    :root{ --nav-w:265px }
    .sidebar            { transform:translateX(calc(-1 * var(--nav-w))); box-shadow:none }
    .sidebar.open       { transform:translateX(0); box-shadow:var(--shadow-lg) }
    .sidebar-overlay    { display:block }
    .main-content       { margin-left:0 }
    .topbar             { display:none }
    .mobile-topbar      { display:flex }
    .bottom-nav         { display:flex }
    .page-body          { padding:12px 14px 72px }
    .page-header        { padding:12px 14px 0 }
    .grid-3             { grid-template-columns:1fr }
    .grid-2             { grid-template-columns:repeat(2,1fr) }
    .landing-hero       { grid-template-columns:1fr; padding:32px 16px }
    .hero-card,.feature-row { display:none }
    .how-section        { padding:28px 16px }
    .step-cards         { grid-template-columns:1fr; gap:16px }
    .cta-inner          { padding:24px 20px }
    .cta-banner         { padding:0 16px }
    .landing-nav        { padding:8px 12px }
    .landing-nav-sub    { display:none }
    .focus-display      { font-size:1.8rem }
    .focus-card         { margin-bottom:12px }
    .day-hero           { flex-direction:column; gap:16px; text-align:center }
    .day-hero-left     { flex:1 }
    .day-hero-right    { justify-content:center }
    .day-hero-countdown { font-size:1.6rem }
    .mini-stat          { padding:12px; min-height:80px }
    .mini-stat-value   { font-size:1.3rem }
    .mini-stat-label    { font-size:0.7rem }
    .mini-stat-sub     { font-size:0.65rem }
    .card              { padding:16px; margin-bottom:12px }
    .alert             { padding:12px 14px; font-size:0.8rem }
    .btn               { padding:10px 16px; font-size:0.85rem }
    .form-control       { font-size:0.9rem }
    .testing-banner     { padding:8px 14px; font-size:0.7rem; flex-direction:column; gap:6px; text-align:center }
    .testing-banner .tag { font-size:0.6rem }
  }
  @media(max-width:480px){
    /* Landing nav: hide "Sign In", shrink CTA to "Start →" */
    .landing-nav-signin    { display:none }
    .landing-nav-cta-full  { display:none }
    .landing-nav-cta-short { display:inline }
    .landing-nav-logo img  { width:26px }
    .landing-nav-logo .brand { font-size:0.78rem }

    .hero-title         { font-size:1.6rem }
    .hero-actions       { flex-direction:column }
    .hero-actions .btn  { width:100%; margin-bottom:8px }
    .grid-4             { grid-template-columns:1fr; gap:12px }
    .stat-card .stat-value { font-size:1.4rem }
    .stat-card .stat-label  { font-size:0.75rem }
    .stat-card .stat-sub   { font-size:0.65rem }
    .auth-form-card     { max-width:100%; padding:20px 16px }
    .day-hero-countdown { font-size:1.5rem }
    .focus-display      { font-size:1.6rem }
    .focus-btn          { padding:8px 12px; font-size:0.8rem }
    .focus-description  { font-size:0.68rem; padding:8px 10px }
    .page-header h2     { font-size:1.4rem }
    .page-header p      { font-size:0.85rem }
    .badge              { font-size:0.65rem; padding:4px 8px }
    .mobile-topbar      { padding:12px 14px }
    .bottom-nav         { padding:8px 0 }
    .bottom-nav .nav-item, .bottom-nav-item { font-size:0.65rem; padding:6px 10px }
    .grid-4             { grid-template-columns:repeat(2,1fr); gap:10px }
    .modal              { margin:16px; max-width:calc(100vw - 32px) }
    .modal-header       { padding:16px; }
    .modal-body         { padding:16px; }
    .modal-lg           { max-width:calc(100vw - 32px); margin:16px }
    .upload-area        { padding:20px; font-size:0.85rem }
    .mcq-result-tile   { min-width:50px; font-size:0.75rem }
    .table-wrap         { font-size:0.8rem }
    .table-wrap th     { padding:8px 6px; font-size:0.75rem }
    .table-wrap td     { padding:8px 6px }
    .day-grid           { grid-template-columns:repeat(auto-fit, minmax(60px, 1fr)); gap:8px }
    .day-tile          { min-height:60px; font-size:0.8rem }
    .solution-btn       { padding:8px 12px; font-size:0.75rem }
  }

/* ── Admin Timer Box ── */
.admin-timer-box {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
}

.timer-section {
  text-align: center;
}

.timer-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: var(--gray-600);
}

.timer-display {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Readex Pro', monospace;
  margin-bottom: 4px;
  line-height: 1;
}

.timer-status {
  font-size: 0.7rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.testing-timer .timer-label {
  color: var(--purple);
}

.testing-timer .timer-display {
  color: var(--purple);
}

.testing-timer .timer-status {
  color: var(--purple);
}

.live-timer .timer-label {
  color: var(--blue);
}

.live-timer .timer-display {
  color: var(--blue);
}

.live-timer .timer-status {
  color: var(--blue);
}

/* ── Focus Timer Description ── */
.focus-description {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  color: var(--gray-600);
  line-height: 1.4;
  text-align: center;
}

/* ── Additional Mobile Improvements ── */
@media(max-width:768px){
  .admin-timer-box {
    max-width: 180px;
    padding: 14px 16px;
  }
  
  .timer-display {
    font-size: 1.2rem;
  }
  
  .timer-label {
    font-size: 0.7rem;
  }
  
  .timer-status {
    font-size: 0.65rem;
  }
  
  /* Better touch targets */
  .btn, .focus-btn, .stat-card {
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  /* Better spacing for mobile */
  .card {
    margin-bottom:16px;
  }
  
  /* Improved form elements */
  .form-group {
    margin-bottom:20px;
  }
  
  .form-control {
    min-height:44px;
    padding:12px;
  }
  
  /* Better navigation */
  .nav-item {
    min-height:48px;
    padding:12px 16px;
  }
  
  /* Better table responsiveness */
  .table-wrap {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  
  /* Better modal handling */
  .modal-backdrop {
    padding:16px;
  }
  
  /* Better file upload areas */
  .upload-area {
    min-height:120px;
    padding:20px;
  }
  
  /* Better user dropdown */
  .user-dropdown {
    position:fixed;
    bottom:80px;
    right:16px;
    left:auto;
    top:auto;
    width:calc(100vw - 32px);
    max-width:300px;
  }
  
  /* Better mobile topbar */
  .mobile-topbar {
    padding:12px 16px;
    min-height:60px;
  }
  
  /* Better bottom navigation */
  .bottom-nav {
    height:70px;
    padding:8px 0;
  }
  
  .bottom-nav .nav-item {
    flex:1;
    min-height:54px;
    font-size:0.7rem;
  }
  
  /* Better day grid on mobile */
  .day-grid {
    grid-template-columns:repeat(auto-fit, minmax(50px, 1fr));
    gap:6px;
  }
  
  .day-tile {
    min-height:50px;
    font-size:0.75rem;
  }
  
  /* Better focus timer on mobile */
  .focus-card {
    padding:16px;
  }
  
  .focus-controls {
    gap:8px;
  }
  
  /* Better submission form */
  .submission-section {
    margin-bottom:20px;
  }
  
  /* Better leaderboard */
  .leaderboard-table {
    font-size:0.8rem;
  }
  
  /* Better quotes section */
  .quote-section {
    padding:16px;
    font-size:0.8rem;
  }
}

@media(max-width:480px){
  .focus-description {
    font-size: 0.7rem;
    padding: 8px 12px;
  }
  
  /* Even smaller screens */
  .day-grid {
    grid-template-columns:repeat(auto-fit, minmax(45px, 1fr));
  }
  
  .day-tile {
    min-height:45px;
    font-size:0.7rem;
  }
  
  .mobile-topbar {
    padding:10px 12px;
    min-height:56px;
  }
  
  .bottom-nav {
    height:64px;
  }
  
  .focus-display {
    font-size:1.4rem;
  }
  
  .focus-btn {
    padding:6px 10px;
    font-size:0.75rem;
    min-height:40px;
  }
  
  .user-dropdown {
    bottom:70px;
    right:12px;
    width:calc(100vw - 24px);
  }
}

/* ── Enhanced Submission Form ── */
.grading-info-card {
  background: linear-gradient(135deg, var(--blue-light), var(--sky-pale));
  border: 1px solid var(--blue-light);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 24px;
  max-height: 400px;
  overflow-y: auto;
}

.grading-info-header {
  text-align: center;
  margin-bottom: 16px;
  color: var(--blue);
}

.grading-info-content {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
  overflow-y: auto;
  max-height: 300px;
}

.grading-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  padding: 16px;
}

.grading-section-title {
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.grading-section-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray-600);
}

.auto-grade-badge {
  background: var(--green);
  color: white;
  padding: 4px 8px;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: inline-block;
}

.manual-grade-badge {
  background: var(--orange);
  color: white;
  padding: 4px 8px;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: inline-block;
}

.grading-info-footer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray-700);
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

.submission-section {
  margin-bottom: 24px;
}

.submission-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.upload-enhanced {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.upload-instructions {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  padding: 16px;
}

.upload-instructions h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: var(--gray-800);
}

.upload-instructions p {
  margin: 0 0 12px 0;
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.4;
}

.upload-tips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tip {
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 500;
}

.upload-zone-enhanced {
  border: 2px dashed var(--gray-300);
  border-radius: var(--r-md);
  padding: 32px 20px;
  text-align: center;
  background: var(--white);
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.upload-zone-enhanced:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  transform: scale(1.02);
}

.upload-zone-enhanced.dragover {
  border-color: var(--blue);
  background: var(--blue-light);
  transform: scale(1.02);
}

.upload-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
  color: var(--gray-400);
}

.upload-text h5 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: var(--gray-800);
  font-weight: 600;
}

.upload-text p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray-500);
}

.submission-summary {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 20px;
  margin-top: 24px;
}

.summary-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 16px;
  text-align: center;
}

.summary-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
}

.summary-label {
  font-size: 0.9rem;
  color: var(--gray-600);
  font-weight: 500;
}

.summary-points {
  font-size: 0.9rem;
  color: var(--blue);
  font-weight: 600;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  font-weight: 500;
}

.total-label {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 500;
}

.total-points {
  font-size: 1rem;
  color: var(--gray-700);
  font-weight: 500;
}

/* Mobile Responsive for Submission Form */
@media(max-width:768px){
  .grading-info-card {
    padding: 16px;
    margin-bottom: 20px;
    max-height: 300px;
  }
  
  .grading-info-content {
    grid-template-columns: 1fr;
    gap: 12px;
    max-height: 250px;
  }
  
  .grading-section {
    padding: 12px;
  }
  
  .upload-enhanced {
    gap: 12px;
  }
  
  .upload-zone-enhanced {
    padding: 24px 16px;
    min-height: 140px;
  }
  
  .upload-icon {
    font-size: 2rem;
  }
  
  .upload-tips {
    gap: 8px;
  }
  
  .submission-summary {
    padding: 16px;
  }
  
  .summary-grid {
    gap: 8px;
  }
  
  .summary-item {
    padding: 10px;
  }
}

@media(max-width:480px){
  .grading-info-card {
    padding: 12px;
    margin-bottom: 16px;
    max-height: 250px;
  }
  
  .upload-zone-enhanced {
    padding: 20px 12px;
    min-height: 120px;
  }
  
  .upload-icon {
    font-size: 1.8rem;
  }
  
  .upload-text h5 {
    font-size: 0.9rem;
  }
  
  .upload-tips {
    flex-direction: column;
    gap: 6px;
  }
}

/* ── Days Overview ── */
.day-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.day-tile {
  min-height: 60px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--white);
  flex: 1 1 auto; /* Allow tiles to grow and shrink */
  min-width: 60px; /* Minimum width */
  max-width: 120px; /* Maximum width */
}

.day-tile:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  transform: translateY(-2px);
}

.day-tile.has-content {
  background: var(--green-light);
  border-color: var(--green);
}

.day-tile.graded {
  background: var(--blue-light);
  border-color: var(--blue);
}

.tile-num {
  font-weight: 600;
  color: var(--gray-700);
}

.tile-title {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-weight: 500;
}

/* Mobile Responsive for Days Overview */
@media(max-width:768px){
  .day-grid {
    gap: 6px;
  }
  
  .day-tile {
    min-height: 50px;
    font-size: 0.75rem;
    padding: 6px;
    min-width: 50px;
    max-width: 100px;
  }
  
  .tile-num {
    font-size: 0.9rem;
  }
  
  .tile-title {
    font-size: 0.7rem;
  }
  
  .table-wrap {
    font-size: 0.8rem;
  }
  
  .table-wrap th {
    padding: 6px 4px;
    font-size: 0.75rem;
  }
  
  .table-wrap td {
    padding: 6px 4px;
    font-size: 0.75rem;
  }
}

@media(max-width:480px){
  .day-grid {
    gap: 4px;
  }
  
  .day-tile {
    min-height: 45px;
    font-size: 0.7rem;
    padding: 4px;
    min-width: 45px;
    max-width: 90px;
  }
  
  .tile-num {
    font-size: 0.85rem;
  }
  
  .tile-title {
    font-size: 0.65rem;
  }
  
  .table-wrap {
    font-size: 0.75rem;
  }
  
  .table-wrap th {
    padding: 4px 2px;
    font-size: 0.7rem;
  }
  
  .table-wrap td {
    padding: 4px 2px;
    font-size: 0.7rem;
  }
}

/* ============================================================
   DASHBOARD UI IMPROVEMENTS
   ============================================================ */

/* ── Nav icons ── */
.nav-item-svg {
  width:18px; height:18px; flex-shrink:0;
  opacity:0.55; transition:opacity 0.18s;
}
.nav-item:hover .nav-item-svg,
.nav-item.active .nav-item-svg { opacity:1 }
.bnav-svg {
  width:20px; height:20px;
  transition:transform 0.2s var(--spring);
}
.bottom-nav-item.active .bnav-svg { transform:scale(1.15) }

/* ── Stat cards grid (replaces mini-stat) ── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px;
}
@media(max-width:900px){ .stats-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:480px){ .stats-grid { grid-template-columns:repeat(2,1fr); gap:8px } }
@media(max-width:375px){ .stats-grid { grid-template-columns:repeat(2,1fr); gap:6px } }

.stat-card {
  background:var(--white);
  border-radius:var(--r-xl);
  gap:15px;
  padding:16px 18px 14px;
  border:1px solid var(--gray-100);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
  transition:box-shadow 0.2s, transform 0.2s;
}
.stat-card:hover { box-shadow:var(--shadow); transform:translateY(-2px) }
.stat-card::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--sc-accent, var(--sky));
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.stat-card-icon {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--sc-icon-bg, var(--sky-light));
  display:flex; align-items:center; justify-content:center;
  
}
.stat-card-icon svg { width:17px; height:17px }
.stat-card-label {
  font-size:0.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.09em; color:var(--gray-400); margin-bottom:3px;
}
.stat-card-value {
  font-family:var(--font-head);
  font-size:1.55rem; font-weight:800; color:var(--gray-900);
  line-height:1; color:var(--sc-color, var(--gray-900));
}
.stat-card-sub { font-size:0.7rem; color:var(--gray-400); margin-top:4px }

/* ── Leaderboard podium (top 3) ── */
.lb-podium {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:10px; margin-bottom:16px;
}
.lb-podium-item {
  background:var(--white); border:2px solid var(--gray-100);
  border-radius:var(--r-xl); padding:18px 12px 14px;
  text-align:center; transition:all 0.2s;
  position:relative; overflow:hidden;
}
.lb-podium-item::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--podium-color, var(--gray-300));
}
.lb-podium-item.p1 {
  --podium-color: #F59E0B;
  border-color:rgba(245,158,11,0.35);
  box-shadow:0 6px 20px rgba(245,158,11,0.15);
}
.lb-podium-item.p2 {
  --podium-color: #9CA3AF;
  border-color:rgba(156,163,175,0.35);
}
.lb-podium-item.p3 {
  --podium-color: #CD7F32;
  border-color:rgba(205,127,50,0.3);
}
.lb-podium-medal { font-size:1.5rem; margin-bottom:8px; display:block }
.lb-podium-pos {
  font-size:0.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--gray-400); margin-bottom:4px;
}
.lb-podium-name {
  font-size:0.8rem; font-weight:700; color:var(--gray-800);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb-podium-csp {
  font-size:0.72rem; color:var(--gray-500); margin-top:3px;
}
.lb-csp { font-size:0.9rem; font-weight:700; color:var(--sky-dark) }

/* ── Referral page ── */
.ref-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.ref-stat      { background:var(--white); border:1.5px solid var(--gray-200); border-radius:var(--r-lg); padding:16px 12px; text-align:center; }
.ref-stat-accent { background:linear-gradient(135deg,var(--sky) 0%,var(--teal) 100%); border-color:transparent; }
.ref-stat-accent .ref-stat-val,.ref-stat-accent .ref-stat-lbl { color:#635d5d; }
.ref-stat-val  { font-size:1.5rem; font-weight:800; color:var(--black); line-height:1; margin-bottom:4px; }
.ref-stat-lbl  { font-size:0.72rem; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.ref-share-card { background:linear-gradient(135deg,#0B1E30 0%,#0E2840 100%); border-radius:var(--r-xl); padding:22px; margin-bottom:16px; box-shadow:0 4px 20px rgba(14,165,233,0.18); }
.ref-share-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ref-share-label  { font-size:0.72rem; font-weight:700; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.ref-code-hero    { font-family:monospace; font-size:2rem; font-weight:900; letter-spacing:0.25em; color:var(--sky); user-select:all; }
.ref-link-strip   { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.07); border-radius:var(--r-lg); padding:10px 14px; }
.ref-link-url     { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.75rem; color:rgba(255,255,255,0.55); }
.ref-referred-by-note { display:flex; align-items:center; gap:7px; margin-top:12px; font-size:0.78rem; color:rgba(255,255,255,0.45); }
.ref-referred-by-note strong { color:rgba(255,255,255,0.75); }
.ref-how-row   { display:flex; align-items:center; gap:8px; background:var(--gray-50); border-radius:var(--r-lg); padding:16px; margin-bottom:16px; flex-wrap:wrap; }
.ref-how-step  { display:flex; align-items:center; gap:10px; flex:1; min-width:130px; }
.ref-how-num   { width:30px; height:30px; border-radius:50%; background:var(--sky); color:#fff; font-weight:800; font-size:0.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ref-how-title { font-size:0.82rem; font-weight:700; }
.ref-how-desc  { font-size:0.72rem; color:var(--gray-400); }
.ref-how-arrow { font-size:1.2rem; color:var(--gray-300); flex-shrink:0; }
.ref-person-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--gray-100); }
.ref-person-row:last-child { border-bottom:none; }
.ref-person-num { font-size:0.72rem; color:var(--gray-400); width:18px; text-align:right; flex-shrink:0; }
.ref-empty      { text-align:center; padding:28px 16px; color:var(--gray-400); }

/* Legacy kept for any lingering references */
.ref-code-display { display:flex; align-items:center; gap:8px; background:var(--gray-900); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:14px; }
.ref-code-mono    { flex:1; font-family:monospace; font-size:1.3rem; font-weight:700; letter-spacing:0.2em; color:var(--sky); user-select:all; }
.ref-link-box     { display:flex; align-items:center; gap:8px; background:var(--sky-pale); border:1px solid var(--sky-light); padding:9px 12px; border-radius:var(--r-sm); }
.ref-link-text    { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.75rem; color:var(--sky-dark); }
.referral-referred-by { display:flex; align-items:center; gap:8px; margin-top:12px; padding:10px 12px; background:var(--gray-50); border-radius:var(--r-sm); border:1px solid var(--gray-100); font-size:0.8rem; color:var(--gray-600); }
.referral-referred-by strong { color:var(--gray-800) }

/* Confirm-password match hint */
.pw-match-hint          { font-size:0.72rem; font-weight:600; margin-top:5px; }
.pw-match-hint.match    { color:#10b981; }
.pw-match-hint.no-match { color:#ef4444; }

/* Referral stats responsive */
@media (max-width:600px) {
  .ref-stats-row { grid-template-columns:1fr 1fr; gap:8px; }
  .ref-stat { padding:12px 8px; }
  .ref-stat-val { font-size:1.2rem; }
  .ref-stat-lbl { font-size:0.65rem; }
}

/* ── Extra small phones (iPhone SE, Samsung A7) ── */
@media(max-width:375px){
  .page-body          { padding:10px 10px 72px }
  .page-header        { padding:10px 10px 0 }

  .stat-card          { padding:8px 10px 8px }
  .stat-card-value    { font-size:1.05rem }
  .stat-card-icon     { width:24px; height:24px }

  .ref-stats-row      { grid-template-columns:1fr 1fr; gap:6px }
  .ref-stat           { padding:10px 6px }
  .ref-stat-val       { font-size:1.1rem }
  .ref-stat-lbl       { font-size:0.6rem; letter-spacing:0 }

  .ref-code-hero      { font-size:1.3rem; letter-spacing:0.15em }
  .ref-share-card     { padding:16px 14px }
  .ref-link-strip     { padding:8px 10px }
  .ref-link-url       { font-size:0.68rem }

  .day-hero           { padding:16px }
  .day-hero-countdown { font-size:1.3rem }
  .day-hero-day       { font-size:1.3rem }

  .card               { padding:12px }
  .btn                { padding:9px 14px; font-size:0.82rem }
  .mobile-topbar      { padding:8px 10px }
}

/* ── Legal modal ── */
.legal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:16px;
  backdrop-filter:blur(4px);
}
.legal-modal {
  background:var(--white); border-radius:var(--r-xl);
  max-width:580px; width:100%; max-height:85vh;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
.legal-modal-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:22px 24px 16px; border-bottom:1px solid var(--gray-100);
}
.legal-modal-title { font-family:var(--font-head); font-size:1.1rem; font-weight:700; margin-bottom:2px; }
.legal-modal-date  { font-size:0.72rem; color:var(--gray-400); }
.legal-close {
  background:var(--gray-100); border:none; border-radius:50%;
  width:30px; height:30px; cursor:pointer; font-size:1.1rem;
  color:var(--gray-500); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-left:12px;
}
.legal-close:hover { background:var(--gray-200); }
.legal-modal-body {
  overflow-y:auto; padding:20px 24px; flex:1;
  font-size:0.84rem; line-height:1.7; color:var(--gray-600);
}
.legal-modal-body h4 { font-size:0.9rem; font-weight:700; color:var(--black); margin:18px 0 6px; }
.legal-modal-body h4:first-child { margin-top:0; }
.legal-modal-body p  { margin-bottom:10px; }
.legal-modal-body ul { padding-left:20px; margin-bottom:10px; }
.legal-modal-body li { margin-bottom:4px; }
.legal-modal-footer  { padding:16px 24px; border-top:1px solid var(--gray-100); display:flex; justify-content:flex-end; }

/* ── Focus timer enhanced ── */
@keyframes focusPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(14,165,233,0.4) }
  50%      { box-shadow:0 0 0 10px rgba(14,165,233,0) }
}
.focus-display.running {
  animation:none; /* keep text, pulse via parent */
}
.focus-card.is-running {
  animation:focusPulse 2.5s ease infinite;
  box-shadow:var(--shadow-sky-lg);
}
.focus-streak-info {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:10px; padding:8px 14px;
  background:rgba(255,255,255,0.06); border-radius:var(--r-full);
  font-size:0.72rem; color:rgba(255,255,255,0.55);
}
.focus-streak-info strong { color:var(--sky); font-size:0.78rem }

/* ── Quote card ── */
.quote-card {
  padding:14px 18px;
  background:linear-gradient(135deg,var(--sky-pale) 0%,var(--white) 100%);
  border-radius:var(--r-lg);
  border:1px solid var(--sky-light);
  margin-top:14px;
}
.quote-card p {
  font-style:italic; color:var(--gray-500);
  font-size:0.82rem; line-height:1.65;
}

/* ── Days overview enhancements ── */
.day-tile { position:relative }
.day-tile .tile-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--gray-300); margin:3px auto 0;
}
.day-tile.has-content .tile-dot { background:var(--green) }

/* ── Submission section enhancements ── */
.upload-zone-enhanced .upload-icon {
  width:44px; height:44px; border-radius:var(--r-lg);
  background:var(--sky-light); color:var(--sky);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px; font-size:0;
}
.upload-zone-enhanced .upload-icon svg { width:22px; height:22px }

/* ── Stat card value safety ── */
.stat-card-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Mobile compact unit — hidden by default, shown only in ≤480px via @media rule */
.sc-mob-unit { display:none }

/* ── PDF watermark overlay ── */
.pdf-watermark {
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80'%3E%3Ctext x='50%25' y='55%25' transform='rotate(-25 110 40)' text-anchor='middle' fill='rgba(0%2C0%2C0%2C0.055)' font-size='14' font-family='sans-serif' font-weight='600'%3ENELCO Explains 0795CSC%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
}



/* ── Days table — hide section detail cols on small screens ── */
@media(max-width:600px){
  .col-hide-mobile { display:none !important }
}

/* ── Mobile overrides for dashboard enhancements ── */
@media(max-width:768px){
  /* Stat cards: 2-column, compact */
  .stats-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:12px;
  }
  .stat-card { padding:12px 14px 10px }
  .stat-card-icon { width:28px; height:28px; border-radius:var(--r-xs); margin-bottom:7px }
  .stat-card-icon svg { width:14px; height:14px }
  .stat-card-label { font-size:0.6rem }
  .stat-card-value { font-size:1.25rem }
  .stat-card-sub   { font-size:0.63rem }

  /* Leaderboard podium: compact for mobile */
  .lb-podium { gap:6px; margin-bottom:12px }
  .lb-podium-item { padding:12px 8px 10px }
  .lb-podium-item.p1 { transform:none } /* no scale — prevents overflow */
  .lb-podium-medal  { font-size:1.1rem; margin-bottom:4px }
  .lb-podium-pos    { font-size:0.55rem }
  .lb-podium-name   { font-size:0.7rem; margin-top:4px }
  .lb-podium-csp    { font-size:0.62rem }

  /* Referral code: smaller monospace */
  .ref-code-display { padding:10px 12px }
  .ref-code-mono    { font-size:1.1rem; letter-spacing:0.12em }

  /* Focus streak info wraps cleanly */
  .focus-streak-info { font-size:0.68rem; flex-wrap:wrap }

  /* PDF viewer: taller on mobile so content is readable */
  .pdf-frame-wrap { height:360px }
}

@media(max-width:750px){
  /* Stats: stay 2-col but tighter — hide labels, show compact units */
  .stats-grid { gap:8px; margin-bottom:10px }
  .stat-card  { padding:10px 11px 8px }
  .stat-card-label { display:none }
  .stat-card-value { font-size:1.15rem }
  .stat-card-sub   { display:none }
  .sc-mob-unit     { display:inline; font-size:0.75rem; font-weight:600; color:var(--gray-400); margin-left:1px }
  /* Bottom nav icons: right size */
  .bnav-svg { width:18px; height:18px }
  /* PDF viewer: fill available height better */
  .pdf-frame-wrap { height:320px }
  .pdf-toolbar { padding:8px 12px }
  .pdf-title   { font-size:0.75rem }
  /* Days table: tighter on small phones */
  .table-wrap table { font-size:0.75rem }
  .table-wrap th, .table-wrap td { padding:6px 5px }
  /* Quote card: smaller text */
  .quote-card p { font-size:0.78rem }
}

/* ──────────────────────────────────────────────────────────
  LAYOUT STACKING FIXES
  (topbar sticky, bottom-nav fixed, scrollable content area)
────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

/* Fix bottom nav to bottom of screen */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Make main content scrollable between the two fixed bars */
.main-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#page-content {
  flex: 1;
  overflow-y: auto;
  /* Add bottom padding so content doesn't hide behind the fixed bottom nav */
  padding-bottom: 80px;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */

/* Smooth transition on every element when theme switches */
*, *::before, *::after {
  transition:
    background-color 0.2s ease,
    border-color     0.2s ease,
    color            0.2s ease,
    box-shadow       0.2s ease;
}

[data-theme="dark"] {
  /* ── Core backgrounds ── */
  --bg:              #0F1117;
  --bg-secondary:    #161B27;
  --bg-card:         #1C2333;
  --bg-hover:        #242D42;

  /* ── Text ── */
  --gray-900:        #F0F4FF;
  --gray-700:        #C8D0E0;
  --gray-600:        #A0AABF;
  --gray-500:        #7A8599;
  --gray-400:        #566070;
  --gray-300:        #3A4455;
  --gray-200:        #2A3347;
  --gray-100:        #1E2738;
  --gray-50:         #181F2E;

  /* ── Brand blues (slightly brightened for dark bg) ── */
  --blue:            #4D9EFF;
  --blue-light:      #2A4A7A;
  --blue-pale:       #162040;
  --sky:             #38BDF8;
  --sky-light:       #0C2A3F;
  --sky-dark:        #7DD3FC;

  /* ── Greens ── */
  --green:           #34D399;
  --green-light:     #0A2E20;

  /* ── Yellows / warnings ── */
  --yellow:          #FBBF24;
  --yellow-light:    #2D2008;

  /* ── Reds ── */
  --red:             #F87171;
  --red-light:       #2D0F0F;

  /* ── Purple ── */
  --purple:          #A78BFA;
  --purple-light:    #1E1435;

  /* ── Orange ── */
  --orange:          #FB923C;

  /* ── Sidebar ── */
  --sidebar-bg:      #0D1120;
  --sidebar-border:  #1E2A40;
  --sidebar-text:    #8899BB;
  --sidebar-active:  #4D9EFF;

  /* ── Shadows ── */
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.6);
}

/* ── Body background ── */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--gray-900);
}

/* ── Cards ── */
[data-theme="dark"] .card {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

/* ── Sidebar ── */
[data-theme="dark"] .sidebar {
  background: var(--sidebar-bg);
  border-right-color: var(--sidebar-border);
}

[data-theme="dark"] .sidebar-logo {
  border-bottom-color: var(--sidebar-border);
}

[data-theme="dark"] .sidebar-logo-text .brand {
  color: var(--gray-900);
}

[data-theme="dark"] .sidebar-logo-text .sub {
  color: var(--gray-500);
}

[data-theme="dark"] .nav-item {
  color: var(--sidebar-text);
}

[data-theme="dark"] .nav-item:hover {
  background: var(--bg-hover);
  color: var(--gray-900);
}

[data-theme="dark"] .nav-item.active {
  background: var(--blue-pale);
  color: var(--sidebar-active);
}

[data-theme="dark"] .nav-section-label {
  color: var(--gray-400);
}

[data-theme="dark"] .sidebar-footer {
  border-top-color: var(--sidebar-border);
}

[data-theme="dark"] .user-chip {
  background: var(--bg-hover);
}

[data-theme="dark"] .user-chip .name {
  color: var(--gray-900);
}

[data-theme="dark"] .user-chip .role {
  color: var(--gray-500);
}

/* ── Topbar ── */
[data-theme="dark"] .topbar {
  background: var(--bg-secondary);
  border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .topbar-title {
  color: var(--gray-900);
}

[data-theme="dark"] .topbar-stat {
  background: var(--bg-hover);
  color: var(--gray-700);
}

[data-theme="dark"] .topbar-stat.blue {
  background: var(--blue-pale);
  color: var(--blue);
}

[data-theme="dark"] .topbar-stat.green {
  background: var(--green-light);
  color: var(--green);
}

/* ── Mobile topbar ── */
[data-theme="dark"] .mobile-topbar {
  background: var(--bg-secondary);
  border-bottom-color: var(--gray-200);
}

/* ── Bottom nav ── */
[data-theme="dark"] .bottom-nav {
  background: var(--bg-secondary);
  border-top-color: var(--gray-200);
}

[data-theme="dark"] .bottom-nav-item {
  color: var(--gray-500);
}

[data-theme="dark"] .bottom-nav-item.active {
  color: var(--blue);
}

/* ── Main content ── */
[data-theme="dark"] .main-content {
  background: var(--bg);
}

/* ── Tables ── */
[data-theme="dark"] .table-wrap {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

[data-theme="dark"] table thead tr {
  background: var(--bg-hover);
}

[data-theme="dark"] table th {
  color: var(--gray-500);
  border-bottom-color: var(--gray-200);
}

[data-theme="dark"] table td {
  border-bottom-color: var(--gray-200);
  color: var(--gray-700);
}

[data-theme="dark"] table tr:hover td {
  background: var(--bg-hover);
}

[data-theme="dark"] .row-pending {
  background: rgba(251, 191, 36, 0.05) !important;
}

/* ── Form controls ── */
[data-theme="dark"] .form-control {
  background: var(--bg);
  border-color: var(--gray-300);
  color: var(--gray-900);
}

[data-theme="dark"] .form-control:focus {
  border-color: var(--blue);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(77, 158, 255, 0.15);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--gray-400);
}

[data-theme="dark"] .form-label {
  color: var(--gray-700);
}

[data-theme="dark"] .form-hint {
  color: var(--gray-500);
}

/* ── Buttons ── */
[data-theme="dark"] .btn-secondary {
  background: var(--bg-hover);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

[data-theme="dark"] .btn-secondary:hover {
  background: var(--gray-200);
  border-color: var(--gray-400);
}

[data-theme="dark"] .btn-ghost {
  color: var(--gray-500);
}

[data-theme="dark"] .btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--gray-700);
}

/* ── Alerts ── */
[data-theme="dark"] .alert {
  border-color: var(--gray-300);
}

[data-theme="dark"] .alert-info {
  background: var(--blue-pale);
  border-color: var(--blue-light);
  color: var(--sky-dark);
}

[data-theme="dark"] .alert-success {
  background: var(--green-light);
  border-color: #1a4a35;
  color: var(--green);
}

[data-theme="dark"] .alert-warning {
  background: var(--yellow-light);
  border-color: #5a3a00;
  color: var(--yellow);
}

[data-theme="dark"] .alert-error {
  background: var(--red-light);
  border-color: #5a1a1a;
  color: var(--red);
}

/* ── Badges ── */
[data-theme="dark"] .badge-green {
  background: var(--green-light);
  color: var(--green);
}

[data-theme="dark"] .badge-yellow {
  background: var(--yellow-light);
  color: var(--yellow);
}

[data-theme="dark"] .badge-blue {
  background: var(--blue-pale);
  color: var(--blue);
}

[data-theme="dark"] .badge-purple {
  background: var(--purple-light);
  color: var(--purple);
}

/* ── Modals ── */
[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .modal {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

[data-theme="dark"] .modal-header {
  background: var(--bg-secondary);
  border-bottom-color: var(--gray-200);
  color: var(--gray-900);
}

[data-theme="dark"] .modal-body {
  color: var(--gray-700);
}

[data-theme="dark"] .modal-close {
  color: var(--gray-500);
}

[data-theme="dark"] .modal-close:hover {
  background: var(--bg-hover);
  color: var(--gray-900);
}

/* ── Stat cards ── */
[data-theme="dark"] .stat-card {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

[data-theme="dark"] .stat-card:hover {
  background: var(--bg-hover);
  border-color: var(--gray-300);
}

[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-sub,
[data-theme="dark"] .stat-card-label,
[data-theme="dark"] .stat-card-sub {
  color: var(--gray-500);
}

[data-theme="dark"] .stat-value,
[data-theme="dark"] .stat-card-value {
  color: var(--gray-900);
}

/* ── Day hero ── */
[data-theme="dark"] .day-hero {
  background: linear-gradient(135deg, #1a2744 0%, #0f1829 100%);
  border-color: var(--gray-200);
}

[data-theme="dark"] .day-hero-eyebrow {
  color: var(--blue);
}

[data-theme="dark"] .day-hero-day {
  color: var(--gray-400);
}

[data-theme="dark"] .day-hero-title {
  color: var(--gray-900);
}

[data-theme="dark"] .day-hero-progress-bar {
  background: var(--gray-200);
}

[data-theme="dark"] .day-hero-countdown {
  color: #ffffff;
}

[data-theme="dark"] .day-hero-countdown-label {
  color: rgba(255,255,255,0.55);
}

/* ── Focus card ── */
[data-theme="dark"] .focus-card {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

[data-theme="dark"] .focus-card.is-running {
  background: linear-gradient(135deg, #0a1f10 0%, #0f1f2e 100%);
  border-color: var(--green);
}

[data-theme="dark"] .focus-display {
  color: var(--gray-900);
}

[data-theme="dark"] .focus-card-label {
  color: var(--gray-500);
}

[data-theme="dark"] .focus-streak-info {
  color: var(--gray-500);
}

/* ── Quote card ── */
[data-theme="dark"] .quote-card {
  background: var(--bg-card);
  border-color: var(--gray-200);
  color: var(--gray-500);
}

/* ── Upload zones ── */
[data-theme="dark"] .upload-zone-enhanced {
  background: var(--bg-secondary);
  border-color: var(--gray-300);
}

[data-theme="dark"] .upload-zone-enhanced:hover,
[data-theme="dark"] .upload-zone-enhanced.dragover {
  background: var(--blue-pale);
  border-color: var(--blue);
}

[data-theme="dark"] .upload-instructions {
  color: var(--gray-600);
}

[data-theme="dark"] .upload-tips .tip {
  background: var(--bg-hover);
  color: var(--gray-500);
  border-color: var(--gray-300);
}

/* ── Day tiles ── */
[data-theme="dark"] .day-tile {
  background: var(--bg-card);
  border-color: var(--gray-200);
  color: var(--gray-600);
}

[data-theme="dark"] .day-tile:hover {
  background: var(--bg-hover);
  border-color: var(--gray-300);
}

[data-theme="dark"] .day-tile.has-content {
  background: var(--blue-pale);
  border-color: var(--blue-light);
  color: var(--blue);
}

/* ── Score bars ── */
[data-theme="dark"] .progress-bar-wrap {
  background: var(--gray-200);
}

[data-theme="dark"] .score-total-bar {
  background: var(--bg-hover);
  border-color: var(--gray-300);
  color: var(--gray-900);
}

/* ── Feedback blocks ── */
[data-theme="dark"] .feedback-block {
  background: var(--bg-secondary);
  border-color: var(--gray-300);
}

[data-theme="dark"] .feedback-text {
  color: var(--gray-600);
}

/* ── Referral ── */
[data-theme="dark"] .ref-share-card {
  background: linear-gradient(135deg, #1a2744 0%, #0d1829 100%);
  border-color: var(--blue-light);
}

[data-theme="dark"] .ref-stat {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

[data-theme="dark"] .ref-stat-val {
  color: var(--gray-900);
}

[data-theme="dark"] .ref-stat-lbl {
  color: var(--gray-500);
}

[data-theme="dark"] .ref-how-step {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

[data-theme="dark"] .ref-person-row {
  border-bottom-color: var(--gray-200);
}

/* ── Admin timer box ── */
[data-theme="dark"] .admin-timer-box {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

[data-theme="dark"] .timer-display {
  color: var(--gray-900);
}

[data-theme="dark"] .timer-label,
[data-theme="dark"] .timer-status {
  color: var(--gray-500);
}

/* ── User dropdown ── */
[data-theme="dark"] .user-dropdown {
  background: var(--bg-card);
  border-color: var(--gray-200);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

[data-theme="dark"] .dd-header {
  border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .dname {
  color: var(--gray-900);
}

[data-theme="dark"] .demail {
  color: var(--gray-500);
}

[data-theme="dark"] .dd-item {
  color: var(--gray-700);
}

[data-theme="dark"] .dd-item:hover {
  background: var(--bg-hover);
}

[data-theme="dark"] .dd-divider {
  border-color: var(--gray-200);
}

/* ── Page header ── */
[data-theme="dark"] .page-header {
  border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .page-header-title h2 {
  color: var(--gray-900);
}

[data-theme="dark"] .page-header-title p {
  color: var(--gray-500);
}

/* ── Card label ── */
[data-theme="dark"] .card-label {
  color: var(--gray-500);
}

/* ── Divider ── */
[data-theme="dark"] .divider {
  border-color: var(--gray-200);
}

/* ── MCQ ── */
[data-theme="dark"] .mcq-btn {
  background: var(--bg-secondary);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

[data-theme="dark"] .mcq-btn:hover {
  background: var(--bg-hover);
  border-color: var(--blue);
}

[data-theme="dark"] .mcq-btn.selected {
  background: var(--blue-pale);
  border-color: var(--blue);
  color: var(--blue);
}

[data-theme="dark"] .mcq-result-tile {
  background: var(--bg-card);
  border-color: var(--gray-200);
}

[data-theme="dark"] .mcq-result-correct {
  background: var(--green-light);
  border-color: #1a4a35;
}

[data-theme="dark"] .mcq-result-wrong {
  background: var(--red-light);
  border-color: #5a1a1a;
}

/* ── Grading info card ── */
[data-theme="dark"] .grading-info-card {
  background: var(--bg-secondary);
  border-color: var(--gray-200);
}

[data-theme="dark"] .grading-info-header {
  border-bottom-color: var(--gray-200);
  color: var(--gray-900);
}

[data-theme="dark"] .grading-section-title {
  color: var(--gray-700);
}

[data-theme="dark"] .grading-info-footer {
  background: var(--bg-hover);
  border-top-color: var(--gray-200);
  color: var(--gray-600);
}

/* ── Input wrap ── */
[data-theme="dark"] .input-wrap .input-icon {
  color: var(--gray-500);
}

/* ── Scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 99px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ── Dark mode toggle button ── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: var(--gray-100);
  color: var(--gray-900);
  border-color: var(--gray-300);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 16px;
  height: 16px;
  transition: opacity 0.2s ease, transform 0.3s ease;
  position: absolute;
}

.theme-toggle .icon-sun  { opacity: 1;  transform: rotate(0deg)   scale(1);   }
.theme-toggle .icon-moon { opacity: 0;  transform: rotate(90deg)  scale(0.5); }

[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 0;  transform: rotate(-90deg) scale(0.5); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1;  transform: rotate(0deg)   scale(1);   }

[data-theme="dark"] .theme-toggle {
  border-color: var(--gray-300);
  color: var(--gray-400);
}

[data-theme="dark"] .theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--gray-900);
}

[data-theme="dark"] {
  --pdf-filter: brightness(0.85);
}

[data-theme="dark"] .score-section-row {
  background: var(--bg-secondary);
  border-color: var(--gray-200);
}

[data-theme="dark"] .score-section-name {
  color: var(--gray-700) !important;
}


[data-theme="dark"] .submission-section-header .card-label {
  color: var(--gray-700);
}

[data-theme="dark"] .grading-info-card,
[data-theme="dark"] .submission-section {
  background: var(--bg-secondary);
  border-color: var(--gray-200);
}

/* Section label text */
[data-theme="dark"] .submission-section p {
  color: var(--gray-500) !important;
}

[data-theme="dark"] iframe {
  border: none !important;
  outline: none !important;
}

/* Light mode — keep existing color */
.day-hero-day {
  color: var(--gray-400);  /* whatever it currently is */
}

/* Dark mode — force pure white */
[data-theme="dark"] .day-hero-day {
  color: #ffffff !important;
}

[data-theme="dark"] .day-hero-title {
  color: #ffffff !important;
}

[data-theme="dark"] .day-hero-eyebrow {
  color: var(--blue) !important;
}

[data-theme="dark"] .day-hero-progress-label {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .pdf-container {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .pdf-toolbar {
  background: var(--bg-card) !important;
  border-bottom: 1.5px solid var(--gray-200) !important;
}

[data-theme="dark"] .pdf-title {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .pdf-day-badge {
  background: var(--blue-pale) !important;
  color: var(--blue) !important;
  border-color: var(--blue-light) !important;
}

[data-theme="dark"] .pdf-frame-wrap {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .graded-by-block {
  background: var(--bg-secondary) !important;
}

.app-loader {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #F9FAFB);
  transition: background 0.2s;
}

[data-theme="dark"] .app-loader {
  background: var(--bg) !important;
}

[data-theme="dark"] .loader-status {
  color: var(--gray-500) !important;
}

[data-theme="dark"] .loader-ring {
  border-color: var(--gray-700) !important;
  border-top-color: var(--blue) !important;
}

/* Auth page layout */
.auth-page {
  min-height: 100vh;
  display: grid;
  width: 100%;
  overflow-x: hidden;
}

.auth-left  { min-width: 0; }
.auth-right { min-width: 0; background: var(--bg, #F9FAFB); }

.auth-form-card {
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--gray-200);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 440px;
}

/* Dark mode overrides */
[data-theme="dark"] .auth-right {
  background: var(--bg) !important;
}

[data-theme="dark"] .auth-form-card {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .auth-form-title {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .auth-form-sub {
  color: var(--gray-500) !important;
}

[data-theme="dark"] .form-label {
  color: var(--gray-700) !important;
}

[data-theme="dark"] .form-control {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-900) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--gray-400) !important;
}

[data-theme="dark"] .form-control:focus {
  background: var(--bg-secondary) !important;
  border-color: var(--blue) !important;
}

[data-theme="dark"] .auth-tabs {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .auth-tab {
  color: var(--gray-500) !important;
}

[data-theme="dark"] .auth-tab.active {
  background: var(--bg-card) !important;
  color: var(--gray-900) !important;
}

[data-theme="dark"] .auth-remember,
[data-theme="dark"] .auth-switch-hint,
[data-theme="dark"] .auth-forgot-desc {
  color: var(--gray-500) !important;
}

[data-theme="dark"] .input-suffix {
  background: transparent !important;
  color: var(--gray-400) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] select.form-control option {
  background: var(--bg-card) !important;
  color: var(--gray-900) !important;
}

/* Landing page background */
[data-theme="dark"] .landing {
  background: var(--bg) !important;
}

[data-theme="dark"] .landing-nav {
  background: var(--bg-card) !important;
  border-bottom-color: var(--gray-200) !important;
}

[data-theme="dark"] .landing-nav-brand .brand,
[data-theme="dark"] .landing-nav-sub {
  color: var(--gray-900) !important;
}

/* Hero section */
[data-theme="dark"] .landing-hero {
  background: var(--bg) !important;
}

[data-theme="dark"] .hero-title {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .hero-desc {
  color: var(--gray-600) !important;
}

[data-theme="dark"] .hero-badge {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-700) !important;
}

[data-theme="dark"] .hero-stat-val {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .hero-stat-lbl {
  color: var(--gray-500) !important;
}

/* Feature card (right column dark card — already dark, just fix the inner white cards) */
[data-theme="dark"] .feature-item {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .feature-item h4 {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .feature-item p {
  color: var(--gray-500) !important;
}

/* How it works section */
[data-theme="dark"] .how-section {
  background: var(--bg) !important;
}

[data-theme="dark"] .how-section h2 {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .step-card {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .step-card h3 {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .step-card p {
  color: var(--gray-500) !important;
}

/* Sign In / Get Started buttons in nav */
[data-theme="dark"] .landing-nav-signin {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-900) !important;
}

[data-theme="dark"] .form-control {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-900) !important;
}

[data-theme="dark"] .form-control:focus {
  background: var(--bg-secondary) !important;
  border-color: var(--blue) !important;
  color: var(--gray-900) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--gray-400) !important;
}

[data-theme="dark"] .input-wrap {
  background: var(--bg-secondary) !important;
}

[data-theme="dark"] .input-wrap .form-control {
  background: transparent !important;
}


/* Add to your dark mode CSS section */

[data-theme="dark"] .grading-info-card {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .grading-section {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .grading-section-title {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .grading-section-desc p {
  color: var(--gray-600) !important;
}

[data-theme="dark"] .grading-info-footer {
  background: var(--bg-secondary) !important;
  color: var(--gray-600) !important;
  border-top-color: var(--gray-200) !important;
}

[data-theme="dark"] .mcq-question-card {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .mcq-question-card .q-label {
  color: var(--gray-500) !important;
}

[data-theme="dark"] select.mcq-select,
[data-theme="dark"] .mcq-question-card select {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-900) !important;
}

[data-theme="dark"] .submission-summary {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .summary-item {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .summary-label {
  color: var(--gray-600) !important;
}

[data-theme="dark"] .summary-header {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .summary-total {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-900) !important;
}

[data-theme="dark"] .upload-zone-enhanced {
  background: var(--bg-secondary) !important;
  border-color: var(--gray-300) !important;
}

[data-theme="dark"] .upload-zone-enhanced:hover {
  background: var(--bg-hover) !important;
  border-color: var(--blue) !important;
}

[data-theme="dark"] .upload-enhanced {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .upload-instructions h4 {
  color: var(--gray-900) !important;
}

[data-theme="dark"] .upload-instructions p {
  color: var(--gray-500) !important;
}

[data-theme="dark"] .upload-text h5 {
  color: var(--gray-700) !important;
}

[data-theme="dark"] .upload-text p {
  color: var(--gray-500) !important;
}

[data-theme="dark"] .tip {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-600) !important;
} 

[data-theme="dark"] .mcq-card,
[data-theme="dark"] .mcq-question-card,
[data-theme="dark"] .submission-section .card,
[data-theme="dark"] [class*="mcq"] {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .submission-section {
  background: var(--bg-card) !important;
  border-color: var(--gray-200) !important;
}

[data-theme="dark"] .submission-section-header {
  background: var(--bg-card) !important;
}

.mcq-result-tile.mcq-result-correct {
  background: #166534 !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}
.mcq-result-tile.mcq-result-wrong {
  background: #991b1b !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}
.mcq-result-tile.mcq-result-pending {
  background: var(--gray-100);
  color: var(--gray-600);
}
[data-theme="dark"] .mcq-result-tile.mcq-result-correct {
  background: #14532d !important;
  color: #86efac !important;
  border-color: #16a34a !important;
}
[data-theme="dark"] .mcq-result-tile.mcq-result-wrong {
  background: #7f1d1d !important;
  color: #fca5a5 !important;
  border-color: #dc2626 !important;
}
[data-theme="dark"] .mcq-result-tile.mcq-result-pending {
  background: var(--gray-700);
  color: var(--gray-300);
}

/* ── Question Editor Modal ───────────────────────────────── */
.qe-section { margin-bottom: 20px; }
.qe-section-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gray-400);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.qe-section-label::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.qe-tabs {
  display: flex; gap: 4px; background: var(--gray-100);
  border-radius: var(--r-lg); padding: 3px; margin-bottom: 10px;
}
[data-theme="dark"] .qe-tabs { background: var(--bg-secondary); }
.qe-tab {
  flex: 1; text-align: center; padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 0.78rem; font-weight: 600; color: var(--gray-400);
  cursor: pointer; transition: all 0.15s; font-family: var(--font);
}
.qe-tab.active { background: var(--white); color: var(--sky); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .qe-tab.active { background: var(--bg-card); }
.qe-editor {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg); font-size: 0.83rem; font-family: 'Courier New', monospace;
  color: var(--gray-900); background: var(--white); resize: vertical;
  min-height: 90px; line-height: 1.6; transition: border-color 0.18s;
  outline: none; box-sizing: border-box;
}
.qe-editor:focus { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-glow); }
[data-theme="dark"] .qe-editor { background: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-900); }
.qe-hint { font-size: 0.7rem; color: var(--gray-400); margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; }
.qe-hint-tag {
  background: var(--gray-100); color: var(--gray-500);
  padding: 2px 8px; border-radius: var(--r-full); font-family: monospace; font-size: 0.68rem;
}
[data-theme="dark"] .qe-hint-tag { background: var(--bg-hover); color: var(--gray-400); }
.qe-preview-box {
  min-height: 80px; padding: 12px 14px; background: var(--gray-50);
  border: 1.5px solid var(--gray-200); border-radius: var(--r-lg);
  font-size: 0.85rem; color: var(--gray-900); line-height: 1.6; text-align: left;
}
[data-theme="dark"] .qe-preview-box { background: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-900); }
.qe-opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qe-opt-wrap { position: relative; }
.qe-opt-letter {
  position: absolute; left: 11px; top: 11px; font-size: 0.7rem; font-weight: 800;
  width: 20px; height: 20px; border-radius: 50%; background: var(--gray-100);
  color: var(--gray-500); display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 1;
}
[data-theme="dark"] .qe-opt-letter { background: var(--bg-hover); color: var(--gray-400); }
.qe-opt-letter.is-correct { background: var(--green) !important; color: white !important; }
.qe-opt-input {
  width: 100%; padding: 10px 12px 10px 38px; border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg); font-size: 0.83rem; font-family: var(--font);
  color: var(--gray-900); background: var(--white); transition: border-color 0.15s;
  outline: none; box-sizing: border-box;
}
.qe-opt-input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-glow); }
[data-theme="dark"] .qe-opt-input { background: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-900); }
.qe-opt-input.is-correct { border-color: var(--green) !important; background: var(--green-light) !important; }
[data-theme="dark"] .qe-opt-input.is-correct { background: var(--green-light) !important; }
.qe-meta-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.qe-select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg); font-size: 0.83rem; font-family: var(--font);
  color: var(--gray-900); background: var(--white); outline: none;
  transition: border-color 0.15s; cursor: pointer;
}
.qe-select:focus { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-glow); }
[data-theme="dark"] .qe-select { background: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-900); }
.qe-img-upload {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px dashed var(--gray-300); border-radius: var(--r-lg);
  cursor: pointer; transition: all 0.15s; background: var(--gray-50);
}
.qe-img-upload:hover { border-color: var(--sky); background: var(--sky-pale); }
[data-theme="dark"] .qe-img-upload { background: var(--bg-secondary); border-color: var(--gray-300); }
[data-theme="dark"] .qe-img-upload:hover { border-color: var(--sky); background: var(--bg-hover); }
.qe-img-preview {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1.5px solid var(--gray-200); border-radius: var(--r-lg);
  background: var(--gray-50); margin-bottom: 8px;
}
[data-theme="dark"] .qe-img-preview { background: var(--bg-secondary); border-color: var(--gray-300); }
.qe-img-thumb { width: 48px; height: 36px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; border: 1px solid var(--gray-200); }
.qe-pos-btns { display: flex; gap: 6px; margin-top: 8px; }
.qe-pos-btn {
  flex: 1; padding: 7px 10px; border-radius: var(--r-lg); font-size: 0.75rem;
  font-weight: 600; cursor: pointer; border: 1.5px solid var(--gray-200);
  background: var(--white); color: var(--gray-500); transition: all 0.15s; font-family: var(--font);
}
.qe-pos-btn:hover { border-color: var(--sky); color: var(--sky); }
.qe-pos-btn.active { background: var(--sky); border-color: var(--sky); color: white; box-shadow: var(--shadow-sky); }
[data-theme="dark"] .qe-pos-btn { background: var(--bg-secondary); border-color: var(--gray-300); color: var(--gray-500); }
.qe-student-preview { background: var(--bg-secondary); border-radius: var(--r-lg); padding: 16px; border: 1.5px solid var(--gray-200); }
.qe-sp-label { font-size: 0.65rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.qe-sp-question { font-size: 0.9rem; font-weight: 600; color: var(--gray-900); margin-bottom: 14px; line-height: 1.6; text-align: left; }
.qe-sp-opt {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: var(--r-lg); margin-bottom: 7px; border: 1.5px solid var(--gray-200);
  background: var(--bg-card); transition: all 0.12s;
}
.qe-sp-opt.correct { border-color: var(--green); background: var(--green-light); }
.qe-sp-badge {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; background: var(--gray-100); color: var(--gray-500);
}
.qe-sp-opt.correct .qe-sp-badge { background: var(--green); color: white; }
.qe-sp-text { font-size: 0.82rem; color: var(--gray-700); flex: 1; text-align: left; }
.qe-sp-opt.correct .qe-sp-text { color: #166534; }
[data-theme="dark"] .qe-sp-opt.correct .qe-sp-text { color: #86EFAC; }
/* ── Duel (Head-to-Head) ─────────────────────────────────── */
.duel-opt {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-radius: 12px; border: 1.5px solid var(--gray-200);
  background: var(--bg-secondary, #f9fafb); cursor: pointer; transition: all 0.12s; user-select: none;
}
.duel-opt:hover { border-color: var(--blue); background: var(--blue-pale); }
.duel-opt:active { transform: scale(0.97); }
.duel-opt-circle {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-100); border: 1.5px solid var(--gray-300);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; color: var(--gray-700); transition: all 0.12s;
}
@keyframes roundFadeIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes roundFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.1); } }
@keyframes feedbackPop { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes feedbackFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }