:root {
  color-scheme: light;
  --bg-1: #f2f9fd;
  --bg-2: #fbfdff;
  --bg-3: #f4fbf7;
  --ink: #142033;
  --ink-soft: #68788d;
  --ink-faint: #8c99aa;
  --line: rgba(255, 255, 255, .78);
  --line-soft: rgba(255, 255, 255, .48);
  --solid: rgba(255, 255, 255, .90);
  --solid-strong: rgba(255, 255, 255, .97);
  --surface-soft: rgba(255, 255, 255, .72);
  --shadow: 0 18px 46px rgba(72, 93, 122, .12);
  --shadow-soft: 0 9px 24px rgba(72, 93, 122, .085);
  --accent: #5cb8e8;
  --accent-strong: #2f88c5;
  --accent-soft: rgba(95, 127, 163, .14);
  --accent-faint: rgba(95, 127, 163, .075);
  --success: #3f8a5a;
  --success-strong: #2f7047;
  --success-soft: rgba(77, 122, 97, .14);
  --warning: #f39a36;
  --warning-strong: #d97716;
  --warning-soft: rgba(185, 130, 60, .14);
  --danger: #d9605c;
  --danger-strong: #b7444a;
  --danger-soft: rgba(160, 90, 100, .12);
  --neutral: #667085;
  --neutral-soft: rgba(102, 112, 133, .10);
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
  --safe-top: max(16px, env(safe-area-inset-top));
  --nav-shell-height: 59px;
  --nav-bottom-gap: 10px;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
html { scroll-behavior: smooth; }
body { background: var(--bg-1); color: var(--ink); overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; touch-action: manipulation; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Ambient background: neutral system canvas with restrained immersive light. */
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -2; background: linear-gradient(148deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3)); }
.ambient__mesh { position: absolute; inset: -18%; opacity:.62; background: radial-gradient(ellipse at 12% 8%, rgba(143,177,216,.26), transparent 38%), radial-gradient(ellipse at 92% 12%, rgba(170,194,218,.17), transparent 34%), radial-gradient(ellipse at 72% 88%, rgba(161,207,201,.13), transparent 36%); filter: blur(30px) saturate(92%); animation: drift 28s ease-in-out infinite alternate; }
.ambient__veil { position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,255,255,.08) 48%, rgba(255,255,255,.16)); }
.ambient__grain { position:absolute; inset:0; opacity:.038; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E"); }
.ambient__ribbon { display:none; }
@keyframes drift { 0%{transform:translate3d(-1.5%,-1%,0) scale(1.02)} 100%{transform:translate3d(2%,1.5%,0) scale(1.05)} }

.app-shell { min-height: 100svh; width: min(100%, 560px); margin: 0 auto; position: relative; padding: calc(var(--safe-top) + 68px) 16px calc(var(--safe-bottom) + var(--nav-shell-height) + 58px); }
.viewport { display:block; }
.view { display:none; }
.view.is-active { display:block; animation:viewIn .34s cubic-bezier(.18,.82,.18,1); }
@keyframes viewIn { from{opacity:0;transform:translateY(8px) scale(.994)} to{opacity:1;transform:translateY(0) scale(1)} }

/* Material engine: shell stays stable; only interactive children compress. */
.liquid { --px: 28%; --py: 10%; --shine: .52; position:relative; overflow:hidden; isolation:isolate; border:1px solid var(--line); background:linear-gradient(145deg, rgba(255,255,255,.60), rgba(255,255,255,.27)); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.18), 0 12px 32px rgba(73,95,126,.105); backdrop-filter: blur(22px) saturate(118%); -webkit-backdrop-filter: blur(22px) saturate(118%); transition: box-shadow .30s ease, border-color .30s ease, background .30s ease, backdrop-filter .30s ease; }
.liquid::before { content:""; position:absolute; inset:-90%; z-index:-1; opacity:var(--shine); background:radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.92), transparent 15%), linear-gradient(116deg, transparent 35%, rgba(255,255,255,.32) 49%, transparent 63%); transform:translate3d(-5%,-4%,0) rotate(-8deg); transition:transform .50s cubic-bezier(.18,.82,.18,1), opacity .34s ease; pointer-events:none; }
.liquid::after { content:""; position:absolute; inset:1px; border-radius:inherit; z-index:-1; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 11px 13px 30px rgba(255,255,255,.14), inset -12px -10px 24px rgba(83,116,151,.055); }
.liquid.is-lit::before { opacity:.92; transform:translate3d(4%,2%,0) rotate(-2deg) scale(1.05); }
.liquid--mist { --shine:.22; border-color:rgba(255,255,255,.48); background:linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,255,255,.16)); box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 8px 22px rgba(73,95,126,.06); backdrop-filter:blur(14px) saturate(108%); -webkit-backdrop-filter:blur(14px) saturate(108%); }
.liquid--control { --shine:.52; background:linear-gradient(145deg, rgba(255,255,255,.60), rgba(255,255,255,.28)); backdrop-filter:blur(24px) saturate(120%); -webkit-backdrop-filter:blur(24px) saturate(120%); }
.liquid--focus { --shine:.82; border-color:rgba(255,255,255,.94); background:linear-gradient(145deg, rgba(255,255,255,.80), rgba(230,239,248,.37)); backdrop-filter:blur(32px) saturate(126%); -webkit-backdrop-filter:blur(32px) saturate(126%); box-shadow:inset 0 1px 0 rgba(255,255,255,.99), inset 0 -1px 0 rgba(255,255,255,.24), 0 17px 36px rgba(65,91,124,.16); }
.liquid--focus::before { background:radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,1), transparent 12%), linear-gradient(114deg, transparent 31%, rgba(255,255,255,.56) 48%, transparent 63%); }
.liquid--focus::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.33), inset 14px 13px 32px rgba(255,255,255,.23), inset -13px -11px 25px rgba(73,110,150,.10); }
.pressable { position:relative; transform:translateZ(0); transition:transform .32s cubic-bezier(.18,.9,.24,1.24), box-shadow .28s ease, filter .28s ease; will-change:transform; }
.pressable.is-pressed { transform:translateY(1px) scale(.965); filter:saturate(1.06); transition-duration:.10s; }

/* Lenses move independently from shells. */
.liquid-lens { --lens-x:0px; --lens-w:80px; position:absolute; z-index:0; left:0; width:var(--lens-w); transform:translate3d(var(--lens-x),0,0); transition:transform .42s cubic-bezier(.18,.86,.2,1), width .42s cubic-bezier(.18,.86,.2,1), box-shadow .30s ease; pointer-events:none; overflow:hidden; border:1px solid rgba(255,255,255,.80); background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(232,240,247,.34)); box-shadow:0 6px 17px rgba(66,91,122,.085), inset 0 1px 0 rgba(255,255,255,.88), inset -9px -7px 16px rgba(74,110,148,.05); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); }

.topbar { position:fixed; top:var(--safe-top); left:50%; transform:translateX(-50%); width:min(calc(100% - 32px), 528px); min-height:56px; border-radius:22px; z-index:20; display:flex; align-items:center; gap:10px; padding:7px 8px; transition:box-shadow .28s ease, background .28s ease, border-color .28s ease; }
body.scrolled .topbar { background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(255,255,255,.31)); border-color:rgba(255,255,255,.86); box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 14px 38px rgba(71,94,140,.17); }
.topbar__title { display:grid; flex:1; gap:1px; min-width:0; }
.topbar__title strong { font-size:14px; letter-spacing:.01em; }
.topbar__title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); font-size:9.2px; letter-spacing:.070em; text-transform:uppercase; }
.icon-button { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; background:rgba(255,255,255,.24); border:1px solid rgba(255,255,255,.44); border-radius:50%; }

.immersive-card { position:relative; min-height:330px; border-radius:32px; overflow:hidden; box-shadow:0 20px 44px rgba(68,89,116,.18); background:#7899ba; }
.hero__scene { position:absolute; inset:0; background:linear-gradient(158deg,#88a7c8 0%,#91aac4 42%,#b9c7ce 100%); }
.hero__scene::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(23,51,83,.03),rgba(23,50,83,.36)); }
.hero__glow { position:absolute; width:178px; height:178px; left:52%; top:13%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(248,244,224,.70),rgba(232,225,199,.27) 38%,transparent 69%); filter:blur(4px); }
.hero__ridge { position:absolute; left:-12%; right:-12%; bottom:-16%; height:54%; border-radius:50% 46% 0 0; background:linear-gradient(155deg,#768fad,#4e6d91 58%,#3c5e84); transform:rotate(-4deg); opacity:.94; }
.hero__ridge--back { bottom:7%; left:-22%; right:18%; height:38%; opacity:.28; background:linear-gradient(145deg,#d1d8dc,#829bb6); transform:rotate(8deg); }
.hero__flow { position:absolute; width:82%; height:1px; left:7%; border-radius:999px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); opacity:.28; transform:rotate(-9deg); }
.hero__flow--one { top:39%; }
.hero__flow--two { top:48%; left:20%; opacity:.16; transform:rotate(-7deg); }
.hero__content { position:relative; min-height:330px; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:white; text-shadow:0 2px 12px rgba(15,38,80,.18); }
.hero__eyebrow, .section-kicker { font-size:10px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; opacity:.78; }
.hero h1 { margin:8px 0 10px; font-size:35px; line-height:1.05; letter-spacing:-.055em; }
.hero p { max-width:360px; margin:0; font-size:13px; line-height:1.65; color:rgba(255,255,255,.88); }
.hero__actions { display:flex; gap:10px; margin-top:19px; }
.primary-action, .round-action { color:#165d91; min-height:48px; border-radius:18px; }
.primary-action { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:0 15px 0 18px; min-width:180px; font-weight:750; }
.primary-action svg { width:18px; height:18px; }
.round-action { width:48px; display:grid; place-items:center; }

.section-head, .panel-title { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.section-head { margin:24px 2px 12px; }
.section-head h2, .page-title h1 { margin:4px 0 0; font-size:22px; letter-spacing:-.055em; }
.status-dot { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--success); padding-bottom:3px; }
.status-dot i { width:7px; height:7px; background:var(--success); border-radius:50%; box-shadow:0 0 0 4px var(--success-soft); }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.content-card { background:var(--solid); border:1px solid rgba(255,255,255,.80); box-shadow:var(--shadow-soft); border-radius:var(--radius-lg); }
.metric-card { padding:14px 12px; min-width:0; }
.metric-card span, .metric-card small, .panel-title span, .panel-title em { display:block; color:var(--ink-soft); font-size:11px; font-style:normal; }
.metric-card strong { display:block; margin:8px 0 4px; font-size:25px; letter-spacing:-.065em; }
.notice-card { display:flex; gap:12px; margin-top:12px; padding:15px; border-radius:22px; }
.notice-card__icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:14px; color:var(--accent); background:rgba(255,255,255,.50); }
.notice-card span { font-size:10px; color:var(--ink-soft); }
.notice-card strong { display:block; margin:4px 0; font-size:14px; letter-spacing:-.02em; }
.notice-card p { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.55; }
.action-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:12px; }
.action-card { min-height:118px; padding:15px; text-align:left; }
.action-card__icon { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; color:white; }
.action-card__icon--blue { background:linear-gradient(150deg,#6487ae,#416991); }
.action-card__icon--violet { background:linear-gradient(150deg,#6487ae,#416991); }
.action-card strong,.action-card small { display:block; }
.action-card strong { margin:14px 0 4px; font-size:14px; }
.action-card small { color:var(--ink-soft); font-size:11px; }
.progress-panel { padding:15px; margin-top:12px; }
.panel-title strong { display:block; margin-top:4px; font-size:14px; }
.panel-title em { color:var(--accent); font-weight:750; }
.progress-track { height:7px; overflow:hidden; margin:15px 0; border-radius:999px; background:rgba(88,108,150,.10); }
.progress-track i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.progress-row { display:flex; justify-content:space-between; padding:5px 0; color:var(--ink-soft); font-size:11px; }
.progress-row b { color:var(--ink); }
.page-title { padding:13px 4px 16px; }
.page-title h1 { margin:7px 0; font-size:23px; }
.page-title p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.6; }
.showcase-card { margin-bottom:11px; padding:17px; border-radius:24px; }
.showcase-card__badge { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.showcase-card h3 { margin:17px 0 7px; font-size:16px; }
.showcase-card p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.58; }
.showcase-card__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.showcase-card__meta span { padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.23); color:var(--ink-soft); font-size:10px; }
.component-panel { padding:15px; margin-bottom:11px; }
.segmented { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin-top:14px; border-radius:16px; }
.segmented__indicator { top:4px; bottom:4px; border-radius:12px; }
.segmented button { position:relative; z-index:1; min-height:36px; background:transparent; border-radius:12px; color:var(--ink-soft); font-size:12px; transition:color .22s ease, transform .18s ease; }
.segmented button:active { transform:scale(.95); }
.segmented button.is-active { color:var(--ink); font-weight:700; }
.button-stack { display:grid; gap:9px; margin-top:14px; }
.solid-button, .glass-button, .outline-button { min-height:46px; border-radius:15px; font-weight:750; font-size:13px; }
.solid-button { background:var(--accent-strong); color:white; box-shadow:0 10px 20px rgba(47,136,197,.18); }
.glass-button { color:var(--accent-strong); }
.glass-button--accent { color:var(--accent-strong); background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(222,234,244,.46)); }
.outline-button { border:1px solid rgba(85,108,157,.18); background:rgba(255,255,255,.42); color:#607d92; }
.report-card { padding:16px; margin-bottom:12px; }
.stepper-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0; border-bottom:1px solid rgba(102,118,150,.09); }
.stepper-row span, .stepper-row small { display:block; }
.stepper-row span { font-size:13px; font-weight:700; }
.stepper-row small { margin-top:4px; color:var(--ink-soft); font-size:10px; }
.stepper { display:flex; align-items:center; gap:9px; }
.stepper button { width:36px; height:36px; border-radius:50%; color:var(--accent-strong); background:var(--accent-soft); font-size:20px; line-height:1; transition:transform .16s ease, background .16s ease; }
.stepper button:active { transform:scale(.88); background:rgba(47,136,197,.22); }
.stepper strong { width:22px; text-align:center; font-size:16px; }
.report-total { display:flex; align-items:center; justify-content:space-between; padding-top:16px; font-size:13px; }
.report-total strong { color:var(--accent-strong); font-size:18px; }
.compact-form label { display:block; margin-bottom:15px; }
.compact-form label:last-child { margin-bottom:0; }
.compact-form span { display:block; margin-bottom:7px; font-size:12px; font-weight:700; }
.compact-form input, .compact-form textarea { width:100%; border:1px solid rgba(112,129,162,.13); border-radius:14px; padding:12px; background:rgba(255,255,255,.68); color:var(--ink); outline:none; resize:vertical; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.compact-form input:focus, .compact-form textarea:focus { border-color:rgba(47,136,197,.46); box-shadow:0 0 0 4px rgba(47,136,197,.10); background:rgba(255,255,255,.88); }
.submit-button { width:100%; min-height:56px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:19px; color:var(--accent-strong); font-weight:800; background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(218,231,242,.54)); box-shadow:inset 0 1px 0 rgba(255,255,255,.99),0 14px 30px rgba(65,91,124,.14); }
.submit-button.is-success { animation:submitSuccess .68s cubic-bezier(.18,.86,.18,1); }
@keyframes submitSuccess { 0%{box-shadow:0 18px 40px rgba(65,91,124,.17)} 44%{box-shadow:0 0 0 7px var(--success-soft),0 22px 44px rgba(65,91,124,.17)} 100%{box-shadow:0 18px 40px rgba(65,91,124,.17)} }
.settings-list { padding:0 15px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:13px; padding:16px 0; border-bottom:1px solid rgba(102,118,150,.09); }
.setting-row:last-child { border-bottom:0; }
.setting-row strong, .setting-row small { display:block; }
.setting-row strong { font-size:13px; }
.setting-row small { color:var(--ink-soft); margin-top:4px; font-size:11px; line-height:1.45; }
.switch { appearance:none; width:48px; height:28px; flex:0 0 auto; padding:3px; border-radius:999px; background:rgba(99,114,144,.20); transition:background .30s ease, box-shadow .30s ease; }
.switch::before { content:""; display:block; width:22px; height:22px; border-radius:50%; background:white; box-shadow:0 3px 9px rgba(54,68,102,.16); transition:transform .34s cubic-bezier(.18,.86,.18,1.16); }
.switch:checked { background:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 5px 14px rgba(47,136,197,.20); }
.switch:checked::before { transform:translateX(20px); }
.diagnostic-card, .test-guide { margin-top:12px; border-radius:22px; padding:16px; }
.diagnostic-card dl { display:grid; grid-template-columns:1fr auto; gap:10px 14px; margin:14px 0 0; font-size:12px; }
.diagnostic-card dt { color:var(--ink-soft); }
.diagnostic-card dd { margin:0; font-weight:700; }
.test-guide h3 { margin:0 0 8px; font-size:15px; }
.test-guide ol { margin:0; padding-left:18px; color:var(--ink-soft); font-size:12px; line-height:1.72; }

.bottom-nav { position:fixed; z-index:24; left:50%; bottom:calc(var(--safe-bottom) + var(--nav-bottom-gap)); transform:translateX(-50%); width:min(calc(100% - 32px),528px); min-height:var(--nav-shell-height); display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:4px; border-radius:22px; transition:transform .30s cubic-bezier(.2,.82,.2,1),opacity .22s ease; }
.bottom-nav__indicator { top:4px; bottom:4px; border-radius:16px; }
.bottom-nav button { position:relative; z-index:1; min-height:49px; display:grid; place-items:center; align-content:center; gap:3px; border-radius:16px; background:transparent; color:var(--ink-soft); transition:color .24s ease,transform .16s ease; }
.bottom-nav button:active { transform:scale(.92); }
.bottom-nav button svg { width:18px; height:18px; transition:transform .28s cubic-bezier(.18,.86,.18,1.14); }
.bottom-nav button span { font-size:10px; }
.bottom-nav button.is-active { color:var(--accent-strong); font-weight:700; }
.bottom-nav button.is-active svg { transform:translateY(-1px) scale(1.06); }
body.keyboard-open .bottom-nav { opacity:0; pointer-events:none; transform:translate(-50%,calc(100% + var(--safe-bottom) + 26px)); }
body.keyboard-open .app-shell { padding-bottom:38px; }

.sheet-backdrop { position:fixed; inset:0; z-index:28; background:rgba(36,49,65,.22); opacity:0; pointer-events:none; transition:.30s ease; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.sheet-backdrop.is-open { opacity:1; pointer-events:auto; }
.bottom-sheet { --sheet-y:0px; position:fixed; z-index:30; left:50%; bottom:0; width:min(100%,560px); min-height:330px; max-height:min(82svh,680px); overflow:auto; padding:9px 18px calc(var(--safe-bottom) + 17px); border-radius:28px 28px 0 0; transform:translate(-50%,calc(105% + var(--sheet-y))); transition:transform .40s cubic-bezier(.18,.86,.18,1); background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,255,255,.69)); }
.bottom-sheet.is-open { transform:translate(-50%,var(--sheet-y)); }
.bottom-sheet.is-dragging { transition:none; }
.sheet-handle { width:44px; height:20px; margin:0 auto 8px; position:relative; touch-action:none; cursor:grab; }
.sheet-handle::before { content:""; position:absolute; left:0; right:0; top:5px; height:5px; border-radius:999px; background:rgba(94,109,127,.25); }
.sheet-head { display:flex; justify-content:space-between; gap:15px; align-items:start; }
.sheet-head span { color:var(--ink-soft); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.sheet-head h3 { margin:5px 0 0; font-size:18px; letter-spacing:-.04em; }
.bottom-sheet p { color:var(--ink-soft); font-size:12px; line-height:1.68; }
.sheet-demo { padding:15px; margin:14px 0; }
.sheet-demo span,.sheet-demo small,.sheet-demo strong { display:block; }
.sheet-demo span,.sheet-demo small { color:var(--ink-soft); font-size:11px; }
.sheet-demo strong { margin:7px 0; font-size:25px; letter-spacing:-.05em; }
.solid-button--wide { width:100%; }
.toast { position:fixed; left:50%; top:calc(var(--safe-top) + 67px); z-index:36; max-width:calc(100% - 40px); overflow:hidden; text-overflow:ellipsis; padding:11px 15px; border-radius:999px; color:var(--accent-strong); font-size:12px; font-weight:750; opacity:0; transform:translate(-50%,-12px); transition:.28s ease; pointer-events:none; white-space:nowrap; }
.toast.is-show { opacity:1; transform:translate(-50%,0); }
body.sheet-open .toast { opacity:0; transform:translate(-50%,-12px); }
body.low-power .ambient__mesh { animation:none; }
body.low-power .ambient__mesh { filter:blur(28px) saturate(96%); }
body.low-power .liquid { backdrop-filter:blur(16px) saturate(116%); -webkit-backdrop-filter:blur(16px) saturate(116%); }
body.low-power .liquid::before { opacity:.17; transform:none !important; transition:none; }
body.low-power .liquid-lens::before { display:none; }
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) { .liquid { background:rgba(247,250,255,.95); } }
@media (min-width:760px) { .app-shell { width:min(100%,1180px); padding-left:24px; padding-right:24px; } .topbar,.bottom-nav { width:min(calc(100% - 48px),1132px); } .view.is-active { max-width:760px; margin:0 auto; } .hero { min-height:360px; } .hero__content { min-height:360px; } .hero h1 { font-size:44px; } .bottom-sheet { width:min(100%,640px); } }


/* ================================================================
   v0.5.0 FINAL FREEZE CANDIDATE
   Final optical tuning only: hierarchy, weight, focus and dark-mode.
   No new layout or feature is introduced below.
   ================================================================ */

/* 1. Top toolbar: clearer ambient adaptation. Rest state stays airy;
      scrolled state thickens only when content passes underneath. */
.topbar {
  border-color: rgba(255,255,255,.62);
  background: linear-gradient(145deg, rgba(255,255,255,.43), rgba(255,255,255,.17));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 9px 25px rgba(73,95,126,.072);
  backdrop-filter: blur(20px) saturate(114%);
  -webkit-backdrop-filter: blur(20px) saturate(114%);
}
body.scrolled .topbar {
  border-color: rgba(255,255,255,.82);
  background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.29));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 13px 32px rgba(71,94,140,.135);
  backdrop-filter: blur(27px) saturate(120%);
  -webkit-backdrop-filter: blur(27px) saturate(120%);
}
.topbar .icon-button {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.31);
}
body.scrolled .topbar .icon-button {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.41);
}

/* 2. Optical hierarchy: air / control / focal lens. Differences come
      from optical weight, not decorative colors. */
.liquid--mist {
  --shine: .12;
  border-color: rgba(255,255,255,.31);
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.075));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.43), 0 6px 17px rgba(73,95,126,.042);
  backdrop-filter: blur(11px) saturate(104%);
  -webkit-backdrop-filter: blur(11px) saturate(104%);
}
.liquid--mist::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.075), inset 7px 8px 19px rgba(255,255,255,.075);
}
.liquid--control {
  --shine: .43;
  border-color: rgba(255,255,255,.66);
  background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.21));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(255,255,255,.13), 0 10px 25px rgba(73,95,126,.075);
  backdrop-filter: blur(22px) saturate(116%);
  -webkit-backdrop-filter: blur(22px) saturate(116%);
}
.liquid--focus {
  --shine: .76;
  border-color: rgba(255,255,255,.84);
  background: linear-gradient(145deg, rgba(255,255,255,.70), rgba(222,233,243,.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(255,255,255,.20), 0 15px 31px rgba(65,91,124,.125);
  backdrop-filter: blur(30px) saturate(123%);
  -webkit-backdrop-filter: blur(30px) saturate(123%);
}
.liquid--focus::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 12px 12px 28px rgba(255,255,255,.18), inset -11px -9px 21px rgba(73,110,150,.075);
}
.showcase-card--mist { min-height: 158px; }
.showcase-card--control { min-height: 164px; }
.showcase-card--focus {
  min-height: 170px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(255,255,255,.20), 0 18px 35px rgba(65,91,124,.135);
}
.showcase-card--mist .showcase-card__meta span { background: rgba(255,255,255,.15); }
.showcase-card--control .showcase-card__meta span { background: rgba(255,255,255,.25); }
.showcase-card--focus .showcase-card__meta span { background: rgba(255,255,255,.38); }

/* 3. Hero controls: remove permanent double-white outline. Highlight
      intensifies during interaction instead of shouting at rest. */
.hero__actions .liquid--focus,
.hero__actions .liquid--control {
  border-color: rgba(255,255,255,.56);
  background: linear-gradient(145deg, rgba(255,255,255,.63), rgba(226,235,243,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), inset 0 -1px 0 rgba(255,255,255,.12), 0 10px 22px rgba(29,58,92,.13);
  backdrop-filter: blur(23px) saturate(116%);
  -webkit-backdrop-filter: blur(23px) saturate(116%);
}
.hero__actions .liquid--focus::after,
.hero__actions .liquid--control::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), inset 9px 9px 20px rgba(255,255,255,.11), inset -8px -7px 16px rgba(45,80,115,.05);
}
.hero__actions .is-pressed,
.hero__actions .is-lit {
  border-color: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 13px 25px rgba(29,58,92,.16);
}

/* 4. Navigation: keep the hit area, slim only the floating lens. */
.bottom-nav {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.73), 0 10px 26px rgba(73,95,126,.073);
}
.bottom-nav__indicator {
  top: 5px;
  bottom: 5px;
  width: calc(var(--lens-w) - 10px);
  transform: translate3d(calc(var(--lens-x) + 5px),0,0);
  border-radius: 15px;
  border-color: rgba(255,255,255,.65);
  background: linear-gradient(145deg,rgba(255,255,255,.60),rgba(232,240,247,.23));
  box-shadow: 0 4px 13px rgba(66,91,122,.058), inset 0 1px 0 rgba(255,255,255,.75), inset -7px -6px 13px rgba(74,110,148,.035);
}

/* 5. The submit button is the single focal action on report screens. */
.submit-button.liquid--focus {
  color: rgba(255,255,255,.98);
  border-color: rgba(255,255,255,.53);
  background: linear-gradient(145deg, rgba(70,157,211,.95), rgba(42,121,175,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.47), inset 0 -1px 0 rgba(26,58,92,.24), 0 15px 30px rgba(42,121,175,.21);
  text-shadow: 0 1px 2px rgba(28,59,95,.24);
}
.submit-button.liquid--focus::before {
  background: radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.73), transparent 13%), linear-gradient(114deg, transparent 32%, rgba(255,255,255,.34) 48%, transparent 64%);
}
.submit-button.liquid--focus::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), inset 11px 10px 22px rgba(255,255,255,.10), inset -10px -9px 18px rgba(27,60,95,.10);
}

/* ================================================================
   v0.5.1 APPLE DISCIPLINE FREEZE
   Final reduction pass: lighter controls, clearer radii hierarchy,
   fewer containers, lower visual weight. No new components.
   ================================================================ */

:root {
  --nav-shell-height: 54px;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-soft: 0 7px 19px rgba(72, 93, 122, .064);
}

.app-shell {
  padding-top: calc(var(--safe-top) + 61px);
  padding-bottom: calc(var(--safe-bottom) + var(--nav-shell-height) + 52px);
}

/* Top controls stay visually light at rest. */
.topbar {
  min-height: 52px;
  padding: 5px 7px;
  gap: 9px;
  border-radius: 20px;
  border-color: rgba(255,255,255,.53);
  background: linear-gradient(145deg, rgba(255,255,255,.37), rgba(255,255,255,.135));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.63), 0 7px 20px rgba(73,95,126,.058);
  backdrop-filter: blur(18px) saturate(111%);
  -webkit-backdrop-filter: blur(18px) saturate(111%);
}
body.scrolled .topbar {
  border-color: rgba(255,255,255,.75);
  background: linear-gradient(145deg, rgba(255,255,255,.60), rgba(255,255,255,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 11px 27px rgba(71,94,140,.112);
  backdrop-filter: blur(25px) saturate(117%);
  -webkit-backdrop-filter: blur(25px) saturate(117%);
}
.topbar .icon-button {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.115);
  border-color: rgba(255,255,255,.24);
}
body.scrolled .topbar .icon-button {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.34);
}
.topbar__title strong { font-size: 13.5px; }
.topbar__title span { font-size: 8.8px; letter-spacing: .065em; }

/* Hero: still immersive, but it no longer monopolizes the viewport. */
.immersive-card,
.hero__content { min-height: 296px; }
.immersive-card { border-radius: 28px; box-shadow: 0 16px 34px rgba(68,89,116,.145); }
.hero__content { padding: 21px; }
.hero h1 { margin: 7px 0 9px; font-size: 33px; line-height: 1.04; }
.hero p { max-width: 350px; font-size: 12.5px; line-height: 1.60; }
.hero__actions { gap: 9px; margin-top: 16px; }
.hero__glow { width: 148px; height: 148px; top: 15%; opacity: .74; filter: blur(6px); }
.hero__ridge { bottom: -17%; height: 51%; opacity: .91; }
.hero__ridge--back { bottom: 7%; height: 35%; opacity: .22; }
.hero__flow { opacity: .15; }
.hero__flow--two { opacity: .085; }
.primary-action,
.round-action { min-height: 44px; border-radius: 15px; }
.primary-action { min-width: 172px; padding: 0 14px 0 16px; }
.round-action { width: 44px; }
.hero__actions .liquid--focus,
.hero__actions .liquid--control {
  border-color: rgba(255,255,255,.43);
  background: linear-gradient(145deg, rgba(255,255,255,.53), rgba(226,235,243,.21));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.63), inset 0 -1px 0 rgba(255,255,255,.085), 0 8px 17px rgba(29,58,92,.10);
}
.hero__actions .liquid--focus::after,
.hero__actions .liquid--control::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 7px 7px 16px rgba(255,255,255,.08), inset -7px -6px 14px rgba(45,80,115,.035);
}
.hero__actions .is-pressed,
.hero__actions .is-lit {
  border-color: rgba(255,255,255,.69);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 10px 20px rgba(29,58,92,.135);
}

/* Radius hierarchy: not every object should look like a bubble. */
.content-card { border-radius: var(--radius-lg); border-color: rgba(255,255,255,.68); }
.metric-card { padding: 13px 12px; border-radius: 18px; }
.metric-card strong { margin: 7px 0 3px; font-size: 24px; }
.notice-card { gap: 11px; margin-top: 11px; padding: 14px; border-radius: 18px; }
.notice-card__icon { width: 36px; height: 36px; border-radius: 12px; }
.action-grid { gap: 8px; margin-top: 11px; }
.action-card { min-height: 108px; padding: 14px; border-radius: 19px; }
.action-card__icon { width: 38px; height: 38px; border-radius: 12px; }
.action-card strong { margin-top: 12px; }
.progress-panel { margin-top: 11px; padding: 14px; border-radius: 19px; }
.page-title { padding: 11px 4px 14px; }
.report-card { padding: 15px; border-radius: 21px; }
.compact-form input,
.compact-form textarea { border-radius: 12px; }
.settings-list { border-radius: 20px; }
.diagnostic-card,
.test-guide { margin-top: 11px; padding: 15px; border-radius: 20px; }
.setting-row { padding: 14px 0; }
.diagnostic-card dl { gap: 9px 14px; margin-top: 13px; }

/* Material specimen cards: shorter, quieter, and optically distinct. */
.showcase-card {
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 20px;
}
.showcase-card h3 { margin: 14px 0 6px; }
.showcase-card__meta { margin-top: 12px; }
.showcase-card--mist {
  min-height: 138px;
  background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.045));
}
.showcase-card--control {
  min-height: 144px;
  background:
    radial-gradient(circle at 86% 18%, rgba(47,136,197,.045), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.46), rgba(255,255,255,.16));
}
.showcase-card--focus {
  min-height: 150px;
  background:
    linear-gradient(166deg, transparent 0 63%, rgba(47,136,197,.060) 63.3% 63.9%, transparent 64.2%),
    radial-gradient(circle at 82% 20%, rgba(47,136,197,.072), transparent 29%),
    linear-gradient(145deg, rgba(255,255,255,.65), rgba(222,233,243,.27));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.89), inset 0 -1px 0 rgba(255,255,255,.16), 0 14px 26px rgba(65,91,124,.10);
}
.showcase-card--mist .showcase-card__meta span { background: rgba(255,255,255,.10); }
.showcase-card--control .showcase-card__meta span { background: rgba(255,255,255,.20); }
.showcase-card--focus .showcase-card__meta span { background: rgba(255,255,255,.30); }

/* Navigation: visually smaller while the hit targets remain safe. */
.bottom-nav {
  min-height: var(--nav-shell-height);
  padding: 3px;
  border-radius: 19px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), 0 8px 20px rgba(73,95,126,.058);
}
.bottom-nav button {
  min-height: 46px;
  gap: 2px;
  border-radius: 14px;
}
.bottom-nav__indicator {
  top: 4px;
  bottom: 4px;
  width: calc(var(--lens-w) - 16px);
  transform: translate3d(calc(var(--lens-x) + 8px),0,0);
  border-radius: 13px;
  border-color: rgba(255,255,255,.54);
  background: linear-gradient(145deg,rgba(255,255,255,.51),rgba(232,240,247,.17));
  box-shadow: 0 3px 10px rgba(66,91,122,.045), inset 0 1px 0 rgba(255,255,255,.65), inset -6px -5px 11px rgba(74,110,148,.025);
}

/* Report submit: unmistakable focal action, but no thick Android bar. */
.submit-button { min-height: 50px; border-radius: 16px; }
.submit-button.liquid--focus {
  border-color: rgba(255,255,255,.42);
  background: linear-gradient(145deg, rgba(96,135,173,.91), rgba(69,103,139,.84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(26,58,92,.16), 0 10px 22px rgba(42,121,175,.16);
  text-shadow: 0 1px 2px rgba(28,59,95,.16);
}
.submit-button.liquid--focus::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), inset 9px 8px 18px rgba(255,255,255,.075), inset -8px -7px 15px rgba(27,60,95,.075);
}

@media (min-width: 760px) {
  .immersive-card,
  .hero__content { min-height: 326px; }
}

/* ================================================================
   v0.6.0 LIQUID GLASS COMPONENT LIBRARY
   Reusable component catalogue built on the frozen Apple discipline
   baseline. The visual language is locked; only reusable parts expand.
   ================================================================ */

.component-library-shell { padding-bottom: calc(var(--safe-bottom) + var(--nav-shell-height) + 58px); }
.library-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.library-bottom-nav button span { font-size: 9.5px; }
.library-hero .hero__content { min-height: 286px; }
.library-hero { min-height: 286px; }
.library-metric-grid .metric-card { min-height: 92px; }
.library-category-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; margin-top:11px; }
.library-category-card { min-height:118px; padding:14px; text-align:left; border-radius:19px; transition:transform .20s ease, box-shadow .20s ease; }
.library-category-card:active { transform:scale(.975); }
.category-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#fff; background:linear-gradient(145deg,var(--accent),var(--accent-strong)); box-shadow:0 7px 16px rgba(47,136,197,.15); }
.category-icon svg { width:18px; height:18px; }
.library-category-card strong,.library-category-card small { display:block; }
.library-category-card strong { margin-top:12px; font-size:14px; }
.library-category-card small { margin-top:4px; color:var(--ink-soft); font-size:10.5px; line-height:1.45; }
.library-roadmap { margin-bottom:4px; }

.library-section { margin-bottom:11px; }
.library-section__head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:4px 3px 9px; }
.library-section__head span { color:var(--ink-soft); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.library-section__head h2 { margin:4px 0 0; font-size:17px; letter-spacing:-.04em; }
.library-section__head em { color:var(--accent); font-size:10px; font-style:normal; letter-spacing:.10em; text-transform:uppercase; }
.library-panel { padding:14px; margin-bottom:11px; border-radius:19px; }
.specimen-row { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:68px; padding:13px 14px; margin-bottom:8px; border-radius:18px; }
.specimen-row:last-child { margin-bottom:0; }
.specimen-row b,.specimen-row span { display:block; }
.specimen-row b { font-size:14px; }
.specimen-row span,.specimen-row small { margin-top:3px; color:var(--ink-soft); font-size:10.5px; }
.specimen-row small { flex:0 0 auto; }

.secondary-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.secondary-tabs button { min-height:32px; padding:0 12px; border-radius:999px; color:var(--ink-soft); background:var(--accent-faint); font-size:11px; transition:.18s ease; }
.secondary-tabs button.is-active { color:var(--accent-strong); background:var(--accent-soft); font-weight:750; }
.secondary-tabs button:active { transform:scale(.95); }

.danger-button { min-height:46px; border-radius:15px; color:var(--danger-strong); background:var(--danger-soft); border:1px solid rgba(217,96,92,.15); font-size:13px; font-weight:750; }
.icon-button-row { display:flex; gap:9px; margin-top:11px; }
.mini-icon-button { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--accent-strong); }
.mini-icon-button svg { width:18px; height:18px; }
.badge-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.badge { display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border:1px solid transparent; border-radius:999px; font-size:10.5px; font-weight:750; }
.badge--neutral { color:var(--neutral); background:var(--neutral-soft); border-color:rgba(102,112,133,.10); }
.badge--accent { color:var(--accent-strong); background:var(--accent-soft); }
.badge--success { color:var(--success-strong); background:var(--success-soft); border-color:rgba(63,138,90,.12); }
.badge--warning { color:var(--warning-strong); background:var(--warning-soft); border-color:rgba(243,154,54,.12); }
.badge--danger { color:var(--danger-strong); background:var(--danger-soft); border-color:rgba(217,96,92,.12); }

.standard-list,.ranking-list,.history-list { margin-top:12px; }
.list-row { width:100%; display:flex; align-items:center; gap:10px; min-height:61px; padding:9px 0; text-align:left; border-bottom:1px solid rgba(102,118,150,.09); background:transparent; }
.list-row:last-child { border-bottom:0; }
.list-icon { display:grid; place-items:center; flex:0 0 auto; width:35px; height:35px; border-radius:11px; color:var(--accent); background:var(--accent-faint); }
.list-icon svg { width:17px; height:17px; }
.list-copy { min-width:0; flex:1; }
.list-copy b,.list-copy small { display:block; }
.list-copy b { font-size:12.5px; }
.list-copy small { margin-top:4px; overflow:hidden; color:var(--ink-soft); font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; }
.list-row em { color:var(--accent); font-size:10.5px; font-style:normal; font-weight:750; }

.form-showcase .panel-title { margin-bottom:13px; }
.field-label { display:block; margin-top:13px; }
.field-label:first-of-type { margin-top:0; }
.field-label > span,.range-field > span { display:block; margin-bottom:7px; font-size:11.5px; font-weight:750; }
.text-field,.search-field,.select-wrap { width:100%; min-height:47px; border:1px solid rgba(112,129,162,.13); border-radius:12px; background:rgba(255,255,255,.67); color:var(--ink); outline:none; transition:.20s ease; }
.text-field { padding:12px; resize:vertical; }
.search-field { display:flex; align-items:center; gap:8px; padding:0 11px; }
.search-field svg { flex:0 0 auto; width:17px; height:17px; color:var(--ink-soft); }
.search-field input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; }
.select-wrap { position:relative; overflow:hidden; }
.select-wrap select { width:100%; min-height:45px; appearance:none; border:0; outline:0; padding:0 38px 0 12px; background:transparent; color:var(--ink); font-size:12px; }
.select-wrap svg { position:absolute; right:12px; top:50%; width:16px; height:16px; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none; }
.text-field:focus,.search-field:focus-within,.select-wrap:focus-within { border-color:rgba(47,136,197,.43); box-shadow:0 0 0 4px rgba(47,136,197,.085); background:rgba(255,255,255,.88); }
.choice-group { margin-top:13px; }
.choice-row { display:flex; align-items:center; gap:10px; min-height:52px; border-bottom:1px solid rgba(102,118,150,.08); }
.choice-row:last-child { border-bottom:0; }
.choice-row input,.radio-group input { position:absolute; opacity:0; pointer-events:none; }
.choice-row > i { width:20px; height:20px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(104,122,151,.22); border-radius:7px; background:rgba(255,255,255,.55); transition:.20s ease; }
.choice-row input:checked + i { border-color:var(--accent); background:var(--accent); }
.choice-row input:checked + i::after { content:""; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg); }
.choice-row span b,.choice-row span small { display:block; }
.choice-row span b { font-size:12px; }
.choice-row span small { margin-top:3px; color:var(--ink-soft); font-size:10px; }
.radio-group { display:flex; gap:7px; margin-top:13px; }
.radio-group label { display:flex; align-items:center; gap:6px; min-height:34px; padding:0 10px; border-radius:999px; background:var(--accent-faint); color:var(--ink-soft); font-size:11px; }
.radio-group i { width:14px; height:14px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(104,122,151,.28); background:rgba(255,255,255,.62); }
.radio-group input:checked + i { border-color:var(--accent); }
.radio-group input:checked + i::after { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.radio-group label:has(input:checked) { color:var(--accent-strong); background:var(--accent-soft); font-weight:750; }
.compact-stepper-row { padding-top:0; }
.range-field { display:block; margin-top:14px; }
.range-field input { width:100%; accent-color:var(--accent); }

.loading-row { display:flex; align-items:center; gap:10px; margin-top:13px; padding:11px 0; }
.loading-row b,.loading-row small { display:block; }
.loading-row b { font-size:12px; }
.loading-row small { margin-top:3px; color:var(--ink-soft); font-size:10.5px; }
.spinner { width:24px; height:24px; flex:0 0 auto; border-radius:50%; border:2px solid rgba(47,136,197,.14); border-top-color:var(--accent); animation:spin .84s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.skeleton-stack { display:grid; gap:7px; margin-top:7px; }
.skeleton-stack i { display:block; height:10px; overflow:hidden; border-radius:999px; background:linear-gradient(100deg,rgba(100,122,150,.08),rgba(255,255,255,.52),rgba(100,122,150,.08)); background-size:220% 100%; animation:skeletonFlow 1.65s ease-in-out infinite; }
.skeleton-stack i:nth-child(2) { width:82%; }
.skeleton-stack i:nth-child(3) { width:60%; }
@keyframes skeletonFlow { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
.state-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:11px; }
.state-card { min-height:184px; padding:14px; border-radius:19px; }
.state-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; }
.state-icon svg { width:19px; height:19px; }
.state-icon--empty { color:var(--accent); background:var(--accent-faint); }
.state-icon--error { color:var(--danger); background:var(--danger-soft); }
.state-card b,.state-card small { display:block; }
.state-card b { margin-top:16px; font-size:13px; }
.state-card small { min-height:48px; margin-top:6px; color:var(--ink-soft); font-size:10.5px; line-height:1.52; }
.text-button { padding:0; margin-top:11px; background:transparent; color:var(--accent-strong); font-size:11px; font-weight:750; }

.ranking-row,.history-row { display:flex; align-items:center; gap:11px; min-height:57px; border-bottom:1px solid rgba(102,118,150,.085); }
.ranking-row:last-child,.history-row:last-child { border-bottom:0; }
.ranking-row > b { width:22px; color:var(--accent); font-size:11px; letter-spacing:.06em; }
.ranking-row span,.history-row span { flex:1; min-width:0; }
.ranking-row strong,.ranking-row small,.history-row b,.history-row small { display:block; }
.ranking-row strong,.history-row b { font-size:12px; }
.ranking-row small,.history-row small { margin-top:4px; color:var(--ink-soft); font-size:10px; }
.ranking-row em,.history-row em { color:var(--accent); font-size:11px; font-style:normal; font-weight:750; }
.history-row { width:100%; text-align:left; background:transparent; }
.pattern-settings { margin-top:11px; }

.dialog-backdrop { position:fixed; inset:0; z-index:31; pointer-events:none; opacity:0; background:rgba(30,42,58,.28); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:.26s ease; }
.dialog-backdrop.is-open { pointer-events:auto; opacity:1; }
.confirm-dialog { position:fixed; z-index:33; left:50%; top:50%; width:min(calc(100% - 40px),380px); padding:18px; border-radius:22px; opacity:0; pointer-events:none; transform:translate(-50%,-46%) scale(.94); transition:.30s cubic-bezier(.18,.86,.18,1); }
.confirm-dialog.is-open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.dialog-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:var(--danger); background:var(--danger-soft); }
.dialog-icon svg { width:20px; height:20px; }
.confirm-dialog h3 { margin:15px 0 7px; font-size:17px; letter-spacing:-.03em; }
.confirm-dialog p { margin:0; color:var(--ink-soft); font-size:11.5px; line-height:1.62; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }

body.low-power .spinner { animation-duration:1.5s; }
body.reduce-motion .spinner { animation:none !important; border-top-color:rgba(47,136,197,.45); }

@media (max-width:360px) {
  .library-category-grid,.state-grid { grid-template-columns:1fr; }
  .library-category-card { min-height:102px; }
  .library-bottom-nav button span { font-size:9px; }
}


/* v0.6.1 Nature Color System: sky blue, forest green, orange peel and dusty berry. */
:root {
  --radius-xs: 10px;
  --radius-s: 14px;
  --radius-m: 18px;
  --radius-l: 24px;
  --radius-xl: 30px;
  --radius-pill: 999px;
}
.category-icon {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid rgba(92,184,232,.10);
  box-shadow: none;
}
.action-card__icon {
  color: var(--accent-strong);
  background: var(--accent-soft) !important;
  box-shadow: none !important;
}
.solid-button {
  background: var(--accent-strong);
  box-shadow: 0 9px 18px rgba(47,136,197,.16);
}
.switch:checked { background:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 5px 14px rgba(92,184,232,.18); }
.text-field:focus,.search-field:focus-within,.select-wrap:focus-within { border-color:rgba(92,184,232,.43); box-shadow:0 0 0 4px rgba(92,184,232,.085); }
.spinner { border-color:rgba(92,184,232,.14); border-top-color:var(--accent); }
body.reduce-motion .spinner { border-top-color:rgba(92,184,232,.45); }

.palette-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:13px; }
.palette-item { display:flex; align-items:center; gap:9px; min-height:58px; padding:10px; border:1px solid rgba(102,112,133,.07); border-radius:var(--radius-s); background:rgba(255,255,255,.43); }
.palette-item > i { width:24px; height:24px; flex:0 0 auto; border-radius:50%; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px rgba(61,76,92,.10); }
.palette-item span b,.palette-item span small { display:block; }
.palette-item span b { font-size:11.5px; }
.palette-item span small { margin-top:3px; color:var(--ink-soft); font-size:9.5px; line-height:1.35; }
.palette-item--sky > i { background:var(--accent); }
.palette-item--forest > i { background:var(--success); }
.palette-item--orange > i { background:var(--warning); }
.palette-item--berry > i { background:var(--danger); }

.filter-chip-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.filter-chip { min-height:32px; padding:0 11px; border:1px solid rgba(92,184,232,.09); border-radius:var(--radius-pill); color:var(--ink-soft); background:var(--accent-faint); font-size:10.5px; }
.filter-chip.is-active { color:var(--accent-strong); background:var(--accent-soft); font-weight:750; }
.filter-chip--warning { color:var(--warning-strong); background:var(--warning-soft); border-color:rgba(243,154,54,.10); }
.filter-chip i { margin-left:5px; color:inherit; font-style:normal; font-size:13px; }
.assignee-row { display:flex; align-items:center; gap:11px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(102,112,133,.08); }
.assignee-row b,.assignee-row small { display:block; }
.assignee-row b { font-size:12px; }
.assignee-row small { margin-top:4px; color:var(--ink-soft); font-size:10px; }
.avatar-stack { display:flex; padding-left:4px; }
.avatar-stack i { display:grid; place-items:center; width:30px; height:30px; margin-left:-5px; border:2px solid rgba(255,255,255,.82); border-radius:50%; color:var(--accent-strong); background:var(--accent-soft); font-style:normal; font-size:10px; font-weight:800; }
.avatar-stack i:nth-child(2) { color:var(--success-strong); background:var(--success-soft); }
.avatar-stack i:nth-child(3) { color:var(--warning-strong); background:var(--warning-soft); }

.quick-range-row { display:flex; gap:7px; margin-top:12px; }
.quick-range { min-height:34px; padding:0 12px; border:1px solid rgba(92,184,232,.09); border-radius:var(--radius-pill); color:var(--ink-soft); background:var(--accent-faint); font-size:10.5px; }
.quick-range.is-active { color:var(--accent-strong); background:var(--accent-soft); font-weight:750; }
.date-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.date-grid label span { display:block; margin-bottom:7px; color:var(--ink-soft); font-size:10px; font-weight:700; }
.date-grid .text-field { min-height:43px; padding:9px; font-size:10.5px; }

.banner-stack { display:grid; gap:8px; margin-top:13px; }
.inline-banner { display:flex; align-items:flex-start; gap:9px; min-height:52px; padding:10px 11px; border:1px solid transparent; border-radius:var(--radius-s); }
.inline-banner > i { width:8px; height:8px; flex:0 0 auto; margin-top:4px; border-radius:50%; }
.inline-banner span b,.inline-banner span small { display:block; }
.inline-banner span b { font-size:11.5px; }
.inline-banner span small { margin-top:3px; color:var(--ink-soft); font-size:10px; line-height:1.42; }
.inline-banner--info { background:var(--accent-soft); border-color:rgba(92,184,232,.09); }
.inline-banner--info > i { background:var(--accent); }
.inline-banner--info b { color:var(--accent-strong); }
.inline-banner--success { background:var(--success-soft); border-color:rgba(63,138,90,.10); }
.inline-banner--success > i { background:var(--success); }
.inline-banner--success b { color:var(--success-strong); }
.inline-banner--warning { background:var(--warning-soft); border-color:rgba(243,154,54,.10); }
.inline-banner--warning > i { background:var(--warning); }
.inline-banner--warning b { color:var(--warning-strong); }
.inline-banner--danger { background:var(--danger-soft); border-color:rgba(217,96,92,.10); }
.inline-banner--danger > i { background:var(--danger); }
.inline-banner--danger b { color:var(--danger-strong); }

.pagination { display:flex; justify-content:flex-end; gap:6px; margin-top:13px; }
.page-button { width:34px; height:34px; border:1px solid rgba(92,184,232,.09); border-radius:var(--radius-xs); color:var(--ink-soft); background:rgba(255,255,255,.44); font-size:11px; }
.page-button.is-active { color:#fff; background:var(--accent-strong); border-color:transparent; font-weight:800; }
.page-button:disabled { opacity:.38; cursor:default; }


/* ================================================================
   v0.7.0 SKY · ORANGE · FOREST RESPONSIVE SYSTEM
   True nature color tokens + mobile breathing room + desktop gallery.
   Components stay reusable; only visual tokens and responsive layout
   are upgraded here.
   ================================================================ */
:root {
  --bg-1:#f2f9fd;
  --bg-2:#fbfdff;
  --bg-3:#f4fbf7;
  --ink:#142635;
  --ink-soft:#667b8a;
  --ink-faint:#8da0ad;
  --accent:#5cb8e8;          /* 晴空天蓝 */
  --accent-strong:#2f88c5;   /* 湖面深天蓝 */
  --accent-soft:rgba(92,184,232,.17);
  --accent-faint:rgba(92,184,232,.085);
  --success:#3f8a5a;         /* 森林绿 */
  --success-strong:#2f7047;
  --success-soft:rgba(63,138,90,.15);
  --warning:#f39a36;         /* 橙子橘 */
  --warning-strong:#d97716;
  --warning-soft:rgba(243,154,54,.16);
  --danger:#d9605c;
  --danger-strong:#b7444a;
  --danger-soft:rgba(217,96,92,.13);
  --shadow:0 18px 46px rgba(60,107,137,.13);
  --shadow-soft:0 9px 24px rgba(60,107,137,.085);
  --radius-xs:10px;
  --radius-s:14px;
  --radius-m:18px;
  --radius-l:24px;
  --radius-xl:30px;
  --radius-pill:999px;
}
.ambient__mesh {
  opacity:.70;
  background:
    radial-gradient(ellipse at 12% 7%, rgba(116,205,247,.32), transparent 36%),
    radial-gradient(ellipse at 90% 12%, rgba(255,185,95,.11), transparent 28%),
    radial-gradient(ellipse at 76% 91%, rgba(82,165,106,.15), transparent 34%);
  filter:blur(34px) saturate(104%);
}
.hero__scene { background:linear-gradient(158deg,#8bd2f4 0%,#67b7e4 48%,#79bcd7 100%); }
.hero__scene::before { background:linear-gradient(180deg,rgba(12,74,115,.02),rgba(18,78,116,.32)); }
.hero__glow { background:radial-gradient(circle,rgba(255,219,160,.88),rgba(255,188,100,.24) 38%,transparent 69%); }
.hero__ridge { background:linear-gradient(155deg,#4f9a70,#357b58 58%,#285e45); }
.hero__ridge--back { background:linear-gradient(145deg,#e4f5fa,#70b7ca); }
.hero__flow { background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent); }
.primary-action,.round-action { color:#1d6999; }
.solid-button { background:linear-gradient(145deg,#5cb8e8,#2f88c5); box-shadow:0 9px 18px rgba(47,136,197,.19); }
.progress-track i { background:linear-gradient(90deg,#5cb8e8,#3f8a5a); }
.switch:checked { background:#5cb8e8; box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 5px 14px rgba(92,184,232,.22); }
.category-icon,.action-card__icon { color:#2f88c5; background:rgba(92,184,232,.13) !important; border-color:rgba(92,184,232,.16); }
.status-dot { color:#3f8a5a; }.status-dot i { background:#3f8a5a; box-shadow:0 0 0 4px rgba(63,138,90,.15); }
.badge--accent { color:#2f88c5; background:rgba(92,184,232,.16); }
.badge--success { color:#2f7047; background:rgba(63,138,90,.15); }
.badge--warning { color:#d97716; background:rgba(243,154,54,.17); }
.badge--danger { color:#b7444a; background:rgba(217,96,92,.14); }
.inline-banner--info { background:rgba(92,184,232,.15); border-color:rgba(92,184,232,.14); }
.inline-banner--success { background:rgba(63,138,90,.14); border-color:rgba(63,138,90,.13); }
.inline-banner--warning { background:rgba(243,154,54,.15); border-color:rgba(243,154,54,.13); }
.inline-banner--danger { background:rgba(217,96,92,.13); border-color:rgba(217,96,92,.12); }
.palette-item--sky > i { background:#5cb8e8; }
.palette-item--forest > i { background:#3f8a5a; }
.palette-item--orange > i { background:#f39a36; }
.palette-item--berry > i { background:#d9605c; }

/* Mobile: increase breathing room and perceived confidence. */
@media (max-width:759px) {
  .app-shell { width:min(100%,640px); padding-left:18px; padding-right:18px; }
  .topbar,.bottom-nav { width:calc(100% - 36px); }
  .topbar__title strong { font-size:15px; }
  .topbar__title span { font-size:9.4px; opacity:.86; }
  .page-title { padding:15px 4px 18px; }
  .page-title h1 { font-size:25px; }
  .page-title p { font-size:12.8px; line-height:1.68; }
  .library-section__head h2 { font-size:18px; }
  .library-section__head span,.library-section__head em { font-size:10.4px; }
  .library-panel { padding:16px; margin-bottom:13px; }
  .panel-title strong { font-size:15px; }
  .panel-title span,.panel-title em { font-size:11.3px; }
  .field-label > span,.range-field > span { font-size:11.2px; }
  .text-field,.search-field,.select-wrap { min-height:48px; }
  .solid-button,.glass-button,.outline-button,.danger-button { min-height:48px; font-size:13.5px; }
  .metric-card { padding:15px 13px; }
  .metric-card strong { font-size:26px; }
  .library-category-card { min-height:126px; padding:15px; }
  .library-category-card strong { font-size:14.5px; }
  .library-category-card small { font-size:10.8px; }
  .category-icon { width:40px; height:40px; }
  .notice-card { padding:16px; gap:13px; }
  .notice-card strong { font-size:14.5px; }
  .notice-card p { font-size:11.3px; }
  .bottom-nav { min-height:62px; }
  .bottom-nav button { min-height:52px; }
  .library-bottom-nav button span { font-size:9.8px; }
  .palette-item { min-height:64px; padding:11px; }
  .palette-item > i { width:27px; height:27px; }
  .palette-item span b { font-size:12px; }
  .palette-item span small { font-size:9.8px; }
  .inline-banner { min-height:58px; padding:12px; }
  .inline-banner span b { font-size:12px; }
  .inline-banner span small { font-size:10.3px; }
}

/* Tablet: stop stretching a phone canvas; establish balanced columns. */
@media (min-width:760px) and (max-width:1023px) {
  .app-shell { width:min(100%,940px); padding-left:28px; padding-right:28px; }
  .topbar,.bottom-nav { width:min(calc(100% - 56px),884px); }
  .view.is-active { max-width:none; width:100%; }
  [data-view="home"].is-active { display:grid; grid-template-columns:1.12fr .88fr; gap:16px; align-items:start; }
  [data-view="home"] .library-hero { grid-column:1; grid-row:1 / span 4; min-height:430px; }
  [data-view="home"] .library-hero .hero__content { min-height:430px; }
  [data-view="home"] .section-head,[data-view="home"] .library-metric-grid,[data-view="home"] > .notice-card,[data-view="home"] .library-roadmap { grid-column:2; margin-top:0; }
  [data-view="home"] .library-category-grid { grid-column:1 / -1; grid-template-columns:repeat(4,1fr); }
  [data-view]:not([data-view="home"]).is-active { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
  [data-view]:not([data-view="home"]) > .page-title,[data-view]:not([data-view="home"]) > .library-section,[data-view="feedback"] > .state-grid,[data-view="feedback"] > .notice-card,[data-view="patterns"] > .metric-grid,[data-view="patterns"] > .notice-card { grid-column:1 / -1; }
  .library-section { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .library-section__head { grid-column:1 / -1; }
  .specimen-row { margin-bottom:0; min-height:92px; }
}

/* Desktop: true desktop gallery, not a widened phone page. */
@media (min-width:1024px) {
  .app-shell { width:min(100%,1480px); max-width:none; padding:calc(var(--safe-top) + 88px) 42px 48px 144px; }
  .viewport { width:min(100%,1280px); margin:0 auto; }
  .view.is-active { max-width:none; width:100%; }
  .topbar { width:min(calc(100% - 96px),1280px); min-height:62px; padding:8px 10px; }
  .topbar__title strong { font-size:16px; }
  .topbar__title span { font-size:10px; }
  .topbar .icon-button { width:44px; height:44px; }
  .library-bottom-nav { left:max(28px,calc(50% - 700px)); top:calc(var(--safe-top) + 88px); bottom:auto; transform:none; width:82px; min-height:auto; grid-template-columns:1fr; grid-template-rows:repeat(4,62px); gap:4px; padding:6px; border-radius:26px; }
  .library-bottom-nav button { min-height:62px; border-radius:20px; gap:5px; }
  .library-bottom-nav button span { font-size:10px; }
  .library-bottom-nav button svg { width:19px; height:19px; }
  .library-bottom-nav .bottom-nav__indicator { left:5px; right:5px; top:auto; bottom:auto; width:calc(100% - 10px) !important; height:calc(var(--lens-h) - 10px); transform:translate3d(0,calc(var(--lens-y) + 5px),0); border-radius:19px; }
  [data-view="home"].is-active { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(370px,.92fr); grid-template-areas:"hero heading" "hero metrics" "hero notice" "hero roadmap" "categories roadmap"; gap:18px 20px; align-items:start; }
  [data-view="home"] .library-hero { grid-area:hero; min-height:514px; }
  [data-view="home"] .library-hero .hero__content { min-height:514px; padding:34px; }
  [data-view="home"] .hero h1 { font-size:48px; }
  [data-view="home"] .hero p { max-width:500px; font-size:15px; }
  [data-view="home"] .section-head { grid-area:heading; margin:8px 2px 0; }
  [data-view="home"] .library-metric-grid { grid-area:metrics; }
  [data-view="home"] > .notice-card { grid-area:notice; margin-top:0; }
  [data-view="home"] .library-category-grid { grid-area:categories; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:0; }
  [data-view="home"] .library-roadmap { grid-area:roadmap; margin-top:0; align-self:stretch; }
  .library-category-card { min-height:132px; }
  [data-view]:not([data-view="home"]).is-active { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:start; }
  [data-view]:not([data-view="home"]) > .page-title { grid-column:1 / -1; padding:8px 4px 10px; }
  [data-view]:not([data-view="home"]) > .page-title h1 { font-size:32px; }
  [data-view]:not([data-view="home"]) > .page-title p { max-width:760px; font-size:14px; }
  [data-view="foundation"] > .library-section { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  [data-view="foundation"] > .library-section .library-section__head { grid-column:1 / -1; }
  [data-view="foundation"] > .library-section .specimen-row { min-height:104px; margin-bottom:0; }
  [data-view="foundation"] > .library-panel,[data-view="forms"] > .library-panel,[data-view="feedback"] > .library-panel { grid-column:span 6; margin-bottom:0; }
  [data-view="feedback"] > .state-grid,[data-view="feedback"] > .notice-card,[data-view="patterns"] > .metric-grid,[data-view="patterns"] > .notice-card { grid-column:1 / -1; }
  [data-view="patterns"] > .library-panel,[data-view="patterns"] > .settings-list,[data-view="patterns"] > .diagnostic-card { grid-column:span 6; margin-top:0; margin-bottom:0; }
  .library-panel { padding:18px; }
  .panel-title strong { font-size:15px; }
  .palette-grid { grid-template-columns:repeat(4,1fr); }
  .state-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
  .bottom-sheet { width:min(100%,620px); }
  .toast { top:calc(var(--safe-top) + 78px); }
}


/* ================================================================
   v0.7.1 APPLE DISCIPLINE FINAL POLISH
   System closeout only. No new component, route, or feature.
   Radius, materials, semantic states, control hierarchy and light-mode
   skeleton are locked below as reusable product tokens.
   ================================================================ */
:root {
  /* Stable nature palette: clear sky, orange peel, forest leaves. */
  --accent:#5cb8e8;
  --accent-strong:#268ac9;
  --accent-soft:rgba(92,184,232,.155);
  --accent-faint:rgba(92,184,232,.072);
  --success:#3f8a5a;
  --success-strong:#2f7047;
  --success-soft:rgba(63,138,90,.135);
  --warning:#f39a36;
  --warning-strong:#d97716;
  --warning-soft:rgba(243,154,54,.145);
  --danger:#d9605c;
  --danger-strong:#b84b49;
  --danger-soft:rgba(217,96,92,.115);
  --neutral:#6d7a89;
  --neutral-soft:rgba(109,122,137,.095);

  /* Light skeleton: visible structure without grey-card heaviness. */
  --bg-1:#eff7fb;
  --bg-2:#fbfdff;
  --bg-3:#f2faf6;
  --ink:#102536;
  --ink-soft:#607789;
  --ink-faint:#8295a4;
  --solid:rgba(255,255,255,.925);
  --solid-strong:rgba(255,255,255,.975);
  --surface-soft:rgba(255,255,255,.755);
  --line:rgba(255,255,255,.77);
  --line-soft:rgba(151,181,199,.18);
  --shadow:0 16px 38px rgba(49,91,118,.105);
  --shadow-soft:0 7px 18px rgba(49,91,118,.065);

  /* Locked radius scale. Do not hand-write extra radii in projects. */
  --radius-xs:10px;
  --radius-s:14px;
  --radius-m:18px;
  --radius-l:24px;
  --radius-xl:30px;
  --radius-hero:32px;
  --radius-pill:999px;
}

/* 1. Light canvas skeleton: slightly stronger card definition. */
.content-card {
  border-color:rgba(157,188,207,.22);
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.875));
  box-shadow:0 7px 18px rgba(49,91,118,.062), inset 0 1px 0 rgba(255,255,255,.82);
}
.library-panel,.settings-list,.diagnostic-card,.test-guide { border-radius:var(--radius-l); }
.metric-card { border-radius:var(--radius-m); }
.library-category-card,.notice-card,.action-card,.progress-panel { border-radius:var(--radius-m); }
.text-field,.search-field,.select-wrap { border-radius:var(--radius-m); }
.list-icon,.notice-card__icon,.category-icon,.action-card__icon { border-radius:var(--radius-s); }
.badge,.filter-chip,.quick-range,.secondary-tabs button,.radio-group label { border-radius:var(--radius-pill); }
.immersive-card { border-radius:var(--radius-hero); }

/* 2. Glass materials: feel like material, not a glowing skin. */
.liquid {
  border-color:rgba(255,255,255,.61);
  background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(255,255,255,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(255,255,255,.10),0 8px 21px rgba(58,91,116,.066);
  backdrop-filter:blur(20px) saturate(114%);
  -webkit-backdrop-filter:blur(20px) saturate(114%);
}
.liquid::before { opacity:calc(var(--shine) * .72); }
.liquid::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 8px 9px 20px rgba(255,255,255,.09),inset -8px -7px 16px rgba(70,116,147,.03); }
.liquid--mist {
  --shine:.10;
  border-color:rgba(255,255,255,.38);
  background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.075));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 4px 14px rgba(58,91,116,.038);
  backdrop-filter:blur(11px) saturate(104%);
  -webkit-backdrop-filter:blur(11px) saturate(104%);
}
.liquid--control {
  --shine:.34;
  border-color:rgba(255,255,255,.61);
  background:linear-gradient(145deg,rgba(255,255,255,.47),rgba(255,255,255,.17));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70),0 7px 18px rgba(58,91,116,.055);
  backdrop-filter:blur(20px) saturate(113%);
  -webkit-backdrop-filter:blur(20px) saturate(113%);
}
.liquid--focus {
  --shine:.57;
  border-color:rgba(255,255,255,.72);
  background:linear-gradient(145deg,rgba(255,255,255,.61),rgba(227,239,246,.25));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 10px 24px rgba(58,91,116,.083);
  backdrop-filter:blur(26px) saturate(118%);
  -webkit-backdrop-filter:blur(26px) saturate(118%);
}
.liquid--focus::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 10px 10px 22px rgba(255,255,255,.11),inset -9px -8px 17px rgba(70,116,147,.042); }

/* 3. Top toolbar: tighten optical geometry and typography. */
.topbar {
  border-radius:var(--radius-pill);
  border-color:rgba(255,255,255,.54);
  background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(255,255,255,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.61),0 6px 17px rgba(58,91,116,.052);
}
.topbar__title strong { font-weight:700; letter-spacing:-.012em; }
.topbar__title span { color:#6f8494; font-weight:650; opacity:.92; }
.topbar .icon-button { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.085); }
body.scrolled .topbar { border-color:rgba(255,255,255,.70); background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.22)); box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 9px 23px rgba(58,91,116,.09); }

/* 4. Hero: nature remains expressive but control material steps back. */
.hero__ridge { filter:saturate(.90); }
.hero__glow { opacity:.66; }
.hero__flow { opacity:.115; }
.hero__flow--two { opacity:.06; }
.hero__actions .liquid--focus,.hero__actions .liquid--control {
  border-color:rgba(255,255,255,.36);
  background:linear-gradient(145deg,rgba(255,255,255,.45),rgba(232,242,247,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 6px 15px rgba(15,72,106,.085);
}
.hero__actions .liquid--focus::after,.hero__actions .liquid--control::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),inset 6px 6px 13px rgba(255,255,255,.055); }
.hero__actions .is-lit,.hero__actions .is-pressed { border-color:rgba(255,255,255,.58); box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 18px rgba(15,72,106,.11); }

/* 5. Locked button hierarchy. */
.solid-button {
  border-radius:var(--radius-m);
  background:linear-gradient(145deg,#63bdea,#3398d3);
  box-shadow:0 7px 15px rgba(38,138,201,.16),inset 0 1px 0 rgba(255,255,255,.22);
}
.glass-button { border-radius:var(--radius-m); color:#267db5; }
.outline-button { border-radius:var(--radius-m); border-color:rgba(92,138,167,.18); background:rgba(255,255,255,.36); color:#537488; }
.danger-button { border-radius:var(--radius-m); color:#b84b49; background:rgba(217,96,92,.105); border-color:rgba(217,96,92,.11); }
.mini-icon-button { border-radius:var(--radius-s); }

/* 6. Semantic status roles: same meanings in every component. */
.badge { min-height:24px; padding:0 9px; }
.badge--neutral { color:var(--neutral); background:var(--neutral-soft); border-color:rgba(109,122,137,.08); }
.badge--accent { color:#287db4; background:rgba(92,184,232,.145); border-color:rgba(92,184,232,.08); }
.badge--success { color:#2f7047; background:rgba(63,138,90,.13); border-color:rgba(63,138,90,.08); }
.badge--warning { color:#c96d12; background:rgba(243,154,54,.14); border-color:rgba(243,154,54,.08); }
.badge--danger { color:#b84b49; background:rgba(217,96,92,.11); border-color:rgba(217,96,92,.07); }
.inline-banner { border-radius:var(--radius-m); }
.inline-banner--info { background:rgba(92,184,232,.13); border-color:rgba(92,184,232,.09); }
.inline-banner--success { background:rgba(63,138,90,.125); border-color:rgba(63,138,90,.08); }
.inline-banner--warning { background:rgba(243,154,54,.135); border-color:rgba(243,154,54,.08); }
.inline-banner--danger { background:rgba(217,96,92,.105); border-color:rgba(217,96,92,.07); }

/* 7. Small control rhythm. */
.filter-chip,.quick-range,.secondary-tabs button { min-height:32px; padding-left:12px; padding-right:12px; }
.radio-group label { min-height:32px; padding:0 10px; }
.choice-row > i { border-radius:7px; }
.setting-row { min-height:58px; }

/* 8. Native controls refined for product-grade forms. */
.switch { background:linear-gradient(145deg,rgba(224,232,239,.96),rgba(204,216,227,.84)); border:1px solid rgba(138,159,177,.16); box-shadow:inset 0 1px 1px rgba(255,255,255,.68); }
.switch:checked { border-color:rgba(92,184,232,.30); background:linear-gradient(145deg,#67bfeb,#3ca0d9); box-shadow:inset 0 1px 0 rgba(255,255,255,.31),0 4px 12px rgba(92,184,232,.18); }
.range-field input[type="range"] { appearance:none; height:22px; background:transparent; accent-color:transparent; }
.range-field input[type="range"]::-webkit-slider-runnable-track { height:5px; border-radius:var(--radius-pill); background:linear-gradient(90deg,#5cb8e8 0%,#5cb8e8 var(--range-pct,72%),rgba(157,176,192,.25) var(--range-pct,72%),rgba(157,176,192,.25) 100%); box-shadow:inset 0 1px 1px rgba(55,88,108,.08); }
.range-field input[type="range"]::-webkit-slider-thumb { appearance:none; width:18px; height:18px; margin-top:-6.5px; border:2px solid rgba(255,255,255,.92); border-radius:50%; background:#4aa6db; box-shadow:0 3px 9px rgba(38,126,179,.22); }
.range-field input[type="range"]::-moz-range-track { height:5px; border-radius:var(--radius-pill); background:rgba(157,176,192,.25); }
.range-field input[type="range"]::-moz-range-progress { height:5px; border-radius:var(--radius-pill); background:#5cb8e8; }
.range-field input[type="range"]::-moz-range-thumb { width:16px; height:16px; border:2px solid rgba(255,255,255,.92); border-radius:50%; background:#4aa6db; box-shadow:0 3px 9px rgba(38,126,179,.22); }

/* 9. Bottom lens: present but never competes with content. */
.bottom-nav { border-radius:var(--radius-pill); border-color:rgba(255,255,255,.50); box-shadow:inset 0 1px 0 rgba(255,255,255,.53),0 6px 16px rgba(58,91,116,.048); }
.bottom-nav__indicator {
  border-radius:var(--radius-pill);
  border-color:rgba(255,255,255,.43);
  background:linear-gradient(145deg,rgba(255,255,255,.40),rgba(232,242,247,.13));
  box-shadow:0 2px 7px rgba(58,91,116,.038),inset 0 1px 0 rgba(255,255,255,.52);
}
.bottom-nav button.is-active { color:#268ac9; }

/* Desktop keeps the same tokens; only the arrangement changes. */
@media (min-width:1024px) {
  .library-bottom-nav { border-radius:28px; }
  .library-bottom-nav button { border-radius:var(--radius-m); }
  .library-bottom-nav .bottom-nav__indicator { border-radius:var(--radius-m); }
}