:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #edf3fa;
  --surface-3: #e4edf7;
  --text: #102033;
  --muted: #66758a;
  --border: #dbe5ef;
  --primary: #0b5fb5;
  --primary-strong: #073d7a;
  --primary-soft: #e5f2ff;
  --cyan: #00aef3;
  --accent: #ffd740;
  --success: #15803d;
  --success-bg: #e8f7ee;
  --danger: #c62828;
  --danger-bg: #fdecec;
  --warning: #9a6700;
  --warning-bg: #fff6d9;
  --shadow: 0 10px 32px rgba(25, 54, 91, .10);
  --radius: 18px;
  --nav-h: 72px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1420;
  --surface: #151f2d;
  --surface-2: #1b293a;
  --surface-3: #24364a;
  --text: #ecf3fb;
  --muted: #a6b5c6;
  --border: #2a3a4e;
  --primary: #4aa9ff;
  --primary-strong: #8bc9ff;
  --primary-soft: #173657;
  --cyan: #35c3ff;
  --accent: #ffe066;
  --success: #61d48a;
  --success-bg: #173826;
  --danger: #ff8585;
  --danger-bg: #472327;
  --warning: #ffd56a;
  --warning-bg: #433717;
  --shadow: 0 12px 38px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.app-shell { min-height:100dvh; padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.page { width:min(100%, 980px); margin:0 auto; padding:16px 16px 28px; }
.page.compact { max-width:720px; }
.topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:10px 16px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent); }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark { width:42px; height:42px; border-radius:13px; box-shadow:var(--shadow); }
.brand-copy strong { display:block; font-size:17px; line-height:1.05; }
.brand-copy span { display:block; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-top:3px; }
.brand-logo { width:132px; height:auto; border-radius:6px; }
.icon-btn { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:13px; background:var(--surface); color:var(--text); }
.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:40; height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(5,1fr); background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(18px); border-top:1px solid var(--border); }
.nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:10px; border:0; background:transparent; }
.nav-item svg { width:21px; height:21px; }
.nav-item.active { color:var(--primary); font-weight:700; }
.desktop-side { display:none; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.card.flat { box-shadow:none; }
.card + .card { margin-top:14px; }
.hero { padding:20px; background:linear-gradient(145deg,#082e60,#0b5fb5 64%,#14b6ee); color:white; border:none; overflow:hidden; position:relative; }
.hero::after { content:""; position:absolute; width:180px; height:180px; right:-60px; top:-55px; border-radius:50%; background:rgba(255,255,255,.10); }
.hero h1 { margin:0 0 8px; font-size:24px; }
.hero p { margin:0; opacity:.88; max-width:38ch; }
.hero-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.btn { min-height:44px; padding:10px 16px; border-radius:13px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:750; transition:.18s ease; }
.btn:active { transform:scale(.985); }
.btn-primary { background:var(--primary); color:white; }
.btn-primary.on-dark { background:white; color:#08376d; }
.btn-secondary { background:var(--surface-2); color:var(--text); border-color:var(--border); }
.btn-outline { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-danger { background:var(--danger-bg); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 25%,transparent); }
.btn-success { background:var(--success-bg); color:var(--success); }
.btn-block { width:100%; }
.btn[disabled], .disabled { opacity:.55; pointer-events:none; }
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:800; background:var(--surface-2); color:var(--muted); }
.badge.premium { color:#654b00; background:#ffe991; }
html[data-theme="dark"] .badge.premium { color:#211900; background:#ffd740; }
.badge.success { color:var(--success); background:var(--success-bg); }
.badge.danger { color:var(--danger); background:var(--danger-bg); }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:22px 2px 10px; }
.section-title h2 { margin:0; font-size:17px; }
.section-title p, .section-title a { margin:0; color:var(--muted); font-size:12px; }
.grid { display:grid; gap:12px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.metric { display:flex; flex-direction:column; gap:5px; }
.metric strong { font-size:24px; }
.metric span { color:var(--muted); font-size:12px; }
.list { display:grid; gap:10px; }
.list-item { display:flex; align-items:center; gap:12px; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.list-item .grow { flex:1; min-width:0; }
.list-item h3 { margin:0 0 4px; font-size:14px; }
.list-item p { margin:0; color:var(--muted); font-size:12px; }
.progress { height:8px; background:var(--surface-3); border-radius:99px; overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--cyan)); }
.progress.danger > span { background:var(--danger); }
.progress.warning > span { background:#d99b00; }
.form { display:grid; gap:12px; }
.field { display:grid; gap:6px; }
.field label { font-size:12px; font-weight:750; color:var(--muted); }
.input, select, textarea { width:100%; min-height:46px; border:1px solid var(--border); border-radius:13px; padding:10px 12px; background:var(--surface); color:var(--text); outline:none; }
textarea { min-height:110px; resize:vertical; }
.input:focus, select:focus, textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%, transparent); }
.filters { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.filters .span-2 { grid-column:1 / -1; }
.segmented { display:flex; gap:6px; padding:5px; border-radius:14px; background:var(--surface-2); }
.segmented button { flex:1; min-height:38px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-weight:700; }
.segmented button.active { background:var(--surface); color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.study-card { min-height:330px; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:28px 22px; }
.study-card .eyebrow { color:var(--primary); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.study-card h2 { font-size:23px; line-height:1.35; margin:16px 0; }
.answer-box { text-align:left; margin-top:16px; padding:16px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
.review-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.review-actions .btn { padding:10px 7px; font-size:12px; }
.option { width:100%; display:flex; align-items:flex-start; gap:11px; text-align:left; padding:13px; margin:9px 0; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); }
.option .letter { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); font-weight:850; }
.option.selected { border-color:var(--primary); background:var(--primary-soft); }
.option.correct { border-color:var(--success); background:var(--success-bg); }
.option.wrong { border-color:var(--danger); background:var(--danger-bg); }
.feedback { padding:15px; border-radius:14px; margin:14px 0; }
.feedback.ok { background:var(--success-bg); color:var(--success); }
.feedback.bad { background:var(--danger-bg); color:var(--danger); }
.lock { position:relative; overflow:hidden; }
.lock-overlay { margin-top:12px; padding:16px; border-radius:14px; border:1px dashed color-mix(in srgb,var(--accent) 65%,var(--border)); background:color-mix(in srgb,var(--warning-bg) 70%,var(--surface)); }
.lock-overlay strong { display:block; margin-bottom:4px; }
.lock-overlay p { color:var(--muted); font-size:12px; margin:0 0 10px; }
.tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { white-space:nowrap; min-height:38px; padding:8px 13px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--muted); }
.tab.active { color:white; background:var(--primary); border-color:var(--primary); }
.empty { text-align:center; padding:36px 16px; color:var(--muted); }
.empty .big { font-size:40px; }
.toast { position:fixed; left:14px; right:14px; bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index:90; padding:13px 14px; border-radius:14px; background:#10243c; color:white; box-shadow:0 14px 35px rgba(0,0,0,.3); animation:toast-in .2s ease; }
@keyframes toast-in { from { transform:translateY(12px); opacity:0 } }
.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(2,12,25,.62); display:grid; place-items:end center; padding:14px; }
.modal { width:min(100%,520px); max-height:88dvh; overflow:auto; padding:20px; background:var(--surface); border-radius:22px; box-shadow:var(--shadow); }
.modal h2 { margin-top:0; }
.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:14px; }
table { width:100%; border-collapse:collapse; min-width:680px; }
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); font-size:12px; }
th { color:var(--muted); background:var(--surface-2); }
.kicker { color:var(--primary); font-weight:850; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.row { display:flex; align-items:center; gap:10px; }
.row.wrap { flex-wrap:wrap; }
.space { justify-content:space-between; }
.hidden { display:none !important; }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 90% 0,#0d65bd 0,transparent 38%),linear-gradient(150deg,#06162d,#092b57 68%,#0a4f91); }
.login-card { width:min(100%,430px); padding:24px; border-radius:24px; background:color-mix(in srgb,#fff 96%,transparent); color:#102033; box-shadow:0 28px 60px rgba(0,0,0,.30); }
.login-card .brand-logo { width:170px; margin-bottom:14px; }
.login-card h1 { margin:6px 0; }
.login-card p { color:#5d6d80; }
.login-card .input { background:#fff; color:#102033; border-color:#d8e1eb; }
.install-banner { display:flex; align-items:center; gap:12px; }
.install-banner .grow { flex:1; }
.install-banner h3 { margin:0 0 3px; font-size:14px; }
.install-banner p { margin:0; font-size:11px; color:var(--muted); }
.file-drop { border:2px dashed var(--border); padding:22px; border-radius:16px; text-align:center; background:var(--surface-2); }
.file-drop input { width:100%; margin-top:10px; }
@media (min-width:760px) {
  .filters { grid-template-columns:repeat(3,1fr); }
  .filters .span-2 { grid-column:auto; }
  .grid-md-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1020px) {
  .app-shell { padding:0 0 0 238px; }
  .bottom-nav { display:none; }
  .desktop-side { position:fixed; inset:0 auto 0 0; width:238px; display:flex; flex-direction:column; padding:20px 14px; background:var(--surface); border-right:1px solid var(--border); z-index:50; }
  .desktop-side .brand-logo { width:170px; margin:4px 8px 24px; }
  .desktop-side nav { display:grid; gap:6px; }
  .desktop-side .nav-item { min-height:46px; padding:0 12px; flex-direction:row; justify-content:flex-start; border-radius:12px; font-size:13px; }
  .desktop-side .nav-item.active { background:var(--primary-soft); }
  .topbar { padding-left:24px; padding-right:24px; }
  .page { padding:22px 24px 42px; }
  .grid-lg-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }