/* UDYAMAM — a calm, high-focus learning workspace */
:root {
  --ink: #19352f;
  --ink-soft: #52645f;
  --green: #153f35;
  --green-2: #24594a;
  --green-3: #dce9df;
  --paper: #f5f4ee;
  --surface: #ffffff;
  --surface-warm: #faf9f5;
  --line: #e3e5dc;
  --line-dark: #cdd4ca;
  --saffron: #d99343;
  --saffron-dark: #a96025;
  --saffron-soft: #f7ead9;
  --red: #b55245;
  --red-soft: #faece8;
  --blue: #477283;
  --blue-soft: #eaf0f2;
  --shadow: 0 10px 34px rgba(24, 54, 46, .07);
  --shadow-lg: 0 22px 70px rgba(18, 47, 39, .14);
  --radius: 18px;
  --sidebar: 238px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
img { max-width: 100%; display: block; }
::selection { background: #e9c48f; color: #19352f; }
:focus-visible { outline: 3px solid rgba(217,147,67,.4); outline-offset: 3px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cec4; border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.muted { color: var(--ink-soft); }
.small { font-size: 12px; }
.eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 750; color: var(--saffron-dark); }
.mono { font-variant-numeric: tabular-nums; }

/* Shell */
.app-shell { min-height: 100vh; }
.sidebar { width: var(--sidebar); position: fixed; inset: 0 auto 0 0; background: #fbfaf6; border-right: 1px solid var(--line); padding: 27px 18px 20px; z-index: 30; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 26px; }
.brand-mark { width: 39px; height: 43px; position: relative; display: grid; place-items: center; color: var(--green); }
.brand-mark:before { content: ''; position: absolute; width: 31px; height: 36px; border: 1.7px solid currentColor; border-radius: 50% 50% 46% 46%; transform: rotate(-9deg); }
.brand-mark:after { content: ''; position: absolute; width: 22px; height: 27px; border: 1px solid var(--saffron); border-radius: 50%; transform: rotate(16deg); }
.brand-mark i { font-size: 12px; color: var(--saffron); z-index: 1; }
.brand-name { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .16em; line-height: 1; }
.brand-sub { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; margin-top: 7px; color: #75817b; }
.nav-label { padding: 8px 13px 10px; color: #919991; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.main-nav { display: grid; gap: 5px; }
.nav-item { height: 45px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border-radius: 11px; color: #68766f; font-weight: 550; position: relative; transition: .2s ease; text-align: left; }
.nav-item i { width: 18px; text-align: center; font-size: 15px; }
.nav-item:hover { background: #f0f1e9; color: var(--green); }
.nav-item.active { background: var(--green); color: #fff; box-shadow: 0 5px 15px rgba(21,63,53,.15); }
.nav-item.active:after { content: ''; position: absolute; right: 12px; width: 4px; height: 4px; background: #edb56f; border-radius: 50%; }
.nav-count { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 20px; background: var(--red-soft); color: var(--red); font-size: 10px; font-weight: 700; text-align: center; }
.nav-item.active .nav-count { background: rgba(255,255,255,.15); color: white; }
.nav-item.active .nav-count + * { display: none; }
.sidebar-spacer { flex: 1; min-height: 20px; }
.method-card { padding: 16px; background: #eeeee5; border: 1px solid #e1e3d7; border-radius: 14px; margin: 10px 2px 16px; position: relative; overflow: hidden; }
.method-card:after { content: ''; position: absolute; width: 65px; height: 65px; border: 1px solid #d4d8c9; border-radius: 50%; right: -23px; top: -25px; box-shadow: 0 0 0 10px #eeeee5, 0 0 0 11px #d4d8c9; }
.method-card .method-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--saffron-dark); background: #f9f5e9; margin-bottom: 12px; }
.method-card strong { display: block; font-family: 'Manrope', sans-serif; font-size: 12px; margin-bottom: 5px; }
.method-card p { margin: 0 0 10px; font-size: 10px; color: #69766c; line-height: 1.55; }
.text-link { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 700; color: var(--green); padding: 0; }
.text-link:hover { color: var(--saffron-dark); }
.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; border-top: 1px solid var(--line); }
.mini-avatar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #e2e9df; color: var(--green); font-size: 11px; font-weight: 800; }
.sidebar-footer strong { display: block; font-size: 11px; }
.sidebar-footer span { font-size: 9px; color: #879188; }
.sidebar-footer button { margin-left: auto; color: #8c958e; padding: 7px; }
.workspace { margin-left: var(--sidebar); min-height: 100vh; }
.topbar { height: 76px; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(245,244,238,.88); backdrop-filter: blur(15px); position: sticky; top: 0; z-index: 20; }
.topbar-title { font-size: 11px; color: #7d8881; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-title i { color: var(--saffron); font-size: 9px; }
.topbar-title strong { color: var(--ink); font-weight: 650; }
.topbar-actions { display: flex; align-items: center; gap: 11px; }
.search-trigger { height: 38px; min-width: 255px; border: 1px solid var(--line); background: #fbfaf6; border-radius: 10px; color: #859089; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 13px; text-align: left; font-size: 11px; }
.search-trigger span { flex: 1; }
kbd { font-family: inherit; font-size: 9px; padding: 3px 6px; background: #f0f0e9; border: 1px solid #e0e2d9; border-radius: 5px; color: #8a938b; box-shadow: 0 1px 0 white; }
.streak-pill { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #fbf8ef; border: 1px solid #e9e2d4; border-radius: 10px; font-size: 11px; font-weight: 700; color: #7a6447; }
.streak-pill i { color: var(--saffron); }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; background: #fbfaf6; border: 1px solid var(--line); border-radius: 10px; color: #65736b; position: relative; }
.icon-button:hover { border-color: var(--line-dark); background: white; color: var(--green); }
.icon-button .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); position: absolute; right: 7px; top: 7px; border: 1px solid var(--paper); }
.mobile-brand, .mobile-nav { display: none; }
.page { max-width: 1440px; padding: 34px 38px 55px; margin: 0 auto; animation: pageIn .35s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Shared components */
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.page-heading h1 { margin: 6px 0 7px; font-family: 'Manrope', sans-serif; font-size: clamp(26px, 2.4vw, 35px); line-height: 1.2; letter-spacing: -.04em; font-weight: 750; }
.page-heading p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 10px; font-size: 11px; font-weight: 700; transition: .18s ease; white-space: nowrap; }
.btn-primary { background: var(--green); color: white; box-shadow: 0 4px 12px rgba(21,63,53,.12); }
.btn-primary:hover { background: #0e332a; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(21,63,53,.17); }
.btn-secondary { background: white; border: 1px solid var(--line); color: var(--ink); }
.btn-secondary:hover { border-color: #aebbb0; background: #fdfdfb; }
.btn-warm { background: #f3d8ad; color: #233e34; }
.btn-warm:hover { background: #f7e3bf; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--green); padding-left: 7px; padding-right: 7px; }
.btn-danger { background: var(--red); color: white; }
.btn-lg { min-height: 48px; padding: 0 21px; border-radius: 12px; font-size: 12px; }
.btn-sm { min-height: 33px; padding: 0 12px; font-size: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 17px; }
.card-header h2, .card-header h3 { margin: 0; font-family: 'Manrope', sans-serif; font-size: 15px; letter-spacing: -.02em; }
.card-header p { margin: 4px 0 0; font-size: 10px; color: var(--ink-soft); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 6px; font-size: 9px; font-weight: 700; letter-spacing: .025em; white-space: nowrap; }
.pill-green { background: #e5eee7; color: #2d6552; }
.pill-warm { background: var(--saffron-soft); color: #9a612d; }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-blue { background: var(--blue-soft); color: var(--blue); }
.pill-neutral { background: #f0f1ed; color: #6f7c74; }
.progress-track { height: 5px; border-radius: 20px; background: #e8ebe5; overflow: hidden; }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--green-2); transition: width .5s ease; }
.progress-track.warm > span { background: var(--saffron); }
.ring { position: relative; display: grid; place-items: center; flex: 0 0 auto; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring svg circle { fill: none; stroke-width: 7; }
.ring .ring-base { stroke: #e4e9e2; }
.ring .ring-value { stroke: var(--green-2); stroke-linecap: round; stroke-dasharray: var(--dash, 0) 999; transition: stroke-dasharray .6s ease; }
.ring-content { text-align: center; z-index: 1; }
.ring-content strong { display: block; font-family: 'Manrope', sans-serif; font-size: 21px; letter-spacing: -.04em; }
.ring-content span { display: block; font-size: 8px; color: var(--ink-soft); margin-top: 2px; text-transform: uppercase; letter-spacing: .08em; }
.segmented { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #f4f4ef; }
.segmented button { padding: 7px 12px; border-radius: 7px; color: #77827b; font-size: 10px; font-weight: 650; }
.segmented button.active { background: white; color: var(--green); box-shadow: 0 2px 7px rgba(30,50,40,.08); }
.chip { padding: 7px 11px; border: 1px solid var(--line); border-radius: 30px; font-size: 10px; color: var(--ink-soft); background: white; }
.chip.active, .chip:hover { border-color: #9caf9f; color: var(--green); background: #eef3ed; }
.empty-state { padding: 60px 25px; text-align: center; }
.empty-state .empty-icon { width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 20px; background: #edf1e9; color: var(--green-2); font-size: 22px; transform: rotate(-4deg); }
.empty-state h3 { font-family: 'Manrope', sans-serif; margin: 0 0 8px; font-size: 17px; }
.empty-state p { max-width: 390px; margin: 0 auto 20px; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }

/* Dashboard */
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.welcome-row h1 { font-family: 'Manrope', sans-serif; font-weight: 750; font-size: clamp(25px, 2.4vw, 34px); letter-spacing: -.045em; line-height: 1.2; margin: 5px 0 7px; }
.welcome-row h1 em { font-family: 'Newsreader', serif; font-weight: 500; color: var(--green-2); }
.welcome-row p { margin: 0; color: #6c7972; font-size: 12px; }
.date-note { text-align: right; padding-bottom: 3px; }
.date-note span { display: block; font-size: 10px; color: #8b948d; }
.date-note strong { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; }
.hero-card { min-height: 298px; display: grid; grid-template-columns: 1.45fr .75fr; overflow: hidden; background: var(--green); color: white; border-radius: 21px; position: relative; box-shadow: 0 10px 30px rgba(21,63,53,.12); }
.hero-copy { padding: 32px 35px 30px; position: relative; z-index: 2; }
.hero-copy:before { content: ''; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.06); position: absolute; left: -140px; top: -145px; border-radius: 50%; box-shadow: 0 0 0 28px var(--green), 0 0 0 29px rgba(255,255,255,.05), 0 0 0 57px var(--green), 0 0 0 58px rgba(255,255,255,.04); pointer-events: none; }
.hero-kicker { display: flex; align-items: center; gap: 9px; font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: #e6c18c; font-weight: 700; position: relative; }
.hero-kicker span { width: 21px; height: 1px; background: #d6a565; }
.hero-copy h2 { max-width: 530px; margin: 18px 0 11px; font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(29px, 3vw, 42px); letter-spacing: -.025em; line-height: 1.07; position: relative; }
.hero-copy > p { max-width: 485px; color: #c1d0c7; font-size: 11px; line-height: 1.75; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.hero-meta { display: flex; align-items: center; gap: 13px; color: #c2cfc8; font-size: 10px; }
.hero-meta span { display: flex; align-items: center; gap: 5px; }
.hero-meta span + span { border-left: 1px solid rgba(255,255,255,.17); padding-left: 13px; }
.hero-visual { position: relative; min-height: 298px; overflow: hidden; }
.hero-visual:before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--green) 0%, rgba(21,63,53,.25) 25%, rgba(21,63,53,.03) 65%), linear-gradient(0deg, rgba(21,63,53,.45), transparent 45%); z-index: 1; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; filter: sepia(.2) saturate(.65) contrast(.94); }
.hero-visual:after { content: ''; position: absolute; inset: 0; background: var(--green); mix-blend-mode: multiply; opacity: .12; }
.era-stamp { position: absolute; z-index: 3; right: 22px; bottom: 21px; border: 1px solid rgba(255,255,255,.35); background: rgba(21,51,43,.7); backdrop-filter: blur(8px); color: white; border-radius: 12px; padding: 12px 15px; text-align: right; }
.era-stamp span { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .15em; color: #d3dcd6; }
.era-stamp strong { display: block; font-family: 'Newsreader', serif; font-size: 20px; font-weight: 500; margin-top: 4px; }
.hero-seal { position: absolute; top: 25px; right: 22px; width: 62px; height: 62px; z-index: 3; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; display: grid; place-items: center; color: #f0d7ae; }
.hero-seal:before, .hero-seal:after { content: ''; position: absolute; inset: 5px; border: 1px dashed rgba(255,255,255,.28); border-radius: 50%; }
.hero-seal:after { inset: 12px; border-style: solid; }
.hero-seal i { font-size: 17px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0 27px; background: white; border: 1px solid var(--line); border-radius: 15px; }
.stat-item { display: flex; align-items: center; gap: 13px; padding: 17px 22px; position: relative; }
.stat-item + .stat-item:before { content: ''; width: 1px; height: 31px; background: var(--line); position: absolute; left: 0; top: calc(50% - 15px); }
.stat-icon { width: 36px; height: 36px; border-radius: 11px; background: #edf2eb; color: #396553; display: grid; place-items: center; font-size: 13px; }
.stat-item:nth-child(2) .stat-icon { background: #f8eddf; color: #ae7136; }
.stat-item:nth-child(3) .stat-icon { background: #edf1f3; color: #4c7480; }
.stat-item:nth-child(4) .stat-icon { background: #f4eae5; color: #a55e4b; }
.stat-item strong { display: block; font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.1; letter-spacing: -.03em; }
.stat-item strong small { font-size: 11px; color: #879189; font-weight: 500; }
.stat-item span { display: block; font-size: 9px; color: #7f8982; margin-top: 4px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .8fr); gap: 22px; align-items: start; }
.path-card { overflow: hidden; }
.phase-tabs { display: flex; gap: 6px; }
.phase-tab { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; color: #879189; font-size: 10px; }
.phase-tab.active { background: var(--green); color: white; border-color: var(--green); }
.mission-list { padding: 0 22px 12px; }
.mission-row { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 95px 24px; align-items: center; gap: 13px; text-align: left; padding: 15px 2px; border-top: 1px solid #edefe9; }
.mission-row:hover .mission-title { color: var(--saffron-dark); }
.mission-index { width: 35px; height: 39px; border-radius: 10px; background: #f2f3ee; display: grid; place-items: center; color: #7c8981; font-family: 'Newsreader', serif; font-size: 16px; position: relative; }
.mission-row.completed .mission-index { background: #e3eee5; color: var(--green-2); }
.mission-title { display: block; font-size: 11px; font-weight: 650; margin-bottom: 4px; transition: .15s; }
.mission-sub { display: block; font-size: 9px; color: #859088; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mission-progress { display: flex; align-items: center; gap: 8px; }
.mission-progress .progress-track { width: 53px; height: 4px; }
.mission-progress span { font-size: 9px; color: #7d8981; min-width: 27px; }
.mission-arrow { color: #a4ada5; font-size: 10px; text-align: right; }
.path-footer { padding: 13px 24px; background: #fafbf8; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.path-footer span { font-size: 9px; color: #849087; }
.plan-card { padding: 22px; background: #faf8f1; border-color: #e6e2d6; }
.plan-top { display: flex; align-items: center; justify-content: space-between; }
.plan-top h3 { font-family: 'Manrope', sans-serif; font-size: 14px; margin: 0; }
.plan-date { font-size: 9px; color: #9c7c51; background: #f1e6d4; border-radius: 6px; padding: 5px 7px; }
.plan-description { margin: 7px 0 18px; color: #7c8277; font-size: 10px; line-height: 1.5; }
.plan-steps { display: grid; }
.plan-step { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; position: relative; min-height: 55px; align-items: start; }
.plan-step:not(:last-child):before { content: ''; position: absolute; width: 1px; background: #dcded3; left: 12px; top: 27px; bottom: 0; }
.plan-check { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #d5dbd0; background: #fdfcf8; color: #8a978c; font-size: 9px; z-index: 1; }
.plan-step.done .plan-check { background: var(--green-2); border-color: var(--green-2); color: white; }
.plan-step.current .plan-check { border: 2px solid var(--saffron); color: var(--saffron-dark); box-shadow: 0 0 0 3px #f5ead9; }
.plan-step strong { display: block; font-size: 10px; font-weight: 650; margin: 2px 0 3px; }
.plan-step p { margin: 0; color: #859087; font-size: 9px; line-height: 1.4; }
.plan-step > span { color: #9a9e94; font-size: 8px; margin-top: 4px; }
.plan-footer { border-top: 1px solid #e4e3d9; margin-top: 5px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-footer span { font-size: 9px; color: #858c80; }
.insight-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; margin-top: 22px; }
.radar-card { padding: 21px 23px; }
.radar-card h3, .memory-card h3 { margin: 0; font-family: 'Manrope', sans-serif; font-size: 13px; }
.radar-card > p { color: var(--ink-soft); font-size: 10px; margin: 5px 0 16px; }
.radar-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.radar-topic { border: 1px solid var(--line); background: #fbfcf9; border-radius: 9px; padding: 9px 11px; font-size: 10px; display: flex; align-items: center; gap: 7px; }
.radar-topic i { color: var(--saffron); font-size: 8px; }
.radar-topic:hover { background: #f1f4ed; border-color: #bdc9bb; }
.memory-card { padding: 21px 23px; background: #f0ede3; border-color: #e3dfd1; position: relative; overflow: hidden; }
.memory-card:after { content: '“'; font-family: 'Newsreader', serif; position: absolute; right: 17px; top: -17px; font-size: 100px; color: rgba(130,116,79,.08); }
.memory-card .eyebrow { margin-bottom: 10px; }
.memory-pair { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 5px; margin-top: 13px; }
.memory-pair div { padding: 11px; background: rgba(255,255,255,.55); border-radius: 9px; }
.memory-pair strong { display: block; font-size: 10px; }
.memory-pair span { display: block; font-size: 9px; color: #788176; margin-top: 3px; }
.memory-pair > i { color: var(--saffron-dark); font-size: 10px; text-align: center; }

/* Syllabus */
.syllabus-overview { display: grid; grid-template-columns: 1fr 310px; gap: 20px; margin-bottom: 25px; }
.syllabus-note { padding: 22px 25px; background: #eaf0e8; border: 1px solid #d8e2d6; border-radius: 16px; display: flex; align-items: center; gap: 20px; }
.syllabus-note > i { font-size: 25px; color: var(--green-2); }
.syllabus-note h3 { font-family: 'Manrope', sans-serif; font-size: 13px; margin: 0 0 6px; }
.syllabus-note p { color: #617369; font-size: 10px; line-height: 1.65; margin: 0; }
.syllabus-progress { display: flex; align-items: center; gap: 16px; padding: 17px 22px; }
.syllabus-progress strong { font-size: 12px; display: block; }
.syllabus-progress p { margin: 4px 0 0; font-size: 9px; color: var(--ink-soft); }
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }
.filter-search { height: 40px; flex: 1; max-width: 340px; display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 0 13px; color: #89938c; }
.filter-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.filter-search input::placeholder { color: #929b94; }
.filter-spacer { flex: 1; }
.phase-section { margin-bottom: 29px; }
.phase-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.phase-number { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; background: #e9eee6; color: var(--green); font-family: 'Newsreader', serif; font-size: 16px; }
.phase-heading h2 { font-family: 'Manrope', sans-serif; font-size: 14px; margin: 0 0 3px; }
.phase-heading p { font-size: 9px; color: #839087; margin: 0; }
.phase-heading .phase-years { margin-left: auto; font-family: 'Newsreader', serif; font-size: 17px; color: #7b897f; }
.chapter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.chapter-card { min-height: 213px; padding: 19px; background: white; border: 1px solid var(--line); border-radius: 15px; text-align: left; position: relative; overflow: hidden; transition: .2s ease; display: flex; flex-direction: column; }
.chapter-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c2cec1; }
.chapter-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.chapter-icon { width: 34px; height: 34px; border-radius: 10px; background: #edf2e9; color: var(--green-2); display: grid; place-items: center; font-size: 13px; }
.chapter-number { color: #a0aaa2; font-family: 'Newsreader', serif; font-size: 14px; }
.chapter-card h3 { font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.35; letter-spacing: -.015em; margin: 0 0 6px; }
.chapter-card > p { font-size: 9px; color: #7a8880; line-height: 1.5; margin: 0 0 13px; }
.chapter-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.chapter-tags span { font-size: 8px; color: #6f7c72; padding: 4px 6px; border-radius: 5px; background: #f3f4ef; }
.chapter-card-bottom { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.chapter-card-bottom .progress-track { flex: 1; height: 4px; }
.chapter-card-bottom > span { font-size: 8px; color: #8a958d; white-space: nowrap; }
.chapter-card-bottom > i { font-size: 9px; color: #98a29a; }

/* Lesson */
.lesson-page { max-width: 1260px; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; color: #859087; font-size: 10px; margin-bottom: 21px; }
.breadcrumbs button:hover { color: var(--green); }
.breadcrumbs i { font-size: 7px; }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 25px; align-items: start; }
.lesson-main { overflow: hidden; }
.lesson-cover { padding: 31px 34px 28px; background: var(--green); color: white; position: relative; overflow: hidden; }
.lesson-cover:after { content: ''; position: absolute; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; right: -65px; top: -90px; box-shadow: 0 0 0 25px var(--green), 0 0 0 26px rgba(255,255,255,.05), 0 0 0 50px var(--green), 0 0 0 51px rgba(255,255,255,.04); }
.lesson-cover .eyebrow { color: #e6b879; }
.lesson-cover h1 { max-width: 650px; font-family: 'Newsreader', serif; font-size: clamp(30px, 3.5vw, 44px); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; margin: 13px 0 10px; position: relative; z-index: 1; }
.lesson-cover > p { color: #c2d0c7; font-size: 11px; margin: 0 0 21px; }
.lesson-cover-meta { display: flex; flex-wrap: wrap; gap: 16px; color: #d1dad4; font-size: 9px; }
.lesson-cover-meta span { display: flex; align-items: center; gap: 6px; }
.lesson-overview { padding: 25px 34px; border-bottom: 1px solid var(--line); background: #fbfcf9; }
.lesson-overview .eyebrow { margin-bottom: 9px; }
.lesson-overview p { font-family: 'Newsreader', serif; font-size: 18px; line-height: 1.65; color: #3c5148; margin: 0; }
.lesson-body { padding: 7px 34px 30px; }
.lesson-section { padding: 27px 0 24px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.lesson-section:last-child { border-bottom: 0; }
.section-label { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.section-label span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: #eef1e9; color: #587063; font-family: 'Newsreader', serif; font-size: 12px; }
.section-label h2 { font-family: 'Manrope', sans-serif; font-size: 16px; letter-spacing: -.025em; margin: 0; }
.lesson-section > p { color: #52655c; font-size: 12px; line-height: 1.85; margin: 0 0 15px; }
.lesson-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.lesson-bullets li { display: flex; align-items: flex-start; gap: 9px; color: #52655c; font-size: 11px; line-height: 1.65; }
.lesson-bullets li i { color: var(--saffron); font-size: 7px; margin-top: 6px; }
.lesson-block { padding: 27px 34px; border-top: 1px solid var(--line); }
.lesson-block h2 { font-family: 'Manrope', sans-serif; font-size: 16px; margin: 0 0 5px; }
.lesson-block > p { color: var(--ink-soft); font-size: 10px; margin: 0 0 20px; }
.mini-timeline { display: grid; margin-top: 17px; }
.mini-event { display: grid; grid-template-columns: 85px 20px 1fr; gap: 10px; min-height: 66px; }
.mini-event-year { font-family: 'Newsreader', serif; font-size: 15px; color: var(--green-2); padding-top: 1px; text-align: right; }
.mini-event-line { position: relative; }
.mini-event-line:before { content: ''; position: absolute; width: 7px; height: 7px; border: 2px solid var(--saffron); background: white; border-radius: 50%; top: 5px; left: 6px; z-index: 1; }
.mini-event-line:after { content: ''; position: absolute; width: 1px; background: #dde3da; top: 15px; bottom: -5px; left: 10px; }
.mini-event:last-child .mini-event-line:after { display: none; }
.mini-event strong { font-size: 11px; display: block; margin-bottom: 4px; }
.mini-event p { color: #7a8880; font-size: 10px; margin: 0; line-height: 1.5; }
.anchor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.anchor-card { padding: 16px; background: #f5f3eb; border: 1px solid #e9e5d9; border-radius: 11px; }
.anchor-card strong { display: block; font-family: 'Newsreader', serif; font-size: 19px; color: var(--green-2); line-height: 1.2; margin-bottom: 7px; }
.anchor-card span { display: block; font-size: 9px; font-weight: 700; margin-bottom: 4px; }
.anchor-card p { margin: 0; color: #7b867b; font-size: 9px; line-height: 1.5; }
.trap-list { display: grid; gap: 11px; }
.trap-item { border: 1px solid #eaded4; border-radius: 12px; overflow: hidden; }
.trap-head { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 14px 16px; background: #fcf8f3; }
.trap-head > i { color: var(--red); font-size: 11px; }
.trap-head span { flex: 1; font-size: 10px; line-height: 1.5; color: #705f54; }
.trap-head > i:last-child { color: #9b958e; font-size: 8px; }
.trap-answer { padding: 15px 16px; background: white; border-top: 1px solid #f0e7de; }
.trap-answer strong { display: block; color: var(--green-2); font-size: 10px; line-height: 1.6; margin-bottom: 7px; }
.trap-answer p { display: flex; gap: 7px; margin: 0; color: #7c766e; font-size: 9px; line-height: 1.6; }
.exam-lens-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.exam-lens-item { padding: 13px; background: #edf2ec; border-radius: 9px; font-size: 9px; line-height: 1.5; color: #4e6659; }
.exam-lens-item i { display: block; color: var(--saffron-dark); margin-bottom: 7px; }
.lesson-actions { padding: 22px 34px; background: #f8f9f5; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); }
.lesson-actions p { margin: 0; font-size: 10px; color: #7b8880; }
.lesson-actions strong { display: block; color: var(--ink); font-size: 11px; margin-bottom: 3px; }
.lesson-actions > div:last-child { display: flex; gap: 8px; }
.lesson-aside { position: sticky; top: 98px; display: grid; gap: 15px; }
.lesson-nav { padding: 19px; }
.lesson-nav h3 { font-family: 'Manrope', sans-serif; font-size: 11px; margin: 0 0 14px; }
.lesson-nav button { width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; color: #78867c; font-size: 9px; padding: 8px 0; line-height: 1.4; }
.lesson-nav button span { width: 14px; height: 14px; border: 1px solid #d8dfd6; border-radius: 50%; flex: 0 0 auto; }
.lesson-nav button:hover { color: var(--green); }
.lesson-nav .nav-divider { height: 1px; background: var(--line); margin: 8px 0; }
.mission-meter { padding: 19px; text-align: center; }
.mission-meter .ring { margin: 0 auto 12px; }
.mission-meter h3 { font-size: 11px; margin: 0 0 5px; }
.mission-meter p { font-size: 9px; color: #829087; line-height: 1.5; margin: 0 0 13px; }
.next-lesson { width: 100%; text-align: left; padding: 17px; display: flex; align-items: center; gap: 12px; }
.next-lesson > i:first-child { color: var(--saffron-dark); }
.next-lesson div { flex: 1; }
.next-lesson span { font-size: 8px; color: #89938b; text-transform: uppercase; letter-spacing: .1em; }
.next-lesson strong { display: block; font-size: 10px; margin-top: 4px; line-height: 1.4; }
.next-lesson > i:last-child { font-size: 9px; color: #8d9990; }

/* Practice setup */
.practice-hero { display: grid; grid-template-columns: 1fr 300px; gap: 22px; margin-bottom: 22px; }
.practice-setup { padding: 27px; }
.practice-setup h2 { font-family: 'Manrope', sans-serif; font-size: 17px; margin: 0 0 6px; }
.practice-setup > p { color: var(--ink-soft); font-size: 10px; margin: 0 0 23px; }
.setup-section { padding: 18px 0; border-top: 1px solid var(--line); }
.setup-section > label, .setup-label { display: block; font-size: 10px; font-weight: 700; margin-bottom: 11px; }
.mode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mode-option { min-height: 84px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 11px; position: relative; }
.mode-option i { display: block; color: #75897c; margin-bottom: 8px; font-size: 13px; }
.mode-option strong { display: block; font-size: 10px; margin-bottom: 3px; }
.mode-option span { display: block; color: #89938b; font-size: 8px; line-height: 1.4; }
.mode-option.active { border-color: var(--green-2); background: #eff4ee; box-shadow: inset 0 0 0 1px var(--green-2); }
.mode-option.active i { color: var(--green-2); }
.mode-option.active:after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 9px; right: 9px; color: var(--green-2); font-size: 8px; }
.setup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; height: 42px; border: 1px solid var(--line); background: #fbfcf9; color: var(--ink); border-radius: 9px; padding: 0 35px 0 12px; outline: 0; appearance: none; font-size: 10px; }
.select-wrap > i { position: absolute; right: 13px; top: 15px; font-size: 9px; color: #7d8980; pointer-events: none; }
.count-options { display: flex; gap: 7px; }
.count-options button { height: 42px; flex: 1; border: 1px solid var(--line); border-radius: 9px; font-size: 10px; color: #728078; }
.count-options button.active { border-color: var(--green-2); background: #eef3ec; color: var(--green); font-weight: 700; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.switch-row strong { display: block; font-size: 10px; margin-bottom: 3px; }
.switch-row span { display: block; font-size: 9px; color: #859087; }
.switch { width: 37px; height: 21px; border-radius: 20px; background: #d8ded6; padding: 3px; transition: .2s; }
.switch:before { content: ''; display: block; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.14); transition: .2s; }
.switch.on { background: var(--green-2); }
.switch.on:before { transform: translateX(16px); }
.setup-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 20px; }
.setup-bottom p { margin: 0; font-size: 9px; color: #839087; line-height: 1.5; }
.setup-bottom strong { color: var(--ink); }
.bank-card { padding: 25px; background: var(--green); color: white; position: relative; overflow: hidden; }
.bank-card:after { content: ''; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; right: -90px; bottom: -80px; box-shadow: 0 0 0 20px var(--green), 0 0 0 21px rgba(255,255,255,.06), 0 0 0 40px var(--green), 0 0 0 41px rgba(255,255,255,.04); }
.bank-card .eyebrow { color: #dcb374; }
.bank-card h3 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 26px; margin: 9px 0 4px; }
.bank-card > p { color: #bbcdc2; font-size: 9px; line-height: 1.6; margin: 0 0 20px; }
.bank-stat { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.11); font-size: 9px; color: #c5d2ca; position: relative; z-index: 1; }
.bank-stat strong { color: white; font-size: 12px; }
.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.format-card { padding: 20px; }
.format-card > i { color: var(--saffron-dark); font-size: 16px; }
.format-card h3 { font-family: 'Manrope', sans-serif; font-size: 12px; margin: 11px 0 6px; }
.format-card p { color: var(--ink-soft); font-size: 9px; line-height: 1.6; margin: 0 0 10px; }
.format-card span { font-size: 8px; font-weight: 700; color: var(--green-2); }
.source-disclaimer { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 14px 17px; border: 1px solid #e5e2d8; border-radius: 11px; background: #faf9f4; color: #7b8177; font-size: 9px; line-height: 1.65; }
.source-disclaimer i { color: var(--saffron-dark); margin-top: 2px; }

/* Focus practice */
.focus-shell { min-height: 100vh; background: #f4f4ee; }
.focus-topbar { height: 68px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 20px; padding: 0 32px; position: sticky; top: 0; z-index: 30; }
.focus-brand { display: flex; align-items: center; gap: 9px; font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: .12em; font-weight: 800; }
.focus-brand i { color: var(--saffron); }
.focus-divider { width: 1px; height: 25px; background: var(--line); }
.focus-title { min-width: 0; }
.focus-title strong { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-title span { display: block; font-size: 8px; color: #879289; margin-top: 3px; }
.focus-progress { flex: 1; max-width: 330px; margin-left: auto; }
.focus-progress-label { display: flex; justify-content: space-between; font-size: 8px; color: #7d8981; margin-bottom: 6px; }
.focus-timer { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; background: #f5f5f0; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.focus-timer.warning { background: var(--red-soft); color: var(--red); }
.focus-page { max-width: 1180px; margin: 0 auto; padding: 30px 30px 50px; }
.question-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: start; }
.question-card { padding: 29px 31px; }
.question-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 19px; }
.question-meta .bookmark-btn { margin-left: auto; color: #8b968e; padding: 5px; }
.question-meta .bookmark-btn.saved { color: var(--saffron-dark); }
.question-number { font-family: 'Newsreader', serif; color: #839087; font-size: 14px; margin-right: 3px; }
.question-prompt { font-family: 'Manrope', sans-serif; font-size: clamp(17px, 2vw, 21px); font-weight: 650; line-height: 1.48; letter-spacing: -.025em; margin: 0 0 9px; }
.question-instruction { color: #879189; font-size: 9px; margin: 0 0 23px; }
.option-list { display: grid; gap: 10px; }
.answer-option { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 15px 16px; border: 1px solid #dfe4dc; border-radius: 12px; background: #fdfefb; text-align: left; transition: .17s; position: relative; }
.answer-option:hover:not(:disabled) { border-color: #9caea0; background: #f8faf5; }
.option-letter { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #d9e0d7; border-radius: 8px; color: #6f7f74; font-size: 10px; font-weight: 700; background: white; }
.option-text { font-size: 11px; line-height: 1.65; color: #45594f; padding-top: 3px; }
.answer-option.selected { border-color: var(--green-2); box-shadow: inset 0 0 0 1px var(--green-2); background: #f0f5ee; }
.answer-option.selected .option-letter { background: var(--green); border-color: var(--green); color: white; }
.answer-option.eliminated { opacity: .45; background: #f4f4f1; }
.answer-option.eliminated .option-text { text-decoration: line-through; }
.answer-option.correct { border-color: #639176; background: #edf6ee; box-shadow: inset 0 0 0 1px #639176; }
.answer-option.correct .option-letter { background: #397255; color: white; border-color: #397255; }
.answer-option.incorrect { border-color: #c57869; background: #fcf0ed; box-shadow: inset 0 0 0 1px #c57869; }
.answer-option.incorrect .option-letter { background: var(--red); color: white; border-color: var(--red); }
.option-status { width: 24px; height: 28px; display: grid; place-items: center; color: #98a29a; font-size: 11px; }
.eliminate-btn { width: 27px; height: 27px; display: grid; place-items: center; color: #a0aaa2; border-radius: 7px; font-size: 10px; }
.eliminate-btn:hover { background: #ecefe9; color: var(--red); }
.option-reason { grid-column: 2 / 4; margin-top: 1px; padding-top: 10px; border-top: 1px solid rgba(100,130,110,.16); color: #5e7065; font-size: 9px; line-height: 1.65; animation: pageIn .2s ease; }
.option-reason strong { color: var(--ink); }
.question-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.keyboard-hint { color: #909a92; font-size: 8px; display: flex; align-items: center; gap: 5px; }
.keyboard-hint kbd { font-size: 8px; padding: 2px 4px; }
.decision-panel { display: grid; gap: 15px; position: sticky; top: 92px; }
.decision-card { padding: 20px; }
.decision-card h3 { font-family: 'Manrope', sans-serif; font-size: 11px; margin: 0 0 5px; }
.decision-card > p { font-size: 9px; color: #839087; line-height: 1.55; margin: 0 0 16px; }
.decision-steps { display: grid; gap: 14px; }
.decision-step { display: flex; align-items: flex-start; gap: 10px; }
.decision-step > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #edf1e9; color: #537061; font-family: 'Newsreader', serif; font-size: 11px; flex: 0 0 auto; }
.decision-step strong { display: block; font-size: 9px; margin: 1px 0 3px; }
.decision-step p { font-size: 8px; line-height: 1.5; color: #849087; margin: 0; }
.session-map { padding: 18px 20px; }
.session-map h3 { margin: 0 0 13px; font-size: 10px; }
.question-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.question-dot { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; font-size: 8px; color: #879189; }
.question-dot.current { border-color: var(--green); color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.question-dot.done { background: #e8efe7; color: var(--green-2); border-color: #d9e5d8; }
.question-dot.wrong { background: var(--red-soft); color: var(--red); border-color: #efd7d1; }
.answer-intelligence { margin-top: 20px; border-radius: 15px; overflow: hidden; border: 1px solid #dbe4d9; background: white; animation: pageIn .3s ease; }
.intelligence-head { padding: 17px 21px; background: #eaf3e9; display: flex; align-items: center; gap: 11px; }
.intelligence-head.wrong { background: #faece7; }
.intelligence-head > i { font-size: 19px; color: #3c7857; }
.intelligence-head.wrong > i { color: var(--red); }
.intelligence-head strong { display: block; font-family: 'Manrope', sans-serif; font-size: 13px; }
.intelligence-head span { display: block; font-size: 9px; color: #708076; margin-top: 3px; }
.intelligence-body { padding: 22px; }
.answer-explanation { color: #455c50; font-size: 11px; line-height: 1.8; margin: 0 0 19px; }
.intelligence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intelligence-note { padding: 15px; background: #f6f6f0; border-radius: 10px; }
.intelligence-note.trap-note { background: #fcf3e9; }
.intelligence-note .eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.intelligence-note p { margin: 0; color: #637068; font-size: 9px; line-height: 1.65; }
.memory-hook { display: flex; gap: 10px; margin-top: 12px; padding: 13px 15px; background: #eaf0eb; border-radius: 10px; }
.memory-hook i { color: var(--green-2); margin-top: 2px; }
.memory-hook strong { display: block; font-size: 9px; margin-bottom: 3px; }
.memory-hook p { margin: 0; color: #61746a; font-size: 9px; line-height: 1.6; }
.confidence-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 19px; padding-top: 18px; border-top: 1px solid var(--line); }
.confidence-row > div > strong { display: block; font-size: 10px; }
.confidence-row > div > span { display: block; font-size: 8px; color: #879189; margin-top: 3px; }
.confidence-options { display: flex; gap: 5px; }
.confidence-options button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 8px; color: #718078; }
.confidence-options button:hover, .confidence-options button.active { background: var(--green); border-color: var(--green); color: white; }

/* Results */
.results-page { max-width: 860px; margin: 0 auto; padding: 48px 30px; }
.results-hero { text-align: center; padding: 35px 30px 28px; position: relative; overflow: hidden; }
.results-badge { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 18px; background: #e9f0e6; color: var(--green-2); font-size: 23px; transform: rotate(-4deg); }
.results-hero h1 { font-family: 'Newsreader', serif; font-size: 35px; font-weight: 500; margin: 0 0 7px; }
.results-hero > p { font-size: 11px; color: #7d8980; margin: 0; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; margin: 27px auto 0; }
.result-stat + .result-stat { border-left: 1px solid var(--line); }
.result-stat strong { display: block; font-family: 'Manrope', sans-serif; font-size: 23px; letter-spacing: -.04em; }
.result-stat span { display: block; font-size: 8px; color: #869188; margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }
.results-body { margin-top: 20px; padding: 23px; }
.results-body h2 { font-family: 'Manrope', sans-serif; font-size: 14px; margin: 0 0 16px; }
.result-review { display: grid; gap: 8px; }
.result-review-row { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: #f8f9f5; border-radius: 10px; }
.result-review-row > i { color: var(--red); }
.result-review-row.correct > i { color: var(--green-2); }
.result-review-row div { flex: 1; min-width: 0; }
.result-review-row strong { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-review-row span { display: block; font-size: 8px; color: #829087; margin-top: 3px; }
.result-review-row > span { font-size: 9px; font-weight: 700; }
.results-actions { display: flex; justify-content: center; gap: 9px; margin-top: 23px; }

/* Timeline */
.timeline-banner { background: var(--green); color: white; border-radius: 18px; padding: 25px 29px; margin-bottom: 22px; display: flex; align-items: center; gap: 25px; overflow: hidden; position: relative; }
.timeline-banner:after { content: '1948—2014'; position: absolute; right: 22px; top: 3px; font-family: 'Newsreader', serif; font-size: 70px; color: rgba(255,255,255,.035); }
.timeline-banner > i { font-size: 27px; color: #e6b674; }
.timeline-banner h2 { font-family: 'Newsreader', serif; font-size: 25px; font-weight: 500; margin: 0 0 5px; }
.timeline-banner p { font-size: 10px; color: #bfd0c5; margin: 0; line-height: 1.6; }
.timeline-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 23px; }
.timeline-controls .filter-search { max-width: none; }
.timeline-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 23px; align-items: start; }
.timeline-stream { position: relative; padding-left: 90px; }
.timeline-stream:before { content: ''; position: absolute; top: 12px; bottom: 20px; left: 76px; width: 1px; background: #d4dcd2; }
.timeline-year-group { position: relative; margin-bottom: 14px; }
.timeline-year { position: absolute; left: -90px; top: 16px; width: 64px; text-align: right; font-family: 'Newsreader', serif; font-size: 15px; color: #6b7b70; }
.timeline-event { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 17px 19px; background: white; border: 1px solid var(--line); border-radius: 13px; position: relative; }
.timeline-event:before { content: ''; position: absolute; left: -19px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 2px solid var(--saffron); }
.timeline-event:hover { border-color: #acbcae; box-shadow: var(--shadow); }
.timeline-event > div { flex: 1; }
.timeline-event strong { display: block; font-size: 11px; margin-bottom: 4px; }
.timeline-event p { margin: 0; color: #7e8a82; font-size: 9px; line-height: 1.5; }
.timeline-event > span { font-size: 8px; color: #8b968e; }
.timeline-event > i { color: #9aa49c; font-size: 9px; }
.timeline-aside { position: sticky; top: 98px; display: grid; gap: 15px; }
.timeline-key { padding: 20px; }
.timeline-key h3 { font-family: 'Manrope', sans-serif; font-size: 11px; margin: 0 0 14px; }
.key-phase { display: flex; gap: 10px; margin-top: 13px; }
.key-phase > span { width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); margin-top: 4px; }
.key-phase:nth-child(3) > span { background: #a4654f; }
.key-phase:nth-child(4) > span { background: var(--green-2); }
.key-phase strong { display: block; font-size: 9px; }
.key-phase p { margin: 3px 0 0; color: #829087; font-size: 8px; line-height: 1.5; }
.timeline-tip { padding: 20px; background: #f5ecdd; border-color: #e8ddca; }
.timeline-tip i { color: var(--saffron-dark); }
.timeline-tip strong { display: block; font-size: 10px; margin: 10px 0 5px; }
.timeline-tip p { color: #7b756a; font-size: 9px; line-height: 1.6; margin: 0; }

/* Revision */
.revision-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 23px; }
.revision-stat { padding: 20px; display: flex; align-items: center; gap: 14px; }
.revision-stat > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #edf2e9; color: var(--green-2); }
.revision-stat:nth-child(2) > i { background: #f8ecdc; color: var(--saffron-dark); }
.revision-stat:nth-child(3) > i { background: var(--red-soft); color: var(--red); }
.revision-stat strong { display: block; font-family: 'Manrope', sans-serif; font-size: 21px; }
.revision-stat span { display: block; font-size: 9px; color: #829087; margin-top: 3px; }
.revision-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.revision-tabs button { padding: 12px 17px; color: #7f8a83; font-size: 10px; font-weight: 650; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.revision-tabs button.active { color: var(--green); border-color: var(--green); }
.revision-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 23px; align-items: start; }
.flashcard-stage { padding: 25px; }
.flashcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.flashcard-top span { color: #829087; font-size: 9px; }
.flashcard { min-height: 325px; perspective: 1000px; cursor: pointer; position: relative; }
.flashcard-inner { min-height: 325px; position: relative; transition: transform .5s; transform-style: preserve-3d; }
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flash-face { position: absolute; inset: 0; padding: 35px; border-radius: 16px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.flash-front { background: var(--green); color: white; }
.flash-front:before, .flash-back:before { content: ''; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; pointer-events: none; }
.flash-front .eyebrow { color: #e1b77d; margin-bottom: 17px; }
.flash-front h2 { max-width: 500px; font-family: 'Newsreader', serif; font-size: 29px; line-height: 1.25; font-weight: 500; margin: 0 0 24px; }
.flash-front > span { color: #b6c7bc; font-size: 9px; display: flex; align-items: center; gap: 7px; }
.flash-back { background: #f0eee3; border: 1px solid #e3dfd0; transform: rotateY(180deg); }
.flash-back:before { border-color: #ddd8c7; }
.flash-back .eyebrow { margin-bottom: 15px; }
.flash-back h2 { font-family: 'Newsreader', serif; font-size: 29px; font-weight: 500; color: var(--green-2); margin: 0 0 12px; }
.flash-back p { max-width: 470px; font-size: 11px; line-height: 1.7; color: #667369; margin: 0; }
.flash-actions { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 19px; }
.revision-aside { display: grid; gap: 15px; }
.recall-guide { padding: 21px; }
.recall-guide h3 { font-family: 'Manrope', sans-serif; font-size: 11px; margin: 0 0 13px; }
.recall-guide ol { padding-left: 17px; margin: 0; color: #718077; font-size: 9px; line-height: 1.8; }
.recall-guide li { padding-left: 3px; margin-bottom: 6px; }
.review-note { padding: 20px; background: #edf2eb; }
.review-note i { color: var(--green-2); }
.review-note strong { display: block; font-size: 10px; margin: 9px 0 5px; }
.review-note p { font-size: 9px; color: #708076; line-height: 1.6; margin: 0; }
.saved-list { display: grid; gap: 11px; }
.saved-question { padding: 19px 21px; }
.saved-question-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.saved-question-top button { margin-left: auto; color: var(--saffron-dark); }
.saved-question h3 { font-size: 12px; line-height: 1.55; margin: 0 0 12px; }
.saved-question-bottom { display: flex; align-items: center; justify-content: space-between; }
.saved-question-bottom span { color: #839087; font-size: 9px; }
.mistake-row { padding: 18px 20px; display: flex; align-items: center; gap: 13px; }
.mistake-row > i { color: var(--red); }
.mistake-row > div { flex: 1; }
.mistake-row strong { display: block; font-size: 11px; line-height: 1.5; }
.mistake-row span { display: block; color: #849087; font-size: 8px; margin-top: 4px; }

/* Insights */
.insights-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; margin-bottom: 20px; }
.readiness-card { padding: 25px; display: flex; align-items: center; gap: 24px; }
.readiness-card h2 { font-family: 'Manrope', sans-serif; font-size: 14px; margin: 0 0 6px; }
.readiness-card p { font-size: 9px; color: #7f8b83; line-height: 1.6; margin: 0 0 13px; }
.readiness-legend { display: grid; gap: 7px; }
.readiness-legend span { font-size: 8px; color: #718078; display: flex; align-items: center; gap: 6px; }
.readiness-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); }
.readiness-legend span:nth-child(2) i { background: var(--saffron); }
.readiness-legend span:nth-child(3) i { background: #d9dfd6; }
.activity-card { padding: 23px; }
.activity-card h2 { font-family: 'Manrope', sans-serif; font-size: 13px; margin: 0 0 4px; }
.activity-card > p { margin: 0; font-size: 9px; color: #839087; }
.activity-chart { height: 120px; display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; }
.activity-day { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.activity-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.activity-bar { width: 16px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: #cfddcf; position: relative; }
.activity-day.today .activity-bar { background: var(--green-2); }
.activity-day span { font-size: 8px; color: #8a958d; }
.performance-card { padding: 23px; margin-bottom: 20px; }
.performance-card h2 { font-family: 'Manrope', sans-serif; font-size: 14px; margin: 0 0 5px; }
.performance-card > p { font-size: 9px; color: #839087; margin: 0 0 21px; }
.phase-performance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.phase-performance-row strong { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 8px; }
.phase-performance-row strong span { color: var(--green-2); }
.phase-performance-row p { font-size: 8px; color: #849087; margin: 6px 0 0; }
.mastery-table { overflow: hidden; }
.mastery-table .card-header { border-bottom: 1px solid var(--line); }
.mastery-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 110px 110px 100px 30px; align-items: center; gap: 14px; padding: 14px 23px; border-bottom: 1px solid #edf0e9; }
.mastery-row:last-child { border-bottom: 0; }
.mastery-row > strong { font-size: 10px; font-weight: 600; }
.mastery-row > span { font-size: 9px; color: #7e8b82; }
.mastery-row .progress-track { height: 4px; }
.mastery-row > button { color: #8d9890; }

/* Modal, search, toast */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(12,34,28,.48); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 25px; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { width: min(600px, 100%); max-height: min(820px, calc(100vh - 50px)); overflow-y: auto; background: #fbfcf8; border: 1px solid rgba(255,255,255,.5); border-radius: 20px; box-shadow: var(--shadow-lg); animation: modalIn .25s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-lg { width: min(740px, 100%); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 19px; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-family: 'Manrope', sans-serif; font-size: 18px; letter-spacing: -.025em; margin: 5px 0 5px; }
.modal-header p { color: #7c8980; font-size: 10px; margin: 0; line-height: 1.5; }
.modal-close { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: #7d8980; flex: 0 0 auto; }
.modal-body { padding: 23px 26px 26px; }
.modal-footer { padding: 17px 26px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.strategy-intro { padding: 17px; border-radius: 11px; background: var(--green); color: white; margin-bottom: 20px; }
.strategy-intro strong { display: block; font-family: 'Newsreader', serif; font-weight: 500; font-size: 21px; margin-bottom: 6px; }
.strategy-intro p { margin: 0; color: #bfd0c5; font-size: 9px; line-height: 1.65; }
.pace-selector { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.pace-selector strong { font-size: 10px; }
.pace-selector span { display: block; font-size: 8px; color: #859087; margin-top: 3px; }
.strategy-days { display: grid; gap: 9px; }
.strategy-day { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; background: white; }
.strategy-day-num { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #eef2ea; font-family: 'Newsreader', serif; font-size: 14px; }
.strategy-day strong { display: block; font-size: 10px; margin-bottom: 3px; }
.strategy-day p { margin: 0; color: #7f8b83; font-size: 8px; line-height: 1.5; }
.strategy-day > span { font-size: 8px; color: #8a958d; }
.recall-loop { display: flex; align-items: center; justify-content: space-between; gap: 3px; margin: 17px 0 20px; }
.loop-step { text-align: center; flex: 1; position: relative; }
.loop-step:not(:last-child):after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: -4px; top: 14px; font-size: 7px; color: #b0b9b1; }
.loop-step > span { width: 30px; height: 30px; display: grid; place-items: center; margin: 0 auto 7px; border-radius: 9px; background: #edf2e9; color: var(--green-2); font-family: 'Newsreader', serif; font-size: 13px; }
.loop-step strong { display: block; font-size: 8px; }
.loop-step p { font-size: 7px; color: #8a958d; margin: 3px 0 0; }
.search-modal { align-self: flex-start; margin-top: 6vh; width: min(670px, 100%); }
.search-input-large { display: flex; align-items: center; gap: 12px; padding: 18px 21px; border-bottom: 1px solid var(--line); }
.search-input-large > i { color: #728078; }
.search-input-large input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ink); }
.search-input-large kbd { font-size: 8px; }
.search-results { max-height: 57vh; overflow-y: auto; padding: 10px; }
.search-empty { padding: 35px 20px; text-align: center; color: #849087; }
.search-empty i { display: block; font-size: 22px; margin-bottom: 12px; color: #a0aaa2; }
.search-empty strong { display: block; color: var(--ink); font-size: 11px; margin-bottom: 5px; }
.search-empty p { font-size: 9px; margin: 0; }
.search-result-label { padding: 9px 10px 6px; font-size: 8px; color: #939c95; text-transform: uppercase; letter-spacing: .12em; }
.search-result { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; text-align: left; }
.search-result:hover { background: #edf2e9; }
.search-result > i { width: 30px; height: 30px; display: grid; place-items: center; background: #f0f2ec; border-radius: 8px; color: #61786a; font-size: 11px; }
.search-result div { flex: 1; min-width: 0; }
.search-result strong { display: block; font-size: 10px; margin-bottom: 3px; }
.search-result span { display: block; color: #849087; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result > span { color: #9aa49c; font-size: 8px; }
.search-footer { display: flex; align-items: center; gap: 15px; padding: 11px 20px; border-top: 1px solid var(--line); color: #8c968e; font-size: 8px; }
.toast-container { position: fixed; z-index: 150; right: 24px; bottom: 24px; display: grid; gap: 9px; pointer-events: none; }
.toast { min-width: 260px; max-width: 360px; display: flex; align-items: center; gap: 11px; padding: 14px 17px; border-radius: 12px; background: #173f35; color: white; box-shadow: 0 12px 35px rgba(15,40,33,.25); animation: toastIn .3s ease; font-size: 10px; line-height: 1.5; }
.toast i { color: #e7b571; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.loading-screen { min-height: 100vh; display: grid; place-items: center; background: var(--paper); }
.loading-brand { text-align: center; }
.loading-brand .brand-mark { margin: 0 auto 17px; animation: breathe 1.5s infinite; }
.loading-brand strong { display: block; font-family: 'Manrope', sans-serif; letter-spacing: .18em; font-size: 17px; }
.loading-brand span { display: block; color: #839087; font-size: 10px; margin-top: 8px; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .65; } }
.error-screen { max-width: 500px; margin: 15vh auto; text-align: center; padding: 30px; }
.error-screen h1 { font-family: 'Newsreader', serif; font-size: 30px; }
.error-screen p { color: var(--ink-soft); line-height: 1.7; }

/* Responsive */
@media (min-width: 1500px) {
  :root { --sidebar: 250px; }
  .page { padding-left: 44px; padding-right: 44px; }
  .hero-card { min-height: 320px; }
  .hero-visual { min-height: 320px; }
  .chapter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
  :root { --sidebar: 210px; }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .page, .topbar { padding-left: 25px; padding-right: 25px; }
  .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-card { grid-template-columns: 1.4fr .6fr; }
  .hero-copy { padding-left: 27px; }
  .stat-item { padding: 15px; gap: 9px; }
  .stat-icon { width: 31px; height: 31px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.4fr) 250px; gap: 16px; }
  .mission-row { grid-template-columns: 35px minmax(0, 1fr) 24px; }
  .mission-progress { display: none; }
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .format-grid { grid-template-columns: repeat(2, 1fr); }
  .question-layout { grid-template-columns: minmax(0, 1fr) 235px; }
  .focus-page { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 900px) {
  :root { --sidebar: 76px; }
  .sidebar { padding: 23px 10px; align-items: center; }
  .brand { padding: 0 0 28px; }
  .brand > div:last-child, .nav-label, .nav-item > span, .method-card, .sidebar-footer > div:not(.mini-avatar), .sidebar-footer button { display: none; }
  .main-nav { width: 100%; }
  .nav-item { width: 48px; height: 46px; justify-content: center; padding: 0; margin: 0 auto; }
  .nav-item i { font-size: 16px; }
  .nav-item.active:after { display: none; }
  .nav-count { position: absolute; right: 1px; top: 1px; min-width: 15px; padding: 1px 4px; font-size: 7px; }
  .sidebar-footer { padding: 13px 0 0; }
  .mini-avatar { width: 34px; height: 34px; }
  .search-trigger { min-width: 200px; }
  .hero-card { grid-template-columns: 1fr 190px; }
  .hero-copy h2 { font-size: 31px; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(3):before { display: none; }
  .stat-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .mission-row { grid-template-columns: 35px minmax(0, 1fr) 85px 24px; }
  .mission-progress { display: flex; }
  .plan-steps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .plan-step { grid-template-columns: 26px 1fr; }
  .plan-step > span { display: none; }
  .plan-step:not(:last-child):before { display: none; }
  .plan-footer { margin-top: 14px; }
  .insight-row { grid-template-columns: 1fr; }
  .syllabus-overview { grid-template-columns: 1fr; }
  .syllabus-progress { display: none; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-aside { display: none; }
  .practice-hero { grid-template-columns: 1fr; }
  .bank-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .bank-card .eyebrow, .bank-card h3, .bank-card > p { grid-column: 1 / 4; }
  .bank-stat { display: block; border: 0; padding: 7px; }
  .bank-stat strong { display: block; margin-bottom: 3px; }
  .question-layout { grid-template-columns: 1fr; }
  .decision-panel { display: none; }
  .timeline-layout { grid-template-columns: 1fr; }
  .timeline-aside { display: none; }
  .revision-layout { grid-template-columns: 1fr; }
  .revision-aside { display: none; }
  .insights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  body { font-size: 13px; }
  .sidebar, .topbar { display: none; }
  .workspace { margin-left: 0; padding-bottom: 69px; }
  .mobile-brand { height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: #fbfaf6; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 25; }
  .mobile-brand .brand { padding: 0; }
  .mobile-brand .brand-mark { width: 31px; height: 34px; }
  .mobile-brand .brand-name { font-size: 14px; }
  .mobile-brand .brand-sub { font-size: 7px; margin-top: 5px; }
  .mobile-brand > div:last-child { display: flex; gap: 7px; }
  .mobile-brand .icon-button { width: 34px; height: 34px; }
  .mobile-nav { position: fixed; display: grid; grid-template-columns: repeat(5, 1fr); left: 0; right: 0; bottom: 0; height: 67px; background: rgba(251,250,246,.97); backdrop-filter: blur(15px); border-top: 1px solid var(--line); z-index: 40; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); }
  .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #7f8a83; font-size: 8px; }
  .mobile-nav button i { font-size: 15px; }
  .mobile-nav button.active { color: var(--green); }
  .mobile-nav button.active i { transform: translateY(-1px); }
  .page { padding: 23px 16px 35px; }
  .welcome-row { align-items: flex-start; margin-bottom: 19px; }
  .welcome-row h1 { font-size: 27px; }
  .welcome-row p { font-size: 10px; }
  .date-note { display: none; }
  .hero-card { min-height: 415px; grid-template-columns: 1fr; grid-template-rows: auto 115px; border-radius: 17px; }
  .hero-copy { padding: 25px 23px 20px; }
  .hero-copy h2 { font-size: 32px; margin-top: 15px; }
  .hero-copy > p { -webkit-line-clamp: 3; font-size: 10px; }
  .hero-actions { gap: 12px; margin-top: 20px; flex-wrap: wrap; }
  .hero-meta { font-size: 8px; }
  .hero-visual { min-height: 115px; }
  .hero-visual img { object-position: center 40%; }
  .hero-visual:before { background: linear-gradient(180deg, var(--green), transparent 40%), linear-gradient(0deg, rgba(21,63,53,.4), transparent); }
  .hero-seal { width: 45px; height: 45px; top: 12px; right: 15px; }
  .era-stamp { padding: 8px 11px; bottom: 12px; right: 14px; }
  .era-stamp strong { font-size: 15px; }
  .stat-strip { margin: 15px 0 20px; }
  .stat-item { padding: 13px; }
  .stat-item strong { font-size: 16px; }
  .stat-item span { font-size: 8px; }
  .stat-icon { width: 29px; height: 29px; }
  .dashboard-grid { gap: 16px; }
  .card-header { padding: 18px 17px 14px; }
  .mission-list { padding: 0 15px 8px; }
  .mission-row { grid-template-columns: 33px minmax(0, 1fr) 18px; gap: 10px; padding: 13px 0; }
  .mission-progress { display: none; }
  .mission-index { width: 31px; height: 35px; }
  .mission-title { font-size: 10px; }
  .mission-sub { font-size: 8px; }
  .path-footer { padding: 12px 17px; }
  .plan-card { padding: 19px; }
  .plan-steps { grid-template-columns: 1fr; }
  .plan-step { grid-template-columns: 26px 1fr auto; }
  .plan-step > span { display: block; }
  .plan-step:not(:last-child):before { display: block; }
  .insight-row { gap: 16px; }
  .page-heading { align-items: flex-start; margin-bottom: 20px; }
  .page-heading h1 { font-size: 28px; }
  .page-heading p { font-size: 10px; }
  .heading-actions .btn-secondary { display: none; }
  .heading-actions .btn { padding: 0 12px; }
  .syllabus-note { padding: 18px; gap: 13px; }
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .filter-search { max-width: none; flex-basis: 100%; }
  .filter-spacer { display: none; }
  .chapter-grid { grid-template-columns: 1fr; gap: 11px; }
  .chapter-card { min-height: 192px; }
  .phase-heading .phase-years { font-size: 13px; }
  .lesson-page { padding-left: 0; padding-right: 0; padding-top: 16px; }
  .lesson-page .breadcrumbs { padding: 0 17px; }
  .lesson-main { border-left: 0; border-right: 0; border-radius: 0; }
  .lesson-cover { padding: 26px 22px; }
  .lesson-cover h1 { font-size: 34px; }
  .lesson-overview { padding: 21px 22px; }
  .lesson-overview p { font-size: 17px; }
  .lesson-body, .lesson-block { padding-left: 22px; padding-right: 22px; }
  .section-label h2 { font-size: 15px; }
  .lesson-section > p { font-size: 11px; }
  .anchor-grid { grid-template-columns: 1fr; }
  .anchor-card { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .anchor-card strong { grid-row: 1 / 3; }
  .exam-lens-list { grid-template-columns: 1fr; }
  .mini-event { grid-template-columns: 69px 18px 1fr; gap: 7px; }
  .lesson-actions { padding: 19px 22px; align-items: flex-start; }
  .lesson-actions > div:first-child { display: none; }
  .lesson-actions > div:last-child { width: 100%; }
  .lesson-actions .btn { flex: 1; }
  .practice-setup { padding: 21px 18px; }
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .setup-row { grid-template-columns: 1fr; }
  .setup-bottom { align-items: flex-start; flex-direction: column; }
  .setup-bottom .btn { width: 100%; }
  .bank-card { padding: 21px; }
  .format-grid { grid-template-columns: 1fr; }
  .focus-topbar { height: 59px; padding: 0 14px; gap: 10px; }
  .focus-brand span, .focus-divider, .focus-title span { display: none; }
  .focus-title strong { max-width: 100px; }
  .focus-progress { max-width: none; }
  .focus-progress-label span:first-child { display: none; }
  .focus-timer { padding: 7px 8px; font-size: 9px; }
  .focus-topbar > .icon-button { width: 32px; height: 32px; }
  .focus-page { padding: 15px 11px 35px; }
  .question-card { padding: 21px 16px; border-radius: 14px; }
  .question-prompt { font-size: 17px; }
  .answer-option { grid-template-columns: 29px minmax(0, 1fr) auto; padding: 13px 11px; gap: 9px; }
  .option-text { font-size: 10px; }
  .question-actions { margin-top: 18px; }
  .keyboard-hint { display: none; }
  .question-actions .btn { width: 100%; }
  .intelligence-body { padding: 16px; }
  .intelligence-grid { grid-template-columns: 1fr; }
  .confidence-row { align-items: flex-start; flex-direction: column; }
  .confidence-options { width: 100%; }
  .confidence-options button { flex: 1; }
  .results-page { padding: 25px 13px; }
  .results-hero { padding: 28px 15px; }
  .results-hero h1 { font-size: 30px; }
  .result-stats { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .result-stat:nth-child(3) { border-left: 0; }
  .results-actions { flex-direction: column; }
  .results-actions .btn { width: 100%; }
  .timeline-banner { padding: 21px; }
  .timeline-banner h2 { font-size: 22px; }
  .timeline-controls { flex-wrap: wrap; }
  .timeline-controls .filter-search { flex-basis: 100%; }
  .timeline-stream { padding-left: 19px; }
  .timeline-stream:before { left: 5px; }
  .timeline-year { position: static; display: block; width: auto; text-align: left; margin: 17px 0 8px 8px; }
  .timeline-event:before { left: -18px; }
  .timeline-event { padding: 14px; }
  .timeline-event > span { display: none; }
  .revision-summary { gap: 8px; }
  .revision-stat { padding: 14px 10px; display: block; text-align: center; }
  .revision-stat > i { width: 31px; height: 31px; margin: 0 auto 8px; }
  .revision-stat strong { font-size: 18px; }
  .revision-stat span { font-size: 7px; }
  .revision-tabs { overflow-x: auto; }
  .revision-tabs button { white-space: nowrap; padding: 11px 12px; }
  .flashcard-stage { padding: 13px; }
  .flash-face { padding: 27px; }
  .flash-front h2, .flash-back h2 { font-size: 25px; }
  .readiness-card { padding: 20px; gap: 15px; }
  .readiness-card .ring { width: 100px !important; height: 100px !important; }
  .phase-performance { grid-template-columns: 1fr; gap: 17px; }
  .mastery-row { grid-template-columns: minmax(0, 1fr) 70px 22px; padding: 13px 16px; }
  .mastery-row > span:nth-child(3), .mastery-row > span:nth-child(4) { display: none; }
  .modal-backdrop { padding: 12px; align-items: flex-end; }
  .modal { max-height: calc(100vh - 24px); border-radius: 18px; }
  .search-modal { align-self: flex-start; margin-top: 25px; }
  .modal-header { padding: 20px; }
  .modal-body { padding: 19px 20px 22px; }
  .strategy-day { grid-template-columns: 32px 1fr; }
  .strategy-day > span { display: none; }
  .recall-loop { gap: 0; }
  .loop-step p { display: none; }
  .toast-container { left: 14px; right: 14px; bottom: 80px; }
  .toast { min-width: 0; max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}