:root {
  color-scheme: light;
  font-synthesis: none;
  --page: #eceff5;
  --bg: #f8f9fc;
  --surface: #fefeff;
  --ink: #182033;
  --muted: #747b8d;
  --line: #e1e4ee;
  --blue: #4d62ed;
  --blue-deep: #3548c9;
  --blue-soft: #edf0ff;
  --yellow: #ffd84d;
  --yellow-soft: #fff6c9;
  --green: #45a878;
  --font-display: "Bahnschrift", "Arial Rounded MT Bold", "Microsoft YaHei", sans-serif;
  --font-body: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --depth-clearance: 10px;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 14%, rgba(77,98,237,.10), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(255,216,77,.12), transparent 24%),
    var(--page);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { margin: 0; padding: 0; color: inherit; border: 0; font: inherit; text-align: left; }
button, [role="button"] { touch-action: manipulation; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.stage { width: 100%; height: 100dvh; display: grid; place-items: center; }

.app-shell {
  position: relative;
  width: min(100%, 430px);
  height: min(100dvh, 844px);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid rgba(24,32,51,.14);
  border-radius: 30px;
  box-shadow: 0 30px 64px rgba(34,43,73,.18), inset 0 2px 0 rgba(255,255,255,.9);
  isolation: isolate;
}

.screen { position: absolute; inset: 0; opacity: 0; transform: translateX(14px); pointer-events: none; transition: opacity .18s ease, transform .22s ease; }
.screen.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.screen[hidden] { display: block; visibility: hidden; }
.screen.is-active[hidden] { visibility: visible; }

/* Local account login */
.auth-screen { position: absolute; z-index: 50; inset: 0; background: var(--bg); }
.auth-screen[hidden] { display: none; }
.auth-scroll { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: calc(22px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); scrollbar-width: none; }
.auth-scroll::-webkit-scrollbar { display: none; }
.login-hero { position: relative; min-height: 205px; margin-top: 12px; overflow: hidden; padding: 23px 21px; color: #fff; background: radial-gradient(circle at 14% 8%,rgba(255,255,255,.2),transparent 30%),linear-gradient(145deg,#667aff,var(--blue) 50%,var(--blue-deep)); border: 1px solid rgba(45,60,168,.45); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.24),0 11px 0 #3043ba,0 20px 28px rgba(53,72,201,.2); }
.login-brand { display: block; color: var(--yellow); font-family: var(--font-display); font-size: 8px; font-weight: 760; letter-spacing: .14em; }
.login-hero h1 { position: relative; z-index: 2; max-width: 78%; margin: 18px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; letter-spacing: -.035em; }
.login-hero > p { position: relative; z-index: 2; max-width: 62%; margin: 10px 0 0; color: rgba(255,255,255,.72); font-size: 8px; line-height: 1.55; }
.login-mascot { position: absolute; z-index: 1; right: 15px; bottom: 22px; width: 92px; height: 86px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 28% 20%,#fff9c6,var(--yellow) 48%,#dba716); border: 2px solid var(--ink); border-radius: 24px 30px 25px 29px; box-shadow: inset 8px 8px 13px rgba(255,255,255,.38),7px 8px 0 rgba(24,32,51,.22),12px 17px 20px rgba(24,32,51,.2); transform: rotate(-7deg); }
.login-mascot::after { content: ""; position: absolute; right: 3px; bottom: -8px; width: 22px; height: 22px; background: linear-gradient(135deg,var(--yellow),#e0aa1d); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0 0 7px 0; transform: rotate(25deg); }
.login-mascot-shadow { position: absolute; left: 5px; right: -5px; bottom: -18px; height: 12px; background: rgba(18,28,63,.3); border-radius: 50%; filter: blur(5px); }
.login-mascot > b { margin-top: 18px; font-family: var(--font-display); font-size: 23px; letter-spacing: -.06em; }
.login-mascot > em { position: absolute; right: -8px; top: -9px; width: 34px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 2px solid var(--ink); border-radius: 10px; font-family: var(--font-display); font-size: 8px; font-style: normal; box-shadow: 0 4px 0 rgba(24,32,51,.22); transform: rotate(7deg); }
.login-mascot > span { position: absolute; left: 50%; top: 22px; display: flex; gap: 6px; transform: translateX(-50%); }
.login-mascot > span i { width: 7px; height: 9px; background: var(--ink); border-radius: 50%; box-shadow: inset 0 3px 0 #fff; }
.login-card { margin-top: 24px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 21px; box-shadow: 0 8px 20px rgba(34,43,73,.07); }
.login-card header > span { color: var(--blue); font-family: var(--font-display); font-size: 7px; font-weight: 760; letter-spacing: .13em; }
.login-card h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.login-card header p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.login-field { display: block; margin-top: 14px; }
.login-field > label { display: block; margin-bottom: 6px; font-size: 8px; font-weight: 730; }
.login-input-wrap { height: 48px; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 13px; transition: border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.login-input-wrap:focus-within { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(75,94,229,.11); }
.login-input-wrap > svg,.login-password-toggle svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-input-wrap input { min-width: 0; height: 100%; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: 700 11px/1 var(--font-body); }
.login-input-wrap input::placeholder { color: #adb2bf; font-weight: 560; }
.login-password-toggle { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border-radius: 9px; }
.login-password-toggle[aria-pressed="true"] { background: var(--blue-soft); }
.login-password-toggle[aria-pressed="true"] svg { stroke: var(--blue); }
.login-error { min-height: 21px; display: flex; align-items: center; color: #c34e45; font-size: 8px; font-weight: 640; }
.login-submit { width: 100%; height: 51px; }
.demo-account-note { min-height: 48px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; color: #725d1e; background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 14px; font-size: 8px; }
.demo-account-note span { color: #8a7840; }
.demo-account-note strong { color: var(--ink); font-family: var(--font-display); font-size: 9px; }
.demo-account-note i { width: 1px; height: 15px; margin: 0 3px; background: #dfc86e; }
.login-local-note { display: grid; grid-template-columns: 17px 1fr; gap: 7px; align-items: start; margin: 11px 5px 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.login-local-note svg { width: 16px; height: 16px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.screen-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(22px + var(--safe-top)) 20px calc(82px + var(--safe-bottom));
  scrollbar-width: none;
}
.screen-scroll::-webkit-scrollbar { display: none; }

.status-bar { height: 18px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.signal { display: flex; align-items: flex-end; gap: 3px; }
.signal i { width: 3px; display: block; background: currentColor; border-radius: 2px; }
.signal i:nth-child(1) { height: 4px; }
.signal i:nth-child(2) { height: 6px; }
.signal i:nth-child(3) { height: 8px; }
.signal i:nth-child(4) { height: 10px; }

.topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.18; letter-spacing: -.04em; font-weight: 800; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.35; font-weight: 580; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 10px; font-weight: 700; text-align: center; }
.top-action { min-width: 58px; height: 30px; display: inline-grid; place-items: center; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; font-size: 9px; font-weight: 680; text-align: center; }
.growth-range { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.growth-range svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }

.pressable { cursor: pointer; transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; }
.pressable:hover { filter: brightness(.99); }
.pressable:active { transform: translateY(2px) scale(.992); }
.pressable:focus-visible, .bottom-nav button:focus-visible { outline: 3px solid rgba(77,98,237,.32); outline-offset: 2px; }

.hero { position: relative; width: 100%; display: block; overflow: hidden; padding: 18px; border-radius: 22px; }
.unit-tag { display: inline-flex; height: 22px; align-items: center; padding: 0 9px; color: var(--ink); background: var(--yellow); border-radius: 7px; font-family: var(--font-display); font-size: 8px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 4px 0 rgba(24,32,51,.18); }
.hero-title { display: block; margin-top: 11px; font-family: var(--font-display); font-size: 22px; line-height: 1.18; letter-spacing: -.04em; font-weight: 810; }
.hero-copy { display: block; margin-top: 5px; font-size: 9px; line-height: 1.4; }
.section-head { height: 42px; display: flex; align-items: center; justify-content: space-between; }
.section-head strong { font-family: var(--font-display); font-size: 14px; letter-spacing: -.02em; }
.section-head span { color: var(--muted); font-size: 9px; font-weight: 630; }
.compact-head { display: flex; align-items: center; justify-content: space-between; }
.compact-head strong { font-family: var(--font-display); font-size: 11px; }
.compact-head span { color: var(--muted); font-size: 8px; font-weight: 620; }

/* 3D language mascot */
.sprite { --size: 82px; position: relative; display: block; width: var(--size); height: calc(var(--size) * .94); filter: drop-shadow(0 9px 8px rgba(24,32,51,.14)); }
.sprite-shadow { position: absolute; left: 8%; right: 1%; bottom: -3px; height: 13px; background: rgba(24,32,51,.24); border-radius: 50%; filter: blur(4px); }
.sprite-body { position: absolute; inset: 0 5px 7px 0; background: radial-gradient(circle at 31% 23%,rgba(255,255,255,.9) 0 6%,rgba(255,248,177,.72) 7%,transparent 19%),radial-gradient(circle at 35% 28%,#fff3a0 0%,#ffe36e 25%,var(--yellow) 55%,#e9ad20 100%); border: 2px solid var(--ink); border-radius: 46% 53% 43% 48%/45% 44% 55% 54%; transform: rotate(-5deg) rotateY(-7deg); box-shadow: inset 8px 9px 15px rgba(255,255,255,.44),inset -12px -14px 20px rgba(191,129,12,.22),5px 7px 0 rgba(24,32,51,.15),10px 16px 20px rgba(24,32,51,.16); }
.sprite-body::before { content: ""; position: absolute; left: 13px; top: 9px; width: 22px; height: 10px; background: rgba(255,255,255,.58); border-radius: 50%; transform: rotate(-24deg); }
.sprite-body::after { content: ""; position: absolute; right: 1px; bottom: -8px; width: 19px; height: 19px; background: linear-gradient(135deg,var(--yellow),#e7aa1e); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0 0 6px 0; transform: rotate(28deg) skew(-8deg); }
.sprite-eye { position: absolute; z-index: 3; top: 29px; width: 9px; height: 12px; background: #fff; border-radius: 50%; box-shadow: inset 0 -5px 0 var(--ink); }
.sprite-eye.left { left: 23px; }
.sprite-eye.right { right: 27px; }
.sprite-mouth { position: absolute; z-index: 3; left: 33px; top: 49px; width: 18px; height: 9px; border-bottom: 2px solid var(--ink); border-radius: 0 0 50% 50%; }
.sprite-badge { position: absolute; z-index: 5; top: -6px; right: 0; width: 27px; height: 27px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 28%,#7f91ff,var(--blue) 48%,#2d3da8 100%); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 15px; font-weight: 700; font-style: normal; box-shadow: 0 5px 0 rgba(24,32,51,.2),0 9px 12px rgba(24,32,51,.18); transform: rotate(8deg); }

/* Today */
.home-hero { height: 166px; color: #fff; background: radial-gradient(circle at 18% 12%,rgba(255,255,255,.17),transparent 31%),linear-gradient(145deg,#6175ff,var(--blue) 42%,var(--blue-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 12px 24px rgba(53,72,201,.18); }
.home-hero .hero-copy { color: rgba(255,255,255,.74); }
.home-hero .sprite { --size: 84px; position: absolute; right: 16px; bottom: 17px; }
.hero-meta { position: absolute; left: 18px; bottom: 16px; display: flex; gap: 6px; }
.hero-meta i { padding: 5px 7px; color: var(--ink); background: #fff; border-radius: 7px; font-size: 8px; font-weight: 670; font-style: normal; box-shadow: 0 4px 0 rgba(24,32,51,.16); }

.activity-grid { height: 249px; display: grid; grid-template-columns: 1.12fr .88fr; grid-template-rows: 119px 119px; gap: 11px; perspective: 900px; }
.activity { position: relative; overflow: hidden; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 8px 16px rgba(34,43,73,.08); }
.activity.primary { grid-row: 1/3; overflow: visible; background: linear-gradient(145deg,#ffe97a,var(--yellow) 58%,#f1bf2f); border-color: rgba(196,144,17,.25); box-shadow: 4px 6px 0 #deb027,8px 12px 18px rgba(90,70,12,.14); transform: rotateY(-3deg); }
.activity.primary:active { transform: rotateY(-3deg) translateY(2px) scale(.992); }
.activity.sentence { background: var(--blue-soft); border-color: transparent; box-shadow: 5px 6px 0 #d5d9fa; }
.task-state { position: absolute; right: 12px; top: 12px; padding: 4px 6px; color: var(--blue); background: #fff; border-radius: 7px; font-size: 7px; font-weight: 720; }
.activity > strong { display: block; margin: 9px 0 3px; font-family: var(--font-display); font-size: 17px; letter-spacing: -.035em; }
.activity:not(.primary) > strong { margin-top: 1px; font-size: 14px; }
.activity p { margin: 0; color: #586074; font-size: 8px; }
.activity-count { position: absolute; left: 14px; bottom: 13px; font-family: var(--font-display); font-size: 26px; font-weight: 650; }
.activity-count small { margin-left: 3px; font-family: var(--font-body); font-size: 8px; }
.tag { display: inline-flex; height: 19px; align-items: center; padding: 0 7px; color: #fff; background: var(--ink); border-radius: 10px; font-size: 7px; font-weight: 720; }
.tag.is-progress { color: #fff; background: var(--blue-deep); }
.tag.is-complete { color: #174b37; background: #bcebd3; }
.tiles { position: absolute; right: -5px; bottom: 16px; width: 112px; height: 120px; }
.tiles i { position: absolute; width: 50px; height: 50px; display: grid; place-items: center; background: radial-gradient(circle at 32% 25%,#fff,#f8f9ff 48%,#d8ddff); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-style: normal; font-size: 22px; font-weight: 650; box-shadow: 0 6px 0 #273997,0 11px 17px rgba(35,48,118,.24); }
.tiles i:nth-child(1) { top: 0; left: 42px; transform: rotate(-12deg); }
.tiles i:nth-child(2) { top: 46px; left: 7px; transform: rotate(8deg); }
.tiles i:nth-child(3) { top: 66px; right: 1px; transform: rotate(-4deg); }
.bubble-icon { position: absolute; right: 12px; bottom: 12px; width: 45px; height: 34px; display: grid; place-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 13px; font-size: 18px; font-style: normal; box-shadow: 0 5px 0 #8b96d9; }
.memory-icon { position: absolute; right: 11px; bottom: 11px; width: 48px; height: 42px; }
.memory-icon i { position: absolute; background: radial-gradient(circle at 30% 24%,#fff,#aab4ff 28%,var(--blue)); border: 2px solid var(--blue); border-radius: 50%; box-shadow: 0 5px 8px rgba(53,72,201,.18); }
.memory-icon i:nth-child(1) { width: 28px; height: 28px; left: 0; bottom: 0; }
.memory-icon i:nth-child(2) { width: 20px; height: 20px; right: 0; top: 0; }
.memory-icon i:nth-child(3) { width: 13px; height: 13px; right: 2px; bottom: 1px; background: var(--yellow); border-color: var(--ink); }
.plan-card { width: 100%; height: 49px; margin-top: 13px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 9px; font-weight: 620; }
.plan-card b { color: var(--blue); font-family: var(--font-display); font-size: 12px; }
.week-strip { height: 98px; margin-top: 12px; padding: 12px 13px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 6px 13px rgba(34,43,73,.05); }
.week-days { height: 52px; margin-top: 7px; display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.week-days span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); background: var(--bg); border-radius: 10px; }
.week-days i { font-size: 7px; font-style: normal; }
.week-days b { width: 21px; height: 21px; display: grid; place-items: center; color: #9aa1b3; background: #fff; border: 1px solid var(--line); border-radius: 50%; font-family: var(--font-display); font-size: 8px; }
.week-days .done b { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 3px 0 #3448c4; }
.week-days .today { color: var(--ink); background: var(--yellow-soft); }
.week-days .today b { color: var(--ink); background: var(--yellow); border-color: #d7a910; box-shadow: 0 3px 0 #d4a61c; }

/* Courses */
.selector { width: 100%; height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 10px; font-weight: 650; }
.selector svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.course-grade-picker { min-height: 83px; margin-top: 10px; padding: 10px 11px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 12px rgba(34,43,73,.05); }
.course-grade-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.course-grade-picker-head strong { font-family: var(--font-display); font-size: 10px; }
.course-volume-buttons { display: grid; grid-template-columns: repeat(2,46px); gap: 4px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.course-volume-buttons button { min-width: 0; height: 28px; display: grid; place-items: center; color: var(--muted); background: transparent; border-radius: 7px; font-size: 8px; font-weight: 720; line-height: 1; text-align: center; }
.course-volume-buttons button.is-selected { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #2d3ca8; }
.course-grade-buttons { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.course-grade-buttons button { min-width: 0; height: 38px; display: flex; align-items: center; justify-content: center; gap: 2px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; text-align: center; box-shadow: 0 3px 0 #dfe2eb; }
.course-grade-buttons b { color: var(--ink); font-family: var(--font-display); font-size: 12px; line-height: 1; }
.course-grade-buttons small { font-size: 6px; line-height: 1; }
.course-grade-buttons button.is-selected { color: #fff; background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 4px 0 #2d3ca8; }
.course-grade-buttons button.is-selected b { color: #fff; }
.current-unit { height: 161px; margin-top: 12px; color: #fff; background: linear-gradient(145deg,#6377ff,var(--blue) 45%,var(--blue-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 11px 22px rgba(53,72,201,.18); }
.current-unit .hero-title { max-width: 72%; margin-top: 7px; font-size: 20px; }
.current-unit .hero-copy { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 8px; }
.unit-stats { position: absolute; left: 18px; bottom: 12px; display: flex; gap: 13px; }
.unit-stats i { font-size: 9px; font-style: normal; }
.unit-stats b { display: block; font-family: var(--font-display); font-size: 16px; }
.book-stack { position: absolute; right: 13px; bottom: 18px; width: 112px; height: 102px; perspective: 600px; }
.book-stack i { position: absolute; right: 0; width: 86px; height: 35px; border: 2px solid var(--ink); border-radius: 7px 12px 12px 7px; box-shadow: 7px 7px 0 rgba(24,32,51,.22),0 13px 16px rgba(24,32,51,.14); transform-origin: right center; }
.book-stack i::after { content: ""; position: absolute; right: 9px; top: 6px; bottom: 6px; width: 4px; background: rgba(24,32,51,.18); border-radius: 3px; }
.book-stack i:nth-child(1) { top: 5px; background: #fff; transform: rotate(-5deg) rotateY(-8deg); }
.book-stack i:nth-child(2) { top: 35px; right: 12px; background: var(--yellow); transform: rotate(5deg) rotateY(7deg); }
.book-stack i:nth-child(3) { top: 66px; right: 2px; background: #bfc7ff; transform: rotate(-2deg) rotateY(-6deg); }
.unit-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 78px; gap: 11px; }
.unit-card { position: relative; padding: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 11px rgba(34,43,73,.05); }
.unit-card.current { background: var(--yellow-soft); border-color: #eed36c; box-shadow: 0 5px 0 #ead266; }
.unit-card small { color: var(--blue); font-family: var(--font-display); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.unit-card strong { display: block; margin-top: 3px; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.unit-card > span { position: absolute; left: 11px; bottom: 9px; color: var(--muted); font-size: 8px; }
.unit-progress { position: absolute; right: 9px; bottom: 10px; width: 37px; height: 5px; overflow: hidden; background: var(--line); border-radius: 3px; }
.unit-progress i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.course-resume { height: 126px; margin-top: 12px; padding: 12px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 13px rgba(34,43,73,.06); }
.resume-row { width: 100%; height: 76px; margin-top: 9px; display: grid; grid-template-columns: 48px 1fr 46px; gap: 10px; align-items: center; background: transparent; }
.resume-play { width: 44px; height: 44px; display: grid; place-items: center; padding-left: 2px; color: #fff; background: radial-gradient(circle at 32% 25%,#8796ff,var(--blue) 52%,#3445b8); border: 2px solid var(--ink); border-radius: 14px; font-size: 13px; font-style: normal; box-shadow: 0 5px 0 #2839ad,0 9px 13px rgba(40,57,173,.18); transform: rotate(-3deg); }
.resume-play svg { width: 17px; height: 17px; fill: currentColor; stroke: none; transform: rotate(3deg); }
.resume-row > span > strong { display: block; font-size: 10px; }
.resume-row > span > small { display: block; margin: 4px 0 7px; color: var(--muted); font-size: 8px; }
.resume-progress { display: block; width: 100%; height: 5px; overflow: hidden; background: var(--line); border-radius: 4px; }
.resume-progress i { display: block; width: 60%; height: 100%; background: var(--blue); border-radius: 4px; }
.resume-row > b { height: 31px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 10px; font-size: 9px; }

.catalog-entry { width: 100%; min-height: 58px; margin-top: 10px; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 12px rgba(34,43,73,.05); }
.catalog-entry > i { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 24%,#8998ff,var(--blue) 52%,var(--blue-deep)); border: 1.5px solid var(--ink); border-radius: 12px; font-family: var(--font-display); font-size: 13px; font-style: normal; font-weight: 760; box-shadow: 0 4px 0 #2b3aa8; transform: rotate(-3deg); }
.catalog-entry span { min-width: 0; }
.catalog-entry strong,.catalog-entry small { display: block; }
.catalog-entry strong { font-size: 10px; }
.catalog-entry small { margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.35; }
.catalog-entry > b { color: var(--blue); font-size: 8px; white-space: nowrap; }

/* Review */
.review-hero { height: 171px; margin-bottom: var(--depth-clearance); background: linear-gradient(145deg,#ffe97a,var(--yellow) 56%,#f0bd28); border: 1px solid rgba(196,144,17,.25); box-shadow: 8px 9px 0 #deb027,13px 18px 23px rgba(90,70,12,.14); }
.review-hero .hero-title,.review-hero .hero-copy,.review-count { width: calc(100% - 105px); }
.review-hero .hero-title { font-size: clamp(20px,6vw,23px); }
.review-hero .hero-copy { color: #57502f; }
.review-hero .sprite { --size: 78px; position: absolute; right: 18px; bottom: 23px; }
.review-count { position: relative; left: auto; bottom: auto; margin-top: 10px; display: flex; align-items: baseline; font-family: var(--font-display); font-size: 32px; line-height: 1; font-weight: 650; }
.review-count > b { font: inherit; color: inherit; }
.review-count small { margin-left: 4px; font-family: var(--font-body); font-size: 9px; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 104px 104px; gap: 12px; }
.review-card { position: relative; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 12px rgba(34,43,73,.06); }
.review-card.blue { background: var(--blue-soft); border-color: transparent; box-shadow: 5px 6px 0 #d5d9fa; }
.review-card > strong { display: block; font-size: 13px; }
.review-card p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.review-card > b { position: absolute; left: 13px; bottom: 11px; font-family: var(--font-display); font-size: 23px; }
.review-card > b small { margin-left: 3px; font-family: var(--font-body); font-size: 8px; }
.tiny-orb { position: absolute; right: 12px; bottom: 13px; width: 34px; height: 34px; background: radial-gradient(circle at 30% 25%,#fff,#9aabff 35%,var(--blue)); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 5px 0 #273997,0 9px 13px rgba(35,48,118,.18); }
.tiny-orb.yellow { background: radial-gradient(circle at 30% 25%,#fff9b9,var(--yellow) 55%,#e5aa18); box-shadow: 0 5px 0 #bd8c12; }
.review-note { height: 49px; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 9px; }
.review-note button { height: 30px; display: inline-grid; place-items: center; padding: 0 12px; color: #fff; background: linear-gradient(145deg,#6276ff,var(--blue-deep)); border-radius: 10px; font-size: 9px; font-weight: 690; line-height: 1; text-align: center; box-shadow: 0 4px 0 #2839ad; }
.review-schedule { height: 132px; margin-top: 12px; padding: 12px 13px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 13px rgba(34,43,73,.05); }
.schedule-row { width: 100%; height: 47px; display: grid; grid-template-columns: 48px 1fr 12px; gap: 9px; align-items: center; background: transparent; border-top: 1px solid var(--line); }
.schedule-row:first-of-type { margin-top: 7px; }
.schedule-time { width: 45px; height: 23px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 8px; font-size: 8px; font-weight: 700; }
.schedule-time.later { color: #8b6912; background: var(--yellow-soft); }
.schedule-row strong { display: block; font-family: var(--font-display); font-size: 9px; letter-spacing: .01em; }
.schedule-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.schedule-row svg { width: 13px; height: 13px; fill: none; stroke: var(--blue); stroke-width: 2; }

/* Growth */
.growth-hero { height: 166px; color: #fff; background: linear-gradient(145deg,#6175ff,var(--blue) 44%,var(--blue-deep)); box-shadow: 0 12px 24px rgba(53,72,201,.18),inset 0 1px 0 rgba(255,255,255,.24); }
.growth-label { display: block; color: rgba(255,255,255,.72); font-size: 9px; }
.growth-score { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 46px; line-height: 1; font-weight: 650; }
.growth-score small { margin-left: 3px; color: rgba(255,255,255,.68); font-size: 10px; }
.wish-entry { width: 100%; min-height: 78px; margin-top: 12px; display: grid; grid-template-columns: 49px minmax(0,1fr) 59px 14px; gap: 10px; align-items: center; padding: 10px 12px; background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 17px; box-shadow: 0 5px 0 #e2c85d,0 10px 17px rgba(88,70,18,.08); }
.wish-entry-star { width: 45px; height: 45px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 30% 22%,#fff9c4,var(--yellow) 53%,#dca718); border: 1.5px solid var(--ink); border-radius: 50%; box-shadow: inset 5px 5px 8px rgba(255,255,255,.4),0 4px 0 #c59514; transform: rotate(-7deg); }
.wish-entry-star svg { width: 23px; height: 23px; fill: #fff7b5; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.wish-entry > span:nth-child(2) { min-width: 0; }
.wish-entry > span:nth-child(2) small,.wish-entry > span:nth-child(2) strong,.wish-entry > span:nth-child(2) p { display: block; }
.wish-entry > span:nth-child(2) small { color: #8a6a13; font-family: var(--font-display); font-size: 6px; font-weight: 760; letter-spacing: .11em; }
.wish-entry > span:nth-child(2) strong { margin-top: 3px; font-size: 11px; }
.wish-entry > span:nth-child(2) p { margin: 3px 0 0; overflow: hidden; color: #75652f; font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.wish-entry > b { color: var(--blue); font-family: var(--font-display); font-size: 21px; text-align: right; }
.wish-entry > b small { display: block; margin-top: 2px; color: #75652f; font-family: var(--font-body); font-size: 6px; font-weight: 650; }
.wish-entry-chevron { width: 14px; height: 14px; fill: none; stroke: var(--blue); stroke-width: 2; }

/* Wish records and offline voucher */
.wish-scroll { padding-bottom: calc(32px + var(--safe-bottom)); }
.wish-screen .unit-detail-topbar [data-wish-back] svg { transform: rotate(180deg); }
.wish-add-top { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 11px; box-shadow: 0 4px 0 #2d3ca8; }
.wish-add-top svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.wish-wallet-hero { position: relative; min-height: 157px; overflow: hidden; padding: 20px; color: #fff; background: radial-gradient(circle at 15% 8%,rgba(255,255,255,.18),transparent 28%),linear-gradient(145deg,#6478ff,var(--blue) 48%,var(--blue-deep)); border-radius: 22px; box-shadow: 0 10px 0 #3043ba,0 19px 25px rgba(53,72,201,.18); }
.wish-wallet-kicker { color: var(--yellow); font-family: var(--font-display); font-size: 7px; font-weight: 760; letter-spacing: .13em; }
.wish-wallet-hero > strong { display: block; margin-top: 14px; font-family: var(--font-display); font-size: 42px; line-height: .95; }
.wish-wallet-hero > strong small { margin-left: 5px; color: rgba(255,255,255,.72); font-family: var(--font-body); font-size: 8px; }
.wish-wallet-hero > p { max-width: 65%; margin: 10px 0 0; color: rgba(255,255,255,.72); font-size: 8px; line-height: 1.45; }
.wish-wallet-hero > p b { color: var(--yellow); }
.wish-wallet-star { position: absolute; right: 20px; bottom: 23px; width: 83px; height: 83px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 31% 23%,#fff9c6,var(--yellow) 51%,#d9a416); border: 2px solid var(--ink); border-radius: 50%; box-shadow: inset 7px 7px 12px rgba(255,255,255,.4),0 7px 0 rgba(24,32,51,.24),0 14px 19px rgba(24,32,51,.2); transform: rotate(7deg); }
.wish-wallet-star svg { width: 48px; height: 48px; fill: #fff5a7; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.wish-wallet-star i { position: absolute; bottom: 14px; font-family: var(--font-display); font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.wish-rule-note { min-height: 65px; margin-top: 20px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 15px; }
.wish-rule-note > svg { width: 34px; height: 34px; padding: 7px; color: var(--blue); background: #fff; border: 1px solid #e4cf7a; border-radius: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wish-rule-note strong,.wish-rule-note small { display: block; }
.wish-rule-note strong { font-size: 9px; }
.wish-rule-note small { margin-top: 3px; color: #75652f; font-size: 7px; line-height: 1.45; }
.wish-section-head { min-height: 43px; display: flex; align-items: end; justify-content: space-between; padding: 0 2px 8px; }
.wish-section-head strong { font-family: var(--font-display); font-size: 13px; }
.wish-section-head span,.wish-section-head button { color: var(--muted); font-size: 7px; }
.wish-section-head button { color: var(--blue); font-weight: 730; }
.wish-list,.voucher-list,.wish-ledger { display: grid; gap: 10px; }
.wish-card { min-height: 112px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.wish-card-main { display: grid; grid-template-columns: 39px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.wish-card-icon { width: 37px; height: 37px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 11px; box-shadow: 0 4px 0 #c89a17; transform: rotate(-4deg); }
.wish-card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wish-card-main strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wish-card-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; }
.wish-card-main > b { color: var(--blue); font-family: var(--font-display); font-size: 14px; white-space: nowrap; }
.wish-card-meter { height: 6px; margin-top: 12px; overflow: hidden; background: var(--line); border-radius: 5px; }
.wish-card-meter i { display: block; height: 100%; background: linear-gradient(90deg,var(--yellow),#f3bd25); border-radius: inherit; }
.wish-card-foot { min-height: 28px; margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wish-card-foot > span { color: var(--muted); font-size: 7px; }
.wish-card-actions { display: flex; gap: 6px; }
.wish-card-actions button { height: 27px; display: inline-grid; place-items: center; padding: 0 9px; color: var(--muted); background: var(--bg); border-radius: 8px; font-size: 7px; font-weight: 700; line-height: 1; text-align: center; }
.wish-card-actions button.primary { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #2d3ca8; }
.wish-card-actions button:disabled { color: #a7acb9; background: #eceef3; box-shadow: none; cursor: not-allowed; }
.wish-card.is-pending { background: var(--blue-soft); border-color: #cbd2fb; }
.wish-card.is-fulfilled { background: #ecf8f1; border-color: #b9dec9; }
.wish-empty { min-height: 195px; display: grid; justify-items: center; align-content: center; padding: 18px; background: var(--surface); border: 1px dashed #cfd4e2; border-radius: 18px; text-align: center; }
.wish-empty[hidden],.voucher-empty[hidden] { display: none; }
.wish-empty > span { width: 55px; height: 55px; display: grid; place-items: center; color: var(--blue); background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 17px; box-shadow: 0 5px 0 #dfc55f; transform: rotate(-4deg); }
.wish-empty > span svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wish-empty strong { margin-top: 15px; font-family: var(--font-display); font-size: 13px; }
.wish-empty p { max-width: 245px; margin: 6px 0 13px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.wish-empty .primary-action { width: 170px; height: 42px; font-size: 9px; }
.voucher-card { min-height: 118px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 5px 12px rgba(34,43,73,.05); }
.voucher-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.voucher-card-head > span { color: var(--blue); font-family: var(--font-display); font-size: 7px; font-weight: 760; letter-spacing: .08em; }
.voucher-status { height: 23px; display: grid; place-items: center; padding: 0 8px; color: #745f19; background: var(--yellow-soft); border-radius: 7px; font-size: 7px; }
.voucher-status.fulfilled { color: #276649; background: #e2f4ea; }
.voucher-status.cancelled { color: var(--muted); background: var(--bg); }
.voucher-card > strong { display: block; margin-top: 9px; font-size: 11px; }
.voucher-card > p { margin: 4px 0 0; color: var(--muted); font-size: 7px; }
.voucher-actions { margin-top: 11px; display: grid; grid-template-columns: .8fr 1.3fr; gap: 7px; }
.voucher-actions button { min-height: 34px; display: grid; place-items: center; background: var(--bg); border-radius: 9px; font-size: 8px; font-weight: 700; text-align: center; }
.voucher-actions button:last-child { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #2d3ca8; }
.voucher-empty { min-height: 52px; display: grid; place-items: center; padding: 10px 14px; color: var(--muted); background: var(--surface); border: 1px dashed #d5d9e4; border-radius: 14px; font-size: 7px; line-height: 1.45; text-align: center; }
.wish-ledger { padding: 3px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.wish-ledger[hidden] { display: none; }
.wish-ledger-row { min-height: 48px; display: grid; grid-template-columns: 31px 1fr auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); }
.wish-ledger-row:first-child { border-top: 0; }
.wish-ledger-row > i { width: 29px; height: 29px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 9px; font-size: 9px; font-style: normal; font-weight: 760; box-shadow: 0 3px 0 #d0a21a; }
.wish-ledger-row.is-spend > i { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #2d3ca8; }
.wish-ledger-row strong,.wish-ledger-row small { display: block; }
.wish-ledger-row strong { font-size: 8px; }
.wish-ledger-row small { margin-top: 2px; color: var(--muted); font-size: 6px; }
.wish-ledger-row > b { color: #2c7655; font-family: var(--font-display); font-size: 10px; }
.wish-ledger-row.is-spend > b { color: var(--blue); }
.growth-copy { display: block; margin-top: 6px; font-size: 10px; font-weight: 620; }
.medal { position: absolute; right: 20px; top: 29px; width: 90px; height: 90px; display: grid; place-items: center; background: radial-gradient(circle at 31% 23%,#fff8b5 0 8%,#ffe66e 28%,var(--yellow) 58%,#dda117); border: 2px solid var(--ink); border-radius: 50%; font-size: 34px; box-shadow: inset 8px 8px 14px rgba(255,255,255,.42),inset -10px -12px 17px rgba(177,113,6,.21),0 8px 0 rgba(24,32,51,.2),0 16px 22px rgba(24,32,51,.2); transform: rotate(6deg); }
.growth-meta { position: absolute; left: 18px; bottom: 16px; display: flex; gap: 7px; }
.growth-meta i { padding: 5px 8px; color: var(--ink); background: #fff; border-radius: 7px; font-size: 8px; font-weight: 670; font-style: normal; box-shadow: 0 4px 0 rgba(24,32,51,.16); }
.ability-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 86px 86px; gap: 9px; }
.ability-card { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 10px rgba(34,43,73,.05); }
.ability-card strong { font-size: 11px; }
.ability-card b { float: right; font-family: var(--font-display); font-size: 14px; }
.meter { display: block; height: 6px; margin-top: 12px; overflow: hidden; background: var(--line); border-radius: 4px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg,var(--blue),#7d8cff); border-radius: 4px; }
.ability-card:nth-child(2) .meter i,.ability-card:nth-child(4) .meter i { background: linear-gradient(90deg,#e6ad1b,var(--yellow)); }
.ability-card p { margin: 6px 0 0; color: var(--muted); font-size: 8px; }
.unit-summary { width: 100%; height: 81px; margin-top: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 6px 12px rgba(34,43,73,.06); }
.unit-summary-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 680; }
.unit-summary-head b { color: var(--blue); }
.unit-summary .meter { height: 8px; margin-top: 10px; }
.unit-summary > small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; }
.parent-entry { width: 100%; height: 49px; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; background: var(--yellow-soft); border-radius: 14px; font-size: 9px; font-weight: 650; }
.parent-entry svg { width: 15px; height: 15px; fill: none; stroke: var(--blue); stroke-width: 2; }
.week-chart { height: 100px; margin-top: 10px; padding: 11px 13px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 6px 13px rgba(34,43,73,.05); }
.bars { height: 59px; margin-top: 7px; display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; align-items: end; }
.bars span { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.bars i { width: 12px; min-height: 3px; background: #cbd1ea; border-radius: 6px 6px 3px 3px; }
.bars b { color: var(--muted); font-size: 7px; font-weight: 620; }
.bars .now i { background: linear-gradient(180deg,var(--yellow),#e4ae1d); box-shadow: 0 2px 0 #c99912; }
.bars .now b { color: var(--ink); }

/* First-run setup branch */
.setup-screen { z-index: 15; display: grid; grid-template-rows: minmax(0,1fr) auto; }
.detail-scroll.setup-scroll { min-height: 0; height: auto; padding-bottom: 24px; }
.setup-topbar { height: 64px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 10px; }
.setup-topbar > div { text-align: center; }
.setup-topbar h1 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.2; }
.setup-topbar p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.setup-topbar > b { color: var(--blue); font-family: var(--font-display); font-size: 9px; text-align: right; }
.setup-topbar [data-setup-back] svg { transform: rotate(180deg); }
.setup-progress { height: 10px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.setup-progress i { height: 5px; background: var(--line); border-radius: 4px; }
.setup-progress i.is-active { background: var(--blue); }
.setup-progress i.is-done { background: #9da9ff; }
.setup-hero { position: relative; height: 137px; overflow: hidden; margin-top: 5px; padding: 18px; color: #fff; background: radial-gradient(circle at 13% 6%,rgba(255,255,255,.2),transparent 30%),linear-gradient(145deg,#6579ff,var(--blue) 48%,var(--blue-deep)); border-radius: 21px; box-shadow: 0 11px 21px rgba(53,72,201,.18); }
.setup-hero > span:first-child { color: var(--yellow); font-family: var(--font-display); font-size: 7px; font-weight: 760; letter-spacing: .12em; }
.setup-hero > strong { display: block; width: 68%; margin-top: 13px; font-family: var(--font-display); font-size: 21px; }
.setup-hero > p { width: 62%; margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: 8px; line-height: 1.45; }
.setup-book-object { position: absolute; right: 20px; bottom: 20px; width: 74px; height: 76px; transform: rotate(7deg); filter: drop-shadow(0 10px 8px rgba(23,30,76,.24)); }
.setup-book-object i { position: absolute; inset: 4px 0 0; display: grid; place-items: center; color: var(--ink); background: linear-gradient(145deg,#ffe879,var(--yellow) 60%,#e3ac1d); border: 2px solid var(--ink); border-radius: 12px 19px 19px 12px; font-family: var(--font-display); font-size: 20px; font-style: normal; font-weight: 780; box-shadow: inset 6px 7px 10px rgba(255,255,255,.35),0 7px 0 #c99a18; }
.setup-book-object b { position: absolute; right: -6px; top: -5px; padding: 5px 6px; color: #fff; background: var(--ink); border-radius: 7px; font-family: var(--font-display); font-size: 7px; }
.setup-section-title { min-height: 35px; display: flex; align-items: end; justify-content: space-between; padding-bottom: 7px; }
.setup-section-title strong { font-family: var(--font-display); font-size: 12px; }
.setup-section-title span { color: var(--muted); font-size: 7px; }
.setup-grade-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.setup-choice { min-height: 58px; display: grid; place-items: center; align-content: center; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-align: center; box-shadow: 0 4px 0 #dfe2eb; }
.setup-choice small { color: var(--muted); font-size: 7px; }
.setup-choice strong { font-size: 10px; }
.setup-choice.is-selected { color: #fff; background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 5px 0 #2d3ca8; }
.setup-choice.is-selected small { color: rgba(255,255,255,.68); }
.setup-material-list { display: grid; gap: 7px; }
.setup-material { min-height: 53px; display: grid; grid-template-columns: 37px 1fr 22px; gap: 9px; align-items: center; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 10px rgba(34,43,73,.04); }
.setup-material.is-selected { border-color: #aeb8ff; background: var(--blue-soft); }
.setup-material:disabled { opacity: .52; cursor: not-allowed; box-shadow: none; }
.material-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 1px solid #d3a619; border-radius: 10px; font-family: var(--font-display); font-size: 10px; font-weight: 760; box-shadow: 0 3px 0 #d0a21a; }
.material-mark.blue { color: #fff; background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 3px 0 #2d3ca8; }
.material-mark.ink { color: #fff; background: var(--ink); border-color: #0d1320; box-shadow: 0 3px 0 #0d1320; }
.setup-material strong,.setup-material small { display: block; }
.setup-material strong { font-size: 9px; }
.setup-material small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.setup-material > i { color: var(--blue); font-size: 11px; font-style: normal; text-align: center; }
.setup-volume-row { min-height: 59px; margin-top: 9px; display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.setup-volume-row > strong { font-size: 9px; }
.setup-volume-row > div { display: flex; gap: 7px; }
.setup-volume-row button { min-width: 58px; height: 33px; display: grid; place-items: center; background: var(--bg); border-radius: 9px; font-size: 8px; font-weight: 680; text-align: center; }
.setup-volume-row button.is-selected { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #2d3ca8; }
.setup-privacy-note { min-height: 53px; margin-top: 9px; display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; padding: 9px 11px; background: var(--yellow-soft); border-radius: 13px; }
.setup-privacy-note span { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 8px; font-weight: 760; }
.setup-privacy-note p { margin: 0; color: #75652f; font-size: 7px; line-height: 1.45; }
.setup-actions { position: relative; z-index: 22; min-height: calc(78px + var(--safe-bottom)); display: grid; align-items: start; padding: 10px 20px calc(14px + var(--safe-bottom)); background: rgba(254,254,255,.98); border-top: 1px solid var(--line); box-shadow: 0 -8px 22px rgba(34,43,73,.05); }
.setup-actions.split { grid-template-columns: .75fr 1.25fr; gap: 10px; }
.setup-unit-intro { min-height: 78px; margin-top: 5px; padding: 13px; color: #fff; background: linear-gradient(145deg,#6175ff,var(--blue-deep)); border-radius: 16px; }
.setup-unit-intro span { color: var(--yellow); font-size: 7px; font-weight: 700; }
.setup-unit-intro strong { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 13px; }
.setup-unit-intro p { margin: 4px 0 0; color: rgba(255,255,255,.7); font-size: 7px; }
.setup-unit-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.setup-unit-choice { min-height: 82px; padding: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 11px rgba(34,43,73,.05); }
.setup-unit-choice small,.setup-unit-choice strong,.setup-unit-choice span { display: block; }
.setup-unit-choice small { color: var(--blue); font-family: var(--font-display); font-size: 6px; font-weight: 760; letter-spacing: .08em; }
.setup-unit-choice strong { overflow: hidden; margin-top: 6px; font-family: var(--font-display); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.setup-unit-choice span { margin-top: 6px; color: var(--muted); font-size: 7px; }
.setup-unit-choice.is-selected { background: var(--yellow-soft); border: 2px solid #e4bd2f; box-shadow: 0 5px 0 #d4aa24; }
.setup-unit-choice.is-selected span { color: #816514; font-weight: 700; }
.setup-recommendation { min-height: 64px; margin-top: 10px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 15px; }
.setup-recommendation strong { display: block; font-size: 9px; }
.setup-recommendation p { margin: 3px 0 0; color: #75652f; font-size: 7px; }
.setup-unit-pack { min-height: 83px; margin-top: 10px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 11px rgba(34,43,73,.05); }
.setup-unit-pack > div:last-child { margin-top: 10px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.setup-unit-pack > div:last-child span { min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--muted); background: var(--bg); border-radius: 8px; font-size: 7px; }
.setup-unit-pack > div:last-child b { color: var(--blue); font-family: var(--font-display); font-size: 12px; }
.setup-duration-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.setup-duration { min-height: 86px; display: grid; place-items: center; align-content: center; gap: 1px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 0 #dfe2eb; text-align: center; }
.setup-duration strong { color: var(--blue); font-family: var(--font-display); font-size: 23px; }
.setup-duration span { font-size: 8px; }
.setup-duration small { margin-top: 4px; color: var(--muted); font-size: 6px; }
.setup-duration.is-selected { background: var(--yellow); border-color: #d3a619; box-shadow: 0 5px 0 #d0a21a; }
.setup-duration.is-selected strong { color: var(--ink); }
.setup-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }
.setup-weekdays button { aspect-ratio: 1; display: grid; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; font-size: 8px; font-weight: 700; text-align: center; }
.setup-weekdays button.is-selected { color: #fff; background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 3px 0 #2d3ca8; }
.setup-ratio-list { display: grid; gap: 7px; }
.setup-ratio { min-height: 58px; display: grid; grid-template-columns: 1fr 91px; gap: 12px; align-items: center; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.setup-ratio.is-selected { background: var(--blue-soft); border-color: #aeb8ff; }
.setup-ratio strong,.setup-ratio small { display: block; }
.setup-ratio strong { font-size: 9px; }
.setup-ratio small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.setup-ratio > i { height: 7px; overflow: hidden; background: var(--yellow); border-radius: 5px; }
.setup-ratio > i > i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.setup-plan-preview { min-height: 62px; margin-top: 10px; display: grid; grid-template-columns: 54px 1fr auto; gap: 9px; align-items: center; padding: 10px 11px; color: #fff; background: var(--ink); border-radius: 15px; }
.setup-plan-preview > span { height: 28px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 8px; font-size: 7px; font-weight: 720; }
.setup-plan-preview strong { display: block; font-size: 9px; }
.setup-plan-preview p { margin: 3px 0 0; color: rgba(255,255,255,.64); font-size: 6px; }
.setup-plan-preview > b { color: var(--yellow); font-size: 7px; }
.setup-done-scroll { padding-top: calc(25px + var(--safe-top)); }
.setup-done-topbar { min-height: 77px; display: grid; place-items: center; align-content: center; text-align: center; }
.setup-done-topbar h1 { margin: 0; font-family: var(--font-display); font-size: 18px; }
.setup-done-topbar p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.setup-done-hero { position: relative; height: 201px; overflow: hidden; padding: 22px 20px; color: #fff; background: radial-gradient(circle at 16% 10%,rgba(255,255,255,.18),transparent 29%),linear-gradient(145deg,#6579ff,var(--blue) 47%,var(--blue-deep)); border-radius: 23px; box-shadow: 0 13px 25px rgba(53,72,201,.2); }
.setup-done-hero > span:first-child { color: var(--yellow); font-size: 7px; font-weight: 760; letter-spacing: .12em; }
.setup-done-hero > strong { display: block; margin-top: 14px; font-family: var(--font-display); font-size: 24px; }
.setup-done-hero > p { width: 60%; margin: 7px 0 0; color: rgba(255,255,255,.7); font-size: 8px; line-height: 1.45; }
.setup-done-medal { position: absolute; right: 22px; top: 45px; width: 87px; height: 87px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 31% 23%,#fff8b5 0 8%,#ffe66e 28%,var(--yellow) 58%,#dda117); border: 2px solid var(--ink); border-radius: 50%; font-size: 34px; box-shadow: inset 8px 8px 14px rgba(255,255,255,.42),0 8px 0 rgba(24,32,51,.2),0 16px 22px rgba(24,32,51,.2); }
.setup-done-hero .mini-sprite { left: 20px; bottom: 17px; }
.setup-summary-card { margin-top: 12px; padding: 6px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.setup-summary-card > div { min-height: 59px; display: grid; grid-template-columns: 35px 1fr; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.setup-summary-card > div:first-child { border-top: 0; }
.summary-icon { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 9px; font-size: 8px; font-weight: 760; box-shadow: 0 3px 0 #2d3ca8; }
.summary-icon.yellow { color: var(--ink); background: var(--yellow); box-shadow: 0 3px 0 #d0a21a; }
.summary-icon.green { background: var(--green); box-shadow: 0 3px 0 #2f805a; }
.setup-summary-card small,.setup-summary-card strong { display: block; }
.setup-summary-card small { color: var(--muted); font-size: 7px; }
.setup-summary-card strong { margin-top: 3px; font-size: 9px; }
.setup-next-today { min-height: 69px; margin-top: 11px; display: grid; grid-template-columns: 57px 1fr; gap: 10px; align-items: center; padding: 11px 13px; background: var(--yellow-soft); border-radius: 15px; }
.setup-next-today > span { height: 30px; display: grid; place-items: center; background: #fff; border-radius: 8px; font-size: 7px; font-weight: 720; box-shadow: 0 3px 0 #ead266; }
.setup-next-today strong { display: block; font-size: 9px; }
.setup-next-today p { margin: 3px 0 0; color: #75652f; font-size: 7px; }
.setup-feedback-timeline { min-height: 82px; margin-top: 11px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.setup-feedback-timeline > div:last-child { margin-top: 9px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.setup-feedback-timeline > div:last-child span { display: grid; grid-template-columns: 25px 1fr; gap: 5px; align-items: center; color: var(--muted); font-size: 7px; }
.setup-feedback-timeline i { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 8px; font-size: 7px; font-style: normal; font-weight: 760; }
.setup-feedback-timeline span:nth-child(2) i { color: var(--ink); background: var(--yellow); }
.setup-feedback-timeline span:nth-child(3) i { background: var(--green); }
.setup-feedback-timeline b { font-weight: 650; }

/* Growth detail and parent report */
.growth-detail-scroll,.parent-report-scroll { padding-bottom: calc(30px + var(--safe-bottom)); }
.growth-detail-screen .unit-detail-topbar [data-growth-back] svg,.parent-report-screen .unit-detail-topbar [data-growth-back] svg { transform: rotate(180deg); }
.growth-detail-screen .unit-more,.parent-report-screen .unit-more { width: auto; min-width: 48px; padding: 0 7px; font-size: 7px; }
.growth-detail-hero { position: relative; height: 185px; overflow: hidden; padding: 18px; color: #fff; background: radial-gradient(circle at 14% 7%,rgba(255,255,255,.18),transparent 29%),linear-gradient(145deg,#6579ff,var(--blue) 47%,var(--blue-deep)); border-radius: 22px; box-shadow: 0 12px 24px rgba(53,72,201,.18); }
.growth-detail-hero > span:first-child { color: rgba(255,255,255,.72); font-size: 8px; }
.growth-detail-hero > strong { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 43px; line-height: 1; }
.growth-detail-hero > strong small { margin-left: 2px; color: rgba(255,255,255,.6); font-size: 12px; }
.growth-detail-hero > p { width: 63%; margin: 7px 0 0; color: rgba(255,255,255,.68); font-size: 8px; line-height: 1.45; }
.growth-detail-hero > div { position: absolute; left: 18px; right: 119px; bottom: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.growth-detail-hero > div span { border-right: 1px solid rgba(255,255,255,.2); }
.growth-detail-hero > div span:last-child { border-right: 0; }
.growth-detail-hero > div b,.growth-detail-hero > div small { display: block; }
.growth-detail-hero > div b { font-family: var(--font-display); font-size: 13px; }
.growth-detail-hero > div small { margin-top: 2px; color: rgba(255,255,255,.6); font-size: 6px; }
.growth-detail-medal { position: absolute; right: 22px; top: 45px; width: 82px; height: 82px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 31% 23%,#fff8b5 0 8%,#ffe66e 28%,var(--yellow) 58%,#dda117); border: 2px solid var(--ink); border-radius: 50%; font-size: 30px; box-shadow: inset 8px 8px 14px rgba(255,255,255,.42),0 8px 0 rgba(24,32,51,.2),0 15px 20px rgba(24,32,51,.18); }
.growth-trend-list { padding: 4px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.growth-trend-list > div { min-height: 57px; display: grid; grid-template-columns: 34px 1fr 75px 24px; gap: 9px; align-items: center; border-top: 1px solid var(--line); }
.growth-trend-list > div:first-child { border-top: 0; }
.trend-label { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 9px; font-size: 8px; font-weight: 760; box-shadow: 0 3px 0 #2d3ca8; }
.trend-label.yellow { color: var(--ink); background: var(--yellow); box-shadow: 0 3px 0 #d0a21a; }
.trend-label.green { background: var(--green); box-shadow: 0 3px 0 #2f805a; }
.trend-label.ink { background: var(--ink); box-shadow: 0 3px 0 #0d1320; }
.growth-trend-list strong,.growth-trend-list small { display: block; }
.growth-trend-list strong { font-size: 9px; }
.growth-trend-list small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.growth-trend-list > div > b { color: var(--green); font-family: var(--font-display); font-size: 9px; text-align: right; }
.trend-bars { height: 31px; display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; align-items: end; }
.trend-bars i { display: block; min-height: 4px; background: #cbd1ea; border-radius: 4px 4px 2px 2px; }
.trend-bars i:last-child { background: var(--blue); }
.growth-unit-analysis { min-height: 119px; margin-top: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 14px rgba(34,43,73,.05); }
.growth-unit-analysis > div:last-child { margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.growth-unit-analysis > div:last-child span { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 18px 17px; align-items: center; padding: 7px; background: var(--bg); border-radius: 11px; }
.growth-unit-analysis > div:last-child i { grid-row: 1/3; width: 31px; height: 31px; border: 5px solid var(--blue); border-right-color: #dce0ef; border-radius: 50%; transform: rotate(24deg); }
.growth-unit-analysis > div:last-child b { font-size: 8px; }
.growth-unit-analysis > div:last-child small { color: var(--muted); font-size: 6px; }
.growth-learning-log { margin-top: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.growth-learning-log > div:last-child { margin-top: 8px; }
.growth-learning-log > div:last-child span { min-height: 47px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 21px 17px; align-items: center; border-top: 1px solid var(--line); }
.growth-learning-log > div:last-child span:first-child { border-top: 0; }
.growth-learning-log i { grid-row: 1/3; width: 26px; height: 26px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 8px; font-size: 7px; font-style: normal; }
.growth-learning-log strong { font-size: 8px; }
.growth-learning-log small { color: var(--muted); font-size: 7px; }
.parent-report-hero { position: relative; height: 192px; overflow: hidden; padding: 18px; color: var(--ink); background: radial-gradient(circle at 13% 6%,rgba(255,255,255,.75),transparent 29%),linear-gradient(145deg,#ffe779,var(--yellow) 55%,#e8b624); border: 1px solid #d7a817; border-radius: 22px; box-shadow: 0 12px 22px rgba(135,100,12,.16); }
.parent-report-hero > span:first-child { color: #725a16; font-size: 8px; }
.parent-report-hero > strong { display: block; margin-top: 9px; font-family: var(--font-display); font-size: 39px; line-height: 1; }
.parent-report-hero > strong small { font-size: 11px; }
.parent-report-hero > p { width: 63%; margin: 8px 0 0; color: #715f27; font-size: 8px; line-height: 1.45; }
.parent-report-hero > div { position: absolute; left: 18px; right: 112px; bottom: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.parent-report-hero > div span { border-right: 1px solid rgba(111,83,13,.22); }
.parent-report-hero > div span:last-child { border-right: 0; }
.parent-report-hero > div b,.parent-report-hero > div small { display: block; }
.parent-report-hero > div b { font-family: var(--font-display); font-size: 12px; }
.parent-report-hero > div small { margin-top: 2px; color: #76652f; font-size: 6px; }
.parent-report-star { position: absolute; right: 22px; top: 42px; width: 78px; height: 78px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 31% 23%,#8b99ff,var(--blue) 48%,var(--blue-deep)); border: 2px solid var(--ink); border-radius: 50%; font-size: 29px; box-shadow: inset 7px 7px 12px rgba(255,255,255,.28),0 7px 0 rgba(24,32,51,.22),0 14px 18px rgba(24,32,51,.18); }
.parent-win-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.parent-win-grid > div { min-height: 108px; padding: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 11px rgba(34,43,73,.05); }
.parent-win-grid span { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 9px; font-size: 9px; font-weight: 760; box-shadow: 0 3px 0 #2d3ca8; }
.parent-win-grid > div:last-child span { color: var(--ink); background: var(--yellow); box-shadow: 0 3px 0 #d0a21a; }
.parent-win-grid strong { display: block; margin-top: 10px; font-size: 9px; }
.parent-win-grid p { margin: 4px 0 0; color: var(--muted); font-size: 7px; line-height: 1.45; }
.parent-attention { min-height: 85px; margin-top: 10px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 12px; background: #fff1ed; border: 1px solid #f0d0c6; border-radius: 15px; }
.parent-attention > span { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: #de675c; border-radius: 9px; font-weight: 760; box-shadow: 0 3px 0 #b74c44; }
.parent-attention strong { display: block; font-size: 9px; }
.parent-attention p { margin: 5px 0 0; color: #855d56; font-size: 7px; line-height: 1.5; }
.parent-next-plan { margin-top: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.parent-next-plan > div:last-child { margin-top: 7px; }
.parent-next-plan > div:last-child > span { min-height: 57px; display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); }
.parent-next-plan > div:last-child > span:first-child { border-top: 0; }
.parent-next-plan > div:last-child i { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 8px; font-size: 7px; font-style: normal; font-weight: 760; }
.parent-next-plan strong,.parent-next-plan small { display: block; }
.parent-next-plan strong { font-size: 8px; }
.parent-next-plan small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.parent-next-plan > div:last-child b { color: var(--blue); font-size: 7px; }
.parent-action-tip { min-height: 65px; margin-top: 10px; padding: 11px 13px; background: var(--yellow-soft); border-radius: 15px; }
.parent-action-tip span { color: #7b641c; font-size: 7px; font-weight: 760; }
.parent-action-tip p { margin: 6px 0 0; color: #75652f; font-size: 8px; line-height: 1.45; }
.parent-plan-button { width: 100%; min-height: 52px; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: #fff; background: var(--blue); border-radius: 14px; font-size: 9px; font-weight: 700; box-shadow: 0 5px 0 #2d3ca8; }
.parent-plan-button svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; }
.parent-share-button { color: var(--ink); background: var(--yellow); box-shadow: 0 5px 0 #d0a21a; }
.parent-share-button svg { stroke: var(--ink); }

/* Profile settings and plan detail */
.settings-scroll,.plan-detail-scroll { padding-bottom: calc(30px + var(--safe-bottom)); }
.settings-screen .unit-detail-topbar [data-settings-back] svg,.plan-detail-screen .unit-detail-topbar [data-plan-back] svg { transform: rotate(180deg); }
.settings-profile-hero { min-height: 111px; display: grid; grid-template-columns: 63px 1fr auto; gap: 12px; align-items: center; padding: 15px; color: #fff; background: radial-gradient(circle at 12% 7%,rgba(255,255,255,.18),transparent 29%),linear-gradient(145deg,#6579ff,var(--blue) 48%,var(--blue-deep)); border-radius: 20px; box-shadow: 0 11px 21px rgba(53,72,201,.18); }
.settings-avatar { position: relative; width: 59px; height: 59px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 17px; font-weight: 760; box-shadow: inset 5px 5px 9px rgba(255,255,255,.4),0 6px 0 rgba(24,32,51,.2); }
.settings-avatar i { position: absolute; right: -3px; top: -5px; width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 50%; font-size: 9px; font-style: normal; }
.settings-profile-hero > div > span { color: var(--yellow); font-size: 7px; font-weight: 700; }
.settings-profile-hero > div strong { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 18px; }
.settings-profile-hero > div p { margin: 4px 0 0; color: rgba(255,255,255,.68); font-size: 7px; }
.settings-profile-hero > button { min-width: 55px; height: 29px; display: grid; place-items: center; color: var(--ink); background: #fff; border-radius: 9px; font-size: 7px; font-weight: 680; text-align: center; }
.settings-plan-card { width: 100%; min-height: 78px; margin-top: 11px; display: grid; grid-template-columns: 1fr auto 16px; gap: 9px; align-items: center; padding: 11px 13px; background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 15px; }
.settings-plan-card small,.settings-plan-card strong,.settings-plan-card p { display: block; }
.settings-plan-card small { color: #7b641c; font-size: 7px; }
.settings-plan-card strong { margin-top: 4px; font-size: 10px; }
.settings-plan-card p { margin: 3px 0 0; color: #75652f; font-size: 7px; }
.settings-plan-card > b { color: var(--blue); font-size: 7px; }
.settings-plan-card svg,.settings-list svg,.plan-edit-button svg { width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 2; }
.settings-section-title { min-height: 35px; display: flex; align-items: end; padding: 0 2px 7px; color: var(--muted); font-size: 8px; font-weight: 700; }
.settings-list { padding: 2px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 5px 12px rgba(34,43,73,.05); }
.settings-list > button,.settings-list > div { width: 100%; min-height: 59px; display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.settings-list > button { background: transparent; }
.settings-list > button:first-child,.settings-list > div:first-child { border-top: 0; }
.settings-row-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 9px; font-size: 8px; font-weight: 760; box-shadow: 0 3px 0 #d0a21a; }
.settings-row-icon.blue { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #2d3ca8; }
.settings-row-icon.green { color: #fff; background: var(--green); box-shadow: 0 3px 0 #2f805a; }
.settings-row-icon.danger { color: #fff; background: #de675c; box-shadow: 0 3px 0 #b74c44; }
.settings-row-icon.ink { color: #fff; background: var(--ink); box-shadow: 0 3px 0 #0d1320; }
.settings-list strong,.settings-list small { display: block; }
.settings-list strong { font-size: 9px; }
.settings-list small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.settings-data-list b { color: var(--muted); font-size: 7px; }
.settings-data-list button:first-child b { color: #c9574e; }
.settings-account-list { padding-block: 2px; }
.settings-account-list > div { border-top: 0; }
.settings-account-list small b { display: inline; color: var(--ink); font-size: inherit; }
.account-logout { min-width: 60px; height: 31px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #b64841; background: #fff1ef; border: 1px solid #f0c7c3; border-radius: 9px; font-size: 8px; font-weight: 730; text-align: center; }
.settings-list .account-logout svg { width: 14px; height: 14px; stroke: currentColor; }
.setting-switch { width: 39px; height: 23px; padding: 3px; background: #cbd0dc; border-radius: 13px; transition: background .18s ease; }
.setting-switch i { width: 17px; height: 17px; display: block; background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(24,32,51,.2); transition: transform .18s ease; }
.setting-switch.is-on { background: var(--blue); }
.setting-switch.is-on i { transform: translateX(16px); }
.settings-audio-row { min-height: 64px; }
.reminder-controls { display: grid; grid-template-columns: 51px 34px; gap: 5px; align-items: center; }
.reminder-controls input { width: 51px; height: 27px; padding: 0 3px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; font: 700 7px/1 var(--font-body); text-align: center; }
.reminder-controls button { height: 27px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--ink); border-radius: 7px; font-size: 7px; font-weight: 730; line-height: 1; text-align: center; box-shadow: 0 2px 0 #0d1320; }
.audio-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.audio-segmented button { width: 36px; height: 27px; display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border-radius: 7px; font-size: 7px; font-weight: 720; line-height: 1; text-align: center; }
.audio-segmented button.is-selected { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #2d3ca8; }
.plan-detail-hero { position: relative; height: 188px; overflow: hidden; padding: 18px; color: #fff; background: radial-gradient(circle at 14% 7%,rgba(255,255,255,.18),transparent 29%),linear-gradient(145deg,#6579ff,var(--blue) 47%,var(--blue-deep)); border-radius: 22px; box-shadow: 0 12px 24px rgba(53,72,201,.18); }
.plan-detail-hero > span:first-child { color: rgba(255,255,255,.72); font-size: 8px; }
.plan-detail-hero > strong { display: block; margin-top: 9px; font-family: var(--font-display); font-size: 41px; line-height: 1; }
.plan-detail-hero > strong small { margin-left: 2px; color: rgba(255,255,255,.62); font-size: 13px; }
.plan-detail-hero > p { width: 62%; margin: 8px 0 0; color: rgba(255,255,255,.68); font-size: 8px; line-height: 1.45; }
.plan-detail-hero > div { position: absolute; left: 18px; right: 117px; bottom: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.plan-detail-hero > div span { border-right: 1px solid rgba(255,255,255,.2); }
.plan-detail-hero > div span:last-child { border-right: 0; }
.plan-detail-hero > div b,.plan-detail-hero > div small { display: block; }
.plan-detail-hero > div b { font-family: var(--font-display); font-size: 13px; }
.plan-detail-hero > div small { margin-top: 2px; color: rgba(255,255,255,.6); font-size: 6px; }
.plan-clock-object { position: absolute; right: 22px; top: 43px; width: 80px; height: 80px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 31% 23%,#fff8b5 0 8%,#ffe66e 28%,var(--yellow) 58%,#dda117); border: 2px solid var(--ink); border-radius: 50%; box-shadow: inset 7px 7px 12px rgba(255,255,255,.4),0 7px 0 rgba(24,32,51,.2),0 14px 18px rgba(24,32,51,.18); }
.plan-clock-object i { font-family: var(--font-display); font-size: 23px; font-style: normal; font-weight: 760; }
.plan-clock-object b { position: absolute; bottom: 13px; font-size: 6px; }
.plan-task-list { padding: 2px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.plan-task-list > div { min-height: 72px; display: grid; grid-template-columns: 39px 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.plan-task-list > div:first-child { border-top: 0; }
.plan-task-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border-radius: 10px; font-family: var(--font-display); font-size: 11px; font-weight: 760; box-shadow: 0 4px 0 #d0a21a; }
.plan-task-icon.blue { color: #fff; background: var(--blue); box-shadow: 0 4px 0 #2d3ca8; }
.plan-task-icon.green { color: #fff; background: var(--green); box-shadow: 0 4px 0 #2f805a; }
.plan-task-list strong,.plan-task-list small { display: block; }
.plan-task-list strong { font-size: 9px; }
.plan-task-list small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.plan-task-list > div > span:nth-child(2) > i { height: 5px; margin-top: 7px; display: block; overflow: hidden; background: var(--line); border-radius: 4px; }
.plan-task-list > div > span:nth-child(2) > i > i { display: block; height: 100%; background: var(--blue); border-radius: inherit; transition: width .25s ease; }
.plan-task-list > div > b { color: var(--muted); font-size: 7px; }
.plan-task-list > div.is-complete > b { color: var(--green); }
.plan-week-card { min-height: 91px; margin-top: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.plan-week-card > div:last-child { margin-top: 11px; display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }
.plan-week-card > div:last-child span { aspect-ratio: 1; display: grid; place-items: center; color: var(--muted); background: var(--bg); border-radius: 9px; font-size: 7px; font-weight: 700; }
.plan-week-card > div:last-child span.is-on { color: #fff; background: var(--blue); box-shadow: 0 3px 0 #2d3ca8; }
.plan-ratio-card { min-height: 65px; margin-top: 10px; display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: center; padding: 11px 13px; background: var(--yellow-soft); border-radius: 15px; }
.plan-ratio-card > span { font-size: 8px; font-weight: 700; }
.plan-ratio-card > div > i { height: 8px; display: block; overflow: hidden; background: var(--yellow); border-radius: 5px; }
.plan-ratio-card > div > i > i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.plan-ratio-card p { margin: 6px 0 0; display: flex; justify-content: space-between; }
.plan-ratio-card p b { color: #75652f; font-size: 7px; }
.plan-edit-button { width: 100%; min-height: 51px; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: #fff; background: var(--blue); border-radius: 14px; font-size: 8px; font-weight: 700; box-shadow: 0 5px 0 #2d3ca8; }
.plan-edit-button svg { stroke: #fff; }

/* Shared secondary management pages */
.support-scroll { padding-bottom: calc(30px + var(--safe-bottom)); }
.support-status-chip { min-width: 38px; height: 27px; display: grid; place-items: center; padding: 0 7px; color: var(--blue); background: var(--blue-soft); border-radius: 9px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.other-unit-hero,.records-hero,.specialty-hero,.schedule-detail-hero,.weakness-hero { position: relative; height: 174px; overflow: hidden; padding: 18px; border-radius: 22px; box-shadow: 0 12px 24px rgba(53,72,201,.18); }
.other-unit-hero,.records-hero,.weakness-hero { color: #fff; background: radial-gradient(circle at 13% 8%,rgba(255,255,255,.18),transparent 29%),linear-gradient(145deg,#687cff,var(--blue) 49%,var(--blue-deep)); }
.other-unit-hero.is-upcoming { color: var(--ink); background: radial-gradient(circle at 13% 8%,rgba(255,255,255,.72),transparent 29%),linear-gradient(145deg,#ffe77d,var(--yellow) 55%,#e0ad18); box-shadow: 0 12px 23px rgba(135,100,12,.16); }
.other-unit-hero.is-upcoming > span:first-child,.other-unit-hero.is-upcoming > p,.other-unit-hero.is-upcoming > div span { color: #725f26; }
.other-unit-hero::after,.records-hero::after,.weakness-hero::after { content: ""; position: absolute; right: -35px; top: -46px; width: 158px; height: 158px; border: 20px solid rgba(255,255,255,.07); border-radius: 50%; }
.other-unit-hero > span:first-child,.records-hero > span:first-child,.weakness-hero > span:first-child { position: relative; z-index: 2; color: var(--yellow); font-size: 7px; font-weight: 760; letter-spacing: .08em; }
.other-unit-hero > strong { position: relative; z-index: 2; display: block; width: 67%; margin-top: 12px; font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.other-unit-hero > p { position: relative; z-index: 2; width: 62%; margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: 8px; line-height: 1.45; }
.other-unit-hero > div { position: absolute; z-index: 2; left: 18px; bottom: 16px; display: flex; align-items: baseline; gap: 7px; }
.other-unit-hero > div b { font-family: var(--font-display); font-size: 24px; }
.other-unit-hero > div span { color: rgba(255,255,255,.68); font-size: 7px; }
.other-unit-cube { position: absolute; z-index: 2; right: 22px; bottom: 24px; width: 76px; height: 70px; transform: rotate(-6deg); }
.other-unit-cube i,.other-unit-cube b { position: absolute; display: grid; place-items: center; color: var(--ink); border: 1.5px solid var(--ink); font-family: var(--font-display); font-style: normal; box-shadow: 0 6px 0 rgba(24,32,51,.24); }
.other-unit-cube i { left: 0; top: 0; width: 58px; height: 58px; background: var(--yellow); border-radius: 15px; font-size: 19px; }
.other-unit-cube b { right: 0; bottom: 0; width: 46px; height: 33px; color: #fff; background: var(--blue); border-radius: 10px; font-size: 8px; transform: rotate(12deg); }
.support-module-card,.records-list-card,.specialty-preview-card,.schedule-timeline-card,.weakness-list-card { margin-top: 13px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.support-module-list { margin-top: 8px; }
.support-module-list > div { min-height: 54px; display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.support-module-list > div:first-child { border-top: 0; }
.support-module-list i,.records-entry > i,.specialty-preview-row > i,.schedule-timeline-row > i { width: 31px; height: 31px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 1px solid #d5aa19; border-radius: 9px; font-size: 9px; font-style: normal; font-weight: 760; box-shadow: 0 3px 0 #d2a51b; }
.support-module-list strong,.support-module-list small { display: block; }
.support-module-list strong { font-size: 9px; }
.support-module-list small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.support-module-list > div > b { color: var(--green); font-size: 7px; }
.support-module-list > div > b.is-locked { color: var(--muted); }
.support-info-strip { min-height: 68px; margin-top: 11px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px 12px; color: #705d27; background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 15px; }
.support-info-strip > span { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 12px; font-family: var(--font-display); font-size: 14px; font-weight: 760; box-shadow: 0 4px 0 #2d3ca8; transform: rotate(-4deg); }
.support-info-strip strong { display: block; color: var(--ink); font-size: 9px; }
.support-info-strip p { margin: 3px 0 0; font-size: 7px; line-height: 1.45; }
.support-primary,.support-secondary { width: 100%; min-height: 48px; margin-top: 11px; border-radius: 14px; font-size: 9px; font-weight: 720; }
.support-primary { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #fff; background: var(--blue); box-shadow: 0 5px 0 #2d3ca8; }
.support-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.support-secondary { color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 0 #dfe2eb; }

.records-hero > strong,.specialty-hero > strong,.schedule-detail-hero > strong,.weakness-hero > strong { position: relative; z-index: 2; display: block; margin-top: 9px; font-family: var(--font-display); font-size: 42px; line-height: 1; }
.records-hero > strong small,.specialty-hero > strong small,.schedule-detail-hero > strong small,.weakness-hero > strong small { margin-left: 3px; font-size: 10px; }
.records-hero > p,.specialty-hero > p,.schedule-detail-hero > p,.weakness-hero > p { position: relative; z-index: 2; width: 58%; margin: 7px 0 0; color: rgba(255,255,255,.72); font-size: 8px; line-height: 1.45; }
.records-hero > div { position: absolute; z-index: 2; left: 18px; right: 126px; bottom: 17px; height: 40px; display: flex; align-items: end; gap: 6px; }
.records-hero > div i { flex: 1; min-height: 6px; background: rgba(255,255,255,.26); border-radius: 4px 4px 2px 2px; }
.records-hero > div i:nth-child(6) { background: var(--yellow); }
.records-orb,.specialty-orb { position: absolute; z-index: 2; right: 24px; bottom: 23px; width: 76px; height: 76px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 31% 23%,#fff8bd,var(--yellow) 50%,#dba616); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 29px; font-weight: 760; box-shadow: inset 7px 7px 12px rgba(255,255,255,.34),0 7px 0 rgba(24,32,51,.23),0 14px 18px rgba(24,32,51,.18); transform: rotate(6deg); }
.records-entry,.specialty-preview-row,.schedule-timeline-row { min-height: 55px; display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.records-entry:first-child,.specialty-preview-row:first-child,.schedule-timeline-row:first-child { margin-top: 8px; }
.records-entry strong,.specialty-preview-row strong,.schedule-timeline-row strong { display: block; font-size: 9px; }
.records-entry small,.specialty-preview-row small,.schedule-timeline-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.records-entry > b,.specialty-preview-row > b,.schedule-timeline-row > b { color: var(--green); font-size: 7px; text-align: right; }
.records-entry.is-empty { grid-template-columns: 35px 1fr; }

.specialty-hero,.schedule-detail-hero { color: var(--ink); background: radial-gradient(circle at 14% 8%,rgba(255,255,255,.72),transparent 29%),linear-gradient(145deg,#ffe77d,var(--yellow) 55%,#e0ad18); box-shadow: 0 12px 23px rgba(135,100,12,.16); }
.specialty-hero > span:first-child,.schedule-detail-hero > span:first-child { position: relative; z-index: 2; color: #735d1f; font-size: 7px; font-weight: 760; letter-spacing: .08em; }
.specialty-hero > p,.schedule-detail-hero > p { color: #725f26; }
.specialty-orb { color: #fff; background: radial-gradient(circle at 31% 23%,#8998ff,var(--blue) 46%,var(--blue-deep)); }
.schedule-calendar { position: absolute; z-index: 2; right: 25px; bottom: 26px; width: 77px; height: 72px; display: grid; grid-template-rows: 1fr 21px; place-items: center; overflow: hidden; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 7px 0 rgba(24,32,51,.22),0 14px 18px rgba(24,32,51,.15); transform: rotate(5deg); }
.schedule-calendar i { font-family: var(--font-display); font-size: 25px; font-style: normal; }
.schedule-calendar b { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; background: var(--blue); font-size: 8px; }
.schedule-timeline-row > i { border-radius: 50%; }

.weakness-object { position: absolute; z-index: 2; right: 22px; bottom: 23px; width: 83px; height: 73px; }
.weakness-object i,.weakness-object b { position: absolute; display: grid; place-items: center; border: 1.5px solid var(--ink); font-family: var(--font-display); font-style: normal; box-shadow: 0 6px 0 rgba(24,32,51,.23); }
.weakness-object i { left: 0; bottom: 0; width: 62px; height: 62px; color: var(--ink); background: var(--yellow); border-radius: 50%; font-size: 27px; }
.weakness-object b { right: 0; top: 0; width: 49px; height: 37px; color: #fff; background: var(--blue); border-radius: 11px; font-size: 10px; transform: rotate(8deg); }
.weakness-item { width: 100%; min-height: 73px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; background: transparent; border-top: 1px solid var(--line); text-align: left; }
.weakness-item:first-of-type { margin-top: 7px; }
.weakness-item > i { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 10px; font-size: 10px; font-style: normal; font-weight: 760; box-shadow: 0 4px 0 #2d3ca8; }
.weakness-item strong,.weakness-item small,.weakness-item em { display: block; }
.weakness-item strong { font-size: 9px; }
.weakness-item small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.weakness-item em { width: 100%; height: 5px; margin-top: 7px; display: block; overflow: hidden; background: var(--line); border-radius: 4px; }
.weakness-item em em { height: 100%; margin: 0; background: linear-gradient(90deg,var(--yellow),#e7b720); }
.weakness-item > b { color: #c6544c; font-size: 7px; }
.support-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.support-action-grid .support-primary,.support-action-grid .support-secondary { min-width: 0; }

/* Source-backed vocabulary catalog */
.word-catalog-scroll { padding-bottom: calc(36px + var(--safe-bottom)); }
.word-catalog-hero { position: relative; min-height: 118px; padding: 16px; color: #fff; background: radial-gradient(circle at 14% 9%,rgba(255,255,255,.18),transparent 30%),linear-gradient(145deg,#6478ff,var(--blue) 48%,var(--blue-deep)); border-radius: 20px; box-shadow: 0 10px 21px rgba(53,72,201,.17); }
.word-catalog-hero > span { color: rgba(255,255,255,.7); font-size: 7px; font-weight: 700; letter-spacing: .08em; }
.word-catalog-hero > strong { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 25px; line-height: 1; }
.word-catalog-hero > p { max-width: 72%; margin: 7px 0 0; color: rgba(255,255,255,.78); font-size: 8px; line-height: 1.45; }
.word-catalog-hero > b { position: absolute; right: 16px; top: 41px; color: var(--yellow); font-family: var(--font-display); font-size: 36px; line-height: 1; text-align: right; }
.word-catalog-hero > b small { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-family: var(--font-body); font-size: 7px; }
.catalog-filter-card { margin-top: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 5px 12px rgba(34,43,73,.05); }
.catalog-filter-label { display: block; margin: 0 0 7px; color: var(--muted); font-size: 7px; font-weight: 700; }
.catalog-grade-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; }
.catalog-grade-grid button,.catalog-semester-grid button,.catalog-unit-filter button { min-width: 0; display: grid; place-items: center; color: var(--muted); background: var(--bg); border: 1px solid transparent; font-size: 8px; font-weight: 700; text-align: center; }
.catalog-grade-grid button { height: 32px; border-radius: 9px; }
.catalog-semester-grid { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.catalog-semester-grid button { height: 32px; border-radius: 9px; }
.catalog-grade-grid button.is-selected,.catalog-semester-grid button.is-selected,.catalog-unit-filter button.is-selected { color: #fff; background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 3px 0 #2d3ca8; }
.catalog-unit-filter { margin-top: 9px; display: flex; gap: 6px; overflow-x: auto; padding: 1px 0 5px; scrollbar-width: none; }
.catalog-unit-filter::-webkit-scrollbar { display: none; }
.catalog-unit-filter button { flex: 0 0 auto; height: 29px; padding: 0 10px; border-radius: 9px; }
.catalog-search { min-height: 43px; margin-top: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 0 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; }
.catalog-search input { min-width: 0; height: 40px; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: 9px var(--font-body); }
.catalog-search input::placeholder { color: #9aa1b2; }
.catalog-search span { color: var(--muted); font-size: 7px; }
.catalog-result-head { min-height: 43px; display: flex; align-items: center; justify-content: space-between; }
.catalog-result-head strong { font-family: var(--font-display); font-size: 13px; }
.catalog-result-head span { color: var(--muted); font-size: 8px; }
.catalog-word-list { display: grid; gap: 8px; }
.catalog-word-row { width: 100%; min-height: 68px; display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 10px; align-items: center; padding: 10px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 10px rgba(34,43,73,.045); }
.catalog-word-row > span { min-width: 0; }
.catalog-word-row strong { display: block; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 14px; line-height: 1.2; }
.catalog-word-row small { display: block; margin-top: 3px; color: var(--blue); font-size: 8px; }
.catalog-word-row small.is-missing { color: #9a6e14; }
.catalog-word-row p { margin: 4px 0 0; color: #50586c; font-size: 9px; line-height: 1.35; }
.catalog-word-row em { display: inline-block; margin-left: 6px; color: var(--muted); font-size: 7px; font-style: normal; font-weight: 600; }
.catalog-audio-button { width: 39px; height: 39px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border: 1px solid #cbd2fb; border-radius: 12px; }
.catalog-audio-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.catalog-empty { padding: 28px 16px; color: var(--muted); background: var(--surface); border: 1px dashed #cad0df; border-radius: 14px; font-size: 9px; line-height: 1.5; text-align: center; }

/* Unit detail branch */
.detail-screen { position: absolute; z-index: 14; inset: 0; background: var(--bg); }
.detail-screen[hidden] { display: none; }
.detail-scroll { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: calc(22px + var(--safe-top)) 20px calc(28px + var(--safe-bottom)); scrollbar-width: none; }
.detail-scroll::-webkit-scrollbar { display: none; }
.unit-detail-topbar { height: 64px; display: grid; grid-template-columns: 64px minmax(0,1fr) 64px; align-items: center; gap: 6px; }
.unit-detail-topbar > :first-child { justify-self: start; }
.unit-detail-topbar > :last-child { justify-self: end; }
.unit-detail-topbar .round-action svg { transform: rotate(180deg); }
.unit-detail-topbar > div { text-align: center; }
.unit-detail-topbar > div > span { color: var(--blue); font-family: var(--font-display); font-size: 7px; font-weight: 760; letter-spacing: .12em; }
.unit-detail-topbar h1 { margin: 2px 0 0; font-family: var(--font-display); font-size: 15px; line-height: 1.2; letter-spacing: -.025em; }
.unit-more { width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-family: var(--font-display); font-size: 13px; font-weight: 760; text-align: center; box-shadow: 0 4px 10px rgba(34,43,73,.06); }
.unit-detail-hero { position: relative; height: 177px; overflow: hidden; padding: 17px; color: #fff; background: radial-gradient(circle at 11% 4%,rgba(255,255,255,.2),transparent 31%),linear-gradient(145deg,#6175ff,var(--blue) 46%,var(--blue-deep)); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 12px 24px rgba(53,72,201,.18); }
.unit-detail-hero::after { content: ""; position: absolute; right: -24px; top: -43px; width: 145px; height: 145px; border: 20px solid rgba(255,255,255,.07); border-radius: 50%; }
.unit-detail-hero h2 { position: relative; z-index: 2; margin: 11px 0 0; font-family: var(--font-display); font-size: 22px; letter-spacing: -.04em; }
.unit-detail-hero > p { position: relative; z-index: 2; width: 64%; margin: 4px 0 0; color: rgba(255,255,255,.74); font-size: 8px; line-height: 1.45; }
.unit-overview { position: absolute; z-index: 3; left: 17px; right: 116px; bottom: 15px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.unit-overview span { min-width: 0; padding-right: 7px; border-right: 1px solid rgba(255,255,255,.22); }
.unit-overview span:last-child { border-right: 0; }
.unit-overview b,.unit-overview small { display: block; }
.unit-overview b { font-family: var(--font-display); font-size: 14px; }
.unit-overview small { margin-top: 1px; color: rgba(255,255,255,.65); font-size: 7px; }
.unit-cube { position: absolute; z-index: 2; right: 20px; bottom: 24px; width: 76px; height: 72px; transform: rotate(-7deg) skewY(-2deg); filter: drop-shadow(0 11px 8px rgba(21,27,65,.24)); }
.unit-cube i { position: absolute; inset: 0 0 8px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 27% 20%,#fff9c5 0 9%,transparent 10%),linear-gradient(145deg,#ffe879,var(--yellow) 62%,#e5ad20); border: 2px solid var(--ink); border-radius: 19px; font-family: var(--font-display); font-size: 25px; font-style: normal; font-weight: 780; box-shadow: inset 7px 8px 10px rgba(255,255,255,.35),inset -8px -9px 12px rgba(182,123,10,.18),0 8px 0 #c99a18; }
.unit-cube b { position: absolute; right: -7px; top: -8px; padding: 5px 6px; color: #fff; background: var(--ink); border-radius: 8px; font-family: var(--font-display); font-size: 8px; transform: rotate(9deg); }
.unit-goal { min-height: 61px; margin-top: 11px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 9px 11px; background: var(--yellow-soft); border: 1px solid #f1d665; border-radius: 15px; }
.goal-orb { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 32% 25%,#fff3a4,var(--yellow) 28%,#dda216 72%); border: 1.5px solid var(--ink); border-radius: 50%; font-size: 14px; text-shadow: 0 1px 0 #ad7a0b; box-shadow: 0 4px 0 #d1a122; }
.unit-goal strong { display: block; font-size: 10px; }
.unit-goal p { margin: 3px 0 0; color: #686143; font-size: 8px; }
.unit-goal > span:last-child { color: #7c6b27; font-size: 8px; font-weight: 680; }
.unit-section-head { height: 38px; }
.unit-learning-list { display: grid; gap: 12px; }
.unit-learning-card { position: relative; min-height: 82px; display: grid; grid-template-columns: 52px minmax(0,1fr) 46px; gap: 11px; align-items: center; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.unit-learning-card.word { border-color: #cfd5ff; box-shadow: 5px 6px 0 #dfe3ff,0 9px 16px rgba(34,43,73,.06); }
.unit-learning-card.is-unavailable { color: #656d7f; background: #f4f5f9; border-style: dashed; box-shadow: none; }
.unit-learning-card.is-unavailable .module-object { filter: grayscale(.7); opacity: .68; }
.module-object { position: relative; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; }
.module-object.letters { background: var(--blue-soft); }
.module-object.letters i { position: absolute; width: 31px; height: 31px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 9px; font-family: var(--font-display); font-size: 12px; font-style: normal; font-weight: 760; box-shadow: 0 4px 0 #d4a41c; }
.module-object.letters i:first-child { left: 5px; top: 7px; transform: rotate(-8deg); }
.module-object.letters i:last-child { right: 3px; bottom: 4px; color: #fff; background: var(--blue); box-shadow: 0 4px 0 #2d3ca8; transform: rotate(7deg); }
.module-object.quote { color: var(--ink); background: linear-gradient(145deg,#eef0ff,#d9defe); border: 1.5px solid var(--ink); border-radius: 15px 15px 15px 7px; font-family: Georgia,serif; font-size: 30px; box-shadow: 0 5px 0 #c8cff4; }
.module-object.quiz { color: #fff; background: radial-gradient(circle at 30% 22%,#8b9aff,var(--blue) 48%,var(--blue-deep)); border: 1.5px solid var(--ink); border-radius: 50%; font-size: 20px; font-weight: 760; box-shadow: 0 5px 0 #2838a1; }
.module-copy { min-width: 0; }
.module-copy > small { display: block; color: var(--blue); font-family: var(--font-display); font-size: 6px; font-weight: 760; letter-spacing: .08em; }
.module-copy > strong { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 13px; }
.module-copy > p { overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 7px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.module-meter { display: block; height: 4px; margin-top: 7px; overflow: hidden; background: var(--line); border-radius: 3px; }
.module-meter i { display: block; height: 100%; background: linear-gradient(90deg,var(--blue),#8794ff); border-radius: inherit; transition: width .25s ease; }
.sentence-module .module-meter i { background: linear-gradient(90deg,#e5ac18,var(--yellow)); }
.module-status { text-align: right; }
.module-status b,.module-status small { display: block; }
.module-status b { font-family: var(--font-display); font-size: 12px; }
.module-status small { margin-top: 4px; color: var(--blue); font-size: 7px; font-weight: 680; }
.quiz-module .module-status small { color: var(--muted); }
.unit-word-preview { margin-top: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 14px rgba(34,43,73,.05); }
.unit-word-preview > div:last-child { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.unit-word-preview > div:last-child span { padding: 6px 8px; color: #44506c; background: var(--blue-soft); border-radius: 8px; font-family: var(--font-display); font-size: 8px; font-weight: 620; }
.unit-word-preview > div:last-child span:nth-child(3n+2) { background: var(--yellow-soft); }
.unit-weakness { width: 100%; min-height: 58px; margin-top: 10px; display: grid; grid-template-columns: 32px 1fr 18px; gap: 9px; align-items: center; padding: 10px 12px; background: #fff4ef; border: 1px solid #f0d6cc; border-radius: 15px; }
.unit-weakness > span { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: #df695e; border-radius: 10px; font-family: var(--font-display); font-weight: 760; box-shadow: 0 4px 0 #b84d45; }
.unit-weakness strong { display: block; font-size: 9px; }
.unit-weakness p { margin: 3px 0 0; color: #88655e; font-size: 7px; }
.unit-weakness svg { width: 16px; height: 16px; fill: none; stroke: #b45d54; stroke-width: 2; }

/* Word-learning branch */
.flow-screen { position: absolute; z-index: 16; inset: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; background: var(--bg); }
.flow-screen[hidden] { display: none; }
.flow-scroll { width: 100%; min-height: 0; height: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: calc(22px + var(--safe-top)) 20px 24px; scrollbar-width: none; }
.flow-scroll::-webkit-scrollbar { display: none; }
.flow-topbar { height: 64px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 10px; }
.flow-topbar > div { text-align: center; }
.flow-topbar h1 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.2; letter-spacing: -.025em; }
.flow-topbar p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.flow-topbar > b { color: var(--blue); font-family: var(--font-display); font-size: 10px; text-align: right; }
.round-action { width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 10px rgba(34,43,73,.06); }
.round-action svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
[data-flow-back] svg { transform: rotate(180deg); }
.flow-progress { height: 7px; overflow: hidden; background: var(--line); border-radius: 5px; }
.flow-progress i { display: block; height: 100%; background: linear-gradient(90deg,var(--blue),#7585ff); border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); transition: width .24s ease; }
.trainer-label { height: 42px; display: flex; align-items: center; justify-content: space-between; }
.trainer-label span { color: var(--muted); font-size: 9px; }
.trainer-label b { min-width: 42px; height: 22px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 7px; font-size: 8px; }
.flow-actions { position: relative; z-index: 3; min-height: calc(78px + var(--safe-bottom)); display: grid; gap: 10px; align-items: start; padding: 10px 20px calc(14px + var(--safe-bottom)); background: rgba(254,254,255,.98); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(34,43,73,.06); }
.flow-actions.single { grid-template-columns: 1fr; }
.flow-actions.result-actions { grid-template-columns: .8fr 1.2fr; }
.primary-action,.secondary-action { height: 54px; display: grid; place-items: center; border-radius: 15px; font-size: 12px; font-weight: 760; text-align: center; }
.primary-action { color: #fff; background: linear-gradient(145deg,#6276ff,var(--blue-deep)); box-shadow: 0 6px 0 #2839ad,0 11px 17px rgba(40,57,173,.20); }
.secondary-action { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.primary-action:disabled { color: #a8aebc; background: #e7e9f0; box-shadow: 0 4px 0 #cfd3df; cursor: not-allowed; }
.primary-action:disabled:active { transform: none; }

.word-stage { position: relative; height: 252px; overflow: hidden; color: #fff; background: radial-gradient(circle at 16% 10%,rgba(255,255,255,.19),transparent 28%),linear-gradient(145deg,#6377ff,var(--blue) 45%,var(--blue-deep)); border-radius: 23px; box-shadow: 0 13px 25px rgba(53,72,201,.20),inset 0 1px 0 rgba(255,255,255,.26); }
.sound-button { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--ink); border-radius: 13px; box-shadow: 0 5px 0 rgba(24,32,51,.22),0 9px 13px rgba(24,32,51,.16); }
.sound-button svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-button::after { content: attr(data-accent-label); position: absolute; right: -7px; top: -7px; min-width: 20px; height: 17px; display: grid; place-items: center; padding: 0 3px; color: #fff; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 8px; font-family: var(--font-display); font-size: 6px; font-weight: 760; line-height: 1; box-shadow: 0 2px 0 rgba(24,32,51,.2); }
.sound-button.is-loading { filter: saturate(.55); }
.sound-button.is-playing svg { animation: audio-pulse .82s ease-in-out infinite; }
@keyframes audio-pulse { 50% { transform: scale(.82); opacity: .64; } }
.word-stage .sound-button { position: absolute; z-index: 3; right: 16px; top: 16px; }
.word-object { position: absolute; left: 50%; top: 34px; width: 94px; height: 94px; transform: translateX(-50%) rotate(-5deg); perspective: 500px; }
.word-object i { width: 88px; height: 88px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 30% 22%,#fff8bd,var(--yellow) 55%,#e5a91d); border: 2px solid var(--ink); border-radius: 23px; font-family: var(--font-display); font-size: 46px; font-weight: 720; font-style: normal; box-shadow: inset 8px 8px 13px rgba(255,255,255,.38),inset -10px -12px 17px rgba(177,113,6,.18),8px 9px 0 #293bac,14px 18px 24px rgba(24,32,51,.24); }
.word-stage > strong { position: absolute; left: 0; right: 0; top: 147px; font-family: var(--font-display); font-size: 31px; line-height: 1; letter-spacing: -.035em; text-align: center; }
.word-stage .phonetic { position: absolute; left: 0; right: 0; top: 184px; color: rgba(255,255,255,.72); font-family: var(--font-display); font-size: 11px; text-align: center; }
.meaning-chip { position: absolute; left: 50%; bottom: 15px; min-width: 65px; height: 27px; display: grid; place-items: center; color: var(--ink); background: #fff; border-radius: 8px; font-size: 10px; font-weight: 720; box-shadow: 0 4px 0 rgba(24,32,51,.17); transform: translateX(-50%); }
.example-card { height: 105px; margin-top: 12px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.example-card p { margin: 13px 0 3px; font-family: var(--font-display); font-size: 14px; line-height: 1.3; }
.example-card mark { padding: 1px 3px; background: var(--yellow-soft); color: var(--blue-deep); border-radius: 4px; }
.example-card > span { color: var(--muted); font-size: 8px; }
.word-clue { min-height: 82px; margin-top: 12px; display: grid; grid-template-columns: 112px 1fr; gap: 13px; align-items: center; padding: 12px 13px; background: var(--yellow-soft); border: 1px solid #f0d96f; border-radius: 16px; }
.clue-parts { display: flex; align-items: center; gap: 5px; }
.clue-parts i { height: 34px; display: grid; place-items: center; padding: 0 8px; background: #fff; border: 1px solid #e7d16f; border-radius: 9px; font-family: var(--font-display); font-size: 10px; font-style: normal; box-shadow: 0 4px 0 #ead266; }
.clue-parts b { color: #967314; font-size: 12px; }
.word-clue strong { font-size: 10px; }
.word-clue p { margin: 4px 0 0; color: #74632d; font-size: 8px; line-height: 1.4; }
.learning-note { min-height: 57px; margin-top: 12px; display: grid; grid-template-columns: 77px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px dashed #cfd4e3; border-radius: 14px; }
.learning-note span { color: var(--blue); font-size: 9px; font-weight: 720; }
.learning-note p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }

.question-stage { position: relative; height: 177px; overflow: hidden; padding: 22px 18px; border-radius: 21px; }
.yellow-stage { background: linear-gradient(145deg,#ffe97a,var(--yellow) 58%,#f1bf2f); border: 1px solid rgba(196,144,17,.25); box-shadow: 8px 9px 0 #deb027,13px 18px 23px rgba(90,70,12,.14); }
.question-stage .sound-button { position: absolute; right: 18px; top: 18px; }
.question-stage > span { display: block; font-family: var(--font-display); font-size: 38px; line-height: 1; letter-spacing: -.04em; }
.question-stage > small { display: block; margin-top: 6px; color: #655a31; font-family: var(--font-display); font-size: 10px; }
.question-stage > strong { position: absolute; left: 18px; bottom: 20px; font-size: 13px; }
.choice-grid { margin-top: calc(13px + var(--depth-clearance)); display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 82px; gap: 10px; }
.choice-option { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 0 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 13px rgba(34,43,73,.06); }
.choice-option i { width: 31px; height: 31px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 10px; font-family: var(--font-display); font-size: 10px; font-style: normal; font-weight: 700; }
.choice-option span { font-size: 13px; font-weight: 680; }
.choice-option.is-selected { background: var(--blue-soft); border: 2px solid var(--blue); box-shadow: 0 5px 0 #cad0fb; }
.choice-option.is-correct { background: #eaf8f1; border: 2px solid var(--green); box-shadow: 0 5px 0 #bbe3ce; }
.choice-option.is-wrong { background: #fff0ef; border: 2px solid #db6158; box-shadow: 0 5px 0 #efc5c1; }
.answer-feedback { min-height: 74px; margin-top: 13px; display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; padding: 11px 13px; background: #eaf8f1; border: 1px solid #b9dfcc; border-radius: 15px; }
.answer-feedback[hidden] { display: none; }
.answer-feedback.is-wrong { background: #fff0ef; border-color: #efc1bd; }
.feedback-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--green); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 4px 0 #2f7f5b; }
.is-wrong .feedback-icon { background: #db6158; box-shadow: 0 4px 0 #a9423b; }
.feedback-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.answer-feedback strong { font-size: 11px; }
.answer-feedback p { margin: 4px 0 0; color: #557062; font-size: 8px; line-height: 1.4; }
.answer-feedback.is-wrong p { color: #82534f; }

.spelling-prompt { position: relative; height: 190px; overflow: hidden; padding: 21px 18px; color: #fff; background: radial-gradient(circle at 17% 12%,rgba(255,255,255,.18),transparent 29%),linear-gradient(145deg,#6377ff,var(--blue) 45%,var(--blue-deep)); border-radius: 22px; box-shadow: 0 13px 25px rgba(53,72,201,.20),inset 0 1px 0 rgba(255,255,255,.26); }
.spelling-prompt .sound-button { position: absolute; right: 18px; top: 18px; }
.spelling-prompt > span { color: rgba(255,255,255,.7); font-size: 9px; }
.spelling-prompt > strong { display: block; margin-top: 12px; font-size: 30px; letter-spacing: -.03em; }
.spelling-prompt > small { display: block; margin-top: 7px; color: rgba(255,255,255,.72); font-size: 9px; }
.prompt-orb { position: absolute; right: 20px; bottom: 18px; width: 76px; height: 76px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 31% 24%,#fff8bd,var(--yellow) 55%,#dda117); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 31px; font-weight: 720; font-style: normal; box-shadow: inset 7px 7px 12px rgba(255,255,255,.4),0 7px 0 rgba(24,32,51,.22),0 13px 18px rgba(24,32,51,.2); transform: rotate(7deg); }
.spelling-entry { position: relative; height: 105px; margin-top: 14px; display: block; padding: 13px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.spelling-entry > span { display: block; color: var(--muted); font-size: 8px; }
.spelling-entry input { width: 100%; height: 52px; padding: 5px 0 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-family: var(--font-display); font-size: 26px; font-weight: 720; letter-spacing: .08em; }
.spelling-entry input::placeholder { color: #b3b8c6; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.letter-line { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 3px; background: repeating-linear-gradient(90deg,var(--blue) 0 30px,transparent 30px 36px); border-radius: 3px; opacity: .7; }
.spelling-entry:focus-within { border-color: #aeb8ff; box-shadow: 0 0 0 3px rgba(77,98,237,.10),0 6px 14px rgba(34,43,73,.06); }
.hint-row { height: 35px; display: flex; align-items: center; gap: 7px; }
.hint-row span { padding: 5px 8px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 8px; }

.result-scroll { padding-bottom: calc(112px + var(--safe-bottom)); }
.result-topbar { grid-template-columns: 38px 1fr 38px; }
.result-hero { position: relative; height: 196px; overflow: hidden; padding: 22px 20px; color: #fff; background: radial-gradient(circle at 17% 13%,rgba(255,255,255,.18),transparent 28%),linear-gradient(145deg,#6377ff,var(--blue) 45%,var(--blue-deep)); border-radius: 23px; box-shadow: 0 13px 25px rgba(53,72,201,.20),inset 0 1px 0 rgba(255,255,255,.26); }
.result-kicker { color: rgba(255,255,255,.72); font-size: 9px; }
.result-hero > strong { display: block; margin-top: 11px; font-family: var(--font-display); font-size: 25px; letter-spacing: -.035em; }
.result-hero > p { margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: 9px; }
.result-medal { position: absolute; right: 22px; top: 38px; width: 88px; height: 88px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 31% 23%,#fff8b5 0 8%,#ffe66e 28%,var(--yellow) 58%,#dda117); border: 2px solid var(--ink); border-radius: 50%; font-size: 34px; box-shadow: inset 8px 8px 14px rgba(255,255,255,.42),inset -10px -12px 17px rgba(177,113,6,.21),0 8px 0 rgba(24,32,51,.2),0 16px 22px rgba(24,32,51,.2); transform: rotate(6deg); }
.mini-sprite { position: absolute; left: 20px; bottom: 16px; width: 74px; height: 45px; }
.mini-sprite > i { position: absolute; inset: 0 7px 0 0; background: radial-gradient(circle at 31% 23%,#fff3a0 0 8%,var(--yellow) 56%,#e9ad20); border: 2px solid var(--ink); border-radius: 48% 52% 42% 49%; box-shadow: inset 6px 6px 10px rgba(255,255,255,.4),5px 6px 0 rgba(24,32,51,.18); }
.mini-sprite > i::before { content: ""; position: absolute; left: 18px; top: 17px; width: 6px; height: 8px; background: #fff; border-radius: 50%; box-shadow: inset 0 -4px 0 var(--ink),18px 0 0 #fff,18px -4px 0 var(--ink); }
.mini-sprite > i::after { content: ""; position: absolute; left: 27px; top: 29px; width: 14px; height: 7px; border-bottom: 2px solid var(--ink); border-radius: 0 0 50% 50%; }
.mini-sprite > b { position: absolute; right: 0; top: -6px; width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 12px; }
.result-stats { height: 84px; margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.result-stats div { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 11px rgba(34,43,73,.05); }
.result-stats strong { color: var(--blue); font-family: var(--font-display); font-size: 24px; }
.result-stats span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.word-recap { margin-top: 12px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.recap-row { height: 54px; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.recap-row:first-of-type { margin-top: 8px; }
.recap-row > i { width: 31px; height: 31px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 1px solid #d9ae1b; border-radius: 9px; font-family: var(--font-display); font-size: 12px; font-style: normal; font-weight: 720; box-shadow: 0 3px 0 #d2a51b; }
.recap-row span strong { display: block; font-family: var(--font-display); font-size: 10px; }
.recap-row span small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.recap-row > b { color: var(--green); font-size: 8px; }
.recap-row > b.needs-review { color: #c6544c; }
.next-review { min-height: 65px; margin-top: 12px; display: grid; grid-template-columns: 51px 1fr; gap: 11px; align-items: center; padding: 11px 13px; background: var(--yellow-soft); border-radius: 15px; }
.next-review > span { height: 28px; display: grid; place-items: center; color: #7f6416; background: #fff; border-radius: 8px; font-size: 8px; font-weight: 720; box-shadow: 0 3px 0 #ead266; }
.next-review strong { font-size: 10px; }
.next-review p { margin: 3px 0 0; color: #74632d; font-size: 8px; }

/* Sentence-practice branch */
.sentence-scroll { padding-bottom: calc(108px + var(--safe-bottom)); }
.sentence-trainer-label { margin-top: 1px; }
.sentence-prompt-card { position: relative; height: 168px; overflow: hidden; padding: 20px; color: #fff; background: radial-gradient(circle at 11% 8%,rgba(255,255,255,.18),transparent 29%),linear-gradient(145deg,#6579ff,var(--blue) 48%,var(--blue-deep)); border-radius: 22px; box-shadow: 0 12px 24px rgba(53,72,201,.18); }
.sentence-prompt-card::after { content: ""; position: absolute; right: -31px; bottom: -55px; width: 150px; height: 150px; border: 19px solid rgba(255,255,255,.07); border-radius: 50%; }
.sentence-prompt-card .sound-button { position: absolute; z-index: 3; right: 17px; top: 16px; }
.sentence-prompt-card .sound-button[hidden] { display: none; }
.sentence-prompt-card > span { position: relative; z-index: 2; color: var(--yellow); font-family: var(--font-display); font-size: 7px; font-weight: 760; letter-spacing: .12em; }
.sentence-prompt-card > strong { position: relative; z-index: 2; display: block; width: 70%; margin-top: 18px; font-family: var(--font-display); font-size: 21px; line-height: 1.25; letter-spacing: -.025em; }
.sentence-prompt-card > p { position: relative; z-index: 2; margin: 8px 0 0; color: rgba(255,255,255,.7); font-size: 8px; }
.sentence-scene-object { position: absolute; z-index: 2; right: 19px; bottom: 20px; width: 74px; height: 67px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 29% 21%,#fff8bd 0 8%,transparent 9%),linear-gradient(145deg,#ffe878,var(--yellow) 62%,#dda71b); border: 2px solid var(--ink); border-radius: 19px 19px 19px 8px; font-style: normal; box-shadow: inset 7px 8px 12px rgba(255,255,255,.35),0 7px 0 rgba(24,32,51,.22),0 14px 18px rgba(24,32,51,.18); transform: rotate(-5deg); }
.sentence-scene-object b { font-family: var(--font-display); font-size: 27px; }
.sentence-scene-object span { position: absolute; right: -5px; top: -8px; width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--ink); border-radius: 50%; font-size: 12px; font-weight: 760; }
.sentence-workspace { min-height: 190px; margin-top: 13px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.sentence-panel[hidden] { display: none; }
.sentence-built { min-height: 76px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; padding: 11px; background: var(--blue-soft); border: 1px dashed #b9c2fa; border-radius: 13px; }
.sentence-built.is-correct { background: #e8f7ef; border-color: var(--green); }
.sentence-built.is-wrong { background: #fff0ef; border-color: #d65e56; }
.sentence-built > span { align-self: center; width: 100%; color: #9aa1b5; font-size: 9px; text-align: center; }
.sentence-chip-bank { min-height: 78px; margin-top: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.sentence-token { min-height: 34px; padding: 0 11px; color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; font-family: var(--font-display); font-size: 10px; font-weight: 650; box-shadow: 0 4px 0 #c8cddd; cursor: pointer; }
.sentence-built .sentence-token { color: #fff; background: var(--blue); border-color: #2c3aa1; box-shadow: 0 4px 0 #28379b; }
.fill-sentence { min-height: 86px; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--yellow-soft); border: 1px solid #efd467; border-radius: 13px; font-family: var(--font-display); font-size: 16px; line-height: 1.6; text-align: center; }
.fill-blank { display: inline-grid; min-width: 74px; height: 29px; place-items: center; margin: 0 5px; color: var(--blue); background: #fff; border-bottom: 2px solid var(--blue); border-radius: 6px 6px 0 0; }
.fill-options { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fill-option { height: 39px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 11px; font-family: var(--font-display); font-size: 10px; font-weight: 650; text-align: center; box-shadow: 0 4px 0 #dfe2eb; cursor: pointer; }
.fill-option.is-selected { color: #fff; background: var(--blue); border-color: #2e3da8; box-shadow: 0 4px 0 #29399f; }
.fill-option.is-correct { color: #18563c; background: #dff5e9; border-color: var(--green); box-shadow: 0 4px 0 #a8d8bf; }
.fill-option.is-wrong { color: #853e39; background: #ffebe9; border-color: #d65e56; box-shadow: 0 4px 0 #e8b8b4; }
.dictation-entry { display: block; }
.dictation-entry > span { display: block; color: var(--muted); font-size: 8px; }
.dictation-entry textarea { width: 100%; min-height: 104px; margin-top: 8px; resize: none; padding: 13px; color: var(--ink); background: var(--blue-soft); border: 1px solid #cbd2fb; border-radius: 13px; outline: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.45; }
.dictation-entry textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(77,98,237,.1); }
.dictation-entry textarea.is-correct { background: #e8f7ef; border-color: var(--green); }
.dictation-entry textarea.is-wrong { background: #fff0ef; border-color: #d65e56; }
.dictation-hints { margin-top: 10px; display: flex; gap: 7px; }
.dictation-hints span { padding: 5px 7px; color: var(--muted); background: var(--bg); border-radius: 7px; font-size: 7px; }
.sentence-feedback { margin-top: 11px; }
.sentence-note { margin-top: 11px; }
.sentence-pattern { min-height: 79px; margin-top: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 12px rgba(34,43,73,.05); }
.sentence-pattern > div:last-child { margin-top: 11px; display: flex; align-items: center; gap: 7px; }
.sentence-pattern > div:last-child span { min-height: 27px; display: grid; place-items: center; padding: 0 9px; color: var(--ink); background: var(--yellow-soft); border: 1px solid #ecd267; border-radius: 8px; font-family: var(--font-display); font-size: 8px; font-weight: 650; }
.sentence-pattern > div:last-child span:nth-of-type(2) { color: #fff; background: var(--blue); border-color: var(--blue-deep); }
.sentence-pattern > div:last-child b { color: var(--muted); font-size: 9px; }
.sentence-result-hero { background: radial-gradient(circle at 17% 13%,rgba(255,255,255,.18),transparent 28%),linear-gradient(145deg,#6579ff,var(--blue) 47%,var(--blue-deep)); }
.sentence-result-object { position: absolute; left: 21px; bottom: 17px; width: 66px; height: 45px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 16px 16px 16px 6px; font-family: Georgia,serif; font-size: 28px; box-shadow: inset 5px 6px 8px rgba(255,255,255,.35),0 6px 0 rgba(24,32,51,.2); }
.sentence-recap { padding-bottom: 8px; }
.sentence-result-row { min-height: 48px; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); }
.sentence-result-row:first-of-type { margin-top: 8px; }
.sentence-result-row > i { width: 29px; height: 29px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 9px; font-size: 9px; font-style: normal; font-weight: 760; box-shadow: 0 3px 0 #2d3ca8; }
.sentence-result-row strong { display: block; font-size: 9px; }
.sentence-result-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.sentence-result-row > b { color: var(--green); font-size: 8px; }
.sentence-result-row > b.needs-review { color: #c6544c; }

/* Recommended-review branch */
.review-session-scroll { padding-bottom: calc(108px + var(--safe-bottom)); }
.review-trainer-label { margin-top: 1px; }
.review-question-card { position: relative; height: 181px; overflow: hidden; padding: 20px; color: var(--ink); background: radial-gradient(circle at 15% 8%,rgba(255,255,255,.8),transparent 28%),linear-gradient(145deg,#ffe779,var(--yellow) 55%,#e8b624); border: 1px solid #d7a817; border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.65),0 12px 22px rgba(135,100,12,.16); }
.review-question-card::after { content: ""; position: absolute; right: -33px; top: -35px; width: 150px; height: 150px; border: 20px solid rgba(255,255,255,.19); border-radius: 50%; }
.review-question-card .sound-button { position: absolute; z-index: 4; right: 17px; top: 16px; }
.review-question-card > span { position: relative; z-index: 2; color: #705817; font-family: var(--font-display); font-size: 7px; font-weight: 760; letter-spacing: .12em; }
.review-question-card > strong { position: relative; z-index: 2; display: block; width: 68%; margin-top: 22px; font-family: var(--font-display); font-size: 29px; line-height: 1.12; letter-spacing: -.03em; }
.review-question-card > small { position: relative; z-index: 2; display: block; margin-top: 4px; color: #6f612d; font-size: 9px; }
.review-question-card > p { position: absolute; z-index: 2; left: 20px; bottom: 18px; margin: 0; color: #725f26; font-size: 8px; }
.review-memory-orb { position: absolute; z-index: 2; right: 23px; bottom: 19px; width: 74px; height: 74px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 31% 23%,#8998ff,var(--blue) 46%,var(--blue-deep)); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 28px; font-style: normal; font-weight: 760; box-shadow: inset 7px 7px 12px rgba(255,255,255,.3),0 7px 0 rgba(24,32,51,.22),0 14px 18px rgba(24,32,51,.18); transform: rotate(6deg); }
.review-workspace { min-height: 162px; margin-top: 13px; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 6px 14px rgba(34,43,73,.06); }
.review-workspace > div[hidden] { display: none; }
.review-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-answer-option { min-height: 60px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 13px; font-size: 10px; font-weight: 670; box-shadow: 0 4px 0 #dfe2eb; cursor: pointer; }
.review-answer-option i { width: 26px; height: 26px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 8px; font-family: var(--font-display); font-size: 8px; font-style: normal; }
.review-answer-option.is-selected { background: var(--blue-soft); border-color: var(--blue); box-shadow: 0 4px 0 #cad0fb; }
.review-answer-option.is-correct { color: #18563c; background: #e5f7ed; border-color: var(--green); box-shadow: 0 4px 0 #add9c2; }
.review-answer-option.is-wrong { color: #853e39; background: #fff0ef; border-color: #d65e56; box-shadow: 0 4px 0 #e8b8b4; }
.review-spelling-entry { display: block; }
.review-spelling-entry > span { display: block; color: var(--muted); font-size: 8px; }
.review-spelling-entry input { width: 100%; height: 91px; margin-top: 8px; padding: 0 13px; color: var(--ink); background: var(--blue-soft); border: 1px solid #cbd2fb; border-radius: 13px; outline: 0; font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: .05em; }
.review-spelling-entry input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(77,98,237,.1); }
.review-spelling-entry input.is-correct { background: #e8f7ef; border-color: var(--green); }
.review-spelling-entry input.is-wrong { background: #fff0ef; border-color: #d65e56; }
.review-feedback { margin-top: 11px; }
.review-memory-tip { min-height: 67px; margin-top: 11px; display: grid; grid-template-columns: 39px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 15px; }
.memory-tip-icon { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 16px; font-weight: 760; box-shadow: 0 4px 0 #2d3ca8; }
.review-memory-tip strong { display: block; font-size: 9px; }
.review-memory-tip p { margin: 3px 0 0; color: #75652f; font-size: 7px; line-height: 1.4; }
.review-interval { min-height: 48px; margin-top: 10px; display: grid; grid-template-columns: 55px 1fr 71px; gap: 9px; align-items: center; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 10px rgba(34,43,73,.04); }
.review-interval > span,.review-interval > b { font-size: 7px; }
.review-interval > b { color: var(--blue); text-align: right; }
.review-interval > i { height: 6px; overflow: hidden; background: var(--line); border-radius: 4px; }
.review-interval > i > i { display: block; height: 100%; background: linear-gradient(90deg,var(--blue),#8794ff); border-radius: inherit; transition: width .25s ease; }
.review-queue-strip { min-height: 76px; margin-top: 10px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 4px 10px rgba(34,43,73,.04); }
.review-queue-strip > div:last-child { margin-top: 10px; display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.review-queue-item { min-width: 0; display: grid; justify-items: center; gap: 4px; color: var(--muted); font-size: 6px; text-align: center; }
.review-queue-item i { width: 24px; height: 24px; display: grid; place-items: center; color: #8a91a3; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-display); font-size: 7px; font-style: normal; font-weight: 760; }
.review-queue-item.is-current { color: var(--blue); font-weight: 700; }
.review-queue-item.is-current i { color: #fff; background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 3px 0 #2d3ca8; }
.review-queue-item.is-done i { color: #19573e; background: #dff4e9; border-color: #aad9c0; }
.review-result-hero { background: radial-gradient(circle at 17% 13%,rgba(255,255,255,.18),transparent 28%),linear-gradient(145deg,#6579ff,var(--blue) 47%,var(--blue-deep)); }
.review-result-medal { font-family: var(--font-display); font-size: 40px; }
.review-result-stack { position: absolute; left: 21px; bottom: 16px; width: 90px; height: 49px; }
.review-result-stack i { position: absolute; bottom: 0; width: 39px; height: 39px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 11px; font-family: var(--font-display); font-size: 13px; font-style: normal; font-weight: 760; box-shadow: 0 5px 0 rgba(24,32,51,.22); }
.review-result-stack i:nth-child(1) { left: 0; transform: rotate(-7deg); }
.review-result-stack i:nth-child(2) { left: 27px; bottom: 5px; color: #fff; background: var(--blue); transform: rotate(2deg); }
.review-result-stack i:nth-child(3) { left: 55px; transform: rotate(8deg); }
.review-result-row { min-height: 50px; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); }
.review-result-row:first-of-type { margin-top: 8px; }
.review-result-row > i { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 9px; font-size: 10px; font-style: normal; font-weight: 760; box-shadow: 0 3px 0 #2d3ca8; }
.review-result-row strong { display: block; font-size: 9px; }
.review-result-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.review-result-row > b { color: var(--green); font-size: 8px; }
.review-result-row > b.needs-review { color: #c6544c; }

/* Unit quiz branch */
.quiz-session-scroll { padding-bottom: calc(108px + var(--safe-bottom)); }
.quiz-trainer-label { margin-top: 1px; }
.quiz-question-card { color: #fff; background: radial-gradient(circle at 14% 8%,rgba(255,255,255,.18),transparent 29%),linear-gradient(145deg,#687cff,var(--blue) 49%,var(--blue-deep)); border-color: #2d3ca8; box-shadow: inset 0 1px 0 rgba(255,255,255,.24),0 12px 24px rgba(53,72,201,.2); }
.quiz-question-card::after { border-color: rgba(255,255,255,.07); }
.quiz-question-card > span { color: var(--yellow); }
.quiz-question-card > strong { width: 75%; color: #fff; font-size: 24px; }
.quiz-question-card > small,.quiz-question-card > p { color: rgba(255,255,255,.72); }
.quiz-question-card .sound-button { color: var(--ink); background: var(--yellow); border-color: var(--ink); box-shadow: 0 4px 0 rgba(24,32,51,.25); }
.quiz-orb { color: var(--ink); background: radial-gradient(circle at 31% 23%,#fff8bd,var(--yellow) 49%,#dba516); transform: rotate(-6deg); }
.quiz-workspace { min-height: 162px; }
.quiz-answer-option { min-height: 62px; font-size: 9px; line-height: 1.3; }
.quiz-answer-option span { overflow-wrap: anywhere; }
.quiz-feedback { margin-top: 11px; }
.quiz-rule-card { min-height: 64px; margin-top: 11px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px 12px; color: #67561f; background: var(--yellow-soft); border: 1px solid #ecd36d; border-radius: 15px; }
.quiz-rule-card > span { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 12px; font-family: var(--font-display); font-size: 16px; font-weight: 760; box-shadow: 0 4px 0 #2d3ca8; transform: rotate(-4deg); }
.quiz-rule-card strong { display: block; color: var(--ink); font-size: 9px; }
.quiz-rule-card p { margin: 3px 0 0; font-size: 7px; line-height: 1.45; }
.quiz-queue-strip { margin-bottom: 4px; }
.quiz-result-scroll { padding-bottom: calc(102px + var(--safe-bottom)); }
.quiz-result-hero { background: radial-gradient(circle at 17% 13%,rgba(255,255,255,.18),transparent 28%),linear-gradient(145deg,#6579ff,var(--blue) 47%,var(--blue-deep)); }
.quiz-result-medal { width: 91px; height: 91px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); background: radial-gradient(circle at 31% 23%,#fff8bd,var(--yellow) 50%,#dca718); border: 2px solid var(--ink); border-radius: 50%; box-shadow: inset 8px 8px 13px rgba(255,255,255,.36),0 7px 0 rgba(24,32,51,.23),0 14px 20px rgba(24,32,51,.2); }
.quiz-result-medal b { font-family: var(--font-display); font-size: 30px; line-height: .9; }
.quiz-result-medal small { margin-top: 4px; font-size: 8px; }
.quiz-result-object { position: absolute; left: 21px; bottom: 16px; width: 88px; height: 53px; }
.quiz-result-object i,.quiz-result-object b { position: absolute; display: grid; place-items: center; color: var(--ink); border: 1.5px solid var(--ink); font-family: var(--font-display); font-style: normal; font-weight: 760; box-shadow: 0 5px 0 rgba(24,32,51,.22); }
.quiz-result-object i { left: 0; bottom: 0; width: 49px; height: 49px; background: var(--yellow); border-radius: 50%; font-size: 22px; transform: rotate(-7deg); }
.quiz-result-object b { right: 0; bottom: 4px; width: 48px; height: 39px; color: #fff; background: var(--blue); border-radius: 12px; font-size: 12px; transform: rotate(7deg); }
.quiz-result-row > i { background: var(--yellow); color: var(--ink); border: 1px solid #d4a817; box-shadow: 0 3px 0 #d2a51b; }
.quiz-next-card { margin-bottom: 4px; }

/* Navigation and feedback */
.bottom-nav { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(64px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(4,1fr); align-items: start; padding: 8px 18px var(--safe-bottom); background: rgba(254,254,255,.98); border-top: 1px solid var(--line); box-shadow: 0 -8px 22px rgba(34,43,73,.04); }
.bottom-nav.is-hidden { display: none; }
.bottom-nav button { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); background: transparent; border-radius: 10px; font-size: 9px; font-weight: 620; text-align: center; cursor: pointer; }
.bottom-nav button.is-active { color: var(--blue); font-weight: 760; }
.bottom-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.bottom-nav button.is-active svg { transform: translateY(-1px); }
.bottom-nav button:active { background: var(--blue-soft); }

.profile-dialog-backdrop { position: absolute; z-index: 40; inset: 0; display: grid; align-items: end; padding: 18px; background: rgba(20,28,48,.46); }
.profile-dialog-backdrop[hidden] { display: none; }
.profile-dialog { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 44px rgba(20,28,48,.28); }
.profile-dialog h2 { margin: 1px 0 3px; font-family: var(--font-display); font-size: 17px; }
.profile-dialog p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.profile-dialog label,.profile-dialog > input,.profile-dialog > small,.profile-dialog > div:last-child { grid-column: 1 / -1; }
.profile-dialog label { margin-top: 5px; font-size: 8px; font-weight: 730; }
.profile-dialog > input { height: 45px; padding: 0 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 11px; font: 700 12px/1 var(--font-body); outline: 0; }
.profile-dialog > input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(75,94,229,.12); }
.profile-dialog > small { min-height: 12px; color: #c34e45; font-size: 7px; }
.profile-dialog > div:last-child { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.profile-dialog .secondary-action,.profile-dialog .primary-action { min-height: 43px; }
.wish-dialog .settings-row-icon svg { width: 18px; height: 18px; fill: #fff6a9; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.wish-dialog .wish-cost-presets { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.wish-cost-presets button { height: 34px; display: grid; place-items: center; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font-size: 8px; font-weight: 700; text-align: center; }
.wish-cost-presets button.is-selected { color: #fff; background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 3px 0 #2d3ca8; }
.toast { position: absolute; z-index: 30; left: 20px; right: 20px; bottom: calc(76px + var(--safe-bottom)); min-height: 55px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; padding: 10px 13px; color: #fff; background: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: 15px; box-shadow: 0 16px 34px rgba(24,32,51,.28); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .18s ease,transform .22s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast strong { font-size: 10px; }
.toast span { color: rgba(255,255,255,.66); font-size: 8px; text-align: right; }

@media (max-width: 480px) {
  body { background: var(--bg); }
  .app-shell { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
}

@media (max-width: 374px) {
  .screen-scroll { padding-inline: 16px; }
  .auth-scroll { padding-inline: 16px; }
  .login-hero { padding-inline: 18px; }
  .login-hero h1 { max-width: 82%; font-size: 21px; }
  .login-hero > p { max-width: 58%; }
  .login-mascot { right: 11px; width: 84px; height: 80px; }
  .activity-grid { grid-template-columns: 1.08fr .92fr; gap: 11px; }
  .activity { padding: 12px; }
  .activity-count { left: 12px; }
  .tiles { right: -12px; transform: scale(.9); transform-origin: right bottom; }
  .current-unit .hero-title { max-width: 70%; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}