.learning-context { margin: 12px 0 24px; padding: 16px 20px; border: 1px solid #d8dfd0; border-radius: 14px; background: #edf1e7; color: #293a35; } .learning-context summary { cursor: pointer; font-weight: 600; } .learning-context p { line-height: 1.6; }
:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #243d37; background: #f7f5ee; --paper: #f7f5ee; --surface: #fffef9; --ink: #243d37; --muted: #69756d; --line: #dedfd5; --blue: #216c53; --blue-dark: #174f3d; --green: #216c53; --focus: #d48b18; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { min-height: 100vh; margin: 0; background: var(--paper); }
a, button { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.brand-mark { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #2468df, #1747a5); font-size: .78rem; font-weight: 850; letter-spacing: .04em; box-shadow: 0 10px 24px rgba(23, 76, 175, .2); }
.eyebrow { margin: 0 0 8px; color: #3864a4; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow.light { color: #d8e6ff; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 1.05fr) minmax(430px, .95fr); }
.login-story { display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; padding: clamp(30px, 5vw, 74px); color: #fff; background: linear-gradient(145deg, rgba(11, 43, 99, .98), rgba(20, 91, 177, .93)), linear-gradient(45deg, #163a73, #2d70d6); }
.story-brand { display: flex; align-items: center; gap: 13px; font-weight: 800; }
.story-copy { max-width: 650px; margin-block: auto; }
.story-copy h1 { max-width: 620px; margin: 0; font-size: clamp(2.6rem, 5.2vw, 5.4rem); line-height: .98; letter-spacing: -.055em; }
.story-copy > p:last-of-type { max-width: 540px; margin: 28px 0; color: #d8e6ff; font-size: 1.1rem; line-height: 1.7; }
.product-paths { display: flex; flex-wrap: wrap; gap: 12px; }
.product-paths span { padding: 10px 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .82rem; font-weight: 750; }
.login-panel { display: flex; min-height: 100vh; flex-direction: column; background: rgba(255,255,255,.9); }
.mobile-brand { display: none; }
.login-content { width: min(480px, calc(100% - 56px)); margin: auto; padding: 64px 0; }
.login-content h1 { margin: 0; color: var(--ink); font-size: clamp(2.3rem, 4vw, 3.7rem); letter-spacing: -.045em; }
.lead { margin: 17px 0 35px; color: var(--muted); font-size: 1.04rem; line-height: 1.65; }
.google-action { display: flex; min-height: 56px; align-items: center; justify-content: center; gap: 13px; padding: 14px 20px; border: 1px solid #bdc9da; border-radius: 14px; color: #1d2a43; background: #fff; box-shadow: 0 8px 24px rgba(27, 49, 84, .08); font-weight: 800; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.google-action:hover { transform: translateY(-1px); border-color: #7e9ac2; box-shadow: 0 12px 28px rgba(27, 49, 84, .12); }
.password-login { display: grid; gap: 9px; margin-top: 24px; }
.password-login label { color: #34435d; font-size: .86rem; font-weight: 800; }
.password-login input { min-height: 50px; padding: 11px 13px; border: 1px solid #bdc9da; border-radius: 12px; color: #17243a; background: #fff; font: inherit; }
.password-login button { min-height: 52px; margin-top: 7px; border: 0; border-radius: 13px; color: #fff; background: #1557a8; font: inherit; font-weight: 850; cursor: pointer; }
.password-login button:disabled { opacity: .65; cursor: wait; }
.password-login-status, .google-login-status { min-height: 1.4em; margin: 2px 0 0; color: #5c6780; font-size: .86rem; }
.password-login-status.error, .google-login-status.error { color: #8c2d2d; }
.google-g { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: conic-gradient(from -40deg, #4285f4 0 25%, #34a853 0 43%, #fbbc05 0 70%, #ea4335 0); font-weight: 900; }
.privacy-note { margin: 24px 0 0; color: #778196; font-size: .86rem; line-height: 1.55; text-align: center; }
.login-safe-error { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #edc991; border-radius: 11px; color: #754513; background: #fff5e5; font-size: .86rem; line-height: 1.5; }
.login-footer { padding: 24px 32px; color: #7a8498; font-size: .8rem; text-align: center; }
.app-shell { min-width: 0; max-width: 100%; min-height: 100vh; }
.app-header { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; padding: 7px clamp(20px, 4vw, 56px); border-bottom: 1px solid rgba(207, 217, 232, .88); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.learner-header { grid-template-columns: minmax(0, 1fr) auto; }
.brand-link { display: inline-flex; width: max-content; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.primary-nav { display: flex; max-width: 100%; gap: 6px; padding: 5px; border: 1px solid #e0e6ef; border-radius: 13px; background: #f5f7fb; }
.primary-nav a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 9px; color: #5c687d; font-size: .86rem; font-weight: 750; line-height: 1.2; text-decoration: none; }
.primary-nav a[aria-current="page"] { color: #184b9d; background: #fff; box-shadow: 0 3px 10px rgba(32, 59, 100, .09); }
.account-identity { display: grid; justify-self: end; min-width: 112px; gap: 2px; padding: 8px 13px; border-radius: 13px; color: #164f3e; background: #e6f7f0; font-size: .76rem; text-align: right; }
.account-identity strong { overflow: hidden; max-width: 220px; color: #173c32; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.account-identity span { font-weight: 800; }
.profile-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.profile-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; min-height: 74px; padding: 10px clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); }
.language-settings { display: inline-flex; min-width: 0; flex: 0 1 auto; align-items: center; gap: 8px; color: var(--muted); font-size: .84rem; font-weight: 800; }
.language-settings select { min-width: 108px; max-width: 100%; min-height: 40px; padding: 7px 28px 7px 10px; border: 1px solid #bdc9da; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.profile-card { align-self: center; width: min(560px, calc(100% - 32px)); margin: 48px auto; padding: clamp(28px, 6vw, 52px); border: 1px solid #dbe3ef; border-radius: 26px; background: #fff; box-shadow: 0 24px 64px rgba(31, 54, 88, .12); }
.profile-card h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 3.7rem); letter-spacing: -.05em; }
#onboarding-title { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.08; word-break: keep-all; overflow-wrap: break-word; }
.profile-card form { display: grid; gap: 12px; margin-top: 30px; }
.profile-card label { color: var(--ink); font-weight: 800; }
.profile-card input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #b8c5d8; border-radius: 12px; color: var(--ink); background: #fff; font: inherit; }
#first-time-onboarding-form fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
#first-time-onboarding-form legend { margin-bottom: 4px; color: var(--ink); font-weight: 850; }
#first-time-onboarding-form fieldset label { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #d8e0eb; border-radius: 12px; background: #f8fafc; cursor: pointer; }
.profile-card input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; accent-color: var(--blue); }
.profile-page[data-page="first-time-onboarding"] input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--green); }
.profile-page[data-page="first-time-onboarding"] .onboarding-card {
  align-self: start;
  width: min(760px, calc(100% - 32px));
  margin: 24px auto 40px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(31,54,88,.09);
}
.onboarding-card-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.onboarding-card-head .eyebrow { margin: 0; }
.profile-page[data-page="first-time-onboarding"] .onboarding-language-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #d3d5cb;
  border-radius: 999px;
  background: #f1f1e9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.profile-page[data-page="first-time-onboarding"] .onboarding-language-toggle button {
  min-height: 28px;
  margin: 0;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  color: #31483f;
  background: transparent;
  box-shadow: none;
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .06em;
}
.profile-page[data-page="first-time-onboarding"] .onboarding-language-toggle button[aria-pressed="true"] {
  color: #fffdf8;
  background: #247257;
  box-shadow: 0 1px 4px rgba(24,77,59,.20);
}
.profile-page[data-page="first-time-onboarding"] .onboarding-language-toggle button:focus-visible {
  outline: 3px solid rgba(36,114,87,.22);
  outline-offset: 2px;
}
.profile-page[data-page="first-time-onboarding"] .onboarding-card h1 {
  max-width: 680px;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.035em;
  word-break: keep-all;
  overflow-wrap: normal;
}
.profile-page[data-page="first-time-onboarding"] .onboarding-card > .lead {
  max-width: 62ch;
  margin-top: 10px;
  line-height: 1.55;
}
#first-time-onboarding-form { gap: 18px; margin-top: 22px; }
#first-time-onboarding-form .onboarding-usage-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#first-time-onboarding-form .onboarding-usage-options > legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}
#first-time-onboarding-form .onboarding-choice {
  min-width: 0;
  min-height: 52px;
  padding: 10px 12px;
  border-color: #d9dfd5;
  border-radius: 10px;
  background: #fbfaf6;
  font-weight: 700;
}
#first-time-onboarding-form .onboarding-choice:has(input:checked) {
  border-color: #5f8068;
  background: #eaf1e8;
  box-shadow: inset 0 0 0 1px #5f8068;
}
#first-time-onboarding-form .onboarding-choice span {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.35;
}
.onboarding-required-fields,
.onboarding-optional-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.onboarding-optional-fields { margin-top: 16px; }
.onboarding-required-fields > .field-help,
.onboarding-optional-fields > .field-help,
.onboarding-optional-fields > .onboarding-goals { grid-column: 1 / -1; }
.required-help { color: #6d342f; font-weight: 800; }
.required-indicator {
  display: inline-flex;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #9b2c25;
  background: #fff0ee;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .02em;
  vertical-align: middle;
}
#first-time-onboarding-form .field-invalid .onboarding-choice,
#first-time-onboarding-form .onboarding-choice.field-invalid {
  border-color: #b42318;
  background: #fff3f2;
  box-shadow: inset 0 0 0 1px #b42318;
}
.onboarding-field.field-invalid > input,
.onboarding-field.field-invalid > select {
  border-color: #b42318;
  background: #fff7f6;
  box-shadow: 0 0 0 2px rgba(180,35,24,.12);
}
.onboarding-field.field-invalid > label,
.onboarding-usage-options.field-invalid > legend { color: #8f2018; }
.onboarding-field { display: grid; min-width: 0; gap: 6px; }
.onboarding-field > label {
  min-width: 0;
  font-size: .82rem;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: normal;
}
.onboarding-field > input,
.onboarding-field > select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #bcc7d5;
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}
#first-time-onboarding-form .onboarding-goals {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding-top: 2px;
}
#first-time-onboarding-form .onboarding-goals > legend { grid-column: 1 / -1; }
#first-time-onboarding-form .onboarding-goals label {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: .84rem;
  font-weight: 700;
}
#first-time-onboarding-form .onboarding-goals label span {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: normal;
}
.onboarding-profile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.onboarding-profile-actions button {
  min-width: 150px;
  min-height: 46px;
  margin: 0;
  padding: 10px 16px;
}
.onboarding-profile-actions .secondary-action {
  color: #405166;
  border: 1px solid #c6cfdb;
  background: #fff;
}
.profile-card button { min-height: 50px; margin-top: 8px; border: 0; border-radius: 12px; color: #fff; background: var(--blue); font-weight: 800; cursor: pointer; }
.profile-card button:disabled { color: #7d8798; background: #e6eaf0; cursor: wait; }
.onboarding-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.onboarding-account-actions button { min-height: 44px; margin: 0; padding: 9px 14px; border: 1px solid #bdc9da; color: #29405e; background: #fff; }
.onboarding-account-actions button:last-child { flex: 1 1 210px; }
.onboarding-account-actions + .account-action-status { min-height: 20px; margin: 8px 0 0; color: var(--muted); font-size: .84rem; }
.field-help, .profile-status { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.profile-status { min-height: 24px; margin-top: 16px; }
.profile-status.error { color: #8a3f15; }
.content { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 48px; }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.welcome-row h1 { margin: 0; font-size: clamp(1.75rem, 2.5vw, 2.35rem); line-height: 1.08; letter-spacing: -.04em; }
.welcome-row > div:first-child > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: .92rem; }
.context-stack { display: grid; justify-items: end; gap: 10px; }
.family-mode-switch { display: flex; align-items: center; gap: 7px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.family-mode-switch button { min-height: 36px; padding: 7px 11px; border: 0; border-radius: 9px; color: #677187; background: transparent; font-size: .78rem; font-weight: 800; cursor: pointer; }
.family-mode-switch button[aria-pressed="true"] { color: var(--green); background: #eef4ee; }
.family-mode-switch button:disabled { cursor: wait; opacity: .65; }
.family-mode-switch > span[aria-hidden] { color: #b4bdca; }
.family-mode-status { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); }
.context-control { display: flex; gap: 7px; padding: 6px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.context-control span { padding: 9px 12px; border-radius: 9px; font-size: .78rem; font-weight: 750; }
.context-active { color: var(--green); background: #eef4ee; }
.context-disabled { color: #8992a4; background: #f5f6f8; }
.section { margin-top: 28px; }
.hub-apps { margin-top: 0; }
.hub-empty { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed #cbd4e1; border-radius: 14px; color: var(--muted); background: #fff; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.03em; }
.authority-label { color: #5b6b83; font-size: .78rem; font-weight: 750; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.app-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); overflow: hidden; min-height: 220px; border: 1px solid #dbe3ef; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(31, 54, 88, .06); }
.app-art { display: grid; place-items: center; color: #fff; font-size: 2.4rem; font-weight: 900; }
.app-card.reading .app-art { background: linear-gradient(145deg, #116148, #26a177); }
.app-card.ielts .app-art { background: linear-gradient(145deg, #174a9c, #367bd9); }
.app-card-body { display: flex; min-width: 0; flex-direction: column; padding: 18px; }
.app-title-row { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.app-title-row h3 { margin: 0; font-size: 1.12rem; letter-spacing: -.02em; }
.app-card-body > p { margin: 10px 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.app-card-body .app-status { margin: auto 0 10px; color: #40516c; font-size: .8rem; }
.state-pill { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 26px; padding: 5px 9px; border-radius: 999px; font-size: .68rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.state-pill.ready { color: #0e654a; background: #dff5ec; }
.state-pill.loading, .state-pill.launching { color: var(--green); background: #eef4ee; }
.state-pill.unavailable, .state-pill.denied { color: #6d5660; background: #f1e9ec; }
.state-pill.error { color: #8b4d13; background: #fff0d8; }
.launch-control { width: 100%; min-height: 44px; border: 1px solid #c8d2e1; border-radius: 11px; color: #44536b; background: #f5f7fa; font-weight: 800; cursor: not-allowed; }
.app-card[data-launch-state="READY"] .launch-control { color: #fff; border-color: var(--blue); background: var(--blue); cursor: pointer; }
.app-card[data-launch-state="LOADING"] .launch-control, .app-card[data-launch-state="LAUNCHING"] .launch-control { color: #fff; border-color: #557db7; background: #557db7; }
.app-card small { margin-top: 8px; color: #818a9c; line-height: 1.4; }
.guardian-boundary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 32px; padding: 20px; border: 1px dashed #cbd4e1; border-radius: 18px; background: rgba(255,255,255,.65); }
.guardian-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #6c7180; background: #eceef2; font-weight: 900; }
.guardian-boundary h2 { margin: 0; font-size: 1rem; }
.guardian-boundary p { margin: 5px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.app-footer { padding: 18px 20px; border-top: 1px solid var(--line); color: #788397; background: #fff; font-size: .8rem; text-align: center; }
.account-menu { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: end; justify-items: end; gap: 2px 7px; }
.account-actions { display: flex; gap: 7px; }
.account-actions button, .account-action-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border: 1px solid #c8d2e1; border-radius: 9px; color: #44536b; background: #fff; font-size: .74rem; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; }
.account-actions button:hover, .account-action-link:hover { border-color: #8ea4c2; background: #f5f8fc; }
.account-actions button:disabled { color: #8d96a5; background: #eef1f5; cursor: wait; }
.account-action-status { grid-column: 1 / -1; min-height: 12px; max-width: 260px; color: var(--muted); font-size: .7rem; line-height: 1.2; text-align: right; }
.account-settings { position: relative; justify-self: end; }
.account-settings > summary { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid #c8d2e1; border-radius: 10px; color: #44536b; background: #fff; font-size: .78rem; font-weight: 800; cursor: pointer; list-style: none; }
.account-settings > summary::-webkit-details-marker { display: none; }
.account-settings > summary::before { content: "⚙"; margin-right: 7px; font-size: .9rem; }
.account-settings[open] > summary { border-color: #7e9ac2; background: #f5f8fc; }
.settings-panel { position: absolute; z-index: 12; top: calc(100% + 8px); right: 0; display: grid; width: min(340px, calc(100vw - 28px)); gap: 14px; padding: 18px; border: 1px solid #d4deeb; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(31,54,88,.18); }
.settings-identity { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.settings-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-identity span { color: var(--muted); font-size: .76rem; font-weight: 750; }
.profile-settings-form { display: grid; gap: 7px; }
.profile-settings-form label { color: var(--green); font-size: .74rem; font-weight: 850; }
.profile-settings-form input:not([type="checkbox"]) { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #afbdd1; border-radius: 9px; color: var(--ink); background: #fff; font: inherit; }
.profile-settings-form button { min-height: 40px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); font-weight: 800; cursor: pointer; }
.profile-settings-form button:disabled { opacity: .65; cursor: wait; }
.profile-settings-status { min-height: 18px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.subscription-settings { display: grid; gap: 6px; padding: 12px; border: 1px solid #d7e1ee; border-radius: 11px; background: #f7faff; }
.subscription-settings[data-tier="PAID"] { border-color: #a9dbc9; background: #eefaf5; }
.subscription-settings > strong { color: var(--green); font-size: .82rem; }
.subscription-settings > span, .subscription-settings > small { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.subscription-upgrade-form { display: grid; gap: 6px; margin-top: 3px; }
.subscription-upgrade-form button { min-height: 40px; border: 0; border-radius: 9px; color: #fff; background: var(--blue); font-weight: 800; cursor: pointer; }
.subscription-upgrade-form button:disabled { color: #57677e; background: #e5ebf3; cursor: default; }
.subscription-upgrade-status { min-height: 17px; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.guardian-overview { margin: 24px 0 26px; padding: 20px; border: 1px solid #dbe3ef; border-radius: 18px; background: rgba(255,255,255,.76); box-shadow: 0 10px 28px rgba(31,54,88,.05); }
.learner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 10px; }
.learner-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; min-height: 112px; padding: 14px; border: 1px solid #ccd7e5; border-radius: 13px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.learner-card:hover { border-color: #7e9ac2; box-shadow: 0 6px 18px rgba(31,54,88,.08); }
.learner-card[aria-pressed="true"] { border-color: #2d6bc2; background: #edf4ff; box-shadow: inset 0 0 0 1px #2d6bc2; cursor: default; }
.learner-avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #2366c5, #16458d); font-weight: 900; }
.learner-card-copy { display: grid; min-width: 0; gap: 8px; }
.learner-name-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.learner-name-row > strong { overflow: hidden; font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.learner-card-action { flex: 0 0 auto; color: #245ca9; font-size: .7rem; font-weight: 850; }
.learner-card-summary { display: grid; gap: 3px; color: #334866; font-size: .74rem; line-height: 1.35; }
.learner-card-summary strong { overflow-wrap: anywhere; white-space: normal; }
.learner-card-summary small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.learner-card-summary.state-muted { color: var(--muted); }
.learner-card-summary.state-warning { color: #8b4d13; }
.learner-selection-help { margin: 14px 0 0; padding: 13px 14px; border-radius: 11px; color: var(--muted); background: #f4f5ee; font-size: .84rem; }
.selected-student-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid #dbe3ef; }
.detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.detail-heading h3 { margin: 0; font-size: 1.08rem; letter-spacing: -.02em; }
.detail-heading > span { color: var(--muted); font-size: .72rem; font-weight: 750; }
.reading-performance { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e1e6df; }
.learning-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
.learning-metrics > div,
.learning-current-books-metric { display: grid; gap: 5px; min-width: 0; padding: 12px; border: 1px solid #e0e7f0; border-radius: 11px; background: #f6f9fd; }
.learning-metrics span { color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.learning-metrics strong { overflow-wrap: anywhere; font-size: .86rem; }
.learning-current-books-metric { padding: 0; overflow: hidden; transition: border-color .15s ease, background .15s ease; }
.learning-current-books-metric > summary { position: relative; display: grid; gap: 5px; min-height: 100%; padding: 12px 34px 12px 12px; list-style: none; cursor: pointer; }
.learning-current-books-metric > summary::-webkit-details-marker { display: none; }
.learning-current-books-metric > summary::after { content: "＋"; position: absolute; top: 12px; right: 12px; color: var(--green); font-size: .9rem; font-weight: 800; }
.learning-current-books-metric > summary small { color: #60746b; font-size: .67rem; font-weight: 700; }
.learning-current-books-metric[open] { grid-column: 1 / -1; border-color: #b9cabc; background: #f8faf6; }
.learning-current-books-metric[open] > summary { grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid #e1e7df; }
.learning-current-books-metric[open] > summary span,
.learning-current-books-metric[open] > summary small { grid-column: 1; }
.learning-current-books-metric[open] > summary strong { grid-column: 2; grid-row: 1 / span 2; font-size: 1.15rem; }
.learning-current-books-metric[open] > summary::after { content: "−"; }
.learning-current-books-panel { display: grid; gap: 8px; padding: 12px; }
.learning-current-books-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learning-current-books-heading > strong { font-size: .82rem; }
.learning-current-books-heading > span { text-transform: none; letter-spacing: 0; }
.learning-current-book-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 12px; border: 1px solid #e0e6df; border-radius: 9px; background: var(--surface); }
.learning-current-book-row > div { display: grid; gap: 2px; min-width: 0; }
.learning-current-book-row > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learning-current-book-row small,
.learning-current-book-row p,
.learning-current-book-date { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.learning-current-book-date { display: flex; gap: 7px; white-space: nowrap; }
.learning-current-book-date span { text-transform: none; letter-spacing: 0; }
.learning-current-books-empty { margin: 0; padding: 10px 12px; border-radius: 8px; color: var(--muted); background: #f3f5f0; font-size: .78rem; }
.current-reading { margin-top: 16px; }
@media(max-width:820px) {
  .learning-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-current-book-row { grid-template-columns: 1fr; gap: 5px; }
  .learning-current-book-date { white-space: normal; }
}
.current-book-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 9px; }
.current-book { display: grid; gap: 9px; min-width: 0; padding: 14px; border: 1px solid #d5e0ec; border-radius: 12px; background: #fff; }
.current-book > div:first-child { display: grid; gap: 2px; }
.current-book > div:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-book > div:first-child span, .current-book p, .book-reading-position { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.current-book p { margin: 0; color: #334866; }
.book-reading-position { display: flex; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid #edf1f6; }
.learning-data-note { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; color: #56677f; background: #edf3fa; font-size: .74rem; line-height: 1.45; }
.learning-data-state { margin-top: 14px; padding: 16px; border: 1px dashed #cbd4e1; border-radius: 12px; color: #40516c; background: #f8fafc; }
.learning-data-state.warning { border-color: #e5a535; color: #754513; background: #fff8e7; }
.learning-data-state p { margin: 5px 0 0; font-size: .8rem; line-height: 1.45; }
#learner-selection-status:empty { display: none; }
#learner-selection-status { display: block; margin-top: 10px; color: var(--muted); font-size: .78rem; }
.local-test-personas { margin: 24px 0; padding: 20px; border: 2px solid #e5a535; border-radius: 18px; background: #fff8e7; box-shadow: 0 10px 30px rgba(94, 65, 10, .08); }
.login-content .local-test-personas { width: min(680px, 100%); max-height: 46vh; overflow: auto; }
.profile-card .local-test-personas { margin-bottom: 0; }
.persona-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.persona-heading h2 { margin: 0; color: #7b4d00; font-size: 1.05rem; letter-spacing: .04em; }
.persona-help, .persona-status { margin: 8px 0 0; color: #6e5a36; font-size: .78rem; line-height: 1.45; }
.persona-status { min-height: 18px; color: #7b4d00; font-weight: 750; }
.persona-group { margin-top: 15px; }
.persona-group h3 { margin: 0 0 7px; color: #71521e; font-size: .72rem; letter-spacing: .08em; }
.persona-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 7px; }
.persona-buttons button { display: grid; gap: 3px; min-height: 58px; padding: 8px 10px; border: 1px solid #d9bc82; border-radius: 10px; color: #5e461c; background: #fff; text-align: left; cursor: pointer; }
.persona-buttons button[aria-current="true"] { color: #fff; border-color: #8b5b05; background: #8b5b05; box-shadow: 0 0 0 3px rgba(224, 166, 55, .28); }
.persona-buttons button:disabled { opacity: .65; cursor: wait; }
.persona-buttons button span { overflow: hidden; font-size: .61rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.admin-content { display: grid; gap: 26px; }
.admin-title { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.admin-title h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.045em; }
.admin-title p:last-child { max-width: 760px; color: var(--muted); line-height: 1.6; }
.admin-notice { display: grid; gap: 5px; padding: 16px 18px; border: 1px solid #e5a535; border-radius: 14px; color: #6e4c13; background: #fff8e7; }
.admin-panel { padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(31,54,88,.06); }
.app-shell[data-page="platform-admin"] .admin-content .admin-panel { display: none; }
.app-shell[data-page="platform-admin"] .admin-content #people { display: block; }
.app-shell[data-page="platform-admin"] .admin-content .admin-panel:target { display: block; }
.app-shell[data-page="platform-admin"] .admin-content:has(.admin-panel:target) #people:not(:target) { display: none; }
.admin-panel[id] { scroll-margin-top: 96px; }
.primary-admin-link { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border-radius: 10px; color: #fff; background: var(--blue); font-weight: 800; text-decoration: none; }
.advanced-admin-tools { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.advanced-admin-tools summary { cursor: pointer; font-weight: 800; }
.admin-language-setting { max-width: 300px; }
.admin-panel form + form { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.admin-panel { min-width: 0; }
.admin-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin-table th, .admin-table td { padding: 11px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { color: var(--green); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.admin-table button { min-height: 34px; padding: 6px 10px; border: 1px solid #9b321f; border-radius: 8px; color: #9b321f; background: #fff; font-weight: 800; cursor: pointer; }
.user-name-button { border-color: transparent !important; padding-inline: 0 !important; color: #184b9d !important; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.admin-detail-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(86vh, 900px); overflow: auto; padding: clamp(20px, 4vw, 34px); border: 0; border-radius: 20px; color: var(--ink); box-shadow: 0 30px 90px rgba(20,42,76,.28); }
.admin-detail-dialog::backdrop { background: rgba(17,34,60,.48); }
.dialog-close { display: flex; justify-content: end; }
.dialog-close button { width: 40px; height: 40px; border: 1px solid #c8d2e1; border-radius: 50%; color: #44536b; background: #fff; font-size: 1.25rem; cursor: pointer; }
.detail-badges, .detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.user-detail-list { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 1px; overflow: hidden; margin: 20px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.user-detail-list dt, .user-detail-list dd { margin: 0; padding: 11px 13px; background: #fff; overflow-wrap: anywhere; }
.user-detail-list dt { color: #53647d; font-size: .76rem; font-weight: 850; }
.detail-actions > td { display: grid; min-width: min(280px, 100%); gap: 7px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.family-diagram { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin: 20px 0; }
.family-card { padding: 16px; border: 1px solid #cbd8e7; border-radius: 14px; background: #f7faff; }
.family-card[data-drop-ready="true"] { border-color: #2b68b8; background: #edf5ff; }
.family-card h3 { margin: 0 0 10px; color: var(--ink); }
.family-card ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: #53647d; }
.family-candidate-searches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.family-candidate-searches label { display: grid; gap: 6px; color: #43536b; font-weight: 750; }
.family-candidate-searches input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #afbdd1; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.family-candidates { display: flex; min-height: 48px; flex-wrap: wrap; align-content: flex-start; gap: 7px; padding: 9px; border: 1px dashed #bdcadb; border-radius: 12px; background: #fbfcfe; }
.family-candidate { min-height: 38px; border: 1px solid #c7d5e7; border-radius: 999px; color: #254d7a; background: #fff; cursor: grab; }
.family-candidate:active { cursor: grabbing; }
.subordinate-admin-link { display: inline-flex; min-height: 40px; align-items: center; margin-top: 8px; color: #1f5da9; font-weight: 750; }
.reference-administration > summary { cursor: pointer; color: var(--ink); font-size: 1rem; font-weight: 850; }
.reference-administration[open] > summary { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.admin-json { max-height: 360px; overflow: auto; padding: 16px; border-radius: 12px; background: #071d39; color: #dcecff; white-space: pre-wrap; }
.audit-event-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.audit-event { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8fbff; }
.audit-event dt { color: var(--muted); font-weight: 850; }
.audit-event dd { margin: 0; overflow-wrap: anywhere; }
.admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-form > label { display: grid; align-content: start; gap: 7px; color: var(--green); font-size: .78rem; font-weight: 850; }
.admin-form input, .admin-form select, .admin-form textarea, .history-filter input, .history-filter select { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #afbdd1; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.admin-form textarea { min-height: 90px; resize: vertical; }
.admin-form small { color: var(--muted); font-weight: 500; line-height: 1.4; }
.covered-students { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 8px; padding: 16px; border: 1px solid #cbd5e3; border-radius: 14px; }
.covered-students legend { padding: 0 7px; color: var(--green); font-size: .78rem; font-weight: 850; }
.covered-students label { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; padding: 9px; border-radius: 9px; background: #f7f9fc; }
.covered-students input { grid-row: 1 / 3; width: 18px; min-height: 18px; }
.covered-students code { color: var(--muted); font-size: .66rem; overflow-wrap: anywhere; }
.primary-admin-action, .history-filter button, .record-actions button, .dialog-actions button { min-height: 42px; padding: 9px 14px; border: 1px solid #1d64c8; border-radius: 10px; color: #fff; background: #1d64c8; font-weight: 850; cursor: pointer; }
.admin-form > .primary-admin-action { grid-column: 1 / -1; justify-self: start; }
.admin-form-status, .record-action-status, .commercial-action-dialog-status { grid-column: 1 / -1; min-height: 20px; margin: 0; color: #5b6b83; }
.admin-form-status.error, .record-action-status.error, .commercial-action-dialog-status.error { color: #9b321f; }
.history-filter { display: grid; grid-template-columns: minmax(180px,1fr) minmax(240px,2fr) auto; gap: 10px; align-items: center; margin-bottom: 18px; }
.student-directory-filter { display: grid; max-width: 720px; gap: 7px; margin-bottom: 16px; color: var(--green); font-size: .78rem; font-weight: 850; }
.student-directory-filter input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #afbdd1; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid #dbe3ef; border-radius: 14px; background: #fff; }
.admin-tabs a { flex: 1 1 150px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 9px; color: var(--green); background: #f1f5ef; font-size: .78rem; font-weight: 850; text-align: center; text-decoration: none; }
.paid-access-admin #learning-access { display: grid; gap: 26px; }
.record-actions label { display: grid; min-width: 220px; gap: 7px; color: var(--green); font-size: .78rem; font-weight: 850; }
.record-actions select, .record-actions input { min-height: 42px; padding: 8px 10px; border: 1px solid #afbdd1; border-radius: 9px; color: var(--ink); background: #fff; font: inherit; }
#people-search { grid-template-columns: minmax(0, 1fr) auto; max-width: 720px; align-items: end; }
#people-search label { display: grid; min-width: 0; gap: 7px; color: var(--green); font-size: .78rem; font-weight: 850; }
#people-search button { min-width: 92px; min-height: 44px; }
.entitlement-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.entitlement-card { padding: 16px; border: 1px solid #dbe3ef; border-radius: 14px; background: #f9fbfe; }
.entitlement-card > div { display: flex; justify-content: space-between; gap: 12px; }
.entitlement-card p { color: var(--muted); }
.history-subject { color: var(--muted); overflow-wrap: anywhere; }
.commercial-history { display: grid; gap: 16px; }
.commercial-record { padding: 18px; border: 1px solid #dbe3ef; border-radius: 16px; }
.record-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.record-heading h3 { margin: 0 0 4px; }
.record-heading code { color: var(--muted); font-size: .72rem; }
.commercial-record dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.commercial-record dl > div { padding: 10px; border-radius: 9px; background: #f7f9fc; overflow-wrap: anywhere; }
.commercial-record dt { color: #5b6b83; font-size: .69rem; font-weight: 850; text-transform: uppercase; }
.commercial-record dd { margin: 5px 0 0; line-height: 1.5; }
.commercial-record details li { display: grid; grid-template-columns: minmax(180px,1fr) minmax(220px,1fr); gap: 5px; margin: 8px 0; }
.record-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.record-actions button { color: #8b321f; border-color: #d9a89e; background: #fff5f2; }
#manual-paid-access-confirmation, #commercial-action-confirmation { width: min(620px,calc(100% - 28px)); border: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(12,31,60,.3); }
#manual-paid-access-confirmation::backdrop, #commercial-action-confirmation::backdrop { background: rgba(15,29,50,.55); }
#commercial-action-confirmation form, #commercial-action-confirmation label { display: grid; gap: 10px; }
#commercial-action-confirmation input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #afbdd1; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.confirmation-summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; }
.confirmation-summary dt { color: #5b6b83; font-weight: 850; }
.confirmation-summary dd { margin: 0; overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: end; gap: 10px; margin-top: 20px; }
.dialog-actions button:first-child { color: #44536b; border-color: #c8d2e1; background: #fff; }
.app-shell[data-page="platform-admin"] > .app-header, .app-shell[data-page="platform-admin-operational-audit"] > .app-header, .app-shell[data-page="paid-access-admin"] > .app-header { grid-template-columns: minmax(0, 1fr) auto; }
.app-shell[data-page="platform-admin"] > .app-header > .primary-nav, .app-shell[data-page="platform-admin-operational-audit"] > .app-header > .primary-nav, .app-shell[data-page="paid-access-admin"] > .app-header > .primary-nav { order: 3; grid-column: 1 / -1; justify-self: stretch; flex-wrap: wrap; margin-top: 5px; }
.app-shell[data-page="platform-admin"] > .app-header > .primary-nav a, .app-shell[data-page="platform-admin-operational-audit"] > .app-header > .primary-nav a, .app-shell[data-page="paid-access-admin"] > .app-header > .primary-nav a { flex: 1 1 max-content; text-align: center; }
@media (max-width: 900px) { .login-page { grid-template-columns: 1fr; } .login-story { display: none; } .mobile-brand { display: flex; align-items: center; gap: 12px; padding: 20px 24px; } .login-panel { min-height: 100vh; } .app-header { grid-template-columns: 1fr auto; } .primary-nav { order: 3; grid-column: 1 / -1; justify-self: stretch; flex-wrap: wrap; margin-top: 5px; } .primary-nav a { flex: 1 1 max-content; text-align: center; } .learning-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .content { width: min(100% - 28px, 1280px); min-width: 0; max-width: 100%; padding: 22px 0 38px; } .app-header { padding-inline: 14px; } .brand-link strong { display: none; } .account-menu { min-width: 0; grid-template-columns: 1fr; gap: 4px; } .account-action-status { grid-column: auto; min-height: 0; } .settings-panel { position: fixed; top: 66px; left: 14px; right: 14px; width: auto; max-height: calc(100vh - 82px); overflow: auto; } .welcome-row, .section-heading, .admin-title { align-items: stretch; flex-direction: column; } .welcome-row { gap: 14px; margin-bottom: 18px; } .context-stack { justify-items: stretch; } .context-control { align-self: flex-start; } .guardian-overview { padding: 14px; } .learner-grid, .learning-metrics, .user-detail-list, .family-candidate-searches { grid-template-columns: 1fr; } .detail-heading, .book-reading-position { align-items: stretch; flex-direction: column; } .app-grid { grid-template-columns: 1fr; } .app-card { grid-template-columns: 1fr; min-height: 0; } .app-art { min-height: 72px; } .guardian-boundary { grid-template-columns: auto 1fr; } .guardian-boundary > .state-pill { grid-column: 2; justify-self: start; } .admin-form, .entitlement-grid, .commercial-record dl { grid-template-columns: 1fr; } .history-filter, #people-search { grid-template-columns: 1fr; } #people-search button { width: 100%; } .admin-table { min-width: 640px; } }

/* CHAN Learning shared paper-and-ink shell. */
h1, h2, h3, .brand-link strong, .story-brand { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.025em; }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--green); box-shadow: none; font-family: Georgia, "Times New Roman", serif; }
.app-header, .profile-header { position: sticky; z-index: 10; top: 0; min-height: 70px; padding: 12px clamp(20px, 4vw, 32px); border-color: var(--line); background: rgba(250,248,242,.97); backdrop-filter: blur(12px); }
.content { width: min(970px, calc(100% - 48px)); padding: 32px 0 56px; }
.eyebrow { color: var(--green); font-size: .68rem; letter-spacing: .14em; }
.welcome-row h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.app-footer { border-color: var(--line); color: var(--muted); background: #faf8f2; }
.primary-nav { padding: 0; border: 0; border-radius: 0; background: transparent; }
.primary-nav a { position: relative; border-radius: 0; color: var(--muted); background: transparent; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--ink); }
.primary-nav a::after { position: absolute; right: 14px; bottom: 2px; left: 14px; height: 2px; background: var(--green); content: ""; opacity: 0; }
.primary-nav a[aria-current="page"] { color: var(--green); background: transparent; box-shadow: none; }
.primary-nav a[aria-current="page"]::after { opacity: 1; }
.account-settings > summary { border-color: var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); }
.account-settings > summary::before { content: "●"; color: var(--green); font-size: .55rem; }
.account-settings[open] > summary { border-color: var(--green); background: #f1f5ef; }
.settings-panel { width: min(290px, calc(100vw - 28px)); gap: 10px; padding: 14px; border-color: var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 14px 34px rgba(36,61,55,.14); }
.settings-identity { padding: 2px 2px 10px; }
.account-menu-link { display: flex; min-height: 44px; align-items: center; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: transparent; font: inherit; font-size: .78rem; font-weight: 750; text-align: left; cursor: pointer; }
.account-menu-link:hover { border-color: #a9b8ac; background: #f4f5ee; }
.account-secondary-panel { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); overflow: auto; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); box-shadow: 0 24px 70px rgba(36,61,55,.22); }
.account-secondary-panel::backdrop { background: rgba(36,61,55,.42); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.panel-heading h2 { margin: 0; font-size: 1.75rem; }
.panel-close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; font-size: 1.25rem; cursor: pointer; }
.account-secondary-panel .profile-settings-form { gap: 8px; }
.profile-settings-form h3 { margin: 18px 0 4px; font-size: 1rem; }
.profile-settings-form select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; }
.profile-learning-goals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; }
.profile-learning-goals label { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.profile-settings-form input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; flex: 0 0 18px; accent-color: var(--green); }
.profile-settings-form .profile-cancel { background: var(--mint); color: var(--green); }
.app-current-content { display: grid; gap: 5px; padding: 12px; border-radius: 9px; background: var(--mint); color: var(--green); }
.account-name { display: grid; gap: 3px; text-align: left; }
.account-name small { font-size: .7rem; font-weight: 500; color: var(--muted); }
.compact-language-toggle { display: flex; gap: 4px; }
.compact-language-toggle button { min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--green); font: inherit; cursor: pointer; }
.compact-language-toggle button[aria-pressed="true"] { background: var(--green); color: #fff; }
.settings-panel .account-actions { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }

.account-secondary-panel .subscription-settings { margin-top: 18px; }
.profile-card, .admin-panel, .guardian-overview, .app-card { border-color: var(--line); border-radius: 12px; background: var(--surface); box-shadow: none; }
.profile-card { width: min(640px, calc(100% - 32px)); margin: 42px auto; padding: clamp(26px, 5vw, 46px); }
.profile-card h1 { font-size: clamp(2rem, 5vw, 3rem); }
.profile-card input, .profile-card select, .admin-form input, .admin-form select, .admin-form textarea, .history-filter input, .history-filter select, .family-candidate-searches input { border-color: #b8c1b8; border-radius: 7px; }
.profile-card button, .primary-admin-action, .history-filter button, .dialog-actions button { border-radius: 7px; background: var(--green); }
.student-resume { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; padding: clamp(22px, 4vw, 34px); border: 1px solid #cbd9cf; border-radius: 12px; background: #eef4ee; }
.student-resume h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.student-recent { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 0; color: var(--muted); font-size: .82rem; }
.student-recent strong { color: var(--ink); }
.primary-learning-action { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid var(--green); border-radius: 7px; color: #fff; background: var(--green); font-weight: 800; cursor: pointer; }
.primary-learning-action.is-disabled { color: var(--muted); border-color: var(--line); background: #f6f5ef; cursor: default; }
.app-card { grid-template-columns: 62px minmax(0,1fr); min-height: 196px; }
.app-art { color: var(--green); background: #edf2ea !important; font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; }
.app-card[data-launch-state="READY"] .launch-control { border-color: var(--green); background: var(--green); }
.guardian-overview { background: var(--surface); }
.learner-card { border-color: var(--line); border-radius: 9px; background: #fffef9; }
.learner-card[aria-pressed="true"] { border-color: var(--green); background: #eef4ee; box-shadow: inset 0 0 0 1px var(--green); }
.learner-avatar { background: var(--green); }
.learner-card-action { color: var(--green); }
.selected-student-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.selected-student-actions p { margin: 8px 0 0; color: var(--muted); font-size: .78rem; }
.admin-content { gap: 22px; }
.admin-panel { padding: clamp(20px, 4vw, 30px); }
.admin-detail-dialog { position: fixed; inset: 0 0 0 auto; width: min(620px, 100vw); max-width: none; height: 100vh; max-height: none; margin: 0; padding: clamp(24px, 4vw, 40px); border-left: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: -18px 0 50px rgba(36,61,55,.18); }
.admin-detail-dialog::backdrop { background: rgba(36,61,55,.38); }
body:has(.admin-detail-dialog[open]) { overflow: hidden; }
.admin-table th { color: var(--green); }
.user-name-button { color: var(--green) !important; }
.family-card { border-color: var(--line); border-radius: 10px; background: #f4f5ee; }
.family-card h3 { color: var(--ink); }
.family-candidates { border-color: #bac5bb; border-radius: 8px; background: #faf9f3; }
.family-candidate { min-height: 44px; color: var(--ink); border-color: var(--line); background: var(--surface); }
.subordinate-admin-link { color: var(--green); }
.reference-administration > summary { color: var(--ink); }
.login-page { grid-template-columns: minmax(300px,.82fr) minmax(420px,1.18fr); background: var(--paper); }
.login-story { padding: clamp(30px,5vw,64px); color: var(--ink); background: #eaf1e8; }
.eyebrow.light, .story-copy > p:last-of-type { color: var(--muted); }
.story-copy h1 { max-width: 560px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem,5vw,4.8rem); font-weight: 500; letter-spacing: -.04em; }
.product-paths span { border-color: #b9c9bb; background: rgba(255,254,249,.58); }
.login-panel { background: var(--surface); }
.login-toolbar { display: flex; min-height: 70px; align-items: center; justify-content: flex-end; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: #faf8f2; }
.login-toolbar .mobile-brand { margin-right: auto; padding: 0; }
.login-content h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.google-action { border-color: #b8c1b8; border-radius: 8px; color: var(--ink); box-shadow: none; }
.google-action:hover { border-color: var(--green); box-shadow: none; }
.brand-link strong { display: inline; font-size: 1rem; white-space: nowrap; }
h1, .welcome-row h1, .profile-card h1, .admin-panel h1 { font-size: 2rem; line-height: 1.18; letter-spacing: -.025em; }
h2, .section-heading h2 { font-size: 1.45rem; line-height: 1.25; }
html[lang="ko"] { font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; line-height: 1.65; letter-spacing: -.015em; word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3 { font-family: inherit; font-weight: 700; letter-spacing: -.035em; line-height: 1.35; word-break: keep-all; }
html[lang="ko"] button, html[lang="ko"] input, html[lang="ko"] select, html[lang="ko"] textarea, html[lang="ko"] summary { font-family: inherit; }
html[lang="ko"] .eyebrow { letter-spacing: .06em; font-weight: 600; }
html[lang="ko"] .user-detail-list, html[lang="ko"] .record-actions { line-height: 1.65; }
.detail-actions .action-panel { display: grid; gap: 10px; }
.detail-actions p { margin: 0; overflow-wrap: anywhere; }
.mocha-preview textarea { width: 100%; min-height: 90px; margin-block: 10px; font: inherit; }
.mocha-preview button { min-height: 42px; margin: 4px; }
.mocha-preview { max-height: min(70dvh, 600px); overflow: auto; }
@media (max-width: 600px) { html[lang="ko"] h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); } .detail-actions button { min-height: 44px; } }
.learner-header, .profile-header { grid-template-columns: minmax(0, 1fr) auto; }
.welcome-row { align-items: center; }
.other-apps { grid-column: 1 / -1; padding-top: 4px; }
.other-apps > summary { min-height: 44px; display: flex; align-items: center; width: max-content; padding: 8px 12px; color: var(--muted); cursor: pointer; font-size: .82rem; font-weight: 750; }
.other-apps > .app-grid { margin-top: 10px; }
.other-apps .app-card { opacity: .9; }
.app-status { color: var(--muted) !important; }
.learner-selection-help { color: var(--muted); border: 1px solid var(--line); background: #faf9f3; }
.current-book, .learning-data-state { border-color: var(--line); background: #fffef9; }
.education-page-actions { width: min(720px, calc(100% - 32px)); margin: 24px auto 0; }
.page-back { display: inline-flex; min-height: 44px; align-items: center; color: var(--green); font-size: .84rem; font-weight: 800; text-decoration: none; }
.education-settings-card { align-self: start; width: min(720px, calc(100% - 32px)); margin: 16px auto 42px; }
.education-settings-card h1 { margin-bottom: 22px; }
.education-current { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f4f5ee; }
.education-current h2, .education-edit-heading { margin: 0 0 14px; }
.education-edit-heading { margin-top: 26px; }
.education-settings-card .detail-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 0; }
.education-settings-card .detail-list div { min-width: 0; }
.education-settings-card .detail-list dt { color: var(--muted); font-size: .72rem; font-weight: 800; }
.education-settings-card .detail-list dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.education-settings-card form { margin-top: 0; }
.education-settings-card select, .education-settings-card input, .education-settings-card button { min-height: 46px; }
.education-school-search { display: flex; min-width: 0; gap: 8px; }
.education-school-search input { min-width: 0; flex: 1 1 auto; }
.education-school-search button { flex: 0 0 auto; min-width: 74px; margin: 0; padding-inline: 16px; white-space: nowrap; }
.admin-content { width: min(1120px, calc(100% - 40px)); padding-top: 24px; }
.admin-panel { padding: clamp(20px, 3vw, 28px); }
.admin-panel > .section-heading { margin-bottom: 18px; }
.admin-panel > .section-heading h1 { margin: 0; }
.admin-panel[id] { scroll-margin-top: 128px; }
.admin-table { font-size: .82rem; }
.admin-table th, .admin-table td { padding: 10px 8px; }
.admin-table button, .detail-action-panel button, .family-link-actions button, .pending-family-links button { min-height: 40px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--green); background: var(--surface); font-weight: 800; cursor: pointer; }
.user-name-button { color: var(--green) !important; }
.detail-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; }
.detail-action-panel { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #faf9f3; }
.detail-action-panel h3, .detail-action-panel p { margin: 0; }
.detail-action-panel select { min-height: 44px; border: 1px solid #b8c1b8; border-radius: 7px; background: var(--surface); }
.danger-action, .detail-action-panel .danger-action, .family-link-actions .danger-action { color: #9b321f; border-color: #d9a89e; background: #fff9f7; }
.family-diagram { display: grid; grid-template-columns: 1fr; margin: 18px 0; }
.family-card { padding: 20px; }
.family-slots { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(0,1.35fr); gap: 18px; }
.family-slot-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.family-slot-group.children { grid-template-columns: repeat(2,minmax(0,1fr)); }
.family-slot-group h4 { grid-column: 1 / -1; margin: 0 0 2px; color: var(--muted); font-size: .75rem; }
.family-slot { display: grid; min-height: 66px; align-content: center; gap: 3px; padding: 10px; border: 1px dashed #bcc5bc; border-radius: 9px; color: var(--muted); background: #fffef9; }
.family-slot.is-filled { border-style: solid; color: var(--ink); background: #eef4ee; }
.family-slot small { color: var(--muted); font-size: .68rem; }
.family-link-actions, .pending-family-links { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.family-link-actions > div, .pending-family-links > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.family-add-form { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #faf9f3; }
.family-candidate-searches { margin: 0; }
.family-candidate-searches label { position: relative; }
.family-candidates { min-height: 0; padding: 0; border: 0; background: transparent; }
.family-candidates:not(:empty) { position: absolute; z-index: 3; top: calc(100% + 4px); right: 0; left: 0; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 24px rgba(36,61,55,.12); }
.family-candidate { justify-content: flex-start; min-height: 44px; padding: 8px 10px; border-radius: 6px; text-align: left; cursor: grab; }
.family-link-selection { min-height: 22px; margin: 14px 0 10px; color: var(--muted); font-size: .82rem; }
.family-add-form > .primary-admin-action { min-height: 44px; }
.section-intro { margin: -4px 0 0; color: var(--muted); }
.reference-administration { max-width: 900px; }
@media (max-width: 700px) {
  .content { width: min(100% - 32px, 970px); padding: 24px 0 42px; }
  .app-header, .profile-header { padding-inline: 16px; }
  .profile-page[data-page="first-time-onboarding"] .onboarding-card {
    width: calc(100% - 24px);
    margin: 12px auto 28px;
    padding: 18px 16px 20px;
    border-radius: 14px;
  }
  .profile-page[data-page="first-time-onboarding"] .onboarding-card h1 {
    font-size: 1.55rem;
    line-height: 1.2;
  }
  #first-time-onboarding-form { gap: 16px; margin-top: 18px; }
  #first-time-onboarding-form .onboarding-usage-options,
  .onboarding-required-fields,
  .onboarding-optional-fields { grid-template-columns: 1fr; }
  #first-time-onboarding-form .onboarding-usage-options > legend,
  .onboarding-required-fields > .field-help,
  .onboarding-optional-fields > .field-help,
  .onboarding-optional-fields > .onboarding-goals { grid-column: auto; }
  #first-time-onboarding-form .onboarding-choice { min-height: 48px; }
  #first-time-onboarding-form .onboarding-goals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .onboarding-profile-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .onboarding-profile-actions button {
    width: 100%;
    min-width: 0;
  }
  .brand-link { gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-link strong { display: inline; font-size: .88rem; }
  h1, .welcome-row h1, .profile-card h1, .admin-panel h1 { font-size: 1.72rem; }
  h2, .section-heading h2 { font-size: 1.3rem; }
  .student-resume { grid-template-columns: 1fr; }
  .primary-learning-action { width: 100%; }
  .account-secondary-panel { inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .admin-detail-dialog { width: 100vw; max-width: none; border-left: 0; }
  .app-card { grid-template-columns: 58px minmax(0,1fr); }
  .app-art { min-height: 0; }
  .login-toolbar .mobile-brand { display: flex; }
  .education-settings-card .detail-list, .family-slots, .family-slot-group, .family-slot-group.children, .detail-actions { grid-template-columns: 1fr; }
  .family-slot-group h4 { grid-column: auto; }
  .family-link-actions > div, .pending-family-links > div { align-items: stretch; flex-direction: column; }
  #people .admin-table-wrap { overflow: visible; }
  #people .admin-table { min-width: 0; }
  #people .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  #people .admin-table tbody, #people .admin-table tr, #people .admin-table td { display: block; width: 100%; }
  #people .admin-table tr { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  #people .admin-table td { min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  #people .admin-table td::before { display: block; margin-bottom: 4px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  #people .admin-table td:first-child, #people .admin-table td:last-child { grid-column: 1 / -1; }
  html[lang="ko"] #people .admin-table td:nth-child(1)::before { content: "사용자"; }
  html[lang="ko"] #people .admin-table td:nth-child(2)::before { content: "역할"; }
  html[lang="ko"] #people .admin-table td:nth-child(3)::before { content: "계정 · 가입"; }
  html[lang="ko"] #people .admin-table td:nth-child(4)::before { content: "이용 상태"; }
  html[lang="en"] #people .admin-table td:nth-child(1)::before { content: "User"; }
  html[lang="en"] #people .admin-table td:nth-child(2)::before { content: "Role"; }
  html[lang="en"] #people .admin-table td:nth-child(3)::before { content: "Account · signup"; }
  html[lang="en"] #people .admin-table td:nth-child(4)::before { content: "Plan"; }
  html[lang="ko"] #people .admin-table td:nth-child(5)::before { content: "RED 이용"; }
  html[lang="en"] #people .admin-table td:nth-child(5)::before { content: "RED access"; }
  #people .admin-table td:nth-child(6)::before { content: none; }
  #people .admin-table td:nth-child(6) button { width: 100%; min-height: 44px; }
}
.content { width: min(1080px, calc(100% - 48px)); padding: 42px 0 96px; }
.welcome-row { margin-bottom: 32px; }
.welcome-row h1 { max-width: 760px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 500; }
html[lang="ko"] .welcome-row h1 { font-weight: 650; }
.app-header, .profile-header { background: #faf8f2; backdrop-filter: none; }
.account-settings > summary { border-radius: 999px; background: #fffdf7; gap: 8px; max-width: 240px; overflow-wrap: anywhere; }
.account-settings > summary::before { content: none; }
.settings-panel { background: #fffdf7; width: min(290px, calc(100vw - 32px)); padding: 16px; gap: 10px; border-radius: 16px; }
.settings-panel button, .settings-panel a { justify-content: flex-start; background: transparent; border-color: transparent; }
.settings-panel .language-settings { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.student-resume { grid-template-columns: 78px minmax(0,1fr) auto; gap: 26px; padding: 28px; background: #eaf0e4; border: 1px solid #ccd9c7; border-radius: 14px; margin-bottom: 42px; }
.student-resume h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; }
.resume-book { min-height: 112px; padding: 10px 9px 12px 13px; background: #31564a; color: #fff8df; border-radius: 2px 7px 7px 2px; border-left: 5px solid #749080; box-shadow: 3px 5px 9px #203c3020; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; overflow-wrap: anywhere; }
.resume-book small { font-size: .45rem; letter-spacing: .08em; }
.resume-book span { font: .88rem/1.25 Georgia,serif; }
.resume-location { color: var(--muted); margin: 10px 0 0; }
.primary-learning-action { border-radius: 9px; padding: 13px 22px; white-space: nowrap; }
.hub-apps .section-heading { margin-bottom: 20px; }
.app-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.app-card { min-height: 220px; grid-template-columns: 64px minmax(0,1fr); background: #eef2e8; border-radius: 13px; box-shadow: none; }
.app-card.ielts { background: #f2eadb; }
.app-card.textbook { background: #e7efef; }
.app-card-body { padding: 22px; }
.app-card-body h3 { font-size: 1.4rem; font-weight: 500; }
.app-card[data-launch-state="READY"] .app-status, .app-card[data-launch-state="READY"] small { display: none; }
.app-card .launch-control { margin-top: 18px; }
.app-art { background: transparent !important; color: #365c4d !important; border-right: 1px solid #788c7026; font: 2.8rem Georgia,serif; }
.guardian-overview { background: transparent; border: 0; padding: 0; box-shadow: none; }
.learner-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.learner-card { flex: 1 1 220px; max-width: 360px; padding: 16px; background: #f0efe5; border-radius: 12px; }
.learner-card[aria-pressed="true"] { background: #e5eee0; border-color: #63846b; }
.selected-student-section { padding: 24px 0 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.selected-student-section .current-book { background: #ecefe3; border-radius: 12px; padding: 24px; }
.selected-student-actions { border: 0; padding: 16px 0; }
.selected-student-actions p { margin-top: 8px; font-size: .8rem; }
.admin-content { width: min(1120px, calc(100% - 48px)); }
.admin-panel { background: #fcfaf4; box-shadow: none; border-radius: 14px; }
.primary-nav { justify-content: center; gap: 12px; }
.primary-nav a[aria-current="page"] { color: #fff; background: #196c53; box-shadow: none; }
.family-card { background: #eff2e7; border-radius: 12px; }
.family-slot:not(.is-filled) { min-height: 42px; font-size: .8rem; }
.family-link-actions, .family-add-disclosure, .account-security-details { color: var(--muted); }
.family-link-actions > summary, .family-add-disclosure > summary, .account-security-details > summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--green); font-weight: 650; }
.family-link-actions:not([open]) > div { display: none; }
.family-add-disclosure { border-top: 1px solid var(--line); margin-top: 20px; }
.pending-family-links:empty { display: none; }
.detail-actions { grid-template-columns: 1fr; }
.account-security-details { grid-column: 1 / -1; margin-top: 12px; }
@media (max-width: 700px) {
 .content, .admin-content { width: calc(100% - 32px); padding-top: 28px; }
 .student-resume { grid-template-columns: 58px minmax(0,1fr); gap: 18px; padding: 20px; }
 .resume-book { min-height: 90px; padding: 8px; }
 .student-resume .primary-learning-action { grid-column: 1 / -1; }
 .student-resume h2 { font-size: 1.45rem; }
 .app-grid { grid-template-columns: 1fr; }
 .settings-panel { position: absolute; left: auto; right: 0; top: calc(100% + 8px); }
 .learner-grid { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
 .learner-card { flex: 0 0 min(260px,82vw); }
 .guardian-overview > .section-heading { align-items: center; }
 .selected-student-section { padding-top: 16px; }
 .family-slot-group, .family-slot-group.children { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .family-slot-group h4 { grid-column: 1 / -1; }
 .app-card-body { padding: 18px; }
}

.mocha-launcher { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; }
.mocha-launcher > summary { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 7px 15px 7px 8px; border: 1px solid #d4d8c9; border-radius: 999px; background: #fffdf5; color: #216c53; box-shadow: 0 5px 20px #253c2914; cursor: pointer; font: 600 .85rem system-ui, sans-serif; list-style: none; }
.mocha-launcher > summary::-webkit-details-marker { display: none; }
.mocha-face { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #efd1ad; color: #6f462d; font: 22px Georgia, serif; }
.mocha-preview { position: absolute; right: 0; bottom: 59px; width: min(310px, calc(100vw - 40px)); padding: 22px; border: 1px solid #d4d8c9; border-radius: 18px; background: #fffdf5; box-shadow: 0 10px 32px #253c291c; }
.mocha-preview h2 { margin: 8px 0; font-size: 1.3rem; }
.mocha-preview p { line-height: 1.6; }
.mocha-subject { font-weight: 650; color: #216c53; }
body:has(dialog[open]) .mocha-launcher { display: none; }
.app-footer { padding-bottom: 82px; }

/* Figma 44:57 · Shared family · tablet-first Hub home. */
.family-shell {
  --family-paper: #f7f8f3;
  --family-surface: #fff;
  --family-ink: #193d34;
  --family-green: #193d34;
  --family-muted: #566c64;
  --family-wash: #e3eee7;
  --family-line: #d6dfd8;
  --family-accent: #daef97;
  min-height: 100vh;
  color: var(--family-ink);
  background: var(--family-paper);
  font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 25px;
}
.family-shell button, .family-shell input, .family-shell select, .family-shell textarea, .family-shell summary {
  font-family: inherit;
}

@media (min-width: 981px) {
  html.hub-mocha-docked body {
    overflow-x: hidden;
  }
  html.hub-mocha-docked .family-shell {
    width: calc(100% - 420px);
    min-width: 0;
    transition: width .18s ease;
  }
  html.hub-mocha-docked .family-shell .family-header {
    padding-left: max(24px, calc((100vw - 420px - 1080px) / 2));
    padding-right: max(24px, calc((100vw - 420px - 1080px) / 2));
  }
  html.hub-mocha-docked .family-shell .family-local-nav,
  html.hub-mocha-docked .family-shell .family-content {
    width: min(1080px, calc(100% - 48px));
  }
  html.hub-mocha-docked .family-shell .family-footer {
    padding-left: max(24px, calc((100vw - 420px - 1080px) / 2));
    padding-right: max(24px, calc((100vw - 420px - 1080px) / 2));
  }
}
.family-shell h1, .family-shell h2, .family-shell h3, .family-shell .family-brand strong {
  font-family: Manrope, "Segoe UI", Arial, sans-serif;
  color: var(--family-ink);
  letter-spacing: 0;
}
html[lang="ko"] .family-shell h1, html[lang="ko"] .family-shell h2, html[lang="ko"] .family-shell h3,
html[lang="en"] .family-shell h1, html[lang="en"] .family-shell h2, html[lang="en"] .family-shell h3 {
  font-family: Manrope, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  line-height: inherit;
}
.family-shell .family-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 236px 240px minmax(24px, 1fr) 108px 176px;
  gap: 24px;
  width: 100%;
  min-height: 80px;
  padding: 0 max(32px, calc((100vw - 1080px) / 2));
  border: 0;
  border-bottom: 1px solid rgba(214,223,216,.35);
  background: var(--family-surface);
  backdrop-filter: none;
}
.family-shell .family-brand {
  width: 236px;
  color: var(--family-ink);
}
.family-shell .family-brand .brand-mark { display: none; }
.family-shell .family-brand strong {
  display: inline;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}
.family-app-switcher { position: relative; width: 240px; }
.family-app-switcher > summary,
.family-shell .family-header .account-settings > summary {
  display: flex;
  width: 100%;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  color: var(--family-ink);
  background: var(--family-paper);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  list-style: none;
  cursor: pointer;
}
.family-app-switcher > summary::-webkit-details-marker,
.family-shell .family-header .account-settings > summary::-webkit-details-marker { display: none; }
.family-app-switcher-menu {
  position: absolute;
  z-index: 32;
  top: 52px;
  left: 0;
  display: grid;
  width: 240px;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--family-line);
  border-radius: 16px;
  background: var(--family-surface);
  box-shadow: 0 16px 38px rgba(25,61,52,.12);
}
.family-app-switcher-menu a, .family-app-switcher-menu button {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  color: var(--family-ink);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.family-app-switcher-menu button:disabled { color: var(--family-muted); cursor: default; opacity: .62; }
.family-app-switcher-menu a:hover, .family-app-switcher-menu button:not(:disabled):hover { background: var(--family-wash); }
.family-header-space { min-width: 0; }
.family-mocha-entry {
  width: 108px;
  height: 40px;
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 24px;
  color: var(--family-green);
  background: var(--family-wash);
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
}
.family-shell .family-header .account-settings { width: 176px; }
.family-shell .family-header .account-settings > summary {
  max-width: none;
  justify-content: flex-start;
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.family-shell .family-header .settings-panel {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  border-color: var(--family-line);
  border-radius: 16px;
  background: var(--family-surface);
}
.family-local-nav-wrap {
  width: 100%;
  height: 48px;
  background: var(--family-paper);
}
.family-local-nav {
  display: flex;
  width: min(1080px, calc(100% - 64px));
  height: 48px;
  align-items: center;
  gap: 32px;
  margin: 0 auto;
}
.family-local-nav a {
  min-width: 130px;
  color: var(--family-muted);
  font-size: 16px;
  line-height: 25px;
  text-decoration: none;
}
.family-local-nav a[aria-current="page"] { color: var(--family-green); font-weight: 700; }
.family-shell .family-content {
  width: min(1080px, calc(100% - 64px));
  padding: 24px 0 64px;
}
.family-home-intro { display: grid; gap: 8px; margin-bottom: 24px; }
.family-home-intro h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  line-height: 41px;
}
.family-home-intro > p { margin: 0; color: var(--family-muted); font-size: 13px; line-height: 20px; }
.family-home-intro .family-mode-switch { justify-self: start; margin-top: 4px; }
.family-section-label, .family-continuation-label {
  margin: 0;
  color: var(--family-green);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}
.family-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;
}
.family-today { display: grid; gap: 8px; margin-bottom: 24px; }
.family-shell .family-primary-continuation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  min-height: 188px;
  align-items: center;
  margin: 0;
  padding: 32px;
  border: 0;
  border-radius: 24px;
  color: #fff;
  background: var(--family-green);
}
.family-continuation-copy { display: grid; gap: 8px; min-width: 0; }
.family-shell .family-primary-continuation .family-continuation-label { color: var(--family-accent); }
.family-shell .family-primary-continuation h2 {
  margin: 0;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
}
.family-shell .family-primary-continuation .resume-location,
.family-shell .family-primary-continuation .learning-data-state {
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 16px;
  line-height: 25px;
}
.family-shell .family-primary-continuation .resume-last-read { color: rgba(255,255,255,.82); }
.family-shell .family-primary-continuation .primary-learning-action {
  width: 300px;
  min-height: 48px;
  padding: 11px 16px;
  border: 0;
  border-radius: 16px;
  color: var(--family-green);
  background: var(--family-accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
}
.family-shell .family-primary-continuation .primary-learning-action.is-disabled {
  color: var(--family-muted);
  background: #eef1e9;
}
.family-continue-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  min-height: 88px;
  align-items: center;
  margin: 0 0 24px;
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background: var(--family-wash);
}
.family-continue-strip > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.family-continue-strip strong { color: var(--family-green); font-size: 16px; line-height: 25px; }
.family-continue-location { color: var(--family-muted); font-size: 13px; line-height: 20px; }
.family-continue-strip > button {
  width: 300px;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid var(--family-line);
  border-radius: 16px;
  color: var(--family-green);
  background: var(--family-surface);
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  cursor: pointer;
}
.family-learning-spaces { margin: 0; padding: 0; }
.family-section-heading { margin: 0 0 16px; }
.family-section-heading h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}
.family-shell .family-learning-spaces .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.family-shell .family-learning-spaces .app-card {
  display: block;
  min-height: 206px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--family-surface);
  box-shadow: none;
}
.family-shell .family-learning-spaces .app-art { display: none; }
.family-shell .family-learning-spaces .app-card-body {
  display: grid;
  height: 100%;
  align-content: start;
  gap: 8px;
  padding: 24px;
}
.family-shell .family-learning-spaces .app-title-row { align-items: start; }
.family-shell .family-learning-spaces .app-card-body h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}
.family-shell .family-learning-spaces .app-card-body > p {
  margin: 0;
  color: var(--family-muted);
  font-size: 13px;
  line-height: 20px;
}
.family-shell .family-learning-spaces .state-pill {
  border-color: var(--family-line);
  color: var(--family-muted);
  background: var(--family-paper);
}
.family-shell .family-learning-spaces .app-card[data-launch-state="READY"] .state-pill { display: none; }
.family-shell .family-learning-spaces .app-card .launch-control,
.family-shell .family-learning-spaces .app-card[data-launch-state="READY"] .launch-control {
  justify-self: start;
  min-height: 44px;
  margin: 2px 0 0;
  padding: 8px 0;
  border: 0;
  color: var(--family-green);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  text-align: left;
}
.family-shell .family-learning-spaces .app-card[data-launch-state="READY"] .launch-control::after { content: " →"; }
.family-shell .family-learning-spaces .app-card .launch-control:disabled { color: var(--family-muted); }
.family-progress-zone { margin-top: 24px; }
.family-progress-zone:empty { display: none; }
.family-shell .reading-performance {
  padding: 20px;
  border: 1px solid var(--family-line);
  border-radius: 24px;
  background: var(--family-surface);
}
.family-shell .reading-performance h3 { font-family: Manrope, "Segoe UI", Arial, sans-serif; }
.family-shell .guardian-overview { padding: 0; }
.family-shell .learner-card { border-color: var(--family-line); border-radius: 16px; background: var(--family-surface); }
.family-shell .learner-card[aria-pressed="true"] { border-color: var(--family-green); background: var(--family-wash); }
.family-empty {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--family-line);
  border-radius: 24px;
  color: var(--family-muted);
  background: var(--family-surface);
}
.family-footer {
  padding: 16px max(32px, calc((100vw - 1080px) / 2)) 28px;
  border-top: 1px solid var(--family-line);
  color: var(--family-muted);
  background: var(--family-paper);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}

@media (max-width: 900px) {
  .family-shell .family-header {
    grid-template-columns: minmax(164px, 1fr) minmax(180px, 220px) 108px minmax(140px, 176px);
    gap: 12px;
    padding-inline: 24px;
  }
  .family-header-space { display: none; }
  .family-shell .family-brand { width: auto; }
  .family-app-switcher { width: 100%; }
  .family-app-switcher-menu { width: 100%; }
  .family-shell .family-header .account-settings { width: 100%; }
  .family-local-nav, .family-shell .family-content { width: calc(100% - 48px); }
  .family-shell .family-primary-continuation { grid-template-columns: minmax(0,1fr) 240px; padding: 28px; }
  .family-shell .family-primary-continuation .primary-learning-action { width: 240px; }
  .family-continue-strip { grid-template-columns: minmax(0,1fr) 240px; }
  .family-continue-strip > button { width: 240px; }
}
@media (max-width: 700px) {
  .family-shell .family-header {
    position: relative;
    grid-template-columns: 1fr auto auto;
    min-height: auto;
    padding: 14px 16px;
  }
  .family-app-switcher { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .family-mocha-entry { width: 88px; }
  .family-shell .family-header .account-settings { width: auto; min-width: 132px; }
  .family-local-nav, .family-shell .family-content { width: calc(100% - 32px); }
  .family-home-intro h1 { font-size: 30px; line-height: 37px; }
  .family-shell .family-primary-continuation { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .family-shell .family-primary-continuation .primary-learning-action { width: 100%; }
  .family-continue-strip { grid-template-columns: 1fr; gap: 14px; }
  .family-continue-strip > button { width: 100%; }
  .family-shell .family-learning-spaces .app-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }