/* ═══════════════════════════════ TOKENS ════ */
:root {
    --bg:       #0f0f12;
    --surf:     #17171d;
    --surf2:    #1f1f27;
    --surf3:    #27272f;
    --border:   #2c2c38;
    --border-l: #3a3a48;

    --t1: #eeeef5;
    --t2: #9090a8;
    --t3: #54546a;

    --accent:   #6c5ce7;
    --accent-h: #8b7df5;
    --acc-dim:  rgba(108,92,231,.16);

    --green:    #00b894;
    --green-d:  rgba(0,184,148,.15);
    --red:      #e17055;
    --red-d:    rgba(225,112,85,.15);
    --purple:   #a29bfe;
    --purple-d: rgba(162,155,254,.15);
    --orange:   #fdcb6e;
    --grey:     #636380;
    --grey-d:   rgba(99,99,128,.15);

    --r:   12px;
    --r-s: 7px;
    --t:   .22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--t1); min-height:100svh; overflow-x:hidden; font-size:14px; }

.view { min-height:100svh; }
.hidden { display:none !important; }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════ SETUP ════ */
.setup-nav {
    display:flex; align-items:center; gap:12px;
    padding:14px 20px;
    background:var(--surf); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:10;
}
.nav-back {
    display:flex; align-items:center; gap:5px;
    color:var(--t2); text-decoration:none; font-size:.85rem; font-weight:500;
    transition:color var(--t);
}
.nav-back:hover { color:var(--t1); }
.nav-title { flex:1; font-size:1rem; font-weight:650; letter-spacing:-.02em; }
.ai-badge {
    background:var(--accent); color:#fff;
    font-size:.68rem; font-weight:700; padding:2px 8px;
    border-radius:50px; letter-spacing:.06em;
}

.setup-body {
    max-width:720px; margin:0 auto;
    padding:24px 16px 80px;
    display:flex; flex-direction:column; gap:20px;
}

.setup-hero {
    display:flex; flex-direction:column; align-items:center;
    gap:8px; padding:8px 0 4px; text-align:center;
}
.orb {
    width:62px; height:62px; border-radius:50%;
    background:var(--acc-dim); border:1.5px solid rgba(108,92,231,.4);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent-h);
    box-shadow:0 0 28px rgba(108,92,231,.35);
    animation:orb-pulse 3s ease-in-out infinite;
}
@keyframes orb-pulse { 0%,100%{box-shadow:0 0 28px rgba(108,92,231,.35)} 50%{box-shadow:0 0 50px rgba(108,92,231,.6)} }
.setup-hero h1 { font-size:1.35rem; font-weight:700; letter-spacing:-.04em; }
.setup-hero p  { font-size:.86rem; color:var(--t3); }

/* Global card */
.global-card {
    background:var(--surf); border:1px solid var(--border);
    border-radius:var(--r); padding:18px;
}
.card-row {
    display:flex; gap:12px; flex-wrap:wrap;
}
.field { display:flex; flex-direction:column; gap:6px; flex:1; min-width:130px; }
.field label { font-size:.73rem; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.07em; }
.inp {
    background:var(--surf2); border:1px solid var(--border);
    border-radius:var(--r-s); color:var(--t1); font-family:inherit;
    font-size:.9rem; padding:9px 12px; outline:none; width:100%;
    transition:border-color var(--t),box-shadow var(--t);
}
.inp::placeholder { color:var(--t3); }
.inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--acc-dim); }
.sel-wrap { position:relative; }
.sel {
    width:100%; appearance:none; background:var(--surf2); border:1px solid var(--border);
    border-radius:var(--r-s); color:var(--t1); font-family:inherit;
    font-size:.9rem; padding:9px 32px 9px 12px; outline:none; cursor:pointer;
    transition:border-color var(--t),box-shadow var(--t);
}
.sel:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--acc-dim); }
.sel-wrap svg { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--t3); pointer-events:none; }

.duration-display {
    display:flex; align-items:center; gap:7px;
    background:var(--surf2); border:1px solid var(--border);
    border-radius:var(--r-s); padding:9px 12px;
    font-size:.9rem; font-weight:600; color:var(--accent-h);
}
.duration-display svg { color:var(--t3); flex-shrink:0; }

/* Sections */
.sections-header {
    display:flex; align-items:center; justify-content:space-between;
}
.sections-label { font-size:.82rem; font-weight:600; color:var(--t2); }
.add-section-btn {
    display:flex; align-items:center; gap:6px;
    background:var(--acc-dim); border:1px solid rgba(108,92,231,.35);
    border-radius:50px; color:var(--accent-h);
    font-family:inherit; font-size:.82rem; font-weight:600;
    padding:7px 16px; cursor:pointer; transition:all var(--t);
}
.add-section-btn:hover { background:rgba(108,92,231,.25); }

.sections-list { display:flex; flex-direction:column; gap:10px; }

.section-card {
    background:var(--surf); border:1px solid var(--border);
    border-radius:var(--r); padding:16px;
    display:flex; flex-direction:column; gap:12px;
    animation:slideUp .22s ease both;
}
@keyframes slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.section-card-header {
    display:flex; align-items:center; justify-content:space-between;
}
.section-num {
    font-size:.75rem; font-weight:700; color:var(--accent-h);
    text-transform:uppercase; letter-spacing:.08em;
}
.del-section-btn {
    background:transparent; border:none; color:var(--t3);
    cursor:pointer; font-size:.9rem; padding:3px 6px;
    border-radius:5px; transition:all var(--t);
}
.del-section-btn:hover { color:var(--red); background:var(--red-d); }

.section-card-row { display:flex; gap:12px; flex-wrap:wrap; }
.section-card-row .field { min-width:140px; }

.type-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.type-chip {
    background:var(--surf2); border:1px solid var(--border);
    border-radius:50px; color:var(--t2);
    font-family:inherit; font-size:.78rem; font-weight:500;
    padding:5px 12px; cursor:pointer; transition:all var(--t);
}
.type-chip.active {
    background:var(--acc-dim); border-color:var(--accent);
    color:var(--accent-h); font-weight:600;
}

/* Generate button */
.generate-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; background:var(--accent); color:#fff; border:none;
    border-radius:var(--r-s); font-family:inherit; font-size:.97rem; font-weight:600;
    padding:14px; cursor:pointer;
    box-shadow:0 4px 20px rgba(108,92,231,.45);
    transition:background var(--t),transform .15s ease;
}
.generate-btn:hover { background:var(--accent-h); }
.generate-btn:active { transform:scale(.98); }
.generate-btn:disabled { opacity:.65; cursor:not-allowed; }


/* ═══════════════════════════════ TEST VIEW ════ */
#view-test {
    display:flex; flex-direction:column; height:100svh; overflow:hidden;
    background:#111116;
}

/* Top bar */
.test-topbar {
    display:flex; align-items:center; gap:0;
    background:#1a1a22; border-bottom:1px solid var(--border);
    flex-shrink:0; min-height:48px; overflow:hidden;
}
.test-topbar-left {
    display:flex; align-items:center; gap:10px;
    padding:0 16px; flex-shrink:0;
    border-right:1px solid var(--border); min-height:48px;
}
.test-logo { font-size:1.2rem; }
.test-name  { font-size:.88rem; font-weight:650; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; }

.section-tabs {
    display:flex; gap:0; flex:1; overflow-x:auto;
    scrollbar-width:none; min-height:48px; align-items:center; padding:0 8px;
}
.section-tabs::-webkit-scrollbar { display:none; }
.sec-tab {
    padding:0 18px; height:48px; background:transparent;
    border:none; border-bottom:2px solid transparent;
    color:var(--t2); font-family:inherit; font-size:.85rem; font-weight:600;
    cursor:pointer; transition:all var(--t); white-space:nowrap;
    flex-shrink:0;
}
.sec-tab:hover { color:var(--t1); background:rgba(255,255,255,.04); }
.sec-tab.active { color:var(--accent-h); border-bottom-color:var(--accent); background:rgba(108,92,231,.08); }

.test-topbar-right {
    display:flex; align-items:center; gap:12px;
    padding:0 16px; flex-shrink:0;
    border-left:1px solid var(--border); min-height:48px;
}
.timer-box {
    display:flex; align-items:center; gap:6px;
    background:#22222e; border:1px solid var(--border);
    border-radius:6px; padding:6px 12px;
    font-size:.88rem; font-weight:700; color:#fff;
}
.timer-box.warning { border-color:var(--orange); color:var(--orange); animation:blink 1s ease infinite; }
.timer-box.danger   { border-color:var(--red);    color:var(--red);    animation:blink .5s ease infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Body */
.test-body {
    display:flex; flex:1; overflow:hidden;
}

/* Question panel */
.q-panel {
    flex:1; display:flex; flex-direction:column;
    overflow:hidden; border-right:1px solid var(--border);
}

.q-meta-bar {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:10px 20px; background:#1e1e28;
    border-bottom:1px solid var(--border); flex-shrink:0;
}
.q-label { font-size:.85rem; font-weight:500; color:var(--t2); }
.q-label strong { color:var(--accent-h); font-size:1rem; }
.q-marks-badge {
    margin-left:auto; background:var(--acc-dim); border:1px solid rgba(108,92,231,.3);
    border-radius:50px; color:var(--accent-h);
    font-size:.75rem; font-weight:700; padding:3px 12px; letter-spacing:.03em;
}
.q-type-tag {
    background:var(--surf3); border:1px solid var(--border);
    border-radius:4px; color:var(--t3);
    font-size:.7rem; font-weight:700; padding:2px 8px; letter-spacing:.05em;
}

.q-content {
    flex:1; overflow-y:auto; padding:24px 28px;
}
.q-text {
    font-size:1rem; line-height:1.7; color:var(--t1);
    margin-bottom:20px; font-weight:400;
}

/* MCQ */
.mcq-list { display:flex; flex-direction:column; gap:8px; list-style:none; }
.mcq-opt {
    display:flex; align-items:flex-start; gap:14px;
    background:var(--surf); border:1.5px solid var(--border);
    border-radius:var(--r-s); padding:13px 16px;
    cursor:pointer; transition:all var(--t); user-select:none;
}
.mcq-opt:hover { border-color:var(--border-l); background:var(--surf2); }
.mcq-opt.selected {
    border-color:var(--accent); background:var(--acc-dim);
}
.opt-letter {
    flex-shrink:0; width:26px; height:26px; border-radius:50%;
    background:var(--surf2); border:1.5px solid var(--border);
    font-size:.78rem; font-weight:700; color:var(--t2);
    display:flex; align-items:center; justify-content:center;
    transition:all var(--t);
}
.mcq-opt.selected .opt-letter {
    background:var(--accent); border-color:var(--accent); color:#fff;
}
.opt-text { font-size:.9rem; color:var(--t1); line-height:1.5; padding-top:2px; }

/* T/F */
.tf-list { display:flex; gap:10px; margin-top:4px; }
.tf-opt {
    flex:1; background:var(--surf); border:1.5px solid var(--border);
    border-radius:var(--r-s); padding:14px;
    text-align:center; font-size:.92rem; font-weight:600;
    color:var(--t2); cursor:pointer; transition:all var(--t);
}
.tf-opt:hover { border-color:var(--border-l); background:var(--surf2); }
.tf-opt.selected { border-color:var(--accent); background:var(--acc-dim); color:var(--accent-h); }

/* Short answer */
.short-area {
    width:100%; background:var(--surf2); border:1px solid var(--border);
    border-radius:var(--r-s); color:var(--t1); font-family:inherit;
    font-size:.9rem; padding:12px 14px; outline:none; resize:vertical;
    min-height:100px; transition:border-color var(--t);
}
.short-area::placeholder { color:var(--t3); }
.short-area:focus { border-color:var(--accent); }

/* Fill blank */
.fill-inp {
    background:transparent; border:none; border-bottom:2px solid var(--border-l);
    color:var(--accent-h); font-family:inherit; font-size:1rem; font-weight:600;
    padding:2px 8px; outline:none; width:130px; text-align:center;
    transition:border-color var(--t);
}
.fill-inp:focus { border-bottom-color:var(--accent); }

/* Action bar */
.q-actions-bar {
    display:flex; align-items:center; gap:8px;
    padding:12px 20px; background:#1a1a22;
    border-top:1px solid var(--border); flex-shrink:0; flex-wrap:wrap;
}
.qbtn {
    border:none; border-radius:var(--r-s); font-family:inherit;
    font-size:.82rem; font-weight:600; padding:9px 16px; cursor:pointer;
    transition:all var(--t);
}
.qbtn-clear  { background:var(--surf2); color:var(--t2); border:1px solid var(--border); }
.qbtn-clear:hover  { background:var(--surf3); color:var(--t1); }
.qbtn-review { background:var(--purple-d); color:var(--purple); border:1px solid rgba(162,155,254,.3); }
.qbtn-review:hover { background:rgba(162,155,254,.25); }
.qbtn-prev   { background:var(--surf2); color:var(--t2); border:1px solid var(--border); margin-left:auto; }
.qbtn-prev:hover { background:var(--surf3); color:var(--t1); }
.qbtn-save   { background:var(--green); color:#000; font-weight:700; }
.qbtn-save:hover { background:#00d4a8; }

/* Sidebar */
.sidebar {
    width:240px; flex-shrink:0; display:flex; flex-direction:column;
    background:#15151c; overflow-y:auto;
}
@media(max-width:680px){
    .test-body { flex-direction: column; overflow-y: auto; }
    .q-panel { flex: none; border-right: none; overflow: visible; padding-bottom: 10px; }
    .q-content { overflow-y: visible; padding: 16px; }
    .q-actions-bar {
        position: fixed; bottom: 0; left: 0; width: 100%;
        z-index: 50; box-shadow: 0 -4px 16px rgba(0,0,0,0.5);
        padding: 10px; justify-content: space-between; gap: 8px;
    }
    .qbtn { padding: 10px 8px; font-size: 0.75rem; flex: 1; text-align: center; }
    .qbtn-report { display: none; }
    .qbtn-prev { margin-left: 0; }
    .sidebar { width: 100%; height: auto; overflow: visible; background: transparent; padding-bottom: 80px; }
    .legend { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 10px; scrollbar-width: none; }
    .legend::-webkit-scrollbar { display: none; }
    .legend-item { flex-shrink: 0; }
    .nav-panel { padding: 10px; }
    .submit-btn { margin: 10px; }
}

.legend {
    padding:12px 14px; border-bottom:1px solid var(--border);
    display:flex; flex-direction:column; gap:6px;
}
.legend-item { display:flex; align-items:center; gap:8px; font-size:.75rem; color:var(--t2); }
.lbubble {
    width:24px; height:24px; border-radius:50%;
    font-size:.72rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lbubble.answered        { background:var(--green); color:#000; }
.lbubble.not-answered    { background:var(--red); color:#fff; }
.lbubble.not-visited     { background:var(--grey); color:#fff; }
.lbubble.review          { background:var(--purple); color:#000; }
.lbubble.answered-review { background:var(--purple); color:#000; border:2px solid var(--green); }

.nav-panel { flex:1; padding:12px; display:flex; flex-direction:column; gap:14px; }
.nav-section-label {
    font-size:.72rem; font-weight:700; color:var(--t2);
    text-transform:uppercase; letter-spacing:.08em;
    padding:4px 0 6px; border-bottom:1px solid var(--border);
}
.q-grid { display:flex; flex-wrap:wrap; gap:5px; }
.q-bubble {
    width:32px; height:32px; border-radius:50%;
    background:var(--grey); color:#fff;
    font-size:.75rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all var(--t); border:2px solid transparent;
    flex-shrink:0;
}
.q-bubble:hover         { transform:scale(1.1); }
.q-bubble.answered      { background:var(--green); color:#000; }
.q-bubble.not-answered  { background:var(--red);   color:#fff; }
.q-bubble.review        { background:var(--purple); color:#000; }
.q-bubble.answered-review { background:var(--purple); color:#000; border-color:var(--green); }
.q-bubble.current       { border:2px solid #fff; box-shadow:0 0 0 2px var(--accent); }

.submit-btn {
    margin:12px; padding:12px;
    background:var(--accent); color:#fff; border:none;
    border-radius:var(--r-s); font-family:inherit; font-size:.9rem; font-weight:700;
    cursor:pointer; transition:all var(--t);
    box-shadow:0 4px 16px rgba(108,92,231,.4);
}
.submit-btn:hover { background:var(--accent-h); }


/* ═══════════════════════════════ RESULTS ════ */
.results-body {
    max-width:560px; margin:0 auto; padding:40px 16px 60px;
    display:flex; flex-direction:column; align-items:center; gap:28px;
}
.results-hero { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.score-ring {
    position:relative; width:130px; height:130px;
}
.score-ring svg { width:100%; height:100%; }
.score-center {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-pct  { font-size:1.6rem; font-weight:700; letter-spacing:-.04em; }
.score-label { font-size:.72rem; color:var(--t3); font-weight:600; text-transform:uppercase; }

.results-hero h2 { font-size:1.3rem; font-weight:700; letter-spacing:-.03em; }
.results-sub { font-size:.88rem; color:var(--t2); }

.results-grid {
    width:100%; display:flex; flex-direction:column; gap:10px;
}
.res-section-card {
    background:var(--surf); border:1px solid var(--border);
    border-radius:var(--r); padding:16px 20px;
    display:flex; flex-direction:column; gap:10px;
}
.res-sec-name { font-size:.95rem; font-weight:650; }
.res-stats { display:flex; gap:16px; flex-wrap:wrap; }
.res-stat { display:flex; flex-direction:column; gap:2px; }
.res-stat .val { font-size:1.15rem; font-weight:700; }
.res-stat .lbl { font-size:.72rem; color:var(--t3); }
.val.correct  { color:var(--green); }
.val.wrong    { color:var(--red); }
.val.skipped  { color:var(--t3); }
.val.marks-v  { color:var(--accent-h); }

.results-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.res-btn {
    padding:11px 28px; border:none; border-radius:var(--r-s);
    font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:all var(--t);
}
.res-review { background:var(--surf2); color:var(--t1); border:1px solid var(--border); }
.res-review:hover { background:var(--surf3); }
.res-new { background:var(--accent); color:#fff; box-shadow:0 4px 16px rgba(108,92,231,.4); }
.res-new:hover { background:var(--accent-h); }


/* ═══════════════════════════════ REVIEW ════ */
.review-nav {
    display:flex; align-items:center; gap:14px;
    padding:12px 20px; background:var(--surf);
    border-bottom:1px solid var(--border); font-size:.95rem; font-weight:650;
    position:sticky; top:0; z-index:5;
}
.nav-back-btn {
    display:flex; align-items:center; gap:5px;
    background:var(--surf2); border:1px solid var(--border);
    border-radius:50px; color:var(--t2); font-family:inherit;
    font-size:.8rem; font-weight:500; padding:6px 12px; cursor:pointer; transition:all var(--t);
}
.nav-back-btn:hover { color:var(--t1); }

.review-content { padding:16px 20px 60px; max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }

.review-q-card {
    background:var(--surf); border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
    animation:slideUp .2s ease both;
}
.review-q-header {
    display:flex; align-items:center; gap:10px;
    padding:10px 16px; border-bottom:1px solid var(--border);
    background:var(--surf2);
}
.review-q-num { font-size:.8rem; font-weight:700; color:var(--accent-h); }
.review-status-pill {
    margin-left:auto; font-size:.72rem; font-weight:700; padding:3px 10px;
    border-radius:50px;
}
.pill-correct  { background:var(--green-d); color:var(--green); }
.pill-wrong    { background:var(--red-d);   color:var(--red);   }
.pill-skipped  { background:var(--grey-d);  color:var(--grey);  }
.review-q-body { padding:14px 16px; }
.review-q-text { font-size:.92rem; line-height:1.6; color:var(--t1); margin-bottom:10px; }
.review-opts { list-style:none; display:flex; flex-direction:column; gap:6px; }
.review-opt {
    display:flex; align-items:flex-start; gap:10px;
    padding:8px 12px; border:1px solid var(--border); border-radius:6px;
    font-size:.86rem; color:var(--t2); background:var(--surf2);
}
.review-opt.correct-ans { border-color:var(--green); background:var(--green-d); color:var(--green); font-weight:600; }
.review-opt.user-wrong  { border-color:var(--red);   background:var(--red-d);   color:var(--red);   font-weight:600; }
.review-opt-letter { font-weight:700; flex-shrink:0; }

/* scrollbar */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-l); border-radius:4px; }