/* ============================================================
   styles.css — Shikshakk TET/CTET Platform
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&family=Playfair+Display:wght@400;500&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --bg:          #f5f6fc;
  --surface:     #ffffff;
  --surface-alt: #f0f1f7;
  --border:      #e4e5ef;
  --border-mid:  #cfd0de;
  --text:        #16161a;
  --text-mid:    #44444e;
  --text-muted:  #85858f;
  --accent:      #3a6fff;
  --accent-dark: #2456dd;
  --accent-light:#eef3ff;
  --correct:     #1a6b44;
  --correct-bg:  #e8f5ee;
  --wrong:       #8b1e1e;
  --wrong-bg:    #fdf0f0;
  --neutral-bg:  #f0f1f7;

  /* Home palette */
  --home-blue-1: #5ea8ff;
  --home-blue-2: #3a78ff;
  --indigo-card: #6253f3;
  --green-card:  #1fa868;

  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 20px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 14px 40px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.05);
  --shadow-blue:0 16px 48px rgba(58,111,255,.30);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --transition:   160ms ease;
  --nav-bg:       rgba(245,246,252,.92);
}

/* ── Dark Mode Variables ──────────────────────────────────– */
body[data-theme="dark"] {
  --bg:          #0f1117;
  --surface:     #16212b;
  --surface-alt: #1c2734;
  --border:      #30363d;
  --border-mid:  #21262d;
  --text:        #e6edf3;
  --text-mid:    #c9d1d9;
  --text-muted:  #8b949e;
  --accent:      #58a6ff;
  --accent-dark: #388bfd;
  --accent-light:#0d47a1;
  --correct:     #3fb950;
  --correct-bg:  #0d3922;
  --wrong:       #da3633;
  --wrong-bg:    #3d0f0a;
  --neutral-bg:  #21262d;
  --nav-bg:      rgba(15,17,23,.94);
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;min-height:100dvh;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;font:inherit;border:none;background:none;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none;display:block}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button:focus,a:focus{outline:none}
button:focus-visible{box-shadow:0 0 0 3px rgba(58,111,255,.28);border-radius:var(--radius)}

/* ── Layout ───────────────────────────────────────────────── */
.container{width:100%;max-width:680px;margin:0 auto;padding:0 20px}

/* ── View System ──────────────────────────────────────────── */
.view{display:none}
.view.active{display:block}

/* ── Shared typography ────────────────────────────────────── */
.view-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;margin-top:28px}
.view-heading{font-size:clamp(1.5rem,5vw,2rem);font-weight:700;line-height:1.18;margin-bottom:6px}
.view-subheading{font-size:.9rem;color:var(--text-muted);margin-bottom:24px}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:.9375rem;transition:background var(--transition),transform var(--transition),box-shadow var(--transition);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-dark);box-shadow:var(--shadow)}
.btn-secondary{background:var(--surface);color:var(--text);border:1.5px solid var(--border-mid)}
.btn-secondary:hover{background:var(--surface-alt)}
.btn-outline{background:transparent;color:var(--text-mid);border:1.5px solid var(--border-mid)}
.btn-outline:hover{background:var(--surface-alt);color:var(--text)}
.btn-ghost{background:transparent;color:var(--text-mid);padding:10px 16px}
.btn-ghost:hover{background:var(--accent-light);color:var(--accent)}
.btn-sm{padding:8px 16px;font-size:.875rem}
.btn-full{width:100%}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-danger{background:var(--wrong);color:#fff}
.btn-danger:hover{opacity:.88}
.btn-quiz-action,
.btn-submit-paper{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;font-weight:700;box-shadow:0 10px 26px rgba(58,111,255,.28)}
.btn-quiz-action:hover,
.btn-submit-paper:hover{box-shadow:0 14px 32px rgba(58,111,255,.34);filter:saturate(1.06)}
/* Quiz-specific buttons on dark bg */
.btn-white{background:#fff;color:#16161a;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.14)}
.btn-white:hover{background:#f0f1ff}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.25);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.22)}
.btn-glass:disabled{opacity:.35;pointer-events:none}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);font-weight:600}
.btn-outline-white:hover{background:rgba(255,255,255,.1)}

/* Dark mode toggle btn */
.theme-toggle-btn{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--transition),border-color var(--transition);flex-shrink:0}
.theme-toggle-btn:hover{background:var(--surface-alt);border-color:var(--accent)}
.theme-toggle-btn svg{width:18px;height:18px;color:var(--text)}

/* ══════════════════════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════════════════════ */
body[data-view="home"]{
  background:linear-gradient(175deg,#5ea8ff 0%,#aaceff 35%,#d6e7ff 60%,#edf3ff 100%);
  min-height:100dvh;
}
body[data-view="home"][data-theme="dark"]{
  background: linear-gradient(175deg,#0f1117 0%,#1c2734 50%,#16212b 100%);
  min-height:100dvh;
}
body[data-view="profile"]{
  background:linear-gradient(175deg,#5ea8ff 0%,#aaceff 35%,#d6e7ff 60%,#edf3ff 100%);
  min-height:100dvh;
}
body[data-view="profile"][data-theme="dark"]{
  background: linear-gradient(175deg,#0f1117 0%,#1c2734 50%,#16212b 100%);
  min-height:100dvh;
}

/* ── Ambient glows ────────────────────────────────────────── */
.home-shell{position:relative;overflow:hidden;min-height:100dvh;display:flex;flex-direction:column}
.home-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.home-glow--a{width:340px;height:340px;top:-130px;right:-90px;background:rgba(255,255,255,.36)}
.home-glow--b{width:280px;height:280px;bottom:60px;left:-110px;background:rgba(140,185,255,.32)}
.home-glow--c{width:180px;height:180px;top:42%;right:-60px;background:rgba(100,150,255,.2)}

.home-inner{position:relative;z-index:1;display:flex;flex-direction:column;max-width:460px;margin:0 auto;width:100%;padding:28px 24px 40px;flex:1}

/* ── Top bar ──────────────────────────────────────────────── */
.home-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.home-profile{display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;padding:0;text-align:left}
.home-avatar{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(60,110,200,.18);flex-shrink:0;transition:transform var(--transition)}
.home-profile:hover .home-avatar{transform:scale(1.05)}
.home-avatar svg{width:22px;height:22px;color:#3a6fa5}
.home-profile__greeting{font-size:.78rem;font-weight:500;color:rgba(255,255,255,.85);margin-bottom:1px}
.home-profile__name{font-size:1.35rem;font-weight:700;color:#fff;line-height:1.05}
.home-brand{font-family:var(--font-display);font-size:1.15rem;color:rgba(255,255,255,.92);letter-spacing:-.01em}

/* ── Tags ─────────────────────────────────────────────────── */
.home-tags{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.home-tag{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.24);font-size:.75rem;font-weight:600;color:rgba(255,255,255,.96);letter-spacing:.04em;backdrop-filter:blur(8px)}
.home-tag--light{background:rgba(255,255,255,.13);color:rgba(255,255,255,.80)}

/* ── Hero card ────────────────────────────────────────────── */
.home-hero{display:flex;gap:0;align-items:stretch;width:100%;text-align:left;background:linear-gradient(140deg,#4a90ff 0%,#2f6fe8 52%,#2258d4 100%);border-radius:var(--radius-xl);padding:22px 20px 20px;margin-bottom:16px;color:#fff;box-shadow:0 22px 52px rgba(38,88,212,.32);transition:transform var(--transition),box-shadow var(--transition);position:relative;overflow:hidden}
.home-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.14),transparent 52%);pointer-events:none}
.home-hero:hover{transform:translateY(-2px);box-shadow:0 28px 60px rgba(38,88,212,.38)}
.home-hero__left{flex:1;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.home-hero__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.home-hero__title{font-size:clamp(1.7rem,5vw,2.1rem);font-weight:700;line-height:1.05;color:#fff}
.home-hero__desc{font-size:.875rem;line-height:1.48;color:rgba(255,255,255,.82);flex:1}
.home-hero__cta{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.18);font-size:.875rem;font-weight:700;color:#fff;width:fit-content;margin-top:6px;border:1px solid rgba(255,255,255,.22)}
.home-hero__art{width:96px;flex-shrink:0;display:flex;align-items:center;position:relative;z-index:1}
.home-hero__art svg{width:100%;height:auto}

/* ── Two cards ────────────────────────────────────────────── */
.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.home-card{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:16px 16px 14px;min-height:168px;color:#fff;text-align:left;box-shadow:0 14px 38px rgba(0,0,0,.16);transition:transform var(--transition),box-shadow var(--transition);display:flex;flex-direction:column;cursor:pointer}
.home-card:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(0,0,0,.22)}
.home-card--indigo{background:linear-gradient(148deg,#7b6dff 0%,#5344e8 55%,#3f2ecc 100%)}
.home-card--green{background:linear-gradient(148deg,#2ee896 0%,#1db86b 52%,#178554 100%)}
.home-card--notes{background:linear-gradient(148deg,#2ee896 0%,#19aa68 52%,#11724c 100%)}
.home-card__strap{position:absolute;top:0;left:0;right:0;padding:6px 8px;background:rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.20);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;text-align:center;white-space:nowrap}
.home-card--notes .home-card__icon{margin-top:18px}
.home-card__icon{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin-bottom:auto}
.home-card__icon svg{width:19px;height:19px}
.home-card__arrow{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.home-card__arrow svg{width:14px;height:14px}
.home-card__arrow--locked svg{width:13px;height:13px}
.home-card h3{font-size:1.12rem;font-weight:700;margin-bottom:4px;line-height:1.18}
.home-card p{font-size:.78rem;color:rgba(255,255,255,.82);line-height:1.44}

/* ── Row link ─────────────────────────────────────────────── */
.home-row-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;background:rgba(255,255,255,.80);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(60,100,180,.10);color:var(--text);transition:background var(--transition),transform var(--transition);width:100%;text-align:left}
.home-row-link:hover{background:rgba(255,255,255,.94);transform:translateY(-1px)}
.home-row-link__left{display:flex;align-items:center;gap:12px}
.home-row-link__icon{width:42px;height:42px;border-radius:13px;background:rgba(58,111,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.home-row-link__icon svg{width:20px;height:20px;color:#3a6ee0}
.home-row-link__title{font-weight:600;font-size:.9375rem;color:#1a1a22}
.home-row-link__sub{font-size:.8rem;color:var(--text-muted)}
.home-row-link__chevron{width:18px;height:18px;color:var(--text-muted);flex-shrink:0}

/* ══════════════════════════════════════════════════════════
   PROFILE PAGE
══════════════════════════════════════════════════════════ */
.profile-shell{position:relative;overflow:hidden;min-height:100dvh;display:flex;flex-direction:column}
.profile-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.profile-glow--a{width:300px;height:300px;top:-100px;right:-80px;background:rgba(255,255,255,.34)}
.profile-glow--b{width:240px;height:240px;bottom:80px;left:-90px;background:rgba(140,185,255,.28)}

.profile-topbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:16px 24px 0;max-width:460px;margin:0 auto;width:100%}
.profile-back-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(60,110,200,.14);transition:transform var(--transition)}
.profile-back-btn:hover{transform:scale(1.06)}
.profile-back-btn svg{width:17px;height:17px;color:#2a3a5e}
.profile-topbar__title{font-size:1rem;font-weight:700;color:#fff}

/* Hero section */
.profile-hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:24px 24px 20px;max-width:460px;margin:0 auto;width:100%}
.profile-hero__avatar{position:relative;width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 12px 36px rgba(58,111,255,.22);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.profile-hero__avatar svg{width:44px;height:44px;color:#4a72b8}
.profile-hero__avatar-edit{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(58,111,255,.4)}
.profile-hero__avatar-edit svg{width:13px;height:13px;color:#fff}
.profile-hero__name{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:4px}
.profile-hero__sub{font-size:.82rem;color:rgba(255,255,255,.80);font-weight:500}

/* Body */
.profile-body{position:relative;z-index:1;flex:1;background:var(--bg);border-radius:28px 28px 0 0;margin-top:8px;padding:24px 20px 48px;max-width:460px;margin-left:auto;margin-right:auto;width:100%}
.profile-section-title{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;margin-top:24px}
.profile-section-title:first-child{margin-top:4px}

.profile-card{background:var(--surface);border-radius:var(--radius-lg);border:1.5px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:8px}
.profile-divider{height:1px;background:var(--border);margin:0 16px}
.profile-row{display:flex;align-items:center;gap:14px;padding:14px 16px;width:100%;text-align:left}
.profile-row--btn{background:none;border:none;cursor:pointer;transition:background var(--transition)}
.profile-row--btn:hover{background:var(--surface-alt)}
.profile-row--danger .profile-row__val{color:var(--wrong)}
.profile-row__icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profile-row__icon svg{width:18px;height:18px}
.profile-row__icon--blue{background:#eef3ff;color:#3a6fff}
.profile-row__icon--purple{background:#f3eeff;color:#7b52e8}
.profile-row__icon--coral{background:#fff0f0;color:#d63939}
.profile-row__icon--green{background:#e8f8ef;color:#1a8a52}
.profile-row__icon--danger{background:#fff0f0;color:var(--wrong)}
.profile-row__body{flex:1;min-width:0}
.profile-row__label{font-size:.75rem;color:var(--text-muted);margin-bottom:2px}
.profile-row__val{font-size:.9375rem;font-weight:500;color:var(--text)}
.profile-row__edit{width:32px;height:32px;border-radius:8px;background:var(--surface-alt);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-muted);transition:background var(--transition),color var(--transition)}
.profile-row__edit:hover{background:var(--accent-light);color:var(--accent)}
.profile-row__edit svg{width:13px;height:13px}
.profile-row__chevron{width:16px;height:16px;color:var(--text-muted);flex-shrink:0}
.profile-row__chevron svg{width:16px;height:16px}

/* Subscription card */
.profile-sub-card{background:linear-gradient(135deg,#3a6fff 0%,#2253d4 100%);border-radius:var(--radius-lg);padding:20px;margin-bottom:8px;box-shadow:var(--shadow-blue)}
.profile-sub-card__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.profile-sub-card__plan{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:4px}
.profile-sub-card__expires{font-size:.82rem;color:rgba(255,255,255,.75)}
.profile-sub-card__badge{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.18);font-size:.72rem;font-weight:700;color:#fff;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.25)}
.profile-upgrade-btn{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;border-radius:var(--radius);background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;transition:background var(--transition);justify-content:center}
.profile-upgrade-btn:hover{background:rgba(255,255,255,.24)}
.profile-upgrade-btn svg{width:16px;height:16px}

.profile-footer{text-align:center;font-size:.75rem;color:var(--text-muted);margin-top:28px}

/* Profile editor */
.profile-edit-modal[hidden]{display:none}
.profile-edit-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;padding:18px}
.profile-edit-modal__backdrop{position:absolute;inset:0;background:rgba(18,28,56,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.profile-edit-card{position:relative;z-index:1;width:100%;max-width:430px;background:var(--surface);border:1.5px solid rgba(255,255,255,.55);border-radius:var(--radius-lg);box-shadow:0 22px 60px rgba(30,70,180,.24);padding:20px}
.profile-edit-card__eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.profile-edit-card__title{font-size:1.2rem;line-height:1.25;margin-bottom:16px;color:var(--text)}
.profile-edit-card__label{display:block;font-size:.82rem;font-weight:700;color:var(--text-mid);margin-bottom:7px}
.profile-edit-card__input{width:100%;padding:13px 14px;border:1.5px solid var(--border-mid);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:1rem;transition:border-color var(--transition),box-shadow var(--transition)}
.profile-edit-card__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(58,111,255,.14)}
.profile-edit-card__actions{display:flex;gap:10px;margin-top:18px}
.profile-edit-card__actions .btn{flex:1}

/* ══════════════════════════════════════════════════════════
   INNER NAV
══════════════════════════════════════════════════════════ */
.inner-nav{position:sticky;top:0;z-index:100;background:var(--nav-bg,rgba(245,246,252,.92));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.inner-nav__inner{max-width:680px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.inner-nav__back{width:36px;height:36px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--transition)}
.inner-nav__back:hover{background:var(--surface-alt)}
.inner-nav__back svg{width:16px;height:16px}
.inner-nav__title{font-weight:600;font-size:.9375rem;flex:1;text-align:center}

/* ══════════════════════════════════════════════════════════
   MODE CARDS
══════════════════════════════════════════════════════════ */
.mode-grid{display:flex;flex-direction:column;gap:12px;padding-bottom:40px}
.mode-card{position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:20px;cursor:pointer;text-align:left;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);display:flex;flex-direction:column;gap:8px}
.mode-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.mode-card__icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.mode-card__icon svg{width:22px;height:22px}
.mode-card__icon--blue{background:#eef3ff;color:#3a6fff}
.mode-card__icon--coral{background:#fff0f0;color:#d63939}
.mode-card__title{font-size:1.1rem;font-weight:700}
.mode-card__desc{font-size:.875rem;color:var(--text-muted);line-height:1.5}
.mode-card__chevron{position:absolute;top:50%;right:18px;transform:translateY(-50%);color:var(--text-muted)}
.mode-card__chevron svg{width:18px;height:18px}

/* ══════════════════════════════════════════════════════════
   SUBJECT GRID
══════════════════════════════════════════════════════════ */
.subject-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:40px}
.subject-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:18px 14px;cursor:pointer;text-align:left;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.subject-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.subject-card__label{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.subject-card__name{font-weight:600;font-size:.9375rem;line-height:1.35}

/* ══════════════════════════════════════════════════════════
   QUIZ VIEW — Professional, minimal background
══════════════════════════════════════════════════════════ */
#view-quiz{
  background: linear-gradient(135deg, #f5f6fc 0%, #f0f1f7 100%);
  min-height:100dvh;
  flex-direction:column;
}
#view-quiz[data-theme="dark"]{
  background: linear-gradient(135deg, #0f1117 0%, #161b22 100%);
}
.view#view-quiz.active{display:flex}

/* Timer */
.paper-timer-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.15)}
.paper-timer-text{font-size:1.15rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.paper-timer-label{font-size:.8rem;color:rgba(255,255,255,.75);font-weight:400}
.paper-timer-bar.timer--warning{background:rgba(220,50,50,.22);border-color:rgba(255,100,100,.3)}
.paper-timer-bar.timer--warning .paper-timer-text,.paper-timer-bar.timer--warning svg{color:#ffaaaa}
.paper-timer-bar.timer--warning .paper-timer-label{color:rgba(255,170,170,.85)}

/* Quiz header - light mode */
.quiz-shell{width:100%;max-width:680px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.quiz-header{position:sticky;top:0;z-index:40;background:rgba(90,100,120,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.1)}
.quiz-header[data-theme="dark"]{background:rgba(22,33,43,.88)}

/* Quiz header icons and text in light mode */
.quiz-quit-btn{color:var(--text);background:rgba(255,255,255,.8);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:background var(--transition);flex-shrink:0}
.quiz-quit-btn:hover{background:rgba(255,255,255,.95)}
.quiz-quit-btn[data-theme="dark"]{background:rgba(48,54,61,.8);color:var(--text)}
.quiz-quit-btn[data-theme="dark"]:hover{background:rgba(48,54,61,.95)}

/* Quiz top bar */
.quiz-topbar{display:flex;align-items:center;gap:12px;padding:14px 20px 10px;max-width:680px;margin:0 auto;width:100%}
.quiz-topbar__quit{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--transition)}
.quiz-topbar__quit:hover{background:rgba(255,255,255,.26)}
.quiz-topbar__quit svg{width:16px;height:16px;color:#fff}
.quiz-topbar__mid{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.quiz-progress-text{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.82);text-align:center}
.quiz-subject-tag{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82);background:rgba(255,255,255,.16);padding:5px 12px;border-radius:999px;white-space:nowrap;flex-shrink:0;border:1px solid rgba(255,255,255,.22)}
.progress-bar{height:3px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden}
.progress-bar__fill{height:100%;background:#fff;border-radius:999px;transition:width 300ms ease}

/* Quiz body — question on gradient, options on white rounded sheet */
.quiz-body{flex:1;display:flex;flex-direction:column;max-width:680px;margin:0 auto;width:100%;padding:0 0 0}

.quiz-q-wrap{padding:20px 24px 24px;color:var(--text)}
.quiz-q-number{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid);margin-bottom:10px}
.quiz-q-text{font-size:1.1rem;font-weight:500;line-height:1.58;color:var(--text)}

.quiz-options-shell{flex:1;background:var(--bg);border-radius:28px 28px 0 0;padding:20px 20px 32px;box-shadow:0 -4px 14px rgba(0,0,0,.08)}

/* Options */
.options-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.option-item{position:relative;cursor:pointer}
.option-item input[type="radio"]{position:absolute;opacity:0;width:0;height:0}
.option-label{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);font-size:.9375rem;line-height:1.5;box-shadow:var(--shadow-sm)}
.option-label:hover{border-color:var(--accent);background:var(--accent-light);box-shadow:var(--shadow)}
.option-item input:checked + .option-label{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 0 3px rgba(58,111,255,.12)}
.option-bullet{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--text-muted);background:var(--surface);margin-top:1px;transition:all var(--transition)}
.option-item input:checked + .option-label .option-bullet{background:var(--accent);border-color:var(--accent);color:#fff}

/* Option feedback animations */
@keyframes correctFlash{
  0%{background:var(--correct-bg);border-color:var(--correct);box-shadow:0 0 0 0 rgba(26,107,68,.28)}
  45%{background:var(--correct-bg);border-color:var(--correct);box-shadow:0 0 0 8px rgba(26,107,68,.0)}
  100%{background:var(--correct-bg);border-color:var(--correct);box-shadow:none}
}
@keyframes wrongFlash{
  0%{background:var(--wrong-bg);border-color:var(--wrong);box-shadow:0 0 0 0 rgba(139,30,30,.24)}
  45%{background:var(--wrong-bg);border-color:var(--wrong);box-shadow:0 0 0 8px rgba(139,30,30,.0)}
  100%{background:var(--wrong-bg);border-color:var(--wrong);box-shadow:none}
}
.option-item--answered .option-label{border-color:var(--accent);background:var(--accent-light)}
.option-item--answered .option-bullet{background:var(--accent);border-color:var(--accent);color:#fff}
.option-item--correct-flash .option-label{animation:correctFlash .52s ease forwards;background:var(--correct-bg)!important;border-color:var(--correct)!important}
.option-item--correct-flash .option-bullet{background:var(--correct)!important;border-color:var(--correct)!important;color:#fff!important}
.option-item--wrong-flash .option-label{animation:wrongFlash .52s ease forwards;background:var(--wrong-bg)!important;border-color:var(--wrong)!important}
.option-item--wrong-flash .option-bullet{background:var(--wrong)!important;border-color:var(--wrong)!important;color:#fff!important}
.option-item--show-correct .option-label{border-color:var(--correct);background:var(--correct-bg)}
.option-item--show-correct .option-bullet{background:var(--correct);border-color:var(--correct);color:#fff}

/* Quiz nav */
.quiz-nav{display:flex;gap:10px;padding-bottom:14px}
.quiz-nav .btn{flex:1}

/* Confirm banner */
.confirm-banner{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1.5px solid var(--border-mid);border-radius:var(--radius-lg);padding:18px 20px;margin-top:12px;box-shadow:var(--shadow);animation:bannerIn .18s ease}
@keyframes bannerIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.confirm-banner__msg{font-size:.9375rem;color:var(--text);line-height:1.5}
.confirm-banner__actions{display:flex;gap:10px;justify-content:flex-end}
.quiz-shell > .confirm-banner{margin:14px 20px 0}

/* Jump grid */
.jump-grid{display:flex;flex-wrap:wrap;gap:7px;padding:14px 0 28px}
.jump-dot{width:34px;height:34px;border-radius:8px;font-size:.78rem;font-weight:600;border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center}
.jump-dot:hover{border-color:var(--accent);color:var(--accent)}
.jump-dot--current{background:var(--accent);color:#fff;border-color:var(--accent)}
.jump-dot--unanswered{background:var(--surface);color:var(--text-muted)}
.jump-dot--answered{background:var(--accent);color:#fff;border-color:var(--accent)}
.jump-dot--correct{background:var(--correct-bg);border-color:var(--correct);color:var(--correct)}
.jump-dot--wrong{background:var(--wrong-bg);border-color:var(--wrong);color:var(--wrong)}

/* Current quiz layout */
.quiz-shell{width:100%;max-width:680px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.quiz-header{position:sticky;top:0;z-index:40;background:rgba(90,110,140,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.1)}
body[data-theme="dark"] .quiz-header{background:rgba(22,33,43,.88);border-bottom-color:rgba(255,255,255,.05)}
.quiz-header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px 10px}
.quiz-meta{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.quiz-quit-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.25);color:#fff;flex-shrink:0}
body[data-theme="dark"] .quiz-quit-btn{background:rgba(48,54,61,.3);border-color:rgba(255,255,255,.1);color:var(--text)}
.quiz-quit-btn svg{width:16px;height:16px}
.quiz-meta__info{min-width:0;display:flex;flex-direction:column;gap:1px}
.quiz-mode-label{font-size:.86rem;font-weight:800;color:rgba(255,255,255,.95);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
body[data-theme="dark"] .quiz-mode-label{color:var(--text)}
.quiz-q-count{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.72)}
body[data-theme="dark"] .quiz-q-count{color:var(--text-muted)}
.quiz-timer{align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--accent);font-size:.8rem;font-weight:800;box-shadow:var(--shadow-sm)}
.quiz-progress-wrap{flex-basis:100%;height:4px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden}
body[data-theme="dark"] .quiz-progress-wrap{background:rgba(255,255,255,.08)}
.quiz-progress-bar,.quiz-progress-fill{height:100%;border-radius:999px}
.quiz-progress-fill{background:#fff;transition:width 260ms ease}
.quiz-q-card{border-radius:8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);box-shadow:0 18px 48px rgba(33,82,190,.18);padding:18px 18px 20px;color:var(--text)}
body[data-theme="dark"] .quiz-q-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);box-shadow:none}
.quiz-q-subject{min-height:18px;margin-bottom:8px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
body[data-theme="dark"] .quiz-q-subject{color:var(--text-muted)}
.quiz-q-text{font-size:1.08rem;font-weight:650;line-height:1.58;color:var(--text);overflow-wrap:anywhere}
.quiz-options-shell{width:100%;max-width:680px;margin:0 auto;background:var(--bg);border-radius:26px 26px 0 0;padding:20px 20px 18px;box-shadow:0 -8px 20px rgba(0,0,0,.06)}
.quiz-options{display:grid;grid-template-columns:1fr;gap:10px}
.quiz-option{width:100%;min-height:58px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:flex-start;gap:12px;padding:14px 15px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);text-align:left;box-shadow:var(--shadow-sm);transition:border-color var(--transition),background var(--transition),box-shadow var(--transition),transform var(--transition)}
.quiz-option:hover:not(:disabled){border-color:var(--accent);background:var(--accent-light);box-shadow:var(--shadow);transform:translateY(-1px)}
.quiz-option__letter{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border-mid);background:var(--surface);color:var(--text-muted);font-size:.78rem;font-weight:800;line-height:1;flex-shrink:0}
.quiz-option__text{min-width:0;font-size:.94rem;line-height:1.48;color:var(--text);overflow-wrap:anywhere;word-break:break-word}
.quiz-option.selected{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 0 3px rgba(58,111,255,.12)}
.quiz-option.selected .quiz-option__letter{background:var(--accent);border-color:var(--accent);color:#fff}
.quiz-option.correct{border-color:var(--correct);background:var(--correct-bg)}
.quiz-option.correct .quiz-option__letter{background:var(--correct);border-color:var(--correct);color:#fff}
.quiz-option.wrong{border-color:var(--wrong);background:var(--wrong-bg)}
.quiz-option.wrong .quiz-option__letter{background:var(--wrong);border-color:var(--wrong);color:#fff}
.quiz-option:disabled{cursor:default;opacity:1}
.quiz-feedback{margin-top:12px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);padding:14px 15px;box-shadow:var(--shadow-sm)}
.quiz-feedback__explanation{font-size:.9rem;line-height:1.55;color:var(--text-mid)}
.quiz-jump-wrap{width:100%;max-width:680px;margin:0 auto;background:var(--bg);padding:0 20px 14px}
.quiz-jump-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 10px;color:var(--text-muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.quiz-jump-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:8px}
.quiz-jump-dot{height:38px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:.82rem;font-weight:800;box-shadow:var(--shadow-sm);transition:border-color var(--transition),background var(--transition),color var(--transition),transform var(--transition)}
.quiz-jump-dot:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.quiz-jump-dot.is-answered{background:var(--accent-light);border-color:rgba(58,111,255,.30);color:var(--accent)}
.quiz-jump-dot.is-current{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(58,111,255,.24)}
.quiz-paper-nav,.quiz-submit-wrap,.quiz-end-wrap{width:100%;max-width:680px;margin:0 auto;background:var(--bg);padding:0 20px 14px}
.quiz-paper-nav{gap:10px;display:flex;padding-top:12px;padding-bottom:10px}
.quiz-paper-nav .btn{flex:1;min-width:0}
.quiz-submit-wrap,.quiz-end-wrap{justify-content:center;padding-bottom:28px}
.quiz-submit-wrap .btn,.quiz-end-wrap .btn{width:100%}
.quiz-submit-wrap{padding-top:2px}

/* ══════════════════════════════════════════════════════════
   RESULT SCREEN — New Design
══════════════════════════════════════════════════════════ */

/* ── Header / Hero ────────────────────────────────────── */
.result-header {
  background: linear-gradient(160deg, var(--accent) 0%, #6a3fff 100%);
  padding: 20px 24px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.result-header::before {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  top: -60px; right: -60px;
  pointer-events: none;
}
.result-header::after {
  content: '';
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  bottom: 20px; left: -50px;
  pointer-events: none;
}

/* Score-based gradient overrides */
.result-header--good { background: linear-gradient(160deg, #1a6b44 0%, #2d9e66 100%); }
.result-header--mid  { background: linear-gradient(160deg, #92600a 0%, #c98a30 100%); }
.result-header--low  { background: linear-gradient(160deg, var(--accent) 0%, #6a3fff 100%); }

/* Top bar inside header */
.result-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  margin-bottom: 10px;
}
.result-back-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: background var(--transition);
}
.result-back-btn:hover { background: rgba(255,255,255,.28); }
.result-brand {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.90);
  letter-spacing: .01em;
}

/* Personalised greeting */
.result-greeting {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  margin-bottom: 2px;
  text-align: center;
}
.result-mode-lbl {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: 24px;
  text-align: center;
}

/* Score ring */
.result-ring-wrap {
  position: relative;
  z-index: 1;
}
.result-ring-outer {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 12px rgba(255,255,255,.08);
}
.result-ring-inner {
  width: 128px; height: 128px;
  border-radius: 50%;
  background: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.result-ring-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2px;
}
.result-ring-pct {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.02em;
}
.result-header--good .result-ring-pct { color: #1a6b44; }
.result-header--mid  .result-ring-pct { color: #92600a; }

/* ── Body (white card area) ───────────────────────────── */
.result-body {
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  margin-top: -28px;
  position: relative;
  z-index: 2;
  padding: 28px 20px 60px;
  min-height: 60vh;
}

/* ── Stats card ───────────────────────────────────────── */
.result-stats-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.result-stat-row {
  display: flex;
  align-items: stretch;
}
.result-stat-sep {
  height: 1px;
  background: var(--border);
}
.result-stat-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 8px 14px;
  gap: 4px;
}
.result-stat-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}
.result-stat-val {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}
.result-stat-val--blue   { color: var(--accent); }
.result-stat-val--green  { color: var(--correct); }
.result-stat-val--red    { color: var(--wrong); }
.result-stat-name {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
}

/* ── 6-button grid ────────────────────────────────────── */
.result-btns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 12px;
  margin-bottom: 32px;
}
.result-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-mid);
  transition: transform var(--transition), color var(--transition);
}
.result-action-btn:hover { transform: translateY(-2px); color: var(--text); }
.result-action-btn span { text-align: center; line-height: 1.3; }

.result-action-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: box-shadow var(--transition), transform var(--transition);
}
.result-action-btn:hover .result-action-icon {
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transform: scale(1.06);
}
.result-action-icon svg { color: #fff; }

/* Icon colours — using platform palette */
.result-action-icon--blue   { background: linear-gradient(135deg, #3a6fff, #5a90ff); }
.result-action-icon--brown  { background: linear-gradient(135deg, #8b5e3c, #b07848); }
.result-action-icon--purple { background: linear-gradient(135deg, #6a3fff, #9b6fff); }
.result-action-icon--teal   { background: linear-gradient(135deg, #0f7c80, #1aa5aa); }
.result-action-icon--pink   { background: linear-gradient(135deg, #c0396e, #e05585); }
.result-action-icon--grey   { background: linear-gradient(135deg, #4a5568, #718096); }

/* ── Review section ───────────────────────────────────── */
.review-section { padding: 0; }
.review-heading { font-size: 1rem; font-weight: 600; margin-bottom: 14px; color: var(--text); }
.review-item { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 10px; }
.review-item__question { font-size: .9375rem; line-height: 1.5; margin-bottom: 14px; }
.review-item__answers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.review-answer { display: flex; align-items: center; gap: 10px; font-size: .875rem; padding: 8px 12px; border-radius: var(--radius-sm); }
.review-answer.correct { background: var(--correct-bg); color: var(--correct); }
.review-answer.wrong   { background: var(--wrong-bg);   color: var(--wrong); }
.review-answer__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.review-answer.correct .review-answer__dot { background: var(--correct); }
.review-answer.wrong   .review-answer__dot { background: var(--wrong); }
.review-explanation { font-size: .8125rem; color: var(--text-muted); padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.55; }
.review-explanation strong { color: var(--text-mid); font-weight: 500; }

/* ── Dark mode ring inner ─────────────────────────────── */
body[data-theme="dark"] .result-ring-inner {
  background: #1a2235;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
body[data-theme="dark"] .result-ring-label { color: var(--text-muted); }
body[data-theme="dark"] .result-header--good .result-ring-pct { color: var(--correct); }
body[data-theme="dark"] .result-header--mid  .result-ring-pct { color: #f59e0b; }
body[data-theme="dark"] .result-header--low  .result-ring-pct { color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   SAMPLE PAPERS
══════════════════════════════════════════════════════════ */
.papers-list{display:flex;flex-direction:column;gap:10px;padding-bottom:40px}
.paper-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);width:100%;text-align:left;box-shadow:var(--shadow-sm)}
.paper-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.paper-card__title{font-weight:600;font-size:.9375rem;margin-bottom:4px}
.paper-card__meta{font-size:.8125rem;color:var(--text-muted)}
.paper-card__arrow{color:var(--text-muted);flex-shrink:0}

/* ══════════════════════════════════════════════════════════
   SHARED UTILITIES
══════════════════════════════════════════════════════════ */
.empty-state{text-align:center;padding:56px 24px;color:var(--text-muted)}
.empty-state__title{font-size:1rem;font-weight:500;color:var(--text-mid);margin-bottom:6px}
.loading-spinner{display:flex;justify-content:center;align-items:center;padding:56px 0}
.spinner{width:28px;height:28px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--text);color:#fff;padding:10px 20px;border-radius:999px;font-size:.875rem;box-shadow:var(--shadow-lg);animation:toastIn .25s ease,toastOut .25s ease 2.75s forwards;white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}

/* ══════════════════════════════════════════════════════════
   ADMIN (preserved)
══════════════════════════════════════════════════════════ */
.admin-layout{display:flex;min-height:100dvh}
.admin-sidebar{width:220px;background:var(--surface);border-right:1.5px solid var(--border);padding:24px 0;position:sticky;top:0;height:100dvh;overflow-y:auto;flex-shrink:0}
.admin-sidebar__logo{font-family:var(--font-display);font-size:1.1rem;padding:0 20px 24px;border-bottom:1.5px solid var(--border);margin-bottom:12px}
.admin-sidebar__logo small{display:block;font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:2px}
.admin-nav-item{display:block;padding:10px 20px;font-size:.9rem;font-weight:400;color:var(--text-mid);cursor:pointer;border-radius:0;transition:background var(--transition),color var(--transition);border:none;background:none;width:100%;text-align:left}
.admin-nav-item:hover{background:var(--surface-alt);color:var(--text)}
.admin-nav-item.active{color:var(--text);font-weight:500;background:var(--accent-light)}
.admin-main{flex:1;overflow-y:auto}
.admin-content{max-width:760px;padding:32px 28px 60px}
.admin-section{display:none}
.admin-section.active{display:block}
.admin-section-title{font-size:1.4rem;font-weight:500;margin-bottom:4px}
.admin-section-desc{font-size:.875rem;color:var(--text-muted);margin-bottom:32px}
.admin-divider{border:none;border-top:1.5px solid var(--border);margin:28px 0}
.form-panel{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:28px}
.form-panel__title{font-size:.9375rem;font-weight:500;margin-bottom:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-stack{display:flex;flex-direction:column;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.875rem;font-weight:500;color:var(--text-mid)}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.9375rem;transition:border-color var(--transition),box-shadow var(--transition);-webkit-appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(58,111,255,.12)}
.form-textarea{resize:vertical;min-height:80px}
.data-table-wrap{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.data-table-header{padding:14px 20px;border-bottom:1.5px solid var(--border);font-size:.875rem;font-weight:500;color:var(--text-muted)}
.data-table-row{display:flex;align-items:center;padding:14px 20px;gap:12px;border-bottom:1px solid var(--border);transition:background var(--transition)}
.data-table-row:last-child{border-bottom:none}
.data-table-row:hover{background:var(--surface-alt)}
.data-table-row__main{flex:1;font-size:.9375rem}
.data-table-row__sub{font-size:.8125rem;color:var(--text-muted);margin-top:2px}
.data-table-row__actions{display:flex;gap:6px}
.btn-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);background:var(--surface);color:var(--text-mid);transition:background var(--transition),border-color var(--transition),color var(--transition)}
.btn-icon:hover{background:var(--surface-alt);border-color:var(--border-mid);color:var(--text)}
.btn-icon.danger:hover{background:var(--wrong-bg);border-color:var(--wrong);color:var(--wrong)}
.btn-icon svg{width:14px;height:14px}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.admin-mobile-bar{display:none;align-items:center;justify-content:space-between;padding:0 20px;height:52px;background:var(--surface);border-bottom:1.5px solid var(--border);position:sticky;top:0;z-index:100}
.hamburger{width:36px;height:36px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4.5px}
.hamburger span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform .2s,opacity .2s}
.admin-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:149}
.admin-overlay.visible{display:block}
.admin-sidebar.open{position:fixed;top:0;left:0;z-index:150;height:100dvh;box-shadow:var(--shadow-lg)}
.pq-tab{transition:background .15s,color .15s}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .home-inner{padding:22px 20px 30px}
  .home-hero__art{display:none}
  .home-hero__title{font-size:1.75rem}
  .subject-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .options-grid{grid-template-columns:1fr}
  .result-stats-grid{grid-template-columns:repeat(2,1fr)}
  .admin-sidebar{display:none;width:240px}
  .admin-sidebar.open{display:block}
  .admin-mobile-bar{display:flex}
  .admin-content{padding:20px 16px 60px}
  .profile-body{padding:20px 16px 40px}
  .quiz-options-shell{padding:18px 16px 28px}
  .quiz-q-wrap{padding:16px 20px 20px}
}

/* ══════════════════════════════════════════════════════════
   AUTH VIEWS — Sign Up / Sign In
══════════════════════════════════════════════════════════ */
.auth-shell {
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
}

.auth-body {
  flex: 1;
  padding: 32px 24px 48px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.auth-brand {
  text-align: center;
  margin-bottom: 32px;
}

/* ── Profile Stats Row ────────────────────────────────── */
.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

.profile-stat-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.profile-stat-box__val {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: 4px;
}

.profile-stat-box__label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Profile guest block ──────────────────────────────── */
#profileGuestBlock { padding-top: 8px; }

/* ══════════════════════════════════════════════════════════
   AUTH LANDING
══════════════════════════════════════════════════════════ */
body[data-view="auth"] {
  background: linear-gradient(175deg, #3a6fff 0%, #6a9fff 40%, #c8ddff 70%, #edf3ff 100%);
  min-height: 100dvh;
}
.auth-landing-shell {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  overflow: hidden;
}
.auth-landing-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.auth-landing-glow--a { width:340px;height:340px;top:-100px;right:-80px;background:rgba(255,255,255,.3); }
.auth-landing-glow--b { width:280px;height:280px;bottom:40px;left:-100px;background:rgba(160,200,255,.3); }
.auth-landing-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.auth-landing-logo { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; color: #fff; line-height: 1; letter-spacing: -.02em; }
.auth-landing-tagline { font-size: .9rem; color: rgba(255,255,255,.85); margin-top: 8px; font-weight: 500; }
.auth-landing-art svg { width: 120px; height: 120px; }
.auth-landing-features { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.auth-landing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: .9rem;
  color: #fff;
  backdrop-filter: blur(8px);
  text-align: left;
}
.auth-landing-feature__icon { font-size: 1.1rem; flex-shrink: 0; }
.auth-landing-actions { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.auth-landing-btn { width: 100%; padding: 14px 24px; font-size: 1rem; border-radius: var(--radius-lg); }
.auth-landing-google-btn { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.30); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-landing-google-btn:hover { background: rgba(255,255,255,.22); }
.auth-landing-note { font-size: .78rem; color: rgba(255,255,255,.72); }

/* ══════════════════════════════════════════════════════════
   HOME PLAN BADGE & QUIZ COUNTER
══════════════════════════════════════════════════════════ */
.home-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  margin-bottom: 10px;
  width: fit-content;
  transition: background var(--transition);
}
.home-plan-badge:hover { background: rgba(255,255,255,.3); }
.home-plan-badge--premium { background: rgba(255,215,0,.25); border-color: rgba(255,215,0,.4); }
.home-plan-badge__arrow { opacity: .7; }
.home-quiz-counter { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: rgba(255,255,255,.85); margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════
   SUBSCRIPTION CARD
══════════════════════════════════════════════════════════ */
.subscription-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.subscription-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.subscription-card__plan { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.subscription-card__desc { font-size: .82rem; color: var(--text-muted); margin-top: 3px; }
.subscription-card__badge { font-size: .7rem; font-weight: 800; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-muted); flex-shrink: 0; }
.subscription-card__badge--premium { background: linear-gradient(135deg,#ffd700,#ffb800); color: #7a5000; }
.subscription-card__dates { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.subscription-date-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: .8375rem; }
.subscription-date-label { color: var(--text-muted); }
.subscription-date-val { font-weight: 600; color: var(--text); }

/* ══════════════════════════════════════════════════════════
   PLAN COMPARISON (UPGRADE VIEW)
══════════════════════════════════════════════════════════ */
.plan-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
@media(max-width:480px){ .plan-comparison { grid-template-columns: 1fr; } }
.plan-card { border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 20px 16px; position: relative; background: var(--surface); }
.plan-card--premium { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(58,111,255,.12); }
.plan-card__badge { font-size: .65rem; font-weight: 800; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; }
.plan-card__name { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.plan-card__price { font-size: 1.6rem; font-weight: 800; color: var(--accent); margin-bottom: 14px; }
.plan-card__price span { font-size: .875rem; font-weight: 500; color: var(--text-muted); }
.plan-features { display: flex; flex-direction: column; gap: 7px; }
.plan-feature { display: flex; align-items: flex-start; gap: 7px; font-size: .82rem; color: var(--text-mid); }
.plan-feature::before { content: '✓'; flex-shrink: 0; font-weight: 700; }
.plan-feature--ok::before { color: var(--correct); }
.plan-feature--no::before { content: '✕'; color: var(--wrong); }
.upgrade-form { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }

/* ══════════════════════════════════════════════════════════
   PAPERS - LOCKED STATE
══════════════════════════════════════════════════════════ */
.paper-card--locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  gap: 12px;
  opacity: .8;
}
.paper-locked-badge { font-size: .72rem; font-weight: 700; color: var(--accent); background: var(--accent-light); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }

/* ══════════════════════════════════════════════════════════
   DASHBOARD STATS
══════════════════════════════════════════════════════════ */
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
@media(max-width:640px){ .dashboard-stats { grid-template-columns: repeat(2,1fr); } }
.dash-stat-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px; text-align: center; box-shadow: var(--shadow-sm); }
.dash-stat-card--premium { border-color: #ffd700; }
.dash-stat-card--blue    { border-color: #93c5fd; }
.dash-stat-card--green   { border-color: #6ee7b7; }
.dash-stat-card--indigo  { border-color: #a5b4fc; }
.dash-stat-card__val { font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 6px; }
.dash-stat-card__label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Dark mode subject cards ─────────────────────────── */
body[data-theme="dark"] .subject-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:var(--text)}
body[data-theme="dark"] .subject-card:hover{border-color:var(--accent);background:rgba(58,111,255,.18)}
body[data-theme="dark"] .subject-card__label{color:var(--text-muted)}
body[data-theme="dark"] .subject-card__name{color:var(--text)}
body[data-theme="dark"] .mode-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:var(--text)}
body[data-theme="dark"] .mode-card:hover{border-color:var(--accent)}
body[data-theme="dark"] .mode-card__title{color:var(--text)}
body[data-theme="dark"] .mode-card__desc{color:var(--text-muted)}
body[data-theme="dark"] .mode-card__cta{color:var(--accent)}

/* ── Confirm Banner — centered modal ─────────────────── */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:999;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.confirm-banner--modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:calc(100% - 48px);max-width:400px;margin:0;border-radius:var(--radius-xl);padding:28px 24px;box-shadow:0 32px 80px rgba(0,0,0,.28);animation:confirmIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes confirmIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.confirm-banner--modal .confirm-banner__msg{font-size:1.05rem;font-weight:600;text-align:center;margin-bottom:4px}
.confirm-banner--modal .confirm-banner__actions{justify-content:center;gap:12px;margin-top:8px}
.confirm-banner--modal .confirm-banner__actions .btn{min-width:110px;justify-content:center}

/* ── Progress bar hidden in quiz ─────────────────────── */
.quiz-progress-wrap{display:none!important}

/* ── Auth shell improvements ──────────────────────────── */
.auth-shell{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.auth-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:12px}
.auth-body{flex:1;padding:20px 24px 48px;display:flex;flex-direction:column;gap:28px}
.auth-brand{text-align:center;padding:8px 0 4px}
.auth-body .form-stack{gap:16px}
.auth-body .btn-primary{padding:14px;font-size:1rem;border-radius:var(--radius-lg);margin-top:4px}
.auth-body .form-input{padding:13px 16px;font-size:1rem;border-radius:var(--radius)}

/* ── Google OAuth button ───────────────────────────────── */
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border-radius:var(--radius-lg);background:var(--surface);border:1.5px solid var(--border-mid);color:var(--text);font-size:1rem;font-weight:600;box-shadow:var(--shadow-sm);transition:background var(--transition),box-shadow var(--transition),border-color var(--transition)}
.btn-google:hover{background:var(--surface-alt);border-color:var(--accent);box-shadow:var(--shadow)}
.btn-google:active{transform:scale(.97)}
body[data-theme="dark"] .btn-google{background:var(--surface);border-color:var(--border-mid);color:var(--text)}
body[data-theme="dark"] .btn-google:hover{background:var(--surface-alt);border-color:var(--accent)}

/* ── Auth OR divider ───────────────────────────────────── */
.auth-divider{display:flex;align-items:center;gap:12px;margin:2px 0}
.auth-divider span{font-size:.8rem;color:var(--text-muted);white-space:nowrap;font-weight:500}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}

/* ── Paper nav clear button ───────────────────────────── */
.quiz-paper-nav{display:flex;gap:8px;justify-content:center;padding:12px 20px;align-items:center;background:var(--bg);border-top:1px solid var(--border)}
#paperNavDeselBtn{color:var(--text-muted);font-size:.82rem}
#paperNavDeselBtn:hover{color:var(--wrong);background:var(--wrong-bg)}

/* ════════════════════════════════════════════════════════════
   ADMIN — ENTITY CARDS (Subjects & Papers grid)
════════════════════════════════════════════════════════════ */
.entity-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:16px}
.entity-card-grid--papers{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.entity-card{background:var(--card-bg,var(--surface));border:1.5px solid var(--card-border,var(--border));border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--transition),border-color var(--transition)}
.entity-card:hover{box-shadow:var(--shadow);border-color:var(--card-accent,var(--accent))}
.entity-card__body{padding:18px 16px 14px;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.entity-card__icon{width:40px;height:40px;border-radius:50%;background:var(--card-accent,var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.entity-card__icon svg{width:20px;height:20px}
.entity-card__paper-icon{width:44px;height:44px;border-radius:var(--radius);background:var(--accent-light);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.entity-card__paper-icon svg{width:22px;height:22px}
.entity-card__name{font-size:.9375rem;font-weight:600;color:var(--text);line-height:1.35;margin-top:2px}
.entity-card__meta{font-size:.75rem;color:var(--text-muted);letter-spacing:.04em}
.entity-card__toprow{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:2px}
.entity-card__chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.entity-chip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:500;color:var(--text-mid);background:var(--surface-alt);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
.entity-chip--questions{color:var(--accent);background:var(--accent-light);border-color:rgba(58,111,255,.22);font-weight:700}
.entity-card__actions{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface)}
.entity-card__actions--paper{flex-direction:column;gap:8px;align-items:stretch}
.entity-card__icon-btns{display:flex;gap:8px;justify-content:center}
.entity-card__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:500;border:1.5px solid var(--border);background:var(--surface);color:var(--text-mid);cursor:pointer;transition:background var(--transition),border-color var(--transition),color var(--transition);white-space:nowrap}
.entity-card__btn:hover{background:var(--surface-alt);border-color:var(--border-mid);color:var(--text)}
.entity-card__btn--danger:hover{background:var(--wrong-bg);border-color:var(--wrong);color:var(--wrong)}
.entity-card__btn--list{background:var(--accent-light);border-color:transparent;color:var(--accent);font-weight:600;width:100%}
.entity-card__btn--list:hover{background:var(--accent);color:#fff}
.entity-card__btn svg{width:14px;height:14px}
.entity-card__toggle-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:background var(--transition),color var(--transition);flex-shrink:0}
.entity-card__toggle-btn:hover{background:var(--accent-light);color:var(--accent);border-color:var(--accent)}
.entity-card__toggle-btn svg{width:14px;height:14px}

/* Paper access badges */
.paper-access-badge{font-size:.65rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.paper-badge--free{background:#e8f5ee;color:#1a6b44;border:1px solid #b6dfc8}
.paper-badge--premium{background:#fef3e2;color:#92600a;border:1px solid #f0d08a}
body[data-theme="dark"] .paper-badge--free{background:rgba(26,107,68,.25);color:#6ee7b7;border-color:rgba(110,231,183,.25)}
body[data-theme="dark"] .paper-badge--premium{background:rgba(255,215,0,.12);color:#ffd700;border-color:rgba(255,215,0,.25)}

/* ════════════════════════════════════════════════════════════
   ADMIN — USERS TABLE
════════════════════════════════════════════════════════════ */
.users-table{width:100%;overflow-x:auto}
.users-table__head{display:flex;padding:10px 20px;background:var(--surface-alt);border-bottom:1.5px solid var(--border);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted)}
.users-table__body{}
.users-row{display:flex;align-items:flex-start;padding:12px 20px;gap:12px;border-bottom:1px solid var(--border);transition:background var(--transition)}
.users-row:last-child{border-bottom:none}
.users-row:hover{background:var(--surface-alt)}
.users-row--alt{background:rgba(0,0,0,.018)}
body[data-theme="dark"] .users-row--alt{background:rgba(255,255,255,.025)}
.users-col{display:flex;align-items:flex-start}
.users-col--name{flex:2;min-width:160px;gap:10px;align-items:center}
.users-col--contact{flex:1.5;min-width:120px;font-size:.875rem;color:var(--text-mid)}
.users-col--plan{flex:.8;min-width:80px}
.users-col--dates{flex:1.4;min-width:140px;flex-direction:column;gap:2px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.user-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.user-info__name{font-size:.9rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-info__city{font-size:.75rem;color:var(--text-muted)}
.user-detail{font-size:.875rem;color:var(--text-mid)}
.plan-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.badge--free{background:var(--surface-alt);color:var(--text-muted);border:1px solid var(--border)}
.badge--premium{background:linear-gradient(135deg,#ffd700,#ffb800);color:#7a4e00}
.badge--expired{background:var(--wrong-bg);color:var(--wrong);border:1px solid var(--wrong)}
.date-row{display:flex;gap:6px;align-items:center;font-size:.78rem}
.date-lbl{color:var(--text-muted);min-width:42px}
.date-val{color:var(--text-mid);font-weight:500}
.date-val--expired{color:var(--wrong);font-weight:700}

/* Responsive users table */
@media(max-width:640px){
  .users-col--contact{display:none}
  .users-col--name{flex:1.5;min-width:0}
  .users-col--dates{flex:1;min-width:110px}
}

/* ════════════════════════════════════════════════════════════
   ADMIN — MODALS (Subject, Paper, Question)
════════════════════════════════════════════════════════════ */
.admin-modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(10,10,30,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.admin-modal-overlay[style*="flex"]{display:flex}
.admin-modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 24px 64px rgba(0,0,0,.22);width:100%;max-width:520px;max-height:90dvh;overflow-y:auto;padding:28px 24px;position:relative;animation:modalIn .18s cubic-bezier(.34,1.3,.64,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.admin-modal__title{font-size:1.05rem;font-weight:600;margin-bottom:20px;color:var(--text)}
.admin-modal__close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;border:none;background:var(--surface-alt);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:background var(--transition)}
.admin-modal__close:hover{background:var(--wrong-bg);color:var(--wrong)}

/* ════════════════════════════════════════════════════════════
   ADMIN — form-row (two-column paper form)
════════════════════════════════════════════════════════════ */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════
   DARK MODE — HEADER / NAV FIXES
   All sticky/fixed headers that were showing light backgrounds
   in dark mode are corrected here.
════════════════════════════════════════════════════════════ */

/* Inner nav (Subjects, Quiz-mode, Papers, Result, etc.)
   was hardcoded to rgba(245,246,252,.92) — a light-only colour */
body[data-theme="dark"] .inner-nav {
  background: rgba(15,17,23,.92);
  border-bottom-color: var(--border);
}
body[data-theme="dark"] .inner-nav__back {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
body[data-theme="dark"] .inner-nav__title { color: var(--text); }

/* Auth topbar (Sign-in / Sign-up / Daily-limit / Upgrade pages) */
body[data-theme="dark"] .auth-topbar {
  background: var(--surface);
  border-bottom-color: var(--border);
}

/* Profile topbar back button (sits on gradient header) */
body[data-theme="dark"] .profile-back-btn {
  background: rgba(255,255,255,.12);
  box-shadow: none;
}
body[data-theme="dark"] .profile-back-btn svg { color: #e6edf3; }

/* Home row-links (white glass cards) */
body[data-theme="dark"] .home-row-link {
  background: rgba(255,255,255,.06);
  color: var(--text);
}
body[data-theme="dark"] .home-row-link:hover {
  background: rgba(255,255,255,.10);
}
body[data-theme="dark"] .home-row-link__title { color: var(--text); }
body[data-theme="dark"] .home-row-link__icon { background: rgba(88,166,255,.14); }
body[data-theme="dark"] .home-row-link__icon svg { color: var(--accent); }

/* Quiz header (paper mode) — already has a rule but data-theme attr
   is on body, not on the element itself */
body[data-theme="dark"] .quiz-header {
  background: rgba(15,17,23,.92);
  border-bottom-color: rgba(255,255,255,.06);
}

/* Quiz quit / nav buttons in dark */
body[data-theme="dark"] .quiz-topbar__quit {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}
body[data-theme="dark"] .quiz-quit-btn {
  background: rgba(255,255,255,.08);
  color: var(--text);
}
body[data-theme="dark"] .quiz-quit-btn:hover {
  background: rgba(255,255,255,.16);
}

/* Paper timer bar in dark */
body[data-theme="dark"] .paper-timer-bar {
  background: rgba(22,33,43,.92);
  border-bottom-color: var(--border);
}

/* Admin mobile top bar */
body[data-theme="dark"] .admin-mobile-bar {
  background: var(--surface);
  border-bottom-color: var(--border);
}

/* ════════════════════════════════════════════════════════════
   DESKTOP-FRIENDLY LAYOUT  (min-width: 768px+)
   Mobile is priority — desktop enhancements only ADD breathing
   room and a two-panel feel; no functionality changes.
════════════════════════════════════════════════════════════ */

/* ── Centred app shell on wide screens ─────────────────── */
@media (min-width: 768px) {

  /* Give the whole app a max-width with a subtle card feel */
  body:not([data-view="home"]):not([data-view="profile"]):not([data-view="auth"]) .auth-shell,
  body:not([data-view="home"]):not([data-view="profile"]):not([data-view="auth"]) .home-shell {
    max-width: 640px;
    margin: 0 auto;
  }

  /* Inner pages: widen container slightly */
  .container { max-width: 740px; padding: 0 32px; }

  /* Inner nav wider */
  .inner-nav__inner { max-width: 740px; padding: 0 32px; }

  /* Quiz shell wider */
  .quiz-shell { max-width: 740px; }
  .quiz-header__inner { max-width: 740px; padding: 12px 32px 10px; }
  .quiz-topbar { max-width: 740px; padding: 14px 32px 10px; }
  .quiz-paper-nav, .quiz-submit-wrap, .quiz-end-wrap { max-width: 740px; padding: 0 32px 14px; }
  .quiz-options-shell { padding: 20px 32px 32px; }
  .quiz-q-wrap { padding: 20px 32px 24px; }
  .review-section { padding: 0 32px; }

  /* Home: widen inner */
  .home-inner { max-width: 600px; padding: 36px 32px 48px; }

  /* Profile */
  .profile-topbar { max-width: 600px; padding: 20px 32px 0; }
  .profile-hero   { max-width: 600px; padding: 28px 32px 24px; }
  .profile-body   { max-width: 600px; padding: 24px 32px 56px; }

  /* Auth pages */
  .auth-body { padding: 40px 48px 64px; max-width: 520px; }

  /* Result view */
  .result-header, .result-body { max-width: 600px; margin-left: auto; margin-right: auto; }

  /* Papers list */
  .papers-list { padding: 0 32px 40px; }
}

/* ── Large desktop (960px+): two-column feel for content ── */
@media (min-width: 960px) {

  /* Wrap app views in a centred panel with shadow */
  #app {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100dvh;
    background: var(--bg);
  }

  .view.active {
    width: 100%;
    max-width: 680px;
    min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--border), 0 24px 80px rgba(0,0,0,.08);
    background: var(--bg);
    border-radius: 0;
  }

  /* Home & Profile gradient views */
  body[data-view="home"] .home-shell,
  body[data-view="profile"] .profile-shell {
    max-width: 680px;
    margin: 0 auto;
    min-height: 100dvh;
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 24px 80px rgba(0,0,0,.12);
  }

  body[data-view="home"],
  body[data-view="profile"] {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  /* Left/right gutters in dark mode show the dark bg */
  body[data-theme="dark"][data-view="home"],
  body[data-theme="dark"][data-view="profile"] {
    background: #080b10;
  }

  /* Slightly more padding inside cards */
  .home-inner { padding: 40px 36px 56px; }
  .container  { max-width: 680px; padding: 0 36px; }
  .inner-nav__inner { max-width: 680px; padding: 0 36px; }
}

/* ── Extra wide (1280px+): show decorative side panels ─── */
@media (min-width: 1280px) {

  body[data-view="home"],
  body[data-view="profile"] {
    background: var(--bg);
  }

  body[data-theme="dark"][data-view="home"],
  body[data-theme="dark"][data-view="profile"] {
    background: #080b10;
  }

  /* Side branding strip */
  body::before {
    content: none; /* placeholder — add side art via JS if desired */
  }
}

/* ── Scrollbar styling on desktop ──────────────────────── */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 7px; height: 7px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-mid);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
}

/* ════════════════════════════════════════════════════════
   REFER & EARN + LOGOUT TOP BUTTON
════════════════════════════════════════════════════════ */

/* ── Log Out pill in profile hero ────────────────────── */
.profile-logout-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  letter-spacing: .01em;
}
.profile-logout-top-btn:hover {
  background: rgba(239,68,68,.30);
  border-color: rgba(239,68,68,.55);
  color: #fff;
}

/* ── Referral Card ───────────────────────────────────── */
.referral-card {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  border-radius: var(--radius-lg);
  padding: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 6px 28px rgba(99,102,241,.30);
}
.referral-card__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.referral-card__icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.referral-card__title {
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 4px;
}
.referral-card__sub {
  font-size: .75rem;
  opacity: .82;
  line-height: 1.4;
}

/* ── Code block ──────────────────────────────────────── */
.referral-code-block {
  background: rgba(0,0,0,.20);
  border-radius: 12px;
  padding: 13px 16px;
}
.referral-code-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 8px;
}
.referral-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.referral-code-val {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .20em;
  line-height: 1;
}
.referral-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.referral-copy-btn:hover { background: rgba(255,255,255,.28); }

/* ── Stats row ───────────────────────────────────────── */
.referral-stats-row {
  display: flex;
  background: rgba(0,0,0,.18);
  border-radius: 12px;
  overflow: hidden;
}
.referral-stat {
  flex: 1;
  text-align: center;
  padding: 12px 6px;
}
.referral-stat-div {
  width: 1px;
  background: rgba(255,255,255,.18);
}
.referral-stat__val {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.referral-stat__label {
  font-size: .62rem;
  font-weight: 600;
  opacity: .70;
  text-transform: uppercase;
  letter-spacing: .05em;
}