/* Step 2 CK Qbank design system. One stylesheet, every page: tokens, type, header, buttons, cards, chips, tables. Light is the default; [data-theme="dark"] on flips the palette. */ :root{ --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --bg:#f3f5f8; --panel:#ffffff; --panel2:#f7f9fb; --panel3:#eef2f7; --line:#e1e6ee; --line2:#eceff4; --text:#111827; --muted:#4b5563; --dim:#8b95a5; --inverse:#ffffff; --primary:#2456e6; --primary-ink:#1a44c2; --primary-soft:#e9effd; --primary-line:#c2d0f7; --accent:var(--primary); --accent-soft:color-mix(in srgb,var(--accent) 12%,white); --accent-line:color-mix(in srgb,var(--accent) 35%,white); --ok:#15803d; --ok-soft:#e7f6ec; --ok-line:#a9dcbb; --no:#b91c1c; --no-soft:#fdeaea; --no-line:#f2b6b6; --warn:#b45309; --warn-soft:#fff3d6; --warn-line:#f2d48d; --flag:#d97706; --hl:#fff1a8; --mark-bg:#fdeec2; --mark-fg:#7a4a00; --shadow-1:0 1px 2px rgba(17,24,39,.05),0 1px 3px rgba(17,24,39,.06); --shadow-2:0 4px 14px rgba(17,24,39,.08),0 1px 3px rgba(17,24,39,.06); --radius:12px; --radius-s:8px; --radius-xs:6px; --header-h:56px; color-scheme:light; } :root[data-theme="dark"]{ --bg:#0f141b; --panel:#161c25; --panel2:#1b222d; --panel3:#212a36; --line:#293241; --line2:#222a36; --text:#e7ecf3; --muted:#a6b0bf; --dim:#6f7a8a; --inverse:#0f141b; --primary:#7b98ff; --primary-ink:#9db1ff; --primary-soft:#1d2a4d; --primary-line:#33488a; --accent-soft:color-mix(in srgb,var(--accent) 22%,#161c25); --accent-line:color-mix(in srgb,var(--accent) 45%,#161c25); --ok:#4ade80; --ok-soft:#14301f; --ok-line:#256b3f; --no:#f87171; --no-soft:#3b1a1a; --no-line:#7a2e2e; --warn:#fbbf24; --warn-soft:#3a2b0b; --warn-line:#7a5a14; --flag:#fbbf24; --hl:#5b4d12; --mark-bg:#4a3a10; --mark-fg:#ffd98a; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.45); color-scheme:dark; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--text);background:var(--bg); -webkit-font-smoothing:antialiased;min-height:100vh} h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.01em} h1{font-size:1.75rem;font-weight:800} h2{font-size:1.25rem;font-weight:700} h3{font-size:1rem;font-weight:700} p{margin:0} a{color:var(--primary-ink);text-decoration:none} a:hover{text-decoration:underline} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} img{max-width:100%;height:auto} mark{background:var(--mark-bg);color:var(--mark-fg);border-radius:3px;padding:0 3px;font-weight:600} kbd{font-family:var(--mono);font-size:.78em;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel2);color:var(--muted)} .hidden,[hidden]{display:none!important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mono{font-family:var(--mono)} .muted{color:var(--muted)} .dim{color:var(--dim)} .num{font-variant-numeric:tabular-nums} /* ---------- header ---------- */ .s2-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--panel);border-bottom:1px solid var(--line); display:flex;align-items:center;padding:0 20px;gap:18px} .s2-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;letter-spacing:-.02em;white-space:nowrap;text-decoration:none} .s2-brand:hover{text-decoration:none} .s2-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#6d5df5);color:#fff;display:grid;place-items:center; font-weight:800;font-size:15px;letter-spacing:-.04em;box-shadow:0 2px 6px rgba(36,86,230,.35)} .s2-brand small{font-weight:600;color:var(--dim);font-size:.8rem;margin-left:2px} .s2-nav{display:flex;gap:2px;margin-left:8px} .s2-nav a{padding:7px 12px;border-radius:8px;color:var(--muted);font-weight:600;font-size:.9rem;text-decoration:none} .s2-nav a:hover{background:var(--panel2);color:var(--text)} .s2-nav a.on{background:var(--primary-soft);color:var(--primary-ink)} .s2-spacer{flex:1} .s2-crumb{color:var(--dim);font-size:.9rem;display:flex;align-items:center;gap:8px;min-width:0} .s2-crumb b{color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .s2-crumb .sw{width:10px;height:10px;border-radius:3px;background:var(--accent);flex:none} .s2-iconbtn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--muted);display:grid;place-items:center;padding:0} .s2-iconbtn:hover{background:var(--panel2);color:var(--text)} .s2-iconbtn svg{width:18px;height:18px} .s2-menubtn{display:none} @media(max-width:820px){ .s2-header{padding:0 14px;gap:10px} .s2-nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:var(--panel);border-bottom:1px solid var(--line); padding:8px;flex-direction:column;box-shadow:var(--shadow-2)} .s2-nav.open{display:flex} .s2-menubtn{display:grid} .s2-brand small{display:none} .s2-crumb{display:none} } /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--radius-s);border:1px solid var(--line); background:var(--panel);color:var(--text);font-weight:600;font-size:.92rem;line-height:1.2;text-decoration:none;transition:background .12s,border-color .12s,transform .06s;white-space:nowrap} .btn:hover{background:var(--panel2);text-decoration:none} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff} .btn.primary:hover{background:var(--primary-ink);border-color:var(--primary-ink)} .btn.accent{background:var(--accent);border-color:var(--accent);color:#fff} .btn.accent:hover{filter:brightness(.92)} .btn.soft{background:var(--primary-soft);border-color:var(--primary-line);color:var(--primary-ink)} .btn.ghost{border-color:transparent;background:transparent;color:var(--muted)} .btn.ghost:hover{background:var(--panel2);color:var(--text)} .btn.danger{color:var(--no);border-color:var(--no-line);background:var(--no-soft)} .btn.lg{padding:12px 22px;font-size:1rem;border-radius:10px} .btn.sm{padding:6px 11px;font-size:.82rem} .btn svg{width:16px;height:16px;flex:none} .btn.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink);box-shadow:inset 0 0 0 1px var(--primary)} /* segmented control */ .seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-s);padding:3px;gap:2px} .seg button{border:0;background:transparent;padding:7px 14px;border-radius:6px;font-weight:600;color:var(--muted);font-size:.9rem} .seg button.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow-1)} .seg button:hover:not(.on){color:var(--text)} /* ---------- surfaces ---------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)} .card.pad{padding:20px 22px} .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line2)} .card-h h2,.card-h h3{font-size:.95rem;font-weight:700} .card-h .hint{font-size:.82rem;color:var(--dim);font-weight:500} .card-b{padding:18px 20px} .hint{font-size:.85rem;color:var(--dim)} .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)} .rule{height:1px;background:var(--line2);margin:14px 0} /* chips */ .chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.75rem;font-weight:600; background:var(--panel3);color:var(--muted);border:1px solid var(--line2);white-space:nowrap} .chip.accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)} .chip.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)} .chip.no{background:var(--no-soft);color:var(--no);border-color:var(--no-line)} .chip.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)} .chip.hy{color:#c2410c;background:#fff1e6;border-color:#fdd3b1} :root[data-theme="dark"] .chip.hy{color:#fdba74;background:#3a2210;border-color:#7a4a1c} .stars{color:#e0891a;letter-spacing:1px;font-size:.8rem} /* progress bars */ .bar{height:8px;border-radius:999px;background:var(--panel3);overflow:hidden} .bar i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .35s} .bar.ok i{background:var(--ok)} .bar.no i{background:var(--no)} .bar.warn i{background:var(--warn)} .bar.thin{height:5px} /* stat tiles */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-1)} .tile .v{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1} .tile .l{font-size:.78rem;color:var(--dim);font-weight:600;margin-top:4px} .tile .s{font-size:.8rem;color:var(--muted);margin-top:6px} .tile.accent .v{color:var(--accent)} /* tables */ .tbl{width:100%;border-collapse:collapse;font-size:.9rem} .tbl th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:8px 12px;border-bottom:1px solid var(--line)} .tbl td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:var(--panel2)} .tbl .r{text-align:right;font-variant-numeric:tabular-nums} .tbl .barcell{min-width:120px} /* forms */ .input{width:100%;padding:10px 13px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--panel);color:var(--text);outline:none} .input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)} .input.sm{padding:7px 10px;font-size:.9rem} /* toast */ .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none; background:var(--text);color:var(--inverse);padding:10px 16px;border-radius:10px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-2);transition:.2s;z-index:90} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* dialogs */ dialog.s2-dialog{border:0;border-radius:14px;padding:0;background:var(--panel);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);max-width:min(760px,94vw);width:100%} dialog.s2-dialog::backdrop{background:rgba(10,14,22,.55);backdrop-filter:blur(2px)} dialog.s2-dialog .dh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)} dialog.s2-dialog .db{padding:16px 18px;max-height:70vh;overflow:auto} dialog.lightbox{max-width:min(1000px,96vw)} dialog.lightbox figure{margin:0} dialog.lightbox img{display:block;max-height:76vh;margin:0 auto;border-radius:6px} dialog.lightbox figcaption{font-size:.8rem;color:var(--dim);padding:10px 4px 0;text-align:center} /* page container */ .wrap{max-width:1120px;margin:0 auto;padding:0 20px} .section{padding:36px 0} .section-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px} .section-h h2{font-size:1.35rem} @media(max-width:640px){.wrap{padding:0 14px}.section{padding:28px 0}} /* subject grid (hub + index pages) */ .subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px} .subject{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-1);transition:box-shadow .15s,transform .15s,border-color .15s;overflow:hidden} .subject::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)} .subject:hover{box-shadow:var(--shadow-2);transform:translateY(-1px);border-color:var(--accent-line)} .subject .t{display:flex;align-items:center;justify-content:space-between;gap:8px} .subject h3{font-size:1.05rem} .subject .counts{display:flex;gap:12px;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums} .subject .counts b{color:var(--text);font-weight:700} .subject .blurb{font-size:.86rem;color:var(--muted);flex:1} .subject .prog{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--dim)} .subject .prog .bar{flex:1} .subject .acts{display:flex;gap:8px;margin-top:2px} .subject .acts .btn{flex:1} .footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--dim);font-size:.82rem} .footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center} .footer a{color:var(--muted)} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}