:root {
  color-scheme: dark;
  --space-950: #030817;
  --space-900: #06102a;
  --space-850: #091533;
  --space-800: #0a1738;
  --space-700: #102551;
  --cyan: #35e7ff;
  --cyan-2: #7af3ff;
  --blue: #6c63ff;
  --gold: #ffcb57;
  --orange: #ff8c42;
  --green: #44e0a2;
  --red: #ff6b7a;
  --text: #f4f8ff;
  --muted: #9ba9c9;
  --line: rgba(135, 173, 255, .18);
  --panel: rgba(10, 23, 56, .82);
  --panel-solid: #0a1738;
  --shadow: 0 24px 70px rgba(0, 5, 24, .35);
  --glow: 0 0 0 1px rgba(53, 231, 255, .12), 0 18px 55px rgba(20, 94, 168, .22);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei UI", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--space-950); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--text); background: var(--space-950); }
button, input, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
button, select, input { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .48; }
a, button, input, select { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid rgba(53, 231, 255, .72);
  outline-offset: 3px;
}

.skip-link { position: fixed; z-index: 999; left: 16px; top: 12px; visibility: hidden; padding: 10px 14px; color: #06102a; border-radius: 10px; background: var(--cyan); font-weight: 800; transform: translateY(-150%); transition: transform .16s ease; }
body.is-logged-in .skip-link { visibility: visible; }
.skip-link:focus-visible { transform: translateY(0); }
h1, h2, h3 { text-wrap: balance; scroll-margin-top: 24px; }

/* Login · cinematic mission selection */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr);
  min-height: 100vh;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(2, 7, 22, .2) 0 48%, rgba(3, 8, 23, .76) 70%, #030817 100%),
    linear-gradient(0deg, rgba(2, 8, 27, .72), transparent 45%),
    url('/jump-engine-hero.webp') center/cover no-repeat,
    #06102a;
}

body.is-logged-in .login-screen { display: none; }
.login-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(32px, 4.5vw, 72px); }
.login-story::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(transparent, rgba(2, 7, 23, .76)); pointer-events: none; }
.login-story-brand, .login-story-copy { position: relative; z-index: 1; }
.login-story-brand { display: flex; align-items: center; gap: 14px; width: fit-content; padding: 10px 14px 10px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(6,16,42,.5); backdrop-filter: blur(16px); }
.login-story-brand strong { display: block; font-size: 18px; letter-spacing: .06em; }
.login-story-brand span { display: block; margin-top: 2px; color: var(--cyan-2); font: 700 12px/1.2 Inter, sans-serif; letter-spacing: .16em; }
.login-story-copy { max-width: 620px; padding-bottom: 14px; text-shadow: 0 3px 24px rgba(0,0,0,.5); }
.login-story-copy > span { display: inline-flex; padding: 7px 10px; border: 1px solid rgba(53,231,255,.38); border-radius: 99px; color: var(--cyan-2); background: rgba(5,19,43,.54); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.login-story-copy h2 { max-width: 580px; margin: 18px 0 12px; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.06; letter-spacing: -.04em; }
.login-story-copy p { max-width: 540px; margin: 0; color: #dae7ff; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.8; }

.login-card {
  align-self: center;
  justify-self: center;
  width: min(430px, calc(100% - 48px));
  margin: 40px;
  padding: 38px;
  border: 1px solid rgba(122, 243, 255, .2);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(12, 30, 68, .86), rgba(4, 11, 29, .92));
  box-shadow: 0 40px 100px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(24px);
}
.login-brand { align-items: flex-start; margin-bottom: 30px; }
.login-kicker { display: block; margin: 2px 0 5px; color: var(--cyan); font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .2em; }
.login-card h1 { margin: 0; font-size: 29px; letter-spacing: -.025em; }
.login-card .brand p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.login-card > label { display: grid; gap: 9px; margin-top: 18px; color: #c6d4ef; font-size: 13px; font-weight: 700; }
.login-card .parent-password-row { display: none; }
.login-card.login-parent .parent-password-row { display: grid; }
.login-card > .primary-button { width: 100%; margin-top: 24px; }
.login-error, .form-error { min-height: 20px; margin: 9px 0 0; color: #ff91a0; font-size: 12px; line-height: 1.5; }
.login-decor { display: none; }

/* Shared identity */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  overflow: hidden;
  color: transparent;
  border-radius: 14px;
  background: url('/runtime-images/jump-engine-logo.png?v=20260815-logo-v1') center/contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(53,231,255,.28));
}
.sidebar .brand h1 { margin: 0; font-size: 17px; letter-spacing: .035em; white-space: nowrap; }
.brand-kicker { display: block; margin-top: 4px; color: var(--cyan); font: 700 11px/1 Inter, sans-serif; letter-spacing: .16em; }

/* Application frame */
.app-shell { display: grid; grid-template-columns: 258px minmax(0, 1fr); min-height: 100vh; visibility: hidden; opacity: 0; }
body.is-logged-in .app-shell { visibility: visible; opacity: 1; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 258px;
  padding: 28px 20px;
  border-right: 1px solid rgba(101,149,241,.14);
  background:
    radial-gradient(circle at 40% 0, rgba(52, 90, 183, .22), transparent 34%),
    linear-gradient(180deg, #081631, #050c20 72%);
}
.sidebar, .sidebar .brand h1, .sidebar .session-card > strong { color: #f4f8ff; }
.sidebar::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 18px; height: 80px; opacity: .38; background: radial-gradient(circle, var(--cyan) 0 1px, transparent 1.5px) 0 0/22px 22px; mask-image: linear-gradient(transparent,#000); pointer-events: none; }
.session-card { position: relative; margin: 28px 0 20px; padding: 17px; border: 1px solid rgba(92,146,249,.18); border-radius: 18px; background: rgba(17,37,79,.46); text-align: center; }
.session-card > span { display: block; color: var(--cyan-2); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.session-card > strong { display: block; margin: 6px 0 12px; font-size: 15px; }
.session-card > button { margin-right: 10px; }
.reset-password-form { display: grid; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.nav-list { display: grid; gap: 7px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #93a5ca;
  background: transparent;
  text-align: left;
  font-weight: 700;
  transition: .2s var(--ease);
}
.nav-item::before { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(125,157,219,.26); border-radius: 9px; color: #8ba0ca; font-size: 13px; content: "◇"; }
.nav-item[data-page="overview"]::before { content: "⌂"; }
.nav-item[data-page="growthTasks"]::before { content: "✓"; }
.nav-item[data-page="records"]::before { content: "≋"; }
.nav-item[data-page="rewards"]::before { content: "✦"; }
.nav-item[data-page="manage"]::before { content: "◎"; }
.nav-item[data-page="prizeSettings"]::before { content: "⬡"; }
.nav-item:hover { color: #d9e8ff; background: rgba(70,110,199,.12); }
.nav-item.active { color: #fff; border-color: rgba(53,231,255,.25); background: linear-gradient(90deg, rgba(35,102,177,.42), rgba(31,61,129,.18)); box-shadow: inset 3px 0 var(--cyan); }
.nav-item.active::before { color: var(--cyan); border-color: rgba(53,231,255,.45); background: rgba(53,231,255,.1); }
.parent-only { display: none; }
html.is-parent .parent-only { display: flex; }
.parent-only-action { display: none; }
html.is-parent .parent-only-action { display: inline-flex; }
.parent-lottery-kid, .parent-exchange-kid { display: none !important; }
html.is-parent .parent-lottery-kid, html.is-parent .parent-exchange-kid { display: grid !important; }
html.is-parent .child-panel { display: none; }

html.is-parent .parent-exchange-kid {
  justify-items: center;
  text-align: center;
}
html.is-parent .parent-exchange-kid .parent-pilot-label {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #244f72;
}
html.is-parent .parent-exchange-kid .parent-pilot-label small {
  color: #1687b3;
  font: 900 12px/1.1 Inter, sans-serif;
  letter-spacing: .14em;
}
html.is-parent .parent-exchange-kid .parent-pilot-label strong {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 900;
}
html.is-parent .parent-lottery-kid {
  justify-items: center;
  text-align: center;
}
html.is-parent .parent-lottery-kid .parent-pilot-label {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 100%;
  color: #174f79;
  text-align: center;
}
html.is-parent .parent-lottery-kid .parent-pilot-label small {
  color: #118ab6;
  font: 900 13px/1.1 Inter,sans-serif;
  letter-spacing: .14em;
}
html.is-parent .parent-lottery-kid .parent-pilot-label strong {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}
html.is-parent .parent-lottery-kid #lotteryKid {
  text-align: center;
  text-align-last: center;
  padding-left: 12px;
  padding-right: 34px;
  font-size: 17px;
  font-weight: 850;
}
html.is-parent .parent-lottery-kid #lotteryKid option {
  padding: 0;
  text-align: center;
  text-align-last: center;
  text-indent: -14px;
}
html.is-parent #exchangeKidFilter {
  width: 100%;
  color: #173e63;
  border: 1px solid rgba(56, 165, 200, .48);
  background: linear-gradient(135deg, rgba(194, 243, 242, .76), rgba(199, 227, 250, .68));
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 8px 18px rgba(54,143,175,.09);
  text-align: center;
  text-align-last: center;
  font-size: 18px;
  font-weight: 850;
}
html.is-parent #exchangeKidFilter:hover,
html.is-parent #exchangeKidFilter:focus {
  border-color: #29a8c8;
  background: linear-gradient(135deg, rgba(174, 239, 239, .86), rgba(185, 217, 249, .78));
}

.content { grid-column: 2; min-width: 0; min-height: 100vh; padding: 0 clamp(24px, 3vw, 52px) 56px; background: radial-gradient(circle at 92% 0, rgba(53,99,204,.19), transparent 28%), linear-gradient(180deg, #071126, #050a19); }
.topbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 112px; padding: 24px 0; }
.topbar > div:first-child { padding-left: 16px; }
.topbar h2 { margin: 4px 0 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.eyebrow { margin: 0; color: var(--cyan); font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .17em; }
.user-card { display: flex; align-items: center; gap: 11px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 16px; background: rgba(11,28,62,.66); }
.user-card strong, .user-card span { display: block; }
.user-card strong { font-size: 13px; }
.user-card span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.23); border-radius: 12px; color: #071126; background: linear-gradient(135deg,var(--cyan),#c0f8ff); font-weight: 900; box-shadow: 0 8px 25px rgba(53,231,255,.22); }
.theme-chengcheng .avatar { background: linear-gradient(135deg,var(--gold),#fff0aa); }
.sticker-strip { display: none; }

.page { display: none; animation: page-in .35s var(--ease); }
.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(7px); } }

/* Panels and dashboard */
.overview-grid { display: grid; grid-template-columns: minmax(380px, 1.8fr) repeat(3, minmax(150px, .65fr)); gap: 16px; }
.score-panel, .stat-card, .panel { border: 1px solid var(--line); box-shadow: var(--shadow); }
.score-panel { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 206px; padding: 30px; overflow: hidden; border-color: rgba(73,184,255,.25); border-radius: var(--radius-xl); background: linear-gradient(120deg, rgba(14,44,95,.98), rgba(20,32,86,.96)); }
.score-panel::before { content: ""; position: absolute; inset: auto -80px -170px auto; width: 370px; height: 370px; border: 1px solid rgba(53,231,255,.18); border-radius: 50%; box-shadow: 0 0 0 35px rgba(53,231,255,.025),0 0 0 75px rgba(108,99,255,.025); }
.score-panel::after { content: "JUMP ENGINE · ENERGY CORE"; position: absolute; right: 24px; top: 19px; color: rgba(145,225,255,.48); font: 700 11px/1 Inter,sans-serif; letter-spacing: .18em; }
.score-copy { position: relative; z-index: 1; }
.tag, .status-pill, .mini-label { display: inline-flex; align-items: center; width: fit-content; border-radius: 99px; font-weight: 800; }
.tag { padding: 6px 10px; color: var(--cyan-2); border: 1px solid rgba(53,231,255,.22); background: rgba(53,231,255,.08); font-size: 10px; letter-spacing: .08em; }
.score-copy > strong { display: block; margin: 8px 0 4px; color: #fff; font: 850 clamp(48px, 5vw, 70px)/1 Inter,sans-serif; letter-spacing: -.06em; }
.score-copy p { max-width: 330px; margin: 12px 0 0; color: #aebee0; font-size: 13px; line-height: 1.7; }
.score-ring { --progress: 72%; position: relative; z-index: 1; display: grid; flex: 0 0 auto; place-items: center; width: 120px; height: 120px; margin-left: 20px; border-radius: 50%; background: conic-gradient(var(--cyan) var(--progress), rgba(122,166,238,.13) 0); box-shadow: 0 0 34px rgba(53,231,255,.18); }
.score-ring::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(121,204,255,.14); border-radius: inherit; background: #0d2450; }
.score-ring span { position: relative; z-index: 1; font: 800 20px/1 Inter,sans-serif; }
.score-ring span { color: #fff; }

.stat-card { display: flex; flex-direction: column; justify-content: center; min-height: 206px; padding: 24px; border-radius: var(--radius-lg); background: linear-gradient(155deg,rgba(17,39,83,.88),rgba(8,20,47,.9)); }
.stat-card > span { color: #9aafd4; font-size: 12px; font-weight: 700; }
.stat-card > strong { margin: 16px 0 7px; color: var(--cyan-2); font: 850 clamp(25px,2.2vw,34px)/1 Inter,sans-serif; }
.stat-card:nth-child(3) > strong { color: var(--gold); }
.stat-card:nth-child(4) > strong { color: #bfadff; }
.stat-card p { margin: 0; color: #788aad; font-size: 11px; line-height: 1.5; }
.stat-card-kicker {
  display: block;
  max-width: calc(100% - 72px);
  margin-bottom: 9px;
  color: var(--cyan);
  font: 900 12px/1.15 Inter,sans-serif;
  letter-spacing: .08em;
  white-space: normal;
}
.overview-grid .stat-card::before { top: 52px; }
.panel-heading-with-kicker { display: grid; gap: 5px; }
.panel-heading-with-kicker small,
.task-console-english {
  color: #138ab6;
  font: 900 12px/1 Inter,sans-serif;
  letter-spacing: .14em;
}
.supply-heading-copy { width: 116px; }
.supply-heading-copy small { display: grid; gap: 3px; line-height: 1; }
.supply-heading-copy small span { display: block; }
.task-console-english { display: block; margin-bottom: 5px; }

.mission-illustration { position: relative; min-height: 250px; margin-top: 18px; overflow: hidden; border: 1px solid rgba(53,231,255,.2); border-radius: var(--radius-xl); background: linear-gradient(90deg,rgba(3,10,28,.66) 0,rgba(3,10,28,.48) 27%,rgba(3,10,28,.14) 49%,transparent 68%),url('/jump-engine-growth.webp?v=brothers-7') 67% 22%/cover no-repeat,#071126; box-shadow: var(--shadow); }
.mission-illustration::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(2,8,23,.28),transparent 48%); pointer-events: none; }
.mission-illustration-copy { position: absolute; z-index: 1; top: 50%; left: clamp(24px,4vw,58px); width: min(390px,36%); color: white; transform: translateY(-50%); }
.mission-illustration-copy span { color: var(--cyan); font: 800 12px/1 Inter,sans-serif; letter-spacing: .18em; }
.mission-illustration-copy h3 { margin: 12px 0 10px; font-size: clamp(22px,2.1vw,31px); line-height: 1.25; }
.mission-illustration-copy p { margin: 0; color: #b7c9e9; font-size: 12px; line-height: 1.75; }
html.is-parent .child-only-illustration { display: none; }

.two-column { display: grid; grid-template-columns: minmax(0,1.42fr) minmax(330px,.75fr); gap: 18px; margin-top: 18px; }
.panel-stack { display: grid; align-content: start; gap: 18px; }
.panel { padding: 25px; border-radius: var(--radius-xl); background: var(--panel); backdrop-filter: blur(15px); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.records-panel-title { justify-content: space-between; }
.prize-settings-panel-title { justify-content: flex-end; }
.panel-title h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.mini-label { padding: 5px 8px; color: #8699bd; border: 1px solid var(--line); font-size: 9px; letter-spacing: .05em; }

/* Forms and buttons */
label { color: #9eb0d1; font-size: 12px; font-weight: 700; }
input, select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(131,164,226,.22);
  border-radius: 12px;
  color: var(--text);
  background: rgba(3,12,32,.72);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:hover, select:hover { border-color: rgba(118,189,244,.45); }
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(53,231,255,.12); outline: 0; }
select { padding-right: 34px; }
.primary-button, .secondary-button, .danger-button, .text-button, .icon-button, .segmented button, .record-pagination button {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
  transition: transform .18s var(--ease), box-shadow .18s, border-color .18s, background .18s;
}
.primary-button { padding: 0 19px; border: 1px solid rgba(128,247,255,.55); color: #03101c; background: linear-gradient(135deg,var(--cyan),#76f1ff); box-shadow: 0 10px 28px rgba(53,231,255,.18); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 15px 38px rgba(53,231,255,.27); }
.secondary-button { padding: 0 16px; border: 1px solid rgba(125,159,224,.3); color: #d9e6ff; background: rgba(34,58,108,.38); }
.secondary-button:hover { border-color: rgba(53,231,255,.45); background: rgba(41,78,141,.5); }
.danger-button { padding: 0 16px; border: 1px solid rgba(255,107,122,.32); color: #ffabb4; background: rgba(255,78,99,.09); }
.danger-button:hover { border-color: rgba(255,107,122,.62); background: rgba(255,78,99,.15); }
.text-button { min-height: 32px; padding: 0; border: 0; color: var(--cyan-2); background: none; font-size: 12px; }
.text-button:hover { color: #fff; }
.icon-button { display: grid; place-items: center; width: 40px; border: 1px solid var(--line); color: var(--cyan); background: rgba(53,231,255,.07); font-size: 18px; }
.icon-button:hover { transform: rotate(22deg); border-color: rgba(53,231,255,.5); }
.point-form { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 14px; }
.point-form label, .lottery-form label, .record-range label, .exchange-filters label, .prize-setting-form label, .add-kid-form label { display: grid; align-content: start; gap: 8px; }
.point-form button { grid-column: 1 / -1; }

/* Activity */
.timeline { display: grid; }
.timeline-item { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 73px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-item .dot { position: relative; z-index: 1; width: 9px; height: 9px; border: 2px solid var(--space-800); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(68,224,162,.12); }
.timeline-item.minus .dot { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,140,66,.12); }
.timeline-item strong { font-size: 13px; }
.timeline-item p { margin: 6px 0 0; color: #7e91b6; font-size: 10px; }
.timeline-item strong, .timeline-item p, .kid-row, .approval-row, .prize-setting-row, .exchange-row, .prize-card { overflow-wrap: anywhere; }
.change { font: 850 15px/1 Inter,sans-serif; }
.change.plus, .plus, .timeline-item.plus .change { color: var(--green); }
.change.minus, .minus, .timeline-item.minus .change { color: var(--orange); }
.reward-target { display: flex; align-items: center; gap: 18px; min-height: 112px; padding: 18px; border: 1px solid rgba(255,203,87,.18); border-radius: 18px; background: radial-gradient(circle at 12% 50%,rgba(255,203,87,.12),transparent 40%),rgba(17,35,73,.42); }
.reward-visual { display: grid; flex: 0 0 auto; place-items: center; width: 72px; height: 72px; color: var(--space-950); border-radius: 22px; background: radial-gradient(circle at 35% 30%,#fff8cf,var(--gold) 40%,var(--orange)); font-size: 23px; font-weight: 900; box-shadow: 0 0 28px rgba(255,203,87,.25); transform: rotate(-6deg); }
.reward-target p { margin: 0; color: #aab9d7; font-size: 12px; line-height: 1.75; }

/* Records */
.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(1,9,27,.5); }
.segmented button { min-height: 34px; padding: 0 14px; border: 0; color: #8192b5; background: transparent; font-size: 11px; }
.segmented button.active { color: var(--cyan-2); background: rgba(53,231,255,.11); box-shadow: inset 0 0 0 1px rgba(53,231,255,.2); }
.record-stats { display: grid; gap: 16px; margin-bottom: 20px; }
.record-range, .exchange-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.record-range label, .exchange-filters label { min-width: 160px; }
.record-range > label { flex: 0 0 220px; min-width: 220px; }
.record-range > label > input, .record-range > label > select { width: 100%; }
.record-type-filter, .parent-record-kid-filter { min-width: 220px !important; }
html:not(.is-parent) #recordsPage .parent-record-kid-filter { display: none !important; }
#recordTypeFilter, #recordKidFilter { min-height: 44px; padding: 0 12px; color: #1d4772; border: 1px solid #8fcde8; border-radius: 12px; background: linear-gradient(135deg,#e9fbff,#e7f1ff); box-shadow: 0 8px 18px rgba(45,153,194,.1),inset 0 1px rgba(255,255,255,.9); font-size: 15px; font-weight: 850; }
#recordTypeFilter:focus, #recordKidFilter:focus { border-color: #2baed6; outline: 0; box-shadow: 0 0 0 4px rgba(43,174,214,.13),0 8px 18px rgba(45,153,194,.14); }
.record-summary { display: grid; grid-template-columns: repeat(5,minmax(120px,1fr)); gap: 10px; }
.record-summary article, .child-summary article { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(17,37,78,.42); }
.record-summary article {
  position: relative;
  min-height: 112px;
  padding: 35px 82px 15px 18px;
  overflow: hidden;
  border-width: 1.5px;
  box-shadow: 0 12px 28px rgba(35,76,126,.08);
}
.record-summary article::marker { content: ""; }
.record-summary article > span,
.record-summary article > strong { position: relative; z-index: 1; }
.record-summary article::after {
  position: absolute;
  top: 14px;
  right: auto;
  bottom: auto;
  left: 18px;
  width: auto;
  height: auto;
  color: currentColor;
  background: none;
  content: attr(data-summary-en);
  opacity: .68;
  font: 900 12px/1 Inter,sans-serif;
  letter-spacing: .13em;
  pointer-events: none;
}
.record-summary article::before {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 54px;
  height: 54px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  filter: drop-shadow(0 8px 12px rgba(40,98,157,.16));
  transform: translateY(-50%);
}
.record-summary .summary-count { border-color: #aad7f2; background: linear-gradient(135deg,#f2fbff,#e7f2ff); }
.record-summary .summary-count::before { background-image: url('/assets/summary-flight-beacon.svg'); }
.record-summary .summary-count span { color: #2873a8; }
.record-summary .summary-count strong { color: #155b9f; }
.record-summary .summary-injected { border-color: #9fe5cd; background: linear-gradient(135deg,#f1fff9,#e5faef); }
.record-summary .summary-injected::before { background-image: url('/assets/summary-energy-in.svg'); }
.record-summary .summary-injected span { color: #218669; }
.record-summary .summary-injected strong { color: #16ad75; }
.record-summary .summary-consumed { border-color: #f2c28f; background: linear-gradient(135deg,#fff9ef,#fff0df); }
.record-summary .summary-consumed::before { background-image: url('/assets/summary-energy-out.svg'); }
.record-summary .summary-consumed span { color: #a66024; }
.record-summary .summary-consumed strong { color: #ef7c2d; }
.record-summary .summary-change { border-color: #cbbaf7; background: linear-gradient(135deg,#fbf8ff,#f0ebff); }
.record-summary .summary-change::before { background-image: url('/assets/summary-energy-change.svg'); }
.record-summary .summary-change span { color: #7357b7; }
.record-summary .summary-change strong { color: #7457df; }
.record-summary .summary-balance { border-color: #efd38b; background: linear-gradient(135deg,#fffdf2,#fff6d9); }
.record-summary .summary-balance::before { background-image: url('/assets/summary-energy-core.svg'); }
.record-summary .summary-balance span { color: #98701d; }
.record-summary .summary-balance strong { color: #b9780a; }
.record-summary span, .child-summary span { display: block; color: #8294b9; font-size: 10px; }
.record-summary strong { display: block; margin-top: 8px; font-size: 19px; }
.child-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 10px; }
.child-summary strong { display: block; margin-bottom: 8px; }
.child-summary span + span { margin-top: 5px; }

@media (min-width: 821px) {
  #recordsPage > .panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  #recordsPage > .panel::before {
    position: absolute;
    z-index: 0;
    top: 8px;
    right: 220px;
    left: 225px;
    height: 126px;
    background: url('/assets/space-flight-recorder.svg') center / contain no-repeat;
    content: "";
    opacity: .9;
    pointer-events: none;
  }

  #recordsPage > .panel > * {
    position: relative;
    z-index: 1;
  }
}
table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 14px; font-size: 12px; }
td, .score-copy > strong, .stat-card > strong, .change, .record-summary strong { font-variant-numeric: tabular-nums; }
thead { background: rgba(36,63,115,.42); }
th { color: #91a5ca; font-size: 10px; letter-spacing: .05em; text-align: left; }
th, td { padding: 15px 13px; border-bottom: 1px solid var(--line); }

#recordsPage th {
  color: #294767;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .02em;
}
tbody tr { background: rgba(8,23,52,.26); transition: background .15s; }
tbody tr:hover { background: rgba(47,80,141,.24); }
.empty-table { padding: 42px; color: #7d90b4; text-align: center; }
.record-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.record-pagination button { min-width: 38px; padding: 0 11px; border: 1px solid var(--line); color: #9dafd0; background: rgba(17,37,78,.4); }
.record-pagination button.active { color: #06102a; border-color: var(--cyan); background: var(--cyan); }
.record-pagination span { margin-left: 8px; color: #7486a9; font-size: 10px; }

/* Star gate */
.supply-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
  padding: 6px 4px 0;
}
.supply-page-heading > div:first-child { min-width: 0; }
.supply-title-ornaments {
  flex: 1 1 640px;
  align-self: center;
  min-width: 360px;
  max-width: 850px;
  height: 104px;
  margin: -8px 6px -8px 0;
  object-fit: contain;
  object-position: center;
  opacity: .66;
  transform: translateX(-192px);
  filter: drop-shadow(0 8px 15px rgba(56,150,215,.12));
  pointer-events: none;
}
.supply-page-heading span,
.supply-panel-kicker,
.lottery-control-copy span {
  color: #1780b4;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}
.supply-page-heading h3 { margin: 7px 0 4px; color: #10264a; font-size: 30px; }
.supply-page-heading p { margin: 0; color: #587393; font-size: 15px; font-weight: 700; white-space: nowrap; }
.supply-status-strip { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; color: #496b8f; font-weight: 850; }
.supply-status-strip i { width: 34px; height: 2px; background: linear-gradient(90deg,#25d7e8,#5583ef); }
.lottery-layout { display: grid; grid-template-columns: minmax(580px,1.45fr) minmax(300px,.65fr); gap: 18px; align-items: start; }
.lottery-panel { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 42%,rgba(42,80,171,.34),transparent 38%),linear-gradient(160deg,rgba(8,25,61,.96),rgba(6,12,34,.96)); }
.lottery-panel::after { content: ""; position: absolute; inset: 0; opacity: .17; background: radial-gradient(circle,white 0 1px,transparent 1.3px) 0 0/44px 44px; pointer-events: none; }
.lottery-panel > * { position: relative; z-index: 1; }
.lottery-panel::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    url('/assets/warp-control-deck.svg') 97% 1% / 360px 182px no-repeat,
    url('/assets/energy-scout-pod.svg') 3% 52% / 205px 180px no-repeat,
    url('/assets/supply-constellation.svg') 97% 56% / 230px 188px no-repeat,
    url('/assets/deep-space-route.svg') 50% 99% / min(760px,92%) 144px no-repeat;
  content: "";
  opacity: .82;
  pointer-events: none;
}
.lottery-controls {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  min-height: 96px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(61,177,230,.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 48%,rgba(57,210,255,.18),transparent 30%),
    radial-gradient(circle at 92% 46%,rgba(108,92,255,.12),transparent 24%),
    linear-gradient(105deg,rgba(236,251,255,.94),rgba(220,246,255,.88) 58%,rgba(235,235,255,.88));
  box-shadow: inset 0 0 34px rgba(67,190,234,.08);
}
.lottery-control-copy { display: grid; align-self: center; gap: 5px; min-width: 180px; }
.lottery-control-copy strong { color: #12355c; font-size: 20px; }
.lottery-top-art {
  position: absolute;
  top: -8px;
  right: 10px;
  width: min(620px, 52%);
  height: 174px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 18px rgba(49, 162, 231, .2));
  pointer-events: none;
}
.lottery-controls::before { display: none; }
.lottery-control-art {
  position: relative;
  z-index: 0;
  flex: 1 1 0;
  align-self: center;
  min-width: 0;
  height: 144px;
  margin: -4px -10px -4px 4px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 12px rgba(40,148,220,.16));
  pointer-events: none;
}
.lottery-form { position: relative; z-index: 1; display: flex; align-items: end; align-self: end; gap: 12px; }
.lottery-form label { min-width: 160px; }
.lottery-energy-label {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 100%;
  color: #0d4f86;
  text-align: center;
}
.lottery-energy-label small {
  color: #0e8fbd;
  font: 900 11px/1.1 Inter,sans-serif;
  letter-spacing: .14em;
}
.lottery-energy-label strong {
  font-size: 19px;
  line-height: 1.2;
}
#lotteryPoints {
  text-align: center;
  text-align-last: center;
  padding-left: 12px;
  padding-right: 34px;
}
#lotteryPoints option {
  padding: 0;
  text-align: center;
  text-align-last: center;
  text-indent: -14px;
}
.lottery-form .supply-launch-button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 64px auto;
  place-items: center;
  gap: 4px;
  width: 124px;
  min-width: 124px;
  height: 124px;
  min-height: 124px;
  padding: 7px 8px 10px;
  overflow: hidden;
  border: 2px solid rgba(84,241,255,.92);
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 21% 24%,rgba(255,255,255,.22),transparent 25%),
    linear-gradient(120deg,#062b67 0%,#0758a7 54%,#08b8cf 100%);
  box-shadow: 0 12px 24px rgba(8,89,165,.24), inset 0 1px 0 rgba(255,255,255,.34);
  isolation: isolate;
}
.lottery-form .supply-launch-button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg,transparent 22%,rgba(255,255,255,.2) 48%,transparent 74%);
  content: "";
  transform: translateX(-115%);
  transition: transform .55s var(--ease);
}
.lottery-form .supply-launch-button:hover {
  transform: translateY(-2px);
  border-color: #d1ffff;
  box-shadow: 0 17px 34px rgba(8,89,165,.31),0 0 0 4px rgba(51,231,255,.12),inset 0 1px 0 rgba(255,255,255,.38);
}
.lottery-form .supply-launch-button:hover::before { transform: translateX(115%); }
.lottery-form .supply-launch-button:active { transform: translateY(0) scale(.985); }
.supply-launch-emblem {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(199,254,255,.65);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(74,235,255,.28),rgba(3,34,80,.76) 72%);
  box-shadow: 0 0 18px rgba(61,232,255,.38);
}
.supply-launch-emblem img { width: 61px; height: 61px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,24,71,.35)); }
.supply-launch-copy { display: grid; justify-items: center; gap: 2px; line-height: 1.06; white-space: nowrap; }
.supply-launch-copy strong { color: #fff; font-size: 17px; font-weight: 900; letter-spacing: .02em; text-shadow: 0 2px 8px rgba(0,34,87,.48); }
.supply-launch-copy small { color: #d7fdff; font-size: 11px; font-weight: 900; letter-spacing: 0; }
.supply-launch-arrow {
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(192,252,255,.74);
  border-radius: 50%;
  color: #fff;
  background: rgba(63,235,244,.13);
  font: 900 26px/1 Inter,sans-serif;
}
.lottery-rule { display: flex; flex-wrap: wrap; gap: 7px; }
.lottery-rule span, .wheel-prize-list span { padding: 6px 9px; border: 1px solid rgba(137,166,229,.16); border-radius: 99px; color: #8296bc; background: rgba(14,30,68,.45); font-size: 9px; font-weight: 700; }
.wheel-stage { position: relative; display: grid; place-items: center; min-height: 570px; margin-top:16px; overflow:hidden; border:1px solid rgba(78,197,230,.55); border-radius:8px; background:radial-gradient(circle at 50% 48%,rgba(20,91,173,.42),transparent 44%),linear-gradient(145deg,#061b3d,#082b55); box-shadow:inset 0 0 70px rgba(0,7,25,.42),0 18px 38px rgba(27,70,127,.14); perspective: 900px; }
.supply-hub-art { position:absolute!important; z-index:1!important; inset:22px; width:calc(100% - 44px); height:calc(100% - 44px); object-fit:contain; filter:drop-shadow(0 18px 24px rgba(0,0,0,.25)); pointer-events:none; }
.wheel-stage::before,
.wheel-stage::after {
  display: none;
}
.wheel-stage > * { position: relative; z-index: 1; }
.lottery-wheel { position: relative; z-index: 3; width: min(570px,76vw); aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; box-shadow: none; transition: none; }
.wheel-surface, .wheel-label-layer { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.wheel-surface,.wheel-label-layer { display:none; overflow: visible; }
.wheel-label-layer { pointer-events: none; }
.wheel-center { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; align-content: center; width: 108px; height: 108px; border: 3px solid #bff6ff; border-radius: 50%; color: #fff; background: radial-gradient(circle at 40% 32%,#55e8ff 0 6%,#1476c9 23%,#173776 46%,#071832 72%); transform: translate(-50%,-50%); box-shadow: 0 0 0 5px rgba(113,91,255,.4),0 0 0 9px rgba(57,225,255,.18),0 0 28px rgba(68,230,255,.75),inset 0 0 17px rgba(255,255,255,.25); }
.wheel-core-symbol { position: absolute; top: 5px; color: #ffe26d; font-size: 21px; line-height: 1; text-shadow: 0 0 12px #fff3a5; }
.wheel-core-name { margin-top: 10px; font-size: 23px; font-weight: 950; letter-spacing: .08em; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.wheel-core-status { margin-top: 1px; color: #baf7ff; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.black-hole-vortex { position:absolute; z-index:4; left:50%; top:55%; display:grid; place-items:center; width:300px; height:210px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.black-hole-vortex::before { display:none; }
.black-hole-vortex::after { position:absolute; inset:24px -30px; border-radius:50%; background:conic-gradient(from 18deg,transparent 0 12%,rgba(255,211,112,.5) 18%,transparent 27%,rgba(89,211,255,.42) 43%,transparent 58%,rgba(164,109,255,.4) 72%,transparent 87%); -webkit-mask:radial-gradient(ellipse,transparent 0 43%,#000 48% 55%,transparent 61%); mask:radial-gradient(ellipse,transparent 0 43%,#000 48% 55%,transparent 61%); content:""; opacity:0; transform:rotate(-11deg); filter:blur(5px); }
.black-hole-vortex.is-active::after { opacity:.9; animation:black-hole-accretion-flare .55s linear infinite; }
.vortex-ring { position:absolute; border-radius:50%; }
.vortex-ring-1 { left:-8px; right:-8px; top:72px; height:67px; background:conic-gradient(from 82deg,#ffcb5d,#ff704e 14%,#8d5ef3 33%,#4bbbe9 52%,#7bf4ff 67%,#fff2a7 83%,#ffcb5d); -webkit-mask:radial-gradient(ellipse,transparent 0 42%,#000 45% 56%,transparent 61%); mask:radial-gradient(ellipse,transparent 0 42%,#000 45% 56%,transparent 61%); transform:rotate(-8deg); filter:blur(.4px) drop-shadow(0 0 13px #6d8dff); animation:accretion-disk 5.2s linear infinite; }
.vortex-ring-2 { left:18px; right:18px; top:82px; height:48px; background:linear-gradient(90deg,transparent,#64e9ff 16%,#fff6bd 38%,#ff9857 50%,#fff0a0 62%,#7aeaff 84%,transparent); border-radius:50%; transform:rotate(-8deg); filter:blur(2px) drop-shadow(0 0 12px rgba(255,200,91,.82)); opacity:.9; animation:disk-shimmer 2.4s ease-in-out infinite alternate; }
.vortex-ring-3 { inset:20px 52px; border:2px solid rgba(128,216,255,.5); box-shadow:0 0 25px rgba(86,190,255,.52),inset 0 0 24px rgba(153,89,255,.55); transform:scaleY(.7); opacity:.6; }
.vortex-core { position:relative; z-index:3; width:104px; height:104px; border:2px solid rgba(253,234,181,.9); border-radius:50%; background:#000; box-shadow:0 0 0 5px rgba(8,13,30,.95),0 0 16px 8px rgba(255,177,77,.22),0 0 42px 18px rgba(85,136,255,.26),inset 0 0 25px #000; }
.vortex-core::before { position:absolute; inset:8px; border-radius:50%; background:radial-gradient(circle at 38% 32%,#06070b,#000 65%); content:""; }
.black-hole-vortex strong,.black-hole-vortex small { display:none; }
.vortex-ring,.vortex-core { display:none; }
.black-hole-vortex.is-active { animation:vortex-pulse .55s ease-in-out infinite alternate; }
.black-hole-vortex.is-active .vortex-ring-1 { animation-duration:.55s; }
.black-hole-vortex.is-active .vortex-ring-2 { animation-duration:.35s; }
@keyframes accretion-disk { to { transform:rotate(-8deg) rotateY(360deg); } }
@keyframes disk-shimmer { to { opacity:.58; filter:blur(3px) drop-shadow(0 0 24px rgba(255,200,91,.92)); } }
@keyframes black-hole-accretion-flare { to { transform:rotate(-11deg) rotate(360deg) scale(1.07); } }
@keyframes vortex-pulse { to { filter:drop-shadow(0 0 55px rgba(90,214,255,.92)); transform:translate(-50%,-50%) scale(1.09); } }
.planet-orbit { position:absolute; inset:0; border-radius:50%; }
.planet-orbit::before,.planet-orbit::after { display:none; }
.prize-planet { position:absolute; z-index:3; left:var(--planet-x); top:var(--planet-y); display:grid; place-items:center; width:var(--planet-size); height:var(--planet-size); border-radius:50%; transform:translate(-50%,-50%) rotate(var(--planet-tilt)); animation:planet-float 3.2s ease-in-out infinite alternate; animation-delay:var(--planet-delay); transition:filter .25s; }
.planet-body { position:absolute; inset:0; overflow:hidden; border:3px solid rgba(225,251,255,.94); border-radius:50%; background:radial-gradient(circle at 32% 25%,#fffbd2 0 5%,color-mix(in srgb,var(--planet-color),white 18%) 6% 28%,var(--planet-color) 29% 63%,color-mix(in srgb,var(--planet-color),#06152e 55%) 64%); box-shadow:0 0 0 5px color-mix(in srgb,var(--planet-color),transparent 72%),0 0 25px color-mix(in srgb,var(--planet-color),transparent 38%),inset -13px -14px 20px rgba(1,13,35,.34); }
.planet-body i { position:absolute; left:-17%; top:45%; width:134%; height:22%; border:5px solid #ffe27a; border-radius:50%; transform:rotate(-13deg); opacity:.8; }
.planet-body em { position:absolute; left:19%; top:17%; width:24%; height:14%; border-radius:50%; background:rgba(255,255,255,.35); transform:rotate(-18deg); }
.prize-planet.is-prize-planet b { position:relative; z-index:4; display:grid; place-items:center; width:88%; min-height:32px; padding:3px 4px; color:#fff; font-size:clamp(9px,1vw,12px); font-weight:950; line-height:1.16; text-align:center; text-shadow:0 2px 5px rgba(0,0,0,.98),0 0 4px #000,0 0 8px rgba(0,0,0,.72); transform:rotate(calc(var(--planet-tilt) * -1)); }
.planet-style-1 .planet-body i,.planet-style-4 .planet-body i { border-color:#a9f4ff; transform:rotate(17deg); }
.planet-style-2 .planet-body { border-radius:46% 54% 49% 51%; }
.planet-style-3 .planet-body i { height:9%; border-color:#fff; opacity:.55; }
.planet-style-5 .planet-body { background:radial-gradient(circle at 35% 30%,#f4fbff,var(--planet-color) 42%,#132653 74%); }
@keyframes planet-float { to { margin-top:-9px; filter:brightness(1.13); } }
.lottery-wheel.is-sucking .planet-orbit { animation:none; }
.lottery-wheel.is-sucking .prize-planet { animation:planet-absorb 2.35s cubic-bezier(.62,.01,.55,.98) forwards; animation-delay:var(--absorb-delay); }
.lottery-wheel.is-sucked .prize-planet { opacity:0; transform:translate(-50%,-50%) scale(.02); }
@keyframes planet-absorb { 0% { opacity:1; transform:translate(-50%,-50%) rotate(var(--planet-tilt)) scale(1); } 48% { opacity:1; filter:brightness(1.5) blur(0); } 78% { opacity:.72; } 100% { left:50%; top:50%; opacity:0; filter:brightness(2) blur(2px); transform:translate(-50%,-50%) rotate(calc(var(--planet-tilt) + 620deg)) scale(.015,.16); } }
.wheel-arc-label { font-size: 3.15px; font-weight: 850; letter-spacing: .04em; paint-order: stroke; stroke: rgba(5,26,59,.64); stroke-width: .55px; stroke-linejoin: round; }
.wheel-arc-label.is-compact { font-size: 2.65px; }
.wheel-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px 5px rgba(53,231,255,.45); animation: spark 2.8s ease-in-out infinite; }
.wheel-spark-1 { left: 13%; top: 26%; }
.wheel-spark-2 { right: 12%; top: 42%; animation-delay: -.7s; }
.wheel-spark-3 { left: 20%; bottom: 21%; animation-delay: -1.5s; }
.wheel-spark-4 { right: 19%; bottom: 17%; animation-delay: -2.1s; }
@keyframes spark { 50% { opacity: .25; transform: scale(.55); } }
.wheel-prize-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.lottery-result { margin-top: 14px; }
.supply-record-panel { position:sticky; top:94px; min-height:780px; }
.supply-record-panel .panel-title { align-items:flex-start; }
.supply-record-panel .panel-title h3 { margin:5px 0 0; }
.supply-record-panel .panel-title {
  min-height: 96px;
  margin-bottom: 16px;
  overflow: hidden;
}
.supply-record-panel .panel-title > div { flex: 0 0 auto; }
.supply-record-art {
  flex: 0 0 auto;
  align-self: center;
  width: 234px;
  max-width: calc(100% - 136px);
  height: 100px;
  margin: -2px auto -2px 0;
  object-fit: contain;
  object-position: center;
  filter: none;
  pointer-events: none;
}
.supply-record-panel .exchange-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.supply-record-panel .exchange-list { margin-top:16px; }
.supply-record-panel .exchange-row { border-radius:8px; }
.panel.lottery-panel::before,
html.is-parent .panel.lottery-panel::before { display:none!important; background:none!important; }
.panel.lottery-panel::after,
html.is-parent .panel.lottery-panel::after {
  opacity:.26;
  background:
    radial-gradient(circle at 9% 18%,#54dfea 0 1px,transparent 2px),
    radial-gradient(circle at 24% 38%,#ffca4f 0 1px,transparent 2px),
    radial-gradient(circle at 42% 13%,#8e7cf1 0 1px,transparent 2px),
    radial-gradient(circle at 63% 31%,#4fddeb 0 1px,transparent 2px),
    radial-gradient(circle at 82% 15%,#ffca4f 0 1px,transparent 2px),
    radial-gradient(circle at 94% 44%,#8775ef 0 1px,transparent 2px);
}
.lottery-result-art {
  width: min(820px, 96%);
  height: 126px;
  margin: 12px auto 2px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(133,165,226,.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(11,31,70,.42), rgba(39,70,126,.22));
}
.lottery-result-art img {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.62);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 18px rgba(43,187,255,.22));
}
.lottery-footer-dock {
  width: min(860px,96%);
  height: 126px;
  margin: 8px auto -10px;
  background: url('/runtime-images/exploration-route.png') center / contain no-repeat;
  opacity: .96;
  filter: drop-shadow(0 12px 22px rgba(50,111,189,.16));
  pointer-events: none;
}
.empty-state { display: grid; place-items: center; min-height: 88px; padding: 20px; border: 1px dashed rgba(133,165,226,.24); border-radius: 16px; color: #7488ae; background: rgba(13,31,66,.27); font-size: 12px; text-align: center; }
.prize-card { padding: 20px; border: 1px solid rgba(255,203,87,.28); border-radius: 18px; background: linear-gradient(135deg,rgba(255,203,87,.1),rgba(108,99,255,.08)); }
.status-pill { padding: 5px 9px; color: #08203b; background: var(--gold); font-size: 9px; }
.prize-card h3 { margin: 12px 0 7px; font-size: 22px; }
.prize-card p, .exchange-row p { margin: 0; color: #8fa2c6; font-size: 11px; line-height: 1.65; }
.prize-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.exchange-list { display: grid; gap: 10px; margin-top: 18px; }
.exchange-row { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(17,38,80,.4); }
.exchange-row header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }

/* Crew and configuration */
.manage-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.manage-layout > .panel:first-child { grid-row: span 2; }
.kid-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.kid-panel-title {
  display: grid;
  grid-template-columns: minmax(132px,auto) minmax(220px,1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  margin-bottom: 14px;
}
.pilot-archive-heading {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.pilot-archive-heading small {
  color: #168ab7;
  font: 900 13px/1.1 Inter,sans-serif;
  letter-spacing: .14em;
}
.pilot-archive-heading h3 { margin: 0; }
.pilot-archive-header-art {
  justify-self: stretch;
  width: 100%;
  min-width: 220px;
  height: 122px;
  margin-block: -19px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 14px rgba(18,116,201,.14));
  transform: scale(1.12);
  pointer-events: none;
}
#managePage .manage-layout > .panel:first-child {
  padding-top: 20px;
  padding-bottom: 20px;
}
#managePage .kid-row {
  border-color: rgba(80,161,211,.34);
  background:
    radial-gradient(circle at 92% 18%,rgba(65,215,239,.13),transparent 26%),
    linear-gradient(105deg,rgba(208,242,252,.78),rgba(214,230,252,.7) 56%,rgba(225,221,251,.68)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.42),0 8px 18px rgba(44,97,145,.07);
}
#managePage .kid-row > strong {
  color: #087fae;
  font-size: 25px;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(255,255,255,.58),0 3px 8px rgba(8,92,143,.14);
}
#managePage .energy-calibration-title {
  display: grid;
  grid-template-columns: minmax(190px,auto) minmax(260px,1fr);
  align-items: center;
  gap: 16px;
  min-height: 80px;
  margin-bottom: 8px;
}
#managePage .energy-calibration-heading {
  display: grid;
  gap: 7px;
}
#managePage .energy-calibration-heading small {
  color: #7144bb;
  font: 900 13px/1.1 Inter,sans-serif;
  letter-spacing: .12em;
}
#managePage .energy-calibration-heading h3 { margin: 0; }
#managePage .energy-calibration-header-art {
  justify-self: stretch;
  width: 100%;
  height: 132px;
  margin-block: -22px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 15px rgba(73,86,201,.16));
  transform: translateY(7px) scale(1.1);
  pointer-events: none;
}
#managePage .manage-layout > .panel:nth-child(2) {
  background:
    radial-gradient(circle at 86% 10%,rgba(91,211,240,.15),transparent 29%),
    linear-gradient(145deg,#f0eaff,#e7efff 58%,#e0f7fb) !important;
}
#managePage #parentAdjustForm input,
#managePage #parentAdjustForm select {
  border-color: rgba(115,120,207,.43);
  background: linear-gradient(135deg,#e3f5fb,#e8eafa 58%,#f0e4fb) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.52);
}
#prizeSettingsPage .prize-setting-form {
  border-color: rgba(111,166,213,.38);
  background:
    radial-gradient(circle at 88% 18%,rgba(68,214,236,.12),transparent 28%),
    linear-gradient(135deg,rgba(215,244,249,.86),rgba(221,235,253,.82) 58%,rgba(234,225,252,.78)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.5),0 8px 20px rgba(43,98,151,.07);
}
#prizeSettingsPage .prize-setting-form input,
#prizeSettingsPage .prize-setting-form select {
  border-color: rgba(87,158,207,.46);
  background: linear-gradient(135deg,#dff6fa,#e5eefc 58%,#eee7fc) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}
#prizeSettingsPage .chance-summary.is-balanced {
  color: #087c58;
  border-color: rgba(28,162,119,.5);
  background: linear-gradient(135deg,rgba(188,245,225,.82),rgba(210,244,233,.74));
  font-size: 17px;
  font-weight: 850;
}
#managePage .add-kid-form {
  border-color: rgba(94,161,215,.36);
  background: linear-gradient(135deg,rgba(215,244,250,.82),rgba(225,233,252,.78) 58%,rgba(234,224,252,.72)) !important;
}
#managePage .add-kid-form input,
#managePage .add-kid-form select {
  border-color: rgba(83,158,207,.46);
  background: linear-gradient(135deg,#dff7fb,#e7effc 58%,#eee8ff) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.56);
}
#managePage #deleteKidError {
  color: #c92d5e;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.55;
}
#managePage #deleteKidForm .danger-button {
  color: #b91750;
  border-color: rgba(219,48,99,.58);
  background: linear-gradient(135deg,rgba(255,194,211,.82),rgba(255,218,229,.72));
  box-shadow: 0 7px 16px rgba(190,38,82,.1);
}
.kid-list, .approval-list, .prize-setting-list { display: grid; gap: 11px; }
.kid-row { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 84px; padding: 16px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(100deg,rgba(28,58,115,.5),rgba(10,26,59,.3)); }
.kid-row::before, .kid-row::after { display: none; }
.kid-row > div strong, .kid-row > div span { display: block; }
.kid-row > div span { margin-top: 6px; color: #8799bc; font-size: 10px; }
.kid-row > strong { color: var(--cyan-2); font-size: 22px; }
.add-kid-form { display: grid; gap: 14px; margin-top: 16px; padding: 18px; border: 1px solid rgba(53,231,255,.18); border-radius: 18px; background: rgba(8,25,58,.64); }
.add-kid-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.approval-row, .prize-setting-row { padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(16,36,77,.42); }
.approval-row header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.approval-row p { margin: 8px 0 0; color: #8498bc; font-size: 11px; }
.approval-actions, .prize-setting-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.approval-actions button, .prize-setting-actions button { min-height: 36px; }
.panel-approval-console > .panel-title {
  display: grid;
  grid-template-columns: max-content minmax(290px, 1fr);
  align-items: center;
  gap: clamp(10px, 1.8vw, 24px);
  min-height: 78px;
  margin-bottom: 0;
}
.panel-approval-console .approval-heading-copy {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
}
.panel-approval-console .approval-heading-copy small {
  color: #168bb8;
  font: 900 13px/1.1 Inter,sans-serif;
  letter-spacing: .14em;
}
.panel-approval-console .approval-heading-copy h3 { margin: 0; }
.panel-approval-console .approval-header-art {
  justify-self: end;
  width: min(100%, 390px);
  max-width: 390px;
  height: 96px;
  margin-block: -12px;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 8px 16px rgba(24, 113, 210, .14));
  transform: translateX(-24px) scale(1.12);
  transform-origin: right center;
  pointer-events: none;
}
@media (max-width: 760px) {
  .panel-approval-console > .panel-title { grid-template-columns: 1fr; gap: 4px; }
  .panel-approval-console .approval-header-art { justify-self: center; width: 100%; height: 92px; transform: none; object-position: center; }
}
.prize-setting-form { display: grid; grid-template-columns: 160px minmax(180px,1fr) 150px auto; align-items: end; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(13,31,67,.44); }
.prize-setting-list { margin-top: 18px; }
.chance-summary { padding: 13px 15px; border: 1px solid rgba(255,203,87,.24); border-radius: 13px; color: #ffe49b; background: rgba(255,203,87,.07); font-size: 11px; line-height: 1.6; }
.chance-summary.is-balanced { color: #a3f8d3; border-color: rgba(68,224,162,.3); background: rgba(68,224,162,.08); }
.chance-summary.is-overflow { color: #ffabb4; border-color: rgba(255,107,122,.34); background: rgba(255,107,122,.08); }
.prize-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.prize-setting-row span { display: block; margin-top: 6px; color: #8194b9; font-size: 10px; }

/* Parent mission control switches to a brighter operations surface */
/* Comfort light mode · brighter surfaces and larger type for all ages */
:root {
  color-scheme: light;
  --text: #101a34;
  --muted: #5f6f8e;
  --line: #d8e3f2;
  --panel: rgba(255,255,255,.97);
  --panel-solid: #fff;
  --shadow: 0 16px 42px rgba(38,73,125,.11);
  font-size: 16px;
}
body { background: #edf4fc; }
.content { background: radial-gradient(circle at 92% 0,#dcecff 0,transparent 29%),linear-gradient(180deg,#edf5ff,#f7faff 72%); }
.topbar h2 { color: #101a34; }
.eyebrow { color: #1768bf; font-size: 11px; }
.user-card { border-color: #d6e3f3; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(44,79,128,.08); }
.user-card strong { color: #17223d; font-size: 15px; }
.user-card span { color: #647493; font-size: 12px; }
.panel { background: rgba(255,255,255,.97); }
.panel-title h3 { color: #111c35; font-size: 21px; }
.mini-label { color: #5d6f90; border-color: #d7e2f0; background: #f7faff; font-size: 11px; }
.stat-card { background: #fff; }
.stat-card > span { color: #566a8e; font-size: 14px; }
.stat-card p { color: #687997; font-size: 13px; }
.score-copy p { color: #d3e0f5; font-size: 15px; }
label { color: #455777; font-size: 14px; }
input, select { min-height: 50px; color: #14203b; border-color: #cbd9eb; background: #fbfdff; font-size: 15px; }
input:hover, select:hover { border-color: #6e9ed6; }
.secondary-button { color: #294665; border-color: #cbd9eb; background: #eef5fc; }
.text-button { color: #1768bf; font-size: 14px; }
.primary-button, .secondary-button, .danger-button, .segmented button, .record-pagination button { font-size: 14px; }
.timeline-item strong { color: #17213a; font-size: 15px; }
.timeline-item p { color: #617492; font-size: 12px; }
.timeline-item .dot { border-color: #fff; }
.reward-target { border-color: #e9d69d; background: linear-gradient(135deg,#fff9e8,#f4f2ff); }
.reward-target p { color: #536681; font-size: 14px; }
.segmented { border-color: #d6e1ef; background: #eaf1f9; }
.segmented button { color: #5c6f8e; font-size: 13px; }
.segmented button.active { color: #155cab; background: #fff; box-shadow: 0 3px 10px rgba(40,70,116,.12); }
.record-summary article, .child-summary article, .exchange-row, .approval-row, .prize-setting-row, .prize-setting-form { background: #f8fbff; }
.record-summary span, .child-summary span { color: #245775; font-size: 12px; }
.record-summary strong { font-size: 22px; }
.child-summary strong { color: #18233e; font-size: 16px; }
table { font-size: 14px; }
thead { background: #eaf1f9; }
th { color: #4e6283; font-size: 12px; }
tbody tr { background: #fff; }
tbody tr:hover { background: #f1f6fc; }
.empty-table { color: #607391; }
.record-pagination button { color: #415574; background: #fff; }
.record-pagination span { color: #596c8b; font-size: 12px; }
.kid-row { background: linear-gradient(100deg,#eef6ff,#fbfdff); }
.kid-row > div span { color: #637594; font-size: 12px; }
.add-kid-form { background: #f6faff; }
.approval-row p, .prize-setting-row span, .exchange-row p { color: #5f7291; font-size: 13px; }
.empty-state { color: #5e7190; background: #f8fbff; font-size: 14px; }
.chance-summary { font-size: 13px; }
.login-card label { color: #c6d4ef; }
.login-card input, .login-card select { color: #f4f8ff; border-color: rgba(131,164,226,.28); background: rgba(3,12,32,.78); }
.lottery-panel { color: #fff; }
.lottery-panel .panel-title h3 { color: #fff; }
.lottery-panel label {
  color: #155b9f;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.lottery-panel input,
.lottery-panel select {
  color: #163253;
  border-color: #8ccde9;
  background: linear-gradient(135deg,#ffffff,#e8f7ff);
  box-shadow: 0 8px 20px rgba(44,118,170,.12);
}
.lottery-panel select option {
  color: #163253;
  background: #f3fbff;
}
.lottery-panel .empty-state {
  color: #155b9f;
  border: 1px solid #b8ddf1;
  background: linear-gradient(135deg,#f5fcff,#e8f7ff 55%,#f2edff);
  box-shadow: inset 0 0 28px rgba(76,205,239,.08);
}
.lottery-panel .prize-card p { color: #b9c7e1; font-size: 13px; }
.panel.lottery-panel,
html.is-parent .panel.lottery-panel {
  color: #102b57;
  border-color: #b9dced;
  background:
    radial-gradient(circle at 14% 12%,rgba(80,226,244,.24),transparent 25%),
    radial-gradient(circle at 86% 28%,rgba(135,117,244,.18),transparent 27%),
    radial-gradient(circle at 50% 100%,rgba(255,210,91,.16),transparent 30%),
    linear-gradient(145deg,#eefaff 0%,#edf3ff 48%,#f6efff 76%,#fff7e7 100%);
  box-shadow: 0 22px 58px rgba(52,91,146,.15),inset 0 1px rgba(255,255,255,.9);
}
.panel.lottery-panel::after {
  opacity: .42;
  background:
    radial-gradient(circle at 9% 18%,#54dfea 0 2px,transparent 3px),
    radial-gradient(circle at 24% 38%,#ffca4f 0 2px,transparent 3px),
    radial-gradient(circle at 42% 13%,#8e7cf1 0 2px,transparent 3px),
    radial-gradient(circle at 63% 31%,#4fddeb 0 2px,transparent 3px),
    radial-gradient(circle at 82% 15%,#ffca4f 0 2px,transparent 3px),
    radial-gradient(circle at 94% 44%,#8775ef 0 2px,transparent 3px);
}
.panel.lottery-panel .panel-title h3 { color: #102b57; }
.panel.lottery-panel .wheel-prize-list span {
  color: #315e94;
  border-color: #bcddec;
  background: rgba(240,250,255,.88);
}

html.is-parent { color-scheme: light; --text: #101a34; --muted: #687694; --line: #dfe6f3; --panel: rgba(255,255,255,.94); --panel-solid: #fff; --shadow: 0 18px 48px rgba(34,58,101,.1); }
html.is-parent .content { background: radial-gradient(circle at 94% 0,#e1efff 0,transparent 27%),#f3f6fb; }
html.is-parent .eyebrow { color: #2166d9; }
html.is-parent .user-card { background: rgba(255,255,255,.86); }
html.is-parent .user-card span { color: #76839e; }
html.is-parent .avatar { color: white; background: linear-gradient(135deg,#4364de,#723ee4); }
html.is-parent .score-panel { color: white; background: linear-gradient(118deg,#102653,#1c4380); }
html.is-parent .score-copy p { color: #bfd0ef; }
html.is-parent .stat-card { background: #fff; }
html.is-parent .stat-card > span { color: #687694; }
html.is-parent .stat-card p { color: #8490a7; }
html.is-parent .panel { background: rgba(255,255,255,.95); }
html.is-parent input, html.is-parent select { color: #17213a; border-color: #d6dfed; background: #f9fbff; }
html.is-parent label { color: #56647e; }
html.is-parent .secondary-button { color: #375071; border-color: #d7e0ef; background: #f2f6fd; }
html.is-parent .text-button { color: #2166d9; }
html.is-parent .timeline-item p, html.is-parent .reward-target p, html.is-parent .exchange-row p, html.is-parent .approval-row p, html.is-parent .prize-setting-row span { color: #74829c; }
html.is-parent .timeline-item .dot { border-color: white; }
html.is-parent .reward-target { background: linear-gradient(135deg,#fff9e8,#f4f0ff); }
html.is-parent .segmented { background: #edf2f9; }
html.is-parent .segmented button.active { color: #175cae; background: white; box-shadow: 0 2px 9px rgba(40,70,116,.12); }
html.is-parent .child-summary article, html.is-parent .exchange-row, html.is-parent .approval-row, html.is-parent .prize-setting-row, html.is-parent .prize-setting-form { background: #f8faff; }
html.is-parent tbody tr { background: white; }
html.is-parent tbody tr:hover { background: #f5f8fd; }
html.is-parent thead { background: #eef3f9; }
html.is-parent .record-pagination button { color: #52617d; background: #fff; }
html.is-parent .record-pagination button.active { color: #041626; }
html.is-parent .kid-row { background: linear-gradient(100deg,#f1f7ff,#fbfcff); }
html.is-parent .add-kid-form { background: #f7faff; }
html.is-parent .empty-state { color: #74819a; background: #fafcff; }
html.is-parent .lottery-panel { color: white; background: radial-gradient(circle at 50% 42%,rgba(42,80,171,.34),transparent 38%),linear-gradient(160deg,#0a1b42,#070e29); }
html.is-parent .lottery-panel label { color: #155b9f; }
html.is-parent .lottery-panel input,
html.is-parent .lottery-panel select { color: #163253; border-color: #8ccde9; background: linear-gradient(135deg,#ffffff,#e8f7ff); }
html.is-parent .lottery-panel select option { color: #163253; background: #f3fbff; }
html.is-parent .lottery-panel .empty-state { color: #155b9f; border-color: #b8ddf1; background: linear-gradient(135deg,#f5fcff,#e8f7ff 55%,#f2edff); }

/* Responsive */
@media (max-width: 1180px) {
  .overview-grid { grid-template-columns: repeat(3,1fr); }
  .score-panel { grid-column: 1 / -1; }
  .two-column, .lottery-layout { grid-template-columns: 1fr; }
  .record-summary { grid-template-columns: repeat(3,1fr); }
  .lottery-controls { min-height: 96px; }
  .lottery-top-art { width: min(480px, 48%); height: 142px; }
  .lottery-panel::before { background-size: 270px 138px,155px 136px,176px 145px,min(600px,90%) 112px; }
}

@media (max-width: 900px) {
  .supply-page-heading { align-items:flex-start; flex-direction:column; }
  .supply-title-ornaments { flex:none; width:100%; min-width:0; max-width:none; height:88px; margin:0; transform:none; }
  .supply-status-strip { align-self:stretch; justify-content:space-between; }
  .supply-record-panel { position:static; min-height:0; }
  .lottery-controls { align-items:stretch; flex-direction:column; }
  .lottery-form { align-self:stretch; flex-wrap:wrap; }
  .lottery-form label { flex:1 1 180px; }
  .lottery-form button { flex:0 0 auto; }
  .wheel-stage { min-height:500px; }
  .login-screen { grid-template-columns: 1fr; align-items: end; background-position: 36% center; }
  .login-story { position: absolute; inset: 0; min-height: auto; padding: 28px; pointer-events: none; }
  .login-story-copy { display: none; }
  .login-card { position: relative; z-index: 2; justify-self: center; margin: 110px 24px 28px; }
  .app-shell { grid-template-columns: 84px minmax(0,1fr); }
  .sidebar { width: 84px; padding: 22px 12px; }
  .sidebar .brand { justify-content: center; }
  .sidebar .brand > div:last-child, .session-card { display: none; }
  .nav-list { margin-top: 24px; }
  .nav-item { justify-content: center; padding: 0; font-size: 0; }
  .nav-item::before { width: 34px; height: 34px; font-size: 15px; }
  .nav-item.active { box-shadow: inset 0 -3px var(--cyan); }
  .content { grid-column: 2; }
  .manage-layout { grid-template-columns: 1fr; }
  .manage-layout > .panel:first-child { grid-row: auto; }
  .prize-setting-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .supply-page-heading h3 { font-size:26px; }
  .supply-status-strip { display:none; }
  .lottery-controls { padding:16px; }
  .lottery-form { display:grid; grid-template-columns:1fr; }
  .lottery-form button { width:100%; }
  .wheel-stage { min-height:390px; }
  .lottery-wheel { width:min(430px,105vw); }
  .supply-hub-art { inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); }
  .supply-record-panel .exchange-filters { grid-template-columns:1fr; }
  .app-shell { display: block; }
  .sidebar { inset: auto 0 0; width: auto; height: 72px; padding: 8px; border-top: 1px solid rgba(101,149,241,.2); border-right: 0; }
  .sidebar { padding-bottom: max(8px, env(safe-area-inset-bottom)); height: calc(72px + env(safe-area-inset-bottom)); }
  .sidebar > .brand, .sidebar > .session-card, .sidebar::after { display: none; }
  .nav-list { grid-template-columns: repeat(5,1fr); gap: 4px; margin: 0; }
  .nav-item { min-height: 54px; }
  .nav-item::before { width: 32px; height: 32px; }
  .content { min-height: calc(100vh - 72px); padding: 0 16px 96px; }
  .topbar { min-height: 88px; }
  .eyebrow { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-card { padding-right: 8px; }
  .user-card > div:last-child { display: none; }
  .overview-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .score-panel { grid-column: 1 / -1; min-height: 190px; padding: 22px; }
  .score-ring { width: 92px; height: 92px; }
  .score-copy p { max-width: 210px; }
  .stat-card { min-height: 135px; padding: 17px; }
  .overview-grid .stat-card:last-child { grid-column: 1 / -1; min-height: 108px; }
  .mission-illustration { min-height: 340px; background-position: 35% center; }
  .mission-illustration { background-image: linear-gradient(0deg,rgba(3,10,28,.76) 0,rgba(3,10,28,.46) 44%,transparent 72%),url('/jump-engine-growth.webp?v=brothers-7'); background-position: 67% 22%; }
  .mission-illustration-copy { inset: auto 20px 22px; width: auto; transform: none; }
  .panel { padding: 18px; border-radius: 22px; }
  .two-column { margin-top: 10px; }
  .point-form, .prize-setting-form { grid-template-columns: 1fr; }
  .point-form button, .prize-setting-form button { grid-column: auto; }
  .panel-title { align-items: flex-start; }
  .panel-title:has(.segmented) { flex-direction: column; }
  .record-summary { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .record-summary article { min-width: 136px; scroll-snap-align: start; }
  .record-range label, .exchange-filters label { flex: 1 1 145px; min-width: 0; }
  #recordsPage .record-range > label { flex: 1 1 145px; min-width: 0; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: 13px 11px; }
  .lottery-form { align-items: stretch; flex-direction: column; }
  .lottery-form label { min-width: 0; }
  .wheel-stage { min-height: 355px; }
  .lottery-wheel { width: min(310px,78vw); }
  .black-hole-vortex { width: 126px; height: 126px; }
  .vortex-ring-2 { inset: 14px; }
  .vortex-ring-3 { inset: 23px; }
  .vortex-core { width: 48px; height: 48px; }
  .black-hole-vortex strong { top: 45px; font-size: 10px; }
  .black-hole-vortex small { top: 61px; font-size: 6px; }
  .prize-planet { width: clamp(58px,calc(var(--planet-size) * .72),76px); height: clamp(58px,calc(var(--planet-size) * .72),76px); transform:translate(-50%,-50%) rotate(var(--planet-angle)) translateY(-126px) rotate(calc(var(--planet-angle) * -1)); }
  .prize-planet b { font-size:9px; }
  .prize-planet small { font-size:7px; }
  .lottery-controls { min-height: 0; padding-right: 0; }
  .lottery-controls::before { display: none; }
  .lottery-top-art { position: relative; top: auto; right: auto; width: 100%; height: 150px; margin: -4px 0 4px; }
  .lottery-panel::before { background-image: url('/assets/deep-space-route.svg'); background-position: center 98%; background-size: 96% 104px; opacity: .52; }
  .wheel-stage::before, .wheel-stage::after { display: none; }
  .lottery-footer-dock { height: 94px; }
  .lottery-result-art { width: 100%; height: 108px; }
  .wheel-center { width: 66px; height: 66px; border-width: 5px; font-size: 22px; }
  .wheel-pointer { top: 20px; }
  .kid-panel-title, .prize-setting-row { align-items: flex-start; flex-direction: column; }
  .prize-setting-actions { margin-top: 0; }
  .login-card { width: calc(100% - 28px); margin-inline: 14px; padding: 27px 23px; }
  .login-story { padding: 20px; }
  .login-story-brand { background: rgba(6,16,42,.72); }
}

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

/* Spacecraft hatch replaces the text logout action */
#logoutButton {
  display: grid;
  grid-row: 1 / span 2;
  align-self: center;
  place-items: center;
  width: 66px;
  min-width: 66px;
  height: 66px;
  min-height: 66px;
  padding: 0;
  border: 1px solid rgba(91,190,232,.26);
  border-radius: 16px;
  background: rgba(8,27,59,.72);
}
#logoutButton span {
  display: block;
  width: 58px;
  height: 58px;
  background: url('/assets/space-hatch.svg') center/contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(53,231,255,.3));
  transition: transform .28s ease, filter .28s ease;
}
#logoutButton:hover,
#logoutButton:focus-visible {
  border-color: rgba(83,221,247,.62);
  background: rgba(18,53,101,.88);
}
#logoutButton:hover span,
#logoutButton:focus-visible span {
  filter: drop-shadow(0 0 12px rgba(53,231,255,.58));
  transform: perspective(100px) rotateY(-15deg) scale(1.06);
}

@media (min-width: 1501px) {
  .sidebar::after { display: block; }
}

/* Readable flight-log table */
#recordTable { font-size: 19px; }
#recordTable th {
  color: #365273;
  font-size: 17px;
  font-weight: 900;
}
#recordTable td {
  padding-block: 21px;
  color: #183250;
  font-weight: 700;
}
#recordTable tr.plus td { color: #183250; }
#recordTable td:nth-child(2) { color: #0d65ad; font-weight: 900; }
#recordTable td.change { color: #079a68; font-size: 20px; font-weight: 900; }
#recordTable td:last-child { color: #4b607d; }

/* Illustrated dark navigation corridor on wide screens */
@media (min-width: 1501px) {
  .sidebar::before,
  .sidebar::after {
    position: absolute;
    z-index: 0;
    display: block;
    inset: 0;
    width: auto;
    height: auto;
    opacity: .74;
    background-repeat: no-repeat;
    content: "";
    pointer-events: none;
  }
  .sidebar::before {
    background-image:
      url('/assets/space-sun.svg'),
      url('/assets/space-galaxy.svg'),
      url('/assets/space-planet.svg'),
      radial-gradient(circle at 35% 26%,rgba(255,226,123,.55) 0 2px,transparent 3px);
    background-position: 6.5% center, 28% center, 35% center, center;
    background-size: 106px 106px, 112px 68px, 48px 48px, auto;
  }
  .sidebar::after {
    background-image:
      url('/assets/space-earth-premium.svg'),
      url('/assets/space-satellite.svg'),
      url('/assets/space-gate-energy.svg'),
      url('/assets/space-route.svg');
    background-position: 93.5% center, 65% center, 71% center, 76% center;
    background-size: 116px 116px, 48px 48px, 48px 48px, 72px 42px;
  }
  .sidebar > * { position: relative; z-index: 2; }
}

/* Animated astronaut and rotating Earth in the title corridor */
@media (min-width: 1181px) {
  .topbar-motion {
    position: absolute !important;
    z-index: 1 !important;
    top: 14px;
    right: 250px;
    bottom: 14px;
    left: 315px;
    overflow: hidden;
    pointer-events: none;
  }
  .walking-astronaut {
    position: absolute;
    bottom: 3px;
    left: -82px;
    width: 72px;
    height: 84px;
    background: url('/assets/space-walking-astronaut.svg') center/contain no-repeat;
    filter: drop-shadow(0 9px 10px rgba(35,99,164,.22));
    animation: astronaut-cross 8s ease-in-out infinite alternate;
  }
  .rotating-earth {
    position: absolute;
    top: 48%;
    left: 4%;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(58,176,224,.2);
    border-radius: 50%;
    background: rgba(240,250,255,.44);
    box-shadow: 0 0 0 9px rgba(53,183,229,.04), 0 0 28px rgba(53,183,229,.14);
    animation: earth-route-travel 14s ease-in-out infinite alternate;
  }
  .rotating-earth::before {
    position: absolute;
    inset: 5px;
    border: 2px dashed rgba(80,110,235,.26);
    border-radius: 50%;
    content: "";
    animation: earth-spin 9s linear infinite;
  }
  .rotating-earth::after {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: url('/assets/space-earth.svg') center/contain no-repeat;
    content: "";
    animation: earth-globe-spin 11s linear infinite;
  }
  @keyframes astronaut-cross {
    0% { left: 2%; transform: translateY(0); }
    45% { transform: translateY(-5px); }
    100% { left: 43%; transform: translateY(0); }
  }
  @keyframes earth-route-travel {
    0% { left: 88%; top: 44%; }
    25% { left: 80%; top: 8%; }
    50% { left: 72%; top: 40%; }
    75% { left: 64%; top: 5%; }
    100% { left: 55%; top: 22%; }
  }
  @keyframes earth-spin { to { transform: rotate(360deg); } }
  @keyframes earth-globe-spin { to { transform: rotate(360deg); } }
}

@media (prefers-reduced-motion: reduce) {
  .walking-astronaut, .rotating-earth, .rotating-earth::before, .rotating-earth::after { animation: none; }
  .walking-astronaut { left: 18%; }
}

/* 2026 layout refresh · clearer top navigation and reading-first hierarchy */
body.is-logged-in .app-shell { display: block; }
.sidebar {
  position: sticky;
  inset: 0 0 auto;
  z-index: 20;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: 13px max(24px,calc((100vw - 1400px)/2));
  border-right: 0;
  border-bottom: 1px solid rgba(101,149,241,.2);
  box-shadow: 0 10px 34px rgba(3,12,34,.16);
}
.sidebar::after { display: none; }
.sidebar > .brand { order: 1; flex: 0 0 auto; }
.sidebar .brand h1 { font-size: 20px; }
.sidebar .brand-mark { width: 50px; height: 50px; }
.nav-list { order: 2; display: flex; flex: 1 1 auto; justify-content: center; gap: 8px; margin: 0 18px; }
.nav-item { justify-content: flex-start; width: auto; min-width: 132px; min-height: 52px; padding: 0 15px; font-size: 15px; white-space: nowrap; }
.nav-item::before { flex: 0 0 auto; width: 30px; height: 30px; }
.nav-item.active { box-shadow: inset 0 -3px var(--cyan); }
.session-card { order: 3; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 12px; min-width: 208px; margin: 0; padding: 9px 12px; }
.session-card > span, .session-card > strong { grid-column: 1; }
.session-card > strong { margin: 2px 0 0; font-size: 13px; }
.session-card > button { grid-column: 2; margin: 0; min-height: 24px; }
.session-card > button + button { grid-row: 2; }
.session-card .reset-password-form { position: absolute; top: 70px; right: 0; width: 300px; padding: 16px; border: 1px solid rgba(116,153,219,.28); border-radius: 16px; background: #07142f; box-shadow: 0 20px 55px rgba(0,0,0,.32); }
.content { grid-column: auto; width: min(calc(100% - 48px),1400px); min-height: calc(100vh - 88px); margin: 0 auto; padding: 0 0 64px; }
.topbar { min-height: 124px; }
.topbar h2 { font-size: clamp(30px,2.6vw,40px); }
.overview-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 18px; }
.score-panel { grid-column: span 6; min-height: 238px; }
.overview-grid .stat-card { grid-column: span 2; min-height: 238px; }
.mission-illustration { min-height: 300px; }
.two-column { grid-template-columns: minmax(0,1.15fr) minmax(390px,.85fr); gap: 20px; margin-top: 20px; }
.panel, .score-panel, .stat-card, .mission-illustration { border-radius: 24px; }
.panel { padding: 28px; }
.panel-title { margin-bottom: 24px; }
.manage-layout { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 20px; }
.lottery-layout { grid-template-columns: minmax(620px,1.35fr) minmax(360px,.65fr); gap: 20px; }

@media (max-width: 1260px) {
  .session-card { display: none; }
  .nav-list { justify-content: flex-end; margin-right: 0; }
  .nav-item { min-width: 118px; }
}

@media (max-width: 820px) {
  .sidebar { height: calc(78px + env(safe-area-inset-bottom)); }
  .nav-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .nav-item { justify-content: center; gap: 6px; min-width: 0; min-height: 56px; padding: 0 7px; font-size: 14px; line-height: 1.15; }
  .nav-item::before { width: 31px; height: 31px; font-size: 14px; }
  .content { padding-bottom: 110px; }
  html.is-parent .sidebar { height: calc(136px + env(safe-area-inset-bottom)); }
  html.is-parent .content { padding-bottom: 168px; }
  html.is-parent .nav-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Command center typography: larger, darker and centered for shared family use. */
html.is-parent .session-card { text-align: center; }
html.is-parent .session-card #sidebarRole {
  color: #72eaff;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: .06em;
}
html.is-parent .session-card #sidebarUser:empty { display: none; }
html.is-parent .content { font-size: 17px; }
html.is-parent .eyebrow { font-size: 15px; }
html.is-parent .topbar h2 { font-size: clamp(34px,3vw,46px); }
html.is-parent .panel-title h3 { font-size: 24px; }
html.is-parent label { font-size: 17px; }
html.is-parent input,
html.is-parent select { min-height: 54px; font-size: 18px; }
html.is-parent button { font-size: 16px; }
html.is-parent .mini-label,
html.is-parent .status-pill { font-size: 15px; }
html.is-parent .record-summary span,
html.is-parent .child-summary span {
  color: #245775;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.5;
}
html.is-parent .child-summary strong { font-size: 21px; }
html.is-parent .kid-row > div span,
html.is-parent .approval-row p,
html.is-parent .prize-setting-row span,
html.is-parent .exchange-row p { color: #315b76; font-size: 16px; line-height: 1.55; }
html.is-parent th { color: #294e6c; font-size: 16px; }
html.is-parent td { font-size: 17px; }
html.is-parent .chance-summary,
html.is-parent .empty-state { font-size: 16px; }
html.is-parent .record-pagination button,
html.is-parent .record-pagination span { font-size: 15px; }

/* Replace low-contrast gray copy with saturated, readable space-blue tones. */
.timeline-item p,
.flight-map-head small,
.user-card span,
.mini-label,
.reward-target p,
.exchange-row p,
.approval-row p,
.prize-setting-row span,
.empty-state,
.record-pagination span,
.kid-row > div span,
.record-summary span,
.child-summary span,
html.is-parent .timeline-item p,
html.is-parent .reward-target p,
html.is-parent .exchange-row p,
html.is-parent .approval-row p,
html.is-parent .prize-setting-row span,
html.is-parent .empty-state {
  color: #205f88;
}
.timeline-item p,
.flight-map-head small,
.exchange-row p,
.approval-row p,
.prize-setting-row span,
.empty-state { font-weight: 700; }
.stat-card p { color: #d7eaff; }
.nav-item { color: #bed5fa; }
.record-pagination button { color: #244f75; }

/* Final wide-header identity placement */
@media (min-width: 1501px) {
  .sidebar {
    min-height: 108px;
    background-image:
      radial-gradient(circle at 50% 58%,rgba(226,253,255,.9) 0 1.1px,transparent 1.8px),
      radial-gradient(circle at 50% 50%,rgba(255,224,119,.7) 0 1px,transparent 1.6px),
      url('/assets/space-milky-way-band.svg'),
      radial-gradient(circle at 50% 0,rgba(29,69,141,.22),transparent 48%),
      linear-gradient(180deg,#081631,#050c20 72%);
    background-position: 0 100%, 19px calc(100% - 9px), center bottom, center, center;
    background-size: 58px 32px, 83px 38px, 100% 72%, auto, auto;
    background-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
  }
  .sidebar::before {
    background-position: 4% center, 28% center, 35% center, center;
  }
  .sidebar::after {
    display: block !important;
    opacity: 1 !important;
    background-size: 130px 130px, 48px 48px, 48px 48px, 72px 42px !important;
  }
  .sidebar .brand-mark { width: 66px !important; height: 66px !important; }
  .sidebar .brand h1 { font-size: 27px !important; line-height: 1.12; letter-spacing: .045em; }
  .sidebar .brand-kicker { margin-top: 6px; font-size: 11px !important; letter-spacing: .18em; }
  html.is-parent .session-card { min-width: 238px; }
  html.is-parent .session-card > span,
  html.is-parent .session-card > strong {
    text-align: center;
  }
  html.is-parent .session-card > span {
    font-size: 19px !important;
    line-height: 1.25;
  }
  html.is-parent .session-card > strong {
    font-size: 18px !important;
    line-height: 1.35;
  }
}

/* Child-only supply record header: wrap the English kicker and keep the full
   console artwork inside the clipped title row. */
@media (min-width: 821px) {
  html:not(.is-parent) .supply-record-panel .panel-title {
    gap: 10px;
    overflow: visible;
  }
  html:not(.is-parent) .supply-record-panel .panel-title > div {
    flex: 0 0 105px;
    width: 105px;
  }
  html:not(.is-parent) .supply-record-panel .supply-panel-kicker {
    display: block;
    width: 105px;
    line-height: 1.35;
    white-space: normal;
  }
  html:not(.is-parent) .supply-record-panel .supply-record-art {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: -2px 0;
    object-position: left center;
    transform: translateX(28px) scale(1.14);
    transform-origin: right center;
  }
}

/* Desktop space illustration system */
@media (min-width: 821px) {
  .sticker-strip {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    gap: 9px;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .sticker-strip span {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(77, 142, 216, .22);
    border-radius: 15px;
    background-color: rgba(255, 255, 255, .78);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35px 35px;
    box-shadow: 0 8px 22px rgba(54, 98, 156, .12);
  }

  .sticker-strip span:nth-child(1) { background-image: url('/assets/space-planet.svg'); }
  .sticker-strip span:nth-child(2) { background-image: url('/assets/space-rocket.svg'); transform: rotate(-5deg); }
  .sticker-strip span:nth-child(3) { background-image: url('/assets/space-satellite.svg'); transform: rotate(4deg); }
  .sticker-strip span:nth-child(4) { background-image: url('/assets/space-route.svg'); }

  .stat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .stat-card > * {
    position: relative;
    z-index: 2;
  }

  .stat-card::before {
    position: absolute;
    z-index: 1;
    top: 17px;
    right: 15px;
    width: 64px;
    height: 64px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    filter: drop-shadow(0 8px 12px rgba(46, 94, 151, .2));
  }

  .stat-card::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
      radial-gradient(circle at 82% 78%, rgba(41, 179, 222, .15) 0 2px, transparent 3px),
      radial-gradient(circle at 72% 66%, rgba(255, 193, 78, .16) 0 2px, transparent 3px),
      radial-gradient(circle at 91% 53%, rgba(112, 96, 240, .13) 0 1px, transparent 2px);
    content: "";
    pointer-events: none;
  }

  .stat-card-energy::before { background-image: url('/runtime-images/stat-energy-core.png'); }
  .stat-card-supply::before { background-image: url('/runtime-images/stat-supply-pod.png'); }
  .stat-card-review::before { background-image: url('/runtime-images/stat-mission-review.png'); }

  .panel-illustrated {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .panel-illustrated > * {
    position: relative;
    z-index: 2;
  }

  .panel-illustrated::before,
  .panel-illustrated::after {
    position: absolute;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    pointer-events: none;
  }

  .panel-flight-log::before {
    top: 5px;
    right: 70px;
    width: min(74%, 560px);
    height: 114px;
    background-image: url('/generated/recent-warp-trail.webp?v=2');
    opacity: 1;
    filter: drop-shadow(0 8px 14px rgba(43, 142, 213, .16));
    transform: translateX(38px);
  }

  .panel-flight-log::after {
    display: none;
  }

  .panel-task-console::before {
    top: 8px;
    right: 190px;
    width: 205px;
    height: 86px;
    background-image: url('/assets/space-command-base.svg');
    opacity: .94;
  }

  .panel-supply-station::before {
    /* 透明星门使用本地缓存的 WebP，保留高分屏清晰度并自然融入卡片底色。 */
    z-index: 3;
    top: -1px;
    right: 185px;
    width: 205px;
    height: 102px;
    background-image: url('/generated/space-warp-gate-v5.webp?v=20260805c');
    opacity: 1;
    filter: drop-shadow(0 10px 16px rgba(35, 126, 186, .16));
  }

  .mission-illustration {
    min-height: 360px;
    background-position: 67% 42%;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .sticker-strip { display: none; }
}

/* Login title hierarchy */
.login-card .login-brand {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  width: 100%;
  text-align: center;
}

.login-card {
  isolation: isolate;
  overflow: hidden;
}

.login-card::before,
.login-card::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.login-card::before {
  background:
    url('/assets/space-planet.svg') 22px 22px / 68px 68px no-repeat,
    url('/assets/space-rocket.svg') calc(100% - 22px) 28px / 66px 66px no-repeat,
    url('/assets/space-satellite.svg') 24px calc(100% - 112px) / 62px 62px no-repeat,
    url('/assets/space-route.svg') calc(100% - 20px) calc(100% - 116px) / 86px 52px no-repeat;
  opacity: .3;
}

.login-card::after {
  background-image:
    radial-gradient(circle at 16% 34%, rgba(53, 183, 229, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 34%, rgba(255, 180, 57, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 64%, rgba(118, 95, 238, .2) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 67%, rgba(53, 183, 229, .2) 0 2px, transparent 3px);
}

.login-card > * { position: relative; z-index: 2; }

.login-card .login-brand > div:last-child { width: 100%; }
.login-card .login-brand .brand-mark { width: 82px; height: 82px; margin-bottom: 15px; }
.login-card .login-system-title {
  margin: 0;
  color: #0b2b62;
  font-size: clamp(31px, 2.6vw, 40px);
  line-height: 1.15;
  letter-spacing: .08em;
  text-align: center;
}
.login-card .rainbow-title {
  margin: 13px 0 0;
  color: #1768bf;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-align: center;
}
.login-card .brand p { max-width: 360px; margin: 11px auto 0; text-align: center; }
.login-card > label { font-size: 20px; line-height: 1.35; }
.login-card > label select,
.login-card > label input { font-size: 20px; font-weight: 750; }

/* Richer desktop illustration layer */
@media (min-width: 821px) {
  #overviewPage {
    position: relative;
    isolation: isolate;
  }

  #overviewPage::before,
  #overviewPage::after {
    position: absolute;
    z-index: -1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    pointer-events: none;
  }

  #overviewPage::before {
    top: 104px;
    right: 0;
    width: 250px;
    height: 250px;
    background-image: url('/assets/space-planet.svg');
    opacity: .1;
  }

  #overviewPage::after {
    top: 360px;
    left: 0;
    width: 250px;
    height: 132px;
    background-image: url('/assets/space-route.svg');
    opacity: .1;
    transform: rotate(-9deg);
  }

  .score-panel::before {
    inset: auto -80px -170px auto;
    width: 370px;
    height: 370px;
    border: 1px solid rgba(53,231,255,.22);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53,231,255,.035), transparent 61%);
    box-shadow: 0 0 0 35px rgba(53,231,255,.025), 0 0 0 75px rgba(108,99,255,.025);
    opacity: 1;
    transform: none;
  }

  .score-panel::after {
    right: 25px;
    top: 19px;
  }

  .score-panel .score-ring::after {
    display: none;
  }

  .orbit-progress {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }

  .orbit-earth {
    position: absolute;
    width: 40px;
    height: 40px;
    background: url('/runtime-images/orbit-earth-bright.png') center/contain no-repeat;
    filter: drop-shadow(0 0 8px rgba(65, 224, 255, .52));
    transform: translate(-50%, -50%);
    transition: left .8s cubic-bezier(.22,.8,.25,1), top .8s cubic-bezier(.22,.8,.25,1);
  }

  .panel-flight-log::before { width: min(74%, 560px); height: 114px; opacity: 1; }
  .panel-flight-log::after { display: none; }
  .panel-task-console::before { width: 205px; height: 86px; opacity: .94; }
  .panel-task-console::after {
    display: none;
  }
  .panel-supply-station::before { width: 205px; height: 102px; opacity: 1; }
  .panel-supply-station::after {
    display: none;
  }
}

/* Remove the wide-header galaxy swirl that overlaps the enlarged brand title. */
@media (min-width: 1501px) {
  .sidebar::before {
    background-image:
      url('/assets/space-sun.svg'),
      url('/assets/space-planet.svg'),
      radial-gradient(circle at 35% 26%, rgba(255,226,123,.55) 0 2px, transparent 3px);
    background-position: 4% center, 35% center, center;
    background-size: 106px 106px, 48px 48px, auto;
  }
  html:not(.is-parent) .sidebar::before {
    background-image:
      url('/assets/space-sun.svg'),
      url('/assets/space-planet.svg'),
      url('/assets/dashboard-starfield.svg'),
      radial-gradient(circle at 2.5% 18%, rgba(255,255,255,.98) 0 1.5px, transparent 2.8px),
      radial-gradient(circle at 10.5% 24%, rgba(255,220,112,.96) 0 1.4px, transparent 2.8px),
      radial-gradient(circle at 20.5% 16%, rgba(101,235,255,.98) 0 1.6px, transparent 3px),
      radial-gradient(circle at 23% 48%, rgba(255,255,255,.94) 0 1.3px, transparent 2.6px),
      radial-gradient(circle at 35% 26%, rgba(255,226,123,.55) 0 2px, transparent 3px);
    background-position: 4% center, 35% center, left 42%, center, center, center, center, center;
    background-size: 106px 106px, 48px 48px, 48% 150%, auto, auto, auto, auto, auto;
    background-repeat: no-repeat;
  }
}

/* Keep the command-base identity equally prominent on wide parent screens. */
@media (min-width: 1501px) {
  html.is-parent .sidebar {
    min-height: 144px;
  }
  html.is-parent .sidebar > .brand {
    gap: 8px;
  }
  html.is-parent .sidebar .brand-mark {
    width: 96px !important;
    height: 96px !important;
    border-radius: 22px;
  }
  html.is-parent .sidebar .brand h1 {
    font-size: 32px !important;
    line-height: 1.12;
  }
  html.is-parent .sidebar .brand-kicker {
    margin-top: 7px;
    font-size: 13px !important;
  }
  html.is-parent .content {
    min-height: calc(100vh - 144px);
  }
}

@media (max-width: 760px) {
  .panel-flight-log::before,
  .panel-task-console::before,
  .panel-supply-station::before { display: none; }
  .login-card .login-brand .brand-mark { width: 62px; height: 62px; }
  .login-card .login-system-title { font-size: 29px; }
  .login-card .rainbow-title { font-size: 19px; }
}

/* Growth-task role locks must win over the shared parent panel and parent-only rules. */
html.is-parent #growthTasksPage .growth-task-create-panel {
  display: block;
  color: #eef8ff;
  background:
    radial-gradient(circle at 88% 8%,rgba(119,238,255,.2),transparent 27%),
    radial-gradient(circle at 8% 82%,rgba(156,112,255,.22),transparent 32%),
    linear-gradient(145deg,#102a5b,#1b3972 55%,#382a72);
}
html.is-parent #growthTasksPage .growth-task-create-panel .growth-task-heading h3 { color: #fff; }
html.is-parent #growthTasksPage .growth-task-create-panel label { color: #dbeaff; }
html.is-parent #growthTasksPage .growth-task-create-panel .mini-label {
  color: #d9f8ff;
  border-color: rgba(125,228,255,.38);
  background: rgba(30,80,145,.5);
}
@media (max-width: 820px) {
  .nav-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
  html.is-parent .nav-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Clearer large-print labels and simplified identity */
.topbar .user-card { display: none; }
.session-card { min-width: 205px; padding: 10px 14px; }
.session-card > span {
  color: #74eaff;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: .03em;
}
.session-card > strong {
  margin-top: 4px;
  color: #fff;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.25;
}
.eyebrow {
  color: #1768bf;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: .13em;
}
.tag {
  padding: 9px 13px;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .04em;
}

@media (max-width: 820px) {
  .orbit-progress { display: none; }
}

/* Figma-approved task form hierarchy: the confirmation rule follows the inputs. */
.panel-task-console::before {
  top: 14px;
  right: 10px;
  width: 350px;
  height: 150px;
  background-image: url('/runtime-images/jump-task-console.png');
  mix-blend-mode: multiply;
  opacity: 1;
}
.panel-task-console .task-console-title {
  align-items: flex-start;
  min-height: 136px;
  margin-bottom: 4px;
  padding-right: 280px;
}
.task-console-kicker {
  display: block;
  margin-bottom: 6px;
  color: #1768bf;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .05em;
}
.panel-task-console .task-console-title h3 {
  color: #111c35;
  font-size: 25px;
  line-height: 1.2;
  white-space: nowrap;
}
.panel-task-console .point-form { row-gap: 16px; }
.task-confirmation {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(69,207,228,.24);
  border-radius: 13px;
  color: #1768bf;
  background: rgba(111,239,250,.25);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.45;
}
.task-confirmation-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: #fff;
  background: #31cfe2;
  box-shadow: 0 2px 8px rgba(49,207,226,.28);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.panel-task-console .primary-button { min-height: 52px; }
@media (max-width: 980px) and (min-width: 761px) {
  .panel-task-console::before { top: 12px; right: 8px; width: 290px; height: 124px; }
  .panel-task-console .task-console-title { min-height: 118px; margin-bottom: 4px; padding-right: 220px; }
}
@media (max-width: 760px) {
  .panel-task-console .task-console-title { min-height: auto; padding-right: 0; }
  .task-confirmation { grid-column: auto; font-size: 14px; }
}

/* Transparent supply illustration: gate close to the title, three smaller ships to the right. */
.panel-supply-station::before {
  z-index: 1;
  top: 26px;
  right: 142px;
  width: 294px;
  height: 98px;
  background-image: url('/runtime-images/supply-gate-fleet.png');
  background-position: left center;
  background-size: contain;
  mix-blend-mode: normal;
  opacity: 1;
}
@media (max-width: 980px) and (min-width: 761px) {
  .panel-supply-station::before { right: 128px; width: 222px; height: 76px; }
}

/* A broad warp reactor occupies the center; the Earth remains a separate moving orbit object. */
.score-panel .orbit-progress { z-index: 0; }
.score-panel .orbit-progress::before {
  position: absolute;
  top: 10px;
  left: clamp(195px,28%,265px);
  width: 210px;
  height: 220px;
  background: url('/runtime-images/warp-reactor.png') center / 210px 210px no-repeat;
  content: "";
  mix-blend-mode: normal;
  opacity: 1;
}
.score-panel .orbit-earth { display: block; }
@media (max-width: 980px) and (min-width: 821px) {
  .score-panel .orbit-progress::before {
    left: clamp(188px,28%,245px);
    width: 190px;
    height: 205px;
    background-size: 190px 195px;
  }
}

.reward-visual {
  width: 82px;
  height: 82px;
  border: 1px solid rgba(56, 184, 229, .24);
  border-radius: 25px;
  background: linear-gradient(145deg, #f6fdff, #edf3ff);
  box-shadow: 0 12px 30px rgba(42, 112, 186, .18);
  font-size: 0;
  transform: none;
}

.reward-visual::before {
  width: 68px;
  height: 68px;
  background: url('/assets/space-gate-energy.svg') center/contain no-repeat;
  content: "";
}

/* Dynamic flight map driven by confirmed tasks */
.flight-map {
  position: relative;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid #d8e6f5;
  border-radius: 20px;
  background:
    radial-gradient(circle at 84% 18%, rgba(84,107,242,.12), transparent 25%),
    radial-gradient(circle at 18% 84%, rgba(53,231,255,.12), transparent 24%),
    linear-gradient(145deg,#f7fbff,#eef5ff);
}
.flight-map::after {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('/generated/jump-trail-map.webp?v=1') center / cover no-repeat;
  content: "";
  opacity: .32;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.flight-map-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px 0; text-shadow: 0 1px 1px rgba(255,255,255,.92); }
.flight-map-head span, .flight-map-head strong { display: block; }
.flight-map-head span { color: #1768bf; font-size: 18px; font-weight: 850; letter-spacing: .08em; }
.flight-map-head strong { margin-top: 5px; color: #142443; font-size: 18px; }
.flight-map-head small { color: #647795; font-size: 16px; font-weight: 800; }
.flight-map-head,
.flight-map-svg { position: relative; z-index: 1; }
.flight-map-svg { display: block; width: 100%; height: auto; min-height: 190px; }
.flight-route-plan { fill: none; stroke: #bfd3e9; stroke-width: 3; stroke-dasharray: 7 10; stroke-linecap: round; }
.flight-route-progress {
  fill: none;
  stroke: url('#flightRouteGradient');
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  filter: url('#flightGlow');
  animation: draw-flight-route 1.3s cubic-bezier(.22,.8,.25,1) forwards;
}
.flight-planet, .flight-black-hole { opacity: 0; animation: reveal-flight-node .52s ease-out calc(.35s + var(--node-delay)) forwards; transform-box: fill-box; transform-origin: center; }
.flight-planet-halo { fill: rgba(53,231,255,.12); stroke: rgba(53,151,235,.24); stroke-width: 2; }
.flight-planet-body { stroke: #fff; stroke-width: 2; filter: url('#flightGlow'); }
.flight-planet-ring { fill: none; stroke: var(--planet-ring); stroke-width: 2.5; opacity: .92; }
.flight-planet-glint { fill: rgba(255,255,255,.84); }
.flight-planet text { fill: #1768bf; font-size: 12px; font-weight: 900; }
.flight-planet.is-latest .flight-planet-halo { animation: pulse-flight-node 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.flight-black-hole-halo { fill: rgba(103,67,190,.16); stroke: rgba(133,107,236,.48); stroke-width: 2; }
.flight-black-hole-ring { fill: none; stroke: #ffc85d; stroke-width: 5; filter: url('#flightGlow'); }
.flight-black-hole-core { fill: #09091b; stroke: #5f4ba6; stroke-width: 2; }
.flight-black-hole text { fill: #5c438d; stroke: #f8fbff; stroke-width: 3px; paint-order: stroke; font-size: 12px; font-weight: 900; }
.flight-node { opacity: 0; animation: reveal-flight-node .42s ease-out calc(.35s + var(--node-delay)) forwards; transform-box: fill-box; transform-origin: center; }
.flight-node-halo { fill: rgba(53,231,255,.16); stroke: rgba(53,151,235,.32); stroke-width: 2; }
.flight-node-core { fill: #fff; stroke: #35b9e5; stroke-width: 4; filter: url('#flightGlow'); }
.flight-node text { fill: #1768bf; font-size: 14px; font-weight: 850; }
.flight-node.is-latest .flight-node-halo { animation: pulse-flight-node 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.flight-origin { filter: drop-shadow(0 0 9px rgba(53,231,255,.48)); }
.flight-ship { filter: drop-shadow(0 7px 9px rgba(50,99,182,.28)); animation: float-flight-ship 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.flight-ship.is-black-hole-bound { animation: none; transform: none; }

@keyframes draw-flight-route { to { stroke-dashoffset: 0; } }
@keyframes reveal-flight-node { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse-flight-node { 50% { opacity: .35; transform: scale(1.35); } }
@keyframes float-flight-ship { 50% { transform: translateY(-5px) rotate(3deg); } }

/* Wide-screen illustration rails and illustrated title corridor */
@media (min-width: 1501px) {
  body.is-logged-in::before,
  body.is-logged-in::after {
    position: fixed;
    z-index: 0;
    top: 88px;
    bottom: 0;
    width: calc((100vw - 1400px) / 2);
    min-width: 50px;
    background-color: #eaf3fd;
    background-repeat: no-repeat;
    content: "";
    pointer-events: none;
  }
  body.is-logged-in::before {
    left: 0;
    background-image:
      url('/assets/planet-rail-left.svg'),
      radial-gradient(circle at 65% 18%,rgba(53,183,229,.18) 0 3px,transparent 4px);
    background-position: center top, center;
    background-size: 100% auto, auto;
  }
  body.is-logged-in::after {
    right: 0;
    background-image:
      url('/assets/planet-rail-right.svg'),
      radial-gradient(circle at 35% 28%,rgba(111,94,240,.16) 0 3px,transparent 4px);
    background-position: center top, center;
    background-size: 100% auto, auto;
  }
  .app-shell { position: relative; z-index: 1; }
}

@media (min-width: 1181px) {
  .topbar::before {
    position: absolute;
    z-index: 0;
    top: 18px;
    right: 240px;
    bottom: 17px;
    left: 300px;
    background:
      url('/assets/space-route.svg') center / min(420px,70%) 78px no-repeat,
      radial-gradient(circle at 18% 44%,rgba(53,183,229,.22) 0 3px,transparent 4px),
      radial-gradient(circle at 78% 62%,rgba(255,187,66,.2) 0 3px,transparent 4px);
    opacity: .42;
    content: "";
    pointer-events: none;
  }
  .topbar > * { position: relative; z-index: 1; }
  html:not(.is-parent) .session-card { min-width: 230px; }
  html:not(.is-parent) .session-card > span { font-size: 18px; font-weight: 900; }
  html:not(.is-parent) .session-card > strong { font-size: 24px; font-weight: 900; }
}

@media (min-width: 761px) {
  .login-card .login-brand .brand-mark { width: 164px; height: 164px; }
}

@media (max-width: 760px) {
  .login-card .login-brand .brand-mark { width: 92px; height: 92px; }
  .flight-map-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .flight-map-svg { min-width: 650px; }
  .flight-map { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .flight-route-progress { stroke-dashoffset: 0; animation: none; }
  .flight-node, .flight-planet, .flight-black-hole { opacity: 1; animation: none; }
  .flight-node.is-latest .flight-node-halo, .flight-ship { animation: none; }
}

.panel-supply-station .text-button {
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #1768bf;
}

.stargate-launch-label {
  display: grid;
  justify-items: center;
  gap: 5px;
  white-space: nowrap;
}
.stargate-launch-label small { color: #138ab6; font: 900 11px/1 Inter,sans-serif; letter-spacing: .12em; }
.stargate-launch-label span { display: inline-flex; align-items: center; gap: 5px; }

.stargate-launch-label b {
  color: #f2b72f;
  font-size: .72em;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(255,198,77,.42));
}

.panel-supply-station .text-button:hover,
.panel-supply-station .text-button:focus-visible {
  color: #0b4e91;
  border-color: #a9c9eb;
  background: #e8f3ff;
}

@media (max-width: 760px) {
  .login-card h1 { font-size: 29px; }
  .login-card .brand p { font-size: 15px; }
}

/* Login composition · keeps the real brothers fully visible on the right */
.login-screen {
  display: block;
  background:
    linear-gradient(90deg,rgba(220,244,255,.055),rgba(220,244,255,.018)),
    url('/jump-engine-hero.webp?v=original-pose-final-20260804') center/cover no-repeat,
    #06102a;
}
.login-story { position: absolute; inset: 0; min-height: 100vh; padding: 32px; pointer-events: none; }
.login-story::after, .login-story-brand, .login-story-copy { display: none; }
.login-card {
  position: absolute;
  top: 50%;
  right: clamp(24px,3vw,48px);
  left: auto;
  width: min(430px,calc(100% - 48px));
  margin: 0;
  padding: 34px 38px;
  color: #101a34;
  border-color: rgba(201,218,239,.9);
  background: rgba(248,251,255,.94);
  box-shadow: 0 35px 90px rgba(0,4,18,.38),inset 0 1px rgba(255,255,255,.8);
  transform: translateY(-50%);
}
.login-card h1 { color: #101a34; }
.login-card .brand p { color: #5f6f8b; }
.login-card .login-kicker { color: #1768bf; }
.login-card label { color: #435574; }
.login-card input, .login-card select { color: #14203b; border-color: #c8d7e9; background: #fff; }
.login-card input::placeholder { color: #8290a8; }

@media (max-width: 760px) {
  .login-screen { background-position: 68% center; }
  .login-card { top: auto; right: 14px; bottom: 18px; left: 14px; width: auto; padding: 28px 24px; transform: none; }
  .login-card .brand-mark { width: 42px; height: 42px; }
  .login-card h1 { font-size: 29px; }
  .login-card .brand p { font-size: 14px; }
}

/* Login card uses the same deep-space palette as the command-deck artwork. */
.login-card {
  color: #eff9ff;
  border-color: rgba(104,215,255,.5);
  background:
    radial-gradient(circle at 18% 6%,rgba(48,203,235,.2),transparent 34%),
    linear-gradient(145deg,rgba(8,31,68,.95),rgba(10,47,88,.93) 58%,rgba(16,37,82,.96));
  box-shadow: 0 35px 90px rgba(0,4,18,.5),inset 0 1px rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
}
.login-card h1 { color: #f7fcff; text-shadow: 0 2px 14px rgba(70,215,255,.18); }
.login-card .brand p { color: #c6daf0; }
.login-card .login-kicker,
.login-card .rainbow-title { color: #68e6ff; }
.login-card label { color: #d9e9f8; }
.login-card input,
.login-card select {
  color: #12365c;
  border-color: #86cbe9;
  background: linear-gradient(135deg,#f4fbff,#dff3ff);
}
.login-card input::placeholder { color: #5f7895; }

@media (max-width: 820px) {
  .sidebar { height: calc(78px + env(safe-area-inset-bottom)); }
  .nav-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .nav-item { justify-content: center; gap: 6px; min-height: 56px; padding: 0 7px; font-size: 14px; line-height: 1.15; }
  .nav-item::before { width: 31px; height: 31px; font-size: 14px; }
  .content { padding-bottom: 110px; }
  html.is-parent .sidebar { height: calc(136px + env(safe-area-inset-bottom)); }
  html.is-parent .content { padding-bottom: 168px; }
  html.is-parent .nav-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1080px) {
  .sidebar { min-height: 78px; padding-block: 10px; }
  .sidebar .brand h1, .brand-kicker { display: none; }
  .nav-list { margin-left: 12px; }
  .nav-item { min-width: 0; padding: 0 12px; }
  .content { min-height: calc(100vh - 78px); }
  .overview-grid .score-panel { grid-column: 1 / -1; }
  .overview-grid .stat-card { grid-column: span 4; min-height: 150px; }
  .two-column, .lottery-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body.is-logged-in .app-shell { display: block; }
  .sidebar {
    position: fixed;
    inset: auto 0 0;
    width: auto;
    min-height: 76px;
    height: calc(76px + env(safe-area-inset-bottom));
    padding: 8px 8px max(8px,env(safe-area-inset-bottom));
    border-top: 1px solid rgba(101,149,241,.24);
    border-bottom: 0;
  }
  .sidebar > .brand, .sidebar > .session-card { display: none; }
  .nav-list { display: grid; grid-template-columns: repeat(5,1fr); width: 100%; gap: 5px; margin: 0; }
  .nav-item { justify-content: center; min-width: 0; min-height: 56px; padding: 0; font-size: 0; }
  .nav-item::before { width: 36px; height: 36px; font-size: 16px; }
  .content { width: auto; min-height: 100vh; margin: 0; padding: 0 18px 106px; }
  .topbar { min-height: 98px; }
  .topbar h2 { font-size: 30px; }
  .overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .overview-grid .score-panel { grid-column: 1 / -1; min-height: 210px; }
  .overview-grid .stat-card { grid-column: span 1; min-height: 145px; }
  .overview-grid .stat-card:last-child { grid-column: 1 / -1; min-height: 112px; }
  .mission-illustration { min-height: 360px; }
  .two-column { margin-top: 12px; }
  .panel { padding: 20px; }
  .manage-layout { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .content { padding-inline: 14px; }
  .topbar h2 { font-size: 27px; }
  .score-panel { padding: 20px; }
  .score-copy > strong { font-size: 52px; }
  .score-ring { width: 88px; height: 88px; }
  .stat-card { padding: 17px; }
  .panel-title h3 { font-size: 20px; }
}

/* Large-print accessibility scale */
:root { font-size: 18px; }
.sidebar .brand h1 { font-size: 22px; }
.brand-kicker { font-size: 10px; }
.nav-item { min-width: 148px; font-size: 18px; }
.session-card > span { font-size: 12px; }
.session-card > strong { font-size: 15px; }
.topbar h2 { font-size: clamp(34px,3vw,44px); }
.eyebrow { font-size: 13px; }
.user-card strong { font-size: 17px; }
.user-card span { font-size: 14px; }
.panel-title h3 { font-size: 25px; }
.mini-label { padding: 7px 10px; font-size: 13px; }
.tag { font-size: 13px; }
.score-copy p { font-size: 17px; line-height: 1.8; }
.stat-card > span { font-size: 16px; }
.stat-card > strong { font-size: clamp(32px,2.5vw,42px); }
.stat-card p { font-size: 15px; line-height: 1.65; }
label { font-size: 17px; }
input, select { min-height: 56px; padding-inline: 16px; font-size: 18px; }
.primary-button, .secondary-button, .danger-button, .text-button, .segmented button, .record-pagination button { min-height: 48px; font-size: 17px; }
.text-button { min-height: 38px; }
.timeline-item { min-height: 86px; }
.timeline-item strong { font-size: 20px; line-height: 1.35; }
.timeline-item p { margin-top: 7px; color: #536b8d; font-size: 17px; font-weight: 650; line-height: 1.5; }
.change { font-size: 18px; }
.reward-target p { font-size: 16px; }
.segmented button { min-height: 42px; font-size: 16px; }
.record-summary span, .child-summary span { font-size: 14px; }
.record-summary strong { font-size: 26px; }
.child-summary strong { font-size: 19px; }
table { font-size: 16px; }
th { font-size: 14px; }
th, td { padding: 18px 15px; }
.record-pagination span { font-size: 14px; }
.empty-state { font-size: 16px; }
.kid-row > div strong { font-size: 19px; }
.kid-row > div span { font-size: 14px; }
.kid-row > strong { font-size: 25px; }
.approval-row p, .prize-setting-row span, .exchange-row p { font-size: 15px; }
.chance-summary { font-size: 15px; }
.mission-illustration-copy span { font-size: 12px; }
.mission-illustration-copy h3 { font-size: clamp(28px,2.5vw,38px); }
.mission-illustration-copy p { font-size: 16px; }
.login-card h1 { font-size: 35px; }
.login-card .brand p { font-size: 16px; }
.login-card > label { font-size: 17px; }
.login-story-copy p { font-size: clamp(18px,1.8vw,24px); }
.prize-card p, .lottery-panel .prize-card p { font-size: 15px; }

@media (max-width: 1260px) {
  .nav-item { min-width: 130px; font-size: 16px; }
}

@media (max-width: 1080px) {
  .nav-item { min-width: 0; font-size: 16px; }
}

@media (max-width: 820px) {
  :root { font-size: 17px; }
  .topbar h2 { font-size: 32px; }
  .panel-title h3 { font-size: 23px; }
  label { font-size: 16px; }
  input, select { min-height: 54px; font-size: 17px; }
  .primary-button, .secondary-button, .danger-button, .text-button, .segmented button, .record-pagination button { font-size: 16px; }
  table { font-size: 15px; }
  th { font-size: 13px; }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  html.is-parent .sidebar { padding-inline: 18px; }
  html.is-parent .sidebar .brand h1 { font-size: 18px; }
  html.is-parent .sidebar .brand-mark { width: 42px; height: 42px; }
  html.is-parent .nav-list { justify-content: center; gap: 4px; margin-inline: 10px; }
  html.is-parent .nav-item { min-width: 0; padding-inline: 8px; gap: 7px; font-size: 15px; }
  html.is-parent .nav-item::before { width: 28px; height: 28px; }
  html.is-parent .session-card { display: grid; min-width: 166px; gap: 2px 8px; padding: 7px 9px; }
  html.is-parent .session-card > span { display: none; }
  html.is-parent .session-card > strong { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: 13px; }
  html.is-parent .session-card > button { grid-column: 2; min-height: 28px; font-size: 13px; }
}

/* Final themed surfaces · replace flat white cards with distinct space-light atmospheres */
.sidebar .brand h1 {
  color: #fff;
  background: linear-gradient(94deg,#ffffff 0%,#c8fbff 34%,#59e5ff 62%,#ffe47a 88%,#fff7c7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(74,226,255,.24));
  text-shadow: 0 2px 12px rgba(28,126,218,.18);
}
.brand-kicker {
  color: #70edff;
  text-shadow: 0 0 10px rgba(68,226,255,.48);
}
.session-card > strong {
  color: #74eaff !important;
  text-shadow: 0 0 10px rgba(72,228,255,.28);
}

.panel:not(.lottery-panel) {
  border-color: #b9dced;
  background:
    radial-gradient(circle at 12% 8%,rgba(77,224,242,.20),transparent 29%),
    radial-gradient(circle at 90% 82%,rgba(126,107,241,.13),transparent 34%),
    linear-gradient(145deg,#f1fcff 0%,#eaf4ff 58%,#f3efff 100%);
  box-shadow: 0 20px 48px rgba(52,91,146,.13),inset 0 1px rgba(255,255,255,.92);
}

#overviewPage .panel-flight-log {
  border-color: #a9ddec;
  background:
    radial-gradient(circle at 86% 15%,rgba(53,220,239,.22),transparent 25%),
    linear-gradient(145deg,#effcff,#e7f7fb 52%,#edf2ff);
}
#overviewPage .panel-task-console {
  border-color: #c7bced;
  background:
    radial-gradient(circle at 84% 8%,rgba(151,119,247,.22),transparent 28%),
    linear-gradient(145deg,#fbf9ff,#f0ecff 55%,#eaf7ff);
}
#overviewPage .panel-supply-station {
  border-color: #efd599;
  background:
    radial-gradient(circle at 88% 14%,rgba(255,197,67,.23),transparent 28%),
    linear-gradient(145deg,#fffdf4,#fff5dc 54%,#f3efff);
}

#recordsPage > .panel {
  border-color: #b8ccef;
  background:
    radial-gradient(circle at 74% 3%,rgba(132,111,244,.18),transparent 24%),
    radial-gradient(circle at 12% 20%,rgba(60,213,238,.17),transparent 27%),
    linear-gradient(145deg,#f4fbff,#edf2ff 58%,#f6efff);
}
#rewardsPage .lottery-layout > .panel:last-child {
  border-color: #b8e0cc;
  background:
    radial-gradient(circle at 86% 8%,rgba(57,207,159,.18),transparent 27%),
    linear-gradient(145deg,#f4fffb,#eaf9f3 55%,#edf6ff);
}
#managePage .manage-layout > .panel:nth-child(1) {
  border-color: #add9ec;
  background: linear-gradient(145deg,#f0fbff,#e8f5ff 58%,#eef0ff);
}
#managePage .manage-layout > .panel:nth-child(2) {
  border-color: #d0bfee;
  background: linear-gradient(145deg,#fbf8ff,#f1eaff 57%,#edf7ff);
}
#managePage .manage-layout > .panel:nth-child(3) {
  border-color: #efd49e;
  background: linear-gradient(145deg,#fffdf5,#fff3dc 55%,#f6f0ff);
}
#prizeSettingsPage > .panel {
  border-color: #aee2d2;
  background:
    radial-gradient(circle at 88% 7%,rgba(58,209,168,.18),transparent 25%),
    linear-gradient(145deg,#f3fffb,#e9f9f4 56%,#eef5ff);
}

html.is-parent .panel:not(.lottery-panel) {
  background:
    radial-gradient(circle at 12% 8%,rgba(77,224,242,.20),transparent 29%),
    radial-gradient(circle at 90% 82%,rgba(126,107,241,.13),transparent 34%),
    linear-gradient(145deg,#f1fcff 0%,#eaf4ff 58%,#f3efff 100%);
}
html.is-parent #overviewPage .panel-flight-log {
  background: radial-gradient(circle at 86% 15%,rgba(53,220,239,.22),transparent 25%),linear-gradient(145deg,#effcff,#e7f7fb 52%,#edf2ff);
}
html.is-parent #overviewPage .flight-map { display: none; }
html.is-parent #overviewPage .panel-task-console {
  background: radial-gradient(circle at 84% 8%,rgba(151,119,247,.22),transparent 28%),linear-gradient(145deg,#fbf9ff,#f0ecff 55%,#eaf7ff);
}
html.is-parent #overviewPage .panel-supply-station {
  background: radial-gradient(circle at 88% 14%,rgba(255,197,67,.23),transparent 28%),linear-gradient(145deg,#fffdf4,#fff5dc 54%,#f3efff);
}

html.is-parent #recordsPage > .panel { background: radial-gradient(circle at 74% 3%,rgba(132,111,244,.18),transparent 24%),radial-gradient(circle at 12% 20%,rgba(60,213,238,.17),transparent 27%),linear-gradient(145deg,#f4fbff,#edf2ff 58%,#f6efff); }
html.is-parent #rewardsPage .lottery-layout > .panel:last-child { background: radial-gradient(circle at 86% 8%,rgba(57,207,159,.18),transparent 27%),linear-gradient(145deg,#f4fffb,#eaf9f3 55%,#edf6ff); }
html.is-parent #managePage .manage-layout > .panel:nth-child(1) { background: linear-gradient(145deg,#f0fbff,#e8f5ff 58%,#eef0ff); }
html.is-parent #managePage .manage-layout > .panel:nth-child(2) { background: linear-gradient(145deg,#fbf8ff,#f1eaff 57%,#edf7ff); }
html.is-parent #managePage .manage-layout > .panel:nth-child(3) { background: linear-gradient(145deg,#fffdf5,#fff3dc 55%,#f6f0ff); }
html.is-parent #prizeSettingsPage > .panel { background: radial-gradient(circle at 88% 7%,rgba(58,209,168,.18),transparent 25%),linear-gradient(145deg,#f3fffb,#e9f9f4 56%,#eef5ff); }

/* Nested surfaces keep the same material language without becoming flat white */
.exchange-row,
.approval-row,
.prize-setting-row,
.prize-setting-form,
.add-kid-form,
.child-summary article,
tbody tr,
html.is-parent .exchange-row,
html.is-parent .approval-row,
html.is-parent .prize-setting-row,
html.is-parent .prize-setting-form,
html.is-parent .add-kid-form,
html.is-parent .child-summary article,
html.is-parent tbody tr {
  background: linear-gradient(135deg,rgba(250,254,255,.94),rgba(233,245,255,.9) 58%,rgba(244,239,255,.86));
}
tbody tr:nth-child(even),
html.is-parent tbody tr:nth-child(even) {
  background: linear-gradient(135deg,rgba(250,255,252,.94),rgba(234,249,243,.9) 58%,rgba(239,246,255,.86));
}

/* Dashboard status capsules: three distinct, luminous non-white surfaces */
.overview-grid .stat-card-energy,
html.is-parent .overview-grid .stat-card-energy {
  color: #f5fbff;
  border-color: #2a79b7;
  background:
    radial-gradient(circle at 82% 18%,rgba(70,230,250,.25),transparent 29%),
    radial-gradient(circle at 18% 92%,rgba(47,127,210,.16),transparent 36%),
    linear-gradient(145deg,#173b73 0%,#102e61 58%,#0b244f 100%);
  box-shadow: 0 18px 38px rgba(9,39,88,.22),inset 0 1px rgba(209,248,255,.16);
}
.overview-grid .stat-card-supply,
html.is-parent .overview-grid .stat-card-supply {
  color: #f5fbff;
  border-color: #8c733f;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,202,72,.22),transparent 29%),
    radial-gradient(circle at 18% 92%,rgba(83,112,196,.15),transparent 37%),
    linear-gradient(145deg,#203a6b 0%,#172f5e 58%,#10264f 100%);
  box-shadow: 0 18px 38px rgba(9,39,88,.22),inset 0 1px rgba(255,232,167,.14);
}
.overview-grid .stat-card-review,
html.is-parent .overview-grid .stat-card-review {
  color: #f5fbff;
  border-color: #6656a9;
  background:
    radial-gradient(circle at 82% 18%,rgba(154,117,247,.23),transparent 30%),
    radial-gradient(circle at 18% 92%,rgba(48,151,213,.14),transparent 36%),
    linear-gradient(145deg,#24366d 0%,#1b2c60 58%,#14234e 100%);
  box-shadow: 0 18px 38px rgba(9,39,88,.22),inset 0 1px rgba(217,204,255,.14);
}
.overview-grid .stat-card-energy > span,
.overview-grid .stat-card-supply > span,
.overview-grid .stat-card-review > span,
html.is-parent .overview-grid .stat-card-energy > span,
html.is-parent .overview-grid .stat-card-supply > span,
html.is-parent .overview-grid .stat-card-review > span {
  color: #d8e9ff;
  text-shadow: 0 1px 5px rgba(1,15,39,.42);
}
.overview-grid .stat-card-energy p,
.overview-grid .stat-card-supply p,
.overview-grid .stat-card-review p,
html.is-parent .overview-grid .stat-card-energy p,
html.is-parent .overview-grid .stat-card-supply p,
html.is-parent .overview-grid .stat-card-review p {
  color: #b9cee9;
}
.overview-grid .stat-card-energy > strong { color: #59e8f5; text-shadow: 0 0 18px rgba(83,229,244,.22); }
.overview-grid .stat-card-supply > strong { color: #ffc95a; text-shadow: 0 0 18px rgba(255,197,82,.20); }
.overview-grid .stat-card-review > strong { color: #b69aff; text-shadow: 0 0 18px rgba(170,142,255,.20); }

/* Energy selector uses a light spacecraft-console palette, including native options */
.lottery-panel #lotteryPoints,
.lottery-panel #lotteryKid,
html.is-parent .lottery-panel #lotteryPoints,
html.is-parent .lottery-panel #lotteryKid {
  color: #10325d;
  border-color: #72c9e8;
  background: linear-gradient(135deg,#e9fbff 0%,#dff4ff 56%,#ece9ff 100%);
  box-shadow: 0 8px 20px rgba(42,142,190,.14),inset 0 1px rgba(255,255,255,.9);
}
.lottery-panel #lotteryPoints option,
.lottery-panel #lotteryKid option,
html.is-parent .lottery-panel #lotteryPoints option,
html.is-parent .lottery-panel #lotteryKid option {
  color: #10325d;
  background: #e7f6ff;
}
.lottery-panel #lotteryPoints option:checked,
.lottery-panel #lotteryKid option:checked {
  color: #fff;
  background: #2873d8;
}

/* Dashboard cards share the navigation corridor's Milky Way texture. */
.overview-grid .score-panel {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    url('/assets/space-milky-way-band.svg'),
    radial-gradient(ellipse at 55% 60%, rgba(103, 98, 225, .14), transparent 48%),
    linear-gradient(120deg, #0e2c5f 0%, #152b67 58%, #132056 100%);
  background-position: 38% center, center 66%, center, center;
  background-size: auto 100%, 150% 72%, auto, auto;
  background-repeat: no-repeat;
}

.overview-grid .stat-card-energy {
  --dashboard-card-nebula: radial-gradient(circle at 82% 18%, rgba(70, 230, 250, .24), transparent 29%);
  --dashboard-card-base: linear-gradient(145deg, #173b73 0%, #102e61 58%, #0b244f 100%);
  --dashboard-star-position: 4% center;
  --dashboard-star-size: auto 106%;
  --dashboard-band-position: 23% 69%;
}

.overview-grid .stat-card-supply {
  --dashboard-card-nebula: radial-gradient(circle at 82% 18%, rgba(255, 202, 72, .21), transparent 29%);
  --dashboard-card-base: linear-gradient(145deg, #203a6b 0%, #172f5e 58%, #10264f 100%);
  --dashboard-star-position: 51% center;
  --dashboard-star-size: auto 113%;
  --dashboard-band-position: 58% 64%;
}

.overview-grid .stat-card-review {
  --dashboard-card-nebula: radial-gradient(circle at 82% 18%, rgba(154, 117, 247, .22), transparent 30%);
  --dashboard-card-base: linear-gradient(145deg, #24366d 0%, #1b2c60 58%, #14234e 100%);
  --dashboard-star-position: 96% center;
  --dashboard-star-size: auto 121%;
  --dashboard-band-position: 82% 71%;
}

.overview-grid .stat-card {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    url('/assets/space-milky-way-band.svg'),
    var(--dashboard-card-nebula),
    var(--dashboard-card-base);
  background-position: var(--dashboard-star-position), var(--dashboard-band-position), center, center;
  background-size: var(--dashboard-star-size), 225% 68%, auto, auto;
  background-repeat: no-repeat;
}

/* Flight-log date consoles: distinct start/end navigation surfaces */

/* Growth tasks · mission scheduling and three-stage completion flow */
.growth-task-layout {
  display: grid;
  grid-template-columns: minmax(340px,.72fr) minmax(580px,1.28fr);
  gap: 22px;
  align-items: start;
}
.growth-task-create-panel,
.growth-task-board {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(112,148,228,.2);
}
.growth-task-create-panel {
  color: #eef8ff;
  background:
    radial-gradient(circle at 88% 8%,rgba(119,238,255,.2),transparent 27%),
    radial-gradient(circle at 8% 82%,rgba(156,112,255,.22),transparent 32%),
    linear-gradient(145deg,#102a5b,#1b3972 55%,#382a72);
  box-shadow: 0 24px 60px rgba(35,65,133,.2),inset 0 1px rgba(255,255,255,.14);
}
.growth-task-create-panel::after {
  position: absolute;
  right: -54px;
  bottom: -74px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(109,237,255,.2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 26px rgba(112,111,255,.06),inset 0 0 0 54px rgba(84,224,255,.04);
  content: "";
  pointer-events: none;
}
.growth-task-heading { align-items: flex-start; }
.growth-task-heading h3,
.growth-task-board h3 { margin: 6px 0 0; }
.growth-task-create-panel .growth-task-heading h3 { color: #fff; }
.growth-task-create-panel .mini-label {
  color: #d9f8ff;
  border-color: rgba(125,228,255,.38);
  background: rgba(30,80,145,.5);
}
.growth-task-kicker {
  display: block;
  color: #75efff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}
.growth-task-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.growth-task-form label { color: #dbeaff; }
.growth-task-form input,
.growth-task-form select {
  color: #153457;
  border-color: rgba(125,210,241,.7);
  background: linear-gradient(145deg,#fff,#eaf8ff);
  box-shadow: 0 10px 24px rgba(3,21,58,.16),inset 0 1px rgba(255,255,255,.9);
}
.growth-task-time-range {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
}
.growth-task-time-range > span { padding-bottom: 16px; color: #7deeff; font-size: 24px; }
.growth-task-title-field { grid-column: 1 / -1; }
.growth-task-submit { grid-column: 1 / -1; }
.growth-task-form-message { grid-column: 1 / -1; min-height: 22px; margin: -5px 0 0; color: #ffd0d6; }
.growth-task-form-message.is-success { color: #8bffd5; }

.growth-task-board {
  min-height: 610px;
  background:
    radial-gradient(circle at 86% 4%,rgba(123,107,244,.2),transparent 25%),
    radial-gradient(circle at 12% 16%,rgba(52,215,237,.2),transparent 30%),
    linear-gradient(145deg,#f3fdff,#eaf5ff 58%,#f4efff);
  box-shadow: 0 22px 55px rgba(48,91,148,.14),inset 0 1px #fff;
}
.growth-task-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #cfdfef;
}
.growth-task-board-head h3 { color: #11274a; font-size: 30px; }
.growth-task-board-head p { max-width: 620px; margin: 9px 0 0; color: #47698b; font-size: 16px; line-height: 1.65; }
.child-task-kicker { color: #167fba; }
.growth-task-orbit {
  position: relative;
  flex: 0 0 100px;
  width: 100px;
  height: 76px;
  border: 2px solid rgba(82,137,220,.28);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.growth-task-orbit::before,
.growth-task-orbit::after,
.growth-task-orbit span {
  position: absolute;
  border-radius: 50%;
  content: "";
}
.growth-task-orbit::before { inset: 17px 29px; background: radial-gradient(circle at 35% 30%,#fff,#4de7f2 35%,#3b69d8 76%); box-shadow: 0 0 22px rgba(53,214,240,.5); }
.growth-task-orbit::after { top: 4px; right: 15px; width: 12px; height: 12px; background: #ffc956; box-shadow: 0 0 14px #ffc956; }
.growth-task-orbit span { bottom: -3px; left: 24px; width: 8px; height: 8px; background: #8b72f0; }
.growth-task-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; margin: 22px 0 18px; }
.growth-task-filters label { min-width: 190px; flex: 1 1 190px; color: #335c80; }
.growth-task-filters input,
.growth-task-filters select { color: #14385d; border-color: #afcfe7; background: rgba(255,255,255,.88); }
.growth-task-filters button { flex: 0 0 auto; }
.growth-task-summary { display: grid; grid-template-columns: repeat(4,minmax(110px,1fr)); gap: 10px; margin-bottom: 18px; }
.growth-task-summary article {
  padding: 14px;
  border: 1px solid #c9ddef;
  border-radius: 16px;
  background: rgba(255,255,255,.74);
}
.growth-task-summary span { display: block; color: #52718f; font-size: 13px; font-weight: 750; }
.growth-task-summary strong { display: block; margin-top: 5px; color: #173d69; font-size: 24px; }
.growth-task-summary article:nth-child(2) strong { color: #8a5ddc; }
.growth-task-summary article:nth-child(3) strong { color: #16956d; }
.growth-task-summary article:nth-child(4) strong { color: #d28a17; }
.growth-task-list { display: grid; gap: 14px; }
.growth-task-card {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid #c7ddec;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(48,90,142,.09);
}
.growth-task-time {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 140px;
  color: #fff;
  background: linear-gradient(160deg,#2e8dcc,#4268d9);
}
.growth-task-time strong { font-size: 23px; }
.growth-task-time span { margin-top: 7px; color: #d9f7ff; font-size: 14px; }
.growth-task-time span::before { content: "至 "; opacity: .7; }
.growth-task-card.status-submitted .growth-task-time { background: linear-gradient(160deg,#7d55c8,#5c65d9); }
.growth-task-card.status-approved .growth-task-time { background: linear-gradient(160deg,#22a67c,#2789a9); }
.growth-task-card-main { min-width: 0; padding: 18px 20px; }
.growth-task-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.growth-task-card-title h4 { margin: 6px 0 0; color: #142d50; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.growth-task-kid { color: #53789a; font-size: 13px; font-weight: 750; }
.growth-task-energy { flex: 0 0 auto; padding: 7px 11px; color: #96620b; border: 1px solid #f0c972; border-radius: 999px; background: linear-gradient(145deg,#fff9d8,#ffe8a0); font-size: 14px; font-weight: 900; }
.growth-task-status-line { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.growth-task-status { padding: 5px 9px; color: #176996; border-radius: 999px; background: #e0f5ff; font-size: 13px; font-weight: 850; }
.status-submitted .growth-task-status { color: #7046a5; background: #efe5ff; }
.status-approved .growth-task-status { color: #11765a; background: #dff7ed; }
.growth-task-status-line p { margin: 0; color: #607c99; font-size: 14px; }
.growth-task-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.growth-task-actions button { min-height: 42px; }
.growth-task-delete { margin-left: auto; }
.growth-task-empty { padding: 52px 24px; text-align: center; border: 1px dashed #adcce5; border-radius: 20px; background: rgba(255,255,255,.55); }
.growth-task-empty > span { display: inline-grid; place-items: center; width: 64px; height: 64px; color: #fff; border-radius: 22px; background: linear-gradient(145deg,#40d3e9,#7369e8); font-size: 27px; box-shadow: 0 15px 30px rgba(72,122,205,.2); }
.growth-task-empty strong { display: block; margin-top: 17px; color: #183c65; font-size: 19px; }
.growth-task-empty p { margin: 8px 0 0; color: #607e9e; font-size: 15px; }

@media (max-width: 1120px) {
  .growth-task-layout { grid-template-columns: 1fr; }
  .growth-task-create-panel { order: 2; }
  .growth-task-board { order: 1; min-height: 0; }
}
@media (max-width: 760px) {
  .growth-task-form { grid-template-columns: 1fr; }
  .growth-task-title-field,
  .growth-task-time-range,
  .growth-task-submit,
  .growth-task-form-message { grid-column: auto; }
  .growth-task-time-range { grid-template-columns: 1fr; }
  .growth-task-time-range > span { display: none; }
  .growth-task-orbit { display: none; }
  .growth-task-summary { grid-template-columns: repeat(2,1fr); }
  .growth-task-card { grid-template-columns: 78px minmax(0,1fr); }
  .growth-task-time strong { font-size: 18px; }
  .growth-task-card-title { flex-direction: column; }
  .growth-task-status-line { align-items: flex-start; flex-direction: column; }
  .growth-task-actions button { width: 100%; }
  .growth-task-delete { margin-left: 0; }
}
#recordStartDate,
html.is-parent #recordStartDate {
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  color: #12375f;
  border-color: #76cce8;
  background: linear-gradient(135deg,#e9fbff 0%,#dff5ff 58%,#e9f2ff 100%);
  box-shadow: 0 8px 18px rgba(45,153,194,.12),inset 0 1px rgba(255,255,255,.9);
}
#recordEndDate,
html.is-parent #recordEndDate {
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  color: #263a69;
  border-color: #b9a9eb;
  background: linear-gradient(135deg,#f5f1ff 0%,#ebe5ff 58%,#e5f4ff 100%);
  box-shadow: 0 8px 18px rgba(111,86,197,.11),inset 0 1px rgba(255,255,255,.9);
}
#recordStartDate:hover,
#recordStartDate:focus {
  border-color: #2baed6;
  box-shadow: 0 0 0 4px rgba(43,174,214,.13),0 8px 18px rgba(45,153,194,.14);
}
#recordEndDate:hover,
#recordEndDate:focus {
  border-color: #876ee0;
  box-shadow: 0 0 0 4px rgba(135,110,224,.12),0 8px 18px rgba(111,86,197,.13);
}

.exchange-confirmed-label,
html.is-parent .exchange-confirmed-label {
  padding: 9px 14px;
  color: #0b756d;
  border: 1px solid #65d8c7;
  background: linear-gradient(135deg,#e5fff8 0%,#d5faef 58%,#e9f8ff 100%);
  box-shadow: 0 7px 16px rgba(35,174,151,.13),inset 0 1px rgba(255,255,255,.9);
  font-weight: 900;
  letter-spacing: .04em;
}

.lottery-panel .prize-confirm-copy,
html.is-parent .lottery-panel .prize-confirm-copy {
  color: #183654 !important;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.8;
}
.lottery-panel .prize-confirm-copy strong {
  color: #136ea4;
  font-weight: 950;
}
.lottery-panel .prize-confirm-copy b {
  color: #d06e19;
  font-weight: 950;
}
.lottery-panel .status-pill,
html.is-parent .lottery-panel .status-pill {
  min-height: 34px;
  padding: 8px 13px;
  color: #173a65;
  border: 1px solid #efb63e;
  background: linear-gradient(135deg,#ffe77e,#ffc850);
  box-shadow: 0 7px 16px rgba(210,143,30,.18);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .02em;
}

.panel.lottery-panel .wheel-prize-list {
  gap: 29px;
  margin-top: 8px;
}
.panel.lottery-panel .wheel-prize-list span,
html.is-parent .panel.lottery-panel .wheel-prize-list span {
  min-height: 38px;
  padding: 9px 14px;
  color: color-mix(in srgb,var(--chip-color),#15365d 72%);
  border: 1.5px solid color-mix(in srgb,var(--chip-color),#ffffff 35%);
  background: linear-gradient(135deg,
    color-mix(in srgb,var(--chip-color),#ffffff 83%),
    color-mix(in srgb,var(--chip-color),#eaf7ff 72%));
  box-shadow: 0 7px 16px color-mix(in srgb,var(--chip-color),transparent 83%),inset 0 1px rgba(255,255,255,.92);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}
.panel.lottery-panel .wheel-prize-list span + span {
  position: relative;
}
.panel.lottery-panel .wheel-prize-list span + span::before {
  position: absolute;
  left: -24px;
  top: 50%;
  width: 17px;
  height: 17px;
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.96) 0 8%,transparent 9%),
    radial-gradient(circle at 36% 33%,#86f4ff 0 21%,#3e9bea 40%,#194a9d 68%,#0b265f 100%);
  box-shadow: inset -3px -4px 5px rgba(3,24,68,.36),0 0 0 3px rgba(88,216,245,.12),0 4px 8px rgba(45,104,172,.22);
  content: "";
  transform: translateY(-50%);
}
.panel.lottery-panel .wheel-prize-list span:nth-child(3)::before {
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.96) 0 8%,transparent 9%),
    radial-gradient(circle at 36% 33%,#fff0a1 0 19%,#f1a441 42%,#b45730 69%,#642c38 100%);
  box-shadow: inset -3px -4px 5px rgba(68,25,22,.33),0 0 0 3px rgba(255,193,76,.13),0 4px 8px rgba(161,101,44,.2);
}
.panel.lottery-panel .wheel-prize-list span:nth-child(4)::before {
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.96) 0 8%,transparent 9%),
    radial-gradient(circle at 36% 33%,#cdb8ff 0 20%,#8869ee 42%,#4a46ae 69%,#272467 100%);
  box-shadow: inset -3px -4px 5px rgba(27,22,73,.35),0 0 0 3px rgba(139,110,242,.13),0 4px 8px rgba(85,67,165,.2);
}
.panel.lottery-panel .wheel-prize-list span:nth-child(5)::before,
.panel.lottery-panel .wheel-prize-list span:nth-child(6)::before {
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.96) 0 8%,transparent 9%),
    radial-gradient(circle at 36% 33%,#98ffd6 0 20%,#31c79f 42%,#188077 69%,#124654 100%);
}

@media (max-width: 820px) {
  .sidebar { height: calc(78px + env(safe-area-inset-bottom)); }
  .nav-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .nav-item { justify-content: center; gap: 6px; min-width: 0; min-height: 56px; padding: 0 7px; font-size: 14px; line-height: 1.15; }
  .nav-item::before { width: 31px; height: 31px; font-size: 14px; }
  .content { padding-bottom: 110px; }
  html.is-parent .sidebar { height: calc(136px + env(safe-area-inset-bottom)); }
  html.is-parent .content { padding-bottom: 168px; }
  html.is-parent .nav-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Final contrast lock: auxiliary copy must stay blue, never fall back to gray. */
.content .timeline-item p,
.content .flight-map-head small,
.content .user-card span,
.content .mini-label,
.content .reward-target p,
.content .exchange-row p,
.content .approval-row p,
.content .prize-setting-row span,
.content .empty-state,
.content .record-pagination span,
.content .kid-row > div span,
.content .record-summary span,
.content .child-summary span,
html.is-parent .content .timeline-item p,
html.is-parent .content .reward-target p,
html.is-parent .content .exchange-row p,
html.is-parent .content .approval-row p,
html.is-parent .content .prize-setting-row span,
html.is-parent .content .empty-state {
  color: #205f88;
  font-weight: 700;
}

/* 2026-08-04: use the sequentially approved cockpit artwork on the growth banner. */
@media (min-width: 761px) {
  .mission-illustration {
    background:
      linear-gradient(90deg,rgba(2,10,28,.9) 0,rgba(2,10,28,.68) 31%,rgba(2,10,28,.12) 55%,transparent 70%),
      url('/jump-engine-growth.webp?v=pilot-cockpit-20260804') 50% 5% / cover no-repeat,
      #071126;
  }
  .mission-illustration-copy {
    right: auto;
    left: clamp(30px,4.5vw,68px);
    width: min(410px,34%);
  }
}

/* Final responsive guardrails for the added mission planner. */
html.is-parent #growthTasksPage .growth-task-filters label.parent-only { display: grid; }
@media (max-width: 820px) {
  .nav-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
  html.is-parent .nav-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .mission-illustration {
    background-image:
      linear-gradient(0deg,rgba(2,10,28,.9) 0,rgba(2,10,28,.62) 38%,transparent 72%),
      url('/jump-engine-growth.webp?v=pilot-cockpit-20260804');
    background-position: 60% 8%;
  }
}

/* Final login/title contrast and desktop artwork framing. */
.login-card .login-system-title {
  color: #f7fcff !important;
  background: none !important;
  -webkit-text-fill-color: #f7fcff !important;
  text-shadow: 0 2px 14px rgba(70,215,255,.24);
}

@media (min-width: 761px) {
  .mission-illustration {
    min-height: 0;
    aspect-ratio: 16 / 9;
    background-position: center;
  }
  .mission-illustration-copy {
    width: min(390px,31%);
  }
}

/* 2026-08-05: Figma Growth Route V2 — 航线编排台嵌入系统。 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#growthTasksPage { padding-top: 0; }
.growth-route-shell { display: grid; gap: 24px; }
.growth-route-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 72px; }
.growth-route-eyebrow { display: block; color: #245cff; font-size: 13px; font-weight: 900; letter-spacing: .14em; }
.growth-route-header h2 { margin: 6px 0 4px; color: #0d1428; font-size: clamp(28px,3vw,38px); line-height: 1.08; }
.growth-route-header p { margin: 0; color: #637693; font-size: 14px; }
.growth-route-date-console { display: grid; grid-template-columns: 24px minmax(132px,1fr) 24px; align-items: center; min-width: 226px; padding: 10px 12px; border: 1px solid #dbe5f4; border-radius: 16px; background: rgba(255,255,255,.74); box-shadow: 0 8px 22px rgba(65,103,163,.06); }
.growth-route-date-console > button { width: 24px; height: 28px; padding: 0; color: #1b2c55; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.growth-route-date-input { position: relative; display: grid; justify-items: center; color: #172341; font-size: 13px; font-weight: 850; cursor: pointer; }
.growth-route-date-input input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.growth-route-date-console small { grid-column: 1 / -1; margin-top: 5px; color: #0ea883; font-size: 10px; text-align: center; }
.growth-route-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 88px; padding: 16px 18px; border: 1px solid #b9e8f2; border-radius: 18px; background: linear-gradient(105deg,#d9f9ff,#d6f2ff 48%,#e9e5ff); box-shadow: inset 0 1px rgba(255,255,255,.86); }
.growth-crew-selector { display: flex; align-items: center; gap: 10px; min-width: 330px; color: #112040; font-size: 14px; font-weight: 900; }
.growth-crew-selector > span { margin-right: 2px; }
.growthTaskKidButtons, #growthTaskKidButtons { display: flex; flex-wrap: wrap; gap: 8px; }
.growth-crew-button { min-height: 44px; padding: 0 16px; color: #12224a; border: 1px solid #4b78ff; border-radius: 12px; background: rgba(255,255,255,.58); font-size: 13px; font-weight: 850; cursor: pointer; }
.growth-crew-button.active { color: #fff; border-color: #3555d5; background: #3555d5; box-shadow: 0 8px 16px rgba(53,85,213,.2); }
.growth-crew-button:focus-visible, .growth-route-date-chip:focus-visible, .growth-route-date-console button:focus-visible { outline: 3px solid rgba(44,214,240,.58); outline-offset: 2px; }
.growth-route-metrics { display: flex; align-items: center; gap: 30px; }
.growth-route-metrics article { min-width: 92px; text-align: center; }
.growth-route-metrics strong { display: block; color: #315bd4; font-size: 25px; line-height: 1; }
.growth-route-metrics span { display: block; margin-top: 7px; color: #6c7f9c; font-size: 11px; font-weight: 750; }
.growth-route-workspace { display: grid; grid-template-columns: minmax(0,1.88fr) minmax(340px,1fr); gap: 24px; align-items: stretch; }
html:not(.is-parent) .growth-route-schedule { grid-column: 1 / -1; }
.growth-route-schedule { min-width: 0; min-height: 620px; padding: 24px; border: 1px solid #dbe5f4; border-radius: 20px; background: #fff; box-shadow: 0 16px 38px rgba(50,91,148,.08); }
.growth-route-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.growth-route-section-heading h3 { margin: 0; color: #10182c; font-size: 22px; }
.growth-route-section-heading span { color: #71829d; font-size: 12px; }
.growth-route-section-heading > span:last-child { color: #245cff; font-size: 10px; letter-spacing: .08em; }
.growth-route-date-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 18px 0; }
.growth-route-date-chip { display: grid; gap: 3px; min-height: 52px; place-items: center; padding: 7px 10px; color: #3e5278; border: 1px solid #dbe5f4; border-radius: 12px; background: #f7faff; cursor: pointer; }
.growth-route-date-chip small { font-size: 10px; }
.growth-route-date-chip strong { color: #15213c; font-size: 14px; }
.growth-route-date-chip.active { color: #fff; border-color: #3555d5; background: #3555d5; box-shadow: 0 9px 18px rgba(53,85,213,.18); }
.growth-route-date-chip.active strong { color: #fff; }
.growth-task-list { display: grid; gap: 10px; }
.growth-route-event { display: grid; grid-template-columns: 62px 5px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 92px; padding: 12px; border: 1px solid #dbe5f4; border-radius: 14px; background: #f6f9ff; box-shadow: 0 7px 16px rgba(51,91,148,.05); }
#growthTasksPage .growth-route-event {
  color: #eaf6ff;
  border-color: rgba(64, 201, 240, .34);
  background:
    radial-gradient(circle at 8% 20%, rgba(53, 215, 255, .12) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, rgba(124, 97, 255, .13) 0 2px, transparent 3px),
    linear-gradient(135deg, #0b2954, #163b6c 58%, #25255f);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 9px 20px rgba(3, 17, 52, .18);
}
#growthTasksPage .growth-route-event-time { color: #f4fbff; }
#growthTasksPage .growth-route-event-time span,
#growthTasksPage .growth-route-event-copy > span,
#growthTasksPage .growth-route-event-copy p { color: #b8d3eb; }
#growthTasksPage .growth-route-event-copy h4 { color: #fff; }
.growth-route-event-time { display: grid; align-content: center; justify-items: center; gap: 5px; color: #12213e; }
.growth-route-event-time strong { font-size: 14px; }
.growth-route-event-time span { color: #8292ad; font-size: 10px; white-space: nowrap; }
.growth-route-event-rail { width: 5px; height: 54px; border-radius: 3px; background: #20cda2; }
.growth-route-event.status-assigned .growth-route-event-rail { background: #21d4ef; }
.growth-route-event.status-submitted .growth-route-event-rail { background: #ffc247; }
.growth-route-event-copy { min-width: 0; }
.growth-route-event-copy > span { color: #6e82a0; font-size: 11px; font-weight: 750; }
.growth-route-event-copy h4 { margin: 5px 0 0; color: #111a31; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.growth-route-event-copy h4 em { color: #ad7110; font-style: normal; font-size: 14px; white-space: nowrap; }
.growth-route-event-copy p { margin: 7px 0 0; color: #6f819d; font-size: 11px; line-height: 1.4; }
.growth-route-event-status { padding: 8px 11px; color: #0e7e66; border-radius: 999px; background: #d9f7eb; font-size: 11px; font-weight: 850; white-space: nowrap; }
.status-assigned .growth-route-event-status { color: #166bb4; background: #ddf6ff; }
.status-submitted .growth-route-event-status { color: #8a5a06; background: #ffe9ad; }
.growth-route-event-actions { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.growth-route-event-actions button { min-height: 32px; padding: 0 12px; font-size: 12px; }
.growth-task-empty { grid-column: 1 / -1; padding: 58px 24px; text-align: center; border: 1px dashed #b8cfe8; border-radius: 18px; background: #f6f9ff; }
.growth-task-empty > span { display: inline-grid; place-items: center; width: 54px; height: 54px; color: #fff; border-radius: 17px; background: linear-gradient(145deg,#35d9ff,#5d62e5); font-size: 25px; }
.growth-task-empty strong { display: block; margin-top: 12px; color: #183c65; font-size: 17px; }
.growth-task-empty p { margin: 10px 0 0; color: #71829d; font-size: 16px; line-height: 1.6; }
.growth-route-launch { display: flex; flex-direction: column; min-width: 0; min-height: 620px; padding: 24px; color: #edf4ff; border: 1px solid rgba(44,214,240,.5); border-radius: 20px; background: linear-gradient(145deg,#172849,#304365 55%,#29365e); box-shadow: inset 0 1px rgba(255,255,255,.1),0 18px 38px rgba(12,27,64,.2); }
.growth-launch-heading { display: grid; gap: 6px; }
.growth-launch-heading h3 { margin: 0; color: #fff; font-size: 24px; }
.growth-launch-heading p { margin: 0; color: #b7c7e1; font-size: 12px; line-height: 1.55; }
.growth-launch-flow { margin-top: 7px; color: #b9c6dc; font-size: 11px; letter-spacing: .04em; }
.growth-route-launch .growth-task-form { display: grid; gap: 13px; margin-top: 16px; }
.growth-route-launch .growth-task-form label { display: grid; gap: 5px; color: #d9e8ff; font-size: 12px; font-weight: 800; }
.growth-route-launch .growth-task-form input,
.growth-route-launch .growth-task-form select { min-height: 44px; color: #13203b; border: 1px solid #dbe7f5; border-radius: 10px; background: #fff; box-shadow: none; }
.growth-route-launch .growth-task-form label small { color: #9db0cd; font-size: 10px; font-weight: 600; }
.growth-route-launch .growth-task-time-range { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); gap: 8px; align-items: end; }
.growth-route-launch .growth-task-time-range > span { padding-bottom: 12px; color: #8fe8f6; font-size: 17px; text-align: center; }
.growth-route-launch .growth-task-form-message { min-height: 16px; margin: -2px 0 0; color: #ffd5dc; font-size: 11px; }
.growth-route-launch .growth-task-form-message.is-success { color: #9bffda; }
.growth-launch-reward { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 10px 10px 14px; border: 1px solid rgba(44,214,240,.28); border-radius: 14px; background: #1b2a4b; }
.growth-launch-reward > div { display: grid; gap: 3px; }
.growth-launch-reward small { color: #a4b7d6; font-size: 10px; }
.growth-launch-reward strong { color: #5de7f5; font-size: 20px; }
.growth-launch-reward .growth-task-submit { min-height: 44px; padding: 0 16px; }
.growth-launch-footnote { color: #93a8c8; font-size: 10px; }
.growth-route-queue { display: grid; gap: 10px; min-height: 176px; padding: 16px 18px; border: 1px solid #dbe5f4; border-radius: 20px; background: #fff; box-shadow: 0 14px 32px rgba(50,91,148,.07); }
.growth-route-queue .growth-route-section-heading h3 { font-size: 20px; }
.growth-task-queue { display: grid; gap: 8px; }
.growth-task-queue-row { display: grid; grid-template-columns: 80px minmax(0,1fr) 70px 90px auto; gap: 12px; align-items: center; min-height: 46px; padding: 6px 12px; border: 1px solid #e0e8f3; border-radius: 10px; background: #fbfdff; }
.growth-task-queue-row strong { color: #15213c; font-size: 12px; }
.growth-task-queue-row span { min-width: 0; color: #273d61; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-task-queue-row b { color: #d18915; font-size: 13px; }
.growth-task-queue-row small { color: #7487a4; font-size: 11px; }
.growth-task-queue-row button { min-height: 32px; padding: 0 13px; font-size: 12px; }
.growth-task-queue-empty { margin: 0; color: #7487a4; font-size: 12px; }

/* 孩子端专属的三项今日统计。 */
.growth-child-stats { display: none; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; width: 100%; }
html:not(.is-parent) #growthTasksPage .growth-child-stats { display: grid; }
.growth-child-stats article { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 18px; border: 1px solid #c6d9ee; border-radius: 16px; background: linear-gradient(135deg,#e4faff,#eae7ff); text-align: left; }
.growth-child-stats strong { color: #315bd4; font-size: 36px; line-height: 1; }
.growth-child-stats span { order: -1; color: #536d94; font-size: 16px; font-weight: 850; white-space: nowrap; }

/* 时间轴标题工具：回到今天与日历共享当前日期筛选。 */
.growth-route-heading-tools { display: flex; align-items: center; gap: 12px; }
.growth-route-heading-tools .text-button { min-height: 34px; color: #2166d9; font-size: 13px; font-weight: 850; }
.calendar-button { min-height: 34px; padding: 0 12px; color: #1e4fc2; border: 1px solid #b7ccec; border-radius: 10px; background: #f4f8ff; font-size: 13px; font-weight: 850; cursor: pointer; }
.calendar-button::before { content: "▣"; margin-right: 5px; }
#growthTaskCalendarInput { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 确认队列不再单独占据家长页面，确认直接在任务卡内完成。 */
#growthTasksPage .growth-route-queue { display: none !important; }

/* 任务内容统一放大，提升家长审核和孩子阅读时的可读性。 */
.growth-route-section-heading h3 { font-size: 24px; }
.growth-route-event-time strong { font-size: 20px; }
.growth-route-event-time span { font-size: 15px; }
.growth-route-event-copy > span { font-size: 16px; }
.growth-route-event-copy h4 { font-size: 24px; }
.growth-route-event-copy h4 em { font-size: 18px; }
.growth-route-event-status { padding: 9px 13px; font-size: 13px; }
.growth-route-event-actions button { min-height: 38px; padding: 0 14px; font-size: 14px; }
.growth-route-date-chip small { font-size: 15px; }
.growth-route-date-chip strong { font-size: 19px; }
.growth-route-launch .growth-task-form label { font-size: 14px; }
.growth-route-launch .growth-task-form input,
.growth-route-launch .growth-task-form select { font-size: 16px; }
.growth-launch-reward { width: calc(100% + 16px); box-sizing: border-box; min-height: 72px; margin-inline: -8px; gap: 28px; }
.growth-launch-reward > div { min-width: 0; flex: 1 1 auto; }
.growth-launch-reward strong { font-size: 22px; white-space: nowrap; }
.growth-launch-reward .growth-task-submit { flex: 0 0 auto; min-width: 104px; font-size: 15px; }
.growth-route-event-status.is-action { border: 0; cursor: pointer; }
.growth-route-event-status.is-action:hover { filter: brightness(.96); transform: translateY(-1px); }

/* 孩子端只看自己的时间轴；发射任务和确认入账属于指挥基地。 */
html:not(.is-parent) #growthTasksPage .growth-route-launch,
html:not(.is-parent) #growthTasksPage .growth-route-queue {
  display: none !important;
}
html:not(.is-parent) #growthTasksPage .growth-route-schedule {
  grid-column: 1 / -1;
}
html:not(.is-parent) #growthTasksPage .growth-route-header {
  display: none;
}
html:not(.is-parent) #growthTasksPage .growth-route-ribbon {
  display: none;
}

/* 家长与孩子都使用同一套今日统计；筛选器只归家长使用。 */
html.is-parent #growthTasksPage .growth-child-stats { display: grid; }
html:not(.is-parent) #growthTasksPage #growthTaskKidButtons { display: none !important; }
html.is-parent #growthTasksPage .growth-route-heading-tools #growthTaskKidButtons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
html.is-parent #growthTasksPage .growth-route-heading-tools .growth-crew-button { min-height: 36px; padding: 0 13px; font-size: 14px; }

@media (max-width: 1180px) {
  .growth-route-workspace { grid-template-columns: minmax(0,1.55fr) minmax(310px,1fr); gap: 16px; }
  .growth-route-launch, .growth-route-schedule { padding: 20px; }
  .growth-route-metrics { gap: 14px; }
}
@media (max-width: 900px) {
  .growth-child-stats { grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .growth-route-header { align-items: flex-start; flex-direction: column; }
  .growth-route-date-console { align-self: stretch; }
  .growth-route-ribbon { align-items: flex-start; flex-direction: column; }
  .growth-crew-selector { min-width: 0; width: 100%; flex-wrap: wrap; }
  .growth-route-metrics { justify-content: space-between; width: 100%; }
  .growth-route-workspace { grid-template-columns: 1fr; }
  .growth-route-launch { order: 2; }
  .growth-route-schedule { min-height: 0; }
  .growth-route-queue { min-height: 0; }
}
@media (max-width: 620px) {
  .growth-route-shell { gap: 16px; }
  .growth-route-header h2 { font-size: 26px; }
  .growth-route-ribbon, .growth-route-schedule, .growth-route-launch, .growth-route-queue { padding: 16px; border-radius: 16px; }
  .growth-route-date-strip { gap: 5px; margin: 14px 0; }
  .growth-route-date-chip { padding: 6px 3px; }
  .growth-route-date-chip strong { font-size: 12px; }
  .growth-route-event { grid-template-columns: 50px 4px minmax(0,1fr); gap: 8px; padding: 10px; }
  .growth-route-event-status { grid-column: 3; justify-self: start; margin-top: 4px; }
  .growth-route-event-actions { grid-column: 3; }
  .growth-route-event-actions button { width: 100%; }
  .growth-task-queue-row { grid-template-columns: 60px minmax(0,1fr) auto; }
  .growth-task-queue-row small { display: none; }
  .growth-task-queue-row button { grid-column: 3; grid-row: 1 / span 2; }
}

/* Parent recent fun records: full-width archive board from the Figma layout. */
html.is-parent #funRecordsPage .fun-records-layout {
  grid-template-columns: minmax(0, 1fr);
}

html.is-parent #funRecordsPage .fun-record-browser {
  width: 100%;
  padding: 24px;
  overflow: hidden;
  border-color: #b8d1ef;
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 16%, rgba(53, 215, 255, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 74%, rgba(136, 108, 255, .12) 0 1.5px, transparent 3px),
    linear-gradient(145deg, #f4fbff 0%, #edf4ff 58%, #f7efff 100%);
  box-shadow: 0 18px 44px rgba(50, 91, 148, .1);
}

html.is-parent #funRecordsPage .fun-record-browser-heading {
  display: grid;
  grid-template-columns: minmax(188px, 220px) minmax(420px, 1fr) minmax(280px, 312px);
  align-items: center;
  gap: 18px;
  min-height: 176px;
  padding: 14px 18px;
  border: 1px solid #c8ddf5;
  border-radius: 16px;
  background: rgba(255, 255, 255, .52);
}

html.is-parent #funRecordsPage .fun-record-browser-heading > div:first-child {
  min-width: 0;
}

html.is-parent #funRecordsPage .fun-record-browser-heading h3 {
  margin-top: 10px;
  font-size: 28px;
  line-height: 1.2;
}

html.is-parent #funRecordsPage .fun-record-recent-art {
  align-self: center;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 148px;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: drop-shadow(0 11px 17px rgba(47, 126, 232, .2));
}

/* Rebuilt galaxy surfaces: match the overview statistic cards with irregular,
   multi-colour stars and soft nebulae, without cross-shaped flares. */
#growthTasksPage .growth-route-schedule,
#growthTasksPage .growth-route-launch,
#funRecordsPage .fun-records-hero,
#funRecordsPage .fun-record-compose,
#funRecordsPage .fun-record-browser {
  --galaxy-deep: #071b3e;
  --galaxy-mid: #123263;
  --galaxy-violet: #242160;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  color: #eff8ff;
  border-color: rgba(67, 205, 241, .4);
  background:
    radial-gradient(ellipse at 18% 34%, rgba(41, 195, 255, .2), transparent 34%),
    radial-gradient(ellipse at 76% 61%, rgba(131, 84, 255, .18), transparent 37%),
    radial-gradient(ellipse at 52% 94%, rgba(41, 123, 234, .14), transparent 42%),
    linear-gradient(138deg, var(--galaxy-deep), var(--galaxy-mid) 58%, var(--galaxy-violet));
  box-shadow: 0 18px 40px rgba(19, 57, 111, .18), inset 0 1px rgba(255,255,255,.08);
}
#growthTasksPage .growth-route-schedule::before,
#growthTasksPage .growth-route-launch::before,
#funRecordsPage .fun-records-hero::before,
#funRecordsPage .fun-record-compose::before,
#funRecordsPage .fun-record-browser::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 4% 13%, rgba(66,216,255,.62) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 12% 36%, rgba(255,255,255,.64) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 18% 78%, rgba(255,205,96,.44) 0 1.2px, transparent 2.3px),
    radial-gradient(circle at 27% 21%, rgba(135,105,255,.52) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 34% 62%, rgba(59,207,255,.54) 0 .9px, transparent 2px),
    radial-gradient(circle at 43% 11%, rgba(255,255,255,.72) 0 1px, transparent 2.2px),
    radial-gradient(circle at 51% 84%, rgba(171,126,255,.45) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 59% 31%, rgba(255,214,111,.48) 0 .8px, transparent 1.9px),
    radial-gradient(circle at 67% 72%, rgba(73,218,255,.58) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 76% 17%, rgba(255,255,255,.56) 0 .7px, transparent 1.7px),
    radial-gradient(circle at 83% 49%, rgba(143,109,255,.48) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 91% 82%, rgba(61,201,255,.5) 0 1px, transparent 2.1px),
    radial-gradient(circle at 96% 27%, rgba(255,207,91,.4) 0 1.3px, transparent 2.4px);
  background-repeat: no-repeat;
  content: "";
  opacity: .76;
  pointer-events: none;
}
#growthTasksPage .growth-route-schedule::after,
#growthTasksPage .growth-route-launch::after,
#funRecordsPage .fun-records-hero::after,
#funRecordsPage .fun-record-compose::after,
#funRecordsPage .fun-record-browser::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse at 28% 48%, rgba(45, 188, 255, .1), transparent 30%),
    radial-gradient(ellipse at 68% 42%, rgba(148, 93, 255, .09), transparent 33%),
    radial-gradient(circle at 7% 76%, rgba(255,255,255,.34) 0 1.5px, transparent 3.5px),
    radial-gradient(circle at 92% 18%, rgba(255,214,118,.3) 0 1.4px, transparent 3.2px),
    radial-gradient(circle at 61% 83%, rgba(101,225,255,.32) 0 1.6px, transparent 3.7px);
  content: "";
  opacity: .7;
  pointer-events: none;
}
#growthTasksPage .growth-route-schedule > *,
#growthTasksPage .growth-route-launch > *,
#funRecordsPage .fun-records-hero > *,
#funRecordsPage .fun-record-compose > *,
#funRecordsPage .fun-record-browser > * {
  position: relative;
  z-index: 1;
}
html.is-parent #funRecordsPage .fun-record-browser {
  --galaxy-deep: #0a2148;
  --galaxy-mid: #173968;
  --galaxy-violet: #2b2867;
  border-color: rgba(76, 210, 243, .42);
  background:
    radial-gradient(ellipse at 18% 34%, rgba(41, 195, 255, .19), transparent 34%),
    radial-gradient(ellipse at 76% 61%, rgba(131, 84, 255, .17), transparent 37%),
    linear-gradient(138deg, var(--galaxy-deep), var(--galaxy-mid) 58%, var(--galaxy-violet));
}
html.is-parent #funRecordsPage .fun-record-browser-heading h3,
html.is-parent #funRecordsPage .fun-record-browser-heading .fun-record-recent-copy > p { color: #edf8ff; }

html:not(.is-parent) #funRecordsPage .fun-record-filters {
  flex: 0 0 224px;
  width: 224px;
  flex-wrap: nowrap;
  gap: 24px;
}
html:not(.is-parent) #funRecordsPage .fun-record-filters label:has(#funRecordDateFilter),
html:not(.is-parent) #funRecordsPage .fun-record-filters #funRecordToday {
  flex: 0 0 100px;
}

/* Overview-card galaxy language: one soft horizontal Milky Way band, sparse
   mixed-brightness stars and a few small four-point highlights. */
#growthTasksPage .growth-route-schedule,
#growthTasksPage .growth-route-launch,
#funRecordsPage .fun-records-hero,
#funRecordsPage .fun-record-compose,
#funRecordsPage .fun-record-browser {
  background:
    radial-gradient(ellipse 110% 22% at 52% 57%, rgba(102, 153, 255, .16), transparent 54%),
    linear-gradient(176deg, transparent 0 48%, rgba(83, 145, 255, .08) 52%, rgba(141, 108, 255, .1) 58%, transparent 68%),
    linear-gradient(138deg, #092451, #18386a 57%, #272661);
}
#growthTasksPage .growth-route-schedule::before,
#growthTasksPage .growth-route-launch::before,
#funRecordsPage .fun-records-hero::before,
#funRecordsPage .fun-record-compose::before,
#funRecordsPage .fun-record-browser::before {
  background:
    radial-gradient(circle at 4% 15%, rgba(59,215,255,.68) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 37%, rgba(255,255,255,.72) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 18% 78%, rgba(255,205,88,.52) 0 1px, transparent 2.2px),
    radial-gradient(circle at 27% 21%, rgba(135,105,255,.58) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 34% 63%, rgba(59,207,255,.65) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 43% 11%, rgba(255,255,255,.8) 0 1px, transparent 2.2px),
    radial-gradient(circle at 51% 84%, rgba(171,126,255,.55) 0 1.4px, transparent 2.7px),
    radial-gradient(circle at 59% 31%, rgba(255,214,111,.56) 0 1px, transparent 2.1px),
    radial-gradient(circle at 67% 72%, rgba(73,218,255,.66) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 76% 17%, rgba(255,255,255,.72) 0 1.1px, transparent 2.3px),
    radial-gradient(circle at 83% 49%, rgba(143,109,255,.58) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 91% 82%, rgba(61,201,255,.62) 0 1.1px, transparent 2.3px),
    radial-gradient(circle at 96% 27%, rgba(255,207,91,.54) 0 1.2px, transparent 2.4px),
    radial-gradient(ellipse 72% 10% at 48% 60%, rgba(112, 152, 255, .2), transparent 70%);
  opacity: .9;
}
#growthTasksPage .growth-route-schedule::after,
#growthTasksPage .growth-route-launch::after,
#funRecordsPage .fun-records-hero::after,
#funRecordsPage .fun-record-compose::after,
#funRecordsPage .fun-record-browser::after {
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)) 13% 58% / 1px 11px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.82), rgba(255,255,255,.82)) 13% 58% / 11px 1px no-repeat,
    linear-gradient(rgba(80,225,255,.68), rgba(80,225,255,.68)) 69% 53% / 1px 9px no-repeat,
    linear-gradient(90deg, rgba(80,225,255,.68), rgba(80,225,255,.68)) 69% 53% / 9px 1px no-repeat,
    linear-gradient(rgba(255,214,99,.64), rgba(255,214,99,.64)) 88% 64% / 1px 8px no-repeat,
    linear-gradient(90deg, rgba(255,214,99,.64), rgba(255,214,99,.64)) 88% 64% / 8px 1px no-repeat,
    radial-gradient(ellipse 92% 13% at 51% 59%, rgba(105, 151, 255, .14), transparent 72%);
  opacity: .76;
}

/* Final readability pass for compact labels called out in the current UI review. */
.topbar #roleLabel.eyebrow { font-size: 17px; }
#growthTasksPage .growth-route-date-chip small { font-size: 15px; }
#growthTasksPage .growth-route-date-chip strong { font-size: 19px; }
#growthTasksPage .growth-route-event-time strong { font-size: 20px; }
#growthTasksPage .growth-route-event-time span { font-size: 15px; }
#growthTasksPage .growth-route-event-copy > span { font-size: 16px; }
#growthTasksPage .growth-route-event-copy h4 { font-size: 24px; }
#growthTasksPage .growth-route-event-copy h4 em { font-size: 18px; }
#funRecordsPage .fun-record-card footer span,
html.is-parent #funRecordsPage .fun-record-card footer span { font-size: 20px; }
#funRecordsPage .fun-record-filters input { width: 166px; min-height: 42px; font-size: 16px; }
#funRecordsPage .fun-record-filters .secondary-button { min-height: 42px; font-size: 16px; }

/* Supply stage v2: sharp layered artwork, dense Milky Way and readable random prize planets. */
.wheel-stage {
  isolation: isolate;
  min-height: 570px;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(50, 169, 255, .28) 0 3%, transparent 31%),
    radial-gradient(ellipse at 82% 74%, rgba(145, 83, 255, .28) 0 4%, transparent 34%),
    radial-gradient(circle at 8% 14%, rgba(255,255,255,.96) 0 1px, transparent 2px),
    radial-gradient(circle at 14% 64%, rgba(88,222,255,.95) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 23% 34%, rgba(255,210,104,.92) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 80%, rgba(176,141,255,.9) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 41% 12%, rgba(255,255,255,.92) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 56% 25%, rgba(91,224,255,.94) 0 1px, transparent 2.2px),
    radial-gradient(circle at 67% 83%, rgba(255,220,126,.9) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 77% 17%, rgba(207,174,255,.95) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 91% 57%, rgba(255,255,255,.94) 0 1px, transparent 2px),
    linear-gradient(145deg, #020b21 0%, #061b3f 46%, #120d37 100%);
  background-size: auto, auto, 89px 83px, 137px 121px, 173px 151px, 211px 179px, 251px 213px, 197px 167px, 239px 203px, 281px 229px, 157px 139px, auto;
}

.wheel-stage::before,
.wheel-stage::after {
  position: absolute;
  z-index: 0;
  display: block;
  inset: 0;
  content: "";
  pointer-events: none;
}

.wheel-stage::before {
  background:
    radial-gradient(ellipse at 22% 44%, rgba(40, 197, 255, .22), transparent 38%),
    radial-gradient(ellipse at 76% 52%, rgba(138, 88, 255, .22), transparent 40%),
    url('/assets/fun-irregular-galaxy-stars.svg') center / cover no-repeat;
  opacity: .72;
  mix-blend-mode: screen;
}

.wheel-stage::after {
  background: linear-gradient(90deg, rgba(2,10,30,.08), transparent 18% 82%, rgba(2,10,30,.12));
  box-shadow: inset 0 0 58px rgba(0, 7, 25, .5);
}

.supply-hub-art {
  z-index: 1 !important;
  inset: 16px !important;
  width: calc(100% - 32px) !important;
  height: calc(100% - 32px) !important;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  filter: saturate(1.04) contrast(1.035) drop-shadow(0 18px 24px rgba(0,0,0,.22));
}

.lottery-wheel {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  pointer-events: none;
}

.planet-orbit {
  z-index: 5;
  inset: 0;
  border-radius: 0;
}

.prize-planet {
  z-index: 6;
}

.prize-planet.is-prize-planet {
  overflow: visible;
}

.prize-planet.is-prize-planet b {
  position: absolute;
  z-index: 8;
  inset: 12%;
  display: grid;
  place-content: center;
  width: auto;
  max-width: none;
  min-height: auto;
  padding: 2px;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(10px, calc(var(--planet-size) * .12), 13px);
  font-weight: 950;
  line-height: 1.18;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 1px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.78);
  transform: none;
}

.prize-planet.is-prize-planet b::before {
  display: none;
}

.prize-planet.is-prize-planet .planet-body {
  inset: -20%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: var(--planet-art) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 12px color-mix(in srgb,var(--planet-color),transparent 48%));
}

.prize-planet.is-prize-planet .planet-body::after {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2,13,39,.5), rgba(2,13,39,.18) 70%, transparent 72%);
  content: "";
}

.prize-planet.is-prize-planet .planet-body i,
.prize-planet.is-prize-planet .planet-body em {
  display: none;
}

.black-hole-vortex {
  z-index: 7;
}

.gate-prize-reveal {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 53%;
  width: 190px;
  height: 190px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.08) rotate(-18deg);
  pointer-events: none;
}

.gate-prize-reveal.is-visible {
  animation: gate-prize-arrive .8s cubic-bezier(.16,.82,.22,1.18) forwards,
    gate-prize-hover 3.2s ease-in-out .8s infinite alternate;
}

.gate-prize-planet {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.gate-prize-planet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(80,224,255,.76)) drop-shadow(0 10px 18px rgba(0,0,0,.34));
}

.gate-prize-planet b {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  width: 47%;
  height: 47%;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.96), 0 0 4px rgba(0,0,0,.9);
}

.gate-prize-reveal.is-empty {
  filter: grayscale(.45) brightness(.78);
}

@keyframes gate-prize-arrive {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(-18deg); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(5deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes gate-prize-hover {
  from { opacity: 1; transform: translate(-50%, -50%) translateY(-4px) scale(1); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(5px) scale(1.035); }
}

@media (max-width: 820px) {
  .supply-hub-art {
    inset: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
  }
  .prize-planet.is-prize-planet b { inset: 10%; font-size: 10px; }
  .gate-prize-reveal { width: 132px; height: 132px; }
  .gate-prize-planet b { font-size: 10px; }
  .lottery-control-art {
    flex: 0 0 auto;
    width: 100%;
    height: 96px;
    margin: 0;
    object-position: center;
  }
  .lottery-form .supply-launch-button { width: 116px; min-width: 116px; height: 116px; min-height: 116px; }
  .supply-record-art { height: 80px; }
}

html.is-parent #funRecordsPage .fun-record-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 9px;
  width: 100%;
}
#funRecordsPage .fun-record-filters label:has(#funRecordDateFilter) {
  position: relative;
  width: 100px;
  height: 100px;
}
#funRecordsPage #funRecordDateFilter {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
#funRecordsPage .memory-recall-button,
#funRecordsPage #funRecordToday {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 44px auto;
  grid-template-rows: auto auto;
  place-content: center;
  align-items: center;
  column-gap: 7px;
  row-gap: 7px;
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  padding: 0;
  border-radius: 13px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .12em;
  line-height: 1;
}
#funRecordsPage .memory-recall-button {
  color: #c5f8ff;
  border: 1px solid rgba(70, 220, 247, .68);
  background: linear-gradient(145deg,#0d4776,#135d8a 58%,#254285);
  box-shadow: 0 9px 19px rgba(8,49,119,.24), inset 0 1px rgba(255,255,255,.08);
}
#funRecordsPage .memory-recall-button img {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 5px 9px rgba(26, 113, 213, .26));
}
#funRecordsPage .memory-recall-button span,
#funRecordsPage #funRecordToday span {
  grid-column: 2;
  justify-self: center;
}
#funRecordsPage #funRecordToday {
  grid-template-columns: 1fr;
  color: #f1e0ff;
  border-color: rgba(185, 116, 255, .7);
  background: linear-gradient(145deg,#3b2b78,#59358e 58%,#733c82);
}
#funRecordsPage #funRecordToday span { grid-column: 1; }

html.is-parent #funRecordsPage .fun-record-filters label,
html.is-parent #funRecordsPage .fun-record-filters select,
html.is-parent #funRecordsPage .fun-record-filters input {
  width: 100%;
  min-width: 0;
}

html.is-parent #funRecordsPage .fun-record-filters select,
html.is-parent #funRecordsPage .fun-record-filters input {
  min-height: 46px;
  padding-inline: 13px;
  border-color: #b6cdec;
  border-radius: 11px;
  color: #183c73;
  border-color: #88b9ec;
  background: linear-gradient(135deg,#dff5ff,#e1e6ff 58%,#eee2ff);
  color-scheme: light;
  font-size: 15px;
  font-weight: 800;
}

html.is-parent #funRecordsPage .fun-record-filters .secondary-button {
  grid-column: 2;
  justify-self: end;
  min-width: 112px;
  min-height: 42px;
  padding-inline: 16px;
  border-color: #22badf;
  border-radius: 11px;
  color: #fff;
  background: #22badf;
  font-size: 15px;
  font-weight: 850;
}

html.is-parent #funRecordsPage .fun-record-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

html.is-parent #funRecordsPage .fun-record-card {
  min-height: 282px;
  padding: 20px;
  border-color: rgba(53, 211, 238, .52);
  border-radius: 16px;
  background: linear-gradient(145deg, #15294c 0%, #2f4165 100%);
  box-shadow: 0 14px 32px rgba(23, 48, 88, .18);
}

html.is-parent #funRecordsPage .fun-record-card h4 {
  font-size: 23px;
  line-height: 1.4;
  letter-spacing: 0;
}

html.is-parent #funRecordsPage .fun-record-card > p {
  min-height: 76px;
  font-size: 16px;
  line-height: 1.7;
}

html.is-parent #funRecordsPage .fun-record-card-meta span,
html.is-parent #funRecordsPage .fun-record-card time,
html.is-parent #funRecordsPage .fun-record-card footer span {
  font-size: 14px;
}

html.is-parent #funRecordsPage .fun-record-empty {
  grid-column: 1 / -1;
  min-height: 260px;
}

@media (max-width: 1120px) {
  html.is-parent #funRecordsPage .fun-record-browser-heading {
    grid-template-columns: minmax(180px, 210px) minmax(320px, 1fr) minmax(240px, 270px);
    gap: 12px;
  }
  html.is-parent #funRecordsPage .fun-record-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  html.is-parent #funRecordsPage .fun-record-browser-heading {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr);
  }
  html.is-parent #funRecordsPage .fun-record-browser-heading > div:first-child {
    align-self: center;
  }
  html.is-parent #funRecordsPage .fun-record-recent-art {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 132px;
  }
  html.is-parent #funRecordsPage .fun-record-filters {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 620px) {
  html.is-parent #funRecordsPage .fun-record-browser {
    padding: 14px;
  }
  html.is-parent #funRecordsPage .fun-record-browser-heading {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  html.is-parent #funRecordsPage .fun-record-filters,
  html.is-parent #funRecordsPage .fun-record-recent-art {
    grid-column: 1;
    grid-row: auto;
  }
  html.is-parent #funRecordsPage .fun-record-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  html.is-parent #funRecordsPage .fun-record-filters .secondary-button {
    grid-column: 1;
    justify-self: stretch;
  }
  html.is-parent #funRecordsPage .fun-record-recent-art {
    height: auto;
    min-height: 104px;
    aspect-ratio: 2280 / 528;
  }
  html.is-parent #funRecordsPage .fun-record-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* High-contrast navigation with generated task-specific equipment icons. */
.nav-item {
  color: #eef7ff;
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(1, 7, 24, .95), 0 0 10px rgba(78, 207, 255, .16);
}
.nav-item:hover,
.nav-item.active { color: #fff; }
.nav-item:is([data-page="overview"], [data-page="growthTasks"], [data-page="funRecords"], [data-page="records"], [data-page="rewards"], [data-page="manage"], [data-page="prizeSettings"])::before {
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  filter: drop-shadow(0 2px 4px rgba(0, 8, 27, .7)) drop-shadow(0 0 5px rgba(69, 222, 255, .22));
}
.nav-item[data-page="overview"]::before { background-image: url('/runtime-images/nav-overview.png'); }
.nav-item[data-page="growthTasks"]::before { background-image: url('/runtime-images/nav-growth-tasks.png'); }
.nav-item[data-page="funRecords"]::before { background-image: url('/runtime-images/nav-fun-records.png'); }
.nav-item[data-page="records"]::before { background-image: url('/runtime-images/nav-records.png'); }
.nav-item[data-page="rewards"]::before { background-image: url('/runtime-images/nav-rewards.png'); }
.nav-item[data-page="manage"]::before { background-image: url('/runtime-images/nav-pilot-profile.png'); }
.nav-item[data-page="prizeSettings"]::before { background-image: url('/runtime-images/nav-supply-config.png'); }
.nav-item.active:is([data-page="overview"], [data-page="growthTasks"], [data-page="funRecords"], [data-page="records"], [data-page="rewards"], [data-page="manage"], [data-page="prizeSettings"])::before {
  border: 0;
  background-color: transparent;
}
@media (max-width: 820px) {
  .nav-item:is([data-page="overview"], [data-page="growthTasks"], [data-page="funRecords"], [data-page="records"], [data-page="rewards"], [data-page="manage"], [data-page="prizeSettings"])::before {
    width: 38px;
    height: 38px;
  }
}

/* 家长身份名称始终以整张身份卡为基准居中。 */
@media (min-width: 761px) {
  html.is-parent .session-card > strong {
    grid-column: 1 / -1;
    text-align: center;
  }
}

/* 首页审核卡：清晰的审核状态，不让标题与空提示拥挤。 */
html.is-parent #overviewPage .panel-approval-console {
  display: grid;
  gap: 14px;
  min-height: 184px;
  padding: 24px;
  border-color: #b9d4f4;
  background:
    radial-gradient(circle at 88% 10%,rgba(88,210,239,.24),transparent 28%),
    linear-gradient(145deg,#f3fbff,#e8f4ff 56%,#f2efff);
  box-shadow: 0 16px 34px rgba(45,89,151,.12),inset 0 1px rgba(255,255,255,.9);
}
html.is-parent #overviewPage .panel-approval-console .panel-title { margin: 0; }
html.is-parent #overviewPage .panel-approval-console .panel-title h3 { color: #142c51; font-size: 24px; }
html.is-parent #overviewPage .panel-approval-console .approval-list { min-height: 104px; }
html.is-parent #overviewPage .approval-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 104px;
  padding: 16px 20px;
  border: 1px dashed #a9cae8;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  text-align: left;
}
html.is-parent #overviewPage .approval-empty-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg,#37d8e8,#5265dd);
  box-shadow: 0 8px 16px rgba(59,120,210,.24);
  font-size: 20px;
  font-weight: 900;
}
html.is-parent #overviewPage .approval-empty strong { display: block; color: #1b4773; font-size: 17px; }
html.is-parent #overviewPage .approval-empty p { margin: 4px 0 0; color: #6d83a2; font-size: 14px; }

/* 家长端保留三项汇总统计，三格均分整行，不留下空白列。 */
html.is-parent #recordsPage .record-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
html.is-parent #recordsPage .record-summary article {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  min-height: 0;
  padding: 18px;
  overflow: visible;
  border: 1px solid #c6d9ee !important;
  border-radius: 16px;
  background: linear-gradient(135deg,#e4faff,#eae7ff) !important;
  box-shadow: none;
  text-align: left;
}
html.is-parent #recordsPage .record-summary article::before,
html.is-parent #recordsPage .record-summary article::after { display: none; }
html.is-parent #recordsPage .record-summary span { order: -1; margin: 0; color: #536d94; font-size: 16px; font-weight: 850; white-space: nowrap; }
html.is-parent #recordsPage .record-summary strong { margin: 0; color: #315bd4 !important; font-size: 36px; line-height: 1; }

/* 孩子端四项飞行日志统计均分整行，避免右侧留下空白。 */
html:not(.is-parent) #recordsPage .record-summary { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }

@media (max-width: 900px) {
  html.is-parent #recordsPage .record-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html:not(.is-parent) #recordsPage .record-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html.is-parent #overviewPage .panel-approval-console { min-height: 0; }
}

/* 家长端时间轴：筛选紧贴标题，日期工具独立靠右。 */
.growth-route-title-with-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.growth-route-title-with-filter h3 { flex: 0 0 auto; }
html.is-parent #growthTasksPage .growth-route-title-with-filter #growthTaskKidButtons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
html.is-parent #growthTasksPage .growth-route-title-with-filter .growth-crew-button { min-height: 36px; padding: 0 13px; font-size: 14px; }

/* 身份名称以整张卡片为中心，右侧操作图标不参与布局计算。 */
@media (min-width: 761px) {
  html.is-parent .session-card {
    display: block;
    flex: 0 0 190px;
    width: 190px;
    min-width: 0;
    min-height: 72px;
    padding: 8px 10px;
    box-sizing: border-box;
  }
  html.is-parent .session-card > span,
  html.is-parent .session-card > strong {
    position: absolute;
    top: 50%;
    right: 76px;
    left: 8px;
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    word-break: keep-all;
  }
  html.is-parent .session-card > button {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }
}

@media (max-width: 900px) {
  .growth-route-section-heading { align-items: flex-start; flex-direction: column; }
  .growth-route-heading-tools { justify-content: flex-start; }
}

/* 首页记录金额始终完整展示单位，避免右侧金额列被压缩。 */
.timeline-item .change { min-width: 76px; white-space: nowrap; text-align: right; }

/* 家长端飞行员能量汇总：文字、数字和行距分开阅读。 */
html.is-parent #recordsPage .child-summary article { padding: 20px 22px; }
html.is-parent #recordsPage .child-summary strong { margin-bottom: 16px; }
html.is-parent #recordsPage .child-summary span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
}
html.is-parent #recordsPage .child-summary span b { font-weight: 800; }
html.is-parent #recordsPage .child-summary span em { font-style: normal; font-weight: 900; white-space: nowrap; }

/* 趣闻记载：按 Figma 的 Fun Record Card 规格落地，深空卡片承载孩子成长记忆。 */
#funRecordsPage { padding-top: 0; }
#funRecordsPage .fun-records-shell { display: grid; gap: 18px; }
#funRecordsPage .fun-records-hero,
#funRecordsPage .fun-record-compose,
html:not(.is-parent) #funRecordsPage .fun-record-browser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#funRecordsPage .fun-records-hero::before,
#funRecordsPage .fun-record-compose::before,
html:not(.is-parent) #funRecordsPage .fun-record-browser::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 44%, rgba(76, 156, 255, .18) 0 7%, rgba(83, 75, 205, .11) 23%, transparent 48%),
    radial-gradient(ellipse at 78% 55%, rgba(173, 81, 255, .14) 0 6%, rgba(40, 200, 255, .09) 25%, transparent 50%),
    radial-gradient(circle at 4.7% 16%, rgba(255,255,255,.96) 0 .7px, rgba(255,255,255,.25) 1.8px, transparent 3px),
    radial-gradient(circle at 12.4% 77%, rgba(111,219,255,.92) 0 1.4px, rgba(71,181,255,.22) 3px, transparent 5px),
    radial-gradient(circle at 23.8% 28%, rgba(255,219,117,.95) 0 1.1px, rgba(255,181,65,.23) 2.8px, transparent 5px),
    radial-gradient(ellipse at 32.7% 87%, rgba(205,183,255,.78) 0 .8px, transparent 2px),
    radial-gradient(circle at 43.2% 13%, rgba(255,255,255,.88) 0 2px, rgba(133,220,255,.18) 4px, transparent 7px),
    radial-gradient(ellipse at 51.6% 69%, rgba(115,225,255,.78) 0 .65px, transparent 1.8px),
    radial-gradient(circle at 62.3% 22%, rgba(190,155,255,.9) 0 1.3px, rgba(139,86,255,.18) 3.5px, transparent 6px),
    radial-gradient(circle at 69.9% 83%, rgba(255,239,178,.82) 0 .8px, transparent 2.2px),
    radial-gradient(circle at 81.4% 35%, rgba(255,255,255,.98) 0 1.6px, rgba(98,211,255,.2) 3.8px, transparent 7px),
    radial-gradient(ellipse at 89.2% 72%, rgba(99,207,255,.8) 0 1px, transparent 2.5px),
    radial-gradient(circle at 96.1% 18%, rgba(255,195,94,.9) 0 1.2px, rgba(255,169,50,.18) 3px, transparent 5.5px);
  content: "";
  opacity: .9;
  pointer-events: none;
}
#funRecordsPage .fun-records-hero::after,
#funRecordsPage .fun-record-compose::after,
html:not(.is-parent) #funRecordsPage .fun-record-browser::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 7% 63%, rgba(255,255,255,.54) 0 .55px, transparent 1.4px),
    radial-gradient(circle at 28% 8%, rgba(126,217,255,.46) 0 .7px, transparent 1.7px),
    radial-gradient(circle at 38% 57%, rgba(255,255,255,.48) 0 .45px, transparent 1.2px),
    radial-gradient(circle at 74% 11%, rgba(191,159,255,.46) 0 .7px, transparent 1.8px),
    radial-gradient(circle at 93% 61%, rgba(255,227,151,.48) 0 .6px, transparent 1.5px),
    url('/assets/fun-irregular-galaxy-stars.svg') center / cover no-repeat;
  content: "";
  opacity: .82;
  -webkit-mask-image:
    radial-gradient(ellipse 56% 78% at 46% 53%, #000 0 48%, rgba(0,0,0,.86) 63%, rgba(0,0,0,.35) 82%, transparent 100%),
    linear-gradient(90deg, rgba(0,0,0,.5), #000 18% 82%, rgba(0,0,0,.55));
  mask-image:
    radial-gradient(ellipse 56% 78% at 46% 53%, #000 0 48%, rgba(0,0,0,.86) 63%, rgba(0,0,0,.35) 82%, transparent 100%),
    linear-gradient(90deg, rgba(0,0,0,.5), #000 18% 82%, rgba(0,0,0,.55));
  pointer-events: none;
}
#funRecordsPage .fun-record-compose::before {
  transform: scaleX(-1);
}
html:not(.is-parent) #funRecordsPage .fun-record-browser::before {
  transform: rotate(180deg);
}
#funRecordsPage .fun-record-compose::after {
  transform: translate(2.8%, -3%);
}
html:not(.is-parent) #funRecordsPage .fun-record-browser::after {
  transform: translate(-2.5%, 4%) scaleX(-1);
}
#funRecordsPage .fun-records-hero > *,
#funRecordsPage .fun-record-compose > *,
html:not(.is-parent) #funRecordsPage .fun-record-browser > * {
  position: relative;
  z-index: 1;
}
#funRecordsPage .fun-records-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 156px;
  padding: 28px 30px;
  overflow: hidden;
  border-color: rgba(53,231,255,.26);
  background:
    radial-gradient(circle at 92% 10%,rgba(53,231,255,.2),transparent 28%),
    linear-gradient(120deg,rgba(14,44,95,.98),rgba(20,32,86,.96));
}
.fun-records-hero-copy { min-width: 0; }
.fun-records-kicker { display: block; color: var(--cyan); font: 800 12px/1.2 Inter,sans-serif; letter-spacing: .15em; }
#funRecordsPage .fun-records-hero h3 { margin: 10px 0 6px; color: #fff; font-size: clamp(27px,3vw,38px); letter-spacing: -.04em; }
#funRecordsPage .fun-records-hero p { max-width: 620px; margin: 0; color: #b8c9e6; font-size: 15px; line-height: 1.65; }
.fun-records-hero-count { display: grid; flex: 0 0 auto; place-items: center; min-width: 126px; min-height: 94px; padding: 16px; border: 1px solid rgba(124,238,255,.24); border-radius: 20px; background: rgba(9,20,52,.44); text-align: center; }
.fun-records-hero-count strong { display: block; color: var(--cyan-2); font: 850 48px/1 Inter,sans-serif; }
.fun-records-hero-count span { margin-top: 7px; color: #b7c8e2; font-size: 14px; font-weight: 800; }
.fun-records-layout { display: grid; grid-template-columns: minmax(320px,.86fr) minmax(0,1.54fr); gap: 18px; align-items: start; }
html:not(.is-parent) #funRecordsPage .fun-records-layout { grid-template-columns: minmax(0,1fr); }
.fun-record-compose, .fun-record-browser { min-width: 0; }
#funRecordsPage .fun-record-compose { display: grid; gap: 20px; padding: 24px; border-color: rgba(53,231,255,.32); background: linear-gradient(145deg,#172849,#304365 55%,#29365e); }
html.is-parent #funRecordsPage .fun-record-compose { display: grid; gap: 20px; padding: 24px; border-color: rgba(53,231,255,.36); background: linear-gradient(145deg,#172849,#304365 55%,#29365e); }
.fun-record-section-heading, .fun-record-browser-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fun-record-section-heading h3, .fun-record-browser-heading h3 { margin: 7px 0 0; font-size: 23px; }
.fun-record-section-heading h3 { color: #fff; }
#funRecordComposer .fun-record-section-heading {
  display: grid;
  grid-template-columns: 202px minmax(0, 1fr) 202px;
  align-items: center;
  column-gap: 14px;
}
#funRecordComposer .fun-record-heading-side {
  box-sizing: border-box;
  min-height: 72px;
  border: 1px solid rgba(124, 238, 255, .16);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(9, 20, 52, .28), rgba(32, 66, 112, .18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#funRecordComposer .fun-record-heading-copy {
  min-width: 0;
  min-height: 72px;
  position: relative;
  z-index: 2;
  padding: 11px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#funRecordComposer .fun-record-heading-copy .fun-records-kicker {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: .12em;
}
#funRecordComposer .fun-record-heading-copy h3 {
  white-space: nowrap;
  font-size: 22px;
}
.fun-record-compose-art {
  display: block;
  width: 100%;
  max-width: 818px;
  height: 154px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 16px rgba(27, 133, 219, .2));
  margin: -12px auto -8px;
}
#funRecordComposer .fun-record-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  width: max-content;
  justify-self: end;
  justify-content: center;
  min-height: 0;
  padding: 10px 12px;
  position: relative;
  z-index: 2;
}
.fun-record-heading-icon { flex: 0 0 auto; width: 28px; height: 28px; margin: 0; }
.fun-record-cancel {
  min-width: 64px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
}
.fun-record-add-toggle { min-height: 38px; margin-top: 10px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.fun-record-form { display: grid; gap: 14px; }
.fun-record-form label { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; color: #ffffff; font-size: 15px; font-weight: 850; }
.fun-record-form label > span { display: block; color: #ffffff; }
html:not(.is-parent) #funRecordsPage .fun-record-form .parent-only { display: none !important; }
html.is-parent #funRecordsPage .fun-record-form .parent-only { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
#funRecordsPage .fun-record-form label, #funRecordsPage .fun-record-form label > span { color: #e9f8ff !important; }
.fun-record-form input, .fun-record-form select, .fun-record-form textarea { width: 100%; color: #13203b; border: 1px solid #dbe7f5; border-radius: 10px; background: #fff; box-shadow: none; font-size: 16px; }
.fun-record-form input::placeholder, .fun-record-form textarea::placeholder { color: #315982; opacity: 1; }
.fun-record-form textarea { min-height: 112px; padding: 11px 12px; resize: vertical; line-height: 1.55; }
.fun-record-form-message { min-height: 18px; margin: -2px 0 0; color: #ffd5dc; }
.fun-record-form-message.is-success { color: #9bffda; }
html.is-parent #funRecordsPage .fun-record-browser { padding: 24px; border-color: #dbe5f4; background: linear-gradient(145deg,#f4fbff,#edf2ff 58%,#f6efff); box-shadow: 0 16px 38px rgba(50,91,148,.08); }
html.is-parent #funRecordsPage .fun-record-browser-heading h3 { color: #142c51; }
html:not(.is-parent) #funRecordsPage .fun-record-browser { padding: 24px; border-color: rgba(53,231,255,.22); background: linear-gradient(145deg,rgba(14,38,82,.95),rgba(10,23,56,.96)); }
html:not(.is-parent) #funRecordsPage .fun-record-browser-heading h3 { color: #fff; }
.fun-record-filters { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.fun-record-filters label { display: block; }
html:not(.is-parent) #funRecordsPage .fun-record-filters .parent-only { display: none !important; }
.fun-record-filters select, .fun-record-filters input { min-height: 36px; padding: 0 10px; color: #1b2a4b; border: 1px solid #b7ccec; border-radius: 10px; background: #f4f8ff; font-size: 13px; font-weight: 750; }
.fun-record-filters input { width: 166px; font-size: 16px; }
.fun-record-filters .secondary-button { min-height: 42px; padding: 0 15px; font-size: 16px; }

/* Contextual control surfaces: replace generic white/gray fields with colors from each panel. */
.supply-record-panel #exchangeStartDate,
.supply-record-panel #exchangeEndDate {
  color: #0c4f72;
  border-color: #72d8cf;
  background: linear-gradient(135deg,#dffbf3,#d9f4ff 56%,#e8ecff);
  box-shadow: inset 0 1px rgba(255,255,255,.78),0 6px 15px rgba(30,148,158,.09);
}
#funRecordsPage .fun-record-filters input,
#funRecordsPage .fun-record-filters select {
  color: #dffaff;
  border-color: rgba(74,224,255,.56);
  background: linear-gradient(135deg,#173d78,#263a78 58%,#3a317c);
  color-scheme: dark;
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 8px 18px rgba(5,15,48,.22);
}
#funRecordsPage .fun-record-filters .secondary-button {
  color: #ecfdff;
  border-color: rgba(91,233,255,.52);
  background: linear-gradient(135deg,#16568c,#2749a4 58%,#5d3fc5);
  box-shadow: 0 8px 18px rgba(17,63,147,.22);
}
#growthTasksPage .growth-route-heading-tools .text-button {
  color: #073b6d;
  border-color: #62d9e9;
  background: linear-gradient(135deg,#baf5f2,#a7e8ff 55%,#c7c7ff);
  box-shadow: 0 8px 18px rgba(20,131,171,.16);
}
#overviewPage .panel-task-console .point-form input {
  color: #263569;
  border-color: #9aa9ef;
  background: linear-gradient(135deg,#e7edff,#e6ddff 55%,#daf6ff);
  box-shadow: inset 0 1px rgba(255,255,255,.8),0 7px 16px rgba(90,91,178,.09);
}
#recordsPage .records-panel-title .segmented {
  border-color: #9bbbef;
  background: linear-gradient(135deg,#d9ecff,#dddfff 56%,#e8d8ff);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
}
#recordsPage .records-panel-title .segmented button { color: #53688f; }
#recordsPage .records-panel-title .segmented button.active {
  color: #084f91;
  background: linear-gradient(135deg,#aeeeff,#b8d9ff 55%,#c9bdff);
  box-shadow: 0 5px 13px rgba(67,105,178,.16),inset 0 0 0 1px rgba(82,181,235,.32);
}
.fun-record-list { display: grid; gap: 14px; margin-top: 22px; }
.fun-record-card { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; padding: 16px; overflow: hidden; border: 1px solid rgba(53,231,255,.12); border-radius: 16px; background: #33405f; box-shadow: 0 14px 36px rgba(5,10,31,.28); }
.fun-record-card-top, .fun-record-card-meta, .fun-record-card footer { display: flex; align-items: center; }
.fun-record-card-top { justify-content: space-between; gap: 12px; }
.fun-record-card-meta { min-width: 0; gap: 4px; }
.fun-record-card-meta img { flex: 0 0 auto; width: 24px; height: 24px; }
.fun-record-card-meta span { color: #7ceeff; font-size: 17px; font-weight: 800; white-space: nowrap; }
.fun-record-card-meta span small { margin-left: 8px; color: inherit; font: 900 12px/1 Inter,sans-serif; letter-spacing: .12em; vertical-align: middle; }
.fun-record-card-meta span em { margin-left: 28px; color: #dceaff; font-size: 15px; font-style: normal; font-weight: 700; letter-spacing: 0; vertical-align: middle; }
.fun-record-card time { color: #d8e8ff; font-size: 17px; font-weight: 700; white-space: nowrap; }
.fun-record-card h4 { margin: 0; color: #fff; font-size: 28px; line-height: 36px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.fun-record-card > p { min-height: 60px; margin: 0; color: #f0f6ff; font-size: 20px; line-height: 32px; white-space: pre-line; overflow-wrap: anywhere; }
.fun-record-card footer { gap: 8px; }
.fun-record-card footer img { flex: 0 0 auto; width: 8px; height: 8px; }
.fun-record-card footer span { color: #fff; font-size: 20px; font-weight: 800; }
.fun-record-empty { display: grid; place-items: center; min-height: 270px; padding: 30px 20px; border: 1px dashed rgba(124,238,255,.28); border-radius: 16px; background: rgba(17,39,83,.34); text-align: center; }
.fun-record-empty img { width: 30px; height: 32px; margin-bottom: 12px; }
.fun-record-empty strong { color: #dcecff; font-size: 17px; }
.fun-record-empty p { margin: 8px 0 0; color: #9eb2d7; font-size: 13px; line-height: 1.55; }
html.is-parent #funRecordsPage .fun-record-empty { border-color: #b8cfe8; background: rgba(255,255,255,.64); }
html.is-parent #funRecordsPage .fun-record-empty strong { color: #1b4773; }
html.is-parent #funRecordsPage .fun-record-empty p { color: #6d83a2; }
.nav-item[data-page="funRecords"]::before { display: none; content: none; }
.nav-item[data-page="funRecords"] { gap: 12px; }
.nav-item .nav-icon { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(125,157,219,.26); border-radius: 9px; background: rgba(53,231,255,.06); }
.nav-item .nav-icon img { width: 17px; height: 19px; }
@media (max-width: 980px) {
  .fun-records-layout { grid-template-columns: 1fr; }
  html.is-parent #funRecordsPage .fun-record-compose { order: 1; }
  #funRecordsPage .fun-record-browser { order: 2; }
}
@media (max-width: 620px) {
  #funRecordsPage .fun-records-hero { align-items: flex-start; flex-direction: column; padding: 22px; }
  .fun-records-hero-count { width: 100%; min-height: 76px; grid-template-columns: auto auto auto; gap: 8px; justify-content: center; }
  .fun-records-hero-count strong { font-size: 34px; }
  .fun-records-hero-count span { margin-top: 0; }
  html.is-parent #funRecordsPage .fun-record-compose, html.is-parent #funRecordsPage .fun-record-browser, html:not(.is-parent) #funRecordsPage .fun-record-browser { padding: 18px; }
  .fun-record-browser-heading { align-items: stretch; flex-direction: column; }
  .fun-record-filters { justify-content: flex-start; }
  .fun-record-filters input { flex: 1 1 130px; width: auto; }
}

.nav-item[data-page="funRecords"]::before {
  display: block;
  content: "";
  background-image: url('/runtime-images/nav-fun-records.png');
}

/* Figma storyboard: launch, cruise and energy-return loop in the cockpit header. */
.topbar-motion { display: none; }
@media (min-width: 1181px) {
  .topbar::before,
  .sticker-strip { display: none !important; }
  .topbar-motion {
    position: absolute !important;
    z-index: 1 !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 315px;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }
  .topbar-motion > span {
    position: absolute;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .topbar-motion > .cockpit-launch {
    z-index: 3;
    bottom: -4px;
    left: -2px;
    width: 132px;
    height: 132px;
    background-image: url('/runtime-images/cockpit-launch.png');
    filter: drop-shadow(0 8px 12px rgba(26, 136, 207, .2));
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 76%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 76%, transparent 100%);
  }
  .topbar-motion > .cockpit-route {
    z-index: 1;
    inset: 4px 72px 2px 74px;
    background-image: url('/assets/cockpit-energy-route.svg?v=1');
    background-size: 100% 100%;
  }
  .topbar-motion > .cockpit-planet {
    z-index: 3;
    top: -4px;
    right: -2px;
    width: 132px;
    height: 132px;
    background-image: url('/runtime-images/cockpit-planet.png');
    filter: drop-shadow(0 0 14px rgba(45, 218, 255, .3));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 100%);
  }
  .topbar-motion > .cockpit-gate {
    z-index: 2;
    top: 50%;
    width: 118px;
    height: 76px;
    transform: translate(-50%, -50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
  }
  .cockpit-gate-cyan {
    left: 28%;
    background-image: url('/runtime-images/cockpit-gate-cyan.png');
  }
  .cockpit-gate-purple {
    left: 50%;
    background-image: url('/runtime-images/cockpit-gate-purple.png');
  }
  .cockpit-gate-gold {
    left: 72%;
    background-image: url('/runtime-images/cockpit-gate-gold.png');
  }
  .cockpit-signal {
    z-index: 1;
    top: 50%;
    right: 20px;
    width: 82px;
    height: 82px;
    border: 2px solid rgba(53, 222, 255, .42);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: cockpit-signal-pulse 2.4s ease-out infinite;
  }
  .cockpit-shuttle {
    z-index: 4;
    top: 58%;
    left: 2%;
    width: 102px;
    height: 58px;
    background-image: url('/runtime-images/cockpit-shuttle.png');
    filter: drop-shadow(0 6px 8px rgba(22, 80, 161, .28));
    transform: translate(-50%, -50%);
    animation: cockpit-shuttle-loop 11s cubic-bezier(.45, .04, .36, 1) infinite;
    will-change: left, top, transform, opacity;
  }
  @keyframes cockpit-shuttle-loop {
    0% { left: 1%; top: 64%; opacity: 0; transform: translate(-50%, -50%) scale(.68) rotate(-8deg); }
    8% { left: 12%; top: 51%; opacity: 1; transform: translate(-50%, -50%) scale(.82) rotate(-5deg); }
    29% { left: 34%; top: 37%; opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(-4deg); }
    51% { left: 54%; top: 57%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(5deg); }
    73% { left: 73%; top: 39%; opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(-3deg); }
    89% { left: 86%; top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(.78) rotate(2deg); }
    95% { left: 91%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.48) rotate(2deg); }
    100% { left: 1%; top: 64%; opacity: 0; transform: translate(-50%, -50%) scale(.68) rotate(-8deg); }
  }
  @keyframes cockpit-signal-pulse {
    0% { opacity: .62; transform: translateY(-50%) scale(.72); }
    75%, 100% { opacity: 0; transform: translateY(-50%) scale(1.32); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cockpit-shuttle,
  .cockpit-signal { animation: none !important; }
  .cockpit-shuttle { left: 52%; top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(.92); }
}

/* Figma-checked single-piece cockpit artwork; only the shuttle remains animated. */
@media (min-width: 1181px) {
  .topbar {
    min-height: 190px;
    padding-block: 20px;
  }
  .topbar-motion {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 280px !important;
  }
  .topbar-motion > .cockpit-banner-art {
    z-index: 1;
    inset: 0 22px 0 -22px;
    background-image: url('/runtime-images/cockpit-happy-banner.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 8px 16px rgba(39, 132, 203, .16));
  }
  .topbar-motion > .cockpit-shuttle {
    z-index: 3;
    width: 88px;
    height: 50px;
  }
}

/* Figma task timeline: deep-space deck, chronograph artwork and calendar action. */
#growthTasksPage .growth-route-schedule {
  position: relative;
  overflow: hidden;
  color: #eff8ff;
  border-color: rgba(55, 199, 240, .42);
  background:
    radial-gradient(circle at 11% 20%, rgba(56, 218, 255, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 79% 14%, rgba(255, 190, 65, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 69%, rgba(121, 101, 255, .14) 0 3px, transparent 4px),
    linear-gradient(135deg, #071a3c 0%, #0d2a56 56%, #171447 100%);
  background-size: 173px 149px, 211px 181px, 257px 223px, auto;
  box-shadow: 0 20px 46px rgba(24, 67, 126, .19), inset 0 1px rgba(255, 255, 255, .08);
}
#growthTasksPage .growth-route-section-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(560px, 1fr) auto;
  gap: 18px;
  min-height: 108px;
}
#growthTasksPage .growth-route-title-with-filter {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-width: 245px;
  justify-self: start;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}
.growth-timeline-heading-copy {
  padding-left: 12px;
  transform: translateY(-8px);
}
.growth-timeline-heading-copy > span {
  display: block;
  color: #54e9ff;
  font: 900 12px/1.25 Inter, sans-serif;
  letter-spacing: .14em;
}
#growthTasksPage .growth-timeline-heading-copy h3 {
  margin: 5px 0 9px;
}
.growth-timeline-heading-copy > p {
  margin: 0;
  color: #b8d4ea;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}
#growthTasksPage .growth-route-title-with-filter::after { display:none; }
#growthTasksPage .growth-route-section-heading h3 {
  position: relative;
  z-index: 2;
  color: #f7fbff;
  text-shadow: 0 2px 5px rgba(0, 5, 24, .82);
}
.growth-timeline-art {
  align-self: center;
  width: 100%;
  min-width: 560px;
  max-width: 760px;
  aspect-ratio: 2400 / 430;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: url('/runtime-images/task-timeline-navigation-v1.webp') center / contain no-repeat;
  box-shadow: none;
}
#growthTasksPage .growth-route-heading-tools {
  position: relative;
  justify-self: end;
  align-self: center;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 24px;
  min-height: 48px;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#growthTasksPage .growth-route-heading-tools::before { display:none; }
#growthTasksPage .growth-route-heading-tools .text-button {
  display: grid;
  grid-template-columns: 42px auto;
  grid-template-rows: auto auto;
  place-content: center;
  align-items: center;
  column-gap: 6px;
  row-gap: 7px;
  width: 98px;
  height: 98px;
  min-height: 98px;
  padding: 0;
  color: #8fefff;
  border:1px solid rgba(82, 221, 241, .72);
  border-radius: 10px;
  background: linear-gradient(145deg, #123e72, #175b8f 58%, #263b82);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
  text-shadow:none;
  white-space: nowrap;
}
#growthTasksPage .calendar-button {
  display: grid;
  grid-template-columns: 42px auto;
  grid-template-rows: auto auto;
  place-content: center;
  align-items: center;
  column-gap: 6px;
  row-gap: 7px;
  width: 98px;
  height: 98px;
  min-height: 98px;
  padding: 0;
  color: #4b237f;
  border-color: rgba(190, 126, 255, .78);
  border-radius:10px;
  background: linear-gradient(145deg, #392a79, #563392 56%, #713b82);
  box-shadow: 0 8px 18px rgba(76, 38, 139, .3), inset 0 1px rgba(255,255,255,.12);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
  white-space: nowrap;
}
#growthTasksPage .calendar-button::before {
  display: none;
  background:none;
  content: "▦";
  color:#073257;
  font-size:22px;
  line-height:29px;
  text-align:center;
}
.timeline-tool-icon {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 5px 9px rgba(17, 92, 177, .24));
}
#growthTasksPage .growth-route-heading-tools button > span {
  grid-column: 2;
  justify-self: center;
  line-height: 1;
}
#growthTasksPage .growth-route-heading-tools #growthTaskToday > span {
  color: #b9f7ff;
  font-size: 18px;
  font-weight: 950;
}
#growthTasksPage .growth-route-heading-tools #growthTaskCalendarButton > span {
  color: #f0d7ff;
  font-size: 18px;
  font-weight: 950;
}
#growthTasksPage .growth-route-date-strip { position: relative; z-index: 2; margin-top: 16px; }
#growthTasksPage .growth-route-date-chip {
  color: #c4dcfa;
  border-color: rgba(70, 145, 207, .44);
  background: rgba(12, 40, 82, .82);
}
#growthTasksPage .growth-route-date-chip strong { color: #f0f7ff; }
#growthTasksPage .growth-route-date-chip.active {
  color: #fff;
  border-color: #4ed7ff;
  background: linear-gradient(135deg, #2858d7, #4d42d5);
  box-shadow: 0 10px 24px rgba(31, 98, 221, .3), inset 0 1px rgba(255, 255, 255, .16);
}
#growthTasksPage .growth-task-list { position: relative; z-index: 2; }
#growthTasksPage .growth-task-empty {
  min-height: 320px;
  border-color: rgba(82, 171, 229, .35);
  background:
    radial-gradient(circle at 16% 22%, rgba(68, 222, 255, .65) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 28%, rgba(255, 191, 66, .54) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 74%, rgba(110, 97, 240, .46) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, #123563 0%, #071a3a 66%, #06142f 100%);
  background-size: 193px 157px, 241px 199px, 283px 227px, auto;
  box-shadow: inset 0 0 44px rgba(43, 162, 224, .08);
}
#growthTasksPage .growth-task-empty > span {
  color: #d9fbff;
  border: 1px solid rgba(103, 230, 255, .42);
  background: linear-gradient(145deg, #1675ad, #4d43c5);
  box-shadow: 0 13px 28px rgba(24, 116, 194, .24);
}
#growthTasksPage .growth-task-empty strong { color: #f5fbff; }
#growthTasksPage .growth-task-empty p { color: #b1c9e6; }
@media (max-width: 1000px) {
  #growthTasksPage .growth-route-section-heading {
    grid-template-columns: 150px minmax(330px, 1fr) 270px;
    justify-content: space-between;
    gap: 16px;
    min-height: 88px;
  }
  #growthTasksPage .growth-route-title-with-filter { min-width: 150px; padding-right: 0; }
  #growthTasksPage .growth-route-title-with-filter::after,
  #growthTasksPage .growth-route-heading-tools::before { display: none; }
  #growthTasksPage .growth-route-heading-tools { margin-left: 0; }
  .growth-timeline-art { min-width: 330px; max-width: 520px; }
}
html.is-parent #growthTasksPage .growth-route-section-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:14px 18px;
}
html.is-parent #growthTasksPage .growth-route-title-with-filter {
  grid-column:1;
  grid-row:1;
  min-width:0;
}
html.is-parent #growthTasksPage .growth-route-heading-tools {
  grid-column:2;
  grid-row:1;
  align-self:start;
}
html.is-parent #growthTasksPage .growth-timeline-art {
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  min-width:0;
  max-width:none;
  height:128px;
  aspect-ratio:auto;
}
@media (max-width: 820px) {
  #growthTasksPage .growth-route-section-heading { display: flex; align-items: stretch; flex-direction: column; min-height: 0; }
  .growth-timeline-art { width: 100%; max-width: none; min-height: 0; margin: 10px 0; }
  #growthTasksPage .growth-route-heading-tools { align-self: flex-end; margin-left: 0; }
}

/* Figma exploration stats: four distinct mission instruments with Sub-generated icons. */
#growthTasksPage .growth-child-stats {
  gap: 14px;
  margin-bottom: 18px;
}
#growthTasksPage .growth-stat-card {
  --stat-accent: #35d7ff;
  --stat-accent-rgb: 53, 215, 255;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  min-height: 164px;
  padding: 49px 132px 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(var(--stat-accent-rgb), .54);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 26%, rgba(var(--stat-accent-rgb), .22) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 80%, rgba(255, 255, 255, .18) 0 1px, transparent 2px),
    linear-gradient(138deg, #061a3d 0%, #0d2f67 58%, #173980 100%);
  background-size: 101px 89px, 139px 127px, auto;
  box-shadow: 0 16px 32px rgba(25, 69, 125, .16), inset 0 1px rgba(255, 255, 255, .11);
  text-align: left;
}
#growthTasksPage .growth-stat-card::before {
  position: absolute;
  z-index: -1;
  top: 16px;
  right: 18px;
  width: 108px;
  height: 108px;
  border-radius: 24px;
  background: var(--stat-icon) center / contain no-repeat;
  filter: drop-shadow(0 11px 18px rgba(var(--stat-accent-rgb), .2));
  content: "";
}
#growthTasksPage .growth-stat-card::after {
  position: absolute;
  top: 19px;
  right: auto;
  bottom: auto;
  left: 24px;
  height: auto;
  border-radius: 0;
  color: var(--stat-accent);
  background: none;
  content: attr(data-stat-en);
  opacity: .82;
  font: 900 12px/1 Inter,sans-serif;
  letter-spacing: .14em;
}
#growthTasksPage .growth-stat-card span {
  order: -1;
  color: #eff8ff;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.35;
  text-shadow: 0 2px 5px rgba(0, 7, 28, .64);
}
#growthTasksPage .growth-stat-card strong {
  margin-top: 16px;
  color: var(--stat-accent);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 6px 16px rgba(var(--stat-accent-rgb), .18);
}
#growthTasksPage .growth-stat-tasks {
  --stat-accent: #35d7ff;
  --stat-accent-rgb: 53, 215, 255;
  --stat-icon: url('/runtime-images/growth-stat-tasks.png');
}
#growthTasksPage .growth-stat-completed {
  --stat-accent: #38e1b0;
  --stat-accent-rgb: 56, 225, 176;
  --stat-icon: url('/runtime-images/growth-stat-completed.png');
  background-image:
    radial-gradient(circle at 82% 26%, rgba(var(--stat-accent-rgb), .22) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 80%, rgba(255, 255, 255, .18) 0 1px, transparent 2px),
    linear-gradient(138deg, #05233a 0%, #07545c 58%, #087276 100%);
}
#growthTasksPage .growth-stat-energy {
  --stat-accent: #ffc74d;
  --stat-accent-rgb: 255, 199, 77;
  --stat-icon: url('/runtime-images/growth-stat-energy.png');
  background-image:
    radial-gradient(circle at 82% 26%, rgba(var(--stat-accent-rgb), .23) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 80%, rgba(255, 255, 255, .16) 0 1px, transparent 2px),
    linear-gradient(138deg, #20203f 0%, #733a2b 56%, #bf4f17 100%);
}
#growthTasksPage .growth-stat-rate {
  --stat-accent: #a98aff;
  --stat-accent-rgb: 169, 138, 255;
  --stat-icon: url('/runtime-images/growth-stat-rate.png');
  background-image:
    radial-gradient(circle at 82% 26%, rgba(var(--stat-accent-rgb), .24) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 80%, rgba(255, 255, 255, .16) 0 1px, transparent 2px),
    linear-gradient(138deg, #111a50 0%, #2e2778 55%, #4f36b9 100%);
}
@media (max-width: 1180px) {
  #growthTasksPage .growth-stat-card { min-height: 150px; padding: 44px 104px 20px 20px; }
  #growthTasksPage .growth-stat-card::before { top: 20px; right: 14px; width: 86px; height: 86px; }
  #growthTasksPage .growth-stat-card strong { font-size: 42px; }
}
@media (max-width: 620px) {
  #growthTasksPage .growth-child-stats { gap: 10px; }
  #growthTasksPage .growth-stat-card { min-height: 144px; padding: 41px 80px 18px 16px; border-radius: 15px; }
  #growthTasksPage .growth-stat-card::before { top: 17px; right: 9px; width: 68px; height: 68px; }
  #growthTasksPage .growth-stat-card::after { top: 16px; right: auto; bottom: auto; left: 16px; font-size: 10px; }
  #growthTasksPage .growth-stat-card span { font-size: 14px; white-space: normal; }
  #growthTasksPage .growth-stat-card strong { margin-top: 14px; font-size: 36px; }
}

/* Figma fun-record layout: illustrated memory capture and chronological archive trail. */
#funRecordsPage .fun-records-hero {
  display: grid;
  grid-template-columns: minmax(260px, 290px) minmax(0, 1fr) 226px;
  gap: 12px;
  min-height: 222px;
  padding: 16px 18px;
}
#funRecordsPage .fun-records-hero-copy {
  align-self: center;
}
#funRecordsPage .fun-records-hero-copy p {
  font-size: 16px;
  line-height: 1.8;
}
.fun-records-hero-visuals {
  align-self: center;
  display: block;
  min-width: 0;
  height: 202px;
  margin-inline: -48px -14px;
}
.fun-records-hero-art {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 14px 18px rgba(26, 105, 197, .2));
}
#funRecordsPage .fun-records-hero-count {
  align-self: center;
  display: grid;
  grid-template-columns: 78px 1fr;
  grid-template-rows: 76px 28px;
  place-items: center;
  min-width: 0;
  min-height: 150px;
  padding: 14px;
  border-radius: 18px;
}
#funRecordsPage .fun-records-hero-count strong {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0;
  border: 2px solid rgba(76, 227, 255, .7);
  border-radius: 50%;
  background: rgba(27, 94, 170, .24);
  font-size: 42px;
}
#funRecordsPage .fun-records-hero-count span {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}
#funRecordsPage .fun-records-hero-count .fun-record-add-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 76px;
  height: 76px;
  min-height: 76px;
  margin: 0;
  padding: 0 8px 0 11px;
  border-radius: 14px;
  background: linear-gradient(135deg, #31cdeb, #4b6cf1);
  box-shadow: 0 10px 22px rgba(38, 142, 221, .28);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .16em;
  white-space: nowrap;
}
#funRecordsPage .fun-records-hero-count .fun-record-add-toggle span {
  display: block;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
#funRecordsPage .fun-record-browser-heading {
  align-items: center;
  min-height: 112px;
}
#funRecordsPage .fun-record-browser-heading > div:first-child {
  flex: 0 0 auto;
  width: 190px;
  min-width: 190px;
  position: relative;
  z-index: 2;
}
#funRecordsPage .fun-record-browser-heading > div:first-child {
  align-self: start;
  padding: 8px 0 0 12px;
  transform: translateY(-6px);
}
#funRecordsPage .fun-record-browser-heading > div:first-child h3 {
  margin: 5px 0 9px;
}
.fun-record-recent-copy > p {
  margin: 0;
  color: #b8d4ea;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}
html.is-parent .fun-record-recent-copy > p { color: #5b7594; }
#funRecordsPage .fun-record-browser-heading > div:first-child .fun-records-kicker {
  width: 154px;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .1em;
  white-space: normal;
}
#funRecordsPage .fun-record-browser-heading > .fun-record-filters { position: relative; z-index: 2; }
.fun-record-recent-art {
  align-self: center;
  display: block;
  flex: 1 1 760px;
  width: 100%;
  height: 170px;
  min-width: 440px;
  max-width: 820px;
  margin-inline: 4px;
  padding: 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 1;
  transform: translateX(-28px) scale(1.18);
  transform-origin: center center;
  filter: drop-shadow(0 10px 16px rgba(47, 126, 232, .22));
}
#funRecordsPage .fun-record-save {
  justify-self: center;
  width: min(100%, 320px);
  min-height: 50px;
  border-radius: 13px;
  background: linear-gradient(135deg, #31cceb, #496af1);
}
@media (max-width: 1120px) {
  #funRecordsPage .fun-records-hero { grid-template-columns: minmax(260px, 280px) minmax(0, 1fr) 210px; }
  .fun-records-hero-visuals { height: 190px; margin-inline: -30px -8px; }
  .fun-record-recent-art { min-width: 340px; height: 150px; margin-inline: 2px; transform: scale(1.12); }
}
@media (max-width: 900px) {
  #funRecordsPage .fun-records-hero { grid-template-columns: 1fr; }
  .fun-records-hero-visuals { grid-column: 1; height: 185px; margin-inline: -12px 0; }
  #funRecordsPage .fun-records-hero-count { grid-column: 1 / -1; justify-self: end; width: 226px; min-height: 130px; }
  #funRecordsPage .fun-record-browser-heading { align-items: stretch; flex-wrap: wrap; }
  .fun-record-recent-art { order: 3; flex-basis: 100%; max-width: none; min-height: 120px; margin: 8px 0 0; transform: none; }
  #funRecordComposer .fun-record-section-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  #funRecordComposer .fun-record-heading-copy { min-width: 0; }
  #funRecordComposer .fun-record-heading-actions { min-width: 108px; }
  .fun-record-compose-art { grid-column: 1 / -1; width: 100%; max-width: none; height: auto; aspect-ratio: 2126 / 388; margin: 4px auto 0; }
}
@media (max-width: 620px) {
  #funRecordsPage .fun-records-hero { display: grid; grid-template-columns: 1fr; padding: 20px; }
  #funRecordsPage .fun-records-hero-visuals { grid-column: 1; height: auto; margin: 0; }
  #funRecordsPage .fun-records-hero-art { height: auto; min-height: 150px; aspect-ratio: 2800 / 600; }
  #funRecordsPage .fun-records-hero-count { grid-column: 1; justify-self: stretch; width: 100%; }
  #funRecordsPage .fun-record-browser-heading > div:first-child { min-width: 0; }
  .fun-record-recent-art { min-width: 0; height: auto; min-height: 110px; aspect-ratio: 2280 / 528; }
}

/* Figma flight log: telemetry archive header, helper scene and four live summaries. */
@media (min-width: 821px) {
  #recordsPage > .panel::before { display: none; }
}
#recordsPage .records-panel-title {
  display: grid;
  grid-template-columns: minmax(150px, .25fr) minmax(720px, 1.84fr) auto;
  align-items: center;
  min-height: 122px;
  margin-bottom: 12px;
}
#recordsPage .records-panel-title h3 {
  margin: 5px 0 9px;
  font-size: 26px;
}
.records-heading-copy {
  align-self: start;
  padding: 8px 0 0 12px;
  transform: translateY(-6px);
}
.records-heading-copy > span {
  display: block;
  color: #1687ba;
  font: 900 12px/1.25 Inter, sans-serif;
  letter-spacing: .14em;
}
.records-heading-copy > p {
  margin: 0;
  color: #547394;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}
.records-header-art {
  align-self: stretch;
  min-width: 0;
  min-height: 112px;
  background: url('/runtime-images/flight-log-header-integrated-v5.webp?v=1') center / 100% auto no-repeat;
  filter: drop-shadow(0 11px 15px rgba(41, 118, 205, .14));
}
#recordsPage .records-panel-title .segmented {
  justify-self: end;
}
#recordsPage .record-stats {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
  align-items: stretch;
  gap: 16px;
}
#recordsPage .record-range {
  align-content: end;
  padding: 12px;
  border: 1px solid rgba(98, 171, 218, .18);
  border-radius: 16px;
  background: rgba(239, 249, 255, .54);
}
#recordsPage .record-range > label {
  flex: 1 1 170px;
  min-width: 170px;
}
.records-side-art {
  position: relative;
  min-height: 112px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: url('/runtime-images/flight-log-side.png') center / 116% auto no-repeat;
}
.records-side-art::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -17px;
  width: 66px;
  height: 54px;
  background:
    linear-gradient(80deg, transparent 0 6%, rgba(35, 217, 241, .58) 7% 9%, transparent 10% 14%, rgba(49, 230, 245, .82) 15% 17%, transparent 18% 22%, rgba(33, 199, 232, .52) 23% 25%, transparent 26%) 0 50% / 28px 76% no-repeat,
    linear-gradient(84deg, transparent 0 9%, rgba(43, 226, 244, .7) 10% 13%, transparent 14% 19%, rgba(20, 186, 229, .5) 20% 23%, transparent 24%) 8px 50% / 34px 54% no-repeat,
    linear-gradient(90deg, rgba(45, 213, 239, .3), rgba(42, 223, 243, .65) 58%, rgba(70, 235, 250, .35)) 0 50% / 100% 1px no-repeat,
    radial-gradient(ellipse at 98% 50%, rgba(73, 233, 255, .55), transparent 64%);
  clip-path: polygon(0 49%, 7% 40%, 13% 63%, 19% 29%, 25% 72%, 31% 17%, 38% 79%, 45% 35%, 51% 66%, 57% 26%, 64% 73%, 71% 38%, 78% 61%, 85% 42%, 92% 56%, 100% 48%, 100% 52%, 92% 45%, 85% 59%, 78% 39%, 71% 64%, 64% 27%, 57% 76%, 51% 34%, 45% 65%, 38% 21%, 31% 83%, 25% 28%, 19% 71%, 13% 37%, 7% 60%, 0 51%);
  filter: drop-shadow(0 0 4px rgba(50, 218, 255, .52));
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}
#recordsPage .record-summary,
#recordsPage .child-summary {
  grid-column: 1 / -1;
}
#recordsPage .record-summary {
  gap: 12px;
}
html:not(.is-parent) #recordsPage .record-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html.is-parent #recordsPage .record-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#recordsPage .record-summary article,
html.is-parent #recordsPage .record-summary article {
  --record-accent: #2ba9ef;
  --record-accent-rgb: 43, 169, 239;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0;
  min-height: 166px;
  padding: 49px 124px 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--record-accent-rgb), .5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 89% 18%, rgba(var(--record-accent-rgb), .16) 0 2px, transparent 3px),
    linear-gradient(135deg, #f1fbff, #dceeff);
  background-size: 103px 89px, auto;
  box-shadow: 0 14px 28px rgba(36, 82, 132, .1), inset 0 1px rgba(255, 255, 255, .9);
  text-align: left;
}
#recordsPage .record-summary article::after,
html.is-parent #recordsPage .record-summary article::after {
  top: 20px;
  right: auto;
  bottom: auto;
  left: 22px;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--record-accent);
  background: none;
  content: none;
  opacity: .9;
  font: 900 14px/1 Inter,sans-serif;
  letter-spacing: .14em;
}
#recordsPage .record-summary .record-summary-en,
html.is-parent #recordsPage .record-summary .record-summary-en {
  position: relative;
  z-index: 1;
  display: block;
  order: -1;
  margin: 0 0 9px;
  color: var(--record-accent);
  font: 900 16px/1.05 Inter,sans-serif;
  letter-spacing: .14em;
  opacity: .92;
}
#recordsPage .record-summary article::before,
html.is-parent #recordsPage .record-summary article::before {
  top: 20px;
  right: 16px;
  display: block;
  width: 100px;
  height: 100px;
  background-image: var(--record-icon);
  filter: drop-shadow(0 10px 16px rgba(var(--record-accent-rgb), .2));
  transform: none;
}
#recordsPage .record-summary span,
html.is-parent #recordsPage .record-summary span {
  order: 0;
  margin: 0;
  color: #173f62;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.35;
  white-space: normal;
}
#recordsPage .record-summary .record-summary-en + span,
html.is-parent #recordsPage .record-summary .record-summary-en + span {
  margin-top: 0;
}
#recordsPage .record-summary strong,
html.is-parent #recordsPage .record-summary strong {
  margin: 14px 0 0;
  color: var(--record-accent) !important;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}
#recordsPage .record-summary .summary-count {
  --record-accent: #2ba9ef !important;
  --record-accent-rgb: 43, 169, 239 !important;
  --record-icon: url('/runtime-images/flight-stat-completed.png') !important;
}
#recordsPage .record-summary .summary-injected {
  --record-accent: #12b679 !important;
  --record-accent-rgb: 18, 182, 121 !important;
  --record-icon: url('/runtime-images/flight-stat-injected.png') !important;
  background-image:
    radial-gradient(circle at 89% 18%, rgba(var(--record-accent-rgb), .16) 0 2px, transparent 3px),
    linear-gradient(135deg, #effff8, #d8f6e8) !important;
}
#recordsPage .record-summary .summary-consumed {
  --record-accent: #ef6f28 !important;
  --record-accent-rgb: 239, 111, 40 !important;
  --record-icon: url('/runtime-images/flight-stat-consumed.png') !important;
  background-image:
    radial-gradient(circle at 89% 18%, rgba(var(--record-accent-rgb), .16) 0 2px, transparent 3px),
    linear-gradient(135deg, #fff9ef, #ffe8cf) !important;
}
#recordsPage .record-summary .summary-balance {
  --record-accent: #b77708 !important;
  --record-accent-rgb: 183, 119, 8 !important;
  --record-icon: url('/runtime-images/flight-stat-balance.png') !important;
  background-image:
    radial-gradient(circle at 89% 18%, rgba(var(--record-accent-rgb), .15) 0 2px, transparent 3px),
    linear-gradient(135deg, #fffef1, #ffefba) !important;
}
@media (max-width: 1080px) {
  #recordsPage .records-panel-title { grid-template-columns: 150px 140px minmax(300px, 1fr) 140px auto; }
  #recordsPage .record-stats { grid-template-columns: 1fr 280px; }
  #recordsPage .record-summary article,
  html.is-parent #recordsPage .record-summary article { padding-right: 102px; }
  #recordsPage .record-summary article::before,
  html.is-parent #recordsPage .record-summary article::before { width: 82px; height: 82px; }
}
@media (max-width: 820px) {
  #recordsPage .records-panel-title { display: flex; align-items: stretch; flex-direction: column; min-height: 0; }
  .records-header-art { width: 100%; min-height: 90px; }
  #recordsPage .records-panel-title .segmented { align-self: flex-end; }
  #recordsPage .record-stats { grid-template-columns: 1fr; }
  .records-side-art { min-height: 104px; }
  .records-side-art::before { display: none; }
  #recordsPage .record-summary,
  html:not(.is-parent) #recordsPage .record-summary,
  html.is-parent #recordsPage .record-summary { grid-template-columns: repeat(2, minmax(210px, 1fr)); overflow: visible; }
}
@media (max-width: 520px) {
  #recordsPage .record-summary,
  html:not(.is-parent) #recordsPage .record-summary,
  html.is-parent #recordsPage .record-summary { display: grid; grid-template-columns: 1fr; }
  #recordsPage .record-summary article,
  html.is-parent #recordsPage .record-summary article { min-width: 0; }
}

/* Complete seven-item navigation: large readable equipment icons without crowding labels. */
@media (min-width: 1181px) {
  .sidebar {
    min-height: 124px;
    padding-block: 9px;
  }
  .nav-list {
    align-self: stretch;
    gap: 24px;
  }
  html:not(.is-parent) .nav-list {
    gap: 38px;
  }
  .nav-item {
    align-self: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 8px !important;
    min-width: 104px !important;
    min-height: 104px;
    padding: 4px 8px !important;
    font-size: 15px !important;
    line-height: 1.15;
    text-align: center;
  }
  .nav-item::before,
  html.is-parent .nav-item::before,
  .nav-item:is([data-page="overview"], [data-page="growthTasks"], [data-page="funRecords"], [data-page="records"], [data-page="rewards"], [data-page="manage"], [data-page="prizeSettings"])::before {
    width: 68px !important;
    height: 68px !important;
  }
  .content { min-height: calc(100vh - 124px); }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .nav-item:is([data-page="overview"], [data-page="growthTasks"], [data-page="funRecords"], [data-page="records"], [data-page="rewards"], [data-page="manage"], [data-page="prizeSettings"])::before {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 820px) {
  .nav-item:is([data-page="overview"], [data-page="growthTasks"], [data-page="funRecords"], [data-page="records"], [data-page="rewards"], [data-page="manage"], [data-page="prizeSettings"])::before {
    width: 44px;
    height: 44px;
  }
}

/* Keep the parent recent-record Figma layout authoritative over legacy layers above. */
html.is-parent #funRecordsPage .fun-record-browser {
  width: 100%;
  padding: 24px;
  overflow: hidden;
  border-color: #b8d1ef;
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 16%, rgba(53, 215, 255, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 74%, rgba(136, 108, 255, .12) 0 1.5px, transparent 3px),
    linear-gradient(145deg, #f4fbff 0%, #edf4ff 58%, #f7efff 100%);
  box-shadow: 0 18px 44px rgba(50, 91, 148, .1);
}

html.is-parent #funRecordsPage .fun-record-recent-art {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 148px;
  margin: 0;
  transform: none;
}

@media (max-width: 620px) {
  html.is-parent #funRecordsPage .fun-record-browser { padding: 14px; }
  html.is-parent #funRecordsPage .fun-record-recent-art {
    height: auto;
    min-height: 104px;
  }
}

/* Final galaxy visibility: keep stars visible over legacy panel backgrounds. */
html.is-parent #funRecordsPage .fun-record-browser,
html:not(.is-parent) #funRecordsPage .fun-record-browser,
#growthTasksPage .growth-route-schedule,
#growthTasksPage .growth-route-launch {
  background:
    radial-gradient(circle at 7% 11%, rgba(255,255,255,.95) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 15% 69%, rgba(64,225,255,.9) 0 1.6px, transparent 3px),
    radial-gradient(circle at 24% 24%, rgba(255,215,101,.78) 0 1.3px, transparent 2.7px),
    radial-gradient(circle at 32% 82%, rgba(255,255,255,.82) 0 1px, transparent 2.3px),
    radial-gradient(circle at 42% 17%, rgba(140,112,255,.85) 0 1.7px, transparent 3.2px),
    radial-gradient(circle at 53% 70%, rgba(72,220,255,.88) 0 1.5px, transparent 3px),
    radial-gradient(circle at 64% 30%, rgba(255,255,255,.92) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 75% 81%, rgba(255,207,82,.72) 0 1.5px, transparent 3px),
    radial-gradient(circle at 85% 19%, rgba(76,221,255,.88) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 94% 59%, rgba(163,122,255,.84) 0 1.6px, transparent 3px),
    radial-gradient(ellipse 110% 22% at 52% 58%, rgba(92,147,255,.2), transparent 56%),
    linear-gradient(176deg, transparent 0 47%, rgba(88,144,255,.12) 53%, rgba(141,105,255,.13) 59%, transparent 69%),
    linear-gradient(138deg,#08244e,#19396b 57%,#282762) !important;
}

#funRecordsPage .fun-record-card {
  background:
    radial-gradient(circle at 4% 16%, rgba(72,225,255,.75) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 18% 74%, rgba(255,255,255,.78) 0 1px, transparent 2.2px),
    radial-gradient(circle at 31% 27%, rgba(255,210,86,.62) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 47% 84%, rgba(139,111,255,.72) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 63% 18%, rgba(255,255,255,.82) 0 1px, transparent 2.3px),
    radial-gradient(circle at 79% 71%, rgba(67,218,255,.75) 0 1.4px, transparent 2.7px),
    radial-gradient(circle at 94% 32%, rgba(255,204,80,.58) 0 1.2px, transparent 2.5px),
    radial-gradient(ellipse 95% 24% at 53% 60%, rgba(85,143,255,.15), transparent 58%),
    linear-gradient(138deg,#193862,#283f6d 58%,#2d3567) !important;
}

/* Custom calendar for memory recall. */
#funRecordsPage .fun-record-date-filter-control { position: relative; }
#funRecordsPage #funRecordDateFilter { pointer-events: none; }
#funRecordsPage .fun-record-calendar {
  position: absolute; z-index: 30; top: calc(100% + 12px); right: 0; width: 336px; padding: 16px;
  color: #eefdff; border: 1px solid rgba(78,224,255,.72); border-radius: 18px;
  background: linear-gradient(145deg,rgba(8,38,82,.98),rgba(32,39,103,.98));
  box-shadow: 0 22px 45px rgba(3,15,50,.48), inset 0 1px rgba(255,255,255,.12);
}
#funRecordsPage .fun-record-calendar[hidden] { display: none; }
#funRecordsPage .fun-record-calendar header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; }
#funRecordsPage .fun-record-calendar header strong { color: #fff; font-size: 18px; text-align: center; }
#funRecordsPage .fun-record-calendar header button { width: 42px; height: 38px; padding: 0; color: #70efff; border: 1px solid rgba(79,219,248,.38); border-radius: 10px; background: rgba(23,92,152,.48); font-size: 28px; line-height: 1; cursor: pointer; }
#funRecordsPage .fun-record-calendar-weekdays,
#funRecordsPage .fun-record-calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
#funRecordsPage .fun-record-calendar-weekdays { margin: 14px 0 7px; color: #86cce8; font-size: 12px; font-weight: 850; text-align: center; }
#funRecordsPage .fun-record-calendar-grid > * { min-height: 36px; }
#funRecordsPage .fun-record-calendar-grid .is-empty { display: block; }
#funRecordsPage .fun-record-calendar-grid button { position: relative; display: grid; place-items: center; padding: 0; color: #eafcff; border: 1px solid transparent; border-radius: 10px; background: rgba(17,64,116,.42); font-size: 14px; font-weight: 850; cursor: pointer; }
#funRecordsPage .fun-record-calendar-grid button:hover { border-color: #58dff7; background: rgba(29,113,174,.72); }
#funRecordsPage .fun-record-calendar-grid button.is-today { border-color: rgba(255,213,95,.82); }
#funRecordsPage .fun-record-calendar-grid button.is-selected { color: #071c42; border-color: #7ff5ff; background: linear-gradient(135deg,#5cecff,#89a4ff); }
#funRecordsPage .fun-record-calendar-grid button i { position: absolute; right: 3px; bottom: 2px; min-width: 13px; height: 13px; padding: 0 3px; color: #09234c; border-radius: 8px; background: #ffd76a; font-size: 9px; font-style: normal; line-height: 13px; }
#funRecordsPage .fun-record-calendar > p { margin: 11px 0 0; color: #8bd8ed; font-size: 12px; text-align: center; }

/* Put the compose-date icon directly next to its date text. */
#funRecordsPage #funRecordDate { align-self: flex-start; width: 218px; max-width: 100%; padding-right: 12px; }
#funRecordsPage #funRecordDate::-webkit-calendar-picker-indicator { margin-left: 12px; cursor: pointer; opacity: 1; }

/* Lift the compose heading and add two readable supporting lines. */
#funRecordsPage .fun-record-heading-copy { align-self: start; transform: translateY(-8px); }
#funRecordsPage .fun-record-compose-copy { display: grid; gap: 3px; margin-top: 12px; }
#funRecordsPage .fun-record-compose-copy p { margin: 0; color: #a9d9f0; font-size: 15px; font-weight: 750; line-height: 1.45; white-space: nowrap; }

/* Compose form labels and field copy need to remain readable on the dark panel. */
#funRecordsPage .fun-record-form label,
#funRecordsPage .fun-record-form label > span {
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.35;
}
#funRecordsPage .fun-record-form input,
#funRecordsPage .fun-record-form select,
#funRecordsPage .fun-record-form textarea {
  font-size: 17px;
  font-weight: 700;
}
#funRecordsPage .fun-record-form input::placeholder,
#funRecordsPage .fun-record-form textarea::placeholder { font-size: 17px; }

@media (max-width: 620px) {
  #funRecordsPage .fun-record-calendar { right: auto; left: 0; width: min(336px,calc(100vw - 48px)); }
  #funRecordsPage .fun-record-compose-copy p { white-space: normal; }
}

/* Keep the calendar above the record list and allow it to leave the heading row. */
html.is-parent #funRecordsPage .fun-record-browser,
html:not(.is-parent) #funRecordsPage .fun-record-browser {
  overflow: visible;
}
#funRecordsPage .fun-record-browser-heading {
  position: relative;
  z-index: 20 !important;
  overflow: visible;
}
#funRecordsPage .fun-record-filters,
#funRecordsPage .fun-record-date-filter-control {
  position: relative;
  z-index: 21;
  overflow: visible;
}
#funRecordsPage .fun-record-calendar { z-index: 100; }
#funRecordsPage .fun-record-list { position: relative; z-index: 1 !important; }

/* Task schedule uses the same galaxy calendar language as memory recall. */
#growthTasksPage .growth-route-schedule,
#growthTasksPage .growth-route-section-heading,
#growthTasksPage .growth-route-heading-tools { overflow: visible; }
#growthTasksPage .growth-route-section-heading { position: relative; z-index: 20; }
#growthTasksPage .growth-route-heading-tools { position: relative; z-index: 21; }
#growthTasksPage .growth-task-calendar {
  position: absolute; z-index: 100; top: calc(100% + 12px); right: 0; width: 336px; padding: 16px;
  color: #eefdff; border: 1px solid rgba(78,224,255,.72); border-radius: 18px;
  background: linear-gradient(145deg,rgba(8,38,82,.98),rgba(32,39,103,.98));
  box-shadow: 0 22px 45px rgba(3,15,50,.48), inset 0 1px rgba(255,255,255,.12);
}
#growthTasksPage .growth-task-calendar[hidden] { display: none; }
#growthTasksPage .growth-task-calendar header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; }
#growthTasksPage .growth-task-calendar header strong { color: #fff; font-size: 18px; text-align: center; }
#growthTasksPage .growth-task-calendar header button { width: 42px; height: 38px; padding: 0; color: #70efff; border: 1px solid rgba(79,219,248,.38); border-radius: 10px; background: rgba(23,92,152,.48); font-size: 28px; line-height: 1; cursor: pointer; }
#growthTasksPage .growth-task-calendar-weekdays,
#growthTasksPage .growth-task-calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
#growthTasksPage .growth-task-calendar-weekdays { margin: 14px 0 7px; color: #86cce8; font-size: 12px; font-weight: 850; text-align: center; }
#growthTasksPage .growth-task-calendar-grid > * { min-height: 36px; }
#growthTasksPage .growth-task-calendar-grid .is-empty { display: block; }
#growthTasksPage .growth-task-calendar-grid button { position: relative; display: grid; place-items: center; padding: 0; color: #eafcff; border: 1px solid transparent; border-radius: 10px; background: rgba(17,64,116,.42); font-size: 14px; font-weight: 850; cursor: pointer; }
#growthTasksPage .growth-task-calendar-grid button:hover { border-color: #58dff7; background: rgba(29,113,174,.72); }
#growthTasksPage .growth-task-calendar-grid button.is-today { border-color: rgba(255,213,95,.82); }
#growthTasksPage .growth-task-calendar-grid button.is-selected { color: #071c42; border-color: #7ff5ff; background: linear-gradient(135deg,#5cecff,#89a4ff); }
#growthTasksPage .growth-task-calendar-grid button i { position: absolute; right: 3px; bottom: 2px; min-width: 13px; height: 13px; padding: 0 3px; color: #09234c; border-radius: 8px; background: #ffd76a; font-size: 9px; font-style: normal; line-height: 13px; }
#growthTasksPage .growth-task-calendar > p { margin: 11px 0 0; color: #8bd8ed; font-size: 12px; text-align: center; }
#growthTasksPage .growth-route-date-strip,
#growthTasksPage .growth-task-list { position: relative; z-index: 1 !important; }

@media (max-width: 620px) {
  #growthTasksPage .growth-task-calendar { right: 0; width: min(336px,calc(100vw - 48px)); }
}

/* Final starfield treatment: reuse the overview cards' irregular SVG texture.
   It contains circles, four-point stars, crosses, different radii, brightness
   and cyan/gold/violet colours, rather than a repeated dot pattern. */
#growthTasksPage .growth-route-schedule,
#growthTasksPage .growth-route-launch,
#funRecordsPage .fun-records-hero,
#funRecordsPage .fun-record-compose,
#funRecordsPage .fun-record-browser {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    url('/assets/space-milky-way-band.svg'),
    radial-gradient(ellipse at 16% 26%,rgba(48,201,255,.16),transparent 32%),
    radial-gradient(ellipse at 78% 69%,rgba(151,102,255,.15),transparent 36%),
    linear-gradient(138deg,#08244e,#19396b 57%,#282762) !important;
  background-position: 37% center, 52% 66%, center, center, center !important;
  background-size: auto 100%, 164% 66%, auto, auto, auto !important;
  background-repeat: no-repeat !important;
}

#growthTasksPage .growth-route-schedule::before,
#growthTasksPage .growth-route-launch::before,
#funRecordsPage .fun-records-hero::before,
#funRecordsPage .fun-record-compose::before,
#funRecordsPage .fun-record-browser::before {
  background-image: url('/assets/dashboard-starfield.svg') !important;
  background-position: 82% 47% !important;
  background-size: auto 142% !important;
  background-repeat: no-repeat !important;
  opacity: .86 !important;
}

#growthTasksPage .growth-route-schedule::after,
#growthTasksPage .growth-route-launch::after,
#funRecordsPage .fun-records-hero::after,
#funRecordsPage .fun-record-compose::after,
#funRecordsPage .fun-record-browser::after {
  background:
    radial-gradient(circle at 9% 84%,rgba(66,223,255,.82) 0 2px,transparent 4.5px),
    radial-gradient(circle at 26% 15%,rgba(255,218,104,.78) 0 1.6px,transparent 3.8px),
    radial-gradient(circle at 46% 78%,rgba(164,116,255,.8) 0 2.2px,transparent 4.8px),
    radial-gradient(circle at 71% 12%,rgba(255,255,255,.9) 0 1.4px,transparent 3.5px),
    radial-gradient(circle at 91% 72%,rgba(70,224,255,.76) 0 1.9px,transparent 4.2px) !important;
  opacity: .9 !important;
}

#funRecordsPage .fun-record-card,
#growthTasksPage .growth-route-event {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    url('/assets/space-milky-way-band.svg'),
    linear-gradient(138deg,#153863,#253f70 58%,#30336c) !important;
  background-position: 22% center, 62% 70%, center !important;
  background-size: auto 138%, 190% 74%, auto !important;
  background-repeat: no-repeat !important;
}

/* Exploration timeline is taller than the other cards; reduce only its
   star-layer scale so the four-point highlights remain natural. */
#growthTasksPage .growth-route-schedule {
  background-position: 18% 98%, 52% 82%, center, center, center !important;
  background-size: auto 64%, 170% 72%, auto, auto, auto !important;
}
#growthTasksPage .growth-route-schedule::before {
  background-size: auto 72% !important;
  background-position: 78% 100% !important;
  opacity: .96 !important;
}
#growthTasksPage .growth-route-schedule::after {
  background:
    radial-gradient(circle at 3% 74%,rgba(63,222,255,.9) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 11% 91%,rgba(255,255,255,.82) 0 .8px,transparent 2px),
    radial-gradient(circle at 19% 66%,rgba(255,214,93,.78) 0 1px,transparent 2.3px),
    radial-gradient(circle at 28% 87%,rgba(152,111,255,.86) 0 1.3px,transparent 2.8px),
    radial-gradient(circle at 37% 72%,rgba(255,255,255,.9) 0 .9px,transparent 2.1px),
    radial-gradient(circle at 46% 94%,rgba(68,225,255,.82) 0 1.2px,transparent 2.6px),
    radial-gradient(circle at 57% 63%,rgba(255,207,81,.72) 0 .9px,transparent 2.2px),
    radial-gradient(circle at 66% 84%,rgba(255,255,255,.88) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 76% 71%,rgba(145,110,255,.82) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 86% 92%,rgba(66,221,255,.88) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 96% 67%,rgba(255,226,123,.76) 0 1px,transparent 2.3px),
    linear-gradient(176deg,transparent 0 57%,rgba(74,145,255,.08) 66%,rgba(132,104,255,.11) 76%,transparent 94%) !important;
  transform: none;
  opacity: .96 !important;
}

/* Move the richer mixed starfield into the lower half of both fun-record boards. */
#funRecordsPage .fun-record-browser,
#funRecordsPage .fun-record-compose {
  background-position: 18% 97%, 52% 84%, center, center, center !important;
  background-size: auto 66%, 172% 72%, auto, auto, auto !important;
}
#funRecordsPage .fun-record-browser::before,
#funRecordsPage .fun-record-compose::before {
  background-position: 76% 100% !important;
  background-size: auto 76% !important;
  opacity: .92 !important;
}
#funRecordsPage .fun-record-browser::after,
#funRecordsPage .fun-record-compose::after {
  background:
    radial-gradient(circle at 4% 76%,rgba(63,222,255,.9) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 13% 92%,rgba(255,255,255,.84) 0 .9px,transparent 2.1px),
    radial-gradient(circle at 22% 67%,rgba(255,214,93,.8) 0 1px,transparent 2.3px),
    radial-gradient(circle at 31% 86%,rgba(152,111,255,.88) 0 1.3px,transparent 2.8px),
    radial-gradient(circle at 41% 73%,rgba(255,255,255,.92) 0 .9px,transparent 2.1px),
    radial-gradient(circle at 51% 94%,rgba(68,225,255,.84) 0 1.2px,transparent 2.6px),
    radial-gradient(circle at 61% 64%,rgba(255,207,81,.74) 0 .9px,transparent 2.2px),
    radial-gradient(circle at 70% 85%,rgba(255,255,255,.9) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 79% 72%,rgba(145,110,255,.84) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 88% 92%,rgba(66,221,255,.9) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 96% 68%,rgba(255,226,123,.78) 0 1px,transparent 2.3px),
    linear-gradient(176deg,transparent 0 55%,rgba(74,145,255,.09) 66%,rgba(132,104,255,.12) 77%,transparent 94%) !important;
  opacity: .96 !important;
}

/* Compose form is a tall surface: keep its lower stars visible but smaller
   than those on compact cards, avoiding oversized artificial highlights. */
#funRecordsPage .fun-record-compose {
  background-position: 12% 99%, 52% 86%, center, center, center !important;
  background-size: auto 52%, 178% 68%, auto, auto, auto !important;
}
#funRecordsPage .fun-record-compose::before {
  background-position: 82% 100% !important;
  background-size: auto 58% !important;
  opacity: .88 !important;
}

/* The timeline's header artwork and date strip cover the panel background.
   Give the date-strip area its own irregular starfield so this visible bottom
   region keeps the same galaxy language. */
#growthTasksPage .growth-route-date-strip {
  padding: 8px 0 10px;
  border-radius: 16px;
  background-image:
    url('/assets/dashboard-starfield.svg'),
    linear-gradient(90deg,rgba(7,31,74,.18),rgba(37,48,111,.18)) !important;
  background-position: 41% 82%, center !important;
  background-size: auto 245%, auto !important;
  background-repeat: no-repeat !important;
}
#growthTasksPage .growth-route-date-strip::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 6% 72%,rgba(69,224,255,.86) 0 1px,transparent 2.2px),
    radial-gradient(circle at 17% 31%,rgba(255,255,255,.78) 0 .8px,transparent 1.9px),
    radial-gradient(circle at 29% 84%,rgba(255,214,91,.74) 0 1px,transparent 2.2px),
    radial-gradient(circle at 44% 22%,rgba(151,111,255,.82) 0 1.2px,transparent 2.6px),
    radial-gradient(circle at 58% 76%,rgba(255,255,255,.82) 0 .9px,transparent 2px),
    radial-gradient(circle at 71% 32%,rgba(68,223,255,.8) 0 1.1px,transparent 2.4px),
    radial-gradient(circle at 84% 86%,rgba(255,211,89,.72) 0 1px,transparent 2.2px),
    radial-gradient(circle at 96% 25%,rgba(145,109,255,.78) 0 1.1px,transparent 2.4px);
  content: "";
  pointer-events: none;
}

/* Every task row samples a different region and scale of the star map.
   This prevents the repeated wallpaper effect while preserving one visual system. */
#growthTasksPage .growth-route-event:nth-child(6n + 1) {
  background-position: 3% 18%, 19% 66%, center !important;
  background-size: auto 154%, 212% 70%, auto !important;
}
#growthTasksPage .growth-route-event:nth-child(6n + 2) {
  background-position: 81% 74%, 76% 32%, center !important;
  background-size: auto 121%, 184% 86%, auto !important;
}
#growthTasksPage .growth-route-event:nth-child(6n + 3) {
  background-position: 39% 6%, 43% 88%, center !important;
  background-size: auto 178%, 236% 58%, auto !important;
}
#growthTasksPage .growth-route-event:nth-child(6n + 4) {
  background-position: 96% 46%, 8% 42%, center !important;
  background-size: auto 137%, 198% 78%, auto !important;
}
#growthTasksPage .growth-route-event:nth-child(6n + 5) {
  background-position: 22% 92%, 89% 71%, center !important;
  background-size: auto 164%, 224% 63%, auto !important;
}
#growthTasksPage .growth-route-event:nth-child(6n) {
  background-position: 64% 27%, 57% 18%, center !important;
  background-size: auto 128%, 176% 91%, auto !important;
}

/* Compose panel needs stars in the upper form area too, not only near its
   lower edge. Two differently scaled maps avoid a regular repeated pattern. */
#funRecordsPage .fun-record-compose {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    url('/assets/dashboard-starfield.svg'),
    url('/assets/space-milky-way-band.svg'),
    radial-gradient(ellipse at 17% 24%,rgba(49,201,255,.15),transparent 31%),
    radial-gradient(ellipse at 81% 73%,rgba(151,102,255,.14),transparent 35%),
    linear-gradient(138deg,#08244e,#19396b 57%,#282762) !important;
  background-position: 7% 8%, 87% 94%, 52% 76%, center, center, center !important;
  background-size: auto 72%, auto 54%, 178% 68%, auto, auto, auto !important;
  background-repeat: no-repeat !important;
}
#funRecordsPage .fun-record-compose::before {
  background-position: 55% 34% !important;
  background-size: auto 64% !important;
  opacity: .82 !important;
}
#funRecordsPage .fun-record-compose::after {
  background:
    radial-gradient(circle at 3% 13%,rgba(66,224,255,.86) 0 1px,transparent 2.2px),
    radial-gradient(circle at 12% 43%,rgba(255,255,255,.84) 0 .8px,transparent 1.9px),
    radial-gradient(circle at 21% 79%,rgba(255,214,93,.76) 0 1px,transparent 2.2px),
    radial-gradient(circle at 31% 21%,rgba(151,111,255,.84) 0 1.2px,transparent 2.6px),
    radial-gradient(circle at 42% 62%,rgba(255,255,255,.88) 0 .9px,transparent 2.1px),
    radial-gradient(circle at 53% 10%,rgba(68,225,255,.82) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 64% 86%,rgba(255,207,81,.72) 0 .9px,transparent 2.2px),
    radial-gradient(circle at 75% 39%,rgba(255,255,255,.88) 0 1px,transparent 2.4px),
    radial-gradient(circle at 86% 73%,rgba(145,110,255,.82) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 96% 18%,rgba(66,221,255,.86) 0 1.1px,transparent 2.5px),
    linear-gradient(176deg,transparent 0 43%,rgba(74,145,255,.08) 57%,rgba(132,104,255,.11) 69%,transparent 86%) !important;
  opacity: .95 !important;
}

/* Recent-memory browser: visible mixed-shape stars across the whole board,
   including the header and the lower record area. */
#funRecordsPage .fun-record-browser {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    url('/assets/dashboard-starfield.svg'),
    url('/assets/space-milky-way-band.svg'),
    linear-gradient(138deg,#08244e,#19396b 57%,#282762) !important;
  background-position: 5% 5%, 94% 96%, 54% 74%, center !important;
  background-size: auto 96%, auto 68%, 172% 70%, auto !important;
  background-repeat: no-repeat !important;
}
#funRecordsPage .fun-record-browser::before {
  background-image: url('/assets/dashboard-starfield.svg') !important;
  background-position: 52% 43% !important;
  background-size: auto 88% !important;
  opacity: .94 !important;
}
#funRecordsPage .fun-record-browser::after {
  background:
    radial-gradient(circle at 3% 17%,rgba(66,224,255,.92) 0 1.1px,transparent 2.4px),
    radial-gradient(circle at 9% 48%,rgba(255,255,255,.9) 0 .9px,transparent 2.1px),
    radial-gradient(circle at 16% 83%,rgba(255,214,93,.84) 0 1px,transparent 2.3px),
    radial-gradient(circle at 24% 29%,rgba(151,111,255,.92) 0 1.3px,transparent 2.8px),
    radial-gradient(circle at 33% 69%,rgba(255,255,255,.94) 0 1px,transparent 2.2px),
    radial-gradient(circle at 43% 12%,rgba(68,225,255,.9) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 52% 91%,rgba(255,207,81,.84) 0 1px,transparent 2.3px),
    radial-gradient(circle at 62% 39%,rgba(255,255,255,.94) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 72% 78%,rgba(145,110,255,.9) 0 1.3px,transparent 2.9px),
    radial-gradient(circle at 82% 19%,rgba(66,221,255,.92) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 91% 61%,rgba(255,226,123,.86) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 97% 91%,rgba(255,255,255,.92) 0 .9px,transparent 2.1px),
    linear-gradient(176deg,transparent 0 38%,rgba(74,145,255,.1) 53%,rgba(132,104,255,.13) 65%,transparent 83%) !important;
  opacity: 1 !important;
}

/* The translucent heading surfaces no longer mute the stars behind them. */
html.is-parent #funRecordsPage .fun-record-browser-heading,
#funRecordsPage .fun-record-browser-heading {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    linear-gradient(135deg,rgba(8,35,78,.2),rgba(40,47,106,.12)) !important;
  background-position: 73% 44%, center !important;
  background-size: auto 136%, auto !important;
  background-repeat: no-repeat !important;
}
#funRecordsPage .fun-record-browser-heading::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 2% 16%,rgba(67,224,255,.92) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 8% 78%,rgba(255,255,255,.9) 0 .9px,transparent 2.1px),
    radial-gradient(circle at 16% 39%,rgba(255,214,91,.84) 0 1px,transparent 2.3px),
    radial-gradient(circle at 25% 88%,rgba(151,111,255,.9) 0 1.3px,transparent 2.8px),
    radial-gradient(circle at 35% 18%,rgba(255,255,255,.94) 0 1px,transparent 2.2px),
    radial-gradient(circle at 45% 72%,rgba(68,225,255,.9) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 56% 33%,rgba(255,207,81,.84) 0 1px,transparent 2.3px),
    radial-gradient(circle at 67% 86%,rgba(255,255,255,.94) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 78% 14%,rgba(145,110,255,.9) 0 1.3px,transparent 2.9px),
    radial-gradient(circle at 88% 69%,rgba(66,221,255,.92) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 97% 31%,rgba(255,226,123,.84) 0 1.1px,transparent 2.5px);
  content: "";
  pointer-events: none;
}
#funRecordsPage .fun-record-browser-heading > * { position: relative; z-index: 1; }

/* The timeline heading is a separate child layer, so paint its own clearly
   visible irregular star map instead of relying on the parent background. */
#growthTasksPage .growth-route-section-heading {
  border-radius: 18px;
  background-image:
    url('/assets/dashboard-starfield.svg'),
    radial-gradient(ellipse at 55% 64%,rgba(78,146,255,.13),transparent 55%) !important;
  background-position: 17% 36%, center !important;
  background-size: auto 128%, auto !important;
  background-repeat: no-repeat !important;
}
#growthTasksPage .growth-route-section-heading::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 2% 18%,rgba(68,223,255,.9) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 9% 82%,rgba(255,255,255,.88) 0 .9px,transparent 2.1px),
    radial-gradient(circle at 18% 31%,rgba(255,214,91,.8) 0 1px,transparent 2.3px),
    radial-gradient(circle at 27% 71%,rgba(151,111,255,.88) 0 1.3px,transparent 2.8px),
    radial-gradient(circle at 38% 12%,rgba(255,255,255,.92) 0 1px,transparent 2.2px),
    radial-gradient(circle at 49% 87%,rgba(68,225,255,.86) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 61% 23%,rgba(255,207,81,.8) 0 1px,transparent 2.3px),
    radial-gradient(circle at 73% 74%,rgba(255,255,255,.92) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 84% 17%,rgba(145,110,255,.88) 0 1.3px,transparent 2.9px),
    radial-gradient(circle at 94% 66%,rgba(66,221,255,.9) 0 1.2px,transparent 2.7px);
  content: "";
  pointer-events: none;
}
#growthTasksPage .growth-route-section-heading > * { position: relative; z-index: 1; }

/* Exploration statistics use the same irregular star texture; each card gets
   a different crop and scale so none of the four repeats another. */
#growthTasksPage .growth-stat-card {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    var(--stat-nebula, radial-gradient(circle at 82% 26%,rgba(var(--stat-accent-rgb),.2),transparent 32%)),
    var(--stat-base, linear-gradient(138deg,#061a3d,#0d2f67 58%,#173980)) !important;
  background-repeat: no-repeat !important;
}
#growthTasksPage .growth-stat-tasks {
  background-position: 4% 35%, center, center !important;
  background-size: auto 148%, auto, auto !important;
}
#growthTasksPage .growth-stat-completed {
  --stat-nebula: radial-gradient(circle at 78% 18%,rgba(56,225,176,.22),transparent 32%);
  --stat-base: linear-gradient(138deg,#05233a,#07545c 58%,#087276);
  background-position: 69% 88%, center, center !important;
  background-size: auto 119%, auto, auto !important;
}
#growthTasksPage .growth-stat-energy {
  --stat-nebula: radial-gradient(circle at 84% 24%,rgba(255,199,77,.23),transparent 32%);
  --stat-base: linear-gradient(138deg,#20203f,#733a2b 56%,#bf4f17);
  background-position: 37% 5%, center, center !important;
  background-size: auto 171%, auto, auto !important;
}
#growthTasksPage .growth-stat-rate {
  --stat-nebula: radial-gradient(circle at 80% 20%,rgba(169,138,255,.24),transparent 32%);
  --stat-base: linear-gradient(138deg,#111a50,#2e2778 55%,#4f36b9);
  background-position: 96% 56%, center, center !important;
  background-size: auto 132%, auto, auto !important;
}

/* Explicitly seed the right tool area; it is otherwise visually masked by the
   illustration and button surfaces. */
#growthTasksPage .growth-route-heading-tools {
  border-radius: 18px;
  background:
    radial-gradient(circle at 5% 17%,rgba(69,224,255,.9) 0 1px,transparent 2.3px),
    radial-gradient(circle at 18% 79%,rgba(255,255,255,.86) 0 .8px,transparent 2px),
    radial-gradient(circle at 34% 32%,rgba(255,214,91,.8) 0 1px,transparent 2.3px),
    radial-gradient(circle at 52% 88%,rgba(150,110,255,.86) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 69% 14%,rgba(255,255,255,.9) 0 .9px,transparent 2.1px),
    radial-gradient(circle at 84% 68%,rgba(67,223,255,.86) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 96% 37%,rgba(255,207,81,.78) 0 1px,transparent 2.3px),
    linear-gradient(135deg,rgba(8,42,86,.22),rgba(50,39,104,.18)) !important;
}
#growthTasksPage .growth-route-heading-tools::after {
  position: absolute;
  z-index: 0;
  inset: -14px -12px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 3% 19%,rgba(255,255,255,.96) 0 1px,transparent 2.3px),
    radial-gradient(circle at 11% 71%,rgba(67,224,255,.94) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 21% 38%,rgba(255,214,91,.88) 0 1px,transparent 2.3px),
    radial-gradient(circle at 31% 91%,rgba(151,111,255,.92) 0 1.3px,transparent 2.8px),
    radial-gradient(circle at 43% 12%,rgba(255,255,255,.96) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 54% 77%,rgba(68,225,255,.94) 0 1.2px,transparent 2.7px),
    radial-gradient(circle at 65% 31%,rgba(255,207,81,.88) 0 1px,transparent 2.3px),
    radial-gradient(circle at 75% 88%,rgba(255,255,255,.96) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 85% 18%,rgba(145,110,255,.92) 0 1.3px,transparent 2.9px),
    radial-gradient(circle at 94% 65%,rgba(66,221,255,.94) 0 1.2px,transparent 2.7px),
    radial-gradient(ellipse at 55% 66%,rgba(74,145,255,.13),transparent 64%);
  content: "";
  pointer-events: none;
}
#growthTasksPage .growth-route-heading-tools > * { position: relative; z-index: 1; }

/* Parent dashboard empty state follows the surrounding light-blue console. */
html.is-parent #overviewPage .approval-empty {
  color: #244b73;
  border-color: rgba(91, 163, 205, .34);
  background:
    radial-gradient(circle at 15% 25%,rgba(56,214,227,.11),transparent 34%),
    linear-gradient(135deg,rgba(218,245,249,.8),rgba(221,237,253,.78) 58%,rgba(232,228,252,.72)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.72),0 8px 18px rgba(38,103,152,.08);
}
html.is-parent #overviewPage .approval-empty strong {
  color: #214a73;
  text-shadow: none;
}

/* Parent dashboard summary: restore a visible, non-repeating Milky Way field
   across the energy core and the three statistic cards. */
html.is-parent #overviewPage .overview-grid .score-panel {
  background:
    url('/assets/dashboard-starfield.svg') 8% 16% / auto 156% no-repeat,
    url('/assets/dashboard-starfield.svg') 91% 88% / auto 104% no-repeat,
    radial-gradient(ellipse at 57% 67%,rgba(70,137,255,.18),transparent 54%),
    linear-gradient(118deg,#102653,#1c4380) !important;
}
html.is-parent #overviewPage .overview-grid .stat-card {
  background-image:
    url('/assets/dashboard-starfield.svg'),
    radial-gradient(ellipse at 54% 68%,rgba(70,137,255,.14),transparent 58%),
    linear-gradient(145deg,#173b73 0%,#102e61 58%,#0b244f 100%) !important;
  background-repeat: no-repeat !important;
}
html.is-parent #overviewPage .overview-grid .stat-card-energy {
  background-position: 7% 39%,center,center !important;
  background-size: auto 154%,auto,auto !important;
}
html.is-parent #overviewPage .overview-grid .stat-card-supply {
  background-position: 74% 92%,center,center !important;
  background-size: auto 119%,auto,auto !important;
}
html.is-parent #overviewPage .overview-grid .stat-card-review {
  background-position: 96% 11%,center,center !important;
  background-size: auto 174%,auto,auto !important;
}
html.is-parent #overviewPage .overview-grid .stat-card::after {
  opacity: 1;
  background-image:
    radial-gradient(circle at 8% 18%,rgba(72,229,255,.96) 0 1.2px,transparent 2.6px),
    radial-gradient(circle at 17% 74%,rgba(255,255,255,.94) 0 1px,transparent 2.4px),
    radial-gradient(circle at 31% 37%,rgba(255,214,88,.88) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 46% 86%,rgba(157,113,255,.94) 0 1.4px,transparent 3px),
    radial-gradient(circle at 61% 16%,rgba(255,255,255,.96) 0 1.1px,transparent 2.6px),
    radial-gradient(circle at 73% 69%,rgba(67,224,255,.94) 0 1.3px,transparent 2.8px),
    radial-gradient(circle at 89% 38%,rgba(255,207,81,.9) 0 1.1px,transparent 2.5px),
    radial-gradient(circle at 96% 88%,rgba(255,255,255,.94) 0 .9px,transparent 2.2px);
}
html.is-parent #overviewPage .overview-grid .stat-card:nth-of-type(3)::after {
  transform: scaleX(-1) translateX(-2%);
}
html.is-parent #overviewPage .overview-grid .stat-card:nth-of-type(4)::after {
  transform: rotate(180deg) scale(.94);
}

/* Parent timeline tools: lower both controls and remove the translucent
   container/outer pseudo layer that looked like leftover rectangular ghosts. */
html.is-parent #growthTasksPage .growth-route-heading-tools {
  margin-top: 18px;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
html.is-parent #growthTasksPage .growth-route-heading-tools::before,
html.is-parent #growthTasksPage .growth-route-heading-tools::after {
  display: none !important;
  content: none !important;
}

/* Parent calendar opens directly below the schedule control and stays inside
   the timeline column, above its dates/tasks without covering the launch bay. */
html.is-parent #growthTasksPage .growth-task-calendar {
  position: absolute !important;
  z-index: 1000;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  width: 336px;
  max-height: none;
  overflow: visible;
}
html.is-parent #growthTasksPage .growth-route-section-heading {
  min-height: 176px;
}
html.is-parent #growthTasksPage .growth-route-schedule {
  isolation: isolate;
  overflow: visible !important;
  z-index: 3;
}
html.is-parent #growthTasksPage .growth-route-launch {
  position: relative;
  z-index: 1;
}

/* Parent launch bay sizes itself to its own form content instead of stretching
   to the much taller timeline card beside it. */
html.is-parent #growthTasksPage .growth-route-workspace {
  align-items: start;
}
html.is-parent #growthTasksPage .growth-route-launch {
  align-self: start;
  min-height: 0;
  height: auto;
  padding-bottom: 24px;
}

/* Child timeline layout repair (Figma 244:501).
   A later shared `> * { position: relative }` rule accidentally pulled the
   calendar popover back into the header grid. Opening it then made the whole
   child header 500px tall and squeezed every column. Keep this correction
   child-only so the parent timeline and launch panel remain unchanged. */
html:not(.is-parent) #growthTasksPage .growth-route-section-heading {
  grid-template-columns: minmax(190px, 230px) minmax(420px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 170px;
}

html:not(.is-parent) #growthTasksPage .growth-route-title-with-filter {
  align-self: center;
  min-width: 0;
  height: auto;
}

html:not(.is-parent) #growthTasksPage .growth-timeline-heading-copy {
  transform: none;
}

html:not(.is-parent) #growthTasksPage .growth-timeline-art {
  align-self: center;
  width: 100%;
  min-width: 0;
  max-width: 560px;
  height: 116px;
  aspect-ratio: auto;
}

html:not(.is-parent) #growthTasksPage .growth-route-heading-tools {
  grid-template-columns: repeat(2, 98px);
  align-self: center;
  width: 220px;
  min-height: 98px;
}

html:not(.is-parent) #growthTasksPage .growth-task-calendar {
  position: fixed !important;
  z-index: 1000;
  top: var(--growth-calendar-top, 210px) !important;
  right: auto !important;
  left: var(--growth-calendar-left, auto) !important;
  width: 336px;
  max-height: none;
  overflow: visible;
}

@media (max-width: 1100px) {
  html:not(.is-parent) #growthTasksPage .growth-route-section-heading {
    grid-template-columns: minmax(170px, 205px) minmax(330px, 1fr) auto;
    gap: 14px;
  }

  html:not(.is-parent) #growthTasksPage .growth-timeline-art {
    max-width: 500px;
  }
}

/* Parent recent-memory header: remove the desaturated gray overlay and retain
   the clear navy galaxy surface used across the parent dashboard. */
html.is-parent #funRecordsPage .fun-record-browser-heading {
  color: #ecfbff;
  border-color: rgba(80,219,255,.48);
  background-image:
    url('/assets/dashboard-starfield.svg'),
    radial-gradient(ellipse at 22% 26%,rgba(45,200,255,.17),transparent 34%),
    radial-gradient(ellipse at 78% 72%,rgba(146,101,255,.17),transparent 38%),
    linear-gradient(138deg,#092b58,#173d73 57%,#292a69) !important;
  background-position: 71% 43%, center, center, center !important;
  background-size: auto 142%, auto, auto, auto !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 1px rgba(255,255,255,.1),0 12px 24px rgba(7,31,75,.2);
}
html.is-parent #funRecordsPage .fun-record-browser-heading h3,
html.is-parent #funRecordsPage .fun-record-browser-heading .fun-record-recent-copy > p {
  color: #f1fbff !important;
  text-shadow: 0 2px 6px rgba(0,13,42,.55);
}

/* Parent filters stay on one clean horizontal rail: crew selector, recall and
   show-all. They no longer wrap into a staggered vertical stack. */
html.is-parent #funRecordsPage .fun-record-filters {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 16px;
  width: auto;
  min-width: 380px;
}
html.is-parent #funRecordsPage .fun-record-filters > label.parent-only {
  position: relative;
  display: grid !important;
  place-items: center;
  flex: 0 0 100px;
  width: 100px !important;
  height: 100px;
}
html.is-parent #funRecordsPage .fun-kid-filter-display {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: #f2fdff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,28,69,.46);
  pointer-events: none;
}
html.is-parent #funRecordsPage .fun-kid-filter-display b {
  display: block;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: .12em;
  white-space: nowrap;
}
html.is-parent #funRecordsPage #funRecordKidFilter {
  width: 100px !important;
  height: 100px;
  min-height: 100px;
  padding: 0 7px;
  color: transparent;
  border: 1px solid rgba(58, 221, 255, .72);
  border-radius: 12px;
  background:
    radial-gradient(circle at 24% 18%,rgba(255,255,255,.18),transparent 28%),
    linear-gradient(145deg,#07527f,#096f9a 58%,#165e94);
  box-shadow: 0 10px 20px rgba(5,56,111,.24),inset 0 1px rgba(255,255,255,.16);
  text-align: center;
  text-align-last: center;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.35;
  white-space: normal;
  color-scheme: dark;
}
html.is-parent #funRecordsPage #funRecordKidFilter:hover,
html.is-parent #funRecordsPage #funRecordKidFilter:focus {
  color: transparent;
  border-color: #79f2ff;
  background:
    radial-gradient(circle at 24% 18%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(145deg,#08618f,#0786aa 58%,#285faf);
  box-shadow: 0 0 0 3px rgba(65,222,255,.14),0 12px 24px rgba(5,56,111,.28),inset 0 1px rgba(255,255,255,.2);
}
html.is-parent #funRecordsPage #funRecordKidFilter option {
  color: #eafcff;
  background: #123765;
}
html.is-parent #funRecordsPage .fun-record-filters > .fun-record-date-filter-control,
html.is-parent #funRecordsPage .fun-record-filters > #funRecordToday {
  flex: 0 0 100px;
  width: 100px;
}
html.is-parent #funRecordsPage #funRecordToday {
  min-width: 100px;
  min-height: 100px;
}
html.is-parent #funRecordsPage .fun-record-browser-heading {
  grid-template-columns: minmax(190px,220px) minmax(400px,1fr) auto;
}

/* Parent record-card header: reserve a separate line for the explanatory copy
   so it cannot collide with the English label or the date. */
html.is-parent #funRecordsPage .fun-record-card-top {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 12px 24px;
}
html.is-parent #funRecordsPage .fun-record-card-meta { align-items: flex-start; }
html.is-parent #funRecordsPage .fun-record-card-meta span {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 4px 10px;
  min-width: 0;
  white-space: normal;
}
html.is-parent #funRecordsPage .fun-record-card-meta span small {
  margin-left: 0;
  align-self: center;
}
html.is-parent #funRecordsPage .fun-record-card-description {
  grid-column: 1 / -1;
  display: block;
  margin: 3px 0 0;
  max-width: 650px;
  line-height: 1.45;
  white-space: normal;
}

/* Figma-aligned parent memory card: the identity and date own the first row,
   while the descriptive copy receives a full second row. This prevents the
   three labels from collapsing into one another on the 426px card. */
html.is-parent #funRecordsPage .fun-record-card {
  min-height: 282px;
  gap: 0;
  padding: 20px;
  border-radius: 18px;
  background-image:
    url('/assets/dashboard-starfield.svg'),
    linear-gradient(145deg,#122f59 0%,#27336f 100%) !important;
  background-position: 68% 56%, center !important;
  background-size: auto 120%, auto !important;
  background-repeat: no-repeat !important;
}
html.is-parent #funRecordsPage .fun-record-card-top {
  grid-template-columns: minmax(0,1fr) max-content;
  gap: 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(100,226,255,.2);
}
html.is-parent #funRecordsPage .fun-record-card-meta {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 0 10px;
  min-width: 0;
}
html.is-parent #funRecordsPage .fun-record-card-meta img {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 30px;
  height: 30px;
}
html.is-parent #funRecordsPage .fun-record-card-meta span {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 2px;
  min-width: 0;
  color: #70edff;
  font-size: 16px;
  line-height: 1.2;
}
html.is-parent #funRecordsPage .fun-record-card-meta span b {
  color: inherit;
  font: inherit;
}
html.is-parent #funRecordsPage .fun-record-card-meta span small {
  display: block;
  margin: 0;
  color: #a5efff;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .09em;
}
html.is-parent #funRecordsPage .fun-record-card-description {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 8px 0 0;
  max-width: none;
  color: #c8dff3;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}
html.is-parent #funRecordsPage .fun-record-card time {
  align-self: start;
  padding-top: 4px;
  color: #e9f6ff;
  font-size: 14px;
  line-height: 1.2;
}
html.is-parent #funRecordsPage .fun-record-card h4 {
  margin-top: 13px;
  font-size: 23px;
  line-height: 1.35;
}
html.is-parent #funRecordsPage .fun-record-card > p {
  min-height: 0;
  margin-top: 4px;
  color: #ecf5ff;
  font-size: 17px;
  line-height: 1.55;
}
html.is-parent #funRecordsPage .fun-record-card footer {
  margin-top: auto;
  padding-top: 14px;
}
html.is-parent #funRecordsPage .fun-record-card footer span {
  font-size: 14px;
}

/* Parent memory card alignment: the explanatory sentence continues after the
   English label, while the date sits beside the footer's interstellar memory. */
html.is-parent #funRecordsPage .fun-record-list {
  grid-template-columns: minmax(0, 1fr);
}
html.is-parent #funRecordsPage .fun-record-card-top {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}
html.is-parent #funRecordsPage .fun-record-card-meta span {
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 10px;
}
html.is-parent #funRecordsPage .fun-record-card-description {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  max-width: none;
  white-space: nowrap;
}
html.is-parent #funRecordsPage .fun-record-card-date-top { display: none; }
html.is-parent #funRecordsPage .fun-record-card footer {
  justify-content: flex-start;
  gap: 8px;
}
html.is-parent #funRecordsPage .fun-record-card footer .fun-record-card-date-footer {
  display: inline-flex;
  align-self: center;
  margin-left: 22px;
  padding: 0;
  color: #e9f6ff;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Child memory card follows the same requested information order without
   inheriting the parent card sizing rules. */
html:not(.is-parent) #funRecordsPage .fun-record-card-top {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}
html:not(.is-parent) #funRecordsPage .fun-record-card-description {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  max-width: none;
  white-space: nowrap;
}
html:not(.is-parent) #funRecordsPage .fun-record-card-date-top { display: none; }
html:not(.is-parent) #funRecordsPage .fun-record-card footer {
  justify-content: flex-start;
  gap: 8px;
}
html:not(.is-parent) #funRecordsPage .fun-record-card footer .fun-record-card-date-footer {
  display: inline-flex;
  align-self: center;
  margin-left: 22px;
  padding: 0;
  color: #e9f6ff;
  font-size: 17px;
  line-height: 1.2;
  white-space: nowrap;
}

/* 2026-08-15 UI4: enlarge only the signed-in child cockpit brand block. */
@media (min-width: 1181px) {
  html:not(.is-parent) .sidebar {
    min-height: 156px;
  }
  html:not(.is-parent) .sidebar > .brand {
    gap: 8px;
  }
  html:not(.is-parent) .sidebar .brand-mark {
    width: 112px !important;
    height: 112px !important;
    border-radius: 24px;
  }
  html:not(.is-parent) .sidebar .brand h1 {
    font-size: 36px !important;
    line-height: 1.12;
  }
  html:not(.is-parent) .sidebar .brand-kicker {
    margin-top: 7px;
    font-size: 14px !important;
  }
  html:not(.is-parent) .nav-list {
    gap: 28px;
  }
  html:not(.is-parent) .nav-item {
    font-size: 17px !important;
  }
  html:not(.is-parent) .nav-item::before {
    width: 76px !important;
    height: 76px !important;
  }
  html:not(.is-parent) .content {
    min-height: calc(100vh - 156px);
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  html:not(.is-parent) .sidebar {
    min-height: 116px;
  }
  html:not(.is-parent) .sidebar .brand-mark {
    width: 72px;
    height: 72px;
  }
  html:not(.is-parent) .sidebar .brand h1 {
    font-size: 26px;
  }
  html:not(.is-parent) .sidebar .brand-kicker {
    font-size: 12px;
  }
}

/* Child-only timeline compaction: remove the hidden date input from the grid
   and size the heading row to its visible artwork and controls. */
@media (min-width: 821px) {
  html:not(.is-parent) #growthTasksPage .growth-route-schedule {
    padding-top: 12px;
  }
  html:not(.is-parent) #growthTasksPage .growth-route-section-heading {
    min-height: 116px;
  }
  html:not(.is-parent) #growthTasksPage #growthTaskCalendarInput {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html:not(.is-parent) #growthTasksPage .growth-route-date-strip {
    margin-top: 6px;
  }
}

/* Child-only timeline artwork: use the full centre column and scale with the
   desktop width while preserving the two tools on the right. */
@media (min-width: 1181px) {
  html:not(.is-parent) #growthTasksPage .growth-route-section-heading {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) 220px;
    gap: 14px;
    min-height: clamp(124px, 9vw, 150px);
  }
  html:not(.is-parent) #growthTasksPage .growth-timeline-art {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: clamp(124px, 9vw, 150px);
    background-position: center;
    background-size: contain;
  }
}

/* Parent-only timeline compaction: put the two date tools beside the artwork
   on the lower row, then remove the vertical space they formerly reserved. */
@media (min-width: 821px) {
  html.is-parent #growthTasksPage .growth-route-schedule {
    padding-top: 10px;
  }
  html.is-parent #growthTasksPage .growth-route-section-heading {
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-rows: auto 104px;
    gap: 2px 14px;
    min-height: 0;
  }
  html.is-parent #growthTasksPage .growth-route-title-with-filter {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  html.is-parent #growthTasksPage .growth-route-heading-tools {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin-top: 0;
  }
  html.is-parent #growthTasksPage .growth-timeline-heading-copy {
    transform: none;
  }
  html.is-parent #growthTasksPage .growth-timeline-heading-copy h3 {
    margin: 4px 0 5px;
  }
  html.is-parent #growthTasksPage .growth-timeline-heading-copy > p {
    line-height: 1.4;
  }
  html.is-parent #growthTasksPage .growth-timeline-art {
    grid-column: 1;
    grid-row: 2;
    height: 104px;
  }
  html.is-parent #growthTasksPage .growth-route-date-strip {
    margin-top: 4px;
  }
}