:root {
  color-scheme: light;
  --bg: #dce9e9;
  --bg-2: #f3eee9;
  --paper: rgba(255, 255, 255, .72);
  --paper-solid: #f9fbfa;
  --ink: #1f2928;
  --muted: #73807d;
  --line: rgba(39, 61, 57, .12);
  --accent: #246b5d;
  --accent-2: #64a99a;
  --accent-soft: #d9eee8;
  --danger: #aa5b56;
  --danger-soft: #f5e4e1;
  --shadow: 0 18px 55px rgba(41, 66, 64, .11);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

:root[data-theme="paper"] { --bg:#f1eee7; --bg-2:#e7dfd3; --paper:rgba(255,253,248,.78); --paper-solid:#fffdf8; --accent:#8a6545; --accent-2:#bd9471; --accent-soft:#eee1d2; }
:root[data-theme="sage"] { --bg:#dfe9df; --bg-2:#edf0df; --paper:rgba(251,253,247,.76); --paper-solid:#fbfdf8; --accent:#526f4c; --accent-2:#8aa17c; --accent-soft:#e0ead9; }
:root[data-theme="lilac"] { --bg:#e9e3f0; --bg-2:#f0e7e8; --paper:rgba(255,253,255,.74); --paper-solid:#fdfbff; --accent:#695d84; --accent-2:#9a8bb8; --accent-soft:#e9e1f3; }
:root[data-theme="night"] { color-scheme:dark; --bg:#1f292d; --bg-2:#32383e; --paper:rgba(43,54,59,.82); --paper-solid:#2a3439; --ink:#eef4f1; --muted:#a9b6b2; --line:rgba(232,244,240,.12); --accent:#77c8b1; --accent-2:#4d9784; --accent-soft:#314f49; --danger:#efaaa2; --danger-soft:#583f40; --shadow:0 18px 55px rgba(0,0,0,.25); }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #cfd8d7; line-height: 1.6; }
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

.app-shell { position: relative; width: min(100%, 540px); min-height: 100dvh; margin: 0 auto; overflow: hidden; background: linear-gradient(155deg, var(--bg) 0%, var(--bg) 55%, var(--bg-2) 100%); box-shadow: var(--shadow); }
.loading, .fatal { min-height: 100dvh; display: grid; place-items: center; padding: 32px; color: var(--muted); }

button { border: 0; }
.round-icon, .brand-mark, .avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--paper); box-shadow:0 7px 22px rgba(35,55,52,.08); }
.round-icon.placeholder { visibility:hidden; }
.primary { width:100%; min-height:54px; padding:14px 20px; border-radius:18px; color:white; background:var(--accent); font-weight:750; letter-spacing:.02em; box-shadow:0 10px 25px color-mix(in srgb, var(--accent) 20%, transparent); }
.primary:disabled { opacity:.48; box-shadow:none; }
.secondary { width:100%; min-height:54px; padding:14px 20px; border:1px solid var(--line); border-radius:18px; color:var(--accent); background:var(--paper); font-weight:750; }
.text-button { padding:12px; color:var(--muted); background:transparent; }

.home-screen { min-height:calc(100dvh - 76px); padding:max(24px, env(safe-area-inset-top)) 24px 30px; display:flex; flex-direction:column; }
.home-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand-mark { color:white; background:var(--accent); font-weight:800; }
.subject-pill { max-width:70%; display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:999px; background:var(--paper); backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(35,55,52,.07); }
.subject-pill span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subject-pill b { color:var(--muted); }
.home-focus { flex:1; min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px; }
.checkin-tile { width:min(164px,70vw); min-height:132px; padding:18px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1px solid rgba(255,255,255,.4); border-radius:30px; background:var(--paper); backdrop-filter:blur(14px); box-shadow:0 18px 45px rgba(49,79,76,.10); }
.checkin-tile.checked { color:var(--accent); }
.calendar-glyph { width:30px; height:30px; margin-bottom:8px; display:grid; place-items:center; }
.calendar-glyph svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.checkin-tile strong { font-size:18px; line-height:1.35; white-space:nowrap; }
.checkin-tile small { color:var(--muted); }
.quiet-message { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:13px; }
.quiet-message span { width:26px; height:1px; background:var(--line); }
.study-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.study-action { min-width:0; min-height:108px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; border-radius:24px; background:var(--paper); border:1px solid rgba(255,255,255,.36); backdrop-filter:blur(14px); box-shadow:0 12px 34px rgba(43,68,65,.08); }
.study-action span { min-width:0; display:flex; flex-direction:column; }
.study-action strong { font-size:18px; }
.study-action small { margin-top:4px; color:var(--muted); white-space:nowrap; }
.study-action b { color:var(--accent); font-size:28px; line-height:1; }
.study-action:disabled { opacity:.5; }
.bottom-nav { position:fixed; z-index:8; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,540px); height:76px; padding:7px 22px max(7px, env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); background:transparent; border-top:0; }
.nav-item { display:grid; place-items:center; color:var(--muted); background:transparent; }
.nav-icon { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.nav-item.active { color:var(--accent); }
.prototype-switcher { position:fixed; z-index:20; left:50%; bottom:88px; transform:translateX(-50%); display:flex; gap:4px; padding:4px; border-radius:999px; background:#1e2726; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.prototype-switcher button { width:32px; height:28px; border-radius:999px; color:#c5cfcc; background:transparent; font-size:12px; }
.prototype-switcher button.active { color:#1e2726; background:white; }

.home-b { gap:24px; }
.home-b .home-head small { color:var(--muted); }
.home-b h1 { margin:3px 0 0; font-size:28px; }
.paper-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding:20px 8px; border-radius:26px; background:var(--paper); box-shadow:var(--shadow); }
.paper-summary div { display:flex; flex-direction:column; align-items:center; border-right:1px solid var(--line); }
.paper-summary div:last-child { border:0; }
.paper-summary span { color:var(--muted); font-size:12px; }
.paper-summary strong { font-size:24px; }
.home-b>.checkin-tile { width:100%; min-height:92px; flex-direction:row; gap:12px; border-radius:24px; }
.home-b>.checkin-tile .calendar-glyph { margin:0; }
.calendar-link { width:100%; min-height:66px; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; text-align:left; border-radius:20px; background:var(--paper); }
.calendar-link>span { display:flex; flex-direction:column; }
.calendar-link small { color:var(--muted); }
.home-c { gap:24px; }
.focus-ring { width:230px; aspect-ratio:1; margin:auto; padding:14px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--accent) var(--progress), rgba(255,255,255,.28) 0); box-shadow:0 18px 55px rgba(43,68,65,.12); }
.focus-ring>div { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(145deg,var(--paper-solid),var(--bg)); }
.focus-ring small,.focus-ring span { color:var(--muted); }
.focus-ring strong { font-size:48px; line-height:1.2; }
.compact-checkin { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compact-checkin .checkin-tile,.compact-checkin>button { width:100%; min-height:86px; padding:12px; border-radius:22px; background:var(--paper); }
.compact-checkin .checkin-tile { flex-direction:row; gap:8px; }
.compact-checkin .calendar-glyph { margin:0; }
.compact-checkin>button { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.compact-checkin>button strong { font-size:22px; }
.compact-checkin>button small { color:var(--muted); }

.page-top { height:72px; padding:max(14px,env(safe-area-inset-top)) 20px 10px; display:grid; grid-template-columns:42px 1fr 42px; align-items:center; text-align:center; }
.page-top strong { font-size:17px; }
.utility-screen { min-height:100dvh; padding-bottom:35px; }
.settings-hero,.settings-section,.metric-grid,.chart-section,.calendar-screen>.primary { margin-left:20px; margin-right:20px; }
.account-card { margin:16px 20px 4px; padding:16px; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.4); border-radius:24px; background:var(--paper); box-shadow:0 12px 32px rgba(43,68,65,.07); }
.account-avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:white; background:linear-gradient(145deg,var(--accent),var(--accent-2)); font-weight:800; }
.account-copy { min-width:0; display:flex; flex-direction:column; }
.account-copy small,.account-copy span { color:var(--muted); font-size:11px; }
.account-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.account-card>button { padding:8px 10px; border-radius:999px; color:var(--accent); background:var(--accent-soft); font-size:11px; font-weight:750; }
.settings-hero { margin-top:16px; }
.settings-hero>span,.settings-section h2 { display:block; margin:0 0 10px 4px; color:var(--muted); font-size:13px; font-weight:600; }
.settings-hero>button { width:100%; padding:20px; display:grid; grid-template-columns:1fr auto; align-items:center; text-align:left; border-radius:24px; background:var(--paper); box-shadow:0 12px 32px rgba(43,68,65,.07); }
.settings-hero strong,.settings-hero small { display:block; }
.settings-hero strong { font-size:20px; }
.settings-hero small { margin-top:3px; color:var(--muted); }
.settings-section { margin-top:26px; }
.setting-card { padding:6px 18px; border-radius:24px; background:var(--paper); box-shadow:0 12px 32px rgba(43,68,65,.06); }
.setting-card label,.rule-row,.setting-link { width:100%; min-height:74px; display:flex; align-items:center; gap:8px; background:transparent; }
.setting-card label>span,.rule-row>span,.setting-link>span { flex:1; display:flex; flex-direction:column; text-align:left; }
.setting-card strong { font-size:15px; }
.setting-card small { color:var(--muted); font-size:12px; }
.setting-card input { width:58px; padding:8px 6px; text-align:right; border:0; border-bottom:1px solid var(--line); outline:none; background:transparent; font-weight:700; }
.setting-card input[type="number"] { appearance:textfield; -moz-appearance:textfield; }
.setting-card input[type="number"]::-webkit-inner-spin-button,.setting-card input[type="number"]::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
.setting-card em { color:var(--muted); font-style:normal; }
.divided>*+* { border-top:1px solid var(--line); }
.rule-row>b { color:var(--accent); font-size:13px; }
.finish-date { margin:2px 0 12px; padding:16px; display:grid; gap:3px; border-radius:18px; background:var(--accent-soft); }
.finish-date span,.finish-date small { color:var(--muted); font-size:12px; }
.finish-date.free { background:color-mix(in srgb,var(--paper-solid) 68%,transparent); }
.setting-card label.range-setting { min-height:0; padding:17px 0 12px; display:block; }
.range-setting.disabled { opacity:.48; }
.range-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.range-heading>span { color:var(--accent); font-size:13px; font-weight:800; }
.range-heading output { font:inherit; }
.setting-card .range-setting input[type="range"] { width:100%; height:28px; margin:10px 0 0; padding:0; border:0; accent-color:var(--accent); cursor:pointer; }
.setting-card .range-setting input[type="range"]:disabled { cursor:default; }
.range-scale { margin-top:-4px; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.free-plan-choice { width:100%; min-height:58px; padding:0 2px; display:flex; align-items:center; gap:11px; border-top:1px solid var(--line); background:transparent; text-align:left; }
.free-plan-choice i { width:20px; height:20px; display:grid; place-items:center; border:1.5px solid var(--muted); border-radius:50%; color:white; font-size:11px; font-style:normal; }
.free-plan-choice.active { color:var(--accent); }
.free-plan-choice.active i { border-color:var(--accent); background:var(--accent); }
.theme-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.theme-choice { padding:9px 4px; display:flex; flex-direction:column; align-items:center; gap:7px; border:1px solid transparent; border-radius:18px; background:var(--paper); font-size:11px; }
.theme-choice.active { border-color:var(--accent); }
.theme-choice i { width:34px; height:34px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); }
.theme-mist { background:linear-gradient(145deg,#cfe3e5,#eee8e2); }.theme-paper { background:linear-gradient(145deg,#f3eee4,#ded1c0); }.theme-sage { background:linear-gradient(145deg,#d8e6d6,#eef0df); }.theme-lilac { background:linear-gradient(145deg,#e4dcf0,#efe3e4); }.theme-night { background:linear-gradient(145deg,#233036,#4b555a); }

.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.metric-grid article { min-height:118px; padding:18px; display:flex; flex-direction:column; justify-content:center; border-radius:24px; background:var(--paper); }
.metric-grid span,.metric-grid small { color:var(--muted); font-size:12px; }
.metric-grid strong { margin-top:3px; font-size:24px; }
.chart-section { margin-top:24px; padding:20px 16px 18px; border-radius:26px; background:var(--paper); }
.section-title { display:flex; justify-content:space-between; align-items:flex-end; }
.section-title small { color:var(--muted); }.section-title h2 { margin:2px 0 0; font-size:18px; }
.legend { color:var(--muted); font-size:11px; }.legend i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--accent); }.legend.duration i { background:var(--accent-2); }
.chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.chart-toolbar h2 { margin:0; font-size:18px; }
.range-tabs { padding:3px; display:flex; gap:2px; border-radius:999px; background:color-mix(in srgb,var(--muted) 10%,transparent); }
.range-tabs button { min-width:52px; padding:7px 10px; border-radius:999px; color:var(--muted); background:transparent; font-size:11px; }
.range-tabs button.active { color:var(--text); background:var(--paper-solid); box-shadow:0 2px 8px rgba(43,68,65,.08); }
.activity-legend { margin-top:15px; display:flex; justify-content:flex-end; gap:16px; color:var(--muted); font-size:11px; }
.activity-legend i { width:8px; height:8px; margin-right:5px; display:inline-block; border-radius:50%; }
.activity-legend .learn i { background:#f0a05f; }
.activity-legend .review i { background:#a96ddd; }
.bar-chart { position:relative; height:216px; margin-top:18px; padding-bottom:28px; display:grid; grid-template-columns:repeat(var(--bar-count,7),1fr); gap:8px; align-items:end; }
.bar-chart::after { content:""; position:absolute; z-index:0; left:0; right:0; bottom:28px; height:1px; background:var(--line); }
.bar-column { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.bar-column span { min-height:20px; color:var(--muted); font-size:10px; }
.bar-column i { width:min(24px,55%); min-height:2px; border-radius:8px 8px 2px 2px; background:linear-gradient(var(--accent-2),var(--accent)); }
.duration-bars .bar-column i { background:linear-gradient(color-mix(in srgb,var(--accent-2) 65%,white),var(--accent-2)); }
.bar-column small { position:absolute; top:calc(100% + 7px); margin:0; color:var(--muted); font-size:9px; white-space:nowrap; }
.activity-bars { margin-top:10px; }
.activity-bars .activity-stack { width:min(25px,64%); min-height:2px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border-radius:8px 8px 2px 2px; background:color-mix(in srgb,var(--muted) 10%,transparent); }
.activity-bars .activity-stack i { width:100%; min-height:0; flex:0 0 auto; border-radius:0; }
.activity-bars .activity-stack .learn-segment { background:#f0a05f; }
.activity-bars .activity-stack .review-segment { background:#a96ddd; }
.activity-bars .activity-stack.empty { height:2px!important; }
.month-bars { gap:3px; }
.month-bars .bar-column>span { font-size:8px; }
.month-bars .bar-column small { font-size:8px; }
.month-bars .activity-stack,.month-bars .bar-column>i { width:70%; }
.line-chart { width:100%; margin-top:16px; padding:0 0 8px; overflow:hidden; }
.line-chart svg { width:100%; height:auto; min-height:170px; display:block; overflow:visible; }
.line-chart polyline { fill:none; stroke:var(--accent-2); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.line-chart circle { fill:var(--paper-solid); stroke:var(--accent-2); stroke-width:3; }
.line-chart text { fill:var(--muted); font-family:inherit; text-anchor:middle; }
.line-chart .line-value { font-size:11px; }
.line-chart .line-date { font-size:10px; }
.line-chart .line-baseline { stroke:var(--line); stroke-width:1; }
.utility-screen>.calendar-link { width:calc(100% - 40px); margin:24px 20px 0; }

.calendar-screen { padding-bottom:35px; }
.streak-card { margin:18px 20px; padding:26px; border-radius:28px; color:white; background:linear-gradient(145deg,var(--accent),var(--accent-2)); box-shadow:0 18px 45px color-mix(in srgb,var(--accent) 22%,transparent); }
.streak-card small { opacity:.8; }.streak-card strong { display:block; margin:5px 0; font-size:44px; }.streak-card em { margin-left:5px; font-size:16px; font-style:normal; }.streak-card p { margin:4px 0 0; opacity:.78; font-size:13px; }
.month-card { margin:20px; padding:20px 14px 24px; border-radius:28px; background:var(--paper); }
.month-card header { padding:0 8px 18px; display:flex; justify-content:space-between; }.month-card header span { color:var(--muted); font-size:12px; }
.weekdays,.month-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.weekdays span { padding:5px; color:var(--muted); text-align:center; font-size:11px; }
.calendar-day,.month-grid>span { aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:transparent; position:relative; }
.calendar-day.today { box-shadow:inset 0 0 0 1px var(--accent); }
.calendar-day.checked { color:white; background:var(--accent); }
.calendar-day i { position:absolute; right:1px; bottom:0; width:14px; height:14px; display:grid; place-items:center; border-radius:50%; color:var(--accent); background:var(--paper-solid); font-size:9px; font-style:normal; }

.study-screen { min-height:100dvh; padding-bottom:125px; background:linear-gradient(155deg,var(--bg),var(--bg-2)); }
.study-meta { padding:10px 24px 0; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
.term-heading { padding:28px 24px 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.term-heading small { color:var(--muted); }
.term-heading h1 { margin:0; font-size:32px; line-height:1.25; }
.term-heading h1 em { display:block; margin-top:5px; color:var(--muted); font-size:14px; font-style:normal; font-weight:500; }
.mastery-dots { display:flex; flex-direction:column; align-items:center; gap:7px; padding:8px 4px; }
.mastery-dots i { width:9px; height:9px; border-radius:50%; background:color-mix(in srgb,var(--muted) 30%,transparent); }
.mastery-dots i.lit { background:#32a66c; box-shadow:0 0 0 4px rgba(50,166,108,.1); }
.study-notice,.result-banner { margin:0 24px 16px; padding:13px 16px; border-radius:16px; color:var(--muted); background:var(--paper); font-size:12px; }
.segments { padding:0 20px; display:grid; gap:12px; }
.segment { padding:18px; border:1px solid rgba(255,255,255,.35); border-radius:22px; background:var(--paper); box-shadow:0 8px 26px rgba(43,68,65,.05); }
.segment.review-target { border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
.segment.wrong { border-color:color-mix(in srgb,var(--danger) 45%,transparent); background:var(--danger-soft); }
.segment-label { margin-bottom:10px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.1em; }
.segment-text { line-height:2; }
.cloze-input { max-width:100%; height:35px; margin:2px 3px; padding:3px 8px; border:0; border-bottom:2px solid var(--accent); border-radius:8px 8px 2px 2px; outline:none; background:color-mix(in srgb,var(--paper-solid) 72%,transparent); }
.cloze-textarea { width:100%; height:auto; min-height:76px; margin:8px 0 2px; padding:10px 12px; line-height:1.6; resize:vertical; border:1px solid var(--line); border-bottom:2px solid var(--accent); border-radius:12px; }
.answer-key { padding:0 2px; color:var(--accent); border-bottom:2px solid color-mix(in srgb,var(--accent) 45%,transparent); font-weight:700; }
.answer-key.hidden-key { color:transparent; cursor:pointer; }
.unannotated-text { color:var(--muted); }
.sticky-actions { position:fixed; z-index:6; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,540px); padding:14px 20px max(12px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:8px; background:linear-gradient(transparent,color-mix(in srgb,var(--paper-solid) 94%,transparent) 24%); backdrop-filter:blur(10px); }
.sticky-actions .primary { flex:1; }.sticky-actions .text-button { flex:0 0 auto; }
.result-banner { display:flex; flex-direction:column; }.result-banner.correct { color:var(--accent); background:var(--accent-soft); }.result-banner.wrong { color:var(--danger); background:var(--danger-soft); }.result-banner span { margin-top:3px; font-size:11px; }

.content-screen { padding-bottom:100px; }
.content-subject,.content-tools,.term-directory { margin-left:20px; margin-right:20px; }
.content-subject>button { width:100%; padding:17px 18px; display:flex; align-items:center; justify-content:space-between; text-align:left; border-radius:22px; background:var(--paper); box-shadow:0 10px 28px rgba(43,68,65,.06); }
.content-subject span { display:flex; flex-direction:column; }.content-subject small { color:var(--muted); }.content-subject strong { font-size:18px; }.content-subject b { color:var(--accent); font-size:12px; }
.content-tools { position:sticky; z-index:4; top:0; margin-top:16px; padding:8px 0 10px; background:linear-gradient(var(--bg) 78%,transparent); }
.content-search { min-height:48px; padding:0 15px; display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.4); border-radius:17px; background:var(--paper); }
.content-search span { color:var(--muted); font-size:22px; }.content-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; }
.content-filters { margin-top:10px; padding-bottom:3px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.content-filters::-webkit-scrollbar { display:none; }
.content-filters button { flex:0 0 auto; min-width:74px; padding:8px 12px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:color-mix(in srgb,var(--paper) 72%,transparent); }
.content-filters button.active { color:white; border-color:var(--accent); background:var(--accent); }
.content-filters small { font-size:10px; opacity:.78; }
.term-directory { margin-top:10px; }
.term-directory>header { padding:0 4px 10px; display:flex; align-items:center; justify-content:space-between; }.term-directory>header span { color:var(--muted); font-size:12px; }
.term-list { overflow:hidden; border-radius:24px; background:var(--paper); box-shadow:0 12px 34px rgba(43,68,65,.06); }
.term-row { width:100%; min-height:72px; padding:13px 16px; display:grid; grid-template-columns:minmax(0,1fr) auto 14px; align-items:center; gap:10px; text-align:left; background:transparent; }
.term-row+.term-row { border-top:1px solid var(--line); }
.term-copy,.term-state { min-width:0; display:flex; flex-direction:column; }.term-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.term-copy small,.term-state small { color:var(--muted); font-size:11px; }.term-state { align-items:flex-end; }.term-row>b { color:var(--muted); }
.status-badge { width:max-content; padding:3px 8px; border-radius:999px; color:var(--muted); background:color-mix(in srgb,var(--muted) 12%,transparent); font-size:10px; font-style:normal; font-weight:700; white-space:nowrap; }
.status-badge.active { color:var(--accent); background:var(--accent-soft); }.status-badge.done { color:#347e58; background:#dcefe2; }.status-badge.mastered { color:#766142; background:#eee5cf; }.status-badge.muted { opacity:.65; }
.content-empty { padding:54px 24px; text-align:center; }.content-empty p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.content-actions { position:fixed; z-index:7; left:50%; bottom:0; transform:translateX(-50%); width:min(calc(100% - 28px),512px); padding:8px 8px max(8px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:1.5fr 1fr; gap:8px; border:1px solid rgba(255,255,255,.45); border-radius:22px 22px 0 0; background:color-mix(in srgb,var(--paper-solid) 90%,transparent); box-shadow:0 14px 38px rgba(31,48,46,.14); backdrop-filter:blur(18px); }
.content-action { min-height:54px; padding:8px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:16px; }
.content-action span { font-weight:750; }.content-action small { margin-top:1px; font-size:10px; opacity:.72; }.content-action.primary { min-height:54px; }.pdf-placeholder { color:var(--muted); background:var(--paper); opacity:.72; }

.detail-screen { padding-bottom:120px; }
.immersive-top { position:sticky; z-index:5; top:0; min-height:72px; padding:max(12px,env(safe-area-inset-top)) 18px 10px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:linear-gradient(color-mix(in srgb,var(--bg) 96%,transparent) 72%,transparent); backdrop-filter:blur(10px); }
.immersive-top>div { display:flex; align-items:center; gap:10px; }.immersive-top>div strong { color:var(--muted); font-size:12px; }.immersive-top>span { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; }.immersive-top>.round-icon { justify-self:end; box-shadow:none; }.familiar-toggle { color:var(--muted); font-size:22px; }.familiar-toggle.active { color:#c59134; }.familiar-toggle:disabled { visibility:hidden; }
.detail-heading { padding-bottom:12px; }.detail-heading>.status-badge { margin-top:7px; }
.detail-title-row { display:flex; align-items:flex-start; gap:9px; }
.detail-title-row h1 { min-width:0; }
.eye-toggle { flex:0 0 auto; width:34px; height:34px; margin-top:4px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--accent); background:var(--paper); cursor:pointer; }
.eye-toggle svg { width:20px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.eye-toggle.closed { color:var(--muted); }
.eye-toggle .eye-slash { stroke-width:2; }
.detail-segments { padding-bottom:6px; }
.source-missing { margin:0 20px; padding:22px; border-radius:22px; background:var(--paper); }.source-missing p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.browse-controls { position:fixed; z-index:8; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,540px); padding:10px 14px max(12px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr; gap:10px; background:linear-gradient(transparent,color-mix(in srgb,var(--paper-solid) 96%,transparent) 22%); backdrop-filter:blur(12px); }
.browse-controls button { min-width:0; min-height:62px; padding:9px 14px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:0 8px 24px rgba(43,68,65,.06); }
.browse-controls button:first-child { align-items:flex-start; text-align:left; }.browse-controls button:last-child { align-items:flex-end; text-align:right; }.browse-controls small { color:var(--muted); font-size:10px; }.browse-controls strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.browse-controls button:disabled { opacity:.38; }

.backdrop { position:fixed; z-index:30; inset:0; display:flex; align-items:flex-end; justify-content:center; background:rgba(12,20,19,.34); backdrop-filter:blur(4px); }
.auth-gate { align-items:center; padding:max(22px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom)); background:var(--bg); backdrop-filter:none; }
.auth-gate .sheet { width:min(100%,460px); max-height:calc(100dvh - 44px); border-radius:30px; box-shadow:0 24px 70px rgba(43,68,65,.12); }
.sheet { width:min(100%,540px); max-height:86dvh; padding:22px 20px max(24px,env(safe-area-inset-bottom)); overflow:auto; border-radius:30px 30px 0 0; background:var(--paper-solid); box-shadow:0 -20px 70px rgba(0,0,0,.16); }
.sheet-head { display:flex; align-items:center; justify-content:space-between; }.sheet-head small { color:var(--muted); }.sheet-head h2 { margin:2px 0 0; }.sheet-head button { width:38px; height:38px; border-radius:50%; background:var(--paper); font-size:22px; }
.subject-list { margin-top:18px; display:grid; gap:10px; }
.subject-option { width:100%; padding:17px; display:flex; align-items:center; justify-content:space-between; text-align:left; border:1px solid transparent; border-radius:20px; background:var(--paper); }
.subject-option.current { border-color:var(--accent); }.subject-option span { display:flex; flex-direction:column; }.subject-option small { color:var(--muted); }.subject-option b { color:var(--accent); font-size:12px; }.subject-option:disabled { opacity:.5; }
.sheet-note { margin:16px 4px 0; color:var(--muted); font-size:11px; }
.account-sheet { display:grid; gap:18px; }
.account-notice { padding:20px; border-radius:20px; background:var(--accent-soft); }
.account-notice p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.auth-tabs { padding:4px; display:grid; grid-template-columns:1fr 1fr; gap:4px; border-radius:999px; background:color-mix(in srgb,var(--muted) 10%,transparent); }
.auth-tabs button { padding:9px; border-radius:999px; color:var(--muted); background:transparent; }
.auth-tabs button.active { color:var(--ink); background:var(--paper-solid); box-shadow:0 4px 12px rgba(43,68,65,.08); font-weight:750; }
.auth-field { display:grid; gap:6px; }
.auth-field span { color:var(--muted); font-size:12px; }
.auth-field input { width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--line); border-radius:15px; outline:none; background:var(--paper); }
.auth-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
.phone-target { padding:14px 16px; display:flex; flex-direction:column; border-radius:16px; background:var(--paper); }
.phone-target small { color:var(--muted); font-size:11px; }
.phone-target strong { margin-top:2px; font-size:18px; letter-spacing:.04em; }
.auth-secondary-actions { display:flex; align-items:center; justify-content:space-between; }
.auth-secondary-actions.single { justify-content:flex-start; }
.auth-secondary-actions .text-button { font-size:12px; }
.auth-hint,.auth-message { margin:0; font-size:12px; }
.auth-hint { color:var(--muted); }
.auth-message { color:var(--danger); }
.account-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.account-summary span { padding:15px; display:flex; flex-direction:column; border-radius:18px; background:var(--paper); }
.account-summary small { color:var(--muted); font-size:11px; }
.order-list h3 { margin:0 0 10px; font-size:14px; }
.order-list>div { padding:12px 2px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); }
.order-list span { display:flex; flex-direction:column; }
.order-list small,.order-list p { color:var(--muted); font-size:11px; }
.order-list b { color:var(--accent); font-size:11px; }
.redeem-panel { padding:14px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--accent-soft) 35%,var(--paper)); }
.redeem-panel h3,.redeem-panel p { margin:0; }
.redeem-panel p,.redeem-panel>small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.redeem-panel>div { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:12px; }
.redeem-panel input { min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:13px; text-transform:uppercase; background:var(--paper); }
.redeem-panel button { padding:0 16px; border-radius:13px; color:white; background:var(--accent); font-weight:750; }
.secondary-wide { width:100%; min-height:50px; border:1px solid var(--line); border-radius:16px; color:var(--danger); background:transparent; font-weight:700; }

@media (max-width:520px) {
  .home-screen { padding-left:16px; padding-right:16px; }
  .study-actions { grid-template-columns:1fr; }
  .study-action { min-height:82px; }
}

@media (max-width:380px) {
  .home-focus { min-height:270px; }
  .theme-grid { grid-template-columns:repeat(3,1fr); }
  .metric-grid { grid-template-columns:1fr; }
  .term-heading h1 { font-size:27px; }
  .content-actions { grid-template-columns:1.35fr 1fr; }
}

@media (min-width:760px) {
  body { padding:0; }
  .app-shell { width:100%; min-height:100dvh; border-radius:0; }
  .home-screen,.study-screen,.utility-screen { min-height:100dvh; }
  .home-screen { width:100%; max-width:none; margin:0 auto; padding-left:clamp(32px,5vw,80px); padding-right:clamp(32px,5vw,80px); padding-bottom:max(88px,calc(72px + env(safe-area-inset-bottom))); }
  .bottom-nav { width:100%; }
  .sticky-actions,.browse-controls { width:min(calc(100% - 40px),1180px); }
  .sticky-actions,.browse-controls { bottom:20px; padding-left:clamp(24px,5vw,64px); padding-right:clamp(24px,5vw,64px); }
  .study-meta,.term-heading,.segments,.study-notice,.result-banner { width:calc(100% - 64px); max-width:900px; margin-left:auto; margin-right:auto; }
  .content-subject,.content-tools,.term-directory { width:calc(100% - 64px); max-width:1000px; margin-left:auto; margin-right:auto; }
  .account-card,.settings-hero,.settings-section,.metric-grid,.chart-section,.utility-screen>.calendar-link,.streak-card,.month-card,.calendar-screen>.primary { width:calc(100% - 64px); max-width:960px; margin-left:auto; margin-right:auto; }
  .content-actions { bottom:0; width:min(calc(100% - 80px),760px); }
  .sheet { width:min(calc(100% - 80px),680px); margin-bottom:20px; border-radius:30px; }
}