:root {
  --helio-bg: #f7faf8;
  --helio-surface: #ffffff;
  --helio-ink: #17332b;
  --helio-muted: #60736c;
  --helio-line: #d7e3de;
  --helio-accent: #16704e;
  --helio-accent-2: #226ba3;
  --helio-warm: #e8792e;
  --helio-soft: #e0f2e9;
  --helio-focus: #ffbd4a;
  --helio-shadow: 0 16px 42px rgba(17, 53, 42, 0.18);
}

:root[data-learning-theme="ocean"] {
  --helio-bg: #eef8fb; --helio-ink: #133744; --helio-muted: #56717a; --helio-line: #cfe1e7;
  --helio-accent: #087c8c; --helio-accent-2: #245ca8; --helio-warm: #e9793f; --helio-soft: #d8f1f4;
}
:root[data-learning-theme="forest"] {
  --helio-bg: #f3f8f0; --helio-ink: #24392b; --helio-muted: #68756a; --helio-line: #d6e1d1;
  --helio-accent: #327241; --helio-accent-2: #3d6997; --helio-warm: #cf7132; --helio-soft: #e0eedc;
}
:root[data-learning-theme="cosmos"] {
  --helio-bg: #f4f2fa; --helio-ink: #292842; --helio-muted: #69667d; --helio-line: #dcd8ea;
  --helio-accent: #6152a1; --helio-accent-2: #16748b; --helio-warm: #d86949; --helio-soft: #e7e3f5;
}
:root[data-learning-theme="festival"] {
  --helio-bg: #fff7ef; --helio-ink: #3f2e29; --helio-muted: #786963; --helio-line: #ead9cd;
  --helio-accent: #a64270; --helio-accent-2: #247b76; --helio-warm: #d86d20; --helio-soft: #f8dfeb;
}
:root[data-learning-theme="storybook"] {
  --helio-bg: #f7f5ed; --helio-ink: #2f382f; --helio-muted: #697169; --helio-line: #dddccc;
  --helio-accent: #4b7560; --helio-accent-2: #6b5795; --helio-warm: #c46d3b; --helio-soft: #e2ede6;
}
:root[data-learning-theme="sports"] {
  --helio-bg: #f3f7f7; --helio-ink: #1c3438; --helio-muted: #5d7073; --helio-line: #d3e0e1;
  --helio-accent: #08765f; --helio-accent-2: #235fa4; --helio-warm: #dc593e; --helio-soft: #d9efe9;
}
:root[data-learning-theme="maker"] {
  --helio-bg: #f5f6f8; --helio-ink: #293239; --helio-muted: #687179; --helio-line: #d9dfe3;
  --helio-accent: #386a6d; --helio-accent-2: #67549a; --helio-warm: #cf6b34; --helio-soft: #dfecec;
}

:root[data-learning-theme] {
  --paper: var(--helio-bg);
  --ink: var(--helio-ink);
  --muted: var(--helio-muted);
  --line: var(--helio-line);
  --green: var(--helio-accent);
  --green-soft: var(--helio-soft);
  --blue: var(--helio-accent-2);
  --orange: var(--helio-warm);
  --card: var(--helio-surface);
  --card-2: var(--helio-soft);
  --rule: var(--helio-line);
  --rule-2: color-mix(in srgb, var(--helio-muted) 46%, var(--helio-line));
  --signal: var(--helio-warm);
  --signal-2: color-mix(in srgb, var(--helio-warm) 82%, #642e20);
  --ink-2: var(--helio-muted);
  --ink-3: color-mix(in srgb, var(--helio-muted) 82%, var(--helio-ink));
}

:root[data-learning-theme] body { background-color: var(--helio-bg); color: var(--helio-ink); }
:root[data-learning-theme] .topbar,
:root[data-learning-theme] .section-tabs,
:root[data-learning-theme] .g4-learner-bar { background: color-mix(in srgb, var(--helio-surface) 96%, var(--helio-soft)); border-color: var(--helio-line); }
:root[data-learning-theme] .entry-screen { overflow: auto; align-items: start; }
:root[data-learning-theme] .entry-panel { margin-top: auto; margin-bottom: auto; }
:root[data-learning-theme] .entry-panel,
:root[data-learning-theme] .g4-auth-card { background: color-mix(in srgb, var(--helio-ink) 92%, transparent); }
:root[data-learning-theme] #g4LearningLayer { align-items: start; overflow: auto; }
:root[data-learning-theme] #g4LearningLayer .g4-auth-card { margin-top: auto; margin-bottom: auto; }
:root[data-age-band="younger"] .helio-tool-button,
:root[data-age-band="younger"] .helio-primary { min-height: 48px; }

.helio-profile-extras,
.helio-profile-extras * ,
.helio-action-rail,
.helio-action-rail *,
.helio-modal,
.helio-modal *,
.helio-guide-controls,
.helio-guide-controls * { box-sizing: border-box; letter-spacing: 0; }

.helio-profile-extras { display: grid; gap: 13px; margin-top: 8px; }
.helio-profile-extras fieldset { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.helio-profile-extras legend { display: block; width: 100%; margin: 0 0 8px !important; padding: 0; font-size: 0.84rem; font-weight: 850; }
.helio-profile-extras legend small { margin-left: 5px; opacity: 0.7; font-size: 0.72rem; font-weight: 650; }
.helio-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.helio-chip { position: relative; margin: 0 !important; cursor: pointer; }
.helio-chip input,
.helio-theme-choice input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.helio-chip span { display: grid; min-height: 34px; place-items: center; padding: 6px 9px; color: #263934; background: #ffffff; border: 1px solid #cfddd7; border-radius: 17px; font-size: 0.74rem; font-weight: 750; }
.helio-chip input:checked + span { color: #ffffff; background: var(--helio-accent); border-color: var(--helio-accent); }
.helio-chip input:focus-visible + span,
.helio-theme-choice input:focus-visible + span { outline: 3px solid var(--helio-focus); outline-offset: 2px; }

.helio-theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.helio-theme-choice { position: relative; min-width: 0; margin: 0 !important; cursor: pointer; }
.helio-theme-choice span { display: grid; min-height: 54px; place-items: center; gap: 3px; padding: 6px 3px; color: #293834; background: #ffffff; border: 2px solid transparent; border-radius: 6px; font-size: 0.65rem; font-weight: 800; line-height: 1.1; }
.helio-theme-choice i { display: block; width: 28px; height: 14px; background: #16704e; border: 4px solid #f1a73c; border-radius: 7px; }
.helio-theme-choice[data-theme-preview="ocean"] i { background: #087c8c; border-color: #78c6dc; }
.helio-theme-choice[data-theme-preview="forest"] i { background: #327241; border-color: #b2ca7a; }
.helio-theme-choice[data-theme-preview="cosmos"] i { background: #6152a1; border-color: #e29b58; }
.helio-theme-choice[data-theme-preview="festival"] i { background: #a64270; border-color: #f0a23b; }
.helio-theme-choice[data-theme-preview="storybook"] i { background: #4b7560; border-color: #d4a965; }
.helio-theme-choice[data-theme-preview="sports"] i { background: #08765f; border-color: #dc593e; }
.helio-theme-choice[data-theme-preview="maker"] i { background: #386a6d; border-color: #8e75bd; }
.helio-theme-choice input:checked + span { border-color: var(--helio-focus); box-shadow: 0 0 0 1px var(--helio-focus); }

.helio-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.helio-select-grid label,
.helio-consent-box > label { display: grid; gap: 5px; margin: 0 !important; font-size: 0.78rem; font-weight: 800; }
.helio-select-grid select,
.helio-consent-box select { width: 100% !important; height: 42px !important; padding: 0 10px !important; color: #253832 !important; background: #ffffff !important; border: 1px solid #cfddd7 !important; border-radius: 6px !important; font: inherit !important; }
.helio-consent-box { display: grid; gap: 8px; padding: 11px; color: #263934; background: #ffffff; border: 1px solid #cfded7; border-left: 4px solid var(--helio-accent-2); border-radius: 6px; }
.helio-consent-check { display: grid !important; grid-template-columns: 18px 1fr !important; align-items: start; gap: 8px; margin: 0 !important; color: #334842; font-size: 0.72rem !important; font-weight: 650 !important; line-height: 1.4; cursor: pointer; }
.helio-consent-check input { position: static !important; width: 17px !important; height: 17px !important; margin: 1px 0 0 !important; opacity: 1 !important; accent-color: var(--helio-accent); }
.helio-data-note { margin: 0 !important; color: inherit !important; opacity: 0.72; font-size: 0.68rem !important; line-height: 1.4 !important; }

.helio-action-rail { position: fixed; z-index: 9000; right: 14px; top: 50%; display: grid; gap: 7px; transform: translateY(-50%); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.helio-tool-button { display: grid; width: 64px; min-height: 58px; place-items: center; gap: 2px; padding: 6px 4px; color: var(--helio-ink); background: var(--helio-surface); border: 1px solid var(--helio-line); border-radius: 7px; box-shadow: 0 8px 22px rgba(17, 53, 42, 0.13); cursor: pointer; }
.helio-tool-button:hover { color: #ffffff; background: var(--helio-accent); border-color: var(--helio-accent); transform: translateX(-2px); }
.helio-tool-button > span { font-size: 1.3rem; line-height: 1; }
.helio-tool-button b { font-size: 0.64rem; line-height: 1.15; }
.helio-tool-button:focus-visible,
.helio-primary:focus-visible,
.helio-close:focus-visible,
.helio-prompt:focus-visible,
.helio-guide-controls button:focus-visible { outline: 3px solid var(--helio-focus); outline-offset: 2px; }

.helio-modal { position: fixed; z-index: 12000; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--helio-ink); background: rgba(8, 28, 23, 0.75); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.helio-panel { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--helio-surface); border: 1px solid var(--helio-line); border-radius: 8px; box-shadow: var(--helio-shadow); }
.helio-panel > header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 14px 18px; background: var(--helio-surface); border-bottom: 1px solid var(--helio-line); }
.helio-panel > header > div { display: flex; min-width: 0; align-items: center; gap: 10px; }
.helio-panel h2 { margin: 0; color: var(--helio-ink); font-size: 1.45rem; line-height: 1.15; text-transform: none; }
.helio-panel h3 { margin: 0 0 10px; color: var(--helio-ink); font-size: 1rem; text-transform: none; }
.helio-panel-icon { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 38px; background: var(--helio-soft); border-radius: 50%; font-size: 1.25rem; }
.helio-close { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 38px; padding: 0; color: var(--helio-muted); background: transparent; border: 1px solid var(--helio-line); border-radius: 6px; font-size: 1.45rem; cursor: pointer; }
.helio-panel-body { padding: 20px; }
.helio-loading { display: grid; min-height: 280px; place-content: center; justify-items: center; gap: 12px; color: var(--helio-muted); font-weight: 750; }
.helio-loading span { width: 34px; height: 34px; border: 4px solid var(--helio-line); border-top-color: var(--helio-accent); border-radius: 50%; animation: helio-spin 800ms linear infinite; }
@keyframes helio-spin { to { transform: rotate(360deg); } }

.helio-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.helio-metrics > div { display: grid; min-width: 0; gap: 3px; padding: 13px; background: var(--helio-bg); border: 1px solid var(--helio-line); border-radius: 7px; }
.helio-metrics strong { overflow-wrap: anywhere; color: var(--helio-accent); font-size: 1.45rem; }
.helio-metrics span { color: var(--helio-muted); font-size: 0.72rem; font-weight: 750; }
.helio-recommend { display: flex; align-items: flex-start; gap: 11px; margin: 12px 0; padding: 14px; background: var(--helio-soft); border-left: 4px solid var(--helio-accent); border-radius: 6px; }
.helio-recommend > span { font-size: 1.35rem; }
.helio-recommend strong { font-size: 0.8rem; }
.helio-recommend p { margin: 3px 0 0; color: var(--helio-muted); line-height: 1.45; }
.helio-path-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.helio-path-columns > section { min-width: 0; padding: 13px; border: 1px solid var(--helio-line); border-radius: 7px; }
.helio-focus-list, .helio-strength-list { display: flex; flex-wrap: wrap; gap: 6px; }
.helio-topic-pill { display: inline-flex; min-height: 30px; align-items: center; padding: 5px 9px; border-radius: 15px; font-size: 0.73rem; font-weight: 800; }
.helio-topic-pill.focus { color: #793d13; background: #ffead5; }
.helio-topic-pill.strength { color: #15533e; background: #daf0e6; }
.helio-mastery { margin-top: 16px; }
.helio-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.helio-section-head > strong { color: var(--helio-muted); font-size: 0.7rem; }
.helio-mastery-list { display: grid; gap: 8px; }
.helio-mastery-row { display: grid; grid-template-columns: minmax(120px, 1.25fr) minmax(100px, 1fr) 42px; align-items: center; gap: 10px; }
.helio-mastery-row > div:first-child { display: grid; min-width: 0; }
.helio-mastery-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.helio-mastery-row span { color: var(--helio-muted); font-size: 0.65rem; }
.helio-mastery-row > b { color: var(--helio-muted); font-size: 0.72rem; text-align: right; }
.helio-mastery-track { height: 7px; overflow: hidden; background: var(--helio-line); border-radius: 4px; }
.helio-mastery-track i { display: block; height: 100%; background: var(--helio-accent); }
.helio-empty { padding: 24px; color: var(--helio-muted); text-align: center; background: var(--helio-bg); border: 1px dashed var(--helio-line); border-radius: 7px; }
.helio-primary { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 9px 15px; color: #ffffff; background: var(--helio-accent); border: 1px solid var(--helio-accent); border-radius: 6px; font: 850 0.82rem/1.2 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.helio-primary:hover { filter: brightness(0.94); }
.helio-primary:disabled { cursor: wait; opacity: 0.65; }
.helio-build-assessment { width: 100%; margin-top: 18px; }

.helio-coach-modal .helio-panel { width: min(680px, 100%); }
.helio-chat { display: grid; max-height: 42vh; gap: 9px; overflow: auto; padding: 2px 2px 12px; }
.helio-chat-message { display: flex; max-width: 88%; align-items: flex-start; gap: 8px; }
.helio-chat-message > span { display: grid; width: 31px; height: 31px; place-items: center; flex: 0 0 31px; background: var(--helio-soft); border-radius: 50%; }
.helio-chat-message p { margin: 0; padding: 10px 12px; color: var(--helio-ink); background: var(--helio-bg); border: 1px solid var(--helio-line); border-radius: 7px; line-height: 1.5; }
.helio-chat-message.learner { justify-self: end; flex-direction: row-reverse; }
.helio-chat-message.learner p { color: #ffffff; background: var(--helio-accent-2); border-color: var(--helio-accent-2); }
.helio-prompts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 12px; border-top: 1px solid var(--helio-line); }
.helio-prompt { min-height: 34px; padding: 6px 10px; color: var(--helio-accent); background: var(--helio-soft); border: 1px solid var(--helio-line); border-radius: 17px; font: 750 0.72rem/1.2 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.helio-coach-form { display: grid; gap: 7px; }
.helio-coach-form > label { font-size: 0.78rem; font-weight: 850; }
.helio-coach-form textarea { width: 100%; min-height: 82px; resize: vertical; padding: 10px 12px; color: var(--helio-ink); background: var(--helio-surface); border: 1px solid var(--helio-line); border-radius: 6px; font: inherit; line-height: 1.45; }
.helio-coach-form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.helio-coach-form small { max-width: 330px; color: var(--helio-muted); line-height: 1.35; }

.helio-settings-form { display: grid; gap: 13px; }
.helio-settings-form .helio-profile-extras { color: var(--helio-ink); }
.helio-settings-message { min-height: 18px; margin: 0; color: #a63b35; font-size: 0.75rem; }

.mascot-dock.helio-enhanced-guide,
.g4-mascot.helio-enhanced-guide { pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.helio-enhanced-guide:focus-visible { outline: 3px solid var(--helio-focus); outline-offset: 4px; border-radius: 7px; }
.helio-guide-controls { position: absolute; right: 0; bottom: calc(100% + 7px); display: flex; gap: 5px; padding: 6px; background: var(--helio-surface); border: 1px solid var(--helio-line); border-radius: 7px; box-shadow: var(--helio-shadow); opacity: 0; pointer-events: none; transform: translateY(7px); transition: 160ms ease; }
.g4-mascot .helio-guide-controls { right: auto; left: 0; }
.helio-controls-open .helio-guide-controls { opacity: 1; pointer-events: auto; transform: none; }
.helio-guide-controls button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; background: var(--helio-bg); border: 1px solid var(--helio-line); border-radius: 6px; font-size: 1rem; cursor: pointer; }
.helio-guide-wave img { animation: helio-wave 700ms ease-in-out 2 !important; transform-origin: 50% 90%; }
.helio-guide-dance img { animation: helio-dance 500ms ease-in-out 3 !important; transform-origin: 50% 100%; }
.helio-guide-roam { animation: helio-roam 8s ease-in-out 1 both !important; }
.helio-guide-rest img { animation-play-state: paused !important; filter: saturate(0.72) drop-shadow(0 8px 8px rgba(13, 45, 37, 0.15)) !important; }
@keyframes helio-wave { 0%,100% { transform: rotate(0) translateY(0); } 35% { transform: rotate(-8deg) translateY(-5px); } 70% { transform: rotate(7deg) translateY(-2px); } }
@keyframes helio-dance { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(4deg) scale(1.04); } }
@keyframes helio-roam { 0%,100% { transform: translateX(0); } 35% { transform: translateX(calc(-50vw + 150px)); } 65% { transform: translateX(calc(-75vw + 170px)); } }
.g4-mascot.helio-guide-roam { animation-name: helio-roam-right !important; }
@keyframes helio-roam-right { 0%,100% { transform: translateX(0); } 35% { transform: translateX(calc(50vw - 150px)); } 65% { transform: translateX(calc(75vw - 170px)); } }

.helio-reactions { position: fixed; z-index: 11800; inset: 0; overflow: hidden; pointer-events: none; }
.helio-reactions span { position: absolute; left: var(--helio-x); bottom: 70px; font-size: 2rem; animation: helio-reaction 1.5s ease-out forwards; }
@keyframes helio-reaction { 0% { opacity: 0; transform: translateY(20px) scale(0.45); } 22% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-150px) rotate(12deg) scale(0.9); } }

@media (max-width: 760px) {
  .helio-profile-extras { gap: 10px; }
  .helio-theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .helio-select-grid { grid-template-columns: 1fr; }
  .helio-action-rail { right: 50%; top: auto; bottom: max(8px, env(safe-area-inset-bottom)); grid-auto-flow: column; transform: translateX(50%); }
  .helio-tool-button { width: 72px; min-height: 48px; grid-template-columns: 20px 1fr; gap: 5px; padding: 5px 7px; }
  .helio-tool-button > span { font-size: 1rem; }
  .helio-tool-button b { text-align: left; }
  .helio-panel { max-height: calc(100vh - 20px); }
  .helio-panel-body { padding: 15px; }
  .helio-metrics { grid-template-columns: 1fr 1fr; }
  .helio-path-columns { grid-template-columns: 1fr; }
  .helio-mastery-row { grid-template-columns: minmax(110px, 1fr) 78px 38px; gap: 7px; }
  .helio-coach-form > div { align-items: stretch; flex-direction: column; }
  .helio-chat-message { max-width: 96%; }
  .helio-enhanced-guide { bottom: 66px !important; }
  .helio-guide-controls { right: 0; bottom: calc(100% + 4px); display: grid; grid-template-columns: 36px 36px; }
  .g4-mascot .helio-guide-controls { right: auto; left: 0; }
  @keyframes helio-roam { 0%,100% { transform: translateX(0); } 50% { transform: translateX(calc(-70vw + 80px)); } }
  @keyframes helio-roam-right { 0%,100% { transform: translateX(0); } 50% { transform: translateX(calc(70vw - 80px)); } }
}

@media (max-width: 420px) {
  .helio-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .helio-chip span { font-size: 0.7rem; }
  .helio-modal { padding: 8px; }
  .helio-panel > header { min-height: 62px; padding: 11px 13px; }
  .helio-panel h2 { font-size: 1.2rem; }
  .helio-action-rail { width: calc(100% - 118px); justify-content: center; }
  .helio-tool-button { width: 64px; grid-template-columns: 1fr; }
  .helio-tool-button b { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .helio-loading span,
  .helio-reactions span,
  .helio-enhanced-guide,
  .helio-enhanced-guide img { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

:root[data-animation="gentle"] .helio-enhanced-guide img { animation-duration: 6s !important; }
:root[data-animation="off"] .helio-enhanced-guide,
:root[data-animation="off"] .helio-enhanced-guide img,
:root[data-animation="off"] .helio-reactions span { animation: none !important; }

/* Family accounts */
.helio-family-entry { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 3px 10px; width: 100%; min-height: 58px; margin-top: 9px; padding: 9px 13px; color: var(--helio-ink); background: var(--helio-soft); border: 1px solid var(--helio-line); border-radius: 7px; text-decoration: none; }
.helio-family-entry:hover { border-color: var(--helio-accent); }
.helio-family-entry > span { grid-row: 1 / 3; font-size: 1.45rem; }
.helio-family-entry strong { align-self: end; font-size: 0.82rem; }
.helio-family-entry small { align-self: start; color: var(--helio-muted); font-size: 0.68rem; }
.helio-family-modal .helio-panel { width: min(820px, 100%); }
.helio-family-modal h3 { margin-top: 4px; }
.helio-invite-form { display: grid; grid-template-columns: minmax(170px, 1fr) auto; align-items: end; gap: 10px; }
.helio-invite-form label,
.helio-parent-profile label,
.helio-report-form label { display: grid; gap: 6px; color: var(--helio-ink); font-size: 0.76rem; font-weight: 800; }
.helio-invite-form select,
.helio-parent-profile input,
.helio-parent-profile select,
.helio-parent-profile textarea,
.helio-report-form input,
.helio-report-form select,
.helio-report-form textarea { width: 100%; min-height: 42px; padding: 8px 10px; color: var(--helio-ink); background: var(--helio-surface); border: 1px solid var(--helio-line); border-radius: 6px; font: inherit; }
.helio-invite-result { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin: 13px 0; padding: 13px; background: var(--helio-soft); border-left: 4px solid var(--helio-accent); }
.helio-invite-result > span,
.helio-invite-result > small { grid-column: 1 / -1; color: var(--helio-muted); font-size: 0.7rem; }
.helio-invite-result strong { font-size: 1.3rem; letter-spacing: 0; }
.helio-family-list { display: grid; gap: 7px; margin: 8px 0 18px; }
.helio-family-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--helio-line); }
.helio-family-row > div { display: grid; gap: 2px; min-width: 0; }
.helio-family-row span,
.helio-family-row small { color: var(--helio-muted); font-size: 0.7rem; overflow-wrap: anywhere; }
.helio-secondary,
.helio-danger { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 7px 11px; color: var(--helio-ink); background: var(--helio-surface); border: 1px solid var(--helio-line); border-radius: 6px; font: 800 0.74rem/1.2 Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.helio-secondary:hover { border-color: var(--helio-accent); color: var(--helio-accent); }
.helio-danger { color: #9b2f2f; border-color: #e7b7b4; }
.helio-danger:hover { background: #fff0ef; }
.helio-family-note { margin: 14px 0 0; padding: 11px 13px; color: var(--helio-muted); background: var(--helio-bg); border-left: 3px solid var(--helio-accent-2); font-size: 0.72rem; line-height: 1.5; }
.helio-google-family-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 13px; background: var(--helio-soft); border-left: 4px solid var(--helio-accent); }
.helio-google-family-note[hidden] { display: none; }
.helio-google-family-note p { margin: 0; color: var(--helio-muted); font-size: 0.76rem; }

:root[data-account-type="family"] body > :not(.helio-family-app):not(.helio-modal) { display: none !important; }
:root[data-account-type="family"] body { margin: 0; background: #f5f7f6; }
.helio-family-app,
.helio-family-app * { box-sizing: border-box; }
.helio-family-app { min-height: 100vh; color: #18352c; background: #f5f7f6; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.helio-family-header { position: sticky; z-index: 20; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; padding: 9px clamp(16px, 4vw, 56px); background: #ffffff; border-bottom: 1px solid #dce5e1; }
.helio-family-brand { display: flex; align-items: center; gap: 10px; color: #18352c; text-decoration: none; }
.helio-family-brand > span { display: grid; width: 38px; height: 38px; place-items: center; color: #ffffff; background: #176c53; border-radius: 7px; font-weight: 900; }
.helio-family-brand > div,
.helio-family-account > div { display: grid; gap: 1px; }
.helio-family-brand strong { font-size: 0.92rem; }
.helio-family-brand small,
.helio-family-account small { color: #687d75; font-size: 0.68rem; }
.helio-family-account { display: flex; align-items: center; gap: 12px; text-align: right; }
.helio-family-account strong { font-size: 0.78rem; }
.helio-family-shell { display: grid; grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); min-height: calc(100vh - 68px); }
.helio-family-sidebar { padding: 24px 18px; background: #eef3f1; border-right: 1px solid #dce5e1; }
.helio-kicker { margin: 0 0 6px; color: #176c53; font-size: 0.67rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.helio-family-students { display: grid; gap: 6px; }
.helio-student-choice { display: grid; grid-template-columns: 38px 1fr 16px; min-width: 0; align-items: center; gap: 9px; width: 100%; padding: 9px; color: #18352c; background: transparent; border: 1px solid transparent; border-radius: 7px; text-align: left; cursor: pointer; }
.helio-student-choice:hover,
.helio-student-choice.active { background: #ffffff; border-color: #bed4cc; }
.helio-student-choice > span { display: grid; width: 38px; height: 38px; place-items: center; color: #ffffff; background: #2b6f9f; border-radius: 50%; font-weight: 900; }
.helio-student-choice > div { display: grid; min-width: 0; gap: 2px; }
.helio-student-choice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.77rem; }
.helio-student-choice small { color: #687d75; font-size: 0.63rem; }
.helio-student-choice i { color: #687d75; font-size: 1.2rem; font-style: normal; }
.helio-link-box { margin-top: 22px; padding-top: 18px; border-top: 1px solid #cddbd6; }
.helio-link-box h2 { margin: 0; font-size: 1rem; }
.helio-link-box > p { margin: 5px 0 13px; color: #687d75; font-size: 0.7rem; line-height: 1.45; }
.helio-link-box form { display: grid; gap: 8px; }
.helio-link-box label { font-size: 0.68rem; font-weight: 800; }
.helio-link-box input[type="text"] { width: 100%; min-height: 42px; padding: 8px 10px; color: #18352c; background: #ffffff; border: 1px solid #bed0ca; border-radius: 6px; font: 800 0.78rem/1 Inter, "Segoe UI", sans-serif; text-transform: uppercase; }
.helio-adult-check { display: grid !important; grid-template-columns: 17px 1fr; align-items: start; gap: 7px; color: #526961; font-weight: 600 !important; line-height: 1.35; }
.helio-adult-check input { margin: 2px 0 0; }
.helio-link-message { min-height: 17px; margin: 0; color: #a63b35; font-size: 0.7rem; }
.helio-family-empty { color: #687d75; font-size: 0.72rem; line-height: 1.45; }
.helio-family-content { min-width: 0; padding: 28px clamp(18px, 4vw, 56px) 64px; }
.helio-family-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid #dce5e1; }
.helio-family-welcome h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.1; }
.helio-family-welcome > div > p:last-child { max-width: 670px; margin: 7px 0 0; color: #687d75; line-height: 1.5; }
.helio-family-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.helio-family-dashboard { display: grid; gap: 24px; padding-top: 24px; }
.helio-family-blank { display: grid; min-height: 420px; place-content: center; justify-items: center; text-align: center; }
.helio-family-blank > span { font-size: 3rem; }
.helio-family-blank h2 { margin: 10px 0 5px; }
.helio-family-blank p { max-width: 440px; margin: 0; color: #687d75; line-height: 1.5; }
.helio-report-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.helio-report-head h2 { margin: 0; font-size: 1.45rem; }
.helio-report-meta { margin: 5px 0 0; color: #687d75; font-size: 0.75rem; }
.helio-grade-badge { display: inline-flex; min-height: 34px; align-items: center; padding: 6px 11px; color: #15533e; background: #dff1e9; border: 1px solid #b9dacd; border-radius: 17px; font-size: 0.72rem; font-weight: 900; }
.helio-family-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid #dce5e1; background: #ffffff; }
.helio-family-metrics > div { display: grid; gap: 4px; min-width: 0; padding: 15px; border-right: 1px solid #dce5e1; }
.helio-family-metrics > div:last-child { border-right: 0; }
.helio-family-metrics strong { overflow-wrap: anywhere; color: #176c53; font-size: 1.35rem; }
.helio-family-metrics span { color: #687d75; font-size: 0.65rem; font-weight: 750; }
.helio-family-recommend { display: flex; align-items: flex-start; gap: 11px; padding: 16px 18px; background: #e8f5ef; border-left: 4px solid #176c53; }
.helio-family-recommend > span { font-size: 1.4rem; }
.helio-family-recommend p { margin: 4px 0 0; color: #526961; line-height: 1.45; }
.helio-family-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.helio-report-section { min-width: 0; padding-top: 18px; border-top: 2px solid #dce5e1; }
.helio-report-section h3 { margin: 0; font-size: 1rem; }
.helio-report-section .helio-section-head { margin-bottom: 13px; }
.helio-activity-chart { display: grid; grid-template-columns: repeat(14, minmax(16px, 1fr)); align-items: end; gap: 6px; height: 150px; padding-top: 14px; border-bottom: 1px solid #b9c9c3; }
.helio-activity-chart > div { display: grid; height: 100%; grid-template-rows: 1fr 18px; align-items: end; justify-items: center; gap: 4px; }
.helio-activity-chart i { display: block; width: min(24px, 70%); min-height: 4px; background: #2b6f9f; border-radius: 3px 3px 0 0; }
.helio-activity-chart span { color: #687d75; font-size: 0.58rem; }
.helio-family-mastery { display: grid; gap: 10px; }
.helio-assessment-list { display: grid; gap: 0; }
.helio-assessment-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #e2e9e6; }
.helio-assessment-list article > div { display: grid; gap: 2px; }
.helio-assessment-list span { color: #687d75; font-size: 0.7rem; }
.helio-school-report-list { display: grid; gap: 16px; }
.helio-school-report { padding: 16px; background: #ffffff; border: 1px solid #dce5e1; border-radius: 7px; }
.helio-school-report > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #e2e9e6; }
.helio-school-report > header span { color: #176c53; font-size: 0.64rem; font-weight: 900; }
.helio-school-report h4 { margin: 2px 0 3px; font-size: 1rem; }
.helio-school-report header p { margin: 0; color: #687d75; font-size: 0.7rem; }
.helio-school-report header > strong { color: #2b6f9f; font-size: 1.4rem; }
.helio-report-subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 12px 0; border: 1px solid #e2e9e6; }
.helio-report-subjects > div { display: grid; gap: 3px; padding: 10px; border-right: 1px solid #e2e9e6; }
.helio-report-subjects span { color: #687d75; font-size: 0.68rem; }
.helio-report-subjects b { color: #176c53; font-size: 0.8rem; }
.helio-ai-guidance { padding: 14px; background: #f2f6fa; border-left: 4px solid #2b6f9f; }
.helio-ai-guidance h5 { margin: 0 0 4px; font-size: 0.85rem; }
.helio-ai-guidance .summary { margin: 0; color: #405c52; line-height: 1.5; }
.helio-ai-guidance .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; margin-top: 10px; }
.helio-ai-guidance .actions p { position: relative; margin: 0; padding-left: 16px; color: #526961; font-size: 0.73rem; line-height: 1.4; }
.helio-ai-guidance .actions p::before { position: absolute; left: 0; content: "•"; color: #2b6f9f; font-weight: 900; }
.helio-school-report > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 11px; }
.helio-school-report > footer small { max-width: 70%; color: #687d75; line-height: 1.4; }
.helio-table-wrap { overflow: auto; border: 1px solid #dce5e1; }
.helio-table-wrap table { width: 100%; border-collapse: collapse; background: #ffffff; font-size: 0.73rem; }
.helio-table-wrap th,
.helio-table-wrap td { padding: 9px 11px; border-bottom: 1px solid #e5ece9; text-align: left; white-space: nowrap; }
.helio-table-wrap th { color: #526961; background: #eef3f1; font-size: 0.65rem; text-transform: uppercase; }
.helio-parent-profile { display: grid; gap: 12px; }
.helio-report-modal .helio-panel { width: min(900px, 100%); }
.helio-report-form { display: grid; gap: 16px; }
.helio-report-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.helio-report-fields .wide { grid-column: 1 / -1; }
.helio-subject-results { display: grid; gap: 7px; }
.helio-subject-row { display: grid; grid-template-columns: minmax(130px, 1.6fr) minmax(74px, 0.8fr) minmax(74px, 0.8fr) minmax(66px, 0.7fr) 36px; align-items: end; gap: 7px; }
.helio-icon-danger { display: grid; width: 36px; height: 42px; place-items: center; padding: 0; color: #9b2f2f; background: #ffffff; border: 1px solid #e7b7b4; border-radius: 6px; font-size: 1.2rem; cursor: pointer; }

@media (max-width: 980px) {
  .helio-family-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .helio-family-metrics > div:nth-child(3) { border-right: 0; }
  .helio-family-metrics > div:nth-child(-n+3) { border-bottom: 1px solid #dce5e1; }
}

@media (max-width: 760px) {
  .helio-family-header { align-items: flex-start; }
  .helio-family-account > div { display: none; }
  .helio-family-shell { display: block; }
  .helio-family-sidebar { border-right: 0; border-bottom: 1px solid #dce5e1; }
  .helio-family-students { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .helio-family-content { padding-top: 20px; }
  .helio-family-welcome { flex-direction: column; }
  .helio-family-actions { justify-content: flex-start; }
  .helio-family-two { grid-template-columns: 1fr; }
  .helio-ai-guidance .actions { grid-template-columns: 1fr; }
  .helio-subject-row { grid-template-columns: 1fr 1fr; padding-bottom: 10px; border-bottom: 1px solid #dce5e1; }
  .helio-subject-row .helio-icon-danger { grid-column: 2; justify-self: end; }
}

@media (max-width: 480px) {
  .helio-family-header { padding-inline: 12px; }
  .helio-family-brand strong { font-size: 0.78rem; }
  .helio-family-content { padding-inline: 13px; }
  .helio-family-metrics { grid-template-columns: 1fr 1fr; }
  .helio-family-metrics > div:nth-child(2n) { border-right: 0; }
  .helio-family-metrics > div:nth-child(3) { border-right: 1px solid #dce5e1; }
  .helio-family-metrics > div:nth-child(-n+4) { border-bottom: 1px solid #dce5e1; }
  .helio-report-head { align-items: flex-start; }
  .helio-invite-form,
  .helio-report-fields { grid-template-columns: 1fr; }
  .helio-report-fields .wide { grid-column: auto; }
  .helio-school-report > footer { align-items: flex-start; flex-direction: column; }
  .helio-school-report > footer small { max-width: 100%; }
}

@media print {
  .helio-family-header,
  .helio-family-sidebar,
  .helio-family-welcome,
  .helio-add-report,
  .helio-danger,
  .helio-family-note { display: none !important; }
  .helio-family-shell { display: block; }
  .helio-family-content { padding: 0; }
  .helio-family-dashboard { gap: 15px; }
  .helio-school-report { break-inside: avoid; }
}