@charset "UTF-8";
:root {
  color-scheme: light;
  --navy: #12264b;
  --navy-2: #1a3768;
  --gold: #d7ae43;
  --gold-soft: #fff3ce;
  --green: #16825c;
  --green-soft: #e7f6ee;
  --ink: #162743;
  --muted: #78849a;
  --line: #e5eaf2;
  --surface: #ffffff;
  --canvas: #f4f6fa;
  --red: #bd4652;
  --radius: 22px;
  --shadow: 0 12px 32px rgba(19, 39, 75, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans Devanagari", "Noto Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #eaf0f7; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #eaf0f7; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(215, 174, 67, .7); outline-offset: 2px; }
.app-shell { position: relative; min-height: 100vh; max-width: 420px; margin: 0 auto; padding: 0 18px calc(102px + env(safe-area-inset-bottom)); background: var(--canvas); overflow: hidden; }
.boot-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.boot-mark { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 8px; overflow: hidden; border-radius: 22px; color: var(--gold); background: var(--navy); font-size: 34px; box-shadow: var(--shadow); }
.boot-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.boot-screen strong { color: var(--navy); font-size: 13px; letter-spacing: .13em; }
.boot-screen span { font-size: 13px; }
.topbar { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 10px 0; background: rgba(244, 246, 250, .94); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.brand-mark { flex: 0 0 43px; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(215, 174, 67, .42); border-radius: 15px; color: var(--gold); background: var(--navy); }
.brand-logo { display: block; flex: 0 0 100px; width: 100px; height: 62px; border-radius: 8px; object-fit: contain; background: var(--navy); }
.brand-text { font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy b { color: var(--navy); font-size: 12px; letter-spacing: .095em; line-height: 1.1; }
.brand-copy span { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.icon-button, .lang-switch { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 14px; color: var(--navy); background: var(--surface); font-weight: 700; }
.lang-switch { min-width: 54px; padding: 0 10px; font-size: 12px; }
.install-button { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 14px; color: var(--navy); background: var(--gold); font-size: 12px; font-weight: 800; box-shadow: 0 5px 12px rgba(215, 174, 67, .21); }
.install-button.is-visible { display: inline-flex; }
.install-button svg { width: 16px; height: 16px; }
.status-strip { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; padding: 9px 12px; border: 1px solid #e9d9a8; border-radius: 14px; color: #715821; background: #fff8e4; font-size: 11px; line-height: 1.45; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 99px; background: var(--green); }
.status-strip.offline .status-dot { background: #d18b19; }
main { min-height: 60vh; }
.hero { position: relative; overflow: hidden; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 17px; margin: 3px 0 22px; padding: 23px 21px 20px; border-radius: 27px; color: white; background: linear-gradient(132deg, #102349 0%, #1b3a70 100%); box-shadow: 0 17px 35px rgba(18, 38, 75, .16); }
.hero::before, .hero::after { position: absolute; content: ""; pointer-events: none; border: 1px solid rgba(215, 174, 67, .24); border-radius: 50%; }
.hero::before { width: 200px; height: 200px; right: -98px; top: -85px; }
.hero::after { width: 120px; height: 120px; right: 42px; bottom: -101px; }
.hero-top, .hero-bottom { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #f5db93; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; display: block; width: 17px; height: 2px; border-radius: 4px; background: var(--gold); }
.hero h1 { max-width: 360px; margin: 12px 0 8px; color: white; font-size: clamp(25px, 7vw, 34px); letter-spacing: -.045em; line-height: 1.12; }
.hero p { max-width: 350px; margin: 0; color: rgba(245, 248, 255, .79); font-size: 13px; line-height: 1.55; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-proof { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.85); font-size: 11px; }
.hero-proof svg { width: 16px; height: 16px; color: #f4d882; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 15px; text-decoration: none; font-size: 13px; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:active { transform: translateY(1px) scale(.99); }
.button-gold { color: var(--navy); background: var(--gold); box-shadow: 0 7px 15px rgba(215, 174, 67, .2); }
.button-navy { color: white; background: var(--navy); }
.button-soft { color: var(--navy); background: #edf2f9; }
.button-outline { border: 1px solid var(--line); color: var(--navy); background: white; }
.button-danger { color: var(--red); background: #fff0f0; }
.button-block { width: 100%; }
.button-small { min-height: 38px; border-radius: 12px; padding: 0 12px; font-size: 12px; }
.text-button { border: 0; padding: 5px 0; color: var(--navy); background: transparent; font-weight: 800; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
.section-heading h2 { margin: 0; color: var(--navy); font-size: 18px; letter-spacing: -.025em; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.section-heading .count-note { color: var(--muted); font-size: 11px; white-space: nowrap; }
.search-wrap { position: relative; margin-bottom: 17px; }
.search-wrap svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: #8794a8; transform: translateY(-50%); }
.search-input { width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: white; font-size: 13px; box-shadow: 0 4px 12px rgba(17, 38, 75, .025); }
.search-input::placeholder { color: #9aa4b5; }
.set-list { display: grid; gap: 11px; }
.package-offer { margin: 13px 0 2px; padding: 16px; border: 1px solid #ead99e; border-radius: 20px; color: #604d1d; background: linear-gradient(135deg, #fff9e8 0%, #fff 100%); box-shadow: 0 8px 22px rgba(18, 38, 75, .06); }
.package-offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.package-offer-kicker { display: block; margin: 0 0 4px; color: #876a1f; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.package-offer h3 { margin: 0; color: var(--navy); font-size: 15px; line-height: 1.25; }
.package-offer p { margin: 9px 0 0; color: #6d6243; font-size: 11px; line-height: 1.55; }
.package-offer .package-inclusions { color: var(--navy); font-weight: 700; }
.package-offer-price { flex: 0 0 auto; padding: 7px 9px; border-radius: 12px; color: var(--navy); background: #f8ebbf; font-size: 13px; white-space: nowrap; }
.package-offer .button { margin-top: 13px; }
.package-inline-cta { min-height: 45px; margin: 0 0 9px; border-color: #ead99e; color: #69551d; background: #fffaf0; text-align: left; }
.package-inline-cta > span { flex: 1; font-size: 12px; }
.package-complete { display: flex; align-items: center; gap: 8px; margin: 11px 0 0; padding: 10px 12px; border: 1px solid #cde8d9; border-radius: 14px; color: #176649; background: #eef9f2; font-size: 11px; font-weight: 750; line-height: 1.4; }
.package-complete svg { width: 16px; height: 16px; flex: 0 0 16px; }
.set-card { position: relative; display: grid; grid-template-columns: 47px minmax(0, 1fr) 24px; align-items: start; gap: 12px; width: 100%; padding: 15px 14px; border: 1px solid #e9edf3; border-radius: 21px; text-align: left; color: inherit; background: white; box-shadow: 0 5px 16px rgba(18, 38, 75, .045); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.set-card:hover { transform: translateY(-1px); border-color: #d7dfed; box-shadow: var(--shadow); }
.set-icon { width: 47px; height: 47px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; color: var(--navy); background: #edf2f9; font-size: 21px; }
.site-mark-img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.site-mark-fallback { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.set-card[data-exam="advocate-license-exam"] .set-icon,
.set-card[data-exam="advocate-civil-law"] .set-icon,
.set-card[data-exam="advocate-criminal-law"] .set-icon { color: #9b7720; background: #fff5d9; }
.set-main { min-width: 0; }
.set-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 1px 0 5px; }
.set-title { color: var(--navy); font-size: 14px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.set-desc { display: block; margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.set-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-chip, .free-badge, .lang-badge, .best-badge, .price-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 99px; color: #5b6880; background: #f1f4f8; font-size: 10px; font-weight: 700; line-height: 1; }
.free-badge { color: #177755; background: var(--green-soft); }
.price-badge { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 99px; color: #755b1e; background: var(--gold-soft); font-size: 10px; font-weight: 800; line-height: 1; }
.lang-badge { color: #755b1e; background: var(--gold-soft); }
.best-badge { color: #64748b; background: #f4f6f9; }
.card-chevron { align-self: center; width: 20px; height: 20px; color: #a1aabb; }
.search-empty, .empty-state { padding: 28px 18px; border: 1px dashed #d5ddeb; border-radius: 20px; text-align: center; color: var(--muted); background: rgba(255,255,255,.6); font-size: 13px; line-height: 1.55; }
.tip-card { display: flex; align-items: flex-start; gap: 11px; margin: 20px 0 4px; padding: 14px; border: 1px solid #e6ebf3; border-radius: 18px; color: #6a7689; background: #fff; font-size: 11px; line-height: 1.5; }
.tip-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 10px; color: var(--navy); background: #eef3fa; }
.tip-card b { color: var(--navy); }
.bottom-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 420px; min-height: 70px; margin: 0 auto; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(224, 230, 239, .9); background: rgba(255,255,255,.95); backdrop-filter: blur(18px); }
.nav-item { display: grid; align-content: center; justify-items: center; gap: 3px; border: 0; border-radius: 13px; color: #9aa4b3; background: transparent; font-size: 10px; font-weight: 700; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item.active { color: var(--navy); }
.nav-item.active svg { color: var(--gold); }
.page-head { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 20px; }
.back-button { width: 41px; height: 41px; flex: 0 0 41px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; color: var(--navy); background: white; }
.back-button svg { width: 18px; height: 18px; }
.page-head-copy { min-width: 0; flex: 1; }
.page-head h1 { margin: 1px 0 5px; color: var(--navy); font-size: 22px; letter-spacing: -.035em; line-height: 1.2; }
.page-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.set-hero { padding: 19px; border: 1px solid #e8edf3; border-radius: 23px; background: white; box-shadow: var(--shadow); }
.set-hero-top { display: flex; align-items: center; gap: 13px; }
.set-hero-icon { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 19px; color: var(--navy); background: #edf2f9; font-size: 27px; }
.set-hero-name { min-width: 0; }
.set-hero-name h2 { margin: 0 0 5px; color: var(--navy); font-size: 17px; line-height: 1.25; }
.set-hero-name p { margin: 0; color: var(--muted); font-size: 11px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.stat-box { min-height: 72px; display: grid; align-content: center; gap: 4px; padding: 11px 9px; border-radius: 15px; background: #f3f6fa; }
.stat-box:nth-child(2) { background: #fff7df; }
.stat-box:nth-child(3) { background: #eaf7f0; }
.stat-box strong { color: var(--navy); font-size: 17px; line-height: 1; }
.stat-box span { color: var(--muted); font-size: 10px; line-height: 1.25; }
.free-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px; border-radius: 15px; color: #236b52; background: var(--green-soft); font-size: 11px; line-height: 1.45; }
.free-note svg { width: 17px; height: 17px; flex: 0 0 17px; }
.payment-cta { justify-content: flex-start; min-height: 50px; margin: 0 0 13px; padding: 0 14px; text-align: left; }
.payment-cta > svg:first-child { width: 18px; height: 18px; flex: 0 0 18px; }
.payment-cta > span { min-width: 0; flex: 1; font-size: 12px; line-height: 1.3; text-align: left; }
.payment-cta > svg:last-child { width: 17px; height: 17px; flex: 0 0 17px; }
.pwa-package-note { margin: 0 0 13px; padding: 12px; border: 1px solid #ead99e; border-radius: 15px; color: #6c581f; background: #fff9e8; font-size: 11px; line-height: 1.5; }
.pwa-package-note strong { display: block; margin-bottom: 5px; color: var(--navy); font-size: 12px; }
.pwa-package-note p { margin: 0 0 5px; }
.pwa-package-note p:last-child { margin-bottom: 0; }
.timer-rule { display: flex; align-items: flex-start; gap: 8px; margin: -3px 0 1px; padding: 9px 10px; border-radius: 12px; color: #657188; background: #f4f6fa; font-size: 10px; line-height: 1.45; }
.timer-rule svg { width: 15px; height: 15px; flex: 0 0 15px; color: #9a7928; }
.mode-card { display: grid; gap: 11px; margin: 12px 0 20px; }
.mode-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 18px; text-align: left; color: var(--ink); background: white; }
.mode-choice:hover, .mode-choice.selected { border-color: #c8d4e5; box-shadow: 0 7px 19px rgba(18,38,75,.06); }
.mode-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 14px; color: var(--navy); background: #edf2f9; }
.mode-icon svg { width: 21px; height: 21px; }
.mode-copy { min-width: 0; flex: 1; }
.mode-copy b { display: block; margin-bottom: 4px; color: var(--navy); font-size: 13px; }
.mode-copy span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.mode-arrow { width: 18px; height: 18px; color: #9da9b9; }
.question-picker { margin: 13px 0 16px; padding: 16px; border: 1px solid #e8edf3; border-radius: 20px; background: white; box-shadow: var(--shadow); }
.question-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.question-picker-head > div { min-width: 0; }
.question-picker h2 { margin: 0 0 5px; color: var(--navy); font-size: 15px; letter-spacing: -.02em; }
.question-picker-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.question-available { flex: 0 0 auto; padding: 6px 8px; border-radius: 99px; color: var(--navy); background: #edf2f9; font-size: 9px; font-weight: 800; white-space: nowrap; }
.question-stepper { display: grid; grid-template-columns: 54px minmax(64px, 1fr) 54px; align-items: center; gap: 11px; max-width: 330px; margin: 16px auto 12px; }
.stepper-button { width: 54px; height: 52px; border: 1px solid #dfe6f0; border-radius: 15px; color: var(--navy); background: #f7f9fc; font-size: 25px; font-weight: 700; line-height: 1; }
.stepper-button:active { background: #edf2f9; }
.question-value { display: block; min-width: 0; }
.question-value input { display: block; width: 100%; height: 52px; padding: 0 8px; border: 1px solid #dfe6f0; border-radius: 15px; color: var(--navy); background: white; text-align: center; font-size: 21px; font-weight: 850; font-variant-numeric: tabular-nums; }
.question-value input::-webkit-inner-spin-button, .question-value input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.question-value input { appearance: textfield; }
.question-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 0 13px; }
.question-preset { min-height: 36px; padding: 7px 11px; border: 1px solid #e2e8f0; border-radius: 99px; color: #59677e; background: white; font-size: 10px; font-weight: 750; }
.question-preset.active { border-color: var(--navy); color: white; background: var(--navy); }
.count-gate-note { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: start; gap: 8px; margin: 0 0 10px; padding: 11px; border: 1px solid #efdfb2; border-radius: 13px; color: #705821; background: #fff9e9; font-size: 10px; line-height: 1.45; }
.count-gate-note > svg { width: 16px; height: 16px; color: #977319; }
.count-gate-note .button { grid-column: 2; justify-self: start; min-height: 37px; margin-top: 2px; }
.practice-instructions { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 10px; border-radius: 12px; color: #67748a; background: #f5f7fa; font-size: 10px; line-height: 1.45; }
.practice-instructions svg { width: 15px; height: 15px; flex: 0 0 15px; color: #9a7928; }
.pwa-count-gate-notice { margin: 0 0 13px; padding: 12px; border: 1px solid #e9d79b; border-radius: 14px; color: #66521f; background: #fff9e8; font-size: 11px; line-height: 1.5; }
.pwa-count-gate-notice strong { display: block; margin-bottom: 5px; color: #604b17; font-size: 12px; }
.pwa-count-gate-notice p { margin: 0; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.privacy-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.privacy-note svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--green); }
.practice-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 13px; }
.practice-top .question-count { color: var(--muted); font-size: 12px; font-weight: 700; }
.timer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 99px; color: var(--navy); background: #eaf0f9; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.timer-pill.warning { color: #a63b49; background: #ffeded; }
.progress-track { height: 6px; overflow: hidden; border-radius: 99px; background: #e4eaf2; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #ecc969); transition: width .2s ease; }
.question-card { margin: 16px 0 13px; padding: 18px 16px; border: 1px solid #e9edf3; border-radius: 22px; background: white; box-shadow: 0 6px 20px rgba(18,38,75,.045); }
.question-topic { display: inline-flex; margin-bottom: 10px; color: var(--green); font-size: 11px; font-weight: 800; }
.question-text { margin: 0; color: var(--navy); font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.58; white-space: pre-wrap; }
.question-hint { margin: 10px 0 0; color: #9aa4b5; font-size: 10px; }
.option-list { display: grid; gap: 9px; margin: 13px 0; }
.option-button { display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: start; gap: 10px; width: 100%; min-height: 53px; padding: 12px; border: 1px solid #e5eaf2; border-radius: 16px; text-align: left; color: var(--ink); background: white; transition: border .15s ease, background .15s ease, transform .15s ease; }
.option-button:active { transform: scale(.995); }
.option-key { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; color: #65748b; background: #eff3f8; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.option-text { padding-top: 3px; font-size: 13px; line-height: 1.5; }
.option-button.selected { border-color: #9eb4d6; background: #f4f7fc; }
.option-button.selected .option-key { color: white; background: var(--navy); }
.option-button.right { border-color: #83c7a5; background: #effaf4; }
.option-button.right .option-key { color: white; background: var(--green); }
.option-button.wrong { border-color: #e0a0a5; background: #fff4f4; }
.option-button.wrong .option-key { color: white; background: var(--red); }
.option-button.locked { cursor: default; }
.feedback { margin: 12px 0; padding: 13px; border-radius: 16px; font-size: 12px; line-height: 1.55; }
.feedback.good { color: #1e654d; background: #e9f7ef; }
.feedback.bad { color: #8d3640; background: #fff0f1; }
.feedback.locked { color: #755b1e; background: #fff7df; }
.feedback strong { display: block; margin-bottom: 5px; font-size: 13px; }
.feedback p { margin: 4px 0 0; }
.feedback .feedback-answer { margin-top: 6px; color: var(--navy); font-weight: 700; }
.question-tools { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 13px 0; }
.text-link { border: 0; color: #7d889a; background: transparent; font-size: 11px; font-weight: 700; }
.text-link.flagged { color: #986e0e; }
.quiz-actions { display: flex; align-items: center; gap: 8px; margin-top: 17px; }
.quiz-actions .button { flex: 1; }
.quiz-actions .button.icon-only { flex: 0 0 42px; width: 42px; padding: 0; }
.quiz-actions svg { width: 17px; height: 17px; }
.quiz-number-grid { display: flex; gap: 6px; overflow-x: auto; margin: 14px 0; padding: 2px 1px 7px; scrollbar-width: thin; }
.qn-button { width: 31px; height: 31px; flex: 0 0 31px; border: 0; border-radius: 10px; color: #778399; background: #eaf0f7; font-size: 10px; font-weight: 800; }
.qn-button.current { color: white; background: var(--navy); }
.qn-button.answered { color: #247253; background: #def2e7; }
.qn-button.flagged::after { content: ""; position: absolute; }
.lock-banner { display: flex; align-items: flex-start; gap: 10px; margin: 13px 0; padding: 13px; border: 1px solid #f1dfad; border-radius: 16px; color: #6d5723; background: #fff8e6; font-size: 11px; line-height: 1.5; }
.lock-banner svg { width: 18px; height: 18px; flex: 0 0 18px; }
.lock-banner p { margin: 0; }
.result-hero { margin: 4px 0 17px; padding: 21px; border-radius: 24px; color: white; background: linear-gradient(140deg, #12264b, #1c4176); box-shadow: 0 12px 24px rgba(18,38,75,.16); }
.result-topline { display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.74); font-size: 11px; }
.score-line { display: flex; align-items: end; gap: 9px; margin: 17px 0 13px; }
.score-number { color: white; font-size: 45px; font-weight: 850; letter-spacing: -.06em; line-height: .92; font-variant-numeric: tabular-nums; }
.score-number small { color: rgba(255,255,255,.56); font-size: 19px; font-weight: 700; letter-spacing: 0; }
.score-caption { padding-bottom: 3px; color: rgba(255,255,255,.8); font-size: 12px; }
.result-stats { display: flex; flex-wrap: wrap; gap: 7px; }
.result-stat { padding: 7px 9px; border-radius: 99px; color: rgba(255,255,255,.89); background: rgba(255,255,255,.12); font-size: 10px; }
.result-stat b { margin-right: 4px; color: #ffe6a2; }
.result-note { margin: 12px 0; padding: 12px; border: 1px solid #f1dfad; border-radius: 15px; color: #715821; background: #fff8e4; font-size: 11px; line-height: 1.5; }
.review-list { display: grid; gap: 10px; margin: 12px 0 18px; }
.review-item { padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.review-q { margin-bottom: 8px; color: var(--navy); font-size: 12px; font-weight: 800; line-height: 1.5; }
.review-answer, .review-explanation { margin-top: 5px; color: #68758b; font-size: 11px; line-height: 1.5; }
.review-answer b, .review-explanation b { color: var(--navy); }
.panel { margin: 0 0 14px; padding: 16px; border: 1px solid #e8edf3; border-radius: 20px; background: white; box-shadow: 0 5px 15px rgba(18,38,75,.035); }
.account-panel { border-color: rgba(18,38,75,.12); }
.account-help { margin: 8px 0 0; color: var(--muted, #61708a); font-size: 12px; line-height: 1.55; }
.account-consent { padding-top: 8px; border-top: 1px solid #edf0f4; font-size: 11px; }
.account-status { margin: 0 0 9px; color: var(--navy); font-weight: 750; overflow-wrap: anywhere; }
.account-error { margin: 8px 0; color: #b42318; font-size: 12px; line-height: 1.5; }
.account-form { margin: 10px 0 0; }
.account-form .form-label { display: block; margin: 10px 0 5px; }
.account-form .form-input { width: 100%; min-height: 44px; }
.account-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.account-form-actions .button { flex: 1 1 auto; }
.account-code-input { max-width: 220px; text-align: center; font-size: 20px; letter-spacing: .18em; }
.account-verify-button { margin-top: 10px; }
.account-code-sent { margin: 9px 0; padding: 10px 11px; border: 1px solid rgba(34,101,171,.16); border-radius: 12px; background: #f1f7ff; color: #244c79; font-size: 12px; line-height: 1.5; }
.panel h2, .panel h3 { margin: 0 0 11px; color: var(--navy); font-size: 15px; }
.progress-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f2f6; }
.progress-row:last-child { border-bottom: 0; }
.progress-row-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #f0f4fa; font-size: 18px; }
.progress-row-main { min-width: 0; flex: 1; }
.progress-row-main b { display: block; overflow: hidden; color: var(--navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.progress-row-main span { color: var(--muted); font-size: 10px; }
.progress-row-score { color: var(--navy); font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: flex; align-items: end; justify-content: center; padding: 12px; background: rgba(8, 18, 37, .52); backdrop-filter: blur(5px); }
.modal-sheet { width: min(100%, 500px); max-height: min(88vh, 740px); overflow-y: auto; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 20px 20px; background: #fff; box-shadow: 0 -8px 35px rgba(6, 13, 28, .18); animation: sheet-up .2s ease-out; }
@keyframes sheet-up { from { transform: translateY(18px); opacity: .65; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle { width: 38px; height: 4px; margin: -7px auto 17px; border-radius: 4px; background: #d8dee8; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.sheet-head h2 { margin: 0 0 5px; color: var(--navy); font-size: 19px; }
.sheet-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.close-button { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--navy); background: white; font-size: 18px; }
.form-label { display: block; margin: 12px 0 6px; color: #59677e; font-size: 11px; font-weight: 800; }
.form-input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #dfe5ee; border-radius: 14px; color: var(--ink); background: #fff; font-size: 14px; }
.demo-code-hint { margin: 9px 0 12px; padding: 10px; border: 1px dashed #dcc476; border-radius: 13px; color: #725a1c; background: #fff9e9; font-size: 10px; line-height: 1.5; }
.payment-preview { display: flex; align-items: center; gap: 12px; margin: 13px 0; padding: 13px; border: 1px solid #e5eaf2; border-radius: 15px; background: #f8f9fb; }
.qr-placeholder { width: 53px; height: 53px; flex: 0 0 53px; display: grid; place-items: center; border: 1px dashed #b8c4d7; border-radius: 12px; color: #8c99ac; background: white; font-size: 22px; }
.payment-preview b { display: block; margin-bottom: 4px; color: var(--navy); font-size: 11px; }
.payment-preview span { display: block; color: var(--muted); font-size: 10px; line-height: 1.4; }
.toast { position: fixed; z-index: 100; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); left: 16px; max-width: 480px; margin: 0 auto; padding: 12px 15px; border-radius: 15px; color: white; background: var(--navy); box-shadow: 0 10px 28px rgba(6,15,34,.25); font-size: 12px; line-height: 1.45; animation: toast-in .18s ease-out; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.spinner { width: 24px; height: 24px; border: 2px solid #dce4ef; border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-card { display: flex; align-items: center; gap: 10px; min-height: 80px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); background: white; font-size: 12px; }
.error-card { padding: 15px; border: 1px solid #f1c9cd; border-radius: 16px; color: #9a3b46; background: #fff2f3; font-size: 12px; line-height: 1.5; }
.install-help { margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.hidden { display: none !important; }
@media (min-width: 600px) {
  .app-shell { min-height: calc(100vh - 32px); margin: 16px auto; border: 1px solid rgba(216,224,235,.8); border-radius: 30px; box-shadow: 0 25px 70px rgba(17,34,62,.13); }
  .bottom-nav { bottom: 16px; border: 1px solid rgba(224,230,239,.9); border-radius: 0 0 27px 27px; }
}
@media (max-width: 370px) {
  .app-shell { padding-right: 11px; padding-left: 11px; }
  .brand-copy b { font-size: 11px; }
  .hero { padding-right: 17px; padding-left: 17px; }
  .hero h1 { font-size: 25px; }
  .install-button { padding: 0 9px; }
  .stat-grid { gap: 6px; }
}
@media (max-width: 599px) {
  html, body { width: 100%; height: 100%; min-height: 100%; overflow: hidden; }
  body { min-height: 100dvh; }
  .app-shell { display: flex; flex-direction: column; width: calc(100% - 24px); max-width: 420px; height: calc(100dvh - 20px); min-height: 0; margin: 10px auto; padding: 0 12px; border: 1px solid rgba(216,224,235,.85); border-radius: 22px; box-shadow: 0 12px 34px rgba(17,34,62,.12); overflow: hidden; }
  .topbar, .status-strip, .bottom-nav { flex: 0 0 auto; }
  main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .topbar { min-height: 56px; padding: 6px 0; }
  .brand-mark { flex-basis: 39px; width: 39px; height: 39px; border-radius: 13px; }
  .brand-logo { flex-basis: 66px; width: 66px; height: 42px; border-radius: 7px; }
  .hero { min-height: 124px; gap: 8px; margin: 2px 0 9px; padding: 12px 14px 11px; border-radius: 17px; }
  .hero h1 { margin-top: 4px; font-size: 21px; line-height: 1.08; }
  .hero p { font-size: 10px; line-height: 1.35; }
  .section-heading { margin: 10px 0 6px; }
  .section-heading h2 { font-size: 15px; }
  .search-wrap { margin-bottom: 7px; }
  .search-input { min-height: 40px; border-radius: 13px; font-size: 12px; }
  .set-list { gap: 6px; }
  .set-card { grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 14px; }
  .set-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
  .set-title-row { margin: 0 0 4px; }
  .set-title { font-size: 12px; }
  .set-desc { display: none; }
  .set-meta { gap: 4px; }
  .meta-chip, .free-badge, .lang-badge, .best-badge, .price-badge { padding: 3px 6px; font-size: 8px; }
  .card-chevron { width: 16px; height: 16px; }
  .page-head { gap: 8px; margin: 1px 0 10px; }
  .back-button { width: 38px; height: 38px; flex-basis: 38px; }
  .page-head h1 { font-size: 19px; }
  .page-head p { font-size: 10px; }
  .set-hero { padding: 12px; border-radius: 17px; }
  .set-hero-top { gap: 9px; }
  .set-hero-icon { width: 43px; height: 43px; border-radius: 14px; font-size: 21px; }
  .set-hero-name h2 { font-size: 14px; }
  .stat-grid { gap: 5px; margin: 10px 0; }
  .stat-box { min-height: 51px; padding: 7px 5px; border-radius: 11px; }
  .stat-box strong { font-size: 14px; }
  .stat-box span { font-size: 9px; }
  .free-note { gap: 7px; margin-bottom: 8px; padding: 8px 9px; font-size: 10px; }
  .payment-cta { min-height: 44px; margin-bottom: 8px; padding: 0 10px; }
  .payment-cta > span { font-size: 11px; }
  .question-picker { margin: 9px 0 11px; padding: 11px; border-radius: 16px; }
  .question-picker h2 { font-size: 13px; }
  .question-picker-head p { font-size: 10px; }
  .question-available { padding: 4px 6px; font-size: 8px; }
  .question-stepper { grid-template-columns: 46px minmax(64px, 1fr) 46px; gap: 8px; margin: 10px auto 8px; }
  .stepper-button, .question-value input { height: 44px; }
  .stepper-button { width: 46px; }
  .question-presets { gap: 5px; margin-bottom: 8px; }
  .question-preset { min-height: 32px; padding: 6px 8px; font-size: 9px; }
  .count-gate-note { padding: 9px; font-size: 9px; }
  .count-gate-note .button { min-height: 36px; }
  .practice-instructions { margin-bottom: 7px; padding: 8px; font-size: 9px; }
  .timer-rule { padding: 7px 8px; font-size: 9px; }
  .mode-card { gap: 7px; margin: 7px 0 11px; }
  .mode-choice { gap: 8px; padding: 9px; border-radius: 14px; }
  .mode-icon { width: 35px; height: 35px; flex-basis: 35px; border-radius: 11px; }
  .mode-copy b { font-size: 12px; }
  .mode-copy span { font-size: 10px; }
  .question-card { margin: 11px 0 9px; padding: 13px 11px; border-radius: 16px; }
  .question-text { font-size: 15px; line-height: 1.45; }
  .option-list { gap: 6px; margin: 9px 0; }
  .option-button { min-height: 44px; gap: 7px; padding: 9px; border-radius: 13px; }
  .option-key { width: 23px; height: 23px; }
  .option-text { font-size: 12px; }
  .bottom-nav { position: relative; inset: auto; right: auto; bottom: auto; left: auto; width: 100%; max-width: none; min-height: 54px; margin: 6px 0 0; padding: 4px 7px calc(4px + env(safe-area-inset-bottom)); border: 1px solid rgba(224, 230, 239, .95); border-radius: 14px; box-shadow: 0 3px 13px rgba(17,34,62,.08); transform: none; }
  html.lin-touch .app-shell { max-width: 420px; }
}
/* Touch-first tablets stay on a readable app canvas; only phone-width screens are full-bleed. */
html.lin-touch, html.lin-touch body { width: 100%; max-width: 100%; min-height: 100%; overflow-x: hidden; }
html.lin-touch body { background: var(--canvas); }
html.lin-touch .app-shell { max-width: 420px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Production eSewa order card in the standalone companion PWA. */
.pwa-modal-subtitle { margin: -2px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.pwa-important-notice { margin: 10px 0 13px; padding: 12px; border: 1px solid #ead9a4; border-radius: 15px; color: #594b25; background: #fff9e8; font-size: 10px; line-height: 1.55; }
.pwa-important-notice strong { display: block; margin-bottom: 6px; color: #6b5416; font-size: 11px; }
.pwa-important-notice p { margin: 5px 0 0; }
.pwa-order-intro { margin: 10px 0; color: #58667c; font-size: 10px; line-height: 1.55; }
.pwa-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 13px; color: var(--navy); background: #f0f4fa; font-size: 11px; }
.pwa-price-row strong { color: #81620c; font-size: 16px; }
.pwa-qr-wrap { display: grid; grid-template-columns: 126px minmax(0, 1fr); align-items: center; gap: 12px; margin: 12px 0; padding: 11px; border: 1px solid #e2e8f1; border-radius: 16px; background: #f8f9fb; }
.pwa-qr-open { display: block; width: 126px; height: 126px; padding: 5px; border: 1px solid #e1e5ec; border-radius: 12px; background: #fff; }
.pwa-order-qr { display: block; width: 100%; height: 100%; object-fit: contain; }
.pwa-qr-copy { color: #5b687c; font-size: 10px; line-height: 1.5; }
.pwa-qr-copy > b { display: block; margin-bottom: 5px; color: var(--navy); font-size: 11px; }
.pwa-qr-copy p { margin: 4px 0; }
.pwa-qr-full { display: inline-block; margin-top: 5px; color: #496c9e; font-size: 10px; font-weight: 800; text-decoration: underline; }
.pwa-number-fallback { margin: 12px 0; padding: 12px; border: 1px solid #ead9a4; border-radius: 15px; color: #625222; background: #fff9e8; font-size: 10px; line-height: 1.5; }
.pwa-number-fallback > p { margin: 0 0 8px; }
.pwa-number-fallback > b { color: var(--navy); }
.pwa-fallback-label { margin-top: 7px; color: #756537; font-size: 9px; font-weight: 800; }
.pwa-fallback-number { margin: 2px 0 7px; color: var(--navy); font-size: 19px; font-weight: 850; letter-spacing: .06em; }
.pwa-order-step { margin: 14px 0 4px; color: var(--navy); font-size: 11px; font-weight: 850; }
.pwa-order-form { margin: 0; }
.pwa-field-help { display: block; margin: 5px 0 2px; color: #7a879b; font-size: 9px; line-height: 1.45; }
.pwa-spam-notice { margin: 9px 0 5px; padding: 9px 10px; border-left: 3px solid #c8a63f; border-radius: 9px; color: #645a3c; background: #fffbef; font-size: 9px; line-height: 1.5; }
.pwa-spam-notice p { margin: 0; }
.pwa-spam-notice p + p { margin-top: 5px; }
.pwa-order-error { margin: 10px 0; }
.pwa-order-what { margin: 12px 0 3px; padding: 10px; border-radius: 12px; color: #657187; background: #f7f8fa; font-size: 9px; line-height: 1.5; }
.pwa-order-what b { color: var(--navy); font-size: 10px; }
.pwa-order-what p { margin: 4px 0 0; }
.pwa-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.pwa-order-confirmation { margin: 10px 0 12px; padding: 15px; border: 1px solid #cce5d7; border-radius: 17px; color: #425c4d; background: #f0faf4; font-size: 11px; line-height: 1.55; }
.pwa-confirm-mark { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; color: white; background: #2c8a60; font-size: 19px; font-weight: 900; }
.pwa-order-confirmation h3 { margin: 0 0 6px; color: #174b35; font-size: 15px; }
.pwa-order-confirmation > p { margin: 6px 0; }
.pwa-unlock-code { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 11px 0; padding: 8px; border: 1px dashed #8fbea4; border-radius: 13px; background: white; }
.pwa-unlock-code code { color: var(--navy); font-size: 13px; font-weight: 850; letter-spacing: .05em; overflow-wrap: anywhere; }
.pwa-unlock-code .button { min-height: 38px; flex: 0 0 auto; padding: 0 9px; font-size: 10px; }
.pwa-order-error-text { color: #973d47; font-size: 10px; }
.pwa-manual-unlock { margin-top: 15px; padding-top: 13px; border-top: 1px solid #e9edf3; }
.pwa-manual-unlock h3 { margin: 0 0 5px; color: var(--navy); font-size: 13px; }
.pwa-manual-unlock > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
@media (max-width: 380px) {
  .modal-sheet { padding-right: 14px; padding-left: 14px; }
  .pwa-qr-wrap { grid-template-columns: 102px minmax(0, 1fr); gap: 9px; padding: 9px; }
  .pwa-qr-open { width: 102px; height: 102px; }
  .pwa-unlock-code { align-items: flex-start; flex-direction: column; }
}


/* Learning Place: an in-app catalogue that links to the maintained website source. */
.learning-home-card { width: 100%; display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 13px; border: 1px solid #e7ebf2; border-radius: 18px; text-align: left; color: var(--ink); background: #fff; box-shadow: 0 5px 16px rgba(18,38,75,.045); }
.learning-home-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 14px; color: var(--gold); background: var(--navy); }
.learning-home-icon svg { width: 22px; height: 22px; }
.learning-home-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.learning-home-copy b { color: var(--navy); font-size: 13px; }
.learning-home-copy span { color: var(--muted); font-size: 10px; line-height: 1.4; }
.learning-home-cta { display: inline-flex; align-items: center; gap: 2px; color: var(--navy); font-size: 10px; font-weight: 800; white-space: nowrap; }
.learning-home-cta svg { width: 15px; height: 15px; }
.learning-hero { position: relative; overflow: hidden; display: grid; gap: 10px; margin: 4px 0 17px; padding: 19px; border-radius: 23px; color: #fff; background: linear-gradient(135deg, #102349 0%, #1b3a70 100%); box-shadow: 0 13px 30px rgba(18,38,75,.14); }
.learning-hero::after { position: absolute; content: ""; width: 180px; height: 180px; right: -95px; top: -91px; border: 1px solid rgba(215,174,67,.28); border-radius: 50%; pointer-events: none; }
.learning-hero .eyebrow, .learning-hero h1, .learning-hero p, .learning-hero small, .learning-library-button { position: relative; z-index: 1; }
.learning-hero h1 { margin: 0; color: #fff; font-size: 25px; letter-spacing: -.03em; line-height: 1.2; }
.learning-hero p { max-width: 340px; margin: 0; color: rgba(245,248,255,.82); font-size: 12px; line-height: 1.55; }
.learning-hero small { color: rgba(245,248,255,.72); font-size: 10px; line-height: 1.4; }
.learning-library-button { width: fit-content; min-height: 42px; margin: 2px 0; }
.learning-library-button svg { width: 17px; height: 17px; }
.learning-section-heading { margin-top: 17px; }
.learning-filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 -2px 12px; padding: 2px 2px 7px; scrollbar-width: thin; }
.learning-filter { flex: 0 0 auto; min-height: 35px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; color: #53627a; background: #fff; font-size: 10px; font-weight: 800; }
.learning-filter.active { border-color: var(--navy); color: #fff; background: var(--navy); }
.learning-resource-list { display: grid; gap: 9px; }
.learning-card { display: grid; gap: 8px; padding: 13px; border: 1px solid #e7ebf2; border-radius: 17px; background: #fff; box-shadow: 0 4px 13px rgba(18,38,75,.035); }
.learning-card[hidden] { display: none !important; }
.learning-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.learning-status { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 8px; border-radius: 99px; font-size: 9px; font-weight: 800; line-height: 1.1; }
.learning-status.free { color: #177755; background: var(--green-soft); }
.learning-status.mixed { color: #755b1e; background: var(--gold-soft); }
.learning-status.paid { color: #755b1e; background: #f4ecd2; }
.learning-save { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; color: #69778d; background: #fff; font-size: 9px; font-weight: 800; }
.learning-save svg { width: 14px; height: 14px; }
.learning-save.saved { color: var(--navy); border-color: #e7d08f; background: #fff8e7; }
.learning-card h3 { margin: 1px 0 0; color: var(--navy); font-size: 14px; line-height: 1.35; }
.learning-card p { margin: 0; color: #6e7a8d; font-size: 11px; line-height: 1.5; }
.learning-open { min-height: 36px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 1px; padding: 0 10px; border-radius: 11px; color: var(--navy); background: #f1f4f9; font-size: 10px; font-weight: 800; text-decoration: none; }
.learning-open svg { width: 15px; height: 15px; color: #88702e; }
.learning-recent { margin: 6px 0 13px; }
.learning-recent .section-heading { margin: 10px 0 7px; }
.learning-recent .section-heading h2 { margin: 0; color: var(--navy); font-size: 14px; }
.learning-recent-list { display: grid; gap: 6px; }
.learning-recent-item { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--navy); background: #fff; font-size: 10px; text-decoration: none; }
.learning-recent-item span { display: grid; place-items: center; color: var(--gold); }
.learning-recent-item span svg, .learning-recent-item > svg { width: 15px; height: 15px; }
.learning-recent-item b { min-width: 0; flex: 1; font-weight: 800; }
.learning-recent-item > svg { color: #8a96a8; }
.learning-disclaimer { margin: 14px 0 5px; padding: 13px; border: 1px solid #e6ebf3; border-radius: 15px; color: #68768b; background: #fff; font-size: 10px; line-height: 1.55; }
.learning-disclaimer b { color: var(--navy); }
.learning-disclaimer p { margin: 5px 0 7px; }
.learning-disclaimer a { display: inline-flex; align-items: center; gap: 4px; color: var(--navy); font-weight: 800; text-decoration: none; }
.learning-disclaimer a svg { width: 13px; height: 13px; }
@media (max-width: 599px) {
  .learning-home-card { margin-bottom: 12px; padding: 10px; border-radius: 15px; }
  .learning-home-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
  .learning-hero { gap: 8px; margin-top: 2px; padding: 15px; border-radius: 18px; }
  .learning-hero h1 { font-size: 21px; }
  .learning-hero p { font-size: 10px; }
  .learning-hero small { font-size: 9px; }
  .learning-library-button { min-height: 38px; border-radius: 12px; font-size: 11px; }
  .learning-filter { min-height: 32px; padding: 0 10px; font-size: 9px; }
  .learning-card { gap: 7px; padding: 11px; border-radius: 15px; }
  .learning-card h3 { font-size: 13px; }
  .learning-card p { font-size: 10px; }
  .learning-save { min-height: 30px; }
  .learning-disclaimer { padding: 11px; font-size: 9px; }
  .nav-item { font-size: 9px; }
}
.learning-practice { width: 100%; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 1px; padding: 0 10px; border: 1px solid #e9d9a8; border-radius: 11px; color: #6f561d; background: #fff8e7; font-size: 10px; font-weight: 800; }
.learning-practice svg { width: 16px; height: 16px; }
.learning-report { margin-left: 10px; }
@media (max-width: 599px) {
  .learning-practice { min-height: 36px; font-size: 10px; }
  .learning-report { display: flex !important; width: fit-content; margin: 7px 0 0; }
}