/* Interval · component styles. Load after tokens.css. Every colour, shadow, radius, duration and easing is a token.
   Class prefix: iv-. States are classes (is-pressed, is-focus, is-on…) or ARIA attributes, so the app and the
   previews share one stylesheet. Motion lives at the end of this file and is switched off by
   prefers-reduced-motion or by the app's own Animations switch (.iv-no-motion on <html>). */

/* ───────────────────────── Base ───────────────────────── */
.iv-root, .iv-screen { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; font-synthesis: none; text-rendering: optimizeLegibility; }
.iv-root { padding: var(--space-6) var(--space-5); background: var(--canvas); min-height: 100%; box-sizing: border-box; }
.iv-root--stage { background: var(--stage); }
.iv-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.iv-stack--lg { gap: var(--space-6); }
.iv-hstack { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.iv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.iv-demo-label { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-muted); margin: 0 0 var(--space-2); letter-spacing: .01em; }
.iv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iv-icon { display: block; flex: none; }
.iv-num { font-variant-numeric: tabular-nums; }
.iv-clip2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
:where(.iv-root, .iv-screen) button { font-family: inherit; }
:where(.iv-root, .iv-screen) :focus-visible { outline: none; }

/* Type helpers (mirror tokens.json type styles) */
.iv-t-hero { font-size: 56px; line-height: 56px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.iv-t-title1 { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.iv-t-title2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.iv-t-figure { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.iv-t-headline { font-size: 17px; line-height: 22px; font-weight: 600; }
.iv-t-body { font-size: 17px; line-height: 24px; }
.iv-t-callout { font-size: 15px; line-height: 21px; }
.iv-t-caption { font-size: 13px; line-height: 18px; font-weight: 500; }
.iv-t-label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .01em; }
.iv-muted { color: var(--ink-muted); }
.iv-accent { color: var(--accent); }
.iv-missed { color: var(--missed); }
.iv-p { margin: 0; }

/* ───────────────────────── Button ───────────────────────── */
.iv-btn { --edge-c: var(--edge); appearance: none; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-lg); min-width: var(--tap-min); padding: 0 var(--space-5); margin-bottom: 3px;
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink);
  font: inherit; font-size: 17px; line-height: 22px; font-weight: 600; text-align: center; cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: 0 3px 0 var(--edge-c), var(--shadow-1); transform: translateY(0);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background-color var(--dur-quick) ease, color var(--dur-quick) ease, opacity var(--dur-quick) ease; }
.iv-btn .iv-icon { width: 20px; height: 20px; }
.iv-btn--primary { --edge-c: var(--accent-edge); background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 var(--edge-c), var(--shadow-2), inset 0 1px 0 #ffffff2e; }
.iv-btn--missed { --edge-c: var(--missed-edge); background: var(--missed); border-color: var(--missed); color: var(--on-missed); box-shadow: 0 3px 0 var(--edge-c), var(--shadow-2), inset 0 1px 0 #ffffff2e; }
.iv-btn--secondary { }
.iv-btn--quiet { background: transparent; border-color: transparent; color: var(--accent); box-shadow: none; margin-bottom: 0; padding: 0 var(--space-4); }
.iv-btn--quiet-missed { background: transparent; border-color: transparent; color: var(--missed); box-shadow: none; margin-bottom: 0; padding: 0 var(--space-4); }
.iv-btn--md { min-height: var(--control-md); font-size: 16px; padding: 0 var(--space-4); border-radius: var(--radius-md); }
.iv-btn--sm { min-height: 36px; font-size: 15px; line-height: 20px; padding: 0 var(--space-3); border-radius: var(--radius-full); margin-bottom: 2px; box-shadow: 0 2px 0 var(--edge-c), var(--shadow-1); }
.iv-btn--block { display: flex; width: 100%; }
.iv-btn--icon { padding: 0; width: var(--control-md); min-height: var(--control-md); border-radius: var(--radius-full); }
.iv-btn-count { font-weight: 500; opacity: .8; }
.iv-btn-sub { display: block; font-size: 13px; line-height: 16px; font-weight: 500; opacity: .85; }
.iv-btn:active, .iv-btn.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge-c), var(--shadow-1); }
.iv-btn--primary:active, .iv-btn--primary.is-pressed, .iv-btn--missed:active, .iv-btn--missed.is-pressed { box-shadow: 0 1px 0 var(--edge-c), var(--shadow-1), inset 0 1px 0 #ffffff1f; }
.iv-btn--quiet:active, .iv-btn--quiet.is-pressed, .iv-btn--quiet-missed:active, .iv-btn--quiet-missed.is-pressed { transform: scale(.97); background: var(--fill); box-shadow: none; }
.iv-btn:focus-visible, .iv-btn.is-focus { box-shadow: 0 3px 0 var(--edge-c), var(--shadow-focus); }
.iv-btn--quiet:focus-visible, .iv-btn--quiet.is-focus { box-shadow: var(--shadow-focus); }
.iv-btn:disabled, .iv-btn.is-disabled { --edge-c: transparent; background: var(--fill); border-color: var(--fill); color: var(--ink-muted); box-shadow: none; cursor: default; transform: none; }
.iv-btn--quiet:disabled, .iv-btn--quiet.is-disabled { background: transparent; border-color: transparent; color: var(--ink-muted); }
.iv-btn-ic-missed { color: var(--missed); }
.iv-btn-ic-accent { color: var(--accent); }
.iv-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.iv-btn-row--prev { grid-template-columns: 1fr 2fr; }

/* Link: small accent text buttons ("I guessed", "Flag it", "Ask later"). 44pt tall. */
.iv-link { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-3); margin: 0 calc(var(--space-3) * -1); border-radius: var(--radius-md);
  font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-quick) ease, transform var(--dur-press) var(--ease-out); }
.iv-link .iv-icon { width: 18px; height: 18px; }
.iv-link--muted { color: var(--ink-muted); }
.iv-link--missed { color: var(--missed); }
.iv-link:active, .iv-link.is-pressed { background: var(--fill); transform: scale(.97); }
.iv-link:focus-visible, .iv-link.is-focus { box-shadow: var(--shadow-focus); }
.iv-link:disabled { color: var(--ink-muted); }
.iv-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); row-gap: 0; padding-left: var(--space-3); }

/* ───────────────────────── List + ListRow ───────────────────────── */
.iv-group + .iv-group { margin-top: var(--space-6); }
.iv-group-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin: 0 var(--space-1) var(--space-2); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .01em; color: var(--ink-muted); }
.iv-group-label span:last-child { font-weight: 500; font-variant-numeric: tabular-nums; }
.iv-group-foot { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); margin: var(--space-2) var(--space-1) 0; }
.iv-list { position: relative; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); overflow: hidden; isolation: isolate; }
.iv-list > * + *::before { content: ""; position: absolute; top: 0; left: var(--divider-inset, 16px); right: 0; height: 1px; background: var(--line); pointer-events: none; }
.iv-list--lead { --divider-inset: 60px; }
.iv-list--num { --divider-inset: 52px; }
.iv-row { position: relative; display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; width: 100%; min-height: var(--row-min); padding: var(--space-3) var(--space-4);
  background: transparent; border: 0; border-radius: 0; font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: background-color var(--dur-quick) ease; }
.iv-row:active, .iv-row.is-pressed { background: var(--fill); }
.iv-row:focus-visible, .iv-row.is-focus { box-shadow: inset 0 0 0 2.5px var(--accent); border-radius: inherit; }
.iv-row[aria-disabled="true"] { cursor: default; }
.iv-row[aria-disabled="true"] .iv-row-title { color: var(--ink-muted); }
.iv-row-chip { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.iv-row-chip .iv-icon { width: 20px; height: 20px; }
.iv-row-chip--missed { background: var(--missed-soft); color: var(--missed); }
.iv-row-chip--quiet { background: var(--fill); color: var(--ink-muted); }
.iv-row-main { flex: 1; min-width: 0; }
.iv-row-title { display: block; font-size: 17px; line-height: 22px; }
.iv-row-title--strong { font-weight: 600; }
.iv-row-sub { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); margin-top: 2px; }
.iv-row-meta { flex: none; font-size: 15px; line-height: 20px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.iv-row-meta--accent { color: var(--accent); font-weight: 600; }
.iv-row-chev { flex: none; color: var(--ink-muted); margin-right: -6px; width: 20px; height: 20px; opacity: .8; }
.iv-row--sm .iv-row-title { font-size: 15px; line-height: 21px; }
.iv-row--sm { align-items: center; padding-top: 14px; padding-bottom: 14px; }
.iv-row--missed .iv-row-title { color: var(--missed); font-weight: 600; }
.iv-row-status { display: inline-flex; align-items: center; gap: 6px; }
.iv-mark { background: var(--accent-soft); color: inherit; border-radius: var(--radius-xs); padding: 0 2px; margin: 0 -1px; box-shadow: inset 0 -1.5px 0 var(--accent); }

/* ───────────────────────── Tick, TickRow, ChoiceRow ───────────────────────── */
.iv-tick { appearance: none; border: 0; background: transparent; width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; padding: 0; margin: -6px -10px -6px 0; cursor: pointer; flex: none; border-radius: var(--radius-md); }
.iv-tick-box { box-sizing: border-box; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); background: var(--surface-raised); color: var(--on-accent); display: grid; place-items: center;
  box-shadow: 0 2px 0 var(--edge); transition: background-color var(--dur-quick) ease, border-color var(--dur-quick) ease, box-shadow var(--dur-press) ease, transform var(--dur-press) var(--ease-out); }
.iv-tick-box svg { width: 18px; height: 18px; stroke-width: 2.6; opacity: 0; }
.iv-tick[aria-checked="true"] .iv-tick-box { background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 0 var(--accent-edge); }
.iv-tick[aria-checked="true"] .iv-tick-box svg { opacity: 1; }
.iv-tick:active .iv-tick-box, .iv-tick.is-pressed .iv-tick-box { transform: translateY(1.5px); box-shadow: 0 0.5px 0 var(--edge); }
.iv-tick[aria-checked="true"]:active .iv-tick-box { box-shadow: 0 .5px 0 var(--accent-edge); }
.iv-tick:focus-visible .iv-tick-box, .iv-tick.is-focus .iv-tick-box { box-shadow: var(--shadow-focus); }
.iv-tick:disabled .iv-tick-box, .iv-tick.is-disabled .iv-tick-box { border-color: var(--fill-strong); background: var(--fill); box-shadow: none; }
.iv-tick--round .iv-tick-box { border-radius: var(--radius-full); }
.iv-choice-mark { flex: none; color: var(--accent); width: 22px; height: 22px; stroke-width: 2.4; }
.iv-choice[aria-checked="true"] .iv-row-title { font-weight: 600; }
.iv-choice[aria-checked="false"] .iv-choice-mark { visibility: hidden; }

/* ───────────────────────── Segmented ───────────────────────── */
.iv-seg { --n: 3; --i: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 3px; border-radius: var(--radius-full); background: var(--fill); isolation: isolate; }
.iv-seg-puck { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: var(--shadow-2);
  transform: translateX(calc(var(--i) * 100%)); transition: transform var(--dur-gentle) var(--spring-soft); }
.iv-seg-item { appearance: none; border: 0; background: none; min-height: 38px; padding: 0 var(--space-2); border-radius: var(--radius-full); font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; transition: color var(--dur-quick) ease; position: relative; }
.iv-seg-item::after { content: ""; position: absolute; inset: -3px 0; }
.iv-seg-item[aria-selected="true"] { color: var(--ink); }
.iv-seg-count { font-weight: 500; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.iv-seg-item:focus-visible { box-shadow: var(--shadow-focus); }

/* ───────────────────────── Progress ───────────────────────── */
.iv-meter { display: block; }
.iv-meter-track { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--fill); overflow: hidden; }
.iv-meter-fill { height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--accent); box-shadow: inset 0 1px 0 #ffffff33; transform-origin: left; }
.iv-meter--thin .iv-meter-track { height: 4px; }
.iv-meter--hair .iv-meter-track { height: 3px; }
.iv-meter-label { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.iv-meter-label b { color: var(--ink); font-weight: 600; }

/* ───────────────────────── LectureRow ───────────────────────── */
.iv-lrow { position: relative; display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; width: 100%; min-height: 72px; padding: var(--space-3) var(--space-4); }
.iv-lrow-open { appearance: none; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-3); background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-md); transition: transform var(--dur-press) var(--ease-out); }
.iv-lrow-open:active, .iv-lrow-open.is-pressed { transform: scale(.985); }
.iv-lnum { flex: none; box-sizing: border-box; min-width: 28px; height: 28px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--fill); color: var(--ink-muted); display: grid; place-items: center; font-size: 14px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.iv-lnum--done { background: var(--accent); color: var(--on-accent); }
.iv-lrow-main { flex: 1; min-width: 0; padding-top: 3px; }
.iv-lrow-title { display: block; font-size: 17px; line-height: 22px; }
.iv-lrow .iv-meter { margin-top: var(--space-2); }
.iv-lrow-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.iv-lrow-meta--accent { color: var(--accent); font-weight: 700; }
.iv-dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--missed); flex: none; }
.iv-dot--accent { background: var(--accent); }
.iv-dot--muted { background: var(--ink-faint); }
.iv-sep { color: var(--ink-muted); }

/* ───────────────────────── PageHeader, TopBar ───────────────────────── */
.iv-topbar { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; padding: 0 var(--space-2); }
.iv-topbar > :first-child { justify-self: start; }
.iv-topbar > :last-child { justify-self: end; }
.iv-topbar-title { font-size: 17px; line-height: 22px; font-weight: 600; text-align: center; white-space: nowrap; opacity: var(--inline-title, 1); }
.iv-topbar--glass { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 -1px 0 var(--line); }
.iv-topbar-meta { font-size: 15px; line-height: 20px; color: var(--ink-muted); padding: 0 var(--space-3); font-variant-numeric: tabular-nums; }
.iv-back { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap-min); padding: 0 var(--space-3) 0 4px; border-radius: var(--radius-md); font: inherit; font-size: 17px; line-height: 22px; font-weight: 500; color: var(--accent); cursor: pointer; white-space: nowrap; }
.iv-back .iv-icon { width: 24px; height: 24px; stroke-width: 2.1; }
.iv-back:active { background: var(--fill); }
.iv-head { padding: var(--space-1) var(--space-5) var(--space-5); }
.iv-head-kicker { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); margin: 0 0 var(--space-1); display: flex; align-items: center; gap: 6px; }
.iv-head-title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.iv-head-sub { margin: var(--space-1) 0 0; font-size: 15px; line-height: 21px; color: var(--ink-muted); }
.iv-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

/* ───────────────────────── TabBar (iPhone) ───────────────────────── */
.iv-tabbar { --i: 0; position: relative; box-sizing: border-box; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabbar-h); padding: 4px; border-radius: var(--radius-2xl);
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); box-shadow: var(--shadow-3), inset 0 1px 0 var(--glass-line), inset 0 0 0 1px var(--line); isolation: isolate; }
.iv-tabbar-puck { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 5); border-radius: 28px; background: var(--accent-soft); transform: translateX(calc(var(--i) * 100%)); transition: transform var(--dur-gentle) var(--spring-soft); }
.iv-tab { appearance: none; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 28px; font: inherit; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink-muted); cursor: pointer; transition: color var(--dur-quick) ease, transform var(--dur-press) var(--ease-out); }
.iv-tab .iv-icon { width: 26px; height: 26px; }
.iv-tab[aria-current="page"] { color: var(--accent); font-weight: 700; }
.iv-tab:active { transform: scale(.92); }
.iv-tab:focus-visible { box-shadow: var(--shadow-focus); }

/* ───────────────────────── Sidebar (iPad) ───────────────────────── */
.iv-side { box-sizing: border-box; width: var(--sidebar-w); flex: none; display: flex; flex-direction: column; gap: 2px; padding: var(--space-6) var(--space-4); background: var(--canvas); box-shadow: inset -1px 0 0 var(--line); }
.iv-side-brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-6); }
.iv-side-brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: var(--shadow-1); }
.iv-side-name { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; }
.iv-side-sub { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.iv-nav { appearance: none; position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: 17px; line-height: 22px; color: var(--ink); background: transparent; border: 0; text-align: left; cursor: pointer; width: 100%; transition: background-color var(--dur-quick) ease; }
.iv-nav .iv-icon { color: var(--ink-muted); }
.iv-nav:active { background: var(--fill); }
.iv-nav[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.iv-nav[aria-current="page"] .iv-icon { color: var(--accent); }
.iv-nav-count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.iv-side-gap { flex: 1; }

/* ───────────────────────── SessionBar, Toast, Timer ───────────────────────── */
.iv-sbar { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--sessionbar-h); padding: 0 var(--space-3) 0 var(--space-4); }
.iv-sbar--glass { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.iv-end { justify-self: start; appearance: none; border: 0; background: none; padding: 0; min-height: var(--tap-min); min-width: var(--tap-min); display: grid; place-items: center start; cursor: pointer; font: inherit; border-radius: var(--radius-full); }
.iv-end-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--radius-full); background: var(--fill); font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-quick) ease; }
.iv-end:active .iv-end-pill, .iv-end.is-pressed .iv-end-pill { transform: scale(.94); background: var(--fill-strong); }
.iv-end:focus-visible .iv-end-pill { box-shadow: var(--shadow-focus); }
.iv-sbar-mid { display: flex; justify-content: center; align-items: center; min-width: 0; }
.iv-sbar-right { justify-self: end; display: flex; align-items: center; gap: 0; }
.iv-sbar-count { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }
.iv-icon-btn { appearance: none; position: relative; border: 0; background: none; color: var(--ink-muted); width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; border-radius: var(--radius-full); cursor: pointer; padding: 0; transition: background-color var(--dur-quick) ease, transform var(--dur-press) var(--ease-out); }
.iv-icon-btn:active, .iv-icon-btn.is-pressed { background: var(--fill); transform: scale(.92); }
.iv-icon-btn:focus-visible { box-shadow: var(--shadow-focus); }
.iv-icon-btn .iv-icon { width: 24px; height: 24px; }
.iv-icon-btn--accent { color: var(--accent); }
.iv-badge { position: absolute; top: 5px; right: 3px; box-sizing: border-box; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: 13px; line-height: 19px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--stage); }
.iv-toast { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-size: 15px; line-height: 20px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-1); }
.iv-toast .iv-icon { width: 16px; height: 16px; stroke-width: 2.2; }
.iv-toast--float { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-3); height: 40px; padding: 0 18px; }
.iv-toast--float .iv-icon { color: var(--accent); }
.iv-timer { position: relative; width: 36px; height: 36px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.iv-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.iv-timer-track { fill: none; stroke: var(--fill); stroke-width: 3.5; }
.iv-timer-ring { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--off, 0); transition: stroke-dashoffset 1s linear, stroke var(--dur-gentle) ease; }
.iv-timer--late .iv-timer-ring { stroke: var(--missed); }
.iv-timer--late { color: var(--missed); }

/* ───────────────────────── RoundBar ───────────────────────── */
.iv-round { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 28px; padding: 0 var(--space-5); }
.iv-round-label { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.iv-round-dots { display: flex; align-items: center; gap: 6px; }
.iv-rdot { box-sizing: border-box; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--fill-strong); flex: none; }
.iv-rdot--ok { background: var(--accent); }
.iv-rdot--missed { background: transparent; border: 2.5px solid var(--missed); }
.iv-rdot--now { background: transparent; border: 2.5px solid var(--ink-muted); }
.iv-combo { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-size: 13px; line-height: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ───────────────────────── SourceLine, Stem, Notes, Tags ───────────────────────── */
.iv-src { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.iv-src-main { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.iv-src-again { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 700; }
.iv-src-again .iv-icon { width: 15px; height: 15px; stroke-width: 2.2; }
.iv-stem { font-size: 19px; line-height: 28px; font-weight: 400; margin: var(--space-3) 0 var(--space-5); text-wrap: pretty; color: var(--ink); }
.iv-stem img { display: block; max-width: 100%; border-radius: var(--radius-md); margin-top: var(--space-3); box-shadow: var(--shadow-1); }

.iv-tag { display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; height: 28px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.iv-tag .iv-icon { width: 15px; height: 15px; stroke-width: 2.1; }
.iv-tag--dashed { border: 1.5px dashed var(--line-strong); }
.iv-tag--dashed .iv-icon { color: var(--ink-muted); }
.iv-tag--soft { background: var(--accent-soft); color: var(--accent); }
.iv-tag--missed { background: var(--missed-soft); color: var(--missed); }
.iv-tag--quiet { background: var(--fill); color: var(--ink-muted); }
.iv-tag--kind { height: 24px; padding: 0 8px; border-radius: 7px; background: var(--fill); color: var(--ink-muted); font-size: 13px; letter-spacing: .06em; font-weight: 800; }

.iv-note { display: flex; gap: var(--space-3); align-items: flex-start; box-sizing: border-box; padding: 14px var(--space-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); font-size: 15px; line-height: 21px; color: var(--ink); }
.iv-note-chip { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--fill); color: var(--ink-muted); }
.iv-note-chip .iv-icon { width: 18px; height: 18px; }
.iv-note--missed .iv-note-chip { background: var(--missed-soft); color: var(--missed); }
.iv-note--accent .iv-note-chip { background: var(--accent-soft); color: var(--accent); }
.iv-note-text { flex: 1; min-width: 0; padding-top: 3px; }
.iv-note-title { font-weight: 700; margin-bottom: 2px; }
.iv-note-body { color: var(--ink-muted); }
.iv-note .iv-link { margin-top: 2px; }

.iv-notice { appearance: none; display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; min-height: var(--tap-min); width: 100%; padding: 0 var(--space-2) 0 var(--space-3); margin: 0 calc(var(--space-3) * -1); width: calc(100% + var(--space-3) * 2); background: none; border: 0; border-radius: var(--radius-md); font: inherit; font-size: 15px; line-height: 21px; color: var(--ink-muted); text-align: left; cursor: pointer; transition: background-color var(--dur-quick) ease; }
.iv-notice:active, .iv-notice.is-pressed { background: var(--fill); }
.iv-notice-text { flex: 1; }
.iv-notice b { color: var(--ink); font-weight: 600; }
.iv-notice .iv-icon { width: 18px; height: 18px; color: var(--ink-muted); }
.iv-notice .iv-dot { width: 8px; height: 8px; }

/* ───────────────────────── Option (MCQ) ───────────────────────── */
.iv-opts { display: flex; flex-direction: column; gap: var(--space-3); }
.iv-opt { --edge-c: var(--edge); position: relative; display: flex; align-items: flex-start; gap: var(--space-3); box-sizing: border-box; width: 100%; min-height: var(--row-min); padding: 14px var(--space-4) 14px 14px; margin: 0;
  border: 1.5px solid transparent; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 3px 0 var(--edge-c), var(--shadow-1); text-align: left; font: inherit; font-size: 17px; line-height: 24px; color: var(--ink); cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background-color var(--dur-gentle) ease, border-color var(--dur-gentle) ease, color var(--dur-gentle) ease; }
.iv-opt:active, .iv-opt.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge-c), var(--shadow-1); }
.iv-opt:focus-visible, .iv-opt.is-focus { box-shadow: 0 3px 0 var(--edge-c), var(--shadow-focus); }
.iv-opt-letter { box-sizing: border-box; flex: none; position: relative; width: 28px; height: 28px; margin-top: -2px; border-radius: var(--radius-full); border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: 13px; line-height: 1; font-weight: 800; color: var(--ink-muted); background: var(--surface-raised); }
.iv-opt-letter svg { width: 17px; height: 17px; stroke-width: 2.8; }
.iv-opt-text { flex: 1; min-width: 0; padding-top: 0; }
.iv-opt-tag { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 700; }
.iv-opt--right, .iv-opt--correct { --edge-c: var(--accent-edge); background: var(--accent-soft); border-color: var(--accent); cursor: default; }
.iv-opt--right .iv-opt-letter, .iv-opt--correct .iv-opt-letter { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.iv-opt--right .iv-opt-tag, .iv-opt--correct .iv-opt-tag { color: var(--accent); }
.iv-opt--correct { --edge-c: transparent; box-shadow: var(--shadow-1); }
.iv-opt--wrong { --edge-c: var(--missed-edge); background: var(--missed-soft); border-color: var(--missed); cursor: default; }
.iv-opt--wrong .iv-opt-letter { background: var(--missed); border-color: var(--missed); color: var(--on-missed); }
.iv-opt--wrong .iv-opt-tag { color: var(--missed); }
.iv-opt--dim { --edge-c: transparent; background: transparent; box-shadow: none; border-color: var(--line); color: var(--ink-muted); cursor: default; }
.iv-opt--dim .iv-opt-letter { background: transparent; border-color: var(--line); }
.iv-opt--suggested { --edge-c: transparent; background: var(--accent-soft); border-color: var(--accent); border-style: dashed; box-shadow: none; cursor: default; }
.iv-opt--suggested .iv-opt-letter { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.iv-opt--suggested .iv-opt-tag { color: var(--accent); }
.iv-opt--static { --edge-c: transparent; background: transparent; border-color: transparent; box-shadow: none; padding: 6px 0; min-height: 0; cursor: default; }
.iv-opt--dim:active, .iv-opt--right:active, .iv-opt--wrong:active, .iv-opt--correct:active, .iv-opt--suggested:active, .iv-opt--static:active { transform: none; }
.iv-opts--answered .iv-opt { cursor: default; }
/* Think first: empty slots */
.iv-think { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); border-radius: var(--radius-xl); background: var(--fill); box-shadow: inset 0 2px 6px #0000000d; }
.iv-think-slots { display: flex; gap: 10px; margin-bottom: var(--space-2); }
.iv-think-slot { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--surface); box-shadow: 0 2px 0 var(--edge); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--ink-muted); }
.iv-think-title { font-size: 17px; line-height: 22px; font-weight: 700; }
.iv-think-body { font-size: 15px; line-height: 21px; color: var(--ink-muted); }

/* ───────────────────────── AnswerBlock, MarkButtons ───────────────────────── */
.iv-ans { box-sizing: border-box; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); padding: var(--space-4); }
.iv-ans-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.iv-ans-label { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-muted); margin-right: auto; }
.iv-ans-body { font-size: 17px; line-height: 26px; color: var(--ink); }
.iv-ans-body p { margin: 0 0 var(--space-2); }
.iv-ans-body p:last-child { margin-bottom: 0; }
.iv-ans-body ul { margin: 0; padding-left: 20px; }
.iv-ans-note { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.iv-ans--checked { box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--accent); }
.iv-ans--none { background: transparent; box-shadow: none; border: 1.5px dashed var(--line-strong); display: flex; gap: var(--space-3); align-items: flex-start; }
.iv-ans--none > .iv-icon { color: var(--ink-muted); margin-top: 1px; }
.iv-ans-none-title { font-size: 17px; line-height: 22px; font-weight: 700; }
.iv-ans-none-body { font-size: 15px; line-height: 21px; color: var(--ink-muted); margin-top: 2px; }
.iv-markbtns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.iv-markbtns .iv-btn .iv-icon { width: 22px; height: 22px; stroke-width: 2.4; }

/* ───────────────────────── Fields ───────────────────────── */
.iv-field { display: flex; flex-direction: column; gap: var(--space-2); }
.iv-field-label { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-muted); padding-left: 2px; }
.iv-field-box { position: relative; display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: var(--field-h); padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--fill); color: var(--ink-muted); box-shadow: inset 0 1px 2px #0000000f; transition: background-color var(--dur-quick) ease, box-shadow var(--dur-quick) ease; }
.iv-field-box .iv-icon { width: 20px; height: 20px; }
.iv-field-box:focus-within, .iv-field--focus .iv-field-box { background: var(--surface-raised); box-shadow: var(--shadow-focus); }
.iv-field--error .iv-field-box { box-shadow: inset 0 0 0 2px var(--missed); }
.iv-field-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; line-height: 24px; color: var(--ink); padding: 0; }
.iv-field-input::placeholder { color: var(--ink-muted); opacity: 1; }
.iv-field-value { flex: 1; font-size: 17px; line-height: 24px; color: var(--ink); }
.iv-field-ph { flex: 1; font-size: 17px; line-height: 24px; color: var(--ink-muted); }
.iv-field-box--area { align-items: flex-start; padding: 14px var(--space-4); min-height: 112px; }
.iv-field-clear { margin-right: -10px; width: 36px; height: 36px; }
.iv-field-clear .iv-icon { width: 14px; height: 14px; stroke-width: 2.6; }
.iv-field-clear span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--ink-muted); color: var(--fill); }
.iv-field-hint { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); padding-left: 2px; }
.iv-field-error { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--missed); padding-left: 2px; display: flex; gap: 5px; align-items: center; }
.iv-field-error .iv-icon { width: 15px; height: 15px; }
.iv-caret { display: inline-block; width: 2px; height: 22px; background: var(--accent); border-radius: 1px; vertical-align: -5px; margin-left: 1px; }
.iv-form { display: flex; flex-direction: column; gap: var(--space-5); }
.iv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ───────────────────────── Sheet ───────────────────────── */
.iv-sheet-layer { position: absolute; inset: 0; z-index: 20; }
.iv-sheet-scrim { position: absolute; inset: 0; background: var(--scrim); }
.iv-sheet { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; max-height: 88%; display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; box-shadow: var(--shadow-sheet); padding-bottom: var(--safe-bottom); overflow: hidden; }
.iv-sheet-grab { flex: none; width: 40px; height: 5px; border-radius: var(--radius-full); background: var(--fill-strong); margin: 8px auto 2px; }
.iv-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); min-height: 52px; }
.iv-sheet-title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.iv-sheet-sub { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.iv-sheet-body { overflow: hidden; padding: var(--space-2) var(--space-5) var(--space-4); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.iv-sheet-body .iv-list { background: var(--canvas); box-shadow: none; }
.iv-sheet--card { left: 50%; right: auto; bottom: 50%; width: min(560px, calc(100% - 96px)); transform: translate(-50%, 50%); border-radius: var(--radius-xl); padding-bottom: var(--space-4); box-shadow: var(--shadow-3); }

/* ───────────────────────── Stat trio, EmptyState, Summary, ImportCard ───────────────────────── */
.iv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.iv-stat { box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 14px var(--space-4) var(--space-4); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-1); }
.iv-stat-label { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-muted); }
.iv-stat-value { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.iv-stat--missed .iv-stat-value { color: var(--missed); }

.iv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-10) var(--space-4); max-width: 320px; margin: 0 auto; }
.iv-empty-art { width: 120px; height: 64px; margin-bottom: var(--space-3); }
.iv-empty-title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.iv-empty-body { font-size: 15px; line-height: 21px; color: var(--ink-muted); margin: 0; }
.iv-empty .iv-btn { margin-top: var(--space-4); }

.iv-sum { box-sizing: border-box; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); padding: var(--space-5); }
.iv-sum-title { font-size: 22px; line-height: 28px; font-weight: 700; margin: 0 0 var(--space-3); }
.iv-sum-dl { margin: 0; }
.iv-sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 24px; }
.iv-sum-row:first-child { border-top: 0; padding-top: 0; }
.iv-sum-row:last-child { padding-bottom: 0; }
.iv-sum-row dt { color: var(--ink-muted); }
.iv-sum-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.iv-sum-figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.iv-imp { box-sizing: border-box; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); padding: var(--space-4); }
.iv-imp-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.iv-imp-file { font-size: 17px; line-height: 22px; font-weight: 700; word-break: break-word; }
.iv-imp-when { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); margin-top: 2px; }
.iv-imp-dl { margin: 0; }
.iv-imp-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 21px; }
.iv-imp-row dt { color: var(--ink-muted); }
.iv-imp-row dd { margin: 0; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; font-weight: 600; }

/* ───────────────────────── Ask later pieces ───────────────────────── */
.iv-bm { position: relative; }
.iv-bm .iv-icon { color: var(--accent); }
.iv-bm-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.iv-bm-pill .iv-icon { width: 18px; height: 18px; }
.iv-ask-row .iv-row-main { padding-right: var(--space-1); }
.iv-understood { appearance: none; flex: none; width: var(--tap-min); height: var(--tap-min); margin: -6px -10px -6px 0; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
.iv-understood span { box-sizing: border-box; width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid var(--line-strong); display: grid; place-items: center; color: var(--on-accent); background: var(--surface-raised); transition: background-color var(--dur-quick) ease, border-color var(--dur-quick) ease; }
.iv-understood svg { width: 16px; height: 16px; stroke-width: 2.8; opacity: 0; }
.iv-understood[aria-checked="true"] span { background: var(--accent); border-color: var(--accent); }
.iv-understood[aria-checked="true"] svg { opacity: 1; }
.iv-pics { display: flex; gap: var(--space-2); }
.iv-pic { box-sizing: border-box; width: 64px; height: 88px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-2); padding: 8px 7px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.iv-pic i { display: block; height: 4px; border-radius: 2px; background: var(--fill-strong); }
.iv-pic i:nth-child(2n) { width: 70%; }
.iv-pic i.a { background: var(--accent); width: 55%; }
.iv-pic--loading { background: var(--fill); box-shadow: none; background-image: linear-gradient(100deg, transparent 30%, var(--surface-raised) 50%, transparent 70%); background-size: 200% 100%; }
.iv-pic--loading i { display: none; }

/* ───────────────────────── Lecture map, evenings, spiral ───────────────────────── */
.iv-map { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.iv-tile { --v: 0; position: relative; box-sizing: border-box; aspect-ratio: 1; border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 2px 0 var(--edge), var(--shadow-1); display: grid; place-items: center; overflow: hidden; isolation: isolate;
  font-size: 15px; line-height: 1; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.iv-tile::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(var(--v) * 100%); background: var(--accent-mid); transform-origin: bottom; }
.iv-tile--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fill-strong); color: var(--ink-muted); }
.iv-tile--off::before { display: none; }
.iv-tile--stamp { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 0 var(--accent-edge), var(--shadow-2); }
.iv-tile--stamp::before { display: none; }
.iv-tile-stamp { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: var(--radius-full); border: 2px solid currentColor; box-sizing: border-box; }
.iv-tile-miss { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--missed); }
.iv-wall { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 8px; justify-items: center; }
.iv-wall-day { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-muted); }
.iv-eve { width: 22px; height: 22px; display: grid; place-items: center; }
.iv-eve i { display: block; border-radius: var(--radius-full); background: var(--accent); width: var(--s, 6px); height: var(--s, 6px); }
.iv-eve--none i { background: var(--fill-strong); width: 6px; height: 6px; }
.iv-eve--today i { background: transparent; border: 2px solid var(--accent); width: 14px; height: 14px; box-sizing: border-box; }
.iv-spiral { position: relative; width: 100%; aspect-ratio: 1; }
.iv-spiral canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.iv-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.iv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.iv-legend i { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--accent); box-sizing: border-box; }
.iv-legend i.m { background: transparent; border: 2px solid var(--missed); }
.iv-legend i.n { background: var(--ink-muted); width: 6px; height: 6px; }
.iv-legend i.f { background: var(--ink-faint); width: 5px; height: 5px; }

/* ───────────────────────── Key point card ───────────────────────── */
.iv-kp { perspective: 1400px; }
.iv-kp-card { position: relative; box-sizing: border-box; min-height: 340px; border-radius: var(--radius-2xl); transform-style: preserve-3d; transition: transform var(--dur-slow) var(--spring-soft); }
.iv-kp.is-flipped .iv-kp-card { transform: rotateY(180deg); }
.iv-kp-face { position: absolute; inset: 0; box-sizing: border-box; padding: var(--space-5); border-radius: inherit; background: var(--surface-raised); box-shadow: var(--shadow-3); -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; }
.iv-kp-face--back { transform: rotateY(180deg); }
.iv-kp-face--static { position: relative; inset: auto; border-radius: var(--radius-2xl); }
.iv-kp-face > .iv-tag { align-self: flex-start; }
.iv-kp-prompt { font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.iv-kp-hint { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.iv-kp-answer { font-size: 17px; line-height: 26px; }
.iv-kp-quote { font-size: 15px; line-height: 22px; color: var(--ink-muted); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--fill); }
.iv-kp-quote b { display: block; font-size: 13px; line-height: 16px; font-weight: 700; margin-bottom: 4px; color: var(--ink-muted); }
.iv-kp-stack { position: absolute; left: 14px; right: 14px; bottom: -10px; height: 40px; border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-1); z-index: -1; }
.iv-kp-items { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(var(--space-2) * -1); }
.iv-kp-item { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-md); font-size: 17px; line-height: 22px; }
.iv-kp-item .iv-tick { margin: 0 -6px 0 -10px; }
.iv-kpdots { display: flex; gap: 6px; align-items: center; }
.iv-kpdot { box-sizing: border-box; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--fill-strong); }
.iv-kpdot--known { background: var(--accent); }
.iv-kpdot--way { background: linear-gradient(90deg, var(--accent) 50%, var(--accent-mid) 50%); }
.iv-kpdot--weak { background: transparent; border: 2.5px solid var(--missed); }
.iv-kpdot--now { background: transparent; border: 2.5px solid var(--ink-muted); }

/* ───────────────────────── Logo / app icon ───────────────────────── */
.iv-appicon { display: block; border-radius: 22.37%; box-shadow: var(--shadow-2); }
.iv-hop { overflow: visible; }
.iv-hop .trail { fill: none; stroke: var(--accent); stroke-opacity: .5; stroke-linecap: round; }
.iv-hop .land { fill: var(--accent); }
.iv-hop .ring { fill: none; stroke: var(--accent); }
.iv-hop--faint .trail { stroke: var(--ink-faint); stroke-opacity: 1; }
.iv-hop--faint .land { fill: var(--ink-faint); }
.iv-hop--faint .ring { stroke: var(--accent); }

/* ───────────────────────── Places: one colour, different settings ─────────────────────────
   desk  (Home)                     canvas + a soft lamp of accent-glow from the top, airy spacing.
   shelf (Lectures, Points, Missed, Settings and their pushed pages)
                                    canvas, large title, stacked Level 1 lists.
   stage (Review, Quick look, practice, Confirm lecture, Summary)
                                    a dimmer room, glass session bar, raised options, run heat. */
.iv-place-desk { background: radial-gradient(120% 46% at 50% -8%, var(--accent-glow), transparent 70%), var(--canvas); }
.iv-place-shelf { background: var(--canvas); }
.iv-place-stage { --heat: 0; background: radial-gradient(130% calc(20% + var(--heat) * 40%) at 50% -6%, var(--accent-glow), transparent 72%), var(--stage); }
.iv-place-stage .iv-badge { box-shadow: 0 0 0 2px var(--stage); }

/* ───────────────────────── Device frames (previews only) ───────────────────────── */
.iv-show { display: flex; gap: 40px; padding: 28px 32px 32px; align-items: flex-start; font-family: var(--font-sans); background: var(--canvas); color: var(--ink); }
.iv-show-item { display: flex; flex-direction: column; gap: 12px; flex: none; }
.iv-show-label { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); padding-left: 6px; }
.iv-show-note { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); padding-left: 6px; max-width: 390px; margin-top: -8px; }
.iv-phone { position: relative; box-sizing: content-box; width: 390px; height: 844px; padding: 11px; border-radius: 58px; background: #0d0f10; box-shadow: 0 0 0 1.5px #3a3f43, 0 30px 60px -20px #00000059, inset 0 0 0 1px #000; flex: none; }
.iv-screen { position: relative; width: 390px; height: 844px; border-radius: 47px; overflow: hidden; display: flex; flex-direction: column; --safe-top: 47px; --safe-bottom: 34px; }
.iv-notch { position: absolute; top: 0; left: 50%; width: 162px; height: 32px; margin-left: -81px; background: #0d0f10; border-radius: 0 0 20px 20px; z-index: 40; }
.iv-notch::before, .iv-notch::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; background: radial-gradient(circle at 0 100%, transparent 7.5px, #0d0f10 8px); }
.iv-notch::before { left: -8px; transform: scaleX(-1); }
.iv-notch::after { right: -8px; }
.iv-status { position: relative; z-index: 30; flex: none; height: var(--safe-top); display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 40px; box-sizing: border-box; font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; pointer-events: none; }
.iv-status-r { display: flex; align-items: center; gap: 5px; }
.iv-homebar { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ink); z-index: 40; }
.iv-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.iv-pad { padding: 0 var(--space-5); }
.iv-dock { flex: none; position: relative; z-index: 3; padding: var(--space-3) var(--space-5) var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.iv-dock--fade { background: linear-gradient(to bottom, transparent, var(--dock-bg, var(--canvas)) 28%); margin-top: -24px; padding-top: 28px; }
.iv-dock-caption { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); text-align: center; }
.iv-screen--tabs .iv-dock { padding-bottom: var(--space-3); }
.iv-screen--focus .iv-dock { padding-bottom: calc(var(--safe-bottom) + 2px); }
.iv-tabbar-slot { flex: none; height: 102px; position: relative; }
.iv-tabbar-slot .iv-tabbar { position: absolute; left: 12px; right: 12px; bottom: 26px; }
.iv-ipad { position: relative; box-sizing: content-box; width: 1180px; height: 820px; padding: 14px; border-radius: 36px; background: #0d0f10; box-shadow: 0 0 0 1.5px #3a3f43, 0 30px 60px -20px #00000059; flex: none; }
.iv-ipad-screen { position: relative; width: 1180px; height: 820px; border-radius: 22px; overflow: hidden; display: flex; --safe-top: 24px; --safe-bottom: 20px; }
.iv-ipad-screen .iv-status { position: absolute; top: 0; left: 0; right: 0; height: 24px; padding: 0 24px; font-size: 13px; }
.iv-ipad-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 24px; position: relative; }
.iv-col { width: 100%; margin: 0 auto; box-sizing: border-box; }

/* ───────────────────────── Motion ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.iv-no-motion) .iv-a-settle { animation: iv-settle var(--dur-base) var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-a-rise { animation: iv-rise var(--dur-gentle) var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }
  html:not(.iv-no-motion) .iv-a-cascade > * { animation: iv-rise var(--dur-gentle) var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-a-cascade > :nth-child(2) { animation-delay: 35ms; }
  html:not(.iv-no-motion) .iv-a-cascade > :nth-child(3) { animation-delay: 70ms; }
  html:not(.iv-no-motion) .iv-a-cascade > :nth-child(4) { animation-delay: 105ms; }
  html:not(.iv-no-motion) .iv-a-cascade > :nth-child(5) { animation-delay: 140ms; }
  html:not(.iv-no-motion) .iv-a-cascade > :nth-child(6) { animation-delay: 175ms; }
  html:not(.iv-no-motion) .iv-a-cascade > :nth-child(n+7) { animation-delay: 210ms; }
  html:not(.iv-no-motion) .iv-a-qin { animation: iv-qin var(--dur-gentle) var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-a-qback { animation: iv-qback var(--dur-gentle) var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-a-qin .iv-opt { animation: iv-rise var(--dur-gentle) var(--spring-soft) both; }
  html:not(.iv-no-motion) .iv-a-qin .iv-opt:nth-child(2) { animation-delay: 45ms; }
  html:not(.iv-no-motion) .iv-a-qin .iv-opt:nth-child(3) { animation-delay: 90ms; }
  html:not(.iv-no-motion) .iv-a-qin .iv-opt:nth-child(4) { animation-delay: 135ms; }
  html:not(.iv-no-motion) .iv-a-qin .iv-opt:nth-child(5) { animation-delay: 180ms; }
  html:not(.iv-no-motion) .iv-opt--right.is-new { animation: iv-glow 760ms var(--ease-out) both, iv-lift 420ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-opt--right.is-new .iv-opt-letter { animation: iv-pop 380ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-opt--right.is-new .iv-opt-letter path, html:not(.iv-no-motion) .iv-tick.is-new[aria-checked="true"] path, html:not(.iv-no-motion) .iv-understood.is-new path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: iv-draw 300ms 80ms var(--ease-out) forwards; }
  html:not(.iv-no-motion) .iv-opt--right.is-new::before, html:not(.iv-no-motion) .iv-opt--right.is-new::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 2px solid var(--accent); pointer-events: none; animation: iv-ripple 900ms var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-opt--right.is-new::after { animation-delay: 180ms; }
  html:not(.iv-no-motion) .iv-opt--wrong.is-new { animation: iv-shake 420ms cubic-bezier(.36,.07,.19,.97) both; }
  html:not(.iv-no-motion) .iv-opt--wrong.is-new .iv-opt-letter { animation: iv-pop 340ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-opt--correct.is-new { animation: iv-reveal 420ms 160ms var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-opt--dim.is-new { transition: color var(--dur-gentle) ease, border-color var(--dur-gentle) ease, background-color var(--dur-gentle) ease; }
  html:not(.iv-no-motion) .iv-tick.is-new[aria-checked="true"] .iv-tick-box, html:not(.iv-no-motion) .iv-understood.is-new span { animation: iv-pop 320ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-a-pop { animation: iv-pop 380ms var(--spring-pop) both; animation-delay: calc(var(--d, 0) * 1ms); }
  html:not(.iv-no-motion) .iv-a-bump { display: inline-block; animation: iv-bump 360ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-a-breathe { animation: iv-breathe-soft var(--dur-ambient) var(--ease-ambient) infinite; }
  html:not(.iv-no-motion) .iv-rdot--now { animation: iv-breathe 1.6s var(--ease-ambient) infinite; }
  html:not(.iv-no-motion) .iv-round--hot .iv-rdot--ok { animation: iv-shimmer 2.2s var(--ease-ambient) infinite; animation-delay: calc(var(--i, 0) * 110ms); }
  html:not(.iv-no-motion) .iv-combo.is-new { animation: iv-combo 440ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-toast.is-new { animation: iv-toast 1900ms var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-meter-fill { animation: iv-fill 1s 240ms var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-tile { animation: iv-pop 420ms var(--spring-pop) both; animation-delay: calc(var(--i, 0) * 22ms + 80ms); }
  html:not(.iv-no-motion) .iv-tile::before { animation: iv-fillup 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 22ms + 320ms); }
  html:not(.iv-no-motion) .iv-tile--stamp.is-new { animation: iv-stamp 640ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-eve i { animation: iv-pop 340ms var(--spring-pop) both; animation-delay: calc(var(--i, 0) * 14ms + 200ms); }
  html:not(.iv-no-motion) .iv-sheet.is-new { animation: iv-sheet var(--dur-gentle) var(--spring-soft) both; }
  html:not(.iv-no-motion) .iv-sheet-scrim.is-new { animation: iv-fade var(--dur-base) ease-out both; }
  html:not(.iv-no-motion) .iv-tab[aria-current="page"] .iv-icon { animation: iv-hop 520ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-bm.is-landed { animation: iv-bump 500ms var(--spring-pop) both; }
  html:not(.iv-no-motion) .iv-bm.is-landed::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--accent); animation: iv-ripple 600ms var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-pic--loading { animation: iv-shine 1.4s linear infinite; }
  html:not(.iv-no-motion) .iv-press-row { transition: transform var(--dur-press) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .iv-sheet.is-new, .iv-sheet-scrim.is-new, .iv-a-settle, .iv-a-rise, .iv-a-qin, .iv-a-qback, .iv-toast.is-new { animation: iv-fade var(--dur-base) ease-out both; }
  .iv-seg-puck, .iv-tabbar-puck, .iv-kp-card { transition-duration: 1ms; }
}
html.iv-no-motion .iv-sheet.is-new, html.iv-no-motion .iv-toast.is-new { animation: iv-fade var(--dur-base) ease-out both; }
html.iv-no-motion .iv-seg-puck, html.iv-no-motion .iv-tabbar-puck, html.iv-no-motion .iv-kp-card { transition-duration: 1ms; }

@keyframes iv-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes iv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes iv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes iv-qin { from { opacity: 0; transform: translateX(36px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes iv-qback { from { opacity: 0; transform: translateX(-36px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes iv-pop { 0% { transform: scale(.55); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes iv-bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes iv-lift { 0% { transform: translateY(2px); } 45% { transform: translateY(-3px) scale(1.012); } 100% { transform: none; } }
@keyframes iv-draw { to { stroke-dashoffset: 0; } }
@keyframes iv-glow { 0% { box-shadow: 0 3px 0 var(--accent-edge), 0 0 0 0 var(--accent-glow); } 40% { box-shadow: 0 3px 0 var(--accent-edge), 0 0 0 10px var(--accent-glow); } 100% { box-shadow: 0 3px 0 var(--accent-edge), var(--shadow-1); } }
@keyframes iv-ripple { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.09, 1.35); } }
@keyframes iv-shake { 0%, 100% { transform: none; } 18% { transform: translateX(-7px); } 38% { transform: translateX(6px); } 58% { transform: translateX(-4px); } 78% { transform: translateX(2px); } }
@keyframes iv-reveal { from { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 6px var(--accent-glow); } to { box-shadow: var(--shadow-1); } }
@keyframes iv-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .75; } }
@keyframes iv-shimmer { 0%, 70%, 100% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.25); filter: brightness(1.25); } }
@keyframes iv-combo { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes iv-toast { 0% { opacity: 0; transform: translateY(-6px) scale(.85); } 14% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px) scale(.96); } }
@keyframes iv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes iv-fillup { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes iv-stamp { 0% { transform: scale(1.6) rotate(-10deg); opacity: 0; } 55% { transform: scale(.92) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@keyframes iv-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes iv-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-7px) scale(1.08); } 70% { transform: translateY(1px) scale(.97, 1.03); } 100% { transform: none; } }
@keyframes iv-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Tab icons: line at rest, solid when current */
.iv-tab .iv-ic-solid, .iv-nav .iv-ic-solid { display: none; }
.iv-tab[aria-current="page"] .iv-ic-solid, .iv-nav[aria-current="page"] .iv-ic-solid { display: block; }
.iv-tab[aria-current="page"] .iv-ic-line, .iv-nav[aria-current="page"] .iv-ic-line { display: none; }

/* ───────────────────────── Screen pieces (Home hero, recap, drop zone, quotes) ───────────────────────── */
.iv-hometop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); }
.iv-hero { display: flex; flex-direction: column; gap: 2px; margin: var(--space-2) 0 var(--space-2); }
.iv-hero .iv-t-hero { color: var(--ink); }
.iv-hero-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.iv-lede { font-size: 15px; line-height: 21px; color: var(--ink-muted); margin: 0; max-width: 34em; }
.iv-bigdots { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-bigdots .iv-rdot { width: 16px; height: 16px; }
.iv-bigdots .iv-rdot--missed { border-width: 3px; }
.iv-drop { box-sizing: border-box; border-radius: var(--radius-xl); border: 2px dashed var(--line-strong); padding: var(--space-6) var(--space-4) var(--space-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.iv-drop-art { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.iv-drop-note { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); max-width: 280px; }
.iv-quote { box-sizing: border-box; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--fill); font-size: 15px; line-height: 22px; color: var(--ink); }
.iv-quote b { display: block; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-muted); margin-bottom: 4px; }
.iv-result { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; line-height: 21px; color: var(--ink-muted); }
.iv-result .iv-icon { width: 18px; height: 18px; margin-top: 1px; }
.iv-result--missed .iv-icon { color: var(--missed); }
.iv-result--ok .iv-icon { color: var(--accent); }
.iv-hint { font-size: 15px; line-height: 21px; color: var(--ink-muted); margin: 0; }
.iv-sel-card { box-sizing: border-box; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 3px 0 var(--accent-edge), var(--shadow-2), inset 0 0 0 1.5px var(--accent); }
.iv-boot { position: absolute; inset: 0; display: grid; place-items: center; }
.iv-ipad .iv-tabbar-slot { display: none; }
/* The stage header: session bar and round bar share one glass band, so a long question scrolls under both. */
.iv-stagehead { position: relative; z-index: 3; flex: none; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); padding-bottom: 6px; box-shadow: inset 0 -1px 0 var(--line); }
.iv-stagehead .iv-sbar--glass { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ───────────────────────── Place transitions ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.iv-no-motion) .iv-a-push { animation: iv-push var(--dur-gentle) var(--spring-soft) both; box-shadow: -18px 0 40px #00000026; }
  html:not(.iv-no-motion) .iv-a-under { animation: iv-under var(--dur-gentle) var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-a-stage { animation: iv-stage var(--dur-slow) var(--spring-soft) both; }
  html:not(.iv-no-motion) .iv-a-sink { animation: iv-sink var(--dur-base) var(--ease-in) both; }
  html:not(.iv-no-motion) .iv-a-tabswap { animation: iv-tabswap var(--dur-base) var(--ease-out) both; }
  html:not(.iv-no-motion) .iv-a-sheetin { animation: iv-sheet var(--dur-gentle) var(--spring-soft) both; }
  html:not(.iv-no-motion) .iv-a-scrim { animation: iv-fade var(--dur-base) ease-out both; }
}
@keyframes iv-push { from { transform: translateX(100%); } to { transform: none; } }
@keyframes iv-under { to { transform: translateX(-22%); filter: brightness(.9); } }
@keyframes iv-stage { from { transform: translateY(28px) scale(.965); opacity: 0; border-radius: 32px; } to { transform: none; opacity: 1; } }
@keyframes iv-sink { to { transform: translateY(140%); opacity: 0; } }
@keyframes iv-tabswap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.iv-mini { position: relative; width: 200px; height: 300px; border-radius: 30px; overflow: hidden; box-shadow: 0 0 0 6px #0d0f10, var(--shadow-2); background: var(--canvas); flex: none; }
.iv-mini-layer { position: absolute; inset: 0; padding: 18px 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.iv-mini-bar { height: 10px; border-radius: 5px; background: var(--fill-strong); }
.iv-mini-bar--t { height: 16px; width: 60%; background: var(--ink); opacity: .85; border-radius: 6px; margin-bottom: 6px; }
.iv-mini-card { height: 34px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); }
.iv-mini-opt { height: 30px; border-radius: 10px; background: var(--surface); box-shadow: 0 2px 0 var(--edge), var(--shadow-1); }
.iv-mini-btn { margin-top: auto; height: 32px; border-radius: 11px; background: var(--accent); box-shadow: 0 2px 0 var(--accent-edge); }
.iv-mini-tabs { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 34px; border-radius: 17px; background: var(--glass); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--line); }
.iv-mini-tabs::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 30%; border-radius: 13px; background: var(--accent-soft); }
@keyframes iv-breathe-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }