/* ============================================================
   まなび動画ナビ — Design System V11 "Manabi Calm"
   白基調 / 淡い青のグラデーション / ネイビー文字 / カードUI
   ============================================================ */

:root {
  /* Brand palette */
  --navy: #1F2A44;          /* Deep Ink Navy: 見出し・主要文字 */
  --navy-soft: #3D4C6E;
  --mist: #EAF2FA;          /* Mist Blue: 淡い面 */
  --ivory: #FAF8F4;         /* Warm Ivory: やさしい背景 */
  --slate: #667085;         /* Soft Slate: 補足テキスト */
  --teal: #79AFA8;          /* Gentle Teal: 完了・前向き */
  --teal-deep: #4D8A82;
  --teal-soft: #EAF5F3;
  --gold: #C9A86A;          /* Muted Gold: おすすめ・星評価 */
  --gold-deep: #A8863D;
  --gold-soft: #FBF5E8;
  --blue: #2F6BFF;          /* Primary Blue: CTA */
  --blue-deep: #2456D6;
  --blue-soft: #EEF5FF;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --bg: #F7FAFF;
  --card: #FFFFFF;

  --ok: #1B7A55;
  --ok-soft: #E8F6EF;
  --warn: #B54708;
  --warn-soft: #FEF4E6;
  --bad: #B42318;
  --bad-soft: #FDECEA;

  --shadow-sm: 0 1px 2px rgba(31, 42, 68, .05), 0 2px 8px rgba(31, 42, 68, .04);
  --shadow-md: 0 2px 4px rgba(31, 42, 68, .04), 0 12px 32px rgba(31, 42, 68, .08);
  --shadow-lg: 0 4px 10px rgba(31, 42, 68, .05), 0 24px 56px rgba(31, 42, 68, .12);
  --shadow-cta: 0 8px 24px rgba(47, 107, 255, .28);

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --max: 1200px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--navy);
  font-size: 16px;
  line-height: 1.8;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 85% -80px, rgba(47, 107, 255, .07), transparent 62%),
    radial-gradient(900px 480px at -120px 340px, rgba(121, 175, 168, .09), transparent 60%),
    linear-gradient(180deg, #F7FAFF 0%, #EEF5FF 48%, #F7FAFF 100%);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.35; margin: 0 0 12px; letter-spacing: .01em; }
h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; line-height: 1.28; }
h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; }
h3 { font-size: clamp(17px, 2vw, 20px); font-weight: 700; }
p { margin: 0 0 14px; }
.lead { font-size: clamp(16px, 1.8vw, 18px); color: var(--slate); max-width: 46em; }
.muted { color: var(--slate); }
small, .small { font-size: 13px; }
code { background: var(--mist); border: 1px solid var(--border); padding: 2px 8px; border-radius: 8px; font-size: .88em; color: var(--navy); overflow-wrap: anywhere; word-break: normal; }
.code-block { white-space: pre-wrap; overflow: auto; background: var(--navy); color: #E7EEFA; padding: 16px 18px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.6; }
::selection { background: rgba(47, 107, 255, .18); }

:focus-visible { outline: 3px solid rgba(47, 107, 255, .45); outline-offset: 2px; border-radius: 6px; }

.skip-link { position: absolute; left: 16px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--radius-pill); z-index: 200; font-weight: 700; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--blue-deep); background: var(--blue-soft); border: 1px solid #D8E6FF; border-radius: var(--radius-pill); padding: 6px 14px; margin-bottom: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner { width: min(1600px, calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #4C82FF, var(--blue)); box-shadow: 0 4px 12px rgba(47, 107, 255, .30); }
.brand-mark svg { width: 20px; height: 20px; fill: currentColor; }
.brand-text { display: grid; line-height: 1.2; }
.brand-text strong { font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.brand-text small { font-size: 11px; color: var(--slate); margin-top: 2px; font-weight: 500; }
.site-nav-area { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: flex-end; }
.site-nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; margin-right: auto; margin-left: 12px; }
.site-nav a { color: var(--navy-soft); font-size: 14px; font-weight: 600; padding: 9px 13px; border-radius: 10px; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.site-nav a:hover { background: var(--blue-soft); color: var(--blue-deep); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: nowrap; }
.nav-actions > a { font-size: 14px; font-weight: 700; }
.nav-link { color: var(--navy); padding: 10px 12px; border-radius: 10px; }
.nav-link:hover { background: var(--mist); }
.guest-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--navy-soft); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 13px; white-space: nowrap; }
.guest-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.guest-pill strong { color: var(--navy); font-weight: 800; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); background: #fff; border-radius: 12px; cursor: pointer; padding: 0; place-items: center; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; margin: 2.5px auto; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.button, button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--navy); background: #fff;
  border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.button:hover, button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.button:active, button:active { transform: translateY(0); }
.primary, .primary-inline, .nav-cta, button.primary {
  background: linear-gradient(135deg, #d94c00, #c2410c 62%, #9a3412);
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 24px rgba(194, 65, 12, .28);
}
.primary:hover, .primary-inline:hover, .nav-cta:hover, button.primary:hover { background:linear-gradient(135deg,#c2410c,#9a3412);box-shadow:0 13px 30px rgba(154,52,18,.35);border-color:transparent; }
.button.dark, .btn-navy { background: var(--navy); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(31, 42, 68, .25); }
.button.ghost { background: transparent; box-shadow: none; }
.button.small, .small-button { min-height: 38px; padding: 7px 14px; font-size: 13.5px; border-radius: 11px; }
.button.large, .cta-big { min-height: 58px; padding: 14px 34px; font-size: 17px; border-radius: 16px; }
.cta-big small { display: block; font-size: 12px; font-weight: 500; opacity: .85; }
.cta-stack { display: grid; gap: 3px; text-align: center; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.loading-button { position: relative; pointer-events: none; opacity: .75; }
.loading-button::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .8s linear infinite; margin-left: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.inline-actions, .hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.inline-form { display: inline; }

/* ---------- Chips / badges ---------- */
.chip, .soft-pill, .badge, .step, .label, .score {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; line-height: 1.5;
  background: var(--mist); color: var(--navy-soft); border: 1px solid transparent;
}
.chip-blue, .step { background: var(--blue-soft); color: var(--blue-deep); border-color: #D8E6FF; }
.chip-teal, .label { background: var(--teal-soft); color: var(--teal-deep); border-color: #D3EAE6; }
.chip-gold, .score { background: var(--gold-soft); color: var(--gold-deep); border-color: #F0E3C8; }
.chip-navy { background: var(--navy); color: #fff; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.ng { background: var(--warn-soft); color: var(--warn); }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; border: 1px solid var(--border); background: #fff; color: var(--slate); }
.status-chip.done { background: var(--teal-soft); color: var(--teal-deep); border-color: #D3EAE6; }
.status-chip.watching { background: var(--blue-soft); color: var(--blue-deep); border-color: #D8E6FF; }
.status-chip.todo { background: var(--ivory); color: var(--slate); }
.star { color: var(--gold); }

/* ---------- Cards / panels ---------- */
.panel, .card, .mini-card, .side-card, .price-card, .auth-card, .auth-side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel, .card { padding: clamp(22px, 3vw, 32px); margin: 22px 0; }
.mini-card { padding: 22px; }
.side-card { padding: 22px; margin-bottom: 18px; }
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.section-head { margin: 40px 0 22px; text-align: center; }
.section-head .lead { margin: 0 auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.compact-grid { margin: 14px 0; }

/* ---------- Layout ---------- */
.container { width: min(var(--max), 100% - 32px); margin: 0 auto; padding: 26px 0 80px; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 20px; }
.aside-col { position: sticky; top: 88px; }

/* ---------- Mode banner / alerts ---------- */
.mode-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 11px 18px; border-radius: var(--radius-md); font-size: 13.5px; border: 1px solid var(--border); background: #fff; color: var(--navy-soft); box-shadow: var(--shadow-sm); }
.mode-banner::before { content: "ⓘ"; font-weight: 700; color: var(--blue); }
.mode-banner strong { color: var(--navy); }
.mode-banner.beta_free { background: var(--blue-soft); border-color: #D8E6FF; }
.mode-banner.free { background: var(--teal-soft); border-color: #D3EAE6; }
.mode-banner.free::before { color: var(--teal-deep); }
.mode-banner.paid { background: var(--gold-soft); border-color: #F0E3C8; }
.mode-banner.paid::before { color: var(--gold-deep); }
.alert { padding: 14px 18px; border-radius: var(--radius-md); margin: 16px 0; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-sm); font-size: 14.5px; }
.alert.error { background: var(--bad-soft); border-color: #F5C6C0; color: var(--bad); }
.alert.warning { background: var(--warn-soft); border-color: #F6DCB8; color: var(--warn); }
.alert.success { background: var(--ok-soft); border-color: #BFE5D2; color: var(--ok); }
.alert.info { background: var(--blue-soft); border-color: #D8E6FF; color: var(--navy-soft); }

/* ---------- Forms ---------- */
label { font-weight: 700; font-size: 14px; color: var(--navy); display: block; }
input:not([type]),
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
textarea, select {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--navy);
  background: #fff; border: 1.5px solid #D6E2F0; border-radius: 14px;
  min-height: 50px; padding: 12px 16px; outline: none; margin-top: 6px;
  line-height: 1.5;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input[type="search"] { appearance: none; -webkit-appearance: none; }
textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, .14); }
input::placeholder, textarea::placeholder { color: #9AA7BC; }
.search-form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 6px; }
.radio-stack { display: grid; gap: 10px; margin: 12px 0; }
.radio-stack label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; background: #fff; transition: border-color .15s ease, background .15s ease; }
.radio-stack label:hover { border-color: var(--blue); }
.radio-stack input { width: auto; margin: 4px 0 0; accent-color: var(--blue); }
.toggle-line { display: flex !important; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.toggle-line input { width: auto !important; margin: 0 !important; accent-color: var(--blue); transform: scale(1.25); }

/* Big search card (無料体験) */
.search-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.search-card-body { padding: clamp(22px, 3.4vw, 36px); }
.search-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.search-card-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: clamp(19px, 2.4vw, 24px); }
.search-card-head .icon-bubble { color: var(--blue); }
.icon-bubble { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--blue-soft); flex-shrink: 0; }
.icon-bubble svg { width: 18px; height: 18px; }
.input-shell { position: relative; }
.input-shell textarea { min-height: 116px; font-size: 16.5px; padding: 18px 18px 34px; border-radius: 16px; margin-top: 0; }
.char-counter { position: absolute; right: 16px; bottom: 12px; font-size: 12.5px; color: var(--slate); pointer-events: none; background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 6px; }
.example-label { font-size: 13.5px; font-weight: 700; color: var(--navy-soft); margin: 18px 0 10px; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chips button { justify-content: flex-start; gap: 9px; min-height: 48px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; border-radius: 12px; box-shadow: none; text-align: left; white-space: nowrap; word-break: keep-all; line-break: strict; min-width: 0; }
.chips button:hover { border-color: var(--blue); background: var(--blue-soft); transform: none; box-shadow: none; }
.chips button.is-selected { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); }
.chips button .chip-ico { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--blue-soft); color: var(--blue-deep); flex-shrink: 0; }
.chips button .chip-ico svg { width: 15px; height: 15px; }
.search-card-divider { border: 0; border-top: 1px solid var(--border); margin: 0; }
.time-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: clamp(18px, 2.6vw, 26px) clamp(22px, 3.4vw, 36px); }
.time-row-label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; color: var(--navy); }
.time-row-label .chip { font-weight: 600; }
.time-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.time-pill { position: relative; }
.time-pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.time-pill span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 18px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; font-size: 14px; font-weight: 600; color: var(--navy-soft); transition: all .15s ease; }
.time-pill input:checked + span { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); font-weight: 800; box-shadow: 0 0 0 3px rgba(47, 107, 255, .10); }
.time-pill input:focus-visible + span { outline: 3px solid rgba(47, 107, 255, .45); outline-offset: 2px; }
.search-submit-wrap { text-align: center; margin: 26px 0 10px; }
.search-submit-wrap .cta-big { width: min(560px, 100%); }
.assurance-note { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--slate); font-size: 14px; margin-top: 16px; }
.assurance-note svg { width: 17px; height: 17px; color: var(--teal-deep); flex-shrink: 0; }

/* Benefit strip (登録するともっと便利に) */
.benefit-strip { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-lg); padding: 24px clamp(18px, 3vw, 32px); margin: 26px 0; }
.benefit-strip h2 { text-align: center; font-size: 17px; margin-bottom: 18px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.benefit-item { display: flex; gap: 12px; align-items: flex-start; }
.benefit-item .icon-bubble { background: var(--mist); color: var(--navy-soft); }
.benefit-item strong { display: block; font-size: 14.5px; color: var(--navy); }
.benefit-item small { color: var(--slate); font-size: 12.5px; line-height: 1.6; display: block; margin-top: 2px; }

/* ---------- Landing ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 40px); }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #D8E6FF; color: var(--blue-deep); font-size: 13.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 8px 18px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.hero h1 { margin-bottom: 16px; }
.hero .lead { margin-bottom: 8px; }
.hero-note { display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: 13.5px; margin-top: 14px; }
.hero-note svg { width: 16px; height: 16px; color: var(--teal-deep); }
.hero-visual { position: relative; }
.hero-preview { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; display: grid; gap: 12px; }
.hero-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-preview-head strong { font-size: 14.5px; }
.hero-preview-input { display: flex; align-items: center; gap: 10px; border: 1.5px solid #D6E2F0; border-radius: 12px; padding: 11px 14px; color: var(--slate); font-size: 13.5px; background: var(--bg); }
.hero-preview-input svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }
.hero-preview-item { display: flex; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: #fff; }
.hero-preview-item .hp-step { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.hero-preview-item .hp-body { flex: 1; min-width: 0; }
.hero-preview-item .hp-body strong { display: block; font-size: 13.5px; line-height: 1.45; }
.hero-preview-item .hp-body small { color: var(--slate); font-size: 12px; }
.hero-preview-item .hp-star { color: var(--gold-deep); font-size: 12.5px; font-weight: 800; white-space: nowrap; background: var(--gold-soft); border-radius: 8px; padding: 4px 8px; }
.hero-preview-foot { display: flex; align-items: center; justify-content: space-between; color: var(--slate); font-size: 12.5px; }
.value-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0; }
.value-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.value-card .icon-bubble { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px; }
.value-card .icon-bubble svg { width: 22px; height: 22px; }
.value-card h3 { margin-bottom: 8px; }
.value-card p { color: var(--slate); font-size: 14px; margin: 0; }
.pain-solution { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0; }
.pain-panel, .solution-panel { border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 30px); border: 1px solid var(--border); }
.pain-panel { background: var(--ivory); }
.solution-panel { background: linear-gradient(160deg, var(--blue-soft), #fff 75%); border-color: #D8E6FF; }
.check-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 11px; }
.check-list li { position: relative; padding-left: 30px; font-size: 14.5px; color: var(--navy-soft); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-deep); font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 3px; }
.pain-panel .check-list li::before { content: "✕"; background: #F1E9E0; color: #A08B72; }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0; }
.how-step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px; text-align: center; box-shadow: var(--shadow-sm); position: relative; }
.how-step .how-no { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.how-step strong { display: block; font-size: 15px; margin-bottom: 6px; }
.how-step p { color: var(--slate); font-size: 13px; margin: 0; }
.faq-list { display: grid; gap: 12px; margin: 22px 0; }
.faq-list details { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0; overflow: hidden; }
.faq-list summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "＋"; color: var(--blue); font-weight: 700; flex-shrink: 0; }
.faq-list details[open] summary::after { content: "－"; }
.faq-list .faq-a { padding: 0 22px 18px; color: var(--slate); font-size: 14.5px; }
.cta-panel { background: linear-gradient(135deg, #3B76FF, var(--blue-deep)); border-radius: var(--radius-lg); color: #fff; text-align: center; padding: clamp(34px, 5vw, 56px) 24px; margin: 30px 0; box-shadow: var(--shadow-cta); }
.cta-panel h2, .cta-panel p { color: #fff; }
.cta-panel .muted, .cta-panel .lead { color: rgba(255, 255, 255, .85); margin-left: auto; margin-right: auto; }
.cta-panel .button { background: #fff; color: var(--blue-deep); border-color: transparent; }
.pricing-teaser { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------- Result / route page ---------- */
.result-head { margin: 14px 0 10px; }
.result-head h1 { font-size: clamp(28px, 4vw, 42px); }
.result-head .lead strong { color: var(--blue-deep); }
.guest-thin-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--blue-soft); border: 1px solid #D8E6FF; color: var(--navy-soft); font-size: 13.5px; border-radius: var(--radius-md); padding: 10px 16px; margin: 14px 0; }
.guest-thin-banner a { font-weight: 700; }
.io-cards { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; margin: 18px 0; }
.io-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.io-card .io-label { font-size: 12.5px; font-weight: 700; color: var(--slate); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.io-card .io-label svg { width: 15px; height: 15px; color: var(--blue); }
.input-quote { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.input-quote a { color: var(--slate); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.intent-summary { font-size: 14px; color: var(--navy-soft); margin: 0; }
.intent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.intent-grid > div { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.intent-grid span { display: block; font-size: 11.5px; color: var(--slate); font-weight: 600; }
.intent-grid strong { font-size: 14px; color: var(--navy); }
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 18px 0 8px; overflow: hidden; }
.metric-cell { padding: 20px 18px; display: flex; gap: 12px; align-items: center; border-left: 1px solid var(--border); }
.metric-cell:first-child { border-left: 0; }
.metric-cell .icon-bubble { width: 40px; height: 40px; border-radius: 50%; }
.metric-cell .metric-text span { display: block; font-size: 12px; color: var(--slate); font-weight: 600; }
.metric-cell .metric-text strong { font-size: 21px; line-height: 1.25; color: var(--navy); letter-spacing: .01em; }
.metric-cell .metric-text strong small { font-size: 13px; color: var(--slate); font-weight: 600; }
.metric-footnote { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--navy-soft); font-size: 13.5px; font-weight: 600; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 18px; width: fit-content; margin: 0 auto 8px; }
.metric-footnote svg { width: 16px; height: 16px; color: var(--teal-deep); }

/* Timeline + video cards */
.route-timeline { display: grid; gap: 26px; margin: 22px 0; }
.route-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
.step-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.step-marker { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; text-align: center; line-height: 1.05; box-shadow: 0 6px 16px rgba(31, 42, 68, .25); flex-shrink: 0; }
.step-marker small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; opacity: .8; }
.step-marker b { font-size: 18px; }
.step-role { font-size: 11.5px; font-weight: 700; color: var(--teal-deep); background: var(--teal-soft); border: 1px solid #D3EAE6; border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; }
.step-line { flex: 1; width: 2px; background: linear-gradient(180deg, var(--border-strong), transparent); border-radius: 2px; min-height: 22px; }
.route-step:last-child .step-line { display: none; }
.video-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .18s ease; }
.video-card:hover { box-shadow: var(--shadow-md); }
.video-card-main { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; padding: 20px; }
.video-thumb { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--navy); aspect-ratio: 16 / 9; align-self: start; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; padding: 0; display: grid; place-items: center; border-radius: 0; box-shadow: none; min-height: 0; }
.yt-facade:hover { transform: none; box-shadow: none; background: rgba(31, 42, 68, .18); }
.yt-facade .play-badge { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--blue); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(31, 42, 68, .35); transition: transform .15s ease; }
.yt-facade:hover .play-badge { transform: scale(1.08); }
.yt-facade .play-badge svg { width: 22px; height: 22px; margin-left: 2px; }
.duration-badge { position: absolute; right: 8px; bottom: 8px; background: rgba(15, 21, 38, .82); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px; pointer-events: none; }
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.video-title-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.video-title-row h2 { font-size: clamp(16.5px, 2vw, 19px); line-height: 1.5; margin: 0; }
.rec-badge { flex-shrink: 0; text-align: center; background: var(--gold-soft); border: 1px solid #F0E3C8; border-radius: 12px; padding: 8px 14px; }
.rec-badge span { display: block; font-size: 10.5px; font-weight: 700; color: var(--gold-deep); }
.rec-badge strong { font-size: 18px; color: var(--gold-deep); }
.video-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--slate); font-size: 13px; }
.video-meta span { display: inline-flex; align-items: center; gap: 5px; }
.video-meta svg { width: 14px; height: 14px; }
.reason-block { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: var(--navy-soft); }
.reason-block b { display: block; font-size: 12px; color: var(--navy); margin-bottom: 2px; }
.video-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.video-extra { border-top: 1px solid var(--border); padding: 16px 20px; }
.video-extra details summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--blue-deep); }
.score-list { columns: 2; font-size: 13px; color: var(--slate); margin: 10px 0 0; padding-left: 18px; }
.quiz-box { background: var(--ivory); border-top: 1px solid var(--border); padding: 18px 20px; }
.quiz-box h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.quiz-box h3 svg { width: 17px; height: 17px; color: var(--gold-deep); }
.quiz-box ol { margin: 8px 0 0; padding-left: 22px; color: var(--navy-soft); font-size: 14px; display: grid; gap: 6px; }
.feedback-box { background: var(--teal-soft); border-top: 1px solid #D3EAE6; padding: 18px 20px; }
.feedback-box strong { font-size: 14px; }
.feedback-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.feedback-actions button { min-height: 42px; padding: 8px 16px; font-size: 13.5px; border-radius: var(--radius-pill); box-shadow: none; background: #fff; }
.feedback-actions button:hover { border-color: var(--teal); transform: none; }
.feedback-message { font-size: 13px; margin: 8px 0 0; }

/* Save CTA */
.save-cta { display: flex; align-items: center; gap: 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(22px, 3vw, 32px); margin: 26px 0; }
.save-cta .save-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; }
.save-cta .save-icon svg { width: 34px; height: 34px; }
.save-cta-body { flex: 1; min-width: 0; }
.save-cta-body h2 { font-size: clamp(18px, 2.4vw, 22px); margin-bottom: 6px; }
.save-cta-body p { color: var(--slate); font-size: 14px; margin: 0; }
.save-cta-actions { display: grid; gap: 10px; justify-items: stretch; min-width: 220px; }
.save-cta-actions .fineprint { text-align: center; font-size: 12px; color: var(--slate); }

/* Sidebar cards */
.side-card h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; margin-bottom: 12px; }
.side-card h3 svg { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; }
.side-card p { font-size: 13.5px; color: var(--slate); }
.side-point { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); }
.side-point:first-of-type { border-top: 0; padding-top: 0; }
.side-point .icon-bubble { width: 34px; height: 34px; border-radius: 10px; background: var(--teal-soft); color: var(--teal-deep); }
.side-point strong { display: block; font-size: 13.5px; color: var(--navy); }
.side-point small { color: var(--slate); font-size: 12.5px; line-height: 1.6; display: block; }
.locked-illust { background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 18px; text-align: center; color: var(--slate); font-size: 13px; margin: 12px 0; }
.locked-illust svg { width: 34px; height: 34px; color: var(--blue); margin: 0 auto 6px; }

/* Progress */
.progress-bar { width: 100%; height: 8px; background: var(--mist); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar.large { height: 12px; margin: 14px 0; }
.progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, #4C82FF, var(--blue)); border-radius: var(--radius-pill); transition: width .4s ease; }
.progress-bar.teal span { background: linear-gradient(90deg, var(--teal), var(--teal-deep)); }
.progress-line { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--slate); }
.progress-line .progress-bar { flex: 1; }

/* ---------- Watch page ---------- */
.watch-topline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.watch-topline .back-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--blue-deep); font-size: 14.5px; }
.watch-topline h1 { font-size: clamp(19px, 2.6vw, 24px); margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.player-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.player-frame { aspect-ratio: 16 / 9; background: var(--navy); }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.ai-hint { display: flex; gap: 16px; align-items: center; padding: 18px 22px; background: var(--blue-soft); border-top: 1px solid #D8E6FF; }
.ai-hint .icon-bubble { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--gold-deep); }
.ai-hint .icon-bubble svg { width: 22px; height: 22px; }
.ai-hint-body { flex: 1; min-width: 0; }
.ai-hint-body strong { display: block; font-size: 14px; }
.ai-hint-body p { margin: 2px 0 0; font-size: 13.5px; color: var(--navy-soft); }
.watch-info-list { display: grid; gap: 0; }
.watch-info-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.watch-info-list > div:first-child { border-top: 0; padding-top: 0; }
.watch-info-list span { color: var(--slate); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.watch-info-list strong { text-align: right; font-size: 13.5px; }
.focus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.focus-list li { position: relative; padding-left: 28px; font-size: 13.5px; color: var(--navy-soft); }
.focus-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; color: var(--blue); font-weight: 800; }
.status-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.status-buttons button { flex-direction: column; gap: 6px; min-height: 74px; padding: 10px 6px; font-size: 12.5px; border-radius: 14px; box-shadow: none; }
.status-buttons button svg { width: 20px; height: 20px; }
.status-buttons button.is-current { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); }
.status-buttons button.is-current.done-style { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-deep); }
.watch-bottom-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 14px 18px; margin: 22px 0; }
.watch-bottom-center { text-align: center; font-size: 13.5px; color: var(--slate); font-weight: 600; min-width: 0; }
.watch-bottom-center b { color: var(--navy); display: block; font-size: 14.5px; }

/* ---------- My page (dashboard) ---------- */
.dash-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr) 296px; gap: 22px; align-items: start; margin-top: 8px; }
.dash-nav { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm); position: sticky; top: 88px; display: grid; gap: 4px; }
.dash-nav a, .dash-nav .dash-nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--navy-soft); }
.dash-nav a:hover { background: var(--mist); }
.dash-nav a.active { background: var(--blue-soft); color: var(--blue-deep); font-weight: 800; }
.dash-nav svg { width: 17px; height: 17px; flex-shrink: 0; }
.dash-nav .dash-nav-item.soon { color: #9AA7BC; cursor: default; }
.dash-nav .soon-chip { margin-left: auto; font-size: 10px; font-weight: 700; background: var(--mist); color: var(--slate); border-radius: var(--radius-pill); padding: 2px 8px; }
.dash-nav hr { border: 0; border-top: 1px solid var(--border); margin: 8px 4px; }
.dash-nav .primary { margin-top: 8px; }
.dash-greet { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-greet h1 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 4px; }
.dash-greet p { color: var(--slate); margin: 0; }
.plan-chip-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); }
.plan-chip-card .plan-name { font-weight: 800; color: var(--gold-deep); display: flex; align-items: center; gap: 7px; }
.plan-chip-card small { color: var(--slate); display: block; font-size: 11.5px; }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.stat-card .stat-text span { display: block; font-size: 12px; color: var(--slate); font-weight: 600; }
.stat-card .stat-text strong { font-size: 22px; color: var(--navy); line-height: 1.3; }
.stat-card .stat-text strong small { font-size: 12px; color: var(--slate); font-weight: 600; }
.ring { --p: 0; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--mist) 0); display: grid; place-items: center; flex-shrink: 0; }
.ring::after { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--card); }
.next-card { display: flex; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px; }
.next-thumb { position: relative; width: 190px; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; flex-shrink: 0; background: var(--navy); }
.next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-body { flex: 1; min-width: 0; }
.next-body h3 { font-size: 15.5px; margin-bottom: 6px; }
.next-actions { display: grid; gap: 8px; min-width: 160px; }
.route-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 14px 0 22px; }
.route-card-s { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: transform .16s ease, box-shadow .16s ease; }
.route-card-s:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.route-card-s h3 { font-size: 15px; margin: 0; line-height: 1.5; }
.route-card-s h3 a { color: var(--navy); }
.route-card-s .rc-meta { font-size: 12.5px; color: var(--slate); }
.rc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 4px; }
.dash-section-head h2 { font-size: 18px; margin: 0; }
.dash-section-head a { font-size: 13.5px; font-weight: 700; }
.theme-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hint-card { background: linear-gradient(160deg, var(--gold-soft), #fff 80%); border-color: #F0E3C8; }
.hint-card h3 svg { color: var(--gold-deep); }

/* ---------- Pricing ---------- */
.pricing-hero { text-align: center; padding: clamp(24px, 4vw, 48px) 0 10px; }
.pricing-hero .lead { margin: 0 auto 14px; }
.assure-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
.assure-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: flex; gap: 13px; align-items: flex-start; box-shadow: var(--shadow-sm); }
.assure-item .icon-bubble { background: var(--teal-soft); color: var(--teal-deep); }
.assure-item strong { display: block; font-size: 14.5px; }
.assure-item small { color: var(--slate); font-size: 12.5px; line-height: 1.6; display: block; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 26px 0; align-items: stretch; }
.price-card { padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.price-card.featured { border: 2px solid var(--blue); box-shadow: var(--shadow-md); }
.featured-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #4C82FF, var(--blue-deep)); color: #fff; font-size: 12px; font-weight: 800; border-radius: var(--radius-pill); padding: 4px 16px; box-shadow: var(--shadow-cta); white-space: nowrap; }
.price-card .plan-label { font-size: 13px; font-weight: 700; color: var(--slate); }
.price-card h2 { font-size: 20px; margin: 0; }
.price { font-size: 34px; font-weight: 800; color: var(--navy); letter-spacing: .01em; margin: 0; }
.price small { font-size: 13px; color: var(--slate); font-weight: 600; }
.price-card .check-list { flex: 1; }
.price-card form { display: grid; gap: 8px; }
.interest-mini-form input { margin-top: 0; }
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-sm); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 14px; }
.compare-table th, .compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); text-align: center; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; font-weight: 600; color: var(--navy-soft); }
.compare-table thead th { background: var(--mist); color: var(--navy); font-weight: 800; font-size: 13.5px; }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table .yes { color: var(--teal-deep); font-weight: 800; }
.compare-table .no { color: #B6C0D2; }

/* ---------- Auth ---------- */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: start; max-width: 980px; margin: 26px auto; }
.auth-wrap.single { grid-template-columns: minmax(280px, 560px); justify-content: center; }
.auth-card { padding: clamp(26px, 4vw, 40px); }
.auth-card h1 { font-size: clamp(22px, 3vw, 28px); }
.auth-side { padding: clamp(24px, 3vw, 32px); background: linear-gradient(160deg, var(--blue-soft), #fff 70%); }
.google-login-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 1.5px solid var(--border); background: #fff; border-radius: 14px; font-weight: 700; font-size: 15px; color: var(--navy); box-shadow: var(--shadow-sm); margin: 18px 0 0; transition: box-shadow .16s ease, border-color .16s ease; }
.google-login-button:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.google-login-button svg { width: 20px; height: 20px; flex-shrink: 0; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--slate); font-size: 12.5px; font-weight: 600; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.small-alert { font-size: 13px; }

/* ---------- Admin ---------- */
.admin-topbar { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.admin-topbar-inner { width: min(1360px, 100% - 32px); margin: 0 auto; display: flex; align-items: center; gap: 14px; min-height: 62px; }
.admin-badge { font-size: 12px; font-weight: 800; color: var(--navy); background: var(--mist); border: 1px solid var(--border); border-radius: 9px; padding: 4px 11px; }
.admin-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-account { display: flex; align-items: center; gap: 10px; }
.admin-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.admin-account-text { display: grid; line-height: 1.25; }
.admin-account-text strong { font-size: 13px; }
.admin-account-text small { font-size: 11px; color: var(--slate); }
.admin-container { width: min(1360px, 100% - 32px); margin: 0 auto; padding: 22px 0 60px; }
.admin-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; align-items: start; }
.admin-sidebar { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-sm); position: sticky; top: 84px; display: grid; gap: 3px; }
.admin-sidebar a { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--navy-soft); }
.admin-sidebar a:hover { background: var(--mist); }
.admin-sidebar a.active { background: var(--blue-soft); color: var(--blue-deep); font-weight: 800; box-shadow: inset 3px 0 0 var(--blue); }
.admin-sidebar svg { width: 17px; height: 17px; flex-shrink: 0; }
.admin-sidebar hr { border: 0; border-top: 1px solid var(--border); margin: 8px 4px; }
.admin-sidebar .sidebar-foot { padding: 12px 13px; font-size: 12px; color: var(--slate); }
.admin-sidebar .sidebar-foot strong { display: block; color: var(--navy); font-size: 13px; }
.admin-main { min-width: 0; }
.admin-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-page-head h1 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 4px; }
.admin-page-head p { color: var(--slate); margin: 0; font-size: 14px; }
.admin-page-head .head-side { display: flex; align-items: center; gap: 10px; color: var(--slate); font-size: 12.5px; flex-wrap: wrap; }
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); }
.kpi-card .kpi-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.kpi-card .icon-bubble { width: 32px; height: 32px; border-radius: 9px; }
.kpi-card .icon-bubble svg { width: 16px; height: 16px; }
.kpi-card .kpi-label { font-size: 12.5px; font-weight: 700; color: var(--slate); }
.kpi-card strong.kpi-value { font-size: 26px; color: var(--navy); line-height: 1.2; display: block; }
.kpi-card strong.kpi-value small { font-size: 13px; color: var(--slate); font-weight: 600; }
.kpi-card .kpi-sub { font-size: 12px; color: var(--slate); margin-top: 4px; display: block; }
.admin-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; align-items: start; }
.admin-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; align-items: start; }
.admin-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; align-items: start; }
.admin-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px; }
.admin-card > h2 { font-size: 16.5px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.admin-card > h2 a { font-size: 12.5px; font-weight: 700; margin-left: auto; }
.admin-card > h2 .chip { margin-left: auto; }
.mode-option { display: flex; align-items: center; gap: 13px; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; margin-bottom: 10px; }
.mode-option.current { border-color: var(--blue); background: var(--blue-soft); }
.mode-option .icon-bubble { width: 38px; height: 38px; }
.mode-option .mo-body { flex: 1; min-width: 0; }
.mode-option .mo-body strong { display: block; font-size: 14px; }
.mode-option .mo-body small { color: var(--slate); font-size: 12px; }
.mode-option .chip { flex-shrink: 0; }
.status-list { display: grid; gap: 0; }
.status-list-item { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--border); }
.status-list-item:first-child { border-top: 0; padding-top: 0; }
.status-list-item .icon-bubble { width: 36px; height: 36px; border-radius: 10px; }
.status-list-item .sl-body { flex: 1; min-width: 0; }
.status-list-item .sl-body strong { display: block; font-size: 13.5px; }
.status-list-item .sl-body small { color: var(--slate); font-size: 11.5px; }
.checklist-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.checklist-head .ring { width: 62px; height: 62px; background: conic-gradient(var(--teal-deep) calc(var(--p) * 1%), var(--mist) 0); }
.checklist-head .ring::after { width: 46px; height: 46px; }
.checklist-head .ring b { position: absolute; font-size: 12px; font-weight: 800; color: var(--navy); }
.checklist-head .ring { position: relative; }
.checklist-head .ring b { z-index: 1; }
.checklist-items { display: grid; gap: 8px; }
.checklist-items > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--navy-soft); }
.check-ok { color: var(--teal-deep); font-weight: 800; }
.check-warn { color: var(--warn); font-weight: 800; }
.event-list { display: grid; gap: 0; }
.event-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.event-item:first-child { border-top: 0; padding-top: 0; }
.event-item .chip { flex-shrink: 0; min-width: 92px; justify-content: center; }
.event-item .ev-text { flex: 1; min-width: 0; color: var(--navy-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-item time { color: var(--slate); font-size: 12px; flex-shrink: 0; }
.table-scroll, .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.check-table, .admin-table, .data-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 13.5px; }
.check-table th, .check-table td, .data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.check-table thead th, .data-table thead th { background: var(--mist); color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.check-table tbody tr:hover, .data-table tbody tr:hover { background: var(--bg); }
.check-table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 0; }
.inline-admin-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-admin-form select { width: auto; margin-top: 0; padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.admin-form .panel h2, .admin-form section h2 { font-size: 17px; }
.admin-form label { margin-top: 12px; }
.admin-form .grid-3 label, .admin-form .compact-grid label { margin-top: 0; }
.admin-save-bar { position: sticky; bottom: 14px; display: flex; justify-content: flex-end; z-index: 10; margin-top: 18px; }
.admin-save-bar button { box-shadow: var(--shadow-lg); }
.metric-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.metric-line:first-child { border-top: 0; }
.metric-line strong { color: var(--navy); }
.log-list { display: grid; gap: 12px; }
.log-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.log-card h3 { font-size: 14.5px; margin-bottom: 4px; }
.log-card p { font-size: 13px; color: var(--slate); margin: 0 0 4px; }
.admin-footer { text-align: center; color: var(--slate); font-size: 12.5px; padding: 24px 16px 40px; }

/* ---------- Legacy support (setup / llm_test / misc) ---------- */
.search-panel { border: 1px solid var(--border); }
.success-panel { text-align: center; padding: clamp(30px, 5vw, 52px); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.stats-row > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); }
.stats-row span { display: block; color: var(--slate); font-size: 12px; font-weight: 600; }
.stats-row strong { font-size: 22px; color: var(--navy); }
.metrics-row { grid-template-columns: repeat(4, 1fr); }
.quota-panel { text-align: center; padding: clamp(30px, 5vw, 52px); }
.empty-state { text-align: center; padding: 40px 22px; }
.back { margin-top: 26px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: #fff; margin-top: 20px; }
.site-footer-inner { width: min(var(--max), 100% - 32px); margin: 0 auto; padding: 44px 0 22px; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .6fr)); gap: 32px; }
.footer-brand p { color: var(--slate); font-size: 13.5px; max-width: 34em; margin: 12px 0 0; }
.footer-brand .fineprint { font-size: 11.5px; color: #9AA7BC; margin-top: 14px; }
.footer-col strong { display: block; font-size: 13px; color: var(--navy); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--slate); font-size: 13.5px; padding: 5px 0; }
.footer-col a:hover { color: var(--blue-deep); }
.footer-bottom { border-top: 1px solid var(--border); text-align: center; color: var(--slate); font-size: 12.5px; padding: 18px 16px; }

/* ---------- Animations ---------- */
[data-animate] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   V99 handwriting clarity, live AI processing and video hints
   ============================================================ */
.math-expression {
  display:inline-flex;
  align-items:center;
  gap:.16em;
  margin-inline:.08em;
  white-space:nowrap;
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
.math-operator {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:.9em;
  min-height:2.15em;
  margin-inline:.08em;
  line-height:1;
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
.math-mixed-whole { display:inline-flex;align-items:baseline;gap:.08em;vertical-align:.38em; }
.math-mixed-whole > span { font-size:.55em;font-weight:800; }
.math-fraction { display:inline-grid;grid-template-rows:auto auto;min-width:1.35em;text-align:center;line-height:1.05;vertical-align:middle; }
.math-numerator { padding:0 .18em .09em;border-bottom:.09em solid currentColor; }
.math-denominator { padding:.09em .18em 0; }

.practice-prepare-shell { display:grid;min-height:calc(100dvh - var(--header-height,80px));place-items:center;padding:clamp(20px,5vw,64px);background:radial-gradient(circle at 20% 10%,rgba(36,167,210,.12),transparent 35%),linear-gradient(145deg,#f9fcff,#fff8f1); }
.practice-processing-overlay { position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:20px;background:rgba(8,25,54,.7);backdrop-filter:blur(8px); }
.practice-processing-overlay[hidden] { display:none; }
body.is-practice-processing { overflow:hidden; }
.practice-processing-card { position:relative;isolation:isolate;width:min(680px,100%);overflow:hidden;padding:clamp(28px,6vw,56px);border:1px solid rgba(126,181,224,.55);border-radius:32px;background:#fff;box-shadow:0 28px 80px rgba(9,35,75,.25);text-align:center; }
.practice-processing-card::before { content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 50% 0,rgba(96,195,224,.18),transparent 42%),linear-gradient(160deg,rgba(255,255,255,.98),rgba(244,249,255,.96)); }
.practice-processing-card h1,.practice-processing-card h2 { margin:12px auto;max-width:18em;color:#102c4f;font-size:clamp(25px,5vw,40px);line-height:1.35; }
.practice-processing-card > p { max-width:48em;margin:12px auto;color:#49617c;line-height:1.75; }
.practice-processing-route { position:relative;display:flex;justify-content:space-between;width:min(350px,80%);margin:0 auto 24px; }
.practice-processing-route::before { content:"";position:absolute;left:8%;right:8%;top:12px;height:3px;border-radius:99px;background:linear-gradient(90deg,#2a95c6,#6957e8,#f47c22);background-size:200% 100%;animation:practiceRouteFlow 2.4s linear infinite; }
.practice-processing-route i { position:relative;z-index:1;width:26px;height:26px;border:5px solid #fff;border-radius:50%;background:#2a95c6;box-shadow:0 0 0 2px rgba(42,149,198,.28),0 5px 18px rgba(42,149,198,.25);animation:practiceRoutePoint 2.4s ease-in-out infinite; }
.practice-processing-route i:nth-child(2){animation-delay:.35s}.practice-processing-route i:nth-child(3){animation-delay:.7s}.practice-processing-route i:nth-child(4){animation-delay:1.05s;background:#f47c22}
.practice-processing-stages { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:25px 0;padding:0;list-style:none; }
.practice-processing-stages li { display:grid;min-height:58px;place-items:center;padding:8px;border:1px solid #dce7f2;border-radius:13px;background:#f8fbff;color:#687b91;font-size:11px;font-weight:850; }
.practice-processing-stages li.is-current { border-color:#2a95c6;background:#eaf8fd;color:#105d80;box-shadow:0 0 0 4px rgba(42,149,198,.1); }
.practice-processing-stages li.is-done::before { content:"✓";margin-right:4px;color:#08765d; }
.practice-processing-help { font-size:12px; }
@keyframes practiceRouteFlow { to{background-position:-200% 0} }
@keyframes practiceRoutePoint { 0%,100%{transform:scale(.85);opacity:.6}50%{transform:scale(1.13);opacity:1} }

.handwriting-canvas-wrap { position:relative;height:clamp(480px,60vh,720px);overflow:hidden;overscroll-behavior:contain;background:#fff;touch-action:none; }
.handwriting-zoom-surface { position:absolute;inset:0;transform-origin:0 0;will-change:transform;background:#fff; }
.handwriting-zoom-surface canvas { display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none; }
.handwriting-zoom-surface > span { position:absolute;left:20px;top:18px;color:#7d8da3;pointer-events:none;font-weight:800; }
.handwriting-zoom-tools { display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid #d7e3f1;border-radius:14px;background:#f7fbff; }
.handwriting-zoom-tools button { min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #b9cee1;border-radius:11px;background:#fff;color:#153453;font-weight:850; }
.handwriting-zoom-tools output { min-width:58px;text-align:center;color:#185f86;font-weight:900; }
.handwriting-zoom-tools small { margin-left:auto;color:#526a82;font-weight:750; }
.handwriting-problem-print > p > span { min-width:0;overflow-wrap:anywhere; }

.practice-video-hint { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin:20px 0;padding:18px;border:1px solid #bcd9eb;border-left:5px solid #2a95c6;border-radius:19px;background:linear-gradient(135deg,#f2fbff,#fff); }
.practice-video-hint-copy { display:flex;gap:12px;align-items:flex-start;min-width:0; }
.practice-video-hint-copy > span { display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:13px;background:#dff5fc;color:#126589; }
.practice-video-hint-copy strong { color:#143654;font-size:17px; }
.practice-video-hint-copy p { margin:5px 0 0;color:#526a82;line-height:1.55; }
.practice-video-hint-copy b { color:#d85f0b;white-space:nowrap; }
.practice-video-point-basis { display:inline-block;margin:0 5px 4px 0;padding:2px 7px;border-radius:999px;background:#dff5fc;color:#126589;font-size:11px;font-weight:800;line-height:1.45; }
.practice-video-hint-player { grid-column:1/-1;display:grid;gap:9px; }
.practice-video-hint-player[hidden] { display:none; }
.practice-video-hint-frame { position:relative;overflow:hidden;padding-top:56.25%;border-radius:16px;background:#07162f; }
.practice-video-hint-frame iframe { position:absolute;inset:0;width:100%;height:100%;border:0; }
.practice-video-hint-player > a { justify-self:end;color:#17618b;font-weight:800; }
.canvas-wrap[data-canvas-viewport] { position:relative;height:clamp(420px,55vh,650px);overflow:hidden;overscroll-behavior:contain;touch-action:none; }
.canvas-wrap[data-canvas-viewport] .handwriting-zoom-surface { position:absolute;inset:0; }
.canvas-wrap[data-canvas-viewport] canvas { width:100%;height:100%;min-height:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none; }
.handwriting-tools output { display:inline-grid;min-width:58px;place-items:center;color:#185f86;font-weight:900; }

@media (max-width: 680px) {
  .practice-processing-overlay { align-items:end;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  .practice-processing-card { max-height:calc(100dvh - 20px);overflow:auto;padding:28px 18px;border-radius:28px; }
  .practice-processing-stages { grid-template-columns:1fr 1fr; }
  .handwriting-canvas-wrap { height:max(440px,62dvh);max-height:680px; }
  .canvas-wrap[data-canvas-viewport] { height:max(420px,58dvh);max-height:620px; }
  .handwriting-zoom-tools small { width:100%;margin-left:0; }
  .handwriting-problem-print > p { display:grid;grid-template-columns:1fr;gap:4px; }
  .practice-video-hint { grid-template-columns:1fr;padding:16px 14px; }
  .practice-video-hint > .button { width:100%; }
  .math-expression { font-size:1.08em; }
}
@media (max-width: 380px) {
  .handwriting-canvas-wrap { height:max(420px,60dvh); }
  .practice-processing-stages li { font-size:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-processing-route::before,.practice-processing-route i { animation:none !important; }
  .handwriting-zoom-surface { will-change:auto; }
}

.karte-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; margin: 8px 0 22px; }
.karte-hero h1 { margin: 6px 0 9px; font-size: clamp(28px,4vw,43px); }
.karte-hero p { max-width: 720px; color: #4d5d76; line-height: 1.75; }
.karte-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
.karte-kpis > div { display: grid; gap: 6px; padding: 19px; border: 1px solid #d7e1ed; border-radius: 17px; background: #fff; }
.karte-kpis span { color: #53637a; font-size: 12px; font-weight: 800; }
.karte-kpis strong { color: #123f7a; font-size: 35px; }
.karte-kpis small { margin-left: 3px; font-size: 13px; }
.karte-records { display: grid; gap: 18px; }
.karte-record { padding: clamp(19px,3vw,28px); border: 1px solid #d5e0ec; border-radius: 21px; background: #fff; box-shadow: 0 12px 36px rgba(24,51,89,.07); }
.karte-record > header { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e1e8f1; padding-bottom: 16px; }
.karte-record > header span, .karte-record time { color: #53637a; font-size: 12px; font-weight: 750; }
.karte-record > header h2 { margin: 6px 0; font-size: 21px; line-height: 1.5; }
.karte-record > header > p { flex: 0 0 auto; margin: 0; color: #0e7052; }
.karte-record > header > p strong { font-size: 47px; }
.karte-record > header > p small { font-size: 20px; font-weight: 900; }
.karte-record-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.karte-record-grid section { padding: 14px; border-radius: 13px; background: #f5f8fc; }
.karte-record-grid h3 { margin: 0 0 6px; color: #53637a; font-size: 12px; }
.karte-record-grid p { margin: 0; line-height: 1.65; }
.karte-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px; border-radius: 14px; background: #fff7e7; }
.karte-next span { flex: 1 1 280px; }
.karte-next form { margin-left: auto; }
.family-outcome-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(235px,1fr)); gap: 12px; }
.family-outcome-grid article { padding: 17px; border: 1px solid #d6e1ed; border-radius: 16px; background: #f8fbff; }
.family-outcome-grid article h3 { margin-top: 0; }
.family-outcome-grid dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.family-outcome-grid dt { color: #53637a; font-size: 11px; }
.family-outcome-grid dd { margin: 4px 0 0; font-weight: 850; }
@media(max-width:780px){.karte-kpis{grid-template-columns:repeat(2,1fr)}.karte-record-grid{grid-template-columns:1fr}.karte-hero{display:grid}.karte-next form,.karte-next .button{width:100%}}
.admin-weight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.admin-override-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-bottom:18px; }
.admin-override-form .wide { grid-column:span 2; }
.admin-simple-list { display:grid; gap:8px; }
.admin-simple-list > div { display:flex; justify-content:space-between; gap:14px; padding:11px 13px; border-radius:11px; background:#f5f8fc; }
.admin-simple-list strong { overflow-wrap:anywhere; }
.admin-simple-list span { flex:0 0 auto; color:#53637a; font-size:12px; }
@media(max-width:800px){.admin-weight-grid,.admin-override-form{grid-template-columns:1fr}.admin-override-form .wide{grid-column:auto}.admin-simple-list>div{display:grid}}
.search-evaluation-suite{margin-bottom:16px}.search-evaluation-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0}.search-evaluation-kpis>div{min-width:0;padding:14px;border:1px solid var(--border);border-radius:12px;background:#f7faff;display:grid;gap:5px}.search-evaluation-kpis span,.search-evaluation-kpis small{color:#53637a;font-size:12px}.search-evaluation-kpis strong{font-size:20px;overflow-wrap:anywhere}.admin-evaluation-caution{margin:14px 0 0;padding:12px 14px;border-left:4px solid #e66c10;background:#fff7ed;color:#394b62}.search-evaluation-result{margin-bottom:14px}.search-evaluation-result>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.search-evaluation-result>summary::-webkit-details-marker{display:none}.search-evaluation-result>summary span:first-child{display:grid;gap:4px}.search-evaluation-result>summary small{color:#53637a}.search-evaluation-body{padding-top:18px}.search-evaluation-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.search-evaluation-meta span{padding:6px 9px;border-radius:999px;background:#edf5fb;color:#29435f;font-size:12px}.search-evaluation-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 18px}.search-evaluation-videos article{min-width:0;border:1px solid var(--border);border-radius:14px;padding:15px;background:#fff}.search-evaluation-videos h3{font-size:15px;margin:9px 0;overflow-wrap:anywhere}.search-evaluation-videos p{font-size:12.5px;color:#43566d;overflow-wrap:anywhere}.search-evaluation-review{border-top:1px solid var(--border);padding-top:18px}.search-review-score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.search-review-count-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.search-evaluation-review textarea{width:100%}@media(max-width:1100px){.search-evaluation-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.search-evaluation-videos{grid-template-columns:1fr}.search-review-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.search-evaluation-kpis,.search-review-score-grid,.search-review-count-grid{grid-template-columns:1fr}.search-evaluation-result>summary{align-items:flex-start}.search-evaluation-review .button{width:100%}}

/* Family learning, child mode, self-powered practice and guided navigation */
.family-shell,.practice-shell,.child-home-shell{display:grid;gap:28px;margin:26px auto 70px}.family-hero,.practice-hero,.child-home-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:center;padding:clamp(28px,5vw,58px);overflow:hidden;border:1px solid #dbe6fb;border-radius:30px;background:radial-gradient(circle at 88% 8%,rgba(81,117,255,.2),transparent 32%),linear-gradient(135deg,#fff,#eef5ff);box-shadow:0 22px 60px rgba(30,64,175,.1)}
.family-hero h1,.practice-hero h1,.child-home-hero h1{margin:8px 0 14px;font-size:clamp(34px,5vw,58px);line-height:1.08;letter-spacing:-.04em}.family-hero h1 em,.practice-hero h1 em{color:#2764ff;font-style:normal}.family-hero p,.practice-hero p,.child-home-hero p{max-width:720px;color:#526079;line-height:1.8}.family-count-card,.practice-progress-card,.child-today-progress{display:grid;gap:8px;padding:24px;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:rgba(255,255,255,.8);box-shadow:0 15px 35px rgba(30,64,175,.1)}.family-count-card>strong,.child-today-progress>strong{font-size:42px}.family-count-card small,.child-today-progress small{font-size:15px;color:#64748b}.family-add-child{padding:clamp(22px,4vw,38px)}.family-form-grid,.family-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}.family-form-grid label,.family-settings-grid label,.family-assignment-form label,.compact-form label{display:grid;gap:7px;color:#172b4d;font-size:12px;font-weight:850}.family-form-grid .button{min-height:50px}.family-security-note{display:flex;align-items:center;gap:8px;margin:18px 0 0;padding:12px 14px;border-radius:14px;background:#effdf7;color:#08765d;font-size:12px}.family-child-list{display:grid;gap:24px}.family-child-card{padding:clamp(20px,4vw,36px);border:1px solid #dce6f5;border-radius:27px;background:#fff;box-shadow:0 18px 45px rgba(15,45,90,.08)}.family-child-card>header{display:flex;align-items:center;gap:13px}.family-child-card>header>.chip{margin-left:auto}.child-avatar{display:grid;width:54px;height:54px;place-items:center;border-radius:18px;background:linear-gradient(135deg,#2764ff,#66a3ff);color:#fff;font-size:23px;font-weight:900}.family-child-card>header h2{margin:2px 0}.family-child-card>header span{color:#64748b;font-size:12px}.family-progress-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.family-progress-grid>div{display:grid;gap:7px;padding:16px;border-radius:17px;background:#f4f8ff}.family-progress-grid span{color:#64748b;font-size:11px}.family-progress-grid strong{font-size:25px}.family-progress-grid small{font-size:11px}.family-child-columns{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px}.family-qr-panel,.family-assignment-panel{padding:22px;border:1px solid #dce6f5;border-radius:20px}.family-qr{display:grid;place-items:center;margin:12px auto;width:min(230px,100%);aspect-ratio:1;background:#fff}.family-qr svg{width:100%;height:auto}.family-copy-login{display:flex;margin:7px auto}.family-qr-panel details,.family-safety-settings{margin-top:14px;border-top:1px solid #e3eaf5;padding-top:13px}.family-qr-panel summary,.family-safety-settings summary{cursor:pointer;font-weight:850}.family-assignment-form{display:grid;grid-template-columns:1.3fr 1.3fr .6fr auto;gap:12px;align-items:end}.family-assignment-form textarea{min-height:48px}.family-request-list{display:grid;gap:8px;margin-top:18px}.family-request-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:10px;border-radius:12px;background:#f7f9fd}.request-status{display:inline-flex;width:max-content;padding:4px 8px;border-radius:999px;background:#e9f0ff;color:#2458d6;font-size:10px;font-weight:900}.family-settings-grid{margin-top:17px}.family-settings-grid .wide{grid-column:span 2}.family-settings-grid .check{display:flex;align-items:center;padding:10px;border-radius:13px;background:#f7f9fd}.family-settings-grid .check input{width:20px;height:20px}.family-child-card.paused{border-color:#f2c9c2;background:#fffafa}
.child-login-shell{display:grid;grid-template-columns:1fr minmax(330px,480px);gap:40px;align-items:center;min-height:calc(100vh - 260px);padding:35px max(0px,5vw)}.child-login-visual h1{font-size:clamp(45px,7vw,80px);line-height:1.05}.child-login-visual>span,.child-login-icon{display:grid;width:68px;height:68px;place-items:center;border-radius:23px;background:#2764ff;color:#fff;font-size:28px;font-weight:900}.child-login-card{padding:clamp(25px,5vw,46px)}.child-pin-form{display:grid;gap:10px;margin-top:20px}.child-pin-form input{font-size:30px;letter-spacing:.35em;text-align:center}.child-login-safety{display:flex;gap:7px;color:#64748b;font-size:12px}.is-child-mode{font-size:17px}.is-child-mode .site-header{border-bottom:3px solid #dbe7ff}.is-child-mode .brand-mark{width:50px;height:50px}.is-child-mode ruby{ruby-position:over}.is-child-mode rt{color:#2764ff;font-size:.52em;font-weight:750}.nav-guide-button{border:0;background:transparent;color:#31476c;font:inherit;font-weight:800;cursor:pointer}.child-home-hero{background:radial-gradient(circle at 90% 8%,rgba(255,187,67,.3),transparent 34%),linear-gradient(135deg,#fff,#eefaff)}.child-kicker{display:inline-flex;padding:7px 12px;border-radius:999px;background:#fff2c9;color:#8a5800;font-weight:900}.child-today-progress>div,.practice-progress-track{height:11px;overflow:hidden;border-radius:999px;background:#dbe7f8}.child-today-progress i,.practice-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2764ff,#35c99b)}.child-assignments{display:grid;gap:18px}.child-assignment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.child-assignment-card{position:relative;display:grid;gap:12px;min-height:330px;padding:28px;overflow:hidden;border:1px solid #dbe5f5;border-radius:25px;background:#fff;box-shadow:0 16px 40px rgba(25,60,120,.08)}.child-assignment-card.is-first{border:2px solid #6e91ff}.child-assignment-card h3{margin:0;font-size:25px}.child-assignment-card p{color:#53627a;line-height:1.7}.child-assignment-number{position:absolute;right:15px;top:5px;color:#e8eef8;font-size:76px;font-weight:950;line-height:1}.child-assignment-card>*:not(.child-assignment-number){position:relative}.child-empty-assignment{padding:45px;border:2px dashed #cbd8ec;border-radius:25px;background:#fff;text-align:center}.child-self-power{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:27px;border-radius:24px;background:linear-gradient(135deg,#effdf7,#eef5ff)}.child-self-power-icon{display:grid;width:65px;height:65px;place-items:center;border-radius:20px;background:#fff;color:#2764ff}.child-read-aloud{position:fixed;right:18px;bottom:88px;z-index:540;padding:12px 16px;border:2px solid #fff;border-radius:999px;background:#132340;color:#fff;box-shadow:0 10px 30px rgba(15,35,70,.25);font-weight:900;cursor:pointer}
.practice-shell{max-width:1180px}.practice-hero{grid-template-columns:minmax(0,1fr) 250px}.practice-hero .back-link{grid-column:1/-1}.practice-progress-card>span{color:#2764ff;font-size:13px;font-weight:900}.practice-progress-card>strong{font-size:20px}.practice-source-strip{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:15px 20px;border:1px solid #dbe6f6;border-radius:18px;background:#fff}.practice-source-strip>span{display:flex;gap:6px;color:#2764ff;font-weight:900}.practice-source-strip small{color:#64748b}.practice-question,.practice-result-card,.practice-complete{padding:clamp(22px,5vw,50px);border-radius:28px}.practice-question-head{display:grid;grid-template-columns:1fr auto;gap:16px}.practice-question-head h2{margin:10px 0;font-size:clamp(25px,4vw,38px);line-height:1.35}.practice-question-head p{color:#64748b}.practice-step-badge,.practice-type-chip{display:inline-flex;padding:6px 11px;border-radius:999px;background:#132340;color:#fff;font-size:11px;font-weight:900}.practice-type-chip{align-self:start;background:#e9f0ff;color:#2458d6}.practice-answer-area{margin:25px 0}.practice-choice-grid{display:grid;gap:11px;margin:0;padding:0;border:0}.practice-choice-grid label{cursor:pointer}.practice-choice-grid input{position:absolute;opacity:0}.practice-choice-grid span{display:flex;align-items:center;gap:13px;min-height:62px;padding:15px 18px;border:2px solid #dce6f4;border-radius:17px;background:#fff;font-weight:750}.practice-choice-grid input:checked+span{border-color:#2764ff;background:#eef4ff;box-shadow:0 0 0 4px rgba(39,100,255,.1)}.practice-choice-grid span b{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;background:#edf2fb;color:#2764ff}.practice-step-inputs{display:grid;gap:12px}.practice-step-inputs label,.practice-text-answer,.handwriting-note{display:grid;gap:7px;color:#172b4d;font-weight:850}.practice-step-inputs textarea,.practice-text-answer textarea{font-size:16px;line-height:1.75}.practice-hints{display:grid;gap:9px;padding:17px;border-radius:18px;background:#fff9e9}.practice-hints>div{display:grid;grid-template-columns:auto 1fr;gap:5px 9px}.practice-hints>div span{grid-row:span 2;color:#b66a00}.practice-hints small{color:#7a6541}.practice-hints>button{display:grid;grid-template-columns:auto 1fr;gap:12px;width:100%;padding:12px;border:1px solid #efd99e;border-radius:12px;background:#fff;text-align:left;cursor:pointer}.practice-hints>button b{filter:blur(7px);opacity:.25;transition:.2s}.practice-hints>button.is-open b{filter:none;opacity:1}.practice-confidence{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0;padding:0;border:0}.practice-confidence legend{width:100%;margin-bottom:7px;font-weight:900}.practice-confidence label{cursor:pointer}.practice-confidence input{position:absolute;opacity:0}.practice-confidence span{display:block;padding:10px 14px;border:1px solid #dbe5f3;border-radius:999px}.practice-confidence input:checked+span{border-color:#2764ff;background:#eef4ff;color:#2458d6;font-weight:900}.practice-submit{width:100%;min-height:58px}.practice-form-error{min-height:20px;color:#b42318;font-weight:800}.handwriting-workspace{display:grid;gap:10px}.handwriting-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px;border-radius:14px;background:#eef3fb}.handwriting-toolbar button{padding:7px 10px;border:1px solid #cfdbea;border-radius:9px;background:#fff;cursor:pointer}.handwriting-toolbar button.is-active{outline:3px solid #93b1ff}.handwriting-toolbar label{display:flex;gap:5px;align-items:center}.handwriting-paper{position:relative;overflow:hidden;border:2px solid #cfdbea;border-radius:16px;background:#fff;box-shadow:inset 0 2px 12px rgba(20,50,90,.05)}.handwriting-paper canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.handwriting-paper>span{position:absolute;left:20px;top:18px;color:#b1bdce;pointer-events:none}.practice-result-card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start}.practice-result-icon,.practice-finish-mark{display:grid;width:58px;height:58px;place-items:center;border-radius:19px;background:#eafbf4;color:#08765d}.practice-score{font-size:34px;color:#2764ff}.practice-score small{font-size:13px}.practice-self-check{grid-column:1/-1;display:grid;gap:8px;padding:17px;border-radius:17px;background:#f2f8ff}.practice-self-check label{display:flex;gap:8px}.practice-result-card>.button.large{grid-column:1/-1}.practice-complete{text-align:center}.practice-finish-mark{margin:auto;background:#fff3d5;color:#b66a00}.practice-complete-stats{display:flex;justify-content:center;gap:20px;margin:25px}.practice-complete-stats>div{display:grid;padding:18px 25px;border-radius:18px;background:#f3f7fd}.practice-complete-stats strong{font-size:32px}.practice-complete-actions{display:flex;gap:10px;justify-content:center}.practice-principles{display:grid;grid-template-columns:1fr auto;gap:20px;padding:22px;border-radius:20px;background:#132340;color:#fff}.practice-principles>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.practice-principles>div span{padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.1)}.practice-principles p{display:flex;gap:7px;max-width:350px;margin:0;color:#cbd6e7;font-size:11px}.external-video-locked{display:inline-flex;gap:6px;align-items:center;padding:8px 10px;border-radius:11px;background:#eef4ff;color:#526b97;font-size:11px;font-weight:850}
.guide-fab{position:fixed;right:20px;bottom:22px;z-index:520;display:flex;gap:8px;align-items:center;padding:13px 17px;border:2px solid #fff;border-radius:999px;background:linear-gradient(135deg,#2764ff,#6048df);color:#fff;box-shadow:0 14px 35px rgba(39,70,180,.3);font-weight:900;cursor:pointer}.has-mobile-tabbar .guide-fab{bottom:82px}.guide-scrim{position:fixed;inset:0;z-index:600;background:rgba(8,21,45,.46);backdrop-filter:blur(3px)}.guide-panel{position:fixed;right:18px;bottom:18px;z-index:610;width:min(470px,calc(100vw - 24px));max-height:calc(100dvh - 36px);overflow:auto;padding:24px;border:1px solid #dce6f6;border-radius:25px;background:#fff;box-shadow:0 30px 90px rgba(8,25,60,.3);transform:translateY(20px);opacity:0;transition:.2s}.guide-panel.is-open{transform:none;opacity:1}.guide-panel>header{display:flex;justify-content:space-between;gap:10px}.guide-panel>header h2{margin:3px 0}.guide-panel>header button{width:38px;height:38px;border:0;border-radius:12px;background:#eff3f9;font-size:25px;cursor:pointer}.guide-query-row{display:grid;grid-template-columns:1fr auto;gap:8px}.guide-query-row input{min-width:0}.guide-output{display:grid;gap:12px;margin-top:15px}.guide-summary{margin:0;font-weight:850}.guide-step-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.guide-step-list li{display:grid;gap:3px;padding:12px 14px;border-left:4px solid #dce5f4;border-radius:11px;background:#f7f9fd}.guide-step-list li.is-current{border-color:#2764ff;background:#eef4ff}.guide-step-list li.is-done{opacity:.55}.guide-step-list span,.guide-output>small{color:#64748b;font-size:12px}.guide-actions{display:flex;gap:8px}.guide-spotlight{position:fixed;inset:0;z-index:700;pointer-events:none;background:radial-gradient(ellipse calc(var(--guide-w) / 1.5) calc(var(--guide-h) * 1.7) at calc(var(--guide-x) + var(--guide-w)/2) calc(var(--guide-y) + var(--guide-h)/2),transparent 0,transparent 45%,rgba(5,16,39,.7) 65%)}.guide-spotlight:before{content:'';position:fixed;left:var(--guide-x);top:var(--guide-y);width:var(--guide-w);height:var(--guide-h);border:4px solid #7ca1ff;border-radius:16px;box-shadow:0 0 0 6px rgba(74,120,255,.22),0 0 35px rgba(98,148,255,.8)}.guide-tooltip{position:fixed;left:clamp(12px,var(--guide-x),calc(100vw - 360px));top:min(calc(var(--guide-y) + var(--guide-h) + 16px),calc(100vh - 220px));width:min(350px,calc(100vw - 24px));display:grid;gap:7px;padding:18px;border-radius:19px;background:#fff;color:#132340;box-shadow:0 18px 60px rgba(0,0,0,.3);pointer-events:auto}.guide-tooltip>span{color:#2764ff;font-size:11px;font-weight:900}.guide-tooltip p{margin:0;color:#59677d}.guide-tooltip>div{display:flex;justify-content:flex-end;gap:7px}.guide-target-pulse{position:relative;z-index:701!important}.guide-target-pulse:after{content:'';position:absolute;inset:-7px;border:3px solid #7ca1ff;border-radius:15px;animation:guide-pulse 1.25s infinite;pointer-events:none}@keyframes guide-pulse{50%{box-shadow:0 0 0 12px rgba(77,124,255,0)}}
.guide-inline-status .button{margin-top:10px}.guide-inline-status br{display:block}
@media(max-width:850px){.family-hero,.practice-hero,.child-home-hero,.child-login-shell{grid-template-columns:1fr}.family-form-grid,.family-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.family-child-columns,.family-assignment-form{grid-template-columns:1fr}.family-progress-grid{grid-template-columns:repeat(2,1fr)}.child-assignment-grid{grid-template-columns:1fr}.practice-source-strip,.practice-principles{grid-template-columns:1fr}.practice-result-card{grid-template-columns:auto 1fr}.practice-score{grid-column:2}.family-count-card,.practice-progress-card{max-width:none}}
@media(max-width:560px){.family-shell,.practice-shell,.child-home-shell{margin-top:14px}.family-hero,.practice-hero,.child-home-hero{padding:23px;border-radius:23px}.family-form-grid,.family-settings-grid{grid-template-columns:1fr}.family-settings-grid .wide{grid-column:auto}.family-progress-grid{grid-template-columns:1fr 1fr}.family-child-card>header{align-items:flex-start;flex-wrap:wrap}.family-child-card>header>.chip{margin-left:0}.practice-question,.practice-result-card,.practice-complete{padding:21px}.practice-question-head{grid-template-columns:1fr}.practice-type-chip{justify-self:start}.practice-result-card{grid-template-columns:1fr}.practice-result-icon,.practice-score{grid-column:auto}.practice-complete-actions,.guide-actions{display:grid}.practice-confidence{display:grid}.handwriting-toolbar{font-size:11px}.guide-fab{right:12px;bottom:74px}.guide-panel{right:12px;bottom:12px}.guide-query-row{grid-template-columns:1fr}.child-login-shell{padding:18px}.child-login-visual h1{font-size:45px}}
@media(prefers-reduced-motion:reduce){.guide-panel,.guide-target-pulse:after{transition:none;animation:none}}
.guide-spotlight:before{box-shadow:0 0 0 6px rgba(74,120,255,.22),0 0 35px rgba(98,148,255,.8),0 0 0 9999px rgba(5,16,39,.7)}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .admin-cols-4, .admin-cols-3 { grid-template-columns: 1fr 1fr; }
  .dash-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .dash-layout > .dash-side { grid-column: 2; }
}
@media (max-width: 1024px) {
  .page-grid { grid-template-columns: 1fr; }
  .aside-col { position: static; }
  .hero { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .chips { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .value-cards { grid-template-columns: 1fr; }
  .route-cards { grid-template-columns: repeat(2, 1fr); }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .admin-sidebar a { padding: 9px 13px; }
  .admin-sidebar hr, .admin-sidebar .sidebar-foot { display: none; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .dash-nav hr { display: none; }
  .dash-layout > .dash-side { grid-column: auto; }
  .video-card-main { grid-template-columns: 1fr; }
  .video-thumb { max-width: 480px; }
}
@media (max-width: 820px) {
  .nav-toggle { display: grid; }
  .site-nav-area { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 16px; flex-direction: column; align-items: stretch; gap: 8px; }
  .site-nav-area.open { display: flex; }
  .site-nav { flex-direction: column; align-items: stretch; margin: 0; }
  .site-nav a { padding: 12px 14px; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions > a { text-align: center; }
  .guest-pill { justify-content: center; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .container { padding-top: 16px; }
  .io-cards, .pain-solution, .grid-2, .grid-3, .grid-4, .admin-cols-2, .admin-cols-3, .admin-cols-4, .assure-row { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric-cell { border-left: 0; border-top: 1px solid var(--border); }
  .metric-cell:nth-child(-n+2) { border-top: 0; }
  .metric-cell:nth-child(even) { border-left: 1px solid var(--border); }
  .intent-grid { grid-template-columns: 1fr 1fr; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .pricing-grid, .chips, .benefit-grid, .how-steps, .route-cards, .status-buttons { grid-template-columns: 1fr; }
  .status-buttons { grid-template-columns: repeat(3, 1fr); }
  .route-step { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .step-marker { width: 40px; height: 40px; }
  .step-marker b { font-size: 14px; }
  .step-marker small { display: none; }
  .step-role { writing-mode: initial; font-size: 10.5px; padding: 2px 7px; }
  .save-cta { flex-direction: column; text-align: center; }
  .save-cta-actions { width: 100%; }
  .next-card { flex-direction: column; align-items: stretch; }
  .next-thumb { width: 100%; }
  .time-row { flex-direction: column; align-items: flex-start; }
  .time-pills { margin-left: 0; }
  .auth-wrap { grid-template-columns: 1fr; }
  .watch-bottom-nav { flex-wrap: wrap; justify-content: center; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 22px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .hero-actions .button, .hero-actions form { width: 100%; }
  .video-title-row { flex-direction: column; }
  .rec-badge { align-self: flex-start; }
  .score-list { columns: 1; }
}

.setup-steps { margin: 0 0 14px 1.2em; color: var(--navy-soft); font-size: 13.5px; }
.setup-steps li { margin: 6px 0; }
.data-table code { overflow-wrap: anywhere; word-break: normal; }

/* ---------- My page usable feature pages ---------- */
.history-list { display: grid; gap: 14px; margin: 18px 0 28px; }
.history-item { display: grid; grid-template-columns: 156px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px; }
.history-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--mist); }
.history-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s ease; }
.history-thumb:hover img { transform: scale(1.04); }
.history-body { min-width: 0; }
.history-body h2 { font-size: 17px; line-height: 1.45; margin: 7px 0 0; }
.history-body h2 a { color: var(--navy); }
.history-topline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.history-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.record-grid > div { border: 1px solid var(--border); background: var(--bg); border-radius: 14px; padding: 15px; }
.record-grid span { display: block; color: var(--slate); font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.record-grid strong { color: var(--navy); font-size: 19px; }
.compact-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inline-actions form button svg { vertical-align: -3px; }
@media (max-width: 820px) {
  .history-item { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
  .history-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .record-grid, .compact-records { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .history-item { grid-template-columns: 1fr; }
  .history-thumb { max-width: 100%; }
}

.logout-inline-form{display:inline-flex;margin:0;align-items:center}
.logout-inline-form button{font:inherit;cursor:pointer}
.security-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.security-summary-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px;box-shadow:var(--shadow-soft)}
.security-summary-card strong{display:block;font-size:22px;margin-top:4px}
.chip-danger{background:#ffe1e6;color:#9f1239;border-color:#ffc4cf}
@media (max-width:760px){.security-summary-grid{grid-template-columns:1fr}.logout-inline-form{width:100%}.logout-inline-form button{width:100%}}

/* ============================================================
   Conversion-focused homepage refresh
   目的: 既存機能・DB・APIは触らず、トップページの見た目と訴求だけを強化
   ============================================================ */
.action-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(380px, .78fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4.8vw, 58px) 0 clamp(18px, 3vw, 34px);
  position: relative;
}
.action-hero::before {
  content: "";
  position: absolute;
  inset: 18px -18px auto auto;
  width: min(520px, 46vw);
  height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle at 45% 38%, rgba(47, 107, 255, .16), rgba(121, 175, 168, .10) 48%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
  z-index: -1;
}
.action-hero-copy h1 {
  font-size: clamp(34px, 5.4vw, 62px);
  letter-spacing: -.035em;
  line-height: 1.08;
  max-width: 11.8em;
  margin-bottom: 18px;
}
.action-hero-copy h1::after {
  content: "";
  display: block;
  width: 112px;
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), #74D0C5, #FFD479);
}
.action-badge {
  background: rgba(255,255,255,.92);
  border-color: rgba(47, 107, 255, .20);
  color: var(--blue-deep);
  box-shadow: 0 12px 30px rgba(47,107,255,.10);
}
.action-lead {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.85;
  color: var(--navy-soft);
  max-width: 37em;
}
.hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 4px;
}
.hero-proof-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--navy-soft);
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.hero-proof-row svg { color: var(--teal-deep); }
.ghost-watch { background: rgba(255,255,255,.74); }
.action-search-wrap {
  position: relative;
}
.action-search-wrap::before,
.action-search-wrap::after {
  content: "";
  position: absolute;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(47,107,255,.16), rgba(121,175,168,.12));
  z-index: -1;
}
.action-search-wrap::before { inset: 22px -10px -10px 28px; transform: rotate(2deg); }
.action-search-wrap::after { width: 74px; height: 74px; right: -18px; top: -18px; border-radius: 50%; background: var(--gold-soft); }
.action-search-card {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(216,230,255,.95);
  border-radius: 30px;
  box-shadow: 0 26px 70px rgba(31, 42, 68, .15);
  padding: clamp(20px, 3vw, 30px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.search-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.mini-step,
.mini-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 11px;
}
.mini-step { background: var(--navy); color: #fff; }
.mini-time { background: var(--blue-soft); color: var(--blue-deep); border: 1px solid #D8E6FF; }
.action-search-card h2 {
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.action-input-shell textarea {
  min-height: 132px;
  border: 2px solid #D8E6FF;
  background: linear-gradient(180deg, #fff, #F8FBFF);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  font-size: 17px;
}
.action-input-shell textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 5px rgba(47, 107, 255, .13);
}
.action-chips {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}
.action-chips button {
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  font-weight: 800;
}
.compact-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 12px !important;
  margin: 16px 0 14px !important;
}
.compact-time-row > span {
  color: var(--slate);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.compact-time-pills { gap: 7px; margin-left: 0; }
.compact-time-pills .time-pill span {
  min-height: 38px;
  padding: 7px 13px;
  font-size: 13px;
  border-radius: 11px;
}
.hero-submit {
  width: 100%;
  min-height: 64px;
  border-radius: 19px;
  font-size: 16px;
}
.search-microcopy {
  margin: 12px 0 0;
  text-align: center;
  color: var(--slate);
  font-size: 12.5px;
}
.instant-answer {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 12px;
  margin: 10px 0 28px;
}
.instant-answer-card {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.instant-answer-card.strong {
  background: linear-gradient(135deg, var(--navy), #31446D);
  border-color: transparent;
  color: #fff;
}
.instant-answer-card span {
  display: block;
  color: var(--slate);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 4px;
}
.instant-answer-card.strong span { color: rgba(255,255,255,.72); }
.instant-answer-card strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.55;
}
.instant-answer-card.strong strong { color: #fff; }
.compact-head { margin-top: 34px; }
.result-demo {
  border-radius: 34px;
  padding: clamp(22px, 4vw, 38px);
  background:
    linear-gradient(135deg, rgba(238,245,255,.95), rgba(255,255,255,.78)),
    radial-gradient(circle at 100% 0%, rgba(47,107,255,.12), transparent 42%);
  border: 1px solid rgba(216,230,255,.95);
  box-shadow: var(--shadow-sm);
}
.demo-board {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}
.demo-input-card,
.demo-route-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
.demo-input-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, #fff, var(--gold-soft));
}
.demo-label {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}
.demo-input-card strong {
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--navy);
}
.demo-input-card p {
  color: var(--navy-soft);
  margin: 14px 0 0;
}
.demo-route-card {
  display: grid;
  gap: 10px;
}
.demo-route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.demo-route-head strong { font-size: 16px; }
.demo-item { box-shadow: none; }
.action-value-cards { margin-top: 24px; }
.action-value-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
}
.action-value-card::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(47,107,255,.07);
}
.teal-bubble { background: var(--teal-soft) !important; color: var(--teal-deep) !important; }
.gold-bubble { background: var(--gold-soft) !important; color: var(--gold-deep) !important; }
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0;
}
.before-box,
.after-box {
  border-radius: 28px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.before-box { background: #FBF7F1; }
.after-box {
  background: linear-gradient(160deg, var(--blue-soft), #fff 78%);
  border-color: #D8E6FF;
}
.before-box h2,
.after-box h2 { letter-spacing: -.02em; }
.muted-eyebrow { background: #F1E9E0 !important; border-color: #E5D9C8 !important; color: #8A7455 !important; }
.before-box .check-list li::before { content: "×"; background: #F1E9E0; color: #A08B72; }
.action-steps .how-step {
  text-align: left;
  overflow: hidden;
}
.action-steps .how-step .how-no {
  margin: 0 0 14px;
}
.action-benefits {
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
}
.action-benefits h2 {
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing: -.02em;
}
.action-pricing {
  border-radius: 28px;
  background: linear-gradient(135deg, #fff, var(--blue-soft));
  border-color: #D8E6FF;
}
.final-action-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(255,255,255,.22), transparent 20%),
    linear-gradient(135deg, #2558D8, #2F6BFF 54%, #4D8A82);
}
.final-action-panel::before {
  content: "";
  position: absolute;
  inset: auto auto -72px -72px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.final-eyebrow {
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.28) !important;
}
@media (max-width: 980px) {
  .action-hero { grid-template-columns: 1fr; padding-top: 22px; }
  .action-hero-copy h1 { max-width: 100%; }
  .action-search-wrap::before { inset: 16px 0 -8px 18px; }
  .instant-answer { grid-template-columns: 1fr 1fr; }
  .demo-board, .before-after { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .action-hero-copy h1 { font-size: clamp(33px, 9vw, 46px); }
  .action-lead { font-size: 16px; }
  .action-search-card { border-radius: 24px; padding: 18px; }
  .action-chips { grid-template-columns: 1fr 1fr; }
  .compact-time-row { align-items: flex-start; flex-direction: column; }
  .compact-time-pills { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .compact-time-pills .time-pill span { width: 100%; }
  .instant-answer { grid-template-columns: 1fr; }
  .hero-proof-row span { width: 100%; justify-content: center; }
  .result-demo { border-radius: 24px; padding: 18px; }
  .demo-input-card, .demo-route-card { border-radius: 20px; padding: 18px; }
}
@media (max-width: 460px) {
  .action-chips { grid-template-columns: 1fr; }
  .compact-time-pills { grid-template-columns: 1fr; }
  .search-card-topline { flex-direction: column; align-items: flex-start; }
  .hero-preview-item.demo-item { align-items: flex-start; }
  .hero-preview-item.demo-item .hp-star { display: none; }
}

/* Subscription cancellation / account deletion */
.danger-zone{border-color:#fecdd3;background:linear-gradient(180deg,#fff,#fff7f8)}
.button.danger,button.danger{background:#be123c;color:#fff;border-color:#be123c;box-shadow:0 10px 24px rgba(190,18,60,.18)}
.button.danger:hover,button.danger:hover{background:#9f1239;border-color:#9f1239}
.choice{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--ink)}
.choice input{width:auto;margin-top:4px;flex:0 0 auto}

/* Legal / trust pages */
.legal-page h2{font-size:19px;margin-top:28px;margin-bottom:10px;color:#14213d}.legal-page p{line-height:1.9}.legal-page .lead{max-width:56em}.trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}.trust-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid rgba(43,91,255,.13);background:linear-gradient(180deg,#fff,rgba(247,250,255,.88));border-radius:20px;text-decoration:none;color:inherit;box-shadow:0 12px 28px rgba(15,23,42,.06);transition:transform .18s ease,box-shadow .18s ease}.trust-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(15,23,42,.09)}.trust-card strong{font-size:16px}.trust-card small{color:#637083;line-height:1.6}.legal-table-wrap{overflow:auto;border-radius:20px;border:1px solid rgba(43,91,255,.14);background:#fff;margin-top:18px}.legal-table{width:100%;border-collapse:collapse;font-size:14px}.legal-table th,.legal-table td{padding:16px 18px;border-bottom:1px solid rgba(15,23,42,.08);vertical-align:top;text-align:left}.legal-table th{width:230px;background:#f8fbff;color:#24324b}.legal-mini{font-size:12.5px;line-height:1.65;margin:8px 0 0;color:#64748b}.legal-mini a{font-weight:700}@media(max-width:720px){.trust-grid{grid-template-columns:1fr}.legal-table th,.legal-table td{display:block;width:auto}.legal-table th{border-bottom:0;padding-bottom:6px}.legal-table td{padding-top:4px}}

/* AI search waiting experience */
html:has(body.ai-waiting-active) { overflow: hidden; }
body.ai-waiting-active { overflow: hidden; touch-action: none; overscroll-behavior: none; }
.ai-wait-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  height: var(--ai-viewport-height, 100dvh);
  z-index: 2147483000;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ai-wait-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.ai-wait-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(121,175,168,.28), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(47,107,255,.25), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(201,168,106,.22), transparent 32%),
    rgba(247,250,255,.92);
  backdrop-filter: blur(16px) saturate(125%);
}
.ai-wait-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 34px;
  padding: clamp(22px, 4vw, 36px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.82)),
    radial-gradient(circle at 0 0, rgba(47,107,255,.13), transparent 38%);
  box-shadow: 0 28px 90px rgba(31,42,68,.20);
  transform: translateY(12px) scale(.985);
  transition: transform .24s ease;
}
.ai-wait-overlay.is-visible .ai-wait-card { transform: translateY(0) scale(1); }
.ai-wait-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(47,107,255,.22), rgba(121,175,168,.18), rgba(201,168,106,.22), rgba(47,107,255,.18));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}
.ai-wait-orbits {
  position: absolute;
  inset: -160px -120px auto auto;
  width: 360px;
  height: 360px;
  pointer-events: none;
  opacity: .72;
}
.ai-wait-orbits span {
  position: absolute;
  inset: 50%;
  width: 78px;
  height: 78px;
  margin: -39px;
  border-radius: 50%;
  background: rgba(47,107,255,.18);
  animation: aiOrbit 8s linear infinite;
}
.ai-wait-orbits span:nth-child(2) { width: 54px; height: 54px; margin: -27px; background: rgba(121,175,168,.22); animation-duration: 6s; animation-direction: reverse; }
.ai-wait-orbits span:nth-child(3) { width: 34px; height: 34px; margin: -17px; background: rgba(201,168,106,.25); animation-duration: 4.8s; }
@keyframes aiOrbit {
  from { transform: rotate(0deg) translateX(132px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(132px) rotate(-360deg); }
}
.ai-wait-head { position: relative; max-width: 620px; }
.ai-wait-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(47,107,255,.10);
  color: var(--blue-deep);
  border: 1px solid rgba(47,107,255,.16);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}
.ai-wait-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(121,175,168,.42);
  animation: aiPing 1.4s ease-out infinite;
}
@keyframes aiPing {
  0% { box-shadow: 0 0 0 0 rgba(121,175,168,.42); }
  80%,100% { box-shadow: 0 0 0 12px rgba(121,175,168,0); }
}
.ai-wait-head strong {
  display: block;
  margin: 12px 0 8px;
  font-size: clamp(25px, 4.2vw, 42px);
  line-height: 1.18;
  letter-spacing: -.04em;
  color: var(--navy);
}
.ai-wait-head p { color: var(--slate); margin: 0; max-width: 44em; }
.ai-wait-progress {
  margin: 22px 0 18px;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226,232,240,.86);
  box-shadow: inset 0 1px 2px rgba(31,42,68,.08);
}
.ai-wait-progress span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--teal), var(--gold));
  animation: aiProgress 7.5s cubic-bezier(.2,.8,.2,1) forwards, aiShimmer 1.4s linear infinite;
  background-size: 220% 100%;
}
@keyframes aiProgress {
  0% { width: 12%; }
  36% { width: 52%; }
  70% { width: 82%; }
  100% { width: 94%; }
}
@keyframes aiShimmer {
  from { background-position: 0 0; }
  to { background-position: 220% 0; }
}
.ai-wait-stepbox {
  position: relative;
  border: 1px solid rgba(47,107,255,.12);
  border-radius: 24px;
  padding: 18px 20px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}
.ai-wait-step-number {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--blue-deep);
  letter-spacing: .04em;
}
.ai-wait-stepbox h2 {
  margin: 0 0 5px;
  font-size: clamp(18px, 2.8vw, 25px);
  letter-spacing: -.02em;
}
.ai-wait-stepbox p { margin: 0; color: var(--slate); font-size: 14px; line-height: 1.7; }
.ai-wait-route-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.ai-mini-video {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255,255,255,.68);
  min-height: 94px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.ai-mini-video::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: aiCardSweep 2.6s ease-in-out infinite;
}
.ai-mini-video:nth-child(2)::after { animation-delay: .35s; }
.ai-mini-video:nth-child(3)::after { animation-delay: .7s; }
@keyframes aiCardSweep {
  0%, 45% { transform: translateX(-110%); }
  80%, 100% { transform: translateX(110%); }
}
.ai-mini-video.active,
.ai-mini-video.pulse {
  transform: translateY(-3px);
  border-color: rgba(47,107,255,.28);
  background: rgba(238,245,255,.92);
  box-shadow: 0 18px 38px rgba(47,107,255,.11);
}
.ai-mini-video span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 10px;
}
.ai-mini-video b { display: block; font-size: 14px; }
.ai-mini-video small { color: var(--slate); }
.ai-wait-message {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(31,42,68,.045);
  color: var(--navy-soft);
  font-weight: 800;
}
.ai-wait-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  flex: 0 0 auto;
  animation: aiDot 1.1s ease-in-out infinite alternate;
}
@keyframes aiDot { from { transform: scale(.75); opacity: .55; } to { transform: scale(1.25); opacity: 1; } }
.ai-wait-mascot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--slate);
  font-size: 13px;
  line-height: 1.6;
}
.ai-mascot-face {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue-soft), #fff);
  box-shadow: var(--shadow-sm);
  font-size: 18px;
  animation: aiFloat 2.3s ease-in-out infinite;
}
@keyframes aiFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ai-wait-safe-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
  color: var(--slate);
  font-size: 12.5px;
  line-height: 1.65;
}
.orb-mint .ai-wait-kicker { background: rgba(121,175,168,.13); color: var(--teal-deep); border-color: rgba(121,175,168,.22); }
.orb-sunrise .ai-wait-kicker { background: rgba(201,168,106,.15); color: var(--gold-deep); border-color: rgba(201,168,106,.26); }
.orb-violet .ai-wait-kicker { background: rgba(124,92,255,.10); color: #5642b7; border-color: rgba(124,92,255,.20); }
@media (max-width: 720px) {
  .ai-wait-overlay {
    place-items: start center;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .ai-wait-card {
    width: 100%;
    max-height: calc(var(--ai-viewport-height, 100dvh) - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 24px;
    margin: 0;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
  }
  .ai-wait-head strong { font-size: clamp(24px, 7.2vw, 32px); }
  .ai-wait-head p { font-size: 13px; line-height: 1.65; }
  .ai-wait-progress { margin: 16px 0 14px; height: 10px; }
  .ai-wait-stepbox { border-radius: 18px; padding: 14px 15px; }
  .ai-wait-stepbox h2 { font-size: 19px; }
  .ai-wait-stepbox p { font-size: 13px; line-height: 1.6; }
  .ai-wait-route-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
  .ai-mini-video { min-height: 88px; padding: 10px; border-radius: 15px; }
  .ai-mini-video span { width: 25px; height: 25px; margin-bottom: 7px; border-radius: 8px; }
  .ai-mini-video b { font-size: 12px; }
  .ai-mini-video small { display: block; font-size: 10.5px; line-height: 1.35; }
  .ai-wait-message { min-height: 40px; padding: 10px 12px; border-radius: 15px; font-size: 12.5px; line-height: 1.5; }
  .ai-wait-mascot { margin-top: 10px; font-size: 12px; }
  .ai-mascot-face { width: 36px; height: 36px; border-radius: 13px; }
  .ai-wait-safe-note { margin-top: 9px; padding-top: 9px; font-size: 11.5px; }
  .ai-wait-orbits { inset: -190px -170px auto auto; opacity: .5; }
}
@media (max-width: 390px) {
  .ai-wait-card { padding: 15px; border-radius: 21px; }
  .ai-wait-kicker { padding: 6px 10px; font-size: 11px; }
  .ai-wait-head strong { margin-top: 10px; font-size: 23px; }
  .ai-wait-route-preview { gap: 5px; }
  .ai-mini-video { padding: 8px; min-height: 82px; }
  .ai-wait-safe-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-wait-orbits span,
  .ai-wait-kicker::before,
  .ai-wait-progress span,
  .ai-mini-video::after,
  .ai-wait-dot,
  .ai-mascot-face { animation: none !important; }
  .ai-wait-progress span { width: 86%; }
}

/* 動画視聴中の操作はページ再読み込みなしで保存するための状態表示 */
.ajax-inline-message {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-size: 12.5px;
  line-height: 1.5;
}
.status-buttons + .ajax-inline-message {
  display: block;
  margin: 10px 0 0;
}
.status-buttons button.is-saving,
.ajax-favorite-form button.is-saving {
  opacity: .72;
  cursor: progress;
}
.status-buttons button.just-saved,
.ajax-favorite-form button.just-saved {
  animation: softSavedPulse .95s ease both;
}
@keyframes softSavedPulse {
  0% { transform: translateY(0) scale(1); box-shadow: none; }
  45% { transform: translateY(-1px) scale(1.015); box-shadow: 0 12px 28px rgba(37, 99, 235, .14); }
  100% { transform: translateY(0) scale(1); box-shadow: none; }
}

/* ============================================================
   V12 Mobile App Experience
   スマートフォンを「縮小したPC版」ではなく、専用UIとして最適化
   ============================================================ */

html {
  min-width: 320px;
  background: var(--bg);
}
body {
  overflow-x: hidden;
}
button, a, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}
.nav-scrim,
.mobile-tabbar {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .button:hover,
  button:hover,
  .card-hover:hover,
  .route-card-s:hover,
  .trust-card:hover,
  .video-card:hover {
    transform: none;
  }
}

@media (max-width: 1480px) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }
  .site-header-inner {
    width: calc(100% - 24px);
    min-height: 60px;
    gap: 10px;
  }
  .brand {
    min-width: 0;
  }
  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .brand-text {
    min-width: 0;
  }
  .brand-text strong {
    max-width: min(52vw, 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15.5px;
  }
  .brand-text small {
    font-size: 10px;
  }
  .nav-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    box-shadow: none;
    z-index: 92;
  }
  .site-nav-area {
    display: flex;
    position: fixed;
    z-index: 91;
    top: calc(60px + env(safe-area-inset-top));
    right: 0;
    bottom: 0;
    left: auto;
    width: min(88vw, 380px);
    max-height: none;
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    background: rgba(255,255,255,.98);
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 24px 0 0 0;
    box-shadow: -22px 0 60px rgba(31,42,68,.18);
    transform: translateX(104%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .24s ease, visibility .24s ease;
  }
  .site-nav-area.open {
    display: flex;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .site-nav {
    display: grid;
    gap: 6px;
    margin: 0;
  }
  .site-nav a,
  .nav-actions > a,
  .nav-actions .button,
  .logout-inline-form button {
    width: 100%;
    min-height: 50px;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 15px;
    border-radius: 14px;
    font-size: 15px;
    white-space: nowrap;
  }
  .site-nav a {
    border: 1px solid transparent;
  }
  .site-nav a:active,
  .nav-link:active {
    background: var(--blue-soft);
  }
  .nav-actions {
    display: grid;
    gap: 8px;
    align-items: stretch;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .guest-pill {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
    padding: 10px 12px;
  }
  .logout-inline-form {
    width: 100%;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    z-index: 89;
    inset: 0;
    background: rgba(15,23,42,.34);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }
  body.mobile-nav-open {
    overflow: hidden;
    touch-action: none;
  }
  body.mobile-nav-open .nav-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 760px) {
  :root {
    --radius-lg: 21px;
    --radius-md: 16px;
    --radius-sm: 11px;
    --mobile-gutter: 12px;
  }
  html {
    scroll-padding-top: calc(72px + env(safe-area-inset-top));
  }
  body {
    font-size: 15px;
    line-height: 1.72;
    background-image:
      radial-gradient(580px 320px at 100% 0, rgba(47,107,255,.08), transparent 64%),
      linear-gradient(180deg, #F7FAFF 0%, #F1F6FD 55%, #F7FAFF 100%);
    background-attachment: scroll;
  }
  h1 {
    font-size: clamp(27px, 8.2vw, 38px);
    line-height: 1.2;
    letter-spacing: -.025em;
  }
  h2 {
    font-size: clamp(21px, 6vw, 28px);
  }
  h3 {
    font-size: 17px;
  }
  .lead {
    font-size: 15px;
    line-height: 1.78;
  }
  .container,
  .site-footer-inner,
  .admin-container,
  .admin-topbar-inner {
    width: calc(100% - (var(--mobile-gutter) * 2));
  }
  .container {
    padding: 14px 0 36px;
  }
  .admin-container {
    padding: 14px 0 36px;
  }
  .panel,
  .card {
    padding: 18px;
    margin: 16px 0;
    border-radius: 20px;
  }
  .side-card,
  .mini-card,
  .admin-card,
  .auth-card,
  .auth-side {
    padding: 18px;
    border-radius: 20px;
  }
  .section-head {
    margin: 30px 0 16px;
    text-align: left;
  }
  .section-head .lead {
    margin: 0;
  }
  .eyebrow,
  .hero-badge {
    margin-bottom: 11px;
    padding: 6px 11px;
    font-size: 11.5px;
  }
  .mode-banner {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 2px 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 15px;
    font-size: 12px;
    line-height: 1.55;
  }
  .mode-banner::before {
    grid-row: 1 / span 2;
    align-self: start;
  }
  .mode-banner strong,
  .mode-banner span {
    min-width: 0;
  }
  .alert {
    padding: 13px 14px;
    margin: 12px 0;
    border-radius: 15px;
    font-size: 13.5px;
  }

  /* Touch-friendly controls */
  .button,
  button,
  .btn {
    min-height: 48px;
    padding: 11px 16px;
    border-radius: 14px;
    font-size: 14.5px;
  }
  .button.small,
  .small-button {
    min-height: 44px;
    padding: 9px 13px;
    font-size: 13.5px;
  }
  .button.large,
  .cta-big {
    min-height: 56px;
    padding: 13px 18px;
    font-size: 15.5px;
  }
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select {
    min-height: 50px;
    margin-top: 6px;
    padding: 13px 14px;
    border-radius: 13px;
    font-size: 16px;
  }
  textarea {
    line-height: 1.65;
  }
  label {
    font-size: 13.5px;
  }
  .inline-actions,
  .hero-actions {
    gap: 9px;
  }
  .inline-actions > .button,
  .inline-actions > form,
  .inline-actions > form > button {
    max-width: 100%;
  }

  /* Mobile bottom tab bar */
  .mobile-tabbar {
    position: fixed;
    z-index: 70;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    min-height: 64px;
    padding: 6px;
    border: 1px solid rgba(203,213,225,.9);
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 46px rgba(31,42,68,.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
  .mobile-tabbar a {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    border-radius: 17px;
    color: var(--slate);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.2;
  }
  .mobile-tabbar a:active {
    background: var(--mist);
  }
  .mobile-tabbar a.is-active {
    color: var(--blue-deep);
    background: var(--blue-soft);
  }
  .mobile-tabbar-icon {
    display: grid;
    place-items: center;
    height: 24px;
  }
  .mobile-tabbar a.is-active::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 20px;
    height: 3px;
    border-radius: 999px;
    background: var(--blue);
  }
  .has-mobile-tabbar .site-footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* Homepage */
  .action-hero {
    gap: 20px;
    padding: 14px 0 22px;
  }
  .action-hero::before {
    width: 320px;
    height: 320px;
    inset: 0 -120px auto auto;
    opacity: .72;
  }
  .action-hero-copy h1 {
    max-width: none;
    margin-bottom: 13px;
    font-size: clamp(31px, 9vw, 43px);
    line-height: 1.1;
  }
  .action-hero-copy h1::after {
    width: 84px;
    height: 6px;
    margin-top: 13px;
  }
  .action-lead {
    font-size: 15px;
    line-height: 1.8;
  }
  .hero-proof-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 14px;
  }
  .hero-proof-row span {
    width: auto;
    justify-content: flex-start;
    min-height: 42px;
    padding: 7px 10px;
    border-radius: 13px;
    font-size: 11.5px;
    line-height: 1.35;
  }
  .hero-proof-row span:last-child {
    grid-column: 1 / -1;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 15px;
  }
  .hero-actions .button,
  .hero-actions form {
    width: 100%;
  }
  .hero-note {
    align-items: flex-start;
    margin-top: 11px;
    font-size: 12px;
    line-height: 1.6;
  }
  .action-search-wrap {
    margin: 0;
  }
  .action-search-wrap::before {
    inset: 10px 2px -6px 10px;
    border-radius: 21px;
  }
  .action-search-wrap::after {
    width: 52px;
    height: 52px;
    right: -5px;
    top: -8px;
  }
  .action-search-card {
    padding: 16px;
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(31,42,68,.14);
  }
  .search-card-topline {
    flex-direction: row;
    align-items: center;
    margin-bottom: 11px;
  }
  .mini-step,
  .mini-time {
    padding: 5px 9px;
    font-size: 10.5px;
  }
  .action-search-card h2 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.45;
  }
  .action-input-shell textarea,
  .input-shell textarea {
    min-height: 112px;
    padding: 15px 14px 33px;
    font-size: 16px;
    border-radius: 14px;
  }
  .char-counter {
    right: 10px;
    bottom: 8px;
    font-size: 11px;
  }
  .example-label {
    margin: 14px 0 8px;
    font-size: 12px;
  }
  .action-chips,
  .chips {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
  }
  .action-chips button,
  .chips button {
    min-height: 46px;
    padding: 8px 9px;
    justify-content: flex-start;
    font-size: 12.5px;
    white-space: normal;
    line-height: 1.35;
  }
  .chips button .chip-ico {
    width: 25px;
    height: 25px;
  }
  .compact-time-row,
  .time-row {
    gap: 9px;
    padding: 11px !important;
    margin: 13px 0 !important;
    border-radius: 15px;
  }
  .compact-time-row > span {
    font-size: 12px;
  }
  .compact-time-pills,
  .time-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    width: 100%;
    gap: 6px;
    margin-left: 0;
  }
  .time-pill span,
  .compact-time-pills .time-pill span {
    width: 100%;
    min-height: 43px;
    padding: 7px 5px;
    font-size: 12.5px;
  }
  .hero-submit {
    min-height: 61px;
    border-radius: 17px;
  }
  .search-microcopy {
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.55;
  }
  .instant-answer {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin: 6px 0 20px;
  }
  .instant-answer-card {
    padding: 13px;
    border-radius: 16px;
  }
  .instant-answer-card.strong {
    grid-column: 1 / -1;
  }
  .instant-answer-card span {
    font-size: 10.5px;
  }
  .instant-answer-card strong {
    font-size: 13px;
  }
  .result-demo {
    padding: 16px;
    border-radius: 22px;
  }
  .demo-board {
    gap: 11px;
    margin-top: 13px;
  }
  .demo-input-card,
  .demo-route-card {
    padding: 15px;
    border-radius: 17px;
  }
  .demo-input-card strong {
    font-size: 23px;
  }
  .hero-preview-item.demo-item {
    gap: 9px;
    padding: 10px;
    border-radius: 13px;
  }
  .hero-preview-item.demo-item .hp-step {
    width: 30px;
    height: 30px;
  }
  .hero-preview-item.demo-item .hp-star {
    display: none;
  }
  .action-value-card {
    min-height: 0;
  }
  .before-after {
    gap: 12px;
    margin: 20px 0;
  }
  .before-box,
  .after-box {
    padding: 18px;
    border-radius: 21px;
  }
  .how-steps {
    display: flex;
    gap: 11px;
    overflow-x: auto;
    margin-right: calc(var(--mobile-gutter) * -1);
    margin-left: calc(var(--mobile-gutter) * -1);
    padding: 2px var(--mobile-gutter) 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .how-steps::-webkit-scrollbar {
    display: none;
  }
  .how-step {
    flex: 0 0 min(78vw, 310px);
    min-height: 172px;
    padding: 18px;
    border-radius: 20px;
    scroll-snap-align: center;
  }
  .benefit-strip {
    padding: 18px;
    margin: 18px 0;
    border-radius: 20px;
  }
  .benefit-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
  }
  .benefit-item {
    gap: 8px;
  }
  .benefit-item .icon-bubble {
    width: 31px;
    height: 31px;
  }
  .benefit-item strong {
    font-size: 13px;
  }
  .benefit-item small {
    font-size: 11px;
  }
  .pricing-teaser,
  .action-pricing {
    align-items: stretch;
  }
  .pricing-teaser .button,
  .action-pricing .button,
  .final-action-panel .button {
    width: 100%;
  }

  /* Search result / route pages */
  .result-head {
    margin: 8px 0 12px;
  }
  .result-head h1 {
    margin-bottom: 5px;
  }
  .guest-thin-banner {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.6;
  }
  .page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }
  .aside-col {
    position: static;
  }
  .io-cards {
    gap: 10px;
  }
  .io-card {
    padding: 15px;
    border-radius: 17px;
  }
  .input-quote {
    display: grid;
    gap: 8px;
    align-items: start;
    padding: 11px 12px;
    font-size: 14px;
  }
  .input-quote a {
    justify-self: start;
  }
  .intent-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
  }
  .intent-grid > div {
    padding: 9px 10px;
  }
  .metric-strip {
    grid-template-columns: repeat(2, minmax(0,1fr));
    margin: 14px 0 8px;
    border-radius: 18px;
  }
  .metric-cell {
    min-width: 0;
    padding: 13px 11px;
    gap: 8px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .metric-cell:nth-child(-n+2) {
    border-top: 0;
  }
  .metric-cell:nth-child(even) {
    border-left: 1px solid var(--border);
  }
  .metric-cell .icon-bubble {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }
  .metric-cell .metric-text {
    min-width: 0;
  }
  .metric-cell .metric-text span {
    font-size: 10.5px;
  }
  .metric-cell .metric-text strong {
    display: block;
    font-size: 16px;
    overflow-wrap: anywhere;
  }
  .metric-cell .metric-text strong small {
    display: block;
    font-size: 10.5px;
  }
  .metric-footnote {
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 10px;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 11.5px;
  }
  .route-timeline {
    gap: 18px;
    margin: 16px 0;
  }
  .route-step {
    grid-template-columns: 44px minmax(0,1fr);
    gap: 8px;
  }
  .step-marker {
    width: 40px;
    height: 40px;
  }
  .step-marker small {
    display: none;
  }
  .step-marker b {
    font-size: 15px;
  }
  .step-role {
    max-width: 42px;
    overflow: hidden;
    padding: 3px 6px;
    font-size: 9px;
    text-overflow: ellipsis;
  }
  .video-card {
    border-radius: 19px;
  }
  .video-card-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .video-thumb {
    max-width: none;
    width: 100%;
    border-radius: 0;
  }
  .video-body {
    gap: 9px;
    padding: 15px;
  }
  .video-title-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .video-title-row h2 {
    font-size: 16px;
    line-height: 1.5;
  }
  .rec-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 11px;
    border-radius: 11px;
    text-align: left;
  }
  .rec-badge span,
  .rec-badge strong {
    display: inline;
  }
  .rec-badge strong {
    font-size: 16px;
  }
  .video-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    font-size: 11.5px;
  }
  .reason-block {
    padding: 10px 11px;
    font-size: 12.5px;
  }
  .video-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .video-actions .button,
  .video-actions button,
  .video-actions form {
    width: 100%;
    min-width: 0;
  }
  .video-actions form button {
    width: 100%;
  }
  .video-extra,
  .quiz-box,
  .feedback-box {
    padding: 14px 15px;
  }
  .score-list {
    columns: 1;
  }
  .feedback-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .feedback-actions button {
    width: 100%;
    min-height: 46px;
    padding: 8px 6px;
    border-radius: 13px;
    font-size: 12.5px;
  }
  .save-cta {
    display: grid;
    grid-template-columns: 50px minmax(0,1fr);
    gap: 12px;
    padding: 16px;
    margin: 18px 0;
    text-align: left;
    border-radius: 20px;
  }
  .save-cta .save-icon {
    width: 50px;
    height: 50px;
  }
  .save-cta .save-icon svg {
    width: 24px;
    height: 24px;
  }
  .save-cta-actions {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }
  .save-cta-actions .button,
  .save-cta-actions form,
  .save-cta-actions form button {
    width: 100%;
  }

  /* Watch page */
  .watch-topline {
    display: grid;
    gap: 8px;
    margin: 2px 0 11px;
  }
  .watch-topline h1 {
    display: grid;
    justify-items: start;
    gap: 7px;
    font-size: 20px;
  }
  .page-watch .container {
    width: 100%;
    padding-top: 10px;
  }
  .page-watch .mode-banner,
  .page-watch .watch-topline,
  .page-watch .page-grid > .aside-col,
  .page-watch .page-grid > div > section.panel,
  .page-watch .page-grid > div > .watch-bottom-nav {
    margin-right: var(--mobile-gutter);
    margin-left: var(--mobile-gutter);
  }
  .page-watch .page-grid {
    gap: 12px;
  }
  .player-card {
    border-radius: 0;
    border-right: 0;
    border-left: 0;
  }
  .ai-hint {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 10px;
    padding: 14px var(--mobile-gutter);
  }
  .ai-hint > .inline-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 2px 0 0 !important;
  }
  .ai-hint > .inline-actions .button,
  .ai-hint > .inline-actions form,
  .ai-hint > .inline-actions form button {
    width: 100%;
  }
  .watch-info-list > div {
    align-items: flex-start;
  }
  .watch-info-list strong {
    max-width: 58%;
    overflow-wrap: anywhere;
  }
  .status-buttons {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
  }
  .status-buttons button {
    min-height: 72px;
    padding: 8px 4px;
    font-size: 11px;
  }
  .watch-bottom-nav {
    position: sticky;
    z-index: 30;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 8px;
    margin-top: 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .watch-bottom-center {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 2px 5px 5px;
    font-size: 10.5px;
  }
  .watch-bottom-center b {
    display: inline;
    margin-left: 5px;
    font-size: 11.5px;
  }
  .watch-bottom-nav .button {
    min-width: 0;
    min-height: 48px;
    padding: 8px 9px;
    font-size: 11.5px;
    line-height: 1.35;
  }

  /* My page as a mobile dashboard */
  .dash-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 0;
  }
  .dash-nav {
    position: sticky;
    z-index: 32;
    top: calc(60px + env(safe-area-inset-top));
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-right: calc(var(--mobile-gutter) * -1);
    margin-left: calc(var(--mobile-gutter) * -1);
    padding: 8px var(--mobile-gutter);
    overflow-x: auto;
    border-width: 1px 0;
    border-radius: 0;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 20px rgba(31,42,68,.08);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .dash-nav::-webkit-scrollbar {
    display: none;
  }
  .dash-nav a,
  .dash-nav .dash-nav-item {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    white-space: nowrap;
    scroll-snap-align: center;
    font-size: 12px;
  }
  .dash-nav a.active {
    border-color: #D8E6FF;
  }
  .dash-nav hr {
    display: none;
  }
  .dash-nav .primary {
    margin: 0;
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
  }
  .dash-greet {
    display: grid;
    gap: 12px;
    margin: 4px 0 14px;
  }
  .dash-greet h1 {
    font-size: 26px;
  }
  .dash-greet > .button,
  .dash-greet > form,
  .dash-greet > form button {
    width: 100%;
  }
  .stat-cards {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-bottom: 14px;
  }
  .stat-card {
    min-width: 0;
    padding: 13px;
    border-radius: 16px;
  }
  .stat-card .stat-text strong {
    font-size: 19px;
  }
  .stat-card .icon-bubble,
  .stat-card .ring {
    width: 38px;
    height: 38px;
  }
  .stat-card .ring::after {
    width: 28px;
    height: 28px;
  }
  .next-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }
  .next-thumb {
    width: 100%;
  }
  .next-actions {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }
  .route-cards,
  .compact-records {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .route-card-s {
    padding: 15px;
    border-radius: 17px;
  }
  .dash-section-head {
    align-items: flex-end;
    margin-top: 20px;
  }
  .dash-side {
    display: grid;
    gap: 10px;
  }
  .dash-side .side-card {
    margin: 0;
  }
  .history-list {
    gap: 10px;
  }
  .history-item {
    grid-template-columns: 108px minmax(0,1fr);
    gap: 11px;
    padding: 11px;
    border-radius: 18px;
  }
  .history-body h2 {
    font-size: 14px;
  }
  .history-topline {
    gap: 5px;
    font-size: 10.5px;
  }
  .history-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 7px;
  }
  .history-actions .button {
    width: 100%;
  }
  .record-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  .record-grid > div {
    padding: 12px;
  }
  .record-grid strong {
    font-size: 16px;
  }

  /* Pricing / auth / legal */
  .pricing-hero {
    padding: 18px 0 6px;
    text-align: left;
  }
  .pricing-hero .lead {
    margin-left: 0;
  }
  .assure-row {
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 16px 0;
  }
  .assure-item {
    padding: 14px;
    border-radius: 16px;
  }
  .pricing-grid {
    display: flex;
    gap: 12px;
    margin-right: calc(var(--mobile-gutter) * -1);
    margin-left: calc(var(--mobile-gutter) * -1);
    padding: 14px var(--mobile-gutter) 20px;
    overflow-x: auto;
    align-items: stretch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pricing-grid::-webkit-scrollbar {
    display: none;
  }
  .price-card {
    flex: 0 0 min(86vw, 350px);
    min-width: 0;
    padding: 22px 18px;
    border-radius: 21px;
    scroll-snap-align: center;
  }
  .price-card.featured {
    order: -1;
  }
  .compare-table-wrap,
  .table-scroll,
  .table-wrap,
  .legal-table-wrap {
    max-width: 100%;
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table,
  .data-table,
  .check-table,
  .admin-table {
    font-size: 12.5px;
  }
  .auth-wrap,
  .auth-wrap.single {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 14px 0;
  }
  .auth-card,
  .auth-side {
    padding: 19px 17px;
  }
  .auth-card .primary.large,
  .google-login-button {
    width: 100%;
  }
  .legal-page h2 {
    margin-top: 24px;
    font-size: 18px;
  }

  /* Footer */
  .site-footer {
    margin-top: 12px;
  }
  .site-footer-inner {
    padding: 30px 0 18px;
    gap: 20px;
  }
  .footer-col {
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .footer-col a {
    min-height: 38px;
    padding: 8px 0;
  }
  .footer-bottom {
    padding: 14px 12px;
    font-size: 11px;
  }

  /* Admin mobile usability */
  .admin-topbar {
    padding-top: env(safe-area-inset-top);
  }
  .admin-topbar-inner {
    min-height: 58px;
    gap: 8px;
  }
  .admin-topbar .brand-text small,
  .admin-account-text,
  .admin-topbar-actions > .button {
    display: none;
  }
  .admin-badge {
    padding: 4px 8px;
    font-size: 10.5px;
  }
  .admin-topbar-actions {
    gap: 6px;
  }
  .admin-topbar-actions .logout-inline-form,
  .admin-topbar-actions .logout-inline-form button {
    width: auto;
  }
  .admin-topbar-actions .logout-inline-form button {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11.5px;
  }
  .admin-shell {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .admin-sidebar {
    position: sticky;
    z-index: 30;
    top: calc(58px + env(safe-area-inset-top));
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-right: calc(var(--mobile-gutter) * -1);
    margin-left: calc(var(--mobile-gutter) * -1);
    padding: 8px var(--mobile-gutter);
    overflow-x: auto;
    border-width: 1px 0;
    border-radius: 0;
    scrollbar-width: none;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .admin-sidebar::-webkit-scrollbar {
    display: none;
  }
  .admin-sidebar a {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    white-space: nowrap;
    font-size: 12px;
  }
  .admin-sidebar a.active {
    box-shadow: none;
  }
  .admin-sidebar hr,
  .admin-sidebar .sidebar-foot {
    display: none;
  }
  .admin-page-head {
    display: grid;
    gap: 10px;
  }
  .admin-page-head .head-side,
  .admin-page-head .head-side .button {
    width: 100%;
  }
  .kpi-row {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  .kpi-card {
    min-width: 0;
    padding: 13px;
  }
  .kpi-card strong.kpi-value {
    font-size: 21px;
  }
  .admin-cols-2,
  .admin-cols-3,
  .admin-cols-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .admin-card {
    padding: 16px;
  }
  .admin-save-bar {
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .admin-save-bar button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  :root {
    --mobile-gutter: 10px;
  }
  .brand-text small {
    display: none;
  }
  .brand-text strong {
    max-width: 58vw;
  }
  .action-hero-copy h1 {
    font-size: clamp(29px, 9.5vw, 38px);
  }
  .search-card-topline {
    flex-direction: row;
    align-items: center;
  }
  .action-chips,
  .chips {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .compact-time-pills,
  .time-pills {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .instant-answer {
    grid-template-columns: 1fr 1fr;
  }
  .benefit-grid {
    grid-template-columns: 1fr;
  }
  .video-actions {
    grid-template-columns: 1fr;
  }
  .save-cta {
    grid-template-columns: 44px minmax(0,1fr);
  }
  .save-cta .save-icon {
    width: 44px;
    height: 44px;
  }
  .history-item {
    grid-template-columns: 1fr;
  }
  .history-thumb {
    width: 100%;
  }
  .record-grid {
    grid-template-columns: 1fr;
  }
  .mobile-tabbar {
    right: 6px;
    left: 6px;
    padding: 5px;
    border-radius: 20px;
  }
  .mobile-tabbar a {
    font-size: 9.5px;
  }
  .mobile-tabbar-icon svg {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 360px) {
  .site-header-inner {
    width: calc(100% - 16px);
  }
  .brand-mark {
    width: 34px;
    height: 34px;
  }
  .brand-text strong {
    max-width: 52vw;
    font-size: 14px;
  }
  .hero-proof-row,
  .action-chips,
  .chips {
    grid-template-columns: 1fr;
  }
  .hero-proof-row span:last-child {
    grid-column: auto;
  }
  .compact-time-pills,
  .time-pills {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .metric-strip,
  .stat-cards {
    grid-template-columns: 1fr;
  }
  .metric-cell,
  .metric-cell:nth-child(even),
  .metric-cell:nth-child(-n+2) {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .metric-cell:first-child {
    border-top: 0;
  }
  .feedback-actions,
  .ai-hint > .inline-actions,
  .watch-bottom-nav,
  .next-actions,
  .history-actions {
    grid-template-columns: 1fr;
  }
  .watch-bottom-center {
    grid-column: 1;
  }
  .mobile-tabbar a span:last-child {
    font-size: 9px;
  }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-tabbar {
    min-height: 54px;
  }
  .mobile-tabbar a {
    min-height: 44px;
  }
  .mobile-tabbar-icon {
    height: 20px;
  }
  .site-nav-area {
    top: calc(54px + env(safe-area-inset-top));
  }
  .ai-wait-safe-note,
  .ai-wait-mascot {
    display: none;
  }
}

@media (max-width: 760px) {
  .mobile-tabbar {
    transition: transform .18s ease, opacity .18s ease;
  }
  body.mobile-keyboard-open .mobile-tabbar {
    transform: translateY(130%);
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 560px) {
  .table-scroll:has(.mobile-card-table) {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .mobile-card-table,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .mobile-card-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  .mobile-card-table thead {
    display: none;
  }
  .mobile-card-table tr {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }
  .mobile-card-table td {
    display: grid;
    grid-template-columns: 86px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .mobile-card-table td:last-child {
    border-bottom: 0;
  }
  .mobile-card-table td::before {
    content: attr(data-label);
    color: var(--slate);
    font-size: 11px;
    font-weight: 800;
  }
  .mobile-card-table td .button {
    width: 100%;
  }
}

/* Prevent decorative mobile shapes from creating horizontal page scroll. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}
@media (max-width: 760px) {
  .action-hero::before {
    inset: 0 0 auto auto;
    width: 250px;
  }
  .action-search-wrap::after {
    right: 0;
  }
}

/* ============================================================
   V15 Mobile stability patch
   - iOS/Androidのメニュー重なり順を固定
   - 全画面backdrop-filterによる描画停止を回避
   - AI検索中は通信中も生きた進捗を表示
   ============================================================ */

/* JSで進捗幅を更新するため、旧い一回限りの幅アニメーションを上書きします。 */
.ai-wait-progress span[data-ai-progress] {
  width: 10%;
  animation: aiShimmer 1.35s linear infinite;
  transition: width .32s ease-out;
  will-change: width, background-position;
}
.ai-wait-live-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -7px 2px 12px;
  color: var(--slate);
  font-size: 12px;
  line-height: 1.45;
}
.ai-live-badge {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--navy-soft);
}
.ai-live-badge b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-live-pulse {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(121,175,168,.42);
  animation: aiLivePulse 1.35s ease-out infinite;
}
@keyframes aiLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(121,175,168,.42); transform: scale(.86); }
  75%,100% { box-shadow: 0 0 0 9px rgba(121,175,168,0); transform: scale(1); }
}

@media (max-width: 1120px) {
  /*
     .site-header の backdrop-filter がスタッキングコンテキストを作るため、
     外側のスクリーンがドロワーまで覆っていた問題を明示的な階層で解消。
  */
  html.mobile-nav-open,
  body.mobile-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body.mobile-nav-open .site-header {
    z-index: 1000;
    isolation: isolate;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.mobile-nav-open .site-header-inner {
    position: relative;
    z-index: 1;
  }
  .nav-scrim {
    z-index: 900;
    background: rgba(15,23,42,.46);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .site-nav-area {
    z-index: 1002;
    top: calc(60px + env(safe-area-inset-top));
    height: calc(var(--app-viewport-height, 100dvh) - 60px - env(safe-area-inset-top));
    max-height: calc(var(--app-viewport-height, 100dvh) - 60px - env(safe-area-inset-top));
    width: min(88vw, 380px);
    min-width: min(82vw, 300px);
    padding-bottom: max(22px, calc(16px + env(safe-area-inset-bottom)));
    background: #fff;
    opacity: 0;
    transform: translate3d(104%,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    contain: layout paint;
    overscroll-behavior: contain;
    transition: transform .23s cubic-bezier(.2,.75,.25,1), opacity .18s ease, visibility .23s ease;
  }
  .site-nav-area.open {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  .nav-toggle {
    position: relative;
    z-index: 1003;
  }

  /* スマホ全体の横はみ出し・長文崩れを防ぐ共通保険。 */
  .container,
  .site-header-inner,
  .site-footer-inner,
  .page-grid,
  .hero,
  .panel,
  .card,
  .video-card,
  .video-card-main,
  .io-card,
  .route-step,
  .action-search-card,
  .search-form,
  .site-nav-area,
  .site-nav,
  .nav-actions {
    min-width: 0;
    max-width: 100%;
  }
  .panel,
  .card,
  .video-card,
  .io-card,
  .alert,
  .reason-block,
  .input-quote,
  details,
  summary,
  p,
  li,
  h1,
  h2,
  h3,
  h4,
  code {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  input,
  textarea,
  select,
  button,
  .button,
  iframe,
  video,
  canvas,
  svg,
  img {
    max-width: 100%;
  }
  input,
  textarea,
  select {
    min-width: 0;
  }
  .table-scroll,
  .legal-table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* タブレットは横幅だけでPCメニューを詰め込まず、読みやすいドロワーへ統一する。 */
@media (min-width: 761px) and (max-width: 1120px) {
  .container { width: min(100% - 36px, 980px); }
  .auth-wrap { grid-template-columns: 1fr; max-width: 720px; }
  .site-nav-area { width: min(62vw, 420px); min-width: 340px; }
  .site-nav a, .nav-actions > a, .nav-actions .button { white-space: nowrap; }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid > .goal-pack:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  /* iPhone・Android・小型タブレットの全画面blurはGPU負荷が大きく、アニメーション停止の原因になるため使わない。 */
  .ai-wait-overlay {
    width: 100vw;
    min-height: 0;
    height: var(--ai-viewport-height, 100dvh);
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow: hidden;
    transform: translateZ(0);
  }
  .ai-wait-backdrop {
    background:
      radial-gradient(circle at 12% 8%, rgba(121,175,168,.20), transparent 34%),
      radial-gradient(circle at 90% 14%, rgba(47,107,255,.19), transparent 32%),
      linear-gradient(180deg, #F4F8FF 0%, #EEF5FF 52%, #F7FAFF 100%);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .ai-wait-card {
    width: 100%;
    max-width: 560px;
    max-height: calc(var(--ai-viewport-height, 100dvh) - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    contain: layout paint;
    transform: translate3d(0,10px,0) scale(.99);
    will-change: transform;
    box-shadow: 0 18px 48px rgba(31,42,68,.17);
  }
  .ai-wait-overlay.is-visible .ai-wait-card {
    transform: translate3d(0,0,0) scale(1);
  }
  /* 軽い要素だけを動かし、低電力端末でも滑らかさを維持。 */
  .ai-wait-orbits {
    display: none;
  }
  .ai-mini-video::after,
  .ai-wait-dot,
  .ai-live-pulse,
  .ai-mascot-face,
  .ai-wait-progress span[data-ai-progress] {
    transform: translateZ(0);
  }
  .ai-wait-live-row {
    margin: -5px 1px 10px;
    font-size: 11.5px;
  }
  .ai-live-badge {
    max-width: 72%;
  }
}

@media (max-width: 390px) {
  .site-nav-area {
    width: min(92vw, 360px);
    min-width: 0;
    border-radius: 20px 0 0 0;
    padding-inline: 13px;
  }
  .ai-wait-live-row {
    align-items: flex-start;
    gap: 8px;
  }
  .ai-live-badge {
    max-width: 68%;
  }
}

@media (max-width: 720px) and (max-height: 650px) {
  .ai-wait-route-preview,
  .ai-wait-mascot,
  .ai-wait-safe-note {
    display: none;
  }
  .ai-wait-head p {
    display: none;
  }
  .ai-wait-progress {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-live-pulse {
    animation: none !important;
    box-shadow: 0 0 0 4px rgba(121,175,168,.16);
  }
  .ai-wait-progress span[data-ai-progress] {
    animation: none !important;
    transition: width .2s linear;
  }
}
html.ai-waiting-active {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ========================================================================
   V17 利用者管理: 最新100件 / 15件ずつ / 軽量検索 / 無限スクロール
   ======================================================================== */
.chip-red { background: #FFF0F0; color: #B42318; border-color: #FFD5D2; }

.admin-user-search-card { margin-bottom: 16px; }
.user-directory-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.user-directory-heading h2 { margin: 0 0 5px; font-size: 18px; }
.user-directory-heading p { margin: 0; color: var(--slate); font-size: 13.5px; line-height: 1.7; }
.user-directory-heading .eyebrow { margin-bottom: 9px; }

.admin-user-filter-form { display: grid; gap: 12px; }
.user-filter-primary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(170px, 210px) auto;
  gap: 12px;
  align-items: end;
}
.user-filter-primary label,
.user-filter-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--navy-soft);
  font-size: 12.5px;
  font-weight: 700;
}
.search-field-shell { position: relative; display: block; }
.search-field-shell svg {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--slate);
  pointer-events: none;
}
.search-field-shell input[type="search"] {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 11px 14px 11px 42px;
  font: inherit;
  font-size: 14px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.search-field-shell input[type="search"]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(47,107,255,.11);
}
.search-field-shell input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.user-filter-primary select,
.user-filter-grid select {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 36px 10px 12px;
  font-size: 13.5px;
  border-radius: 13px;
}
.user-filter-submit { min-width: 118px; }

.user-advanced-filters {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg);
  overflow: clip;
}
.user-advanced-filters summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 14px;
  color: var(--navy-soft);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.user-advanced-filters summary::-webkit-details-marker { display: none; }
.user-advanced-filters summary::after {
  content: "+";
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: var(--blue-deep);
}
.user-advanced-filters[open] summary::after { content: "−"; }
.user-advanced-filters[open] summary { border-bottom: 1px solid var(--border); background: #fff; }
.user-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
.user-filter-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0 14px 14px;
}

.user-results-heading { align-items: center; }
.user-results-heading h2 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.user-load-state {
  flex: 0 0 auto;
  max-width: 260px;
  padding: 7px 11px;
  color: var(--slate);
  background: var(--mist);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.user-load-state.is-error { color: #B42318; background: #FFF0F0; border-color: #FFD5D2; }
.user-directory-table {
  min-width: 1714px;
  table-layout: fixed;
}
.user-directory-table .user-col-id { width: 68px; }
.user-directory-table .user-col-name { width: 154px; }
.user-directory-table .user-col-email { width: 300px; }
.user-directory-table .user-col-plan { width: 118px; }
.user-directory-table .user-col-role { width: 124px; }
.user-directory-table .user-col-provider { width: 172px; }
.user-directory-table .user-col-status { width: 144px; }
.user-directory-table .user-col-login { width: 152px; }
.user-directory-table .user-col-created { width: 164px; }
.user-directory-table .user-col-actions { width: 318px; }
.user-directory-table th,
.user-directory-table td { padding: 11px 12px; }
.user-directory-table td { font-size: 12.75px; }
.user-directory-table .chip { white-space: nowrap; }
.user-directory-table time { white-space: nowrap; font-size: 12px; color: var(--navy-soft); }
.user-name-cell strong { display: block; color: var(--navy); }
.user-name-cell small { display: block; margin-top: 3px; color: var(--slate); font-size: 10.5px; white-space: nowrap; }
.user-email-cell { max-width: none; overflow-wrap: anywhere; word-break: normal; }
.user-actions-cell { min-width: 286px; }
.user-update-form { flex-wrap: nowrap; }
.user-update-form select { min-width: 82px; }

.user-directory-card.is-user-refreshing .user-directory-table-wrap { opacity: .48; }
.user-directory-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  transition: opacity .16s ease;
}
.user-directory-table-wrap:focus-visible {
  outline: 3px solid rgba(47,107,255,.28);
  outline-offset: 3px;
}
.user-table-scroll-hint {
  margin: -6px 0 9px;
  color: var(--slate);
  font-size: 12px;
  line-height: 1.55;
}
.user-directory-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  margin-top: 10px;
  color: var(--slate);
  font-size: 13px;
  font-weight: 700;
}
.user-directory-loader[hidden] { display: none; }
.mini-spinner {
  width: 19px;
  height: 19px;
  border: 2px solid #DCE7F8;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.user-directory-sentinel { height: 2px; }
.user-load-more { display: flex; width: min(100%, 360px); margin: 12px auto 0; }
.user-load-more[hidden] { display: none; }
.user-directory-end { margin: 14px 0 0; color: var(--slate); font-size: 12.5px; text-align: center; }
.user-directory-end[hidden] { display: none; }
.user-empty-state {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 180px;
  padding: 28px;
  color: var(--slate);
  text-align: center;
}
.user-empty-state svg { color: var(--blue); }
.user-empty-state strong { color: var(--navy); font-size: 15px; }
.user-empty-state span { font-size: 12.5px; }

/* V166 クーポン管理: 内部値を日本語化しても列を潰さない */
.coupon-admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.coupon-admin-table-wrap:focus-visible {
  outline: 3px solid rgba(47,107,255,.28);
  outline-offset: 3px;
}
.coupon-campaign-table { min-width: 980px; }
.coupon-issuance-table { min-width: 1120px; }
.coupon-campaign-table .chip,
.coupon-issuance-table .chip { white-space: nowrap; }

@media (max-width: 1120px) {
  .user-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .user-directory-heading { display: grid; gap: 10px; }
  .user-results-heading { align-items: start; }
  .user-load-state { max-width: none; width: fit-content; }
  .user-filter-primary { grid-template-columns: 1fr; gap: 10px; }
  .user-filter-submit { width: 100%; }
  .user-filter-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .user-filter-actions { display: grid; grid-template-columns: 1fr 1fr; padding: 0 12px 12px; }
  .user-filter-actions .button { width: 100%; min-width: 0; }
  .search-field-shell input[type="search"] { min-height: 50px; font-size: 16px; }

  .user-directory-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .user-directory-table,
  .user-directory-table tbody { display: block; min-width: 0; width: 100%; }
  .user-directory-table { table-layout: auto; }
  .user-directory-table colgroup { display: none; }
  .user-directory-table thead { display: none; }
  .user-directory-table tbody { display: grid; gap: 11px; }
  .user-directory-table tr[data-user-row] {
    display: grid;
    width: 100%;
    padding: 13px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
  }
  .user-directory-table tr[data-user-row]:hover { background: #fff; }
  .user-directory-table tr[data-user-row] td {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    max-width: none;
    padding: 8px 1px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .user-directory-table tr[data-user-row] td::before {
    content: attr(data-label);
    color: var(--slate);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
  }
  .user-directory-table tr[data-user-row] td:last-child { border-bottom: 0; padding-bottom: 0; }
  .user-directory-table tr[data-user-row] .user-actions-cell { display: block; min-width: 0; }
  .user-directory-table tr[data-user-row] .user-actions-cell::before { display: block; margin-bottom: 8px; }
  .user-update-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; width: 100%; }
  .user-update-form select { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px 28px 8px 10px; font-size: 13px; }
  .user-update-form .small-button { min-width: 62px; }
  .user-name-cell small { white-space: normal; }
  .user-email-cell { overflow-wrap: anywhere; }
  .user-table-scroll-hint { display: none; }
  .user-directory-table tr[data-user-empty] { display: block; }
  .user-directory-table tr[data-user-empty] td { display: block; padding: 0; border: 0; }
}

@media (max-width: 420px) {
  .user-filter-grid { grid-template-columns: 1fr; }
  .user-filter-actions { grid-template-columns: 1fr; }
  .user-directory-table tr[data-user-row] td { grid-template-columns: 78px minmax(0, 1fr); }
  .user-update-form { grid-template-columns: 1fr 1fr; }
  .user-update-form .small-button { grid-column: 1 / -1; width: 100%; }
}

/* できるまでルート：常に次の行動を一つに絞る縦型学習体験 */
.dekiru-shell { max-width: 1040px; margin: 0 auto; padding: 16px 0 64px; color: #17233f; }
.dekiru-flow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 10px 0 22px; }
.dekiru-flow-head h1 { margin: 7px 0; font-size: clamp(25px,4vw,40px); line-height: 1.28; overflow-wrap: anywhere; }
.dekiru-flow-head p { margin: 0; color: #4d5d78; font-weight: 650; }
.dekiru-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 0; margin: 0 0 24px; list-style: none; }
.dekiru-progress li { position: relative; display: grid; justify-items: center; gap: 7px; min-width: 0; color: #5b6980; font-weight: 750; text-align: center; }
.dekiru-progress li::before { content: ""; position: absolute; z-index: 0; top: 19px; right: 50%; width: calc(100% + 8px); height: 4px; background: #d7dfeb; }
.dekiru-progress li:first-child::before { display: none; }
.dekiru-progress li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid #c3cedd; border-radius: 50%; background: #fff; color: #4d5d78; }
.dekiru-progress li.is-done > span { border-color: #118260; background: #118260; color: #fff; }
.dekiru-progress li.is-done::before, .dekiru-progress li.is-current::before { background: #118260; }
.dekiru-progress li.is-current > span { border-color: #1467d8; box-shadow: 0 0 0 5px rgba(20,103,216,.13); color: #1467d8; }
.dekiru-progress small { font-size: 12px; line-height: 1.35; }
.dekiru-focus-card, .dekiru-outcome-card { padding: clamp(22px,5vw,48px); border: 1px solid #d5e0ef; border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(20,46,85,.1); }
.dekiru-focus-card > h2, .dekiru-outcome-card > h2 { margin: 8px 0 12px; font-size: clamp(25px,4vw,40px); line-height: 1.35; }
.dekiru-focus-card > p { color: #46566f; font-size: 16px; line-height: 1.8; }
.dekiru-step-label { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 13px; border-radius: 999px; background: #e8f2ff; color: #0c55b3; font-size: 13px; font-weight: 850; letter-spacing: .02em; }
.diagnostic-question { margin: 26px 0; padding: 24px; border: 2px solid #d9e3f0; border-radius: 20px; background: #f9fbff; }
.diagnostic-question > span { display: inline-block; margin-bottom: 9px; color: #0c55b3; font-size: 12px; font-weight: 850; }
.dekiru-question-fieldset { display: grid; gap: 12px; min-width: 0; padding: 0; border: 0; }
.dekiru-question-fieldset legend { width: 100%; margin: 0 0 10px; color: #17233f; font-size: clamp(18px,2.4vw,24px); font-weight: 850; line-height: 1.55; }
.dekiru-choice { position: relative; display: block; cursor: pointer; }
.dekiru-choice input { position: absolute; width: 1px; height: 1px; opacity: .01; }
.dekiru-choice > span { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 13px 16px; border: 2px solid #cbd7e6; border-radius: 15px; background: #fff; color: #1e2d47; font-weight: 750; line-height: 1.55; transition: border-color .15s,box-shadow .15s,background .15s; }
.dekiru-choice > span b { flex: 0 0 auto; display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid #718096; border-radius: 50%; }
.dekiru-choice input[type="checkbox"] + span b { border-radius: 6px; }
.dekiru-choice input:checked + span { border-color: #1467d8; background: #edf5ff; box-shadow: 0 0 0 3px rgba(20,103,216,.11); }
.dekiru-choice input:checked + span b { border-color: #1467d8; background: #1467d8; }
.dekiru-choice input:checked + span b::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 900; }
.dekiru-choice input:focus-visible + span { outline: 4px solid #f1aa24; outline-offset: 2px; }
.dekiru-choice.is-unknown-option { margin-top: 4px; }
.dekiru-choice.is-unknown-option > span { border-color: #c89a46; border-style: dashed; background: #fffaf0; color: #513a12; }
.dekiru-choice.is-unknown-option input:checked + span { border-color: #b86a00; border-style: solid; background: #fff0d2; box-shadow: 0 0 0 3px rgba(184,106,0,.13); }
.dekiru-choice.is-unknown-option input:checked + span b { border-color: #b86a00; background: #b86a00; }
.dekiru-unknown-copy { display: grid; gap: 1px; min-width: 0; }
.dekiru-unknown-copy strong { color: #3f2d0d; font-size: 16px; line-height: 1.35; }
.dekiru-unknown-copy small { color: #66522e; font-size: 13px; font-weight: 650; line-height: 1.45; }
.dekiru-unknown-text-action { justify-self: start; min-height: 48px; padding: 10px 16px; border: 2px dashed #c89a46; border-radius: 13px; background: #fffaf0; color: #513a12; font: inherit; font-weight: 800; cursor: pointer; }
.dekiru-unknown-text-action:hover { border-color: #b86a00; background: #fff0d2; }
.dekiru-unknown-text-action:focus-visible { outline: 4px solid #f1aa24; outline-offset: 2px; }
.question-instruction, .field-label { color: #34445e; font-weight: 750; }
.dekiru-question-fieldset textarea, .dekiru-question-fieldset select { width: 100%; border: 2px solid #aebdd0; background: #fff; color: #17233f; font-size: 17px; }
.dekiru-question-fieldset textarea:focus, .dekiru-question-fieldset select:focus { border-color: #1467d8; box-shadow: 0 0 0 4px rgba(20,103,216,.12); outline: 0; }
.order-row { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; font-weight: 800; }
.dekiru-hint { margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: #fff6df; }
.dekiru-hint summary { cursor: pointer; color: #714c00; font-weight: 850; }
.dekiru-hint p { color: #3f3218; }
.dekiru-primary { width: 100%; min-height: 58px; margin-top: 24px; font-size: 17px; }
.dekiru-primary[aria-busy="true"] { cursor: wait; }
.dekiru-clarifications { display: grid; gap: 12px; margin-top: 18px; }
.dekiru-diagnosis-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 18px; }
.dekiru-diagnosis-summary > div { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid #d5e0ef; border-radius: 16px; background: #fff; }
.dekiru-diagnosis-summary span { color: #596980; font-size: 12px; font-weight: 750; }
.dekiru-diagnosis-summary strong { line-height: 1.5; }
.dekiru-reason { padding: 15px 17px; border-left: 5px solid #1467d8; border-radius: 10px; background: #eef6ff; color: #243650 !important; }
.dekiru-reroute-note { display: grid; gap: 5px; margin-bottom: 18px; padding: 18px 20px; border: 2px solid #efb547; border-radius: 17px; background: #fff8e9; }
.dekiru-reroute-note strong { color: #714b00; font-size: 18px; }
.dekiru-reroute-note p { margin: 0; }
.dekiru-reroute-note small { color: #604f30; }
.dekiru-next-form { margin-top: 18px; }
.center { text-align: center; }
.handwriting-workspace { display: grid; gap: 10px; }
.canvas-wrap { overflow: hidden; border: 3px solid #294c7a; border-radius: 15px; background: #fff; touch-action: none; }
.canvas-wrap canvas { display: block; width: 100%; height: auto; min-height: 260px; cursor: crosshair; touch-action: none; }
.handwriting-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.mastery-number { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline; margin: 24px auto; color: #0f6f52; }
.mastery-number strong { font-size: clamp(70px,12vw,116px); line-height: 1; }
.mastery-number > span { font-size: 38px; font-weight: 900; }
.mastery-number small { grid-column: 1 / -1; margin-top: 6px; color: #4e5e76; text-align: center; font-weight: 800; }
.outcome-evidence { max-width: 700px; margin: 20px auto; padding: 20px 24px; border-radius: 18px; background: #f1f7ff; }
.outcome-evidence h3 { margin-top: 0; }
.outcome-evidence li { margin: 8px 0; line-height: 1.65; }
.outcome-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.outcome-grid > div { padding: 17px; border: 1px solid #d6e1ed; border-radius: 15px; }
.outcome-grid .wide { grid-column: 1 / -1; }
.outcome-grid dt { color: #53637a; font-size: 12px; font-weight: 800; }
.outcome-grid dd { margin: 6px 0 0; font-weight: 800; line-height: 1.6; }
.dekiru-outcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 25px; }
.dekiru-clarity-form { margin-top:25px; padding:18px; border-radius:16px; background:#f5f8fc; }
.dekiru-clarity-form fieldset { padding:0; border:0; }
.dekiru-clarity-form legend { margin-bottom:10px; font-weight:850; }
.dekiru-clarity-form fieldset>div { display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 720px) {
  .dekiru-shell { padding-top: 4px; }
  .dekiru-flow-head { display: grid; }
  .dekiru-flow-head > .button { width: 100%; }
  .dekiru-progress { gap: 2px; }
  .dekiru-progress li > span { width: 34px; height: 34px; }
  .dekiru-progress li::before { top: 16px; width: calc(100% + 2px); }
  .dekiru-progress small { font-size: 9.5px; }
  .dekiru-focus-card, .dekiru-outcome-card { padding: 21px 16px; border-radius: 20px; }
  .diagnostic-question { padding: 18px 13px; }
  .dekiru-diagnosis-summary, .outcome-grid { grid-template-columns: 1fr; }
  .outcome-grid .wide { grid-column: auto; }
  .order-row { grid-template-columns: 64px 1fr; }
  .dekiru-outcome-actions .button { width: 100%; }
}

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

/* V100.0 — first-light cosmic onboarding + instant learning theater */
.koto-cosmic-hero{position:relative;min-height:min(900px,calc(var(--app-viewport-height,100vh) - 64px));overflow:hidden;isolation:isolate;color:#f7fbff;background:radial-gradient(circle at 72% 34%,rgba(103,132,255,.24),transparent 24%),radial-gradient(circle at 22% 78%,rgba(44,210,199,.14),transparent 31%),linear-gradient(158deg,#030718 0%,#071638 47%,#183f68 77%,#ef8b61 118%)}
.koto-cosmic-hero::before{content:"";position:absolute;inset:auto -12% -40%;z-index:-1;height:68%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0,rgba(255,189,124,.34),rgba(103,183,213,.13) 31%,transparent 67%);filter:blur(13px)}
.koto-cosmic-sky,.koto-aurora{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.koto-cosmic-sky{opacity:.9;background-image:radial-gradient(circle,rgba(255,255,255,.92) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(164,211,255,.72) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,229,200,.62) 0 1px,transparent 1.8px);background-size:73px 73px,113px 113px,167px 167px;background-position:0 0,22px 31px,51px 17px;mask-image:linear-gradient(#000 0 72%,transparent 100%)}
.koto-cosmic-sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 15px 4px rgba(151,205,255,.62);animation:kotoStarBreath 3.8s ease-in-out infinite}.koto-cosmic-sky i:nth-child(1){left:8%;top:18%;animation-delay:-1.1s}.koto-cosmic-sky i:nth-child(2){left:28%;top:11%;animation-delay:-2.8s}.koto-cosmic-sky i:nth-child(3){left:48%;top:25%;animation-delay:-.3s}.koto-cosmic-sky i:nth-child(4){right:33%;top:9%;animation-delay:-2s}.koto-cosmic-sky i:nth-child(5){right:9%;top:20%;animation-delay:-3.2s}.koto-cosmic-sky i:nth-child(6){right:18%;top:57%;animation-delay:-1.7s}
.koto-aurora span{position:absolute;width:80%;height:38%;border-radius:50%;filter:blur(64px);opacity:.16;transform:rotate(-9deg);animation:kotoAurora 13s ease-in-out infinite alternate}.koto-aurora span:first-child{left:-25%;top:20%;background:linear-gradient(90deg,#30e2ca,#5478ff,transparent)}.koto-aurora span:last-child{right:-31%;top:32%;background:linear-gradient(90deg,transparent,#705cff,#ff986d);animation-delay:-5s}@keyframes kotoStarBreath{50%{opacity:.25;transform:scale(.55)}80%{opacity:1;transform:scale(1.5)}}@keyframes kotoAurora{to{transform:translate3d(7%,5%,0) rotate(-2deg) scale(1.08)}}
.koto-cosmic-hero .koto-hero-inner{position:relative;z-index:2}.koto-cosmic-hero .koto-hero-copy{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.24)}.koto-cosmic-hero .koto-hero-copy h1,.koto-cosmic-hero .koto-hero-copy p{color:#fff}.koto-cosmic-hero .koto-hero-copy p{color:rgba(235,245,255,.79)}.koto-cosmic-hero .koto-kicker{border-color:rgba(255,255,255,.17);background:rgba(6,17,47,.39);color:rgba(238,247,255,.82);box-shadow:inset 0 1px rgba(255,255,255,.09);backdrop-filter:blur(16px)}.koto-cosmic-hero .koto-kicker b,.koto-cosmic-hero .koto-hero-copy h1 em{color:#ffb57e}.koto-cosmic-hero .koto-secondary-button{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(14px)}.koto-cosmic-hero .koto-trust-row span{color:rgba(235,246,255,.77)}.koto-cosmic-hero .koto-device{border-color:rgba(255,255,255,.24);box-shadow:0 38px 100px rgba(0,3,18,.58),0 0 90px rgba(75,138,255,.17),inset 0 1px rgba(255,255,255,.3)}.koto-cosmic-hero .koto-device-screen{background:linear-gradient(150deg,rgba(250,253,255,.98),rgba(232,241,255,.96))}.koto-cosmic-hero .koto-floating-card{border-color:rgba(255,255,255,.25);background:rgba(9,24,56,.76);color:#fff;box-shadow:0 20px 55px rgba(0,4,24,.36);backdrop-filter:blur(18px)}.koto-cosmic-hero .koto-floating-card small{color:rgba(221,237,255,.66)}
.first-visit-guide{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 13px;padding:13px 14px;border:1px solid rgba(104,145,255,.25);border-radius:17px;background:linear-gradient(135deg,rgba(12,30,74,.96),rgba(40,55,114,.94));color:#fff;box-shadow:0 15px 36px rgba(23,45,94,.2)}.first-visit-guide[hidden]{display:none!important}.first-guide-copy{display:grid;min-width:0;gap:3px}.first-guide-copy>span{color:#83e4db;font-size:9px;font-weight:950;letter-spacing:.12em}.first-guide-copy>strong{font-size:13px;line-height:1.45}.first-guide-copy>small{color:rgba(228,239,255,.65);font-size:9.5px;line-height:1.4}.first-visit-guide>button{flex:0 0 auto;min-height:36px;padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font-size:10px;box-shadow:none}.first-visit-guide>button:hover{background:rgba(255,255,255,.15);transform:none}
.koto-guided-keywords{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important}.koto-guided-keywords>button{position:relative;display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:1px 7px;min-width:0!important;min-height:64px!important;padding:9px!important;border:1px solid #d9e5f4!important;border-radius:15px!important;background:rgba(255,255,255,.9)!important;color:#182d50!important;text-align:left!important;box-shadow:0 7px 18px rgba(27,57,107,.06)!important;transition:.28s cubic-bezier(.2,.8,.2,1)!important}.koto-guided-keywords>button>span{grid-row:1/3;display:grid;width:25px;height:25px;place-items:center;border-radius:9px;background:#eaf1ff;color:#3564c5;font-size:9px;font-weight:950}.koto-guided-keywords>button>b{overflow:hidden;font-size:11.5px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.koto-guided-keywords>button>small{overflow:hidden;color:#7a899f;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}.koto-guided-keywords>button:hover,.koto-guided-keywords>button.is-guide-preview,.koto-guided-keywords>button.is-guide-active{border-color:#789bff!important;background:#f3f7ff!important;box-shadow:0 0 0 3px rgba(64,109,255,.11),0 13px 28px rgba(41,77,151,.13)!important;transform:translateY(-2px)!important}.koto-guided-keywords>button.is-guide-clicked::after{content:"";position:absolute;inset:-8px;border:2px solid #55d6cb;border-radius:20px;animation:kotoTapRing .65s ease-out both}@keyframes kotoTapRing{from{opacity:1;transform:scale(.85)}to{opacity:0;transform:scale(1.12)}}
.future-cursor{--cursor-x:75%;--cursor-y:50%;position:absolute;z-index:30;left:0;top:0;display:grid;grid-template-columns:24px auto;align-items:center;gap:3px;opacity:0;pointer-events:none;transform:translate3d(var(--cursor-x),var(--cursor-y),0);transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .25s ease;filter:drop-shadow(0 7px 10px rgba(13,30,64,.28))}.future-cursor.is-visible{opacity:1}.future-cursor>span{width:0;height:0;border-top:19px solid #fff;border-right:12px solid transparent;transform:rotate(-18deg);filter:drop-shadow(0 0 2px #274b9f)}.future-cursor>b{padding:6px 8px;border:1px solid rgba(255,255,255,.28);border-radius:9px;background:#142c62;color:#fff;font-size:8px;white-space:nowrap;box-shadow:0 6px 16px rgba(14,34,77,.24)}.future-cursor.is-clicking>span{animation:kotoCursorClick .3s ease}.future-cursor.is-clicking::after{content:"";position:absolute;left:-8px;top:-8px;width:28px;height:28px;border:2px solid #64e3d3;border-radius:50%;animation:kotoTapRing .55s ease-out both}@keyframes kotoCursorClick{50%{transform:rotate(-18deg) scale(.76)}}.koto-search-submit.is-guide-ready{box-shadow:0 0 0 4px rgba(71,218,201,.21),0 15px 34px rgba(39,100,255,.28)!important;animation:kotoReady 1.1s ease-in-out infinite}@keyframes kotoReady{50%{transform:translateY(-2px);filter:brightness(1.08)}}
.instant-learning-theater{position:relative;display:grid;gap:18px;margin:22px 0 30px;padding:clamp(18px,3vw,30px);overflow:hidden;border:1px solid rgba(124,158,255,.24);border-radius:30px;background:linear-gradient(148deg,#07132e 0%,#102c58 61%,#194965 100%);color:#fff;box-shadow:0 28px 70px rgba(17,43,88,.2);isolation:isolate;scroll-margin-top:90px}.instant-learning-theater::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.4px),radial-gradient(circle,#8fd6ff 0 1px,transparent 1.4px);background-size:81px 81px,131px 131px;background-position:17px 9px,45px 33px;mask-image:linear-gradient(#000,transparent 78%)}.instant-learning-theater::after{content:"";position:absolute;z-index:-1;right:-20%;bottom:-55%;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(81,225,206,.24),transparent 68%);filter:blur(8px)}
.instant-learning-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.instant-learning-head .eyebrow{color:#78e5da}.instant-learning-head h2{margin:5px 0 6px;color:#fff;font-size:clamp(22px,3vw,32px)}.instant-learning-head p{margin:0;color:rgba(225,239,255,.7);font-size:13px}.instant-ready-badge{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:8px 11px;border:1px solid rgba(109,229,214,.25);border-radius:999px;background:rgba(58,204,187,.1);color:#9af0e7;font-size:10px;font-weight:900}.instant-ready-badge i{width:7px;height:7px;border-radius:50%;background:#5be1ce;box-shadow:0 0 0 0 rgba(91,225,206,.5);animation:instantPulse 1.5s ease-out infinite}@keyframes instantPulse{80%,100%{box-shadow:0 0 0 9px transparent}}
.instant-learning-layout{display:grid;grid-template-columns:minmax(0,1.56fr) minmax(230px,.74fr);gap:14px;align-items:stretch}.instant-player-stage{display:grid;grid-template-rows:auto 1fr;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#030713;box-shadow:0 20px 55px rgba(0,0,0,.32)}.instant-player-frame{position:relative;aspect-ratio:16/9;background:#000}.instant-player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.instant-now-playing{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:13px 15px;background:rgba(7,17,41,.98)}.instant-now-playing>span{padding:6px 8px;border-radius:8px;background:#466fff;color:#fff;font-size:9px;font-weight:950}.instant-now-playing>div{display:grid;min-width:0;gap:3px}.instant-now-playing strong{overflow:hidden;color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.instant-now-playing small{overflow:hidden;color:rgba(215,231,250,.62);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.instant-playlist{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.instant-playlist li{min-height:0}.instant-playlist button{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;height:100%;min-height:72px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.055);color:#fff;text-align:left;box-shadow:none}.instant-playlist button:hover,.instant-playlist button.is-current{border-color:rgba(107,223,211,.45);background:linear-gradient(135deg,rgba(69,108,255,.23),rgba(55,204,188,.12));transform:translateX(-3px)}.instant-playlist button>span{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;background:rgba(255,255,255,.1);color:#9fc1ff;font-size:10px;font-weight:950}.instant-playlist button>div{display:grid;min-width:0;gap:2px}.instant-playlist small{color:#78e5da;font-size:8px;font-style:normal;font-weight:900}.instant-playlist strong{display:-webkit-box;overflow:hidden;color:#fff;font-size:10px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.instant-playlist em{color:rgba(219,234,250,.58);font-size:8px;font-style:normal}.instant-playlist button>svg{color:#9eb9ff}.instant-learning-note{display:flex;align-items:center;gap:7px;margin:0;color:rgba(221,236,252,.66);font-size:10px}.instant-learning-theater.is-switching .instant-player-stage{animation:instantSwitch .48s ease}@keyframes instantSwitch{50%{opacity:.72;transform:scale(.994)}}
.ai-wait-overlay{background:#030719!important}.ai-wait-backdrop{background:radial-gradient(circle at 50% 90%,rgba(255,156,102,.24),transparent 34%),radial-gradient(circle at 20% 20%,rgba(69,112,255,.23),transparent 30%),linear-gradient(155deg,#020511,#071630 65%,#153c5f)!important}.ai-wait-backdrop::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(145,206,255,.55) 0 1px,transparent 1.5px);background-size:79px 79px,137px 137px;background-position:0 0,31px 19px;opacity:.6}.ai-wait-card{border-color:rgba(255,255,255,.2)!important;background:linear-gradient(145deg,rgba(8,22,53,.96),rgba(18,43,81,.94))!important;color:#fff!important;box-shadow:0 36px 100px rgba(0,0,0,.48),0 0 80px rgba(70,119,255,.14)!important}.ai-wait-head strong,.ai-wait-stepbox h2{color:#fff!important}.ai-wait-head p,.ai-wait-stepbox p,.ai-wait-live-row,.ai-wait-safe-note{color:rgba(218,235,252,.68)!important}.ai-wait-stepbox,.ai-wait-message,.ai-wait-mascot,.ai-mini-video{border-color:rgba(255,255,255,.1)!important;background:rgba(255,255,255,.055)!important;color:rgba(230,242,255,.8)!important}.ai-mini-video b{color:#fff!important}
@media(max-width:920px){.instant-learning-layout{grid-template-columns:1fr}.instant-playlist{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}.instant-playlist button{height:auto;min-height:86px}.instant-playlist button:hover,.instant-playlist button.is-current{transform:translateY(-2px)}}
@media(max-width:720px){.koto-cosmic-hero{min-height:0}.koto-guided-keywords{grid-template-columns:1fr!important}.koto-guided-keywords>button{min-height:55px!important}.first-visit-guide{align-items:flex-start;flex-direction:column}.first-visit-guide>button{align-self:flex-end}.future-cursor{display:none}.instant-learning-theater{margin-inline:-2px;padding:15px;border-radius:23px}.instant-learning-head{display:grid}.instant-ready-badge{justify-self:start}.instant-playlist{grid-template-columns:1fr}.instant-playlist button{min-height:64px}.instant-now-playing{grid-template-columns:1fr}.instant-now-playing>span{justify-self:start}.instant-learning-note{align-items:flex-start;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.koto-cosmic-sky i,.koto-aurora span,.instant-ready-badge i,.koto-search-submit.is-guide-ready{animation:none!important}.future-cursor{transition:none}.instant-learning-theater.is-switching .instant-player-stage{animation:none}}

/* V100.1 — reference-matched desktop constellation dashboard */
.brand-mark{width:42px;height:42px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:#0f1a33;box-shadow:0 8px 22px rgba(7,17,38,.22)}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
.page-index.public-app{background:#030718}.page-index .site-header{border-bottom-color:rgba(146,183,255,.13);background:rgba(3,9,28,.82);box-shadow:0 12px 35px rgba(0,4,18,.22)}.page-index .site-header .brand,.page-index .site-nav a,.page-index .nav-link{color:#f5f7ff}.page-index .site-header .brand-text small{color:rgba(223,235,255,.58)}.page-index .brand-mark{background:#0f1a33;box-shadow:0 0 25px rgba(68,123,255,.16)}.page-index .site-nav a:hover{color:#fff;background:rgba(120,148,255,.12)}.page-index .guest-pill{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:rgba(230,240,255,.72)}.page-index .guest-pill strong{color:#fff}.page-index .nav-toggle{border-color:var(--border);background:#fff;box-shadow:none}.page-index .nav-toggle span{background:var(--navy)}.page-index .nav-cta{border-color:#7b9eff;background:linear-gradient(135deg,#476fff,#7d5df7);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 28px rgba(93,106,255,.48)}
.koto-cosmic-hero{min-height:900px;padding:54px 28px 72px}.koto-cosmic-hero::after{content:"";position:absolute;inset:auto -3% -1%;z-index:-2;width:auto;height:42%;border-radius:0;background:radial-gradient(ellipse at 45% 100%,rgba(235,118,104,.34),transparent 53%),linear-gradient(172deg,transparent 0 24%,rgba(87,65,151,.22) 25% 31%,rgba(8,15,43,.72) 32% 100%);clip-path:polygon(0 45%,9% 30%,18% 44%,29% 23%,39% 46%,53% 18%,64% 43%,78% 22%,88% 39%,100% 15%,100% 100%,0 100%);transform:none}
.koto-cosmic-hero .koto-hero-inner{display:grid;grid-template-columns:minmax(360px,.68fr) minmax(660px,1.32fr);grid-template-areas:"copy showcase" "guide showcase";align-items:start;gap:22px 38px;width:min(1500px,100%)}.koto-cosmic-hero .koto-hero-copy{grid-area:copy;padding:34px 14px 0}.koto-cosmic-hero .koto-hero-stage{display:contents}.koto-cosmic-hero .koto-device{grid-area:guide;width:100%;padding:1px;border:1px solid rgba(134,166,255,.32);border-radius:27px;background:linear-gradient(145deg,rgba(22,48,104,.82),rgba(38,27,91,.68));box-shadow:0 22px 60px rgba(0,3,19,.34),inset 0 1px rgba(255,255,255,.18);transform:none;backdrop-filter:blur(22px)}.koto-cosmic-hero .koto-device-camera{display:none}.koto-cosmic-hero .koto-device-screen{min-height:0;border-radius:26px;background:linear-gradient(145deg,rgba(9,28,70,.88),rgba(34,32,91,.74));box-shadow:inset 0 1px rgba(255,255,255,.08)}.koto-cosmic-hero .koto-appbar{min-height:54px;border-color:rgba(255,255,255,.1);background:rgba(9,25,61,.72)}.koto-cosmic-hero .koto-app-logo{color:#fff}.koto-cosmic-hero .koto-appbar nav{color:rgba(224,237,255,.6)}.koto-cosmic-hero .koto-device-content{padding:16px}.koto-cosmic-hero .koto-device-welcome{margin-bottom:10px}.koto-cosmic-hero .koto-device-welcome span{color:#87dcd3}.koto-cosmic-hero .koto-device-welcome h2{color:#fff;font-size:20px}.koto-cosmic-hero .koto-progress-ring{display:none}.koto-cosmic-hero .koto-search-form{gap:10px;padding:14px;border-color:rgba(255,255,255,.11);background:rgba(4,17,47,.5);box-shadow:inset 0 1px rgba(255,255,255,.04)}.koto-cosmic-hero .koto-search-form>label,.koto-cosmic-hero .koto-time-field legend{color:rgba(223,237,255,.66)}.koto-cosmic-hero .koto-input-shell textarea{min-height:66px;border-color:rgba(176,199,255,.24);background:rgba(255,255,255,.07);color:#fff}.koto-cosmic-hero .koto-input-shell textarea::placeholder{color:rgba(218,231,255,.42)}.koto-cosmic-hero .char-counter{color:rgba(224,236,255,.4)}.koto-cosmic-hero .koto-plan-options{display:none}.koto-cosmic-hero .koto-time-pills span{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:rgba(231,241,255,.72)}.koto-cosmic-hero .koto-time-pills input:checked+span{border-color:#6b91ff;background:rgba(77,111,255,.25);color:#fff}.koto-cosmic-hero .koto-search-submit{border-color:#7d8fff;background:linear-gradient(135deg,#416df8,#7957ed);box-shadow:0 0 20px rgba(81,104,255,.35)}.koto-cosmic-hero .first-visit-guide{background:linear-gradient(135deg,rgba(22,49,109,.92),rgba(67,40,113,.86))}.koto-cosmic-hero .koto-guided-keywords>button{border-color:rgba(202,212,255,.28)!important;background:linear-gradient(135deg,rgba(72,93,182,.28),rgba(105,61,150,.25))!important;color:#fff!important}.koto-cosmic-hero .koto-guided-keywords>button>span{background:rgba(91,128,255,.2);color:#a9c4ff}.koto-cosmic-hero .koto-guided-keywords>button>small{color:rgba(228,237,255,.55)}.koto-cosmic-hero .koto-guided-keywords>button:hover,.koto-cosmic-hero .koto-guided-keywords>button.is-guide-preview,.koto-cosmic-hero .koto-guided-keywords>button.is-guide-active{border-color:#71a1ff!important;background:linear-gradient(135deg,rgba(55,103,255,.48),rgba(117,68,186,.38))!important;box-shadow:0 0 0 2px rgba(85,144,255,.22),0 0 30px rgba(70,113,255,.42)!important}.koto-cosmic-hero .koto-floating-card-stack{display:none}.koto-cosmic-hero .koto-stage-orb{position:absolute}
.cosmic-live-showcase{grid-area:showcase;display:grid;gap:12px;min-width:0;padding-top:5px;color:#fff}.cosmic-journey{display:grid;grid-template-columns:auto minmax(12px,1fr) auto minmax(12px,1fr) auto minmax(12px,1fr) auto;align-items:center;gap:8px;padding:8px 4px}.cosmic-journey>div{display:flex;align-items:center;gap:8px;min-width:0}.cosmic-journey>div>b{display:grid;width:31px;height:31px;flex:0 0 31px;place-items:center;border:1px solid rgba(187,207,255,.38);border-radius:50%;background:rgba(21,43,93,.55);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.14)}.cosmic-journey>div:last-child>b{border-color:#d3aaff;box-shadow:0 0 22px rgba(161,93,255,.6),inset 0 1px #fff}.cosmic-journey>div>span{display:grid;min-width:0}.cosmic-journey strong{font-size:11px;white-space:nowrap}.cosmic-journey small{color:rgba(217,231,252,.53);font-size:8px;white-space:nowrap}.cosmic-journey>i{height:1px;background:repeating-linear-gradient(90deg,rgba(143,174,255,.7) 0 3px,transparent 3px 7px)}
.cosmic-showcase-title{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 17px 0}.cosmic-showcase-title>div{display:flex;align-items:center;gap:8px}.cosmic-showcase-title span{color:#ffd08c;text-shadow:0 0 16px rgba(255,197,111,.8)}.cosmic-showcase-title h2{margin:0;color:#fff;font-size:21px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:700}.cosmic-showcase-title>small{color:rgba(220,233,252,.5);font-size:9px}
.cosmic-preview-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 12px}.cosmic-preview-cards article{position:relative;display:grid;align-content:end;min-height:138px;padding:15px;overflow:hidden;border:1px solid rgba(177,199,255,.22);border-radius:15px;background:#19335f;box-shadow:0 16px 34px rgba(0,5,25,.22);isolation:isolate}.cosmic-preview-cards article::before,.cosmic-preview-cards article::after{content:"";position:absolute;z-index:-1}.cosmic-preview-cards article::before{inset:0;background:linear-gradient(180deg,rgba(4,12,32,.05),rgba(4,11,29,.86))}.cosmic-preview-cards article::after{width:110px;height:110px;right:-24px;top:-22px;border:1px solid rgba(255,255,255,.2);transform:rotate(45deg);box-shadow:0 0 35px rgba(103,189,255,.24)}.cosmic-preview-cards .is-english{background:radial-gradient(circle at 70% 24%,rgba(255,244,216,.85),transparent 26%),linear-gradient(140deg,#d9b68f,#243d6a 70%)}.cosmic-preview-cards .is-math{background:radial-gradient(circle at 70% 25%,rgba(75,235,239,.58),transparent 14%),linear-gradient(135deg,#073967,#111d51)}.cosmic-preview-cards .is-history{background:radial-gradient(circle at 75% 30%,rgba(255,188,133,.55),transparent 22%),linear-gradient(135deg,#916c69,#253455)}.cosmic-preview-cards article>span{justify-self:start;margin-bottom:auto;padding:4px 7px;border-radius:6px;background:rgba(245,247,255,.84);color:#17233d;font-size:8px;font-weight:900}.cosmic-preview-cards article>strong{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;line-height:1.35;text-shadow:0 2px 9px rgba(0,0,0,.45)}.cosmic-preview-cards article>small{margin-top:5px;color:rgba(235,242,255,.65);font-size:8px}.cosmic-preview-cards article>b{position:absolute;right:7px;bottom:7px;padding:3px 5px;border-radius:5px;background:rgba(0,0,0,.68);font-size:8px}
.cosmic-demo-player{position:relative;display:grid;grid-template-columns:145px minmax(0,1fr);align-items:center;min-height:370px;margin:0;padding:12px;overflow:hidden;border:1px solid rgba(170,127,255,.58);border-radius:21px;background:linear-gradient(135deg,rgba(19,41,91,.88),rgba(35,19,72,.86));box-shadow:0 0 0 2px rgba(79,117,255,.13),0 0 38px rgba(111,76,255,.35),0 25px 55px rgba(0,4,22,.35)}.cosmic-demo-player video{display:block;width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:16/9;object-fit:contain;border:1px solid rgba(151,188,255,.28);border-radius:14px;background:#020611;box-shadow:0 12px 36px rgba(0,0,0,.4)}.cosmic-player-side{display:grid;align-content:center;gap:14px;padding:16px 13px}.cosmic-player-side>small{color:#9aafd7;font-size:9px}.cosmic-player-side>strong{color:#cfbbff;font-size:16px}.cosmic-player-side>span{display:flex;align-items:center;gap:6px;color:rgba(232,240,255,.75);font-size:9px}.cosmic-player-side>span svg{color:#ffd27f}.cosmic-player-side>em{color:#ffca7b;font-size:9px;font-style:normal;line-height:1.6}.cosmic-player-ready{position:absolute;right:27px;top:24px;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(171,150,255,.43);border-radius:999px;background:rgba(15,24,69,.82);color:#fff;font-size:9px;box-shadow:0 0 18px rgba(105,77,255,.33);backdrop-filter:blur(12px)}.cosmic-player-ready i{width:7px;height:7px;border-radius:50%;background:#ffd575;box-shadow:0 0 12px #ffd575}

@media(max-width:1250px){.koto-cosmic-hero .koto-hero-inner{grid-template-columns:minmax(330px,.75fr) minmax(560px,1.25fr);gap:20px}.cosmic-journey small{display:none}.cosmic-demo-player{grid-template-columns:120px minmax(0,1fr);min-height:325px}.koto-cosmic-hero .koto-hero-copy{padding-top:20px}.koto-cosmic-hero h1{font-size:clamp(43px,5.5vw,72px)}}
@media(max-width:1050px){.koto-cosmic-hero{padding-top:48px}.koto-cosmic-hero .koto-hero-inner{display:grid;grid-template-columns:1fr;grid-template-areas:"copy" "guide" "showcase";width:min(820px,100%)}.koto-cosmic-hero .koto-hero-copy{text-align:center}.koto-cosmic-hero .koto-hero-copy>p{margin-inline:auto}.koto-cosmic-hero .koto-hero-actions,.koto-cosmic-hero .koto-trust-row{justify-content:center}.cosmic-live-showcase{margin-top:18px}.cosmic-demo-player{min-height:380px}}
@media(max-width:700px){.page-index .site-header{background:rgba(3,9,28,.94)}.page-index .site-nav-area{background:#07132e;border-color:rgba(255,255,255,.12)}.page-index .site-nav a,.page-index .nav-actions>a{color:#fff}.koto-cosmic-hero{padding:36px 14px 62px}.koto-cosmic-hero .koto-hero-copy{padding:8px 0}.koto-cosmic-hero .koto-hero-copy h1{font-size:clamp(42px,13vw,59px)}.koto-cosmic-hero .koto-hero-actions{display:none}.koto-cosmic-hero .koto-trust-row{justify-content:center}.koto-cosmic-hero .koto-device{border-radius:23px}.koto-cosmic-hero .koto-device-screen{border-radius:22px}.koto-cosmic-hero .koto-appbar{display:none}.koto-cosmic-hero .koto-device-content{padding:12px}.cosmic-journey{grid-template-columns:1fr 1fr;gap:8px}.cosmic-journey>i{display:none}.cosmic-journey>div{padding:9px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.04)}.cosmic-journey small{display:block}.cosmic-showcase-title{align-items:flex-start;padding-inline:5px}.cosmic-showcase-title>small{max-width:130px;text-align:right}.cosmic-preview-cards{grid-template-columns:repeat(3,minmax(190px,1fr));overflow-x:auto;padding:0 2px 9px;scroll-snap-type:x mandatory}.cosmic-preview-cards article{min-height:125px;scroll-snap-align:start}.cosmic-demo-player{grid-template-columns:1fr;min-height:0;padding:8px}.cosmic-player-side{grid-template-columns:1fr 1fr;gap:7px;padding:10px}.cosmic-player-side>small,.cosmic-player-side>strong{grid-column:1/-1}.cosmic-player-side>em{display:none}.cosmic-demo-player video{min-height:0;aspect-ratio:16/9}.cosmic-player-ready{right:16px;top:auto;bottom:18px}.brand-mark{width:40px;height:40px}}

/* V100.2 — high-contrast visibility + unmistakable cinematic motion */
.page-index .site-nav a,.page-index .nav-link{color:#fff;font-weight:800;text-shadow:0 1px 12px rgba(0,0,0,.5)}.page-index .site-header .brand-text strong{color:#fff}.page-index .site-header .brand-text small{color:#d9e7ff;font-weight:700}.page-index .guest-pill{border:1px solid rgba(162,194,255,.48);background:#101f43;color:#eff5ff}.page-index .guest-pill strong{color:#ffe4a5}.page-index .nav-cta{color:#fff!important}
.koto-cosmic-hero .koto-hero-copy>p{color:#f0f6ff;font-weight:700;text-shadow:0 2px 18px #020716}.koto-cosmic-hero .koto-kicker{border-color:rgba(151,187,255,.55);background:#0d2048;color:#fff}.koto-cosmic-hero .koto-trust-row span{color:#f4f8ff;font-weight:850}.koto-cosmic-hero .koto-trust-row svg{color:#83e8dc}.koto-cosmic-hero .koto-secondary-button{border-color:rgba(194,213,255,.58);background:#11264f;color:#fff}
.koto-cosmic-hero .koto-device{border:2px solid rgba(122,166,255,.62);background:#0b1d45;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 26px 75px rgba(0,3,19,.55),0 0 58px rgba(78,111,255,.24)}.koto-cosmic-hero .koto-device-screen{background:linear-gradient(145deg,#0b214d,#241d59)}.koto-cosmic-hero .koto-appbar{background:#081a3b}.koto-cosmic-hero .koto-search-form{border:1px solid rgba(164,194,255,.4);background:#071938;box-shadow:0 14px 36px rgba(0,0,0,.25)}.koto-cosmic-hero .koto-search-form>label,.koto-cosmic-hero .koto-time-field legend{color:#f2f6ff;font-weight:850}.koto-cosmic-hero .koto-input-shell textarea{border:2px solid rgba(135,172,255,.62);background:#0d244d;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 0 3px rgba(63,109,255,.08)}.koto-cosmic-hero .koto-input-shell textarea::placeholder{color:#b8c9e8;opacity:1}.koto-cosmic-hero .char-counter{color:#c5d4ed}.koto-cosmic-hero .koto-time-pills span{border:1px solid #738ec1;background:#142a55;color:#fff;font-weight:900}.koto-cosmic-hero .koto-time-pills input:checked+span{border-color:#8ab3ff;background:#315fca;color:#fff;box-shadow:0 0 18px rgba(88,142,255,.42)}
.first-visit-guide{border:2px solid rgba(132,176,255,.68);background:linear-gradient(135deg,#102d68,#3a286b);box-shadow:0 0 32px rgba(67,113,255,.28)}.first-guide-copy>span{color:#9dfff2;font-size:10px}.first-guide-copy>strong{color:#fff;font-size:14px;font-weight:950}.first-guide-copy>small{color:#dce8fb;font-size:10px}.first-visit-guide>button{border-color:#8da8da;background:#193667;color:#fff;font-weight:850}
.koto-cosmic-hero .koto-guided-keywords{gap:10px!important}.koto-cosmic-hero .koto-guided-keywords>button{min-height:76px!important;padding:12px!important;border:2px solid #8d9fe2!important;background:linear-gradient(145deg,#243f86,#533c87)!important;color:#fff!important;box-shadow:0 10px 25px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.13)!important}.koto-cosmic-hero .koto-guided-keywords>button>span{width:30px;height:30px;background:#112b62;color:#dbe8ff;font-size:10px;border:1px solid #6f90db}.koto-cosmic-hero .koto-guided-keywords>button>b{color:#fff;font-size:14px;font-weight:950;text-shadow:0 2px 9px rgba(0,0,0,.5)}.koto-cosmic-hero .koto-guided-keywords>button>small{color:#e4ecff;font-size:10px;font-weight:750}.koto-cosmic-hero .koto-guided-keywords>button:hover,.koto-cosmic-hero .koto-guided-keywords>button.is-guide-preview,.koto-cosmic-hero .koto-guided-keywords>button.is-guide-active{border-color:#c5ddff!important;background:linear-gradient(135deg,#2469f2,#794fc8)!important;box-shadow:0 0 0 4px rgba(89,150,255,.27),0 0 42px rgba(79,135,255,.72),inset 0 1px rgba(255,255,255,.28)!important;transform:translateY(-5px) scale(1.035)!important;animation:keywordBeacon 1.25s ease-in-out infinite}.koto-cosmic-hero .koto-guided-keywords>button.is-selected{border-color:#fff2bd!important;background:linear-gradient(135deg,#2d72f7,#7a4ec6)!important;box-shadow:0 0 0 4px rgba(255,219,128,.26),0 0 44px rgba(255,200,103,.46)!important}.koto-cosmic-hero .koto-guided-keywords>button:focus-visible{outline:4px solid #ffdc88!important;outline-offset:3px}@keyframes keywordBeacon{50%{filter:brightness(1.18);transform:translateY(-6px) scale(1.045)}}
.koto-cosmic-hero .koto-search-submit{min-height:52px;border:2px solid #c4d4ff;background:linear-gradient(135deg,#276cf5,#814fe4);color:#fff;font-weight:950;box-shadow:0 0 28px rgba(85,108,255,.58)}.koto-cosmic-hero .koto-search-submit:hover{filter:brightness(1.18);transform:translateY(-3px);box-shadow:0 0 45px rgba(98,125,255,.82)}
.cosmic-journey>div{color:#fff}.cosmic-journey strong{color:#fff;font-size:12px;font-weight:950}.cosmic-journey small{color:#dbe7fb;font-size:9px}.cosmic-journey>div>b{border:2px solid #9ab8f4;background:#142e62;font-weight:950}.cosmic-journey>div:last-child>b{background:#724bd2;color:#fff}.cosmic-showcase-title>small{color:#d7e4f7;font-weight:750}.cosmic-preview-cards article{border:2px solid rgba(174,203,255,.55);box-shadow:0 16px 38px rgba(0,3,21,.4)}.cosmic-preview-cards article>span{background:#fff;color:#122243}.cosmic-preview-cards article>strong{color:#fff;font-size:18px;font-weight:950}.cosmic-preview-cards article>small{color:#f0f5ff;font-size:9px;font-weight:750}.cosmic-player-side>small{color:#bcd0f4}.cosmic-player-side>strong{color:#fff}.cosmic-player-side>span{color:#f0f5ff;font-weight:750}.cosmic-player-side>em{color:#ffe19a;font-weight:850}.cosmic-player-ready{border-color:#afc2ff;background:#162b62;color:#fff;font-weight:900}.instant-learning-head p,.instant-learning-note{color:#e5efff}.instant-playlist button{border:2px solid rgba(157,187,255,.5);background:#102650}.instant-playlist button:hover,.instant-playlist button.is-current{border-color:#92fff1;background:linear-gradient(135deg,#284daf,#235f77);box-shadow:0 0 25px rgba(81,218,205,.24)}.instant-playlist small{color:#a5fff4}.instant-playlist strong{color:#fff;font-size:11px}.instant-playlist em{color:#d9e5f8}
.koto-cosmic-sky::before,.koto-cosmic-sky::after{content:"";position:absolute;z-index:3;width:170px;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,#fff 65%,#8bc7ff);filter:drop-shadow(0 0 8px #78aaff);transform:rotate(-24deg) translateX(-220px);animation:shootingStar 5.4s ease-in infinite}.koto-cosmic-sky::before{left:18%;top:15%}.koto-cosmic-sky::after{left:62%;top:33%;animation-delay:-2.8s;animation-duration:6.7s}@keyframes shootingStar{0%,68%{opacity:0;transform:rotate(-24deg) translateX(-230px)}72%{opacity:1}92%,100%{opacity:0;transform:rotate(-24deg) translateX(690px)}}
.koto-aurora::after{content:"";position:absolute;left:-10%;right:-10%;bottom:7%;height:110px;background:linear-gradient(90deg,transparent,rgba(255,174,118,.25),rgba(131,105,255,.25),transparent);filter:blur(24px);animation:horizonGlow 4.8s ease-in-out infinite}@keyframes horizonGlow{50%{opacity:.42;transform:scaleY(1.4)}}.cosmic-preview-cards article{animation:previewFloat 5.2s ease-in-out infinite}.cosmic-preview-cards article:nth-child(2){animation-delay:-1.7s}.cosmic-preview-cards article:nth-child(3){animation-delay:-3.4s}@keyframes previewFloat{50%{transform:translateY(-6px);box-shadow:0 22px 45px rgba(0,3,21,.52),0 0 24px rgba(93,135,255,.2)}}.cosmic-demo-player{animation:playerAura 3.2s ease-in-out infinite}@keyframes playerAura{50%{box-shadow:0 0 0 3px rgba(111,137,255,.18),0 0 60px rgba(128,77,255,.48),0 28px 65px rgba(0,3,21,.48)}}
.future-cursor{filter:drop-shadow(0 0 7px #65a4ff) drop-shadow(0 8px 13px rgba(0,0,0,.5))}.future-cursor>b{border:2px solid #aac4ff;background:#0d2b66;color:#fff;font-size:9px;font-weight:950}.future-cursor::before{content:"";position:absolute;right:95%;top:12px;width:80px;height:3px;background:linear-gradient(90deg,transparent,#7ecfff);filter:blur(1px);opacity:.75}.future-cursor.is-visible>span{animation:cursorHover .85s ease-in-out infinite}@keyframes cursorHover{50%{transform:translateY(-4px) rotate(-18deg)}}
.ai-wait-card{border:2px solid rgba(143,177,255,.65)!important}.ai-wait-head p,.ai-wait-stepbox p,.ai-wait-live-row,.ai-wait-safe-note{color:#e7f0ff!important}.ai-wait-stepbox,.ai-wait-message,.ai-wait-mascot,.ai-mini-video{border-color:rgba(152,184,255,.38)!important;background:#102650!important;color:#f2f6ff!important}.ai-wait-progress{background:#14294f!important}.ai-wait-progress span{box-shadow:0 0 20px rgba(95,147,255,.8)}
@media(max-width:700px){.koto-cosmic-hero .koto-guided-keywords>button{min-height:70px!important}.future-cursor{display:grid;scale:.82;transform-origin:left top}.future-cursor>b{font-size:8px}.future-cursor::before{width:42px}.cosmic-journey>div{border-color:rgba(151,183,255,.45);background:#102650}.cosmic-showcase-title>small{color:#dce8fa}}
@media(prefers-reduced-motion:reduce){.koto-cosmic-sky::before,.koto-cosmic-sky::after,.koto-aurora::after,.cosmic-preview-cards article,.cosmic-demo-player,.future-cursor.is-visible>span,.koto-cosmic-hero .koto-guided-keywords>button.is-guide-preview{animation:none!important}}

@media (prefers-reduced-motion: reduce) {
  .mini-spinner { animation-duration: 1.5s; }
  .user-directory-table-wrap { transition: none; }
}

.user-quick-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.user-quick-filters > span {
  margin-right: 2px;
  color: var(--slate);
  font-size: 11.5px;
  font-weight: 800;
}
.user-quick-filters button {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  color: var(--navy-soft);
  font-size: 11.5px;
}
.user-quick-filters button.is-active {
  color: var(--blue-deep);
  background: var(--blue-soft);
  border-color: #C9DCFF;
}

@media (max-width: 760px) {
  .user-quick-filters {
    margin-right: -4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 4px 6px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .user-quick-filters::-webkit-scrollbar { display: none; }
  .user-quick-filters > span,
  .user-quick-filters button { flex: 0 0 auto; }
}

.user-result-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.user-result-tools .button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
@media (max-width: 760px) {
  .user-result-tools { justify-content: flex-start; width: 100%; }
  .user-result-tools .button { width: auto; }
}

/* =========================================================
   SEO content guide / crawlable learning content
   ========================================================= */
.seo-guide{max-width:980px;margin:0 auto 64px}.seo-guide-hero{padding:42px 0 28px}.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted,#64748b);margin-bottom:22px}.breadcrumb a{color:inherit;text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.seo-guide-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.16;letter-spacing:-.035em;max-width:900px;margin:12px 0 18px}.seo-guide-hero>.lead{max-width:820px}.seo-guide-summary{margin-top:26px;padding:20px 22px;border:1px solid #dce8ff;border-radius:20px;background:linear-gradient(135deg,#f8fbff,#eef5ff)}.seo-guide-summary strong{display:block;margin-bottom:8px}.seo-guide-summary ul{margin:0;padding-left:1.3em;display:grid;gap:6px}.seo-guide-section{padding:34px 0;border-top:1px solid #e6edf7}.seo-guide-section h2{font-size:clamp(25px,3.4vw,36px);line-height:1.3;letter-spacing:-.025em;margin:8px 0 16px}.seo-guide-section p{font-size:16px;line-height:1.9;color:#334155}.guide-number{display:inline-flex;padding:6px 11px;border-radius:999px;background:#eaf2ff;color:#2457b8;font-size:13px;font-weight:800}.guide-example-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin:22px 0}.guide-example{padding:20px;border:1px solid #dde6f3;border-radius:18px;background:#fff}.guide-example.good{border-color:#b9dfce;background:#f4fbf7}.guide-example.bad{border-color:#f0d0d0;background:#fff7f7}.guide-example strong,.guide-example span{display:block;font-weight:800;margin-bottom:6px}.guide-example p{font-size:14px;line-height:1.7;margin:0 0 10px}.guide-check-list{display:grid;gap:10px;margin:20px 0;padding:0;list-style:none}.guide-check-list li{padding:15px 17px;border-radius:15px;background:#f7f9fc;line-height:1.75}.guide-callout{padding:22px;border-left:5px solid #4f7fe8;border-radius:12px;background:#f2f6ff;margin:22px 0}.guide-callout strong{font-size:18px}.guide-callout p{margin-bottom:0}.guide-route-list{display:grid;gap:12px;padding:0;margin:22px 0;list-style:none}.guide-route-list li{display:flex;gap:14px;align-items:flex-start;padding:17px;border:1px solid #e0e8f4;border-radius:17px;background:#fff}.guide-route-list li>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#315fca;color:#fff;font-weight:800}.guide-route-list strong{display:block;margin-bottom:3px}.guide-route-list p{font-size:14px;line-height:1.6;margin:0}.guide-query-table-wrap{overflow-x:auto;border:1px solid #dde6f2;border-radius:18px;margin:20px 0}.guide-query-table{width:100%;border-collapse:collapse;min-width:680px}.guide-query-table th,.guide-query-table td{text-align:left;padding:16px 18px;border-bottom:1px solid #e7edf5;line-height:1.65}.guide-query-table th{background:#f4f7fb;font-size:13px}.guide-query-table tr:last-child td{border-bottom:0}.guide-service-panel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:26px;margin:30px 0;padding:28px}.guide-service-panel h2{margin:8px 0 12px}.guide-service-panel p{line-height:1.8}.seo-guide-teaser{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:28px;margin-top:28px}.seo-guide-teaser h2{margin:8px 0 10px}.seo-guide-teaser .lead{margin-bottom:0}
@media(max-width:760px){.seo-guide{margin-bottom:30px}.seo-guide-hero{padding:26px 0 18px}.seo-guide-hero h1{font-size:32px}.seo-guide-section{padding:27px 0}.seo-guide-section h2{font-size:25px}.guide-example-grid,.guide-service-panel,.seo-guide-teaser{grid-template-columns:1fr}.guide-service-panel .button,.seo-guide-teaser .button{width:100%;justify-content:center}.seo-guide-summary{padding:17px}.guide-query-table th,.guide-query-table td{padding:13px 14px}}

/* Step 11: goal onboarding */
.onboarding-shell{max-width:680px;margin:24px auto 48px}.onboarding-head{position:relative;margin-bottom:14px}.onboarding-head>.eyebrow{display:block;margin-bottom:10px}.onboarding-exit{position:absolute;right:0;top:0;color:var(--slate);font-size:13px;font-weight:700}.onboarding-progress{display:flex;align-items:center;gap:12px}.onboarding-progress>div{height:8px;flex:1;overflow:hidden;border-radius:999px;background:var(--mist)}.onboarding-progress>div span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .25s ease}.onboarding-progress small{min-width:34px;color:var(--slate);font-weight:800}.onboarding-card{padding:clamp(24px,5vw,42px);border:1px solid rgba(43,91,255,.14);border-radius:28px;background:#fff;box-shadow:0 20px 54px rgba(15,38,75,.09)}.onboarding-card h1{margin:8px 0 9px;font-size:clamp(24px,4.5vw,34px);line-height:1.3;letter-spacing:-.02em}.onboarding-question{color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.09em}.onboarding-form{margin-top:24px}.onboarding-choices{display:grid;gap:11px;margin:0;padding:0;border:0}.onboarding-choice{display:block;position:relative;cursor:pointer}.onboarding-choice input{position:absolute;opacity:0;pointer-events:none}.onboarding-choice>span{display:flex;min-height:88px;flex-direction:column;justify-content:center;gap:5px;padding:17px 52px 17px 18px;border:1.5px solid var(--border);border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdff);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.onboarding-choice>span:after{content:"";position:absolute;right:19px;top:50%;width:20px;height:20px;border:2px solid #a9b6c8;border-radius:50%;transform:translateY(-50%);box-shadow:inset 0 0 0 4px #fff}.onboarding-choice strong{font-size:16px;line-height:1.45;color:var(--navy)}.onboarding-choice small{color:var(--slate);line-height:1.55}.onboarding-choice em{color:var(--blue);font-size:12px;font-style:normal;font-weight:800}.onboarding-choice:hover>span{transform:translateY(-1px);border-color:rgba(43,91,255,.42)}.onboarding-choice input:focus-visible+span{outline:3px solid rgba(43,91,255,.2);outline-offset:2px}.onboarding-choice input:checked+span{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 10px 25px rgba(43,91,255,.11)}.onboarding-choice input:checked+span:after{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 5px #fff}.onboarding-choice.compact>span{min-height:70px}.onboarding-time-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.onboarding-time-choices .onboarding-choice>span{min-height:105px;padding-right:17px;text-align:center}.onboarding-time-choices .onboarding-choice>span:after{top:14px;right:14px;transform:none}.onboarding-time-choices strong{font-size:22px}.onboarding-next{width:100%;min-height:54px;margin-top:18px;justify-content:center}.onboarding-back-form{margin-top:12px;text-align:center}.onboarding-back-form .button{border:0;background:transparent;color:var(--slate);box-shadow:none}.onboarding-summary{display:grid;gap:0;margin:24px 0;border:1px solid var(--border);border-radius:19px;overflow:hidden}.onboarding-summary>div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:15px 18px;border-bottom:1px solid var(--border);background:#fff}.onboarding-summary>div:last-child{border-bottom:0}.onboarding-summary dt{color:var(--slate);font-size:13px;font-weight:700}.onboarding-summary dd{margin:0;color:var(--navy);font-weight:800;line-height:1.5}.onboarding-footnote{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0;color:var(--slate);font-size:12px}.onboarding-complete{text-align:center}.onboarding-success-icon{display:inline-flex;width:58px;height:58px;align-items:center;justify-content:center;margin-bottom:14px;border-radius:50%;background:var(--teal-soft);color:var(--teal-deep)}.onboarding-complete .lead{margin:10px auto 0}.onboarding-complete .onboarding-summary{text-align:left}.onboarding-actions{display:grid;gap:10px}.onboarding-actions .button{width:100%;justify-content:center}.onboarding-actions form{margin:0}.onboarding-actions form .button{width:100%}
@media(max-width:600px){.onboarding-shell{margin:10px 0 28px}.onboarding-card{padding:22px 17px;border-radius:21px}.onboarding-card h1{font-size:25px}.onboarding-choice>span{min-height:78px;padding:15px 47px 15px 15px;border-radius:16px}.onboarding-choice strong{font-size:15px}.onboarding-time-choices{grid-template-columns:1fr}.onboarding-time-choices .onboarding-choice>span{min-height:68px;padding:14px 48px 14px 16px;text-align:left}.onboarding-time-choices .onboarding-choice>span:after{top:50%;right:18px;transform:translateY(-50%)}.onboarding-time-choices strong{font-size:18px}.onboarding-summary>div{grid-template-columns:88px 1fr;padding:14px}.onboarding-next{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:4;box-shadow:0 12px 30px rgba(43,91,255,.25)}.onboarding-footnote{padding:0 8px;text-align:center}.onboarding-exit{font-size:12px}}

/* Step 12: safe goal settings */
.goal-settings-shell{max-width:1080px;margin:24px auto 50px}.goal-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.goal-settings-head h1{margin:7px 0;font-size:clamp(26px,4vw,38px)}.goal-settings-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}.goal-settings-stack{display:grid;gap:18px}.goal-settings-card{padding:clamp(21px,3vw,30px);border:1px solid rgba(43,91,255,.13);border-radius:24px;background:#fff;box-shadow:0 15px 40px rgba(15,38,75,.07)}.goal-settings-card h2{margin:0 0 13px;font-size:21px}.goal-settings-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.goal-settings-card-head small{color:var(--slate)}.goal-overview>h2{font-size:clamp(23px,3vw,30px);line-height:1.4}.goal-settings-summary{display:grid;gap:0;margin:20px 0;border:1px solid var(--border);border-radius:17px;overflow:hidden}.goal-settings-summary>div{display:grid;grid-template-columns:125px 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}.goal-settings-summary>div:last-child{border:0}.goal-settings-summary dt{color:var(--slate);font-size:13px;font-weight:700}.goal-settings-summary dd{margin:0;color:var(--navy);font-weight:800}.goal-program-lock{display:flex;gap:11px;margin:18px 0;padding:15px;border-radius:16px;background:var(--blue-soft);color:var(--blue)}.goal-program-lock>svg{flex:0 0 auto;margin-top:2px}.goal-program-lock strong{display:block;color:var(--navy);font-size:14px}.goal-program-lock p{margin:4px 0 0;color:var(--slate);font-size:12.5px;line-height:1.65}.goal-settings-form label{display:block;margin-top:15px;font-weight:800}.goal-settings-form label:first-of-type{margin-top:0}.goal-settings-form input[type=date]{min-height:50px;margin-top:7px}.goal-settings-form fieldset{margin:20px 0;padding:0;border:0}.goal-settings-form legend{margin-bottom:9px;font-weight:800}.goal-time-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.goal-time-options label{position:relative;margin:0}.goal-time-options input{position:absolute;opacity:0;pointer-events:none}.goal-time-options span{display:flex;min-height:48px;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:14px;background:#fff;color:var(--navy);font-weight:800;cursor:pointer}.goal-time-options input:checked+span{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);box-shadow:0 7px 18px rgba(43,91,255,.1)}.goal-time-options input:focus-visible+span{outline:3px solid rgba(43,91,255,.2);outline-offset:2px}.goal-settings-form>.primary{width:100%;justify-content:center}.goal-status-card{display:flex;align-items:center;justify-content:space-between;gap:20px}.goal-status-card h2{margin-bottom:4px}.goal-status-card p{margin:0}.goal-status-card form{margin:0;flex:0 0 auto}
@media(max-width:780px){.goal-settings-shell{margin:12px 0 32px}.goal-settings-head{display:grid;gap:12px}.goal-settings-head>.button{width:100%;justify-content:center}.goal-settings-grid{grid-template-columns:1fr}.goal-settings-card{padding:20px 17px;border-radius:20px}.goal-settings-summary>div{grid-template-columns:100px 1fr}.goal-status-card{display:grid}.goal-status-card form,.goal-status-card button{width:100%}.goal-time-options{grid-template-columns:repeat(3,minmax(0,1fr))}.goal-settings-form>.primary{min-height:50px;position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:4;box-shadow:0 12px 28px rgba(43,91,255,.22)}}
@media(max-width:390px){.goal-time-options{grid-template-columns:1fr}.goal-settings-summary>div{grid-template-columns:1fr;gap:4px}}

/* Step 14: admin skill tree editor */
.skill-program-picker{margin-bottom:18px}.skill-program-picker .inline-admin-form{align-items:end}.skill-program-picker label{min-width:min(100%,360px)}.skill-admin-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:18px;align-items:start}.skill-tree-panel,.skill-editor-panel{min-width:0}.skill-editor-panel{position:sticky;top:18px}.skill-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.skill-panel-head h2{margin:5px 0 3px}.skill-panel-head p{margin:0}.compact-empty{padding:28px 20px;border:1px dashed var(--border);border-radius:18px;text-align:center;background:var(--cloud)}.compact-empty p{margin:6px 0 0}.skill-tree{display:grid;gap:10px}.skill-tree-node{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px;padding:15px;border:1px solid var(--border);border-radius:17px;background:#fff;box-shadow:0 6px 18px rgba(15,38,75,.04)}.skill-tree-node.skill-level-2{margin-left:28px;border-left:4px solid #91b7ff}.skill-tree-node.skill-level-3{margin-left:56px;border-left:4px solid #73d7c5}.skill-node-main{display:flex;align-items:flex-start;gap:11px;min-width:0}.skill-level-badge{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:10px;font-weight:900;white-space:nowrap}.skill-node-copy{min-width:0}.skill-node-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.skill-node-title strong{font-size:15px}.skill-node-copy code{display:inline-block;margin-top:5px;overflow-wrap:anywhere}.skill-node-copy p{margin:7px 0 0;color:var(--slate);font-size:12.5px;line-height:1.6}.skill-node-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.skill-node-actions form{margin:0}.skill-order-form{display:flex;align-items:end;gap:5px}.skill-order-form label{color:var(--slate);font-size:10px;font-weight:800}.skill-order-form input{width:74px;min-height:35px;margin-top:2px;padding:6px 8px}.skill-editor-panel>.muted{margin-top:-4px;font-size:12.5px;line-height:1.65}.skill-editor-panel .admin-form>label{display:block;margin-top:14px}.skill-editor-panel .admin-form>label:first-of-type{margin-top:0}.skill-form-actions{margin-top:18px}
@media(max-width:1100px){.skill-admin-grid{grid-template-columns:1fr}.skill-editor-panel{position:static}.skill-tree-node{grid-template-columns:1fr}.skill-node-actions{justify-content:flex-start}}
@media(max-width:700px){.skill-program-picker .inline-admin-form{display:grid;grid-template-columns:1fr}.skill-program-picker label,.skill-program-picker select,.skill-program-picker button{width:100%}.skill-panel-head{display:grid}.skill-panel-head .button{width:100%;justify-content:center}.skill-tree-node,.skill-tree-node.skill-level-2,.skill-tree-node.skill-level-3{margin-left:0}.skill-tree-node.skill-level-2{margin-left:12px}.skill-tree-node.skill-level-3{margin-left:24px}.skill-node-main{display:grid}.skill-node-actions{display:grid;grid-template-columns:1fr 1fr}.skill-node-actions>.button,.skill-node-actions>form:not(.skill-order-form),.skill-node-actions>form:not(.skill-order-form) button{width:100%;justify-content:center}.skill-order-form{grid-column:1/-1;display:grid;grid-template-columns:1fr auto}.skill-order-form label{font-size:12px}.skill-order-form input{width:100%;min-height:44px}.skill-order-form button{min-height:44px}.skill-form-actions,.skill-form-actions .button,.skill-form-actions button{width:100%;justify-content:center}.skill-form-actions .primary{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:4;box-shadow:0 12px 28px rgba(43,91,255,.22)}}

/* Step 17: one-question diagnostic flow */
.diagnostic-shell{max-width:780px;margin:28px auto 58px}.diagnostic-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.diagnostic-head h1{margin:5px 0 0;font-size:clamp(24px,4vw,34px)}.diagnostic-progress{height:10px;overflow:hidden;border-radius:999px;background:#e8eef8;box-shadow:inset 0 1px 2px rgba(15,38,75,.08)}.diagnostic-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#19a7a0);transition:width .25s ease}.diagnostic-save-status{display:flex;align-items:center;gap:7px;margin:12px 0 20px;color:var(--slate);font-size:13px}.diagnostic-card{padding:clamp(22px,4vw,38px);border:1px solid rgba(43,91,255,.14);border-radius:26px;background:#fff;box-shadow:0 20px 55px rgba(15,38,75,.09)}.diagnostic-card fieldset{margin:0;padding:0;border:0}.diagnostic-card legend{width:100%;margin:8px 0 20px;color:var(--navy);font-size:clamp(20px,3.2vw,27px);font-weight:850;line-height:1.55}.diagnostic-question-number{color:var(--blue);font-size:13px;font-weight:850;letter-spacing:.05em}.diagnostic-options{display:grid;gap:11px}.diagnostic-option{position:relative;cursor:pointer}.diagnostic-option input{position:absolute;opacity:0;pointer-events:none}.diagnostic-option span{display:flex;min-height:58px;align-items:center;padding:14px 52px 14px 17px;border:1.5px solid var(--border);border-radius:16px;background:#fff;color:var(--navy);font-weight:750;line-height:1.55;transition:.16s ease}.diagnostic-option span:after{position:absolute;right:19px;top:50%;width:21px;height:21px;border:2px solid #a9b6c8;border-radius:50%;content:"";transform:translateY(-50%);box-shadow:inset 0 0 0 5px #fff}.diagnostic-option input[type=checkbox]+span:after{border-radius:6px}.diagnostic-option:hover span{border-color:rgba(43,91,255,.45);transform:translateY(-1px)}.diagnostic-option input:focus-visible+span{outline:3px solid rgba(43,91,255,.22);outline-offset:2px}.diagnostic-option input:checked+span{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 8px 22px rgba(43,91,255,.1)}.diagnostic-option input:checked+span:after{border-color:var(--blue);background:var(--blue)}.diagnostic-card textarea{width:100%;min-height:170px;resize:vertical}.diagnostic-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:27px}.diagnostic-actions .button{min-height:48px}.diagnostic-actions .button[disabled]{opacity:.42;cursor:not-allowed}.diagnostic-error{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fff1f0;color:#a4261d;font-weight:700}.diagnostic-key-help{margin:13px 0 0;text-align:right;color:var(--slate);font-size:12px}.diagnostic-complete{padding:clamp(28px,6vw,56px);border:1px solid rgba(25,167,160,.2);border-radius:28px;background:#fff;text-align:center;box-shadow:0 20px 55px rgba(15,38,75,.09)}.diagnostic-complete-icon{display:inline-flex;width:72px;height:72px;align-items:center;justify-content:center;margin-bottom:18px;border-radius:50%;background:var(--teal-soft);color:var(--teal-deep)}.diagnostic-complete h1{margin:8px 0;font-size:clamp(25px,4vw,36px)}.diagnostic-safe-note{display:flex;max-width:600px;align-items:flex-start;gap:10px;margin:24px auto;padding:16px;border-radius:16px;background:var(--blue-soft);text-align:left;color:var(--blue)}.diagnostic-safe-note p{margin:0;color:var(--slate);line-height:1.65}.diagnostic-safe-note strong{color:var(--navy)}
@media(max-width:640px){.diagnostic-shell{margin:16px auto 34px}.diagnostic-head{align-items:center}.diagnostic-card{padding:21px 17px;border-radius:20px}.diagnostic-actions{display:grid;grid-template-columns:.8fr 1.2fr}.diagnostic-actions .button{width:100%;justify-content:center}.diagnostic-key-help{display:none}.diagnostic-option span{min-height:60px}.diagnostic-complete{padding:30px 18px}}

/* Step 19: initial skill map */
.diagnostic-result-shell{max-width:1060px;margin:26px auto 64px}.diagnostic-result-hero{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:center;padding:clamp(25px,5vw,48px);border:1px solid rgba(43,91,255,.15);border-radius:29px;background:linear-gradient(135deg,#fff 0%,#f5f8ff 62%,#eefbf8 100%);box-shadow:0 22px 60px rgba(15,38,75,.09)}.diagnostic-result-hero h1{margin:8px 0;font-size:clamp(30px,5vw,46px)}.diagnostic-overall{display:grid;grid-template-columns:1fr auto;align-items:end;padding:22px;border:1px solid rgba(43,91,255,.14);border-radius:22px;background:#fff;text-align:right;box-shadow:0 12px 30px rgba(15,38,75,.07)}.diagnostic-overall>span{grid-column:1/-1;color:var(--slate);font-size:13px;font-weight:800}.diagnostic-overall strong{font-size:54px;line-height:1;color:var(--navy)}.diagnostic-overall small{padding-bottom:6px;color:var(--slate)}.diagnostic-overall .skill-status{grid-column:1/-1;justify-self:end;margin-top:10px}.diagnostic-result-note{display:flex;gap:11px;margin:18px 0 28px;padding:16px 18px;border-radius:17px;background:var(--blue-soft);color:var(--blue)}.diagnostic-result-note svg{flex:0 0 auto}.diagnostic-result-note p{margin:0;color:var(--slate);line-height:1.7}.diagnostic-result-note strong{color:var(--navy)}.diagnostic-priority-section,.diagnostic-map-card,.diagnostic-basis-card,.diagnostic-plan-cta{margin-top:20px;padding:clamp(22px,4vw,34px);border:1px solid var(--border);border-radius:25px;background:#fff;box-shadow:0 13px 38px rgba(15,38,75,.06)}.diagnostic-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}.diagnostic-section-head h2{margin:5px 0 0;font-size:clamp(23px,3.4vw,31px)}.diagnostic-section-head>p{max-width:430px;margin:0;color:var(--slate);line-height:1.65}.diagnostic-priority-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.diagnostic-priority-card{display:flex;gap:13px;min-width:0;padding:18px;border:1px solid rgba(43,91,255,.13);border-radius:18px;background:linear-gradient(180deg,#fff,#f9fbff)}.priority-number{display:inline-flex;width:31px;height:31px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:50%;background:var(--blue);color:#fff;font-weight:900}.diagnostic-priority-card h3{margin:2px 0 7px;font-size:17px}.diagnostic-priority-card p{min-height:42px;margin:0 0 12px;color:var(--slate);font-size:12.5px;line-height:1.6}.skill-status{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;font-size:12px;font-style:normal;font-weight:850}.status-ready{background:var(--teal-soft);color:var(--teal-deep)}.status-growing{background:#fff4d9;color:#8a6200}.status-starting{background:var(--blue-soft);color:var(--blue)}.diagnostic-skill-list{display:grid;gap:0}.diagnostic-skill-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:24px;align-items:center;padding:19px 0;border-top:1px solid var(--border)}.diagnostic-skill-row:first-child{border-top:0;padding-top:0}.diagnostic-skill-row:last-child{padding-bottom:0}.diagnostic-skill-copy>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagnostic-skill-copy h3{margin:0;font-size:17px}.diagnostic-skill-copy p{margin:6px 0 0;color:var(--slate);font-size:12.5px}.skill-meter-label{display:flex;align-items:baseline;justify-content:space-between;color:var(--slate);font-size:12px}.skill-meter-label strong{color:var(--navy);font-size:22px}.skill-meter-track{height:10px;overflow:hidden;border-radius:999px;background:#e8eef8}.skill-meter-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#19a7a0)}.diagnostic-basis-card h2{margin-top:0}.diagnostic-basis-card ul{display:grid;gap:9px;padding-left:22px;color:var(--navy-soft);line-height:1.65}.diagnostic-plan-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;border-color:rgba(25,167,160,.2);background:linear-gradient(135deg,#f8fffd,#f5f8ff)}.diagnostic-plan-cta h2{margin:6px 0;font-size:clamp(22px,3vw,29px)}.diagnostic-plan-cta p{margin:0;color:var(--slate);line-height:1.65}.diagnostic-plan-cta>.button{flex:0 0 auto}
@media(max-width:760px){.diagnostic-result-shell{margin:14px auto 38px}.diagnostic-result-hero{grid-template-columns:1fr;padding:23px 18px}.diagnostic-overall{width:100%;max-width:260px}.diagnostic-section-head,.diagnostic-plan-cta{display:grid;align-items:start}.diagnostic-priority-grid{grid-template-columns:1fr}.diagnostic-priority-card p{min-height:0}.diagnostic-skill-row{grid-template-columns:1fr;gap:12px}.diagnostic-plan-cta>.button{width:100%;justify-content:center}.diagnostic-priority-section,.diagnostic-map-card,.diagnostic-basis-card,.diagnostic-plan-cta{padding:21px 17px;border-radius:20px}}

/* Step 22: owned 14-day study plan */
.study-plan-layout{align-items:start}.study-plan-shell{min-width:0;padding-bottom:54px}.study-plan-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:28px;border:1px solid rgba(43,91,255,.14);border-radius:24px;background:linear-gradient(135deg,#fff,#f5f8ff);box-shadow:var(--shadow-sm)}.study-plan-hero h1{margin:7px 0 8px;font-size:clamp(25px,3.5vw,38px);line-height:1.25}.study-plan-hero p{margin:0;color:var(--slate)}.study-plan-hero-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}.study-plan-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 18px}.study-plan-summary>div{display:grid;gap:4px;padding:15px 17px;border:1px solid var(--border);border-radius:16px;background:#fff}.study-plan-summary span{color:var(--slate);font-size:11.5px;font-weight:750}.study-plan-summary strong{font-size:15px}.study-plan-legend{display:flex;gap:8px;align-items:center;margin:20px 0 12px}.study-plan-legend span,.study-plan-phase{display:inline-flex;align-items:center;min-height:27px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:850}.legend-today,.is-today .study-plan-phase{color:var(--blue-deep);background:var(--blue-soft)}.legend-completed,.is-completed .study-plan-phase{color:var(--teal-deep);background:var(--teal-soft)}.legend-upcoming,.is-upcoming .study-plan-phase{color:var(--navy-soft);background:var(--mist)}.is-past .study-plan-phase{color:#9a6700;background:#fff4d9}.study-plan-timeline{display:grid;gap:12px;margin:0;padding:0;list-style:none}.study-plan-day{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;position:relative}.study-plan-day:not(:last-child)::before{content:"";position:absolute;left:30px;top:58px;bottom:-19px;width:2px;background:#dce5f4}.study-plan-marker{display:grid;width:60px;height:60px;place-content:center;text-align:center;border:2px solid #dce5f4;border-radius:18px;background:#fff;color:var(--slate);z-index:1}.study-plan-marker span{font-size:9px;font-weight:850;letter-spacing:.12em}.study-plan-marker strong{color:var(--navy);font-size:20px;line-height:1}.is-today .study-plan-marker{border-color:var(--blue);background:var(--blue);color:#dce7ff;box-shadow:0 8px 20px rgba(43,91,255,.22)}.is-today .study-plan-marker strong{color:#fff}.is-completed .study-plan-marker{border-color:var(--teal);background:var(--teal-soft)}.study-plan-day-card{min-width:0;padding:17px 18px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}.is-today .study-plan-day-card{border-color:rgba(43,91,255,.38);box-shadow:0 9px 26px rgba(43,91,255,.1)}.is-completed .study-plan-day-card{border-color:rgba(25,167,160,.24);background:#fbfffe}.study-plan-day-card>header{display:flex;align-items:center;justify-content:space-between;gap:14px}.study-plan-day-card>header>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.study-plan-day-card time{color:var(--navy);font-size:16px;font-weight:850}.study-plan-day-card>header>strong{white-space:nowrap;color:var(--blue);font-size:15px}.study-plan-skills{display:flex;align-items:baseline;gap:9px;margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}.study-plan-skills span{color:var(--slate);font-size:11px;font-weight:750}.study-plan-skills strong{font-size:13.5px}.study-plan-task-list{display:grid;gap:7px;margin:11px 0 0;padding:0;list-style:none}.study-plan-task-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--mist)}.study-plan-task-list li>div{display:flex;align-items:center;gap:8px;min-width:0}.task-type{display:inline-flex;flex:0 0 auto;padding:3px 7px;border-radius:7px;background:#fff;color:var(--blue-deep);font-size:10.5px;font-weight:850}.study-plan-task-list strong{overflow-wrap:anywhere;font-size:12.5px}.study-plan-task-list li>div:last-child{white-space:nowrap;color:var(--slate);font-size:11.5px}.task-status{font-weight:800}.status-completed{color:var(--teal-deep)}.status-in_progress{color:var(--blue-deep)}.study-plan-empty{margin:12px 0 0;color:var(--slate);font-size:13px}.study-plan-status-panel{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:20px;padding:20px 22px;border:1px solid var(--border);border-radius:20px;background:#fff}.study-plan-status-panel h2{margin:0 0 5px;font-size:19px}.study-plan-status-panel p{margin:0;color:var(--slate);font-size:13px}
@media(max-width:900px){.study-plan-summary{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.study-plan-layout{display:block}.study-plan-layout>.dash-nav{margin-bottom:14px}.study-plan-hero{display:grid;padding:21px 17px;border-radius:20px}.study-plan-hero-actions{justify-content:space-between;width:100%}.study-plan-summary{grid-template-columns:1fr 1fr}.study-plan-summary>div{padding:13px}.study-plan-day{grid-template-columns:49px minmax(0,1fr);gap:9px}.study-plan-marker{width:48px;height:48px;border-radius:14px}.study-plan-marker strong{font-size:17px}.study-plan-day:not(:last-child)::before{left:23px;top:47px}.study-plan-day-card{padding:15px 13px}.study-plan-day-card>header{align-items:flex-start}.study-plan-task-list li{align-items:flex-start}.study-plan-task-list li>div{align-items:flex-start;flex-wrap:wrap}.study-plan-task-list li>div:last-child{justify-content:flex-end}.study-plan-status-panel{display:grid;padding:18px}.study-plan-status-panel form,.study-plan-status-panel button{width:100%}}
@media(max-width:420px){.study-plan-summary{grid-template-columns:1fr}.study-plan-day-card>header{display:grid}.study-plan-day-card>header>strong{justify-self:start}.study-plan-skills{display:grid;gap:4px}.study-plan-task-list li{display:grid}.study-plan-task-list li>div:last-child{justify-content:space-between}}

/* Step 24: one clear action for today's 15 minutes */
.today-learning-card{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:20px;margin:0 0 20px;padding:clamp(22px,3.5vw,34px);overflow:hidden;border:1px solid rgba(43,91,255,.24);border-radius:26px;background:linear-gradient(135deg,#fff 0%,#f4f7ff 60%,#ebfbf8 100%);box-shadow:0 18px 46px rgba(15,38,75,.1)}.today-learning-card:after{position:absolute;right:-45px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(43,91,255,.07);content:"";pointer-events:none}.today-learning-copy{position:relative;z-index:1;align-self:center}.today-learning-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.05em}.today-learning-copy h2{max-width:620px;margin:8px 0 7px;font-size:clamp(24px,3.2vw,34px);line-height:1.3}.today-learning-copy p{max-width:620px;margin:0;color:var(--slate);font-size:13.5px;line-height:1.7}.today-learning-metrics{position:relative;z-index:1;display:grid;grid-template-columns:1fr 112px;gap:9px;margin:0}.today-learning-metrics>div{display:grid;align-content:center;gap:5px;min-width:0;padding:13px 15px;border:1px solid rgba(43,91,255,.12);border-radius:15px;background:rgba(255,255,255,.86)}.today-learning-metrics>div:first-child{grid-column:1/-1}.today-learning-metrics dt{color:var(--slate);font-size:10.5px;font-weight:800}.today-learning-metrics dd{margin:0;overflow-wrap:anywhere;color:var(--navy);font-size:14px;font-weight:900}.today-learning-status{display:inline-flex;width:max-content;max-width:100%;padding:4px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);font-size:11.5px}.today-learning-action{position:relative;z-index:1;grid-column:1/-1;justify-self:end;min-width:min(100%,310px);min-height:50px;justify-content:center}.today-learning-paused{border-color:rgba(216,154,25,.28);background:linear-gradient(135deg,#fff,#fffaf0)}.today-learning-paused .today-learning-status{background:#fff4d9;color:#8a6200}.today-learning-all-complete{border-color:rgba(25,167,160,.28)}.today-learning-all-complete .today-learning-status{background:var(--teal-soft);color:var(--teal-deep)}.today-learning-unavailable{background:linear-gradient(135deg,#fff,#f7f8fb)}
@media(max-width:880px){.today-learning-card{grid-template-columns:1fr}.today-learning-action{grid-column:1}}
@media(max-width:600px){.today-learning-card{gap:16px;margin-bottom:16px;padding:21px 16px;border-radius:21px}.today-learning-copy h2{font-size:24px}.today-learning-metrics{grid-template-columns:1fr 1fr}.today-learning-metrics>div{padding:12px}.today-learning-action{width:100%;min-width:0;min-height:52px}.today-learning-card:after{right:-95px}}
@media(max-width:390px){.today-learning-metrics{grid-template-columns:1fr}.today-learning-metrics>div:first-child{grid-column:1}.today-learning-action{font-size:13px}}

/* Step 27: admin content catalog */
.content-candidate-note{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px;border-color:rgba(25,167,160,.24);background:var(--teal-soft);color:var(--teal-deep)}
.content-candidate-note svg{flex:0 0 auto}.content-candidate-note strong{display:block;color:var(--navy)}.content-candidate-note p{margin:4px 0 0;color:var(--slate);font-size:13px;line-height:1.6}
.content-catalog-filters{display:grid;grid-template-columns:minmax(190px,1.4fr) repeat(5,minmax(120px,1fr));gap:10px;align-items:end}
.content-catalog-filters label,.content-unit-form-card label{display:grid;gap:6px;color:var(--navy-soft);font-size:12px;font-weight:800}.content-filter-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}
.content-catalog-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.85fr);gap:16px;align-items:start;margin-top:16px}.content-catalog-grid>.admin-card{min-width:0}.content-catalog-list h2,.content-unit-form-card h2{margin:5px 0 12px}.content-catalog-table-wrap{overflow-x:auto}.content-catalog-table{width:100%;min-width:720px;border-collapse:collapse}.content-catalog-table th,.content-catalog-table td{padding:13px 10px;border-top:1px solid var(--border);text-align:left;vertical-align:top}.content-catalog-table th{color:var(--slate);font-size:11px}.content-catalog-table td strong,.content-catalog-table td small{display:block}.content-catalog-table td small{margin-top:5px;color:var(--slate);font-size:11.5px;line-height:1.5}.content-catalog-table .chip{display:inline-flex}
.content-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.content-unit-form-card textarea{min-height:92px;resize:vertical}.content-skill-options{margin:0;padding:12px;border:1px solid var(--border);border-radius:14px}.content-skill-options legend{padding:0 5px;color:var(--navy-soft);font-size:12px;font-weight:850}.content-skill-options>div{display:grid;gap:7px;max-height:220px;overflow-y:auto}.content-skill-options label{display:flex;min-height:36px;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;background:var(--mist);cursor:pointer}.content-skill-options input{width:17px;height:17px;flex:0 0 auto}.content-unit-form-card .stacked-form>.button{min-height:44px;justify-content:center}
@media(max-width:1180px){.content-catalog-filters{grid-template-columns:repeat(3,minmax(150px,1fr))}.content-catalog-grid{grid-template-columns:1fr}.content-unit-form-card{max-width:760px}}
@media(max-width:760px){.content-catalog-filters{grid-template-columns:1fr 1fr}.content-catalog-filters>label:first-child{grid-column:1/-1}.content-filter-actions{justify-content:stretch}.content-filter-actions .button{width:100%;min-height:44px;justify-content:center}.content-catalog-grid{display:block}.content-catalog-grid>.admin-card+ .admin-card{margin-top:14px}.content-catalog-table-wrap{margin:0 -4px;padding-bottom:5px}.content-form-row{grid-template-columns:1fr}.content-candidate-note{padding:16px}.content-unit-form-card .stacked-form>.button{width:100%}}
@media(max-width:440px){.content-catalog-filters{grid-template-columns:1fr}.content-catalog-filters>label:first-child{grid-column:1}.content-filter-actions{display:grid;grid-template-columns:1fr 1fr}}

/* Step 28: human content review */
.content-review-panel{margin-top:16px}.content-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}.content-review-head h2{margin:5px 0 7px}.content-review-head p{max-width:720px;margin:0;color:var(--slate);line-height:1.65}.content-review-current{display:grid;min-width:190px;gap:3px;padding:13px 15px;border:1px solid var(--border);border-radius:15px;background:var(--mist)}.content-review-current span,.content-review-current small{color:var(--slate);font-size:11px}.content-review-current strong{font-size:18px}.content-review-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px}.content-review-form-wrap>.button{margin-bottom:12px}.content-review-form{display:grid;gap:15px}.content-review-form fieldset{display:grid;gap:8px;margin:0;padding:15px;border:1px solid var(--border);border-radius:16px}.content-review-form legend{padding:0 6px;font-size:13px;font-weight:900}.content-review-form fieldset label{display:flex;min-height:42px;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:var(--mist);color:var(--navy-soft);font-size:12.5px;font-weight:750;cursor:pointer}.content-review-form fieldset input{width:18px;height:18px;flex:0 0 auto}.content-review-form>label{display:grid;gap:6px;color:var(--navy-soft);font-size:12px;font-weight:850}.content-review-form textarea{min-height:110px;resize:vertical}.content-review-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:9px}.content-review-actions .button{min-height:46px;justify-content:center}.content-review-history{min-width:0;padding-left:18px;border-left:1px solid var(--border)}.content-review-history h3{margin:0 0 12px}.content-review-history-item{margin-bottom:10px;padding:14px;border:1px solid var(--border);border-radius:15px;background:#fff}.content-review-history-item header{display:flex;align-items:center;justify-content:space-between;gap:10px}.content-review-history-item time,.content-review-history-item>small{color:var(--slate);font-size:11px}.content-review-history-item>strong,.content-review-history-item>small{display:block;margin-top:7px}.content-review-history-item p{margin:10px 0;color:var(--navy-soft);font-size:12.5px;line-height:1.65;overflow-wrap:anywhere}.content-review-history-item summary{cursor:pointer;color:var(--blue);font-size:12px;font-weight:800}.content-review-history-item ul{display:grid;gap:5px;margin:9px 0 0;padding-left:19px;color:var(--slate);font-size:11.5px}.content-review-history-item li.is-checked{color:var(--teal-deep)}.content-review-history-item li.is-unchecked{color:#9a6700}
@media(max-width:900px){.content-review-layout{grid-template-columns:1fr}.content-review-history{padding:18px 0 0;border-top:1px solid var(--border);border-left:0}}
@media(max-width:640px){.content-review-head{display:grid}.content-review-current{width:100%}.content-review-actions{grid-template-columns:1fr}.content-review-actions .button{width:100%}.content-review-form fieldset{padding:11px}.content-review-form fieldset label{min-height:46px}.content-review-panel{padding:18px 15px}}

/* Step 29: verified learning range and admin preview */
.content-duration-note{margin:0;padding:10px 12px;border-radius:11px;background:var(--blue-soft);color:var(--slate);font-size:12px}.content-duration-note strong{color:var(--navy)}.content-preview-panel{margin-top:16px}.content-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.content-preview-head h2{margin:5px 0 7px}.content-preview-head p{max-width:760px;margin:0;color:var(--slate);font-size:13px;line-height:1.65}.content-preview-head>.chip{flex:0 0 auto}.content-preview-layout{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(300px,.9fr);gap:18px;align-items:start}.content-preview-frame{position:relative;overflow:hidden;padding-top:56.25%;border-radius:18px;background:#071127;box-shadow:0 14px 34px rgba(15,38,75,.15)}.content-preview-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.content-preview-details{display:grid;gap:0;margin:0;border:1px solid var(--border);border-radius:16px;background:#fff}.content-preview-details>div{display:grid;grid-template-columns:125px minmax(0,1fr);gap:12px;padding:12px 14px;border-top:1px solid var(--border)}.content-preview-details>div:first-child{border-top:0}.content-preview-details dt{color:var(--slate);font-size:11px;font-weight:800}.content-preview-details dd{margin:0;overflow-wrap:anywhere;color:var(--navy-soft);font-size:12.5px;font-weight:750;line-height:1.6}
@media(max-width:850px){.content-preview-layout{grid-template-columns:1fr}.content-preview-details>div{grid-template-columns:110px minmax(0,1fr)}}
@media(max-width:600px){.content-preview-panel{padding:18px 15px}.content-preview-head{display:grid}.content-preview-head>.chip{justify-self:start}.content-preview-layout{display:block}.content-preview-details{margin-top:13px}.content-preview-details>div{grid-template-columns:1fr;gap:4px}.content-preview-frame{border-radius:14px}}

/* Step 32: verified content study session */
.study-session-shell{max-width:1120px;margin:20px auto 58px}.study-session-head{max-width:850px;margin-bottom:20px}.study-session-head>.back-link{display:inline-flex;margin-bottom:22px}.study-session-head h1{margin:8px 0;font-size:clamp(27px,4vw,42px);line-height:1.25}.study-session-head p{margin:0;color:var(--slate);line-height:1.7}.study-session-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px;align-items:start}.study-session-main{display:grid;gap:16px;min-width:0}.study-session-summary{display:grid;grid-template-columns:1.35fr .8fr .55fr;gap:0;padding:0;overflow:hidden}.study-session-summary>div{display:grid;gap:7px;padding:17px 19px;border-left:1px solid var(--border)}.study-session-summary>div:first-child{border-left:0}.study-session-summary span{display:flex;align-items:center;gap:6px;color:var(--slate);font-size:11.5px;font-weight:800}.study-session-summary strong{overflow-wrap:anywhere;font-size:14px;line-height:1.55}.study-session-player-card{overflow:hidden;border:1px solid rgba(43,91,255,.18);border-radius:22px;background:#fff;box-shadow:0 16px 42px rgba(15,38,75,.1)}.study-session-player-frame{position:relative;width:100%;overflow:hidden;padding-top:56.25%;background:#071127}.study-session-player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.study-session-player-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px}.study-session-player-meta h2{margin:8px 0 3px;font-size:18px}.study-session-player-meta p{margin:0;color:var(--slate);font-size:12.5px}.study-player-status{margin:0;padding:0 19px 16px;font-size:12px;line-height:1.6}.study-session-focus{padding:22px}.study-session-focus h2{margin:8px 0;font-size:21px;line-height:1.5}.study-session-focus p{margin:0;color:var(--slate);line-height:1.7}.study-session-next{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 21px;border:1px solid rgba(25,167,160,.25);border-radius:19px;background:linear-gradient(135deg,#f8fffd,#f4f7ff)}.study-session-next p{max-width:580px;margin:0;color:var(--slate);font-size:12.5px;line-height:1.65}.study-session-next button{flex:0 0 auto}.study-session-side{display:grid;gap:13px;position:sticky;top:18px}.study-session-side .side-card p{color:var(--slate);font-size:12.5px;line-height:1.7}.study-session-empty{max-width:720px;margin:38px auto}.study-answer-handoff{max-width:760px}.study-answer-handoff>.back-link{display:inline-flex;margin-bottom:16px}.study-session-check{display:inline-flex;width:58px;height:58px;align-items:center;justify-content:center;margin-bottom:12px;border-radius:50%;background:var(--teal-soft);color:var(--teal-deep)}
@media(max-width:880px){.study-session-layout{grid-template-columns:1fr}.study-session-side{grid-template-columns:repeat(3,minmax(0,1fr));position:static}.study-session-next{display:grid}.study-session-next button{width:100%;justify-content:center}}
@media(max-width:640px){.study-session-shell{margin:10px 0 34px}.study-session-head>.back-link{margin-bottom:16px}.study-session-summary{grid-template-columns:1fr}.study-session-summary>div{padding:14px 15px;border-top:1px solid var(--border);border-left:0}.study-session-summary>div:first-child{border-top:0}.study-session-player-card{border-radius:16px}.study-session-player-meta{display:grid;padding:15px}.study-session-player-meta .button{width:100%;justify-content:center}.study-player-status{padding:0 15px 15px}.study-session-focus{padding:18px 16px}.study-session-focus h2{font-size:18px}.study-session-next{padding:17px 15px}.study-session-next button{min-height:52px}.study-session-side{grid-template-columns:1fr}.study-session-player-frame{min-width:0}.study-answer-handoff .panel{padding:24px 17px}}

/* Subject-first commerce and the shared newest player. */
.course-hero{max-width:920px;margin:26px auto 36px;text-align:center}.course-hero h1{margin:8px 0 12px;font-size:clamp(30px,5vw,50px);line-height:1.18}.course-hero .lead{max-width:760px;margin-inline:auto}.course-catalog{margin-bottom:58px}.course-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.course-card{display:flex;min-width:0;min-height:300px;flex-direction:column;padding:23px;border:1px solid rgba(43,91,255,.15);border-radius:22px;background:linear-gradient(145deg,#fff,#f7f9ff);box-shadow:0 12px 34px rgba(15,38,75,.07);color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.course-card:hover{transform:translateY(-4px);border-color:rgba(43,91,255,.42);box-shadow:0 18px 42px rgba(15,38,75,.12)}.course-card-icon{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:15px;background:var(--blue-soft);font-size:25px}.course-card-category{margin-top:17px;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.08em}.course-card h3{margin:6px 0 8px;font-size:21px}.course-card p{margin:0;color:var(--slate);font-size:13px;line-height:1.7}.course-card-meta{display:grid;gap:3px;margin-top:auto;padding-top:18px;font-size:12px}.course-card-meta b{color:var(--teal-deep)}.course-card-meta em{color:var(--slate);font-style:normal}.course-card-action{display:flex;align-items:center;gap:7px;margin-top:14px;color:var(--blue);font-size:13px}.selected-course-head{display:flex;align-items:center;gap:20px;margin:18px 0 22px}.selected-course-head h1{margin:4px 0 7px}.selected-course-head p{margin:0;color:var(--slate)}.course-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}.course-plan-card{position:relative;display:flex;min-width:0;flex-direction:column;padding:24px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(15,38,75,.07)}.course-plan-card.featured{border:2px solid var(--blue);box-shadow:0 18px 42px rgba(43,91,255,.15)}.course-plan-card h2{margin:7px 0}.course-plan-card .price{margin:2px 0 13px;font-size:25px;font-weight:900}.course-plan-card .check-list{margin-bottom:22px}.course-plan-card>.button,.course-plan-card>form,.course-plan-card>.alert{margin-top:auto}.course-plan-card>form button{width:100%;min-height:46px}.course-plan-card .is-muted{color:#8792a5}.pricing-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}.compare-table-wrap{overflow-x:auto}.legal-note-panel{margin-top:24px}
.unified-player{margin:0}.unified-player-body{display:grid;gap:14px;padding:18px 20px}.unified-player-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.unified-player-heading h2{margin:8px 0 3px;font-size:19px;line-height:1.45}.unified-player-heading p{margin:0;color:var(--slate);font-size:12.5px}.unified-player-note{display:flex;gap:12px;padding:14px 15px;border:1px solid rgba(43,91,255,.12);border-radius:15px;background:linear-gradient(135deg,#f7f9ff,#f7fffd);color:var(--blue)}.unified-player-note div{min-width:0}.unified-player-note strong{display:block;color:var(--navy);font-size:12px}.unified-player-note p{margin:4px 0 0;color:var(--navy-soft);font-size:13px;line-height:1.65}.unified-player .study-player-status{padding:0}.unified-player-actions{display:flex;align-items:center;gap:10px;margin-top:12px;padding:13px 15px}
.unified-player:focus-visible{outline:3px solid rgba(43,91,255,.28);outline-offset:4px}.unified-resume-notice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid rgba(25,167,160,.25);border-radius:15px;background:linear-gradient(135deg,#effdf9,#f4f8ff);color:var(--teal-deep)}.unified-resume-notice[hidden]{display:none}.unified-resume-notice div{display:grid;gap:2px;min-width:0}.unified-resume-notice strong{color:var(--navy);font-size:13px}.unified-resume-notice span{color:var(--slate);font-size:11.5px}.unified-playback-progress{display:grid;gap:7px}.unified-playback-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--slate);font-size:11.5px}.unified-playback-progress-head b{color:var(--navy)}.unified-playback-progress-head>strong{color:var(--blue);font-size:12px}.unified-playback-track{height:8px;overflow:hidden;border-radius:999px;background:#e7edf7;box-shadow:inset 0 1px 2px rgba(15,38,75,.08)}.unified-playback-track>span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .25s ease}.unified-player-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(105px,.9fr) repeat(2,minmax(78px,.7fr));gap:8px}.player-tool,.player-speed-control{display:flex;min-width:0;min-height:44px;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--navy-soft);box-shadow:0 3px 10px rgba(15,38,75,.05);font-size:11.5px;font-weight:800}.player-tool{cursor:pointer}.player-tool:hover:not(:disabled){border-color:rgba(43,91,255,.36);background:var(--blue-soft);color:var(--blue)}.player-tool.primary-tool{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 7px 18px rgba(43,91,255,.2)}.player-tool:disabled,.player-speed-control select:disabled{cursor:wait;opacity:.5}.player-speed-control{padding:5px 7px}.player-speed-control>span{font-size:10.5px;color:var(--slate)}.player-speed-control select{width:auto;min-width:58px;height:32px;padding:3px 22px 3px 7px;border:0;background-color:transparent;box-shadow:none;font-size:12px;font-weight:850}.unified-player-shortcuts{margin:-5px 0 0;text-align:center;font-size:10.5px;line-height:1.5}.unified-player-stage:fullscreen,.unified-player-stage:-webkit-full-screen{display:grid;width:100vw;height:100vh;padding:0;background:#000}.unified-player-stage:fullscreen iframe,.unified-player-stage:-webkit-full-screen iframe{position:static;width:100%;height:100%}
.unified-fullscreen-exit{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:none;min-height:46px;padding:9px 14px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(4,11,28,.86);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.34);font-size:22px;font-weight:800;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.unified-fullscreen-exit span{font-size:12px}.unified-fullscreen-exit:focus-visible{outline:3px solid #8adcf7;outline-offset:3px}.unified-player-stage:fullscreen,.unified-player-stage:-webkit-full-screen{display:grid;width:100%;height:100%;min-height:100%;padding:0;background:#000}.unified-player-stage:fullscreen iframe,.unified-player-stage:-webkit-full-screen iframe{position:absolute;inset:0;width:100%;height:100%}.unified-player-stage:fullscreen .unified-fullscreen-exit,.unified-player-stage:-webkit-full-screen .unified-fullscreen-exit,.unified-player-stage.is-fallback-fullscreen .unified-fullscreen-exit{display:flex;align-items:center;gap:7px}.unified-player-stage.is-fallback-fullscreen{position:fixed;z-index:2147483000;top:var(--player-vv-top,0);left:var(--player-vv-left,0);width:var(--player-vv-width,100%);height:var(--player-vv-height,100dvh);min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#000;box-shadow:none}.unified-player-stage.is-fallback-fullscreen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.has-player-fallback-fullscreen{overflow:hidden!important;overscroll-behavior:none}

/* V118: iPhone Safari fullscreen must escape animated/clipped card ancestors. */
.is-player-fullscreen-context {
  overflow: visible !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;
  perspective: none !important;
  clip-path: none !important;
  contain: none !important;
  isolation: auto !important;
  z-index: auto !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}
.unified-player-stage.is-fallback-fullscreen {
  position: fixed !important;
  z-index: 2147483000 !important;
  inset: 0 !important;
  display: flex !important;
  width: var(--player-vv-width, 100%) !important;
  max-width: none !important;
  height: var(--player-vv-height, 100dvh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  touch-action: manipulation;
}
.unified-player-stage.is-fallback-fullscreen iframe {
  position: relative !important;
  inset: auto !important;
  width: var(--player-video-width, 100%) !important;
  max-width: 100% !important;
  height: var(--player-video-height, auto) !important;
  max-height: 100% !important;
  flex: 0 0 auto;
  border: 0 !important;
  aspect-ratio: 16 / 9;
}
html.has-player-fallback-fullscreen,
body.has-player-fallback-fullscreen {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.has-player-fallback-fullscreen .site-header,
body.has-player-fallback-fullscreen .mobile-tabbar,
body.has-player-fallback-fullscreen .guide-fab,
body.has-player-fallback-fullscreen .pwa-nudge,
body.has-player-fallback-fullscreen .future-cursor {
  visibility: hidden !important;
  pointer-events: none !important;
}
.course-day-chip{background:var(--blue);color:#fff}.course-learning-page>main{min-width:0}.course-learning-page .today-video-choices,.course-learning-page .course-learning-check{margin-top:18px}.course-learning-check h2{display:flex;align-items:center;gap:10px;margin-top:0;font-size:19px}.course-learning-outcome{display:grid;gap:6px;margin-top:18px;padding:15px 16px;border:1px solid rgba(43,91,255,.14);border-radius:15px;background:linear-gradient(135deg,#f7f9ff,#f5fffc)}.course-learning-outcome span{color:var(--blue);font-size:12px;font-weight:800}.course-learning-outcome strong{color:var(--navy-soft);line-height:1.7}.course-session-bottom{margin-bottom:28px}.course-session-bottom button{flex:0 0 auto}.course-side-copy{margin:0;color:var(--slate);font-size:13px;line-height:1.75}.course-session-progress{display:grid;gap:0;margin:0;padding:0;list-style:none}.course-session-progress li{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--border)}.course-session-progress li:first-child{padding-top:0;border-top:0}.course-session-progress li>span{display:inline-flex;width:29px;height:29px;flex:0 0 29px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:#fff;color:var(--slate);font-size:12px;font-weight:900}.course-session-progress li.is-current>span{border-color:var(--blue);background:var(--blue);color:#fff}.course-session-progress li div{display:grid;gap:2px}.course-session-progress strong{font-size:13px}.course-session-progress small{color:var(--slate);font-size:11px}.course-completion-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0;padding:0;border:0}.course-completion-checks label{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--navy-soft);font-size:13px;font-weight:750;cursor:pointer}.course-completion-checks input{width:19px;height:19px;accent-color:var(--blue)}
.goal-mastery-list{display:grid;gap:14px}.goal-mastery-list article{display:grid;gap:8px;padding:14px;border:1px solid var(--border);border-radius:15px}.goal-mastery-list article>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.goal-mastery-list small{color:var(--slate)}
@media(max-width:900px){.course-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-plan-grid,.pricing-grid-three{grid-template-columns:1fr}.course-plan-card.featured{order:-1}}
@media(max-width:600px){.course-card-grid{grid-template-columns:1fr}.course-card{min-height:0}.selected-course-head{align-items:flex-start;padding:19px 16px}.course-plan-card{padding:21px 17px}.unified-player-body{padding:15px}.unified-player-heading{display:grid}.unified-player-heading .button{width:100%;justify-content:center}.unified-resume-notice{grid-template-columns:auto minmax(0,1fr)}.unified-resume-notice .button{grid-column:1/-1;width:100%;justify-content:center}.unified-player-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.player-speed-control{grid-column:1/2}.player-tool span{font-size:10px}.unified-player-shortcuts{display:none}.unified-player-actions{align-items:stretch;flex-direction:column}.unified-player-actions .button,.unified-player-actions form,.unified-player-actions button{width:100%}.course-completion-checks{grid-template-columns:1fr}.course-session-bottom{align-items:stretch}.course-session-bottom .button,.course-session-bottom button{width:100%;justify-content:center}.course-session-bottom .watch-bottom-center{order:-1}.course-learning-aside{display:grid;gap:12px}}

/* Step 33: one-question verified assessment form */
.assessment-shell{max-width:780px;margin:22px auto 58px}.assessment-head{margin-bottom:18px}.assessment-head>.back-link{display:inline-flex;margin-bottom:20px}.assessment-head h1{margin:8px 0;font-size:clamp(27px,4vw,39px);line-height:1.3}.assessment-head p{margin:0;color:var(--slate);line-height:1.7}.assessment-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px;align-items:center;margin-bottom:13px}.assessment-progress>div{height:9px;overflow:hidden;border-radius:999px;background:var(--mist)}.assessment-progress>div span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--teal))}.assessment-progress strong{color:var(--navy-soft);font-size:13px}.assessment-form{padding:clamp(21px,4vw,32px)}.assessment-form>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.assessment-question-field{margin:0;padding:0;border:0}.assessment-question-field>legend{width:100%;padding:0;color:var(--navy);font-size:clamp(19px,3vw,25px);font-weight:900;line-height:1.55}.assessment-question-field>#assessment-required{margin:8px 0 18px;font-size:12.5px}.assessment-options{display:grid;gap:10px}.assessment-options label{display:block;position:relative;cursor:pointer}.assessment-options input{position:absolute;opacity:0;pointer-events:none}.assessment-options label>span{display:flex;min-height:58px;align-items:center;padding:13px 48px 13px 16px;border:1.5px solid var(--border);border-radius:15px;background:#fff;color:var(--navy-soft);font-weight:750;line-height:1.55;transition:.16s}.assessment-options label>span:after{content:"";position:absolute;right:17px;top:50%;width:20px;height:20px;border:2px solid #a9b6c8;border-radius:50%;transform:translateY(-50%)}.assessment-options input[type=checkbox]+span:after{border-radius:6px}.assessment-options input:checked+span{border-color:var(--blue);background:var(--blue-soft);color:var(--navy);box-shadow:0 8px 20px rgba(43,91,255,.09)}.assessment-options input:checked+span:after{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 4px #fff}.assessment-options input:focus-visible+span{outline:3px solid rgba(43,91,255,.2);outline-offset:2px}.assessment-text-label{display:grid;gap:8px;color:var(--navy-soft);font-size:13px;font-weight:850}.assessment-text-label input,.assessment-text-label textarea{width:100%}.assessment-form-error{margin:14px 0 0}.assessment-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}.assessment-saved-note{margin:12px 0 0;color:var(--teal-deep);font-size:12px;font-weight:800}.assessment-empty,.assessment-complete{max-width:720px;margin:38px auto}.assessment-complete{max-width:760px}.assessment-complete-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}.assessment-complete-actions form{margin:0}
.assessment-result .panel{padding:clamp(24px,5vw,38px);border-top:5px solid var(--slate)}.assessment-result.is-correct .panel{border-top-color:var(--teal)}.assessment-result.is-partial .panel{border-top-color:#e6a329}.assessment-result.is-incorrect .panel{border-top-color:#d95f68}.assessment-result h1{margin:8px 0;color:var(--navy);font-size:clamp(27px,5vw,40px)}.assessment-result-score{margin:0 0 24px;color:var(--slate);font-size:20px}.assessment-result-score strong{color:var(--navy);font-size:38px}.assessment-result-block{margin:14px 0;padding:16px 18px;border:1px solid var(--border);border-radius:15px;background:var(--mist)}.assessment-result-block h2{margin:0 0 7px;font-size:14px}.assessment-result-block p,.assessment-result-block ul{margin:0;line-height:1.7}.assessment-result-block ul{padding-left:20px}.assessment-result .button{margin-top:10px}
.assessment-ai-result.is-ungraded .panel{border-top-color:#7f8a9b}.assessment-rubric-scores{display:grid;gap:12px;padding:0!important;list-style:none}.assessment-rubric-scores li{display:grid;gap:4px;padding-bottom:11px;border-bottom:1px solid var(--border)}.assessment-rubric-scores li:last-child{padding-bottom:0;border-bottom:0}.assessment-rubric-scores span{color:var(--slate);font-size:13px}.assessment-ai-notice{margin:18px 0 8px;padding:13px 15px;border-radius:12px;background:#fff8e7;color:#6d5724;font-size:12.5px;line-height:1.7}
.assessment-feedback .panel{border-top-color:var(--blue)}.assessment-feedback.is-ungraded .panel{border-top-color:#7f8a9b}.assessment-method-badge{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;background:#e9f3ff;color:#245a92;font-size:12px;font-weight:800}.assessment-method-badge.is-rule{background:#e4f7ef;color:#17654b}.assessment-method-badge.is-ungraded{background:#eef0f3;color:#56606f}.assessment-feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}.assessment-feedback-card{padding:18px;border:1px solid var(--border);border-radius:16px;background:#fff}.assessment-feedback-card.is-good{border-left:4px solid var(--teal)}.assessment-feedback-card.is-improve{border-left:4px solid #e6a329}.assessment-feedback-card h2,.assessment-feedback-example h2{margin:0 0 8px;font-size:17px}.assessment-feedback-card ul{margin:0;padding-left:20px;line-height:1.75}.assessment-feedback-example{margin:14px 0;padding:18px;border-radius:16px;background:#edf5ff}.assessment-feedback-example span{display:inline-block;margin:-2px 0 8px;color:#326494;font-size:12px;font-weight:800}.assessment-feedback-example p{margin:0;line-height:1.75}.assessment-rubric-detail{margin:14px 0;padding:15px 18px;border:1px solid var(--border);border-radius:14px}.assessment-rubric-detail summary{cursor:pointer;color:var(--navy);font-weight:800}.assessment-rubric-detail ul{margin-top:14px}.assessment-feedback-notice,.assessment-ungraded-message{margin:18px 0 8px;padding:14px 16px;border-radius:13px;background:#fff8e7;color:#6d5724;font-size:12.5px;line-height:1.7}.assessment-ungraded-message{background:#f2f3f5;color:#4f5865}.assessment-ungraded-message p{margin:0 0 5px}.assessment-feedback-actions{margin-top:14px}.assessment-feedback-actions form{margin:0}.assessment-feedback-actions .muted{margin:8px 0 0;font-size:12px}
.assessment-score-comparison{margin:18px 0;padding:20px;border:1px solid #cdddef;border-radius:17px;background:#f7fbff}.assessment-score-comparison>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.assessment-score-comparison>header span{color:var(--slate);font-size:12px;font-weight:800}.assessment-score-comparison>header h2{margin:3px 0 0;font-size:19px}.assessment-score-comparison>header>strong{padding:6px 10px;border-radius:999px;background:#e8eff7;color:#37536f;font-size:12px}.assessment-score-comparison.is-improved>header>strong{background:#dff6ed;color:#126148}.assessment-score-comparison.is-declined>header>strong{background:#fff0e9;color:#90472e}.assessment-score-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.assessment-score-cards>div{display:grid;gap:4px;padding:12px;border-radius:12px;background:#fff;text-align:center}.assessment-score-cards span{color:var(--slate);font-size:11px}.assessment-score-cards strong{color:var(--navy);font-size:20px}.assessment-score-delta{margin:0;text-align:center}.assessment-score-delta strong{color:var(--blue)}.assessment-improved-criteria{margin-top:14px;padding-top:14px;border-top:1px solid #d9e5f1}.assessment-improved-criteria h3{margin:0 0 6px;font-size:14px}.assessment-improved-criteria ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}.assessment-improved-criteria li{padding:5px 9px;border-radius:999px;background:#dff6ed;color:#126148;font-size:12px;font-weight:800}.assessment-retry-point{max-width:860px;margin:0 auto 16px;padding:17px 20px;border:1px solid #f0d593;border-left:5px solid #e6a329;border-radius:15px;background:#fff9e9}.assessment-retry-point span{color:#7a6229;font-size:11px;font-weight:800}.assessment-retry-point h2{margin:3px 0 6px;color:var(--navy);font-size:18px}.assessment-retry-point p{margin:0;line-height:1.7}.assessment-retry-limit{margin:8px 0;padding:13px 15px;border-radius:12px;background:#f2f3f5;color:#555f6c;font-size:13px}
@media(max-width:600px){.assessment-shell{margin:10px 0 34px}.assessment-head>.back-link{margin-bottom:15px}.assessment-form{padding:20px 15px;border-radius:19px}.assessment-question-field>legend{font-size:20px}.assessment-options label>span{min-height:62px;padding-left:14px}.assessment-actions{display:grid}.assessment-actions .button{width:100%;min-height:50px;justify-content:center}.assessment-actions .primary{grid-row:1}.assessment-complete .panel{padding:24px 17px}}
@media(max-width:600px){.assessment-result .panel{padding:23px 16px}.assessment-result .button{width:100%;min-height:50px;justify-content:center}.assessment-result-score strong{font-size:34px}.assessment-feedback-grid{grid-template-columns:1fr}.assessment-feedback-card,.assessment-feedback-example{padding:15px}.assessment-score-comparison{padding:15px}.assessment-score-comparison>header{display:grid}.assessment-score-cards{gap:6px}.assessment-score-cards>div{padding:10px 5px}.assessment-score-cards strong{font-size:17px}.assessment-retry-point{padding:15px}}

/* S61: illustration-first homepage and orange action language */
.visual-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1fr);align-items:center;gap:clamp(18px,4vw,54px);min-height:640px;padding:38px 0 46px}.visual-hero-copy h1{margin:14px 0 12px;font-size:clamp(48px,7vw,82px);line-height:1.02;letter-spacing:-.06em}.visual-hero-copy h1 em{color:#c2410c;font-style:normal}.visual-hero-copy>p{margin:0 0 24px;color:var(--slate);font-size:clamp(18px,2.2vw,25px);font-weight:750}.visual-hero-art img{display:block;width:100%;height:auto}.availability-note{display:block;margin-top:12px;color:var(--slate)}
.visual-flow{padding:68px 0}.visual-flow>header{text-align:center}.visual-flow>header span{color:#c2410c;font-size:12px;font-weight:900;letter-spacing:.18em}.visual-flow h2{margin:6px 0 30px;font-size:clamp(31px,4vw,46px)}.visual-flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.visual-flow-grid article{overflow:hidden;border:1px solid var(--border);border-radius:28px;background:#fff;box-shadow:var(--shadow-sm);text-align:center}.visual-flow-grid img{display:block;width:100%;height:auto}.visual-flow-grid strong{display:block;padding:0 16px 22px;font-size:19px}
.visual-contrast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin:30px 0 82px}.visual-contrast-side{display:grid;min-height:235px;place-content:center;gap:14px;border-radius:30px;text-align:center}.visual-contrast-side>span{font-size:13px;font-weight:850}.visual-contrast-side>strong{font-size:clamp(22px,3vw,32px)}.visual-contrast-side.is-before{background:#f3f4f6;color:#5d6675}.visual-contrast-side.is-after{border:3px solid #fdba74;background:#fff7ed;color:#9a3412}.contrast-icon{font-size:clamp(28px,4vw,48px);white-space:nowrap}.visual-arrow{color:#c2410c;font-size:45px;font-weight:900}
.visual-try{display:grid;grid-template-columns:.72fr 1fr;gap:34px;align-items:center;margin:40px 0 88px;padding:clamp(24px,5vw,54px);border-radius:36px;background:linear-gradient(135deg,#fff7ed,#eef4ff)}.visual-try-intro h2{font-size:clamp(29px,4vw,45px);line-height:1.2}.try-picture{margin-top:26px;font-size:clamp(30px,4vw,50px)}.try-picture span{color:#c2410c;font-weight:900}.visual-try .action-search-card{margin:0}.visual-try .compact-time-row{display:flex;align-items:center;gap:12px;margin:13px 0;padding:0;border:0}.visual-try form>small{display:block;margin-top:10px;text-align:center;color:var(--slate)}
.visual-proof{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0 80px}.visual-proof>div{display:grid;place-items:center;gap:8px;padding:20px 8px;border:1px solid var(--border);border-radius:20px;background:#fff}.visual-proof span{font-size:34px}.visual-proof strong{font-size:14px}.visual-final{display:grid;justify-items:center;gap:16px;margin-bottom:70px;padding:50px 20px;border-radius:34px;background:linear-gradient(135deg,#fff7ed,#fed7aa);color:var(--navy);text-align:center}.visual-final>div{font-size:42px}.visual-final h2{margin:0;font-size:clamp(30px,4vw,46px)}
@media(max-width:900px){.visual-hero{grid-template-columns:1fr;min-height:auto}.visual-hero-copy{text-align:center}.visual-hero-copy .hero-actions{justify-content:center}.visual-hero-art{max-width:680px;margin:auto}.visual-flow-grid{grid-template-columns:1fr}.visual-flow-grid article{display:grid;grid-template-columns:180px 1fr;align-items:center;text-align:left}.visual-flow-grid strong{padding:16px}.visual-try{grid-template-columns:1fr}.visual-proof{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.visual-hero{padding-top:20px}.visual-hero-copy h1{font-size:clamp(44px,15vw,65px)}.visual-hero-copy .hero-actions{display:grid}.visual-hero-copy .button{width:100%}.visual-flow{padding:44px 0}.visual-flow-grid article{grid-template-columns:130px 1fr}.visual-flow-grid strong{font-size:16px}.visual-contrast{grid-template-columns:1fr;margin-bottom:54px}.visual-arrow{transform:rotate(90deg);text-align:center}.visual-contrast-side{min-height:180px}.visual-try{margin-bottom:58px;padding:22px 15px;border-radius:25px}.visual-proof{grid-template-columns:repeat(2,1fr);margin-bottom:54px}.visual-proof>div:last-child{grid-column:1/-1}.visual-final{margin-bottom:45px}}
.review-queue-shell{max-width:880px;margin:0 auto;padding:38px 20px 70px}.review-queue-shell>header h1{margin:7px 0;color:var(--navy)}.review-queue-list{display:grid;gap:14px;margin-top:22px}.review-queue-list article{padding:22px}.review-queue-list article>span{color:#9a6a13;font-size:12px;font-weight:800}.review-queue-list h2{margin:5px 0}.review-queue-list p{color:var(--slate)}.review-queue-list .is-secondary{opacity:.88}.review-actions form{display:flex;flex-wrap:wrap;gap:8px}.review-future{margin-top:20px;padding:16px;border:1px solid var(--border);border-radius:14px}.review-future summary{cursor:pointer;font-weight:800}
.audio-answer-box{margin:18px 0;padding:17px;border:1px solid #cdddef;border-radius:15px;background:#f7fbff}.audio-answer-box h2{margin:0 0 8px;font-size:17px}.audio-answer-box>div{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.audio-answer-box audio{width:100%;margin:8px 0}.audio-answer-box p{color:var(--slate);font-size:12px}
.growth-report-shell{max-width:920px;margin:0 auto;padding:40px 20px 70px}.growth-report-shell>header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.growth-report-shell h1{width:100%;margin:6px 0}.growth-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.growth-summary div{display:grid;padding:18px;border-radius:15px;background:#edf5ff;text-align:center}.growth-summary strong{font-size:28px;color:var(--navy)}.growth-summary span{font-size:12px}.growth-change{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.growth-change small{color:var(--teal);font-weight:800}.growth-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}@media print{header,.site-footer,.no-print{display:none!important}.growth-report-shell{padding:0}.panel{box-shadow:none!important}}@media(max-width:600px){.growth-summary,.growth-columns{grid-template-columns:1fr}.growth-change{grid-template-columns:1fr auto}}

/* S62: independent visual guide pages and DB-independent setup */
.setup-safe-header{display:flex;min-height:74px;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1500px)/2));border-bottom:1px solid var(--border);background:#fff}.setup-safe-header a{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none}.setup-safe-header a>span{display:grid;width:38px;height:38px;place-items:center;border-radius:13px;background:#2b5bff;color:#fff}.setup-safe-header small{color:var(--slate);font-weight:800}.setup-safe-main{max-width:860px;min-height:calc(100vh - 150px);padding-top:36px;padding-bottom:60px}.setup-safe-main>.panel{padding:clamp(24px,5vw,42px)}.setup-safe-main form{display:grid;gap:16px;margin-top:24px}.setup-safe-main label{display:grid;gap:8px;font-weight:800}.setup-safe-main .button.primary{min-height:54px;justify-content:center}.setup-safe-footer{padding:22px;text-align:center;color:var(--slate);font-size:12px}
.setup-rebuild-panel{border:2px solid #fdba74!important;background:linear-gradient(145deg,#fff,#fffaf5)!important}.setup-rebuild-icon{display:grid;width:62px;height:62px;place-items:center;margin-bottom:16px;border-radius:20px;background:#ffedd5;color:#c2410c;font-size:36px;font-weight:900}.setup-rebuild-panel h1{margin:0 0 10px;font-size:clamp(28px,5vw,42px)}.setup-confirm{grid-template-columns:24px 1fr!important;align-items:flex-start;padding:16px;border:1px solid #fed7aa;border-radius:16px;background:#fff7ed;cursor:pointer}.setup-confirm input{width:20px;height:20px;margin-top:2px;accent-color:#ea580c}.setup-confirm span{display:grid;gap:4px}.setup-confirm small{color:#7c5a43;font-weight:650;line-height:1.6}.setup-rebuild-button{min-height:58px;justify-content:center;border-color:#ea580c!important;background:linear-gradient(135deg,#f97316,#ea580c)!important;color:#fff!important;box-shadow:0 14px 28px rgba(234,88,12,.24)!important;font-size:17px!important}.setup-rebuild-button:hover{background:linear-gradient(135deg,#ea580c,#c2410c)!important;transform:translateY(-1px)}.setup-repair-panel{margin-top:18px}.setup-repair-panel summary{cursor:pointer;color:var(--slate);font-weight:800}.setup-repair-panel[open] summary{margin-bottom:14px;color:var(--navy)}
.setup-admin-account{display:grid;gap:14px;margin:4px 0;padding:20px;border:1px solid #d9e5f4;border-radius:18px;background:#f8fbff}.setup-admin-account legend{padding:0 8px;color:var(--navy);font-weight:900}.setup-admin-account label small{color:var(--slate);font-weight:650;line-height:1.55}
.feature-page-hero,.how-page-hero{display:grid;grid-template-columns:minmax(0,.78fr) minmax(420px,1fr);align-items:center;gap:clamp(22px,5vw,66px);min-height:590px;padding:44px 0}.feature-page-hero h1,.how-page-hero h1{margin:12px 0;font-size:clamp(47px,7vw,78px);line-height:1.04;letter-spacing:-.055em}.feature-page-hero h1 em,.how-page-hero h1 em{color:#c2410c;font-style:normal}.feature-page-hero p,.how-page-hero p{margin:0 0 26px;color:var(--slate);font-size:clamp(19px,2.2vw,26px);font-weight:800}.feature-page-hero img,.how-page-hero img{display:block;width:100%;height:auto}.feature-visual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 62px}.feature-visual-card{display:grid;min-height:205px;place-content:center;gap:10px;padding:20px;border:2px solid transparent;border-radius:27px;text-align:center}.feature-visual-card>div{font-size:35px}.feature-visual-card strong{font-size:19px}.feature-visual-card small{font-weight:850}.feature-visual-card.is-orange{border-color:#fdba74;background:#fff7ed;color:#9a3412}.feature-visual-card.is-blue{border-color:#bfdbfe;background:#eff6ff;color:#1e40af}.feature-visual-card.is-green{border-color:#a7f3d0;background:#ecfdf5;color:#065f46}.feature-visual-card.is-purple{border-color:#ddd6fe;background:#f5f3ff;color:#5b21b6}.feature-before-after{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:0 0 70px}.feature-before-after>div:not(.feature-transform){display:grid;min-height:225px;place-content:center;gap:13px;border-radius:28px;text-align:center}.feature-before-after .is-before{background:#f1f3f6;color:#687283}.feature-before-after .is-after{border:3px solid #fb923c;background:#fff7ed;color:#9a3412}.feature-before-after span{font-weight:850}.feature-before-after strong{font-size:clamp(25px,3.4vw,43px)}.feature-before-after small{font-weight:750}.feature-transform{color:#c2410c;font-size:43px;font-weight:900}.feature-final{margin-bottom:70px}
.tap-journey{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:14px;margin:20px 0 70px}.tap-journey article{display:grid;position:relative;min-height:285px;place-content:center;gap:15px;border:1px solid var(--border);border-radius:29px;background:#fff;box-shadow:var(--shadow-sm);text-align:center}.tap-journey>i{color:#c2410c;font-size:40px;font-style:normal;font-weight:900}.tap-number{position:absolute;top:16px;left:16px;display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:#c2410c;color:#fff;font-weight:900}.tap-picture{font-size:35px;line-height:1.55}.tap-picture b{font-size:17px}.tap-journey article>strong{font-size:19px}.after-start-journey{margin:0 0 70px;padding:clamp(26px,5vw,50px);border-radius:34px;background:linear-gradient(135deg,#eef4ff,#fff7ed);text-align:center}.after-start-journey header>span{color:var(--slate);font-size:13px;font-weight:850}.after-start-journey h2{margin:13px 0 22px;font-size:clamp(28px,5vw,52px);letter-spacing:.08em}.after-start-journey>div{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.after-start-journey>div span{padding:11px 5px;border-radius:13px;background:#fff;font-weight:850}.how-choice{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 70px}.how-choice a{display:grid;min-height:215px;place-content:center;gap:8px;border:2px solid #fdba74;border-radius:27px;background:#fff7ed;color:#9a3412;text-align:center;text-decoration:none;transition:.18s}.how-choice a:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(154,52,18,.14)}.how-choice a>span{font-size:42px}.how-choice a>strong{font-size:20px}.how-choice a>small{font-weight:800}
.faq-page-hero{display:flex;min-height:370px;align-items:center;justify-content:center;gap:clamp(25px,6vw,78px);padding:50px 0}.faq-face{display:grid;width:clamp(150px,22vw,255px);aspect-ratio:1;place-items:center;border-radius:44% 56% 52% 48%;background:linear-gradient(145deg,#fb923c,#c2410c);color:#fff;font-size:clamp(80px,13vw,150px);font-weight:950;box-shadow:0 25px 50px rgba(194,65,12,.2)}.faq-page-hero h1{margin:10px 0;font-size:clamp(42px,6.5vw,72px);line-height:1.08}.faq-page-hero p{color:var(--slate);font-size:20px;font-weight:800}.faq-category-pictures{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:10px 0 55px}.faq-category-pictures a{display:grid;min-height:150px;place-content:center;gap:10px;border:1px solid var(--border);border-radius:25px;background:#fff;color:var(--navy);text-align:center;text-decoration:none}.faq-category-pictures span{font-size:38px}.faq-illustrated-group{scroll-margin-top:100px;margin:0 0 54px}.faq-illustrated-group>header{display:flex;align-items:center;gap:12px;margin-bottom:15px}.faq-illustrated-group>header span{font-size:36px}.faq-illustrated-group h2{margin:0;font-size:27px}.visual-faq-list{display:grid;gap:11px}.visual-faq-list details{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:#fff}.visual-faq-list summary{display:flex;align-items:center;gap:13px;padding:20px;cursor:pointer;font-size:17px;font-weight:850;list-style:none}.visual-faq-list summary::-webkit-details-marker{display:none}.visual-faq-list summary:after{content:"＋";margin-left:auto;color:#c2410c;font-size:24px}.visual-faq-list details[open] summary:after{content:"−"}.visual-faq-list summary>span{font-size:25px}.visual-faq-list .faq-a{margin:0;padding:0 20px 20px 58px;color:var(--slate);line-height:1.75}.faq-contact-picture{display:flex;align-items:center;justify-content:center;gap:clamp(25px,5vw,65px);margin:20px 0 70px;padding:38px;border-radius:29px;background:#fff7ed}.faq-contact-picture>span{font-size:clamp(40px,7vw,70px)}.faq-contact-picture h2{margin:0 0 12px}
@media(max-width:900px){.feature-page-hero,.how-page-hero{grid-template-columns:1fr;min-height:auto;text-align:center}.feature-page-hero>div .button,.how-page-hero>div .button{justify-content:center}.feature-page-hero img,.how-page-hero img{max-width:680px;margin:auto}.feature-visual-grid{grid-template-columns:1fr 1fr}.tap-journey{grid-template-columns:1fr}.tap-journey>i{transform:rotate(90deg);text-align:center}.tap-journey article{min-height:220px}}
@media(max-width:600px){.setup-safe-header{padding:0 16px}.setup-safe-header small{display:none}.setup-safe-main{padding-top:20px}.feature-page-hero h1,.how-page-hero h1{font-size:clamp(43px,14vw,62px)}.feature-page-hero>div .button,.how-page-hero>div .button{width:100%}.feature-visual-grid{grid-template-columns:1fr 1fr;gap:9px}.feature-visual-card{min-height:165px;padding:12px}.feature-visual-card>div{font-size:27px}.feature-visual-card strong{font-size:15px}.feature-before-after{grid-template-columns:1fr}.feature-transform{transform:rotate(90deg);text-align:center}.feature-before-after>div:not(.feature-transform){min-height:180px}.after-start-journey>div{grid-template-columns:1fr}.how-choice{grid-template-columns:1fr}.faq-page-hero{display:grid;text-align:center}.faq-face{margin:auto}.faq-category-pictures{gap:8px}.faq-category-pictures a{min-height:120px}.visual-faq-list summary{padding:17px 14px}.visual-faq-list .faq-a{padding:0 14px 18px}.faq-contact-picture{display:grid;padding:28px 18px;text-align:center}.faq-contact-picture .button{width:100%;justify-content:center}}

/* V73: maintenance gate and multi-channel system announcements */
.notification-nav-link{position:relative;display:inline-flex!important;align-items:center;gap:5px}.notification-nav-link b{display:inline-grid;min-width:19px;height:19px;place-items:center;padding:0 5px;border-radius:999px;background:#c2410c;color:#fff;font-size:10px;line-height:1}.maintenance-inline-banner,.system-announcement{display:flex;align-items:flex-start;gap:12px;margin:14px 0;padding:15px 17px;border:1px solid;border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}.maintenance-inline-banner{border-color:#fdba74;background:#fff7ed;color:#9a3412}.maintenance-inline-banner>svg,.system-announcement-icon{flex:0 0 auto}.maintenance-inline-banner div,.system-announcement>div{display:grid;gap:3px;min-width:0}.maintenance-inline-banner span,.maintenance-inline-banner small{color:#7c2d12;font-size:12.5px;line-height:1.55}.system-announcement{border-color:#bfdbfe;background:#eff6ff;color:#1e40af}.system-announcement.severity-warning{border-color:#fcd34d;background:#fffbeb;color:#92400e}.system-announcement.severity-critical{border-color:#fca5a5;background:#fff1f2;color:#9f1239}.system-announcement p{margin:2px 0;color:inherit;font-size:13px;line-height:1.65}.system-announcement>a{flex:0 0 auto;margin-left:auto;color:inherit;font-size:12px;font-weight:850}.maintenance-page{min-height:100vh;margin:0;background:radial-gradient(circle at 15% 10%,#dbeafe,transparent 35%),linear-gradient(145deg,#f8fafc,#fff7ed);color:#172033;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.maintenance-screen{display:grid;min-height:100vh;place-items:center;padding:24px}.maintenance-panel{width:min(720px,100%);padding:clamp(28px,6vw,58px);border:1px solid #dbe7f4;border-radius:30px;background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(15,38,75,.13);text-align:center}.maintenance-illustration{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:19px}.maintenance-illustration span{display:grid;width:70px;height:70px;place-items:center;border-radius:22px;background:#eff6ff;font-size:32px}.maintenance-illustration span:nth-child(2){width:88px;height:88px;background:#fff7ed;font-size:42px}.maintenance-state{display:inline-flex;padding:6px 11px;border-radius:999px;background:#fff7ed;color:#9a3412;font-size:12px;font-weight:900}.maintenance-panel h1{margin:13px 0 10px;font-size:clamp(29px,5vw,46px)}.maintenance-panel>p{color:#526079;line-height:1.75}.maintenance-end{display:inline-flex!important;gap:8px;padding:10px 14px;border-radius:13px;background:#eff6ff;color:#1e40af!important}.maintenance-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.maintenance-admin-note{font-size:11px}.maintenance-admin-status{display:flex;align-items:center;gap:12px;margin-bottom:17px;padding:16px;border:1px solid #a7f3d0;border-radius:17px;background:#ecfdf5}.maintenance-admin-status.mode-partial,.maintenance-admin-status.mode-full{border-color:#fdba74;background:#fff7ed}.maintenance-admin-status>div{display:grid;gap:3px}.maintenance-admin-status small{color:var(--slate)}.admin-form-stack{display:grid;gap:17px}.admin-form-stack>label,.admin-form-stack .compact-cols>label{display:grid;gap:7px;color:var(--navy);font-size:13px;font-weight:850}.admin-form-stack textarea{width:100%;resize:vertical}.admin-form-stack fieldset{display:grid;gap:10px;margin:0;padding:16px;border:1px solid var(--border);border-radius:16px}.admin-form-stack legend{padding:0 7px;font-size:13px;font-weight:900}.admin-form-stack fieldset label{display:flex;align-items:center;gap:8px;color:var(--navy-soft);font-size:12.5px;font-weight:750}.admin-form-stack fieldset label:has(input[type=email]){display:grid;align-items:initial}.admin-form-stack input[type=radio],.admin-form-stack input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:#c2410c}.maintenance-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.maintenance-mode-option{position:relative;cursor:pointer}.maintenance-mode-option>input{position:absolute;opacity:0}.maintenance-mode-option>span{display:grid;min-height:120px;place-content:center;gap:5px;border:1.5px solid var(--border);border-radius:17px;background:#fff;text-align:center}.maintenance-mode-option.is-selected>span,.maintenance-mode-option>input:checked+span{border-color:#c2410c;background:#fff7ed;color:#9a3412}.maintenance-mode-option>input:focus-visible+span{outline:3px solid rgba(194,65,12,.2)}.maintenance-mode-option small{font-size:11px}.maintenance-category-fieldset{background:var(--mist)}.maintenance-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.maintenance-category-grid label{min-height:48px;padding:10px;border-radius:12px;background:#fff}.maintenance-category-grid label span{display:flex;align-items:center;gap:6px}.danger-confirm,.publish-check{display:flex!important;grid-template-columns:none!important;align-items:center!important;gap:8px!important;padding:13px;border-radius:13px;background:#fff7ed}.compact-cols{gap:12px}.form-actions{display:flex;gap:9px;flex-wrap:wrap}.announcement-admin-list{display:grid;gap:12px}.announcement-admin-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:17px;border-left:5px solid #60a5fa;border-radius:15px;background:var(--mist)}.announcement-admin-item.severity-warning{border-left-color:#f59e0b}.announcement-admin-item.severity-critical{border-left-color:#dc2626}.announcement-admin-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--slate);font-size:11.5px}.announcement-admin-item h3{margin:8px 0 5px}.announcement-admin-item p{margin:0 0 8px;color:var(--navy-soft);font-size:13px;line-height:1.65}.announcement-admin-item small{color:var(--slate)}.announcement-admin-actions{display:grid;align-content:start;gap:7px}.announcement-admin-actions form{margin:0}.notification-center{max-width:900px;margin:28px auto 60px}.notification-center-head{display:flex;align-items:flex-start;gap:15px;margin-bottom:22px}.notification-center-head h1{margin:3px 0 6px;font-size:clamp(28px,5vw,42px)}.notification-center-head p{margin:0;color:var(--slate)}.notification-list{display:grid;gap:13px}.notification-item{padding:clamp(18px,3vw,27px);border:1px solid #bfdbfe;border-left:6px solid #3b82f6;border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}.notification-item.severity-warning{border-left-color:#f59e0b}.notification-item.severity-critical{border-left-color:#dc2626}.notification-item.is-read{opacity:.78}.notification-item-top{display:flex;align-items:center;gap:9px;color:var(--slate);font-size:11.5px}.notification-kind,.unread-dot{padding:4px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-weight:850}.unread-dot{margin-left:auto;background:#fff1f2;color:#be123c}.notification-item h2{margin:11px 0 7px;font-size:20px}.notification-item>p{color:var(--navy-soft);line-height:1.75}.notification-item form{margin-top:14px}.empty-state{text-align:center;padding:50px;border:1px dashed var(--border);border-radius:22px;background:#fff}.empty-state>span{font-size:48px}
.notification-menu{position:relative}.notification-menu>summary{cursor:pointer;list-style:none}.notification-menu>summary::-webkit-details-marker{display:none}.notification-menu.has-unread>summary svg{color:#c2410c}.notification-menu.is-critical>summary{animation:notification-attention 1.8s ease-in-out 2}.notification-menu-panel{position:absolute;z-index:1200;top:calc(100% + 10px);right:0;width:min(390px,calc(100vw - 28px));padding:14px;border:1px solid #d8e3f1;border-radius:18px;background:#fff;box-shadow:0 18px 55px rgba(20,42,76,.2)}.notification-menu-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 10px}.notification-menu-panel>header a,.notification-menu-more{font-size:12px;font-weight:850}.notification-menu-panel>p{margin:8px;color:#64748b;font-size:13px}.notification-menu-panel ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.notification-menu-panel li a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;padding:10px;border-radius:12px;background:#f4f8fd;color:#172b4d;text-decoration:none}.notification-menu-panel li a:hover{background:#eaf2fd}.notification-menu-panel li span{grid-row:1/3;align-self:start;padding:3px 6px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:9px;font-weight:900}.notification-menu-panel li.severity-warning span{background:#fef3c7;color:#92400e}.notification-menu-panel li.severity-critical span{background:#ffe4e6;color:#be123c}.notification-menu-panel li strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.notification-menu-panel li time{color:#64748b;font-size:10px}.notification-menu-more{display:block;padding:10px 4px 2px;text-align:center}@keyframes notification-attention{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.header-notification-quick{position:relative;display:none;width:42px;height:42px;flex:0 0 auto;place-items:center;border:1px solid #c8d8ea;border-radius:13px;background:#fff;color:#173457}.header-notification-quick b{position:absolute;top:-6px;right:-6px;display:grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border:2px solid #fff;border-radius:999px;background:#c2410c;color:#fff;font-size:9px}.header-notification-quick.has-unread svg{color:#c2410c}.header-notification-quick.is-critical{animation:notification-attention 1.8s ease-in-out 2}@media(max-width:900px){.header-notification-quick{display:inline-grid;margin-left:auto}.site-header-inner>.nav-toggle{margin-left:0}}
.notification-center>.org-search-toolbar{display:grid;grid-template-columns:minmax(200px,2fr) repeat(2,minmax(140px,1fr)) auto auto;gap:10px;align-items:end;margin:0 0 20px;padding:14px;border:1px solid #d8e5f3;border-radius:16px;background:#f7faff}.notification-center>.org-search-toolbar label{display:grid;gap:6px;font-size:12px;font-weight:850}.notification-center>.org-pagination{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}.notification-center>.org-pagination span{font-size:12px;font-weight:850;color:#52647c}@media(max-width:720px){.notification-center>.org-search-toolbar{grid-template-columns:1fr 1fr}.notification-center>.org-search-toolbar label:first-child{grid-column:1/-1}}@media(max-width:520px){.notification-center>.org-search-toolbar{grid-template-columns:1fr}.notification-center>.org-search-toolbar label:first-child{grid-column:auto}.notification-center>.org-search-toolbar .button{width:100%}}
@media(max-width:900px){.maintenance-category-grid{grid-template-columns:1fr 1fr}.announcement-admin-item{grid-template-columns:1fr}.announcement-admin-actions{display:flex;flex-wrap:wrap}.notification-nav-link span{display:none}}
@media(max-width:650px){.maintenance-mode-grid,.maintenance-category-grid{grid-template-columns:1fr}.maintenance-mode-option>span{min-height:90px}.maintenance-actions,.form-actions{display:grid}.maintenance-actions .button,.form-actions .button{width:100%;justify-content:center}.maintenance-illustration span{width:56px;height:56px;font-size:26px}.maintenance-illustration span:nth-child(2){width:70px;height:70px;font-size:34px}.system-announcement{display:grid;grid-template-columns:auto 1fr}.system-announcement>a{grid-column:2;margin-left:0}.notification-center-head{display:grid}.announcement-admin-actions,.announcement-admin-actions form,.announcement-admin-actions button{width:100%}}

/* V75: today's learning must remain actionable even while verified content is being prepared */
.chip-orange{background:#fff0e6!important;color:#b93808!important}.study-empty-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px}.study-empty-actions form{margin:0}.today-video-choices{padding:22px}.today-video-choices-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.today-video-choices-head h2{margin:5px 0 0;font-size:22px}.today-video-choices-head form{margin:0}.today-video-choices>p{margin:10px 0 16px;font-size:12px;line-height:1.65}.today-video-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.today-video-choice{overflow:hidden;border:2px solid transparent;border-radius:15px;background:#f5f7fb;color:var(--navy);text-decoration:none;transition:.18s}.today-video-choice:hover{transform:translateY(-2px);border-color:#fdba74;box-shadow:0 12px 25px rgba(154,52,18,.11)}.today-video-choice.is-active{border-color:#ea580c;background:#fff7ed}.today-video-thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#0f172a}.today-video-thumb img{width:100%;height:100%;object-fit:cover}.today-video-thumb strong{position:absolute;right:7px;bottom:7px;padding:5px 8px;border-radius:999px;background:rgba(154,52,18,.94);color:#fff;font-size:10px}.today-video-choice-body{display:grid;gap:5px;padding:11px}.today-video-choice-body b{color:#c2410c;font-size:11px}.today-video-choice-body>span{display:-webkit-box;overflow:hidden;font-size:12.5px;font-weight:850;line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical}.today-video-choice-body small{overflow:hidden;color:var(--slate);font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}.study-suggestion-complete fieldset{display:flex;align-items:center;gap:14px;margin:0;padding:0;border:0}.study-suggestion-complete legend{margin-bottom:7px;font-size:12px;font-weight:900}.study-suggestion-complete label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800}.study-suggestion-complete input{width:18px;height:18px;accent-color:#c2410c}
@media(max-width:880px){.today-video-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.study-suggestion-complete fieldset{display:grid;gap:8px}}
@media(max-width:640px){.today-video-choices{padding:18px 14px}.today-video-choices-head{display:grid}.today-video-choices-head .button{width:100%;justify-content:center}.today-video-choice-grid{grid-template-columns:1fr}.today-video-choice{display:grid;grid-template-columns:130px minmax(0,1fr)}.today-video-thumb{height:100%;min-height:92px}.study-empty-actions{display:grid}.study-empty-actions .button,.study-empty-actions form{width:100%}.study-suggestion-complete fieldset{width:100%}}

/* ============================================================
   Home conversion system V1 — "Search less. Learn now."
   Emotion-first landing page + brand film experience
   ============================================================ */
.page-index.public-app {
  --conversion-ink: #111a2f;
  --conversion-ink-soft: #2f3b55;
  --conversion-paper: #f7f2e9;
  --conversion-paper-2: #fffdf9;
  --conversion-orange: #e4531a;
  --conversion-orange-dark: #b83a10;
  --conversion-blue: #5279ff;
  --conversion-line: rgba(17, 26, 47, .12);
  background: var(--conversion-paper-2);
  background-image: none;
}
.page-index .container {
  width: 100%;
  max-width: none;
  padding: 0 0 96px;
  overflow: hidden;
}
.page-index .site-header {
  border-bottom-color: rgba(17, 26, 47, .08);
  background: rgba(255, 253, 249, .9);
}
.page-index .site-header-inner { width: min(1240px, 100% - 40px); }
.page-index .brand-mark {
  background: var(--conversion-ink);
  box-shadow: 0 5px 15px rgba(17, 26, 47, .2);
}
.page-index .nav-cta {
  background: var(--conversion-ink);
  box-shadow: 0 8px 20px rgba(17, 26, 47, .16);
}
.page-index .nav-cta:hover { background: #27334d; }

.conversion-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(62px, 7.3vw, 108px) 20px 0;
  color: var(--conversion-ink);
  background:
    radial-gradient(circle at 84% 5%, rgba(82, 121, 255, .19), transparent 31%),
    radial-gradient(circle at 9% 72%, rgba(228, 83, 26, .12), transparent 28%),
    linear-gradient(145deg, #fffdf9 0%, #f7f2e9 54%, #edf1ff 100%);
}
.conversion-hero::before,
.conversion-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(17, 26, 47, .08);
  border-radius: 50%;
  pointer-events: none;
}
.conversion-hero::before { width: 570px; height: 570px; top: -330px; right: 8%; }
.conversion-hero::after { width: 360px; height: 360px; left: -220px; bottom: 72px; }
.conversion-hero-glow {
  position: absolute;
  z-index: -1;
  top: 23%;
  left: 46%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--conversion-orange);
  box-shadow: 52px -76px 0 rgba(82,121,255,.5), 112px 22px 0 rgba(228,83,26,.25), -72px 112px 0 rgba(17,26,47,.18);
}
.conversion-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: clamp(38px, 6vw, 88px);
  align-items: center;
  width: min(1240px, 100%);
  margin: 0 auto;
}
.conversion-hero-copy { padding-bottom: clamp(36px, 5vw, 72px); }
.conversion-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 23px;
  color: #455069;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .08em;
}
.conversion-kicker > span {
  width: 24px;
  height: 2px;
  border-radius: 99px;
  background: var(--conversion-orange);
}
.conversion-hero-copy h1 {
  max-width: 720px;
  margin: 0;
  color: var(--conversion-ink);
  font-size: clamp(43px, 5.6vw, 77px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.conversion-hero-copy h1 em,
.conversion-truth-copy h2 em,
.conversion-value-intro h2 em {
  color: var(--conversion-orange);
  font-style: normal;
}
.conversion-hero-lead {
  max-width: 660px;
  margin: 27px 0 0;
  color: #465168;
  font-size: clamp(15.5px, 1.45vw, 18px);
  line-height: 1.95;
}
.conversion-hero-lead strong { color: var(--conversion-ink); }
.conversion-reduction {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 27px;
  padding: 12px 15px;
  border: 1px solid rgba(17, 26, 47, .1);
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
}
.conversion-reduction > div { display: grid; min-width: 59px; line-height: 1.25; }
.conversion-reduction span { color: #6b7487; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.conversion-reduction strong { color: var(--conversion-ink); font-size: 20px; font-weight: 900; }
.conversion-reduction > b { color: #9aa2b1; font-size: 15px; }
.conversion-reduction .is-now {
  min-width: 70px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--conversion-ink);
}
.conversion-reduction .is-now span { color: rgba(255,255,255,.62); }
.conversion-reduction .is-now strong { color: #fff; }
.conversion-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.conversion-main-cta {
  min-height: 62px !important;
  padding-inline: 27px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #ef6326, var(--conversion-orange) 54%, var(--conversion-orange-dark)) !important;
  box-shadow: 0 17px 34px rgba(184, 58, 16, .23) !important;
}
.conversion-main-cta:hover { box-shadow: 0 21px 42px rgba(184, 58, 16, .31) !important; }
.conversion-film-cta {
  min-height: 62px !important;
  padding-inline: 22px !important;
  border-color: rgba(17, 26, 47, .14) !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}
.conversion-play-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--conversion-ink);
}
.conversion-no-hype {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 570px;
  margin: 19px 0 0;
  color: #697286;
  font-size: 11.5px;
  line-height: 1.65;
}
.conversion-no-hype svg { flex: 0 0 auto; margin-top: 1px; color: #56627a; }

.conversion-proof-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(13px, 3vw, 40px);
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 22px 16px 25px;
  color: #5c6578;
  font-size: 11px;
  font-weight: 700;
}
.conversion-proof-bar span { white-space: nowrap; }
.conversion-proof-bar b { color: var(--conversion-ink); font-size: 13px; }
.conversion-proof-bar > i { width: 4px; height: 4px; border-radius: 50%; background: #b4bac5; }

.conversion-eyebrow {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--conversion-orange);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .19em;
}
.conversion-section-heading { max-width: 820px; margin: 0 auto 38px; text-align: center; }
.conversion-section-heading.is-left { margin-left: 0; text-align: left; }
.conversion-section-heading h2,
.conversion-truth-copy h2,
.conversion-value-intro h2,
.conversion-honesty-section h2,
.conversion-final-section h2 {
  color: inherit;
  font-size: clamp(32px, 4vw, 53px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.045em;
}
.conversion-section-heading p { max-width: 680px; margin: 14px auto 0; color: #697286; font-size: 15px; line-height: 1.85; }
.conversion-section-heading.is-left p { margin-left: 0; }

.brand-film-section {
  position: relative;
  isolation: isolate;
  padding: clamp(88px, 10vw, 148px) 20px;
  color: #f7f9ff;
  background:
    radial-gradient(circle at 84% 13%, rgba(82,121,255,.24), transparent 28%),
    radial-gradient(circle at 12% 84%, rgba(228,83,26,.17), transparent 28%),
    #0b1120;
}
.brand-film-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .32;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.brand-film-section .conversion-section-heading h2 { color: #f7f9ff; }
.brand-film-section .conversion-section-heading p { color: rgba(239,243,255,.58); }
.brand-film-stage { width: min(1120px, 100%); margin: 0 auto; }
.brand-film-poster {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 25px;
  color: #fff;
  background: #070b13;
  box-shadow: 0 45px 110px rgba(0,0,0,.46), 0 0 0 8px rgba(255,255,255,.025);
  aspect-ratio: 16/9;
}
.brand-film-poster:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.24); box-shadow: 0 54px 126px rgba(0,0,0,.52), 0 0 0 8px rgba(255,255,255,.035); }
.brand-film-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.brand-film-poster:hover img { transform: scale(1.018); filter: brightness(.84); }
.brand-film-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,7,13,.79)); pointer-events: none; }
.brand-film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(72px, 8vw, 98px);
  height: clamp(72px, 8vw, 98px);
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(8,13,24,.48);
  box-shadow: 0 15px 50px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(14px);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease;
}
.brand-film-poster:hover .brand-film-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(228,83,26,.87); }
.brand-film-caption { position: absolute; left: clamp(18px, 3vw, 34px); bottom: clamp(17px, 3vw, 30px); display: grid; text-align: left; line-height: 1.3; }
.brand-film-caption b { color: #fff; font-size: 12px; letter-spacing: .18em; }
.brand-film-caption small { color: rgba(255,255,255,.59); font-size: 10px; }
.brand-film-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 27px; border-top: 1px solid rgba(255,255,255,.12); }
.brand-film-timeline > div { position: relative; display: grid; gap: 3px; padding: 18px 22px 0 0; }
.brand-film-timeline > div::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #ff7540; box-shadow: 0 0 0 5px rgba(255,117,64,.1); }
.brand-film-timeline time { color: #ff8f64; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; }
.brand-film-timeline strong { color: rgba(255,255,255,.88); font-size: 13px; }
.brand-film-timeline span { color: rgba(255,255,255,.43); font-size: 10.5px; line-height: 1.55; }

.conversion-truth-section {
  display: grid;
  grid-template-columns: minmax(0,.86fr) minmax(540px,1.14fr);
  gap: clamp(48px, 7vw, 92px);
  align-items: center;
  width: min(1200px, 100% - 40px);
  margin: 0 auto;
  padding: clamp(88px, 10vw, 150px) 0;
}
.conversion-truth-copy h2 { color: var(--conversion-ink); }
.conversion-truth-copy p { max-width: 560px; margin: 24px 0 0; color: #626c80; font-size: 15px; line-height: 2; }
.conversion-truth-visual { display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); align-items: center; gap: 12px; }
.truth-browser {
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(17,26,47,.12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17,26,47,.12);
}
.truth-browser-bar { display: flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px; border-bottom: 1px solid rgba(17,26,47,.08); background: #f3f5f8; }
.truth-browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #c7cbd3; }
.truth-browser-bar span { margin-left: 7px; color: #8c93a1; font-size: 8px; }
.truth-browser.is-before { transform: rotate(-2.2deg); }
.truth-browser.is-after { transform: rotate(2.2deg); }
.truth-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 20px 16px 18px; }
.truth-tabs span { display: grid; gap: 5px; padding: 7px; border: 1px solid #e8ebf0; border-radius: 7px; background: #fafbfc; }
.truth-tabs b { height: 39px; border-radius: 4px; background: linear-gradient(135deg,#d9dde4,#eef0f3); }
.truth-tabs i { width: 72%; height: 4px; border-radius: 99px; background: #d8dce3; }
.truth-browser > strong,
.truth-browser > small { display: block; padding-inline: 17px; }
.truth-browser > strong { margin-top: 2px; color: #4f586b; font-size: 14px; }
.truth-browser > small { color: #9a9fac; font-size: 10px; }
.truth-browser.is-after { border-color: rgba(82,121,255,.22); background: #111a2f; box-shadow: 0 28px 68px rgba(17,26,47,.22); }
.truth-browser.is-after .truth-browser-bar { border-bottom-color: rgba(255,255,255,.08); background: #19243b; }
.truth-browser.is-after .truth-browser-bar i { background: #56627a; }
.truth-browser.is-after .truth-browser-bar span { color: #7f899d; }
.truth-browser.is-after ol { display: grid; gap: 8px; margin: 0; padding: 23px 16px 19px; list-style: none; }
.truth-browser.is-after li { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; min-height: 49px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.05); }
.truth-browser.is-after li b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: #fff; background: #4b64af; font-size: 8px; }
.truth-browser.is-after li:nth-child(2) b { background: #a45137; }
.truth-browser.is-after li:nth-child(3) b { background: #3d756f; }
.truth-browser.is-after li span { color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800; }
.truth-browser.is-after li small { color: rgba(255,255,255,.42); font-size: 8px; }
.truth-browser.is-after > strong { color: #fff; }
.truth-browser.is-after > small { color: rgba(255,255,255,.42); }

.conversion-journey-section {
  padding: clamp(88px, 9vw, 135px) max(20px, calc((100vw - 1200px) / 2));
  color: var(--conversion-ink);
  background: #f2f4f8;
}
.conversion-journey-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.conversion-journey-grid article {
  position: relative;
  min-height: 330px;
  padding: 28px 24px;
  overflow: hidden;
  border: 1px solid rgba(17,26,47,.09);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}
.conversion-journey-grid article::after { content: ""; position: absolute; right: -38px; bottom: -38px; width: 110px; height: 110px; border: 1px solid rgba(17,26,47,.07); border-radius: 50%; }
.journey-number { display: block; margin-bottom: 48px; color: #9ba2b1; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.journey-icon { display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 21px; border-radius: 15px; color: #fff; background: var(--conversion-ink); box-shadow: 0 13px 25px rgba(17,26,47,.16); }
.conversion-journey-grid article:nth-child(2) .journey-icon { background: #4f6cc7; }
.conversion-journey-grid article:nth-child(3) .journey-icon { background: #c14a1c; }
.conversion-journey-grid article:nth-child(4) .journey-icon { background: #3e746f; }
.conversion-journey-grid h3 { margin: 0 0 11px; color: var(--conversion-ink); font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.conversion-journey-grid p { margin: 0; color: #687184; font-size: 12.5px; line-height: 1.8; }
.conversion-journey-grid article > small { position: absolute; right: 22px; bottom: 18px; color: #b3b8c2; font-size: 9px; font-weight: 950; letter-spacing: .15em; }

.conversion-value-section {
  padding: clamp(88px, 10vw, 145px) max(20px, calc((100vw - 1200px) / 2));
  color: #fff;
  background:
    radial-gradient(circle at 8% 24%, rgba(228,83,26,.19), transparent 28%),
    radial-gradient(circle at 89% 77%, rgba(82,121,255,.25), transparent 29%),
    #121b31;
}
.conversion-value-intro { max-width: 830px; margin-bottom: 52px; }
.conversion-value-intro h2 { color: #fff; }
.conversion-value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.conversion-value-grid article { min-height: 270px; padding: 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 21px; background: rgba(255,255,255,.045); backdrop-filter: blur(8px); }
.conversion-value-grid article > span { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 49px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; color: #ff8a5a; background: rgba(255,255,255,.05); }
.conversion-value-grid h3 { color: #fff; font-size: 21px; letter-spacing: -.02em; }
.conversion-value-grid p { margin: 10px 0 0; color: rgba(255,255,255,.53); font-size: 13px; line-height: 1.85; }

.conversion-honesty-section {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  gap: 30px;
  align-items: flex-start;
  width: min(1100px, 100% - 40px);
  margin: clamp(78px, 9vw, 130px) auto;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid rgba(17,26,47,.1);
  border-radius: 28px;
  color: var(--conversion-ink);
  background: #fff;
  box-shadow: 0 30px 75px rgba(17,26,47,.09);
}
.conversion-honesty-mark { display: grid; width: 74px; height: 74px; place-items: center; border-radius: 22px; color: #fff; background: var(--conversion-ink); box-shadow: 0 15px 30px rgba(17,26,47,.18); }
.conversion-honesty-section h2 { max-width: 860px; font-size: clamp(27px, 3.4vw, 44px); }
.conversion-honesty-section p { max-width: 830px; margin: 18px 0 0; color: #667085; font-size: 13.5px; line-height: 1.9; }

.conversion-final-section {
  position: relative;
  isolation: isolate;
  width: min(1200px, 100% - 40px);
  margin: 0 auto;
  padding: clamp(70px, 9vw, 112px) 28px;
  overflow: hidden;
  border-radius: 34px;
  color: var(--conversion-ink);
  text-align: center;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(145deg, #ffede3, #f8efe2 53%, #e9eeff);
}
.conversion-final-section::before,
.conversion-final-section::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(17,26,47,.09); border-radius: 50%; }
.conversion-final-section::before { width: 320px; height: 320px; left: -170px; top: -155px; }
.conversion-final-section::after { width: 420px; height: 420px; right: -240px; bottom: -240px; }
.conversion-final-orbit { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; }
.conversion-final-orbit span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(17,26,47,.13); border-radius: 50%; color: #6a7386; background: rgba(255,255,255,.58); font-size: 10px; font-weight: 900; }
.conversion-final-orbit span:last-child { color: #fff; background: var(--conversion-ink); }
.conversion-final-orbit i { width: 19px; height: 1px; background: rgba(17,26,47,.2); }
.conversion-final-section h2 { max-width: 850px; margin-inline: auto; }
.conversion-final-section > p { margin: 17px 0 0; color: #626c80; font-size: 15px; }
.conversion-final-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
.conversion-final-section > small { display: block; margin-top: 17px; color: #7e8697; font-size: 10.5px; }

.brand-film-dialog {
  width: min(1120px, calc(100vw - 30px));
  max-width: 1120px;
  max-height: calc(100dvh - 30px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: #090e19;
  box-shadow: 0 40px 130px rgba(0,0,0,.68);
}
.brand-film-dialog::backdrop { background: rgba(4,7,13,.84); backdrop-filter: blur(12px); }
.brand-film-dialog-shell { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: #090e19; }
.brand-film-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; }
.brand-film-dialog-head > div { display: grid; line-height: 1.35; }
.brand-film-dialog-head span { color: #ff8a5a; font-size: 8.5px; font-weight: 950; letter-spacing: .17em; }
.brand-film-dialog-head strong { color: rgba(255,255,255,.88); font-size: 12px; }
.brand-film-dialog-head button { display: grid; width: 38px; min-height: 38px; padding: 0; place-items: center; border-color: rgba(255,255,255,.12); border-radius: 50%; color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); box-shadow: none; font-size: 22px; font-weight: 300; }
.brand-film-dialog video { display: block; width: 100%; max-height: calc(100dvh - 190px); background: #000; aspect-ratio: 16/9; }
.brand-film-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px 17px; }
.brand-film-dialog-foot p { display: grid; margin: 0; line-height: 1.45; }
.brand-film-dialog-foot strong { color: #fff; font-size: 12.5px; }
.brand-film-dialog-foot span { color: rgba(255,255,255,.45); font-size: 9.5px; }
.brand-film-dialog-foot .button { min-height: 42px; padding: 8px 16px; border-radius: 11px; font-size: 12px; white-space: nowrap; }

@media (max-width: 1080px) {
  .conversion-hero-grid { grid-template-columns: minmax(0,.82fr) minmax(480px,1.18fr); gap: 34px; }
  .conversion-hero-copy h1 { font-size: clamp(42px, 6vw, 62px); }
  .conversion-truth-section { grid-template-columns: 1fr; }
  .conversion-truth-copy { max-width: 760px; }
  .conversion-truth-visual { max-width: 760px; margin: 0 auto; }
  .conversion-journey-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .page-index .site-header-inner { width: min(100% - 28px, 1240px); }
  .conversion-hero { padding-top: 58px; }
  .conversion-hero-grid { grid-template-columns: 1fr; width: min(720px,100%); }
  .conversion-hero-copy { padding-bottom: 6px; text-align: center; }
  .conversion-kicker { justify-content: center; }
  .conversion-hero-copy h1,
  .conversion-hero-lead,
  .conversion-no-hype { margin-inline: auto; }
  .conversion-reduction,
  .conversion-hero-actions { justify-content: center; }
  .conversion-proof-bar { flex-wrap: wrap; }
  .conversion-proof-bar > i { display: none; }
  .brand-film-timeline { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .conversion-value-grid { grid-template-columns: 1fr; }
  .conversion-value-grid article { min-height: 230px; }
  .conversion-value-grid article > span { margin-bottom: 30px; }
}

@media (max-width: 680px) {
  .conversion-hero { padding: 44px 14px 0; }
  .conversion-hero-copy h1 { font-size: clamp(39px, 12vw, 55px); line-height: 1.1; }
  .conversion-hero-lead { font-size: 14px; line-height: 1.85; }
  .conversion-kicker { align-items: flex-start; font-size: 10.5px; line-height: 1.6; text-align: left; }
  .conversion-kicker > span { flex: 0 0 auto; margin-top: 7px; }
  .conversion-reduction { width: 100%; justify-content: space-between; gap: 6px; padding: 10px; }
  .conversion-reduction > div { min-width: 51px; }
  .conversion-reduction strong { font-size: 18px; }
  .conversion-reduction .is-now { min-width: 58px; }
  .conversion-hero-actions { display: grid; width: 100%; }
  .conversion-hero-actions .button { width: 100%; }
  .conversion-no-hype { text-align: left; }
  .conversion-proof-bar { gap: 8px 14px; padding: 18px 5px 21px; font-size: 9.5px; }
  .conversion-proof-bar b { font-size: 11px; }
  .brand-film-section { padding: 76px 14px; }
  .conversion-section-heading { margin-bottom: 28px; }
  .conversion-section-heading h2,
  .conversion-truth-copy h2,
  .conversion-value-intro h2,
  .conversion-final-section h2 { font-size: clamp(30px, 9vw, 42px); }
  .conversion-section-heading br,
  .conversion-truth-copy br,
  .conversion-value-intro br { display: none; }
  .brand-film-poster { border-radius: 16px; }
  .brand-film-play { width: 66px; height: 66px; }
  .brand-film-timeline { grid-template-columns: 1fr; }
  .brand-film-timeline > div { padding-right: 0; }
  .conversion-truth-section { width: min(100% - 28px,1200px); padding: 78px 0; gap: 42px; }
  .conversion-truth-visual { grid-template-columns: 1fr; gap: 18px; width: 100%; }
  .truth-browser { min-height: 315px; }
  .truth-browser.is-before,
  .truth-browser.is-after { transform: none; }
  .conversion-journey-section,
  .conversion-value-section { padding: 78px 14px; }
  .conversion-journey-grid { grid-template-columns: 1fr; }
  .conversion-journey-grid article { min-height: 285px; }
  .journey-number { margin-bottom: 32px; }
  .conversion-honesty-section { grid-template-columns: 1fr; width: min(100% - 28px,1100px); margin: 72px auto; padding: 28px 22px; }
  .conversion-honesty-mark { width: 58px; height: 58px; border-radius: 18px; }
  .conversion-honesty-section h2 { font-size: 28px; }
  .conversion-final-section { width: min(100% - 28px,1200px); padding: 67px 19px; border-radius: 25px; }
  .conversion-final-actions { display: grid; }
  .conversion-final-actions .button { width: 100%; }
  .brand-film-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .brand-film-dialog-shell { border-radius: 16px; }
  .brand-film-dialog-head strong { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-film-dialog video { max-height: calc(100dvh - 205px); }
  .brand-film-dialog-foot { display: grid; gap: 10px; }
  .brand-film-dialog-foot .button { width: 100%; }
}

@media (max-width: 430px) {
  .conversion-hero-copy h1 { font-size: 40px; }
  .conversion-reduction span { font-size: 8.5px; }
  .conversion-reduction strong { font-size: 16px; }
  .conversion-proof-bar span { width: calc(50% - 8px); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-film-poster img,
  .brand-film-play { transition: none; }
}

/* Family learning request deletion */
.family-request-list .family-request-item{grid-template-columns:auto minmax(0,1fr) auto auto}
.family-request-delete{margin:0}
.family-request-delete .button{min-height:34px;padding:7px 11px}
.family-request-delete .button:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.family-request-note{margin:3px 0 0;color:#64748b;font-size:11px;line-height:1.6}
@media(max-width:720px){.family-request-list .family-request-item{grid-template-columns:auto 1fr auto}.family-request-list .family-request-item>strong{grid-column:2/4}.family-request-delete{grid-column:3;grid-row:1}}

/* V98: 最終目標連動計画・Grok手書き採点 */
.learning-plan-options{margin:14px 0 4px;border:1px solid rgba(27,63,116,.14);border-radius:16px;background:rgba(247,250,255,.84);padding:12px 14px}.learning-plan-options summary{cursor:pointer;font-weight:800;color:var(--blue-deep)}.learning-plan-options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.learning-plan-options-grid label{display:grid;gap:6px;font-size:13px;font-weight:800;color:var(--navy)}.learning-plan-options-grid .is-wide{grid-column:1/-1}.learning-plan-options-grid input,.learning-plan-options-grid select{width:100%;min-height:44px;border:1px solid rgba(27,63,116,.18);border-radius:11px;padding:9px 11px;background:#fff;color:var(--navy);font:inherit}.learning-plan-options p{margin:10px 0 0;font-size:12px;color:var(--slate)}
.adaptive-plan-board{display:grid;gap:18px;margin:28px 0;padding:clamp(22px,4vw,38px);border-radius:28px;background:linear-gradient(145deg,#fff,#f4f8ff)}.adaptive-plan-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}.adaptive-plan-head h2{margin:7px 0;font-size:clamp(24px,3vw,34px)}.adaptive-plan-head p{margin:0;color:#63728b;line-height:1.75}.adaptive-plan-source{padding:8px 12px;border-radius:999px;background:#132340;color:#fff;font-size:12px;font-weight:900;white-space:nowrap}.adaptive-goal-card{display:grid;gap:8px;padding:18px 20px;border-radius:18px;background:#132340;color:#fff}.adaptive-goal-card>span{display:flex;gap:7px;align-items:center;color:#afc7ff;font-size:12px;font-weight:900}.adaptive-goal-card>strong{font-size:clamp(18px,2.6vw,26px);line-height:1.55}.adaptive-plan-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.adaptive-plan-metrics>div{display:grid;gap:4px;padding:14px;border:1px solid #dce7f7;border-radius:15px;background:#fff}.adaptive-plan-metrics span{color:#68768b;font-size:11px;font-weight:800}.adaptive-plan-metrics strong{font-size:18px;color:#152846}.adaptive-alert{display:grid;gap:5px;padding:16px 18px;border-radius:16px;border:1px solid #cae8d9;background:#effbf5}.adaptive-alert strong{font-size:15px}.adaptive-alert span{color:#4c6471;line-height:1.6}.adaptive-alert.is-info{border-color:#cbdcff;background:#eff5ff}.adaptive-alert.is-warning{border-color:#ecd7a4;background:#fff8e8}.adaptive-alert.is-danger{border-color:#efc1bb;background:#fff1ef}.adaptive-extension-form{margin-top:8px}.adaptive-day-list{display:grid;gap:10px}.adaptive-day-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;align-items:center;padding:15px;border:1px solid #dce7f7;border-radius:17px;background:#fff}.adaptive-day-row.is-done{background:#f2fbf7}.adaptive-day-row.is-missed{background:#fff8f1}.adaptive-day-date{display:grid;justify-items:center;padding:8px;border-radius:13px;background:#edf3ff}.adaptive-day-date small{color:#5270a5;font-size:9px;font-weight:900}.adaptive-day-date strong{font-size:24px;color:#1e4fb9}.adaptive-day-date span{font-size:10px;color:#66758b}.adaptive-day-body{min-width:0}.adaptive-day-body>div{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.adaptive-day-body h3{margin:7px 0 5px;font-size:16px;line-height:1.45}.adaptive-day-body p{margin:0;color:#65738a;font-size:12px;line-height:1.6}.carryover-badge{padding:5px 9px;border-radius:999px;background:#fff0d1;color:#976000;font-size:10px;font-weight:900}.adaptive-day-action form{margin:0}.status-chip.missed{background:#fff0dc;color:#a25200}.practice-goal-connection{display:grid;gap:5px;margin:17px 0 0;padding:13px 15px;border-left:4px solid #2764ff;border-radius:0 13px 13px 0;background:#eef4ff;color:#475f84}.practice-goal-connection strong{color:#2458d6;font-size:11px}.practice-ai-reading,.practice-ai-feedback-grid,.practice-answer-guide,.practice-result-card>.notice{grid-column:1/-1}.practice-ai-reading{padding:17px;border-radius:16px;background:#f2f7ff}.practice-ai-reading strong{display:block;margin-bottom:7px;color:#2458d6}.practice-ai-reading p{margin:0;line-height:1.8}.practice-ai-feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.practice-ai-feedback-grid>div{padding:16px;border-radius:16px;background:#f1faf6}.practice-ai-feedback-grid>div+div{background:#fff8e9}.practice-ai-feedback-grid strong{display:block;margin-bottom:8px}.practice-ai-feedback-grid ul{margin:0;padding-left:20px}.practice-ai-feedback-grid li{margin:5px 0;line-height:1.55}.practice-answer-guide{padding:14px 16px;border:1px solid #dce6f5;border-radius:15px;background:#fff}.practice-answer-guide summary{cursor:pointer;font-weight:900}.practice-answer-guide p{line-height:1.7}.notice.warning{padding:14px 16px;border:1px solid #efd2a4;border-radius:14px;background:#fff8e9;color:#765516}.center{text-align:center}
@media(max-width:760px){.learning-plan-options-grid{grid-template-columns:1fr}.learning-plan-options-grid .is-wide{grid-column:auto}.adaptive-plan-head{grid-template-columns:1fr}.adaptive-plan-source{justify-self:start}.adaptive-plan-metrics{grid-template-columns:1fr 1fr}.adaptive-day-row{grid-template-columns:68px 1fr}.adaptive-day-action{grid-column:1/-1}.adaptive-day-action .button{width:100%}.practice-ai-feedback-grid{grid-template-columns:1fr}}
@media(max-width:430px){.adaptive-plan-metrics{grid-template-columns:1fr}.adaptive-day-row{grid-template-columns:1fr}.adaptive-day-date{grid-template-columns:auto auto 1fr;gap:7px;justify-items:start;align-items:center}.adaptive-day-date strong{font-size:18px}.adaptive-day-action{grid-column:auto}}
.search-plan-preview{display:grid;gap:16px;margin:20px 0;padding:22px;border-radius:22px;background:linear-gradient(145deg,#fff,#f3f7ff)}.search-plan-preview h2{margin:7px 0;font-size:clamp(21px,3vw,29px)}.search-plan-preview p{margin:0;color:#62718a;line-height:1.7}.search-plan-preview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.search-plan-preview-metrics>span{display:grid;gap:3px;padding:12px;border:1px solid #dce6f5;border-radius:13px;background:#fff}.search-plan-preview-metrics small{color:#718097;font-size:10px}.search-plan-preview-metrics strong{color:#17335e;font-size:16px}@media(max-width:680px){.search-plan-preview-metrics{grid-template-columns:1fr 1fr}}

/* ============================================================
   V98.3 Cinematic loading system + video-method handwriting sheet
   ============================================================ */
html.page-loading-active,
body.page-loading-active {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.page-transition-overlay {
  --loader-accent: #2764ff;
  --loader-accent-2: #43c5b8;
  --loader-warm: #ffd36a;
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(88,132,255,.19), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(73,209,190,.17), transparent 31%),
    radial-gradient(circle at 50% 92%, rgba(255,203,105,.19), transparent 34%),
    #f6f9ff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
  isolation: isolate;
}
html.is-page-booting .page-transition-overlay,
.page-transition-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.page-loader-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-loader-sky::before,
.page-loader-sky::after {
  content: "";
  position: absolute;
  width: min(68vw, 760px);
  aspect-ratio: 1;
  border-radius: 42% 58% 63% 37% / 44% 38% 62% 56%;
  filter: blur(1px);
  opacity: .42;
  animation: pageLoaderBlob 13s ease-in-out infinite alternate;
}
.page-loader-sky::before {
  left: -22%;
  top: -34%;
  background: linear-gradient(145deg, rgba(60,104,255,.22), rgba(114,221,207,.08));
}
.page-loader-sky::after {
  right: -24%;
  bottom: -40%;
  background: linear-gradient(145deg, rgba(255,197,83,.24), rgba(140,103,255,.09));
  animation-delay: -5s;
}
.page-loader-sky > span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.23), 0 0 28px rgba(68,111,255,.22);
  animation: pageLoaderStar 3.4s ease-in-out infinite;
}
.page-loader-sky > span:nth-child(1){left:11%;top:24%;animation-delay:-.7s}
.page-loader-sky > span:nth-child(2){right:14%;top:29%;width:5px;height:5px;animation-delay:-1.9s}
.page-loader-sky > span:nth-child(3){left:18%;bottom:18%;width:4px;height:4px;animation-delay:-2.6s}
.page-loader-sky > span:nth-child(4){right:20%;bottom:16%;animation-delay:-1.2s}
@keyframes pageLoaderBlob {
  from { transform: translate3d(-2%, -1%, 0) rotate(-5deg) scale(.96); }
  to { transform: translate3d(5%, 4%, 0) rotate(9deg) scale(1.08); }
}
@keyframes pageLoaderStar {
  0%,100% { transform: scale(.72); opacity: .35; }
  50% { transform: scale(1.22); opacity: 1; }
}
.page-loader-card {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(680px, 100%);
  max-height: calc(100dvh - 34px);
  gap: 17px;
  padding: clamp(24px, 5vw, 43px);
  overflow: hidden auto;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: clamp(26px, 5vw, 42px);
  background: rgba(255,255,255,.94);
  box-shadow: 0 34px 90px rgba(26,52,103,.18), 0 8px 25px rgba(38,72,140,.08), inset 0 1px 0 #fff;
  transform: translateY(12px) scale(.985);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
html.is-page-booting .page-loader-card,
.page-transition-overlay.is-visible .page-loader-card { transform: translateY(0) scale(1); }
.page-loader-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--loader-accent), var(--loader-accent-2), var(--loader-warm), var(--loader-accent));
  background-size: 240% 100%;
  animation: pageLoaderRibbon 3.2s linear infinite;
}
.page-loader-card.theme-sunrise { --loader-accent:#ef6a52;--loader-accent-2:#ffad5b;--loader-warm:#6fc7c0; }
.page-loader-card.theme-candy { --loader-accent:#8659f4;--loader-accent-2:#ef6da8;--loader-warm:#55c8e8; }
.page-loader-card.theme-night { --loader-accent:#244eae;--loader-accent-2:#24a99a;--loader-warm:#d6a744; }
@keyframes pageLoaderRibbon { to { background-position: -240% 0; } }
.page-loader-mark {
  position: relative;
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  margin: 1px auto 0;
}
.page-loader-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(145deg, var(--loader-accent), var(--loader-accent-2));
  color: #fff;
  box-shadow: 0 16px 30px color-mix(in srgb, var(--loader-accent) 27%, transparent);
  font-size: 21px;
  transform: rotate(-4deg);
  animation: pageLoaderCore 2.4s ease-in-out infinite;
}
.page-loader-mark i {
  position: absolute;
  inset: 7px;
  border: 1px dashed color-mix(in srgb, var(--loader-accent) 30%, transparent);
  border-radius: 50%;
  animation: pageLoaderOrbit 7s linear infinite;
}
.page-loader-mark i:nth-of-type(2) { inset: 0; border-style: solid; border-color: color-mix(in srgb, var(--loader-accent-2) 22%, transparent); animation-duration: 10s; animation-direction: reverse; }
.page-loader-mark i:nth-of-type(3) { inset: 19px; border-style: dotted; border-width: 2px; border-color: color-mix(in srgb, var(--loader-warm) 45%, transparent); animation-duration: 4.8s; }
@keyframes pageLoaderCore { 0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(3deg)} }
@keyframes pageLoaderOrbit { to { transform: rotate(360deg); } }
.page-loader-copy { display:grid; gap:8px; text-align:center; }
.page-loader-kicker {
  color: var(--loader-accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .17em;
}
.page-loader-copy h2 {
  margin: 0;
  color: var(--navy, #132340);
  font-size: clamp(23px, 4.8vw, 34px);
  line-height: 1.35;
  letter-spacing: -.025em;
}
.page-loader-copy p {
  max-width: 47em;
  margin: 0 auto;
  color: var(--slate, #64748b);
  font-size: clamp(13px, 2.7vw, 15px);
  line-height: 1.8;
}
.page-loader-journey {
  display: grid;
  grid-template-columns: auto minmax(18px,1fr) auto minmax(18px,1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(490px, 100%);
  margin: 2px auto 0;
}
.page-loader-journey > div { display:grid; justify-items:center; gap:5px; color:#9aa8bb; transition:.24s; }
.page-loader-journey b {
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid #d9e2ef;
  border-radius:12px;
  background:#fff;
  font-size:12px;
  box-shadow:0 5px 13px rgba(25,55,105,.06);
}
.page-loader-journey span { font-size:10px; font-weight:850; white-space:nowrap; }
.page-loader-journey > i { height:2px; overflow:hidden; border-radius:999px; background:#e7edf6; }
.page-loader-journey > i::after { content:"";display:block;width:55%;height:100%;background:linear-gradient(90deg,transparent,var(--loader-accent),transparent);animation:pageLoaderLine 1.6s linear infinite; }
.page-loader-journey > div.is-active { color:var(--loader-accent); transform:translateY(-2px); }
.page-loader-journey > div.is-active b { border-color:color-mix(in srgb,var(--loader-accent) 40%,#fff); background:color-mix(in srgb,var(--loader-accent) 9%,#fff); box-shadow:0 8px 17px color-mix(in srgb,var(--loader-accent) 15%,transparent); }
@keyframes pageLoaderLine { from{transform:translateX(-120%)}to{transform:translateX(250%)} }
.page-loader-progress { height:9px; overflow:hidden; border-radius:999px; background:#e9eef6; box-shadow:inset 0 1px 2px rgba(24,47,90,.08); }
.page-loader-progress > span { display:block;width:8%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--loader-accent),var(--loader-accent-2),var(--loader-warm),var(--loader-accent));background-size:220% 100%;transition:width .3s ease-out;animation:pageLoaderRibbon 2.3s linear infinite; }
.page-loader-live { display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--slate,#64748b);font-size:12px; }
.page-loader-live > span { display:flex;align-items:center;min-width:0;gap:8px; }
.page-loader-live > span > i { width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--loader-accent-2);box-shadow:0 0 0 0 color-mix(in srgb,var(--loader-accent-2) 42%,transparent);animation:pageLoaderPulse 1.3s ease-out infinite; }
.page-loader-live b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--navy-soft,#233a5e); }
.page-loader-live small { white-space:nowrap; }
@keyframes pageLoaderPulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--loader-accent-2) 42%,transparent)}80%,100%{box-shadow:0 0 0 10px transparent} }
.page-loader-phrase {
  min-height: 46px;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid color-mix(in srgb, var(--loader-accent) 12%, #e3eaf4);
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb,var(--loader-accent) 5%,#fff), #fff);
  color: #53647d;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.7;
  text-align: center;
}
.page-loader-cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
.page-loader-cards > span { display:grid;justify-items:center;gap:4px;padding:11px 8px;border:1px solid #e0e7f1;border-radius:15px;background:#fff;box-shadow:0 7px 17px rgba(27,56,103,.05);animation:pageLoaderCards 2.7s ease-in-out infinite; }
.page-loader-cards > span:nth-child(2){animation-delay:-.9s}.page-loader-cards > span:nth-child(3){animation-delay:-1.8s}
.page-loader-cards b { display:grid;width:29px;height:29px;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--loader-accent) 9%,#fff);color:var(--loader-accent);font-size:14px; }
.page-loader-cards small { color:#718096;font-size:10px;font-weight:850; }
@keyframes pageLoaderCards { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} }

/* The question is printed inside the same visual sheet as the handwriting area. */
.handwriting-paper { overflow: hidden; }
.handwriting-problem-print {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 4vw, 28px);
  border-bottom: 2px solid #dbe5f2;
  background:
    linear-gradient(90deg, rgba(39,100,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(39,100,255,.04) 1px, transparent 1px),
    linear-gradient(145deg,#fbfdff,#f4f8ff);
  background-size: 24px 24px,24px 24px,auto;
}
.handwriting-problem-print > span {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: #132340;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
}
.handwriting-problem-print > strong {
  color: #132340;
  font-size: clamp(21px, 4.2vw, 31px);
  line-height: 1.65;
  letter-spacing: .01em;
}
.handwriting-problem-print > p {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #cfe0ff;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  color: #536886;
  font-size: 12px;
  line-height: 1.65;
}
.handwriting-problem-print > p b { flex:0 0 auto;color:#2458d6; }
.handwriting-canvas-wrap { position: relative; background:#fff; }
.handwriting-canvas-wrap canvas { display:block;width:100%;height:auto;touch-action:none;cursor:crosshair; }
.handwriting-canvas-wrap > span { position:absolute;left:20px;top:18px;color:#b1bdce;pointer-events:none;font-weight:750; }
.handwriting-canvas-wrap::before {
  content: "こたえ";
  position: absolute;
  right: 16px;
  top: 14px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(238,244,255,.9);
  color: #6680aa;
  font-size: 10px;
  font-weight: 900;
  pointer-events: none;
}

@media (max-width: 560px) {
  .page-transition-overlay { padding: 10px; }
  .page-loader-card { gap: 13px; padding: 24px 17px 20px; border-radius: 27px; }
  .page-loader-mark { width:76px;height:76px; }
  .page-loader-core { width:48px;height:48px;border-radius:16px; }
  .page-loader-copy h2 { font-size: 23px; }
  .page-loader-copy p { font-size: 12.5px;line-height:1.7; }
  .page-loader-journey span { font-size:9px; }
  .page-loader-journey b { width:30px;height:30px;border-radius:10px; }
  .page-loader-phrase { min-height:42px;padding:9px 10px;font-size:11.5px; }
  .page-loader-cards > span { padding:8px 5px; }
  .handwriting-problem-print { padding:17px 15px; }
  .handwriting-problem-print > strong { font-size:20px;line-height:1.6; }
  .handwriting-problem-print > p { display:grid;gap:3px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader-sky::before,.page-loader-sky::after,.page-loader-sky>span,.page-loader-card::before,.page-loader-core,.page-loader-mark i,.page-loader-journey>i::after,.page-loader-progress>span,.page-loader-live>span>i,.page-loader-cards>span { animation:none !important; }
  .page-loader-card,.page-transition-overlay { transition:none !important; }
}

/* ============================================================
   V98.6 iPad-safe loading, guardian progress and today-first UI
   ============================================================ */

/* Loading health and deterministic recovery state */
.page-loader-health {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:9px 12px;
  border:1px solid #dce8f7;
  border-radius:13px;
  background:#f5f9ff;
  color:#405672;
  font-size:11px;
  line-height:1.45;
}
.page-loader-health > span {
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:#20ad8f;
  box-shadow:0 0 0 5px rgba(32,173,143,.12);
  animation:pageLoaderHealth 1.4s ease-in-out infinite;
}
.page-loader-health b { font-weight:850; }
@keyframes pageLoaderHealth { 50% { transform:scale(.72);opacity:.55; } }
.page-loader-recovery {
  display:grid;
  gap:8px;
  padding:16px;
  border:1px solid #efc1bb;
  border-radius:16px;
  background:#fff4f2;
  color:#662e2b;
  text-align:left;
}
.page-loader-recovery[hidden] { display:none !important; }
.page-loader-recovery strong { font-size:16px; }
.page-loader-recovery p { margin:0;color:#81524d;font-size:12px;line-height:1.65; }
.page-loader-recovery .button { justify-self:start; }
.page-transition-overlay.has-error .page-loader-health { border-color:#efc1bb;background:#fff7f5;color:#7e3933; }
.page-transition-overlay.has-error .page-loader-health > span { background:#df5d50;box-shadow:0 0 0 5px rgba(223,93,80,.12);animation:none; }
.page-transition-overlay.is-timeout .page-loader-health { border-color:#ebd6a4;background:#fff9e9;color:#71520c; }
.page-transition-overlay.is-timeout .page-loader-health > span { background:#d59b1a;box-shadow:0 0 0 5px rgba(213,155,26,.13); }
.page-transition-overlay.has-error .page-loader-phrase,
.page-transition-overlay.has-error .page-loader-cards { display:none; }
@supports not (height:100dvh) {
  .page-transition-overlay { min-height:100vh; }
}

/* One safe assistance dock replaces two independent fixed buttons. */
.child-assist-dock {
  position:fixed;
  z-index:550;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  gap:10px;
  max-width:calc(100vw - max(28px,env(safe-area-inset-left) + env(safe-area-inset-right)));
  pointer-events:none;
}
.has-mobile-tabbar .child-assist-dock {
  bottom:calc(76px + env(safe-area-inset-bottom));
}
.child-assist-dock .guide-fab,
.child-assist-dock .child-read-aloud {
  position:static;
  inset:auto;
  z-index:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:112px;
  min-height:50px;
  max-width:190px;
  margin:0;
  padding:11px 15px;
  border:2px solid #fff;
  border-radius:999px;
  box-shadow:0 12px 32px rgba(15,35,70,.24);
  white-space:nowrap;
  line-height:1.15;
  font-size:14px;
  font-weight:900;
  pointer-events:auto;
  touch-action:manipulation;
}
.child-assist-dock .child-read-aloud { background:#132340;color:#fff; }
.child-assist-dock .child-read-aloud.is-speaking { background:#0c816b; }
.child-assist-dock .child-read-aloud:disabled { opacity:.5;cursor:not-allowed; }
.child-assist-dock .guide-fab { background:linear-gradient(135deg,#2764ff,#6048df);color:#fff; }
.mobile-keyboard-open .child-assist-dock { opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px); }
.child-assist-dock { transition:opacity .16s ease,transform .16s ease,visibility .16s ease; }

/* Parent-facing progress dashboard: all dimensions are fed from real records. */
.guardian-progress-dashboard {
  display:grid;
  gap:16px;
  margin:22px 0;
  padding:clamp(16px,3vw,26px);
  border:1px solid #dce8f7;
  border-radius:24px;
  background:linear-gradient(145deg,#f9fbff,#f2f8ff);
}
.guardian-progress-message {
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 16px;
  border:1px solid #d5ebdf;
  border-radius:17px;
  background:#f2fbf6;
}
.guardian-progress-message > span { font-size:28px; }
.guardian-progress-message strong { display:block;color:#164c3d;font-size:17px; }
.guardian-progress-message p { margin:3px 0 0;color:#537167;font-size:12px;line-height:1.55; }
.guardian-progress-overview {
  display:grid;
  grid-template-columns:minmax(190px,.72fr) minmax(300px,1.45fr) minmax(220px,1fr);
  gap:13px;
}
.guardian-ring-card,.guardian-week-card,.guardian-plan-card {
  min-width:0;
  padding:17px;
  border:1px solid #dce6f4;
  border-radius:19px;
  background:#fff;
}
.guardian-ring-card { display:grid;place-items:center;align-content:center;gap:9px;text-align:center; }
.guardian-progress-ring {
  --progress:0;
  position:relative;
  display:grid;
  width:132px;
  aspect-ratio:1;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(#2764ff calc(var(--progress) * 1%),#e7eef9 0);
}
.guardian-progress-ring::before { content:"";position:absolute;inset:11px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #edf1f7; }
.guardian-progress-ring > div { position:relative;display:grid;place-items:center;line-height:1.05; }
.guardian-progress-ring strong { color:#173662;font-size:30px; }
.guardian-progress-ring strong small { font-size:13px; }
.guardian-progress-ring span { margin-top:5px;color:#6b7a91;font-size:10px;font-weight:850; }
.guardian-ring-card > p { margin:0;color:#64748b;font-size:11px; }
.guardian-ring-card > p b { color:#173662;font-size:15px; }
.guardian-card-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
.guardian-card-heading > div { display:grid;gap:3px; }
.guardian-card-heading span,.guardian-card-heading small { color:#718097;font-size:10px;font-weight:750; }
.guardian-card-heading strong { color:#173662;font-size:17px; }
.guardian-week-chart {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  height:142px;
  margin-top:13px;
  align-items:end;
}
.guardian-week-chart > div { display:grid;grid-template-rows:92px auto auto;gap:3px;min-width:0;text-align:center; }
.guardian-week-chart > div > span { position:relative;display:flex;height:92px;align-items:flex-end;justify-content:center;border-radius:8px;background:#f1f5fb;overflow:hidden; }
.guardian-week-chart i { display:block;width:min(22px,72%);min-height:4px;border-radius:7px 7px 3px 3px;background:#cdd9eb;transition:height .45s ease; }
.guardian-week-chart .is-active i { background:linear-gradient(180deg,#5d86ff,#2764ff); }
.guardian-week-chart b { color:#40536f;font-size:10px; }
.guardian-week-chart small { overflow:hidden;color:#7a8799;font-size:8px;text-overflow:ellipsis;white-space:nowrap; }
.guardian-plan-card { display:grid;align-content:center;gap:13px; }
.guardian-plan-meter { height:14px;overflow:hidden;border-radius:999px;background:#e8eef7; }
.guardian-plan-meter span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#27ad8c,#4bc7a7);transition:width .5s ease; }
.guardian-plan-counts { display:flex;flex-wrap:wrap;gap:10px;color:#607087;font-size:10px;font-weight:800; }
.guardian-plan-counts span { display:flex;align-items:center;gap:5px; }
.guardian-plan-counts i { width:9px;height:9px;border-radius:3px;background:#e3eaf4; }
.guardian-plan-counts i.is-done { background:#32b18f; }
.guardian-progress-details { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);gap:13px; }
.guardian-mini-stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.guardian-mini-stats > div { display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon value" "icon label";gap:0 8px;align-items:center;padding:12px;border:1px solid #e0e8f3;border-radius:15px;background:#fff; }
.guardian-mini-stats > div > span { grid-area:icon;font-size:20px; }
.guardian-mini-stats b { grid-area:value;color:#173662;font-size:17px; }
.guardian-mini-stats small { grid-area:label;color:#728097;font-size:9px; }
.guardian-activity-calendar { display:grid;gap:8px;padding:14px;border:1px solid #e0e8f3;border-radius:17px;background:#fff; }
.guardian-activity-calendar > strong { color:#263b5c;font-size:12px; }
.guardian-activity-calendar > div { display:grid;grid-template-columns:repeat(7,1fr);gap:5px; }
.guardian-activity-calendar span { display:grid;aspect-ratio:1;place-items:center;border-radius:8px;background:#edf2f8;color:#738197;font-size:9px;font-weight:800; }
.guardian-activity-calendar span.is-active { background:#d8f4e9;color:#08745c; }
.guardian-activity-calendar span.is-today { outline:2px solid #2764ff;outline-offset:1px; }
.guardian-activity-calendar > small { color:#78869a;font-size:9px; }
.guardian-skill-insights { grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.guardian-skill-insights > div { padding:15px;border:1px solid #e0e8f3;border-radius:17px;background:#fff; }
.guardian-skill-insights strong { color:#263b5c;font-size:12px; }
.guardian-skill-insights ul { display:grid;gap:7px;margin:10px 0 0;padding:0;list-style:none; }
.guardian-skill-insights li { display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:#f5f8fc;font-size:11px; }
.guardian-skill-insights li small { color:#2764ff;font-weight:900; }
.guardian-skill-insights p { margin:9px 0 0;color:#728097;font-size:11px;line-height:1.6; }
.guardian-growth { grid-column:1/-1;display:flex;align-items:center;gap:9px;margin:0;padding:12px 14px;border-radius:14px;background:#f2f8ff;color:#365272;font-size:12px;font-weight:800; }
.guardian-growth > span { display:grid;width:26px;height:26px;place-items:center;border-radius:9px;background:#fff;color:#2764ff;font-size:17px; }
.guardian-growth.is-positive { background:#effaf5;color:#286653; }

/* Child home: only today is prominent; all dates remain available as read-only context. */
.child-today-focused { max-width:1180px; }
.child-today-board,.child-completed-today,.child-future-schedule {
  border:1px solid #dce7f5;
  border-radius:25px;
  background:#fff;
  box-shadow:0 16px 42px rgba(27,59,110,.07);
}
.child-today-board { display:grid;gap:18px;padding:clamp(20px,4vw,34px); }
.child-today-board .section-heading { align-items:center; }
.child-today-task-list { display:grid;gap:14px; }
.child-today-task {
  display:grid;
  grid-template-columns:70px minmax(0,1fr) auto;
  gap:17px;
  align-items:center;
  padding:18px;
  border:2px solid #dbe6f8;
  border-radius:21px;
  background:linear-gradient(145deg,#fff,#f7faff);
}
.child-today-task.has-carryover { border-color:#efd9a6;background:linear-gradient(145deg,#fff,#fff9eb); }
.child-task-order { display:grid;width:58px;aspect-ratio:1;place-items:center;align-content:center;border-radius:18px;background:#2764ff;color:#fff; }
.child-task-order small { font-size:8px;font-weight:850; }
.child-task-order strong { font-size:25px;line-height:1; }
.child-task-copy { min-width:0; }
.child-task-copy h3 { margin:7px 0 5px;color:#172f55;font-size:clamp(19px,2.5vw,27px);line-height:1.4; }
.child-task-copy > p { margin:0;color:#5c6d84;line-height:1.65; }
.child-today-label,.child-carryover-label { display:inline-flex;padding:5px 9px;border-radius:999px;background:#eaf1ff;color:#2458d6;font-size:10px;font-weight:900; }
.child-carryover-label { background:#fff0cf;color:#8a5b00; }
.child-task-meta { display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:11px;color:#576a84;font-size:11px;font-weight:750; }
.child-task-meta span { display:inline-flex;align-items:center;gap:5px; }
.child-task-action form { margin:0; }
.child-task-action .button { min-height:52px; }
.child-today-complete { display:grid;justify-items:center;gap:7px;padding:32px 20px;border:2px dashed #bfdcca;border-radius:20px;background:#f2fbf6;text-align:center; }
.child-today-complete > span { font-size:42px; }
.child-today-complete h3 { margin:0;color:#195742;font-size:23px; }
.child-today-complete p { margin:0;color:#5e776e; }
.child-completed-today { display:grid;gap:13px;padding:20px 24px; }
.child-completed-today > div:last-child { display:flex;flex-wrap:wrap;gap:8px; }
.child-completed-today > div:last-child > span { display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:12px;background:#effaf5;color:#25705a;font-size:12px;font-weight:850; }
.child-future-schedule,.child-route-future { overflow:hidden; }
.child-future-schedule > summary,.child-route-future > summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 21px;
  cursor:pointer;
  list-style:none;
  color:#263d61;
  font-weight:900;
}
.child-future-schedule > summary::-webkit-details-marker,.child-route-future > summary::-webkit-details-marker { display:none; }
.child-future-schedule > summary > span,.child-route-future > summary > span { display:inline-flex;align-items:center;gap:8px; }
.child-future-schedule > summary small,.child-route-future > summary small { color:#718098;font-size:10px; }
.child-future-schedule-body { display:grid;gap:15px;padding:0 21px 21px; }
.child-future-schedule-body > section { padding:15px;border-radius:16px;background:#f6f8fc; }
.child-future-schedule-body h3 { margin:0 0 4px; }
.child-future-schedule-body section > p { margin:0 0 10px;color:#64748b;font-size:11px; }
.child-future-schedule ol,.child-route-future ol { display:grid;gap:6px;margin:0;padding:0;list-style:none; }
.child-future-schedule li,.child-route-future li { display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:#fff;color:#52627a;font-size:11px; }
.child-future-schedule li.is-today,.child-route-future li.is-today { background:#eaf1ff;color:#234f9f; }
.child-future-schedule li.is-future,.child-route-future li.is-future { opacity:.78; }
.child-future-schedule li time,.child-route-future li time { font-weight:900; }
.child-future-schedule li small,.child-route-future li small { color:#78869a;font-size:9px; }
.child-future-note,.child-route-future > p { margin:0;padding:11px 13px;border-radius:12px;background:#fff7e8;color:#735516;font-size:11px;line-height:1.6; }


/* Family permissions: child self-search and external YouTube hand-off. */
.child-free-search {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  gap:22px;
  align-items:center;
  padding:clamp(22px,4vw,36px);
  scroll-margin-top:110px;
  border:1px solid #d6e3f6;
  border-radius:26px;
  background:radial-gradient(circle at 4% 4%,rgba(70,200,161,.16),transparent 34%),linear-gradient(135deg,#f9fffc,#f1f6ff);
  box-shadow:0 16px 42px rgba(27,59,110,.07);
}
.child-free-search.is-locked { grid-template-columns:minmax(0,1fr) minmax(280px,.65fr);background:linear-gradient(135deg,#fbfcff,#f4f6fa); }
.child-free-search-copy h2 { margin:7px 0 10px;color:#172f55;font-size:clamp(23px,3vw,34px);line-height:1.35; }
.child-free-search-copy > p { margin:0;color:#5d6e86;line-height:1.75; }
.child-permission-status { display:flex;flex-wrap:wrap;gap:8px;margin-top:16px; }
.child-permission-status span { display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;font-size:11px;font-weight:900; }
.child-permission-status .is-on { background:#e8f9f2;color:#116a54; }
.child-permission-status .is-off { background:#edf1f7;color:#62718a; }
.child-free-search-form { display:grid;gap:13px;padding:20px;border:1px solid rgba(202,218,241,.92);border-radius:21px;background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(26,60,115,.08); }
.child-free-search-form > label,.child-search-time legend { color:#203a63;font-size:12px;font-weight:900; }
.child-free-search-form textarea { min-height:92px;resize:vertical;border:2px solid #cddcf2;border-radius:16px;background:#fff;font-size:17px;line-height:1.65; }
.child-free-search-form textarea:focus { border-color:#517cff;box-shadow:0 0 0 4px rgba(81,124,255,.13); }
.child-search-examples { display:flex;flex-wrap:wrap;gap:7px; }
.child-search-examples button { min-height:36px;padding:7px 12px;border:1px solid #d7e2f3;border-radius:999px;background:#f5f8fd;color:#35557e;font-weight:850;cursor:pointer; }
.child-search-examples button:hover,.child-search-examples button:focus-visible { border-color:#6f91f7;background:#edf3ff; }
.child-search-time { margin:0;padding:0;border:0; }
.child-search-time > div { display:flex;flex-wrap:wrap;gap:8px;margin-top:7px; }
.child-search-time label { cursor:pointer; }
.child-search-time input { position:absolute;opacity:0;pointer-events:none; }
.child-search-time input + span { display:inline-flex;min-width:58px;justify-content:center;padding:8px 12px;border:1px solid #d4dfef;border-radius:12px;background:#fff;color:#50627d;font-size:12px;font-weight:900; }
.child-search-time input:checked + span { border-color:#2764ff;background:#2764ff;color:#fff;box-shadow:0 7px 16px rgba(39,100,255,.2); }
.child-search-time input:focus-visible + span { outline:3px solid rgba(39,100,255,.24);outline-offset:2px; }
.child-free-search-form > small { color:#667790;font-size:11px;line-height:1.65; }
.child-free-search-locked { display:flex;align-items:center;gap:15px;padding:20px;border:1px dashed #c9d3e2;border-radius:19px;background:#fff; }
.child-free-search-locked > span { display:grid;flex:0 0 52px;width:52px;height:52px;place-items:center;border-radius:17px;background:#eef2f8;color:#60718a; }
.child-free-search-locked strong { color:#2c405f; }
.child-free-search-locked p { margin:4px 0 0;color:#697991;font-size:12px;line-height:1.65; }
.family-settings-grid .family-permission-toggle { align-items:flex-start;min-height:104px; }
.family-permission-toggle > span { display:grid;gap:5px;line-height:1.45; }
.family-permission-toggle strong { color:#21395e;font-size:12px; }
.family-permission-toggle small { color:#6c7b91;font-size:10px;font-weight:650;line-height:1.55; }
.external-youtube-open { white-space:normal;text-align:center; }
.practice-video-hint-player > .external-video-locked { margin-top:8px; }

/* Today-first route and goal-plan variants */
.child-route-today,.child-route-carryover { display:grid;gap:13px;padding:18px;border:1px solid #dce7f5;border-radius:20px;background:#fff; }
.child-route-today-head { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.child-route-today-head h3,.child-route-carryover h3 { margin:4px 0 0;font-size:22px; }
.child-route-today-head time { padding:7px 10px;border-radius:999px;background:#eef4ff;color:#2458d6;font-size:11px;font-weight:900; }
.child-route-day-list { display:grid;gap:9px; }
.child-route-complete { display:flex;align-items:center;gap:13px;padding:18px;border-radius:16px;background:#f1faf6; }
.child-route-complete > span { font-size:31px; }
.child-route-complete strong { color:#1d614c; }
.child-route-complete p { margin:4px 0 0;color:#63786f;font-size:12px; }
.child-route-carryover { background:#fffaf0;border-color:#efdfb9; }
.child-route-carryover > div:first-child > p { margin:4px 0 0;color:#766746;font-size:11px; }
.child-route-future { border:1px solid #dce7f5;border-radius:17px;background:#f8faff; }
.child-route-future ol { padding:0 16px 12px; }
.child-route-future > p { margin:0 16px 16px; }
.child-route-return { display:grid;justify-items:center;gap:8px;margin:24px 0;text-align:center; }
.child-route-return h2,.child-route-return p { margin:0; }
.child-study-plan-today,.child-plan-carryover { display:grid;gap:14px;margin-top:18px;padding:18px;border:1px solid #dce7f5;border-radius:22px;background:#f8fbff; }
.child-plan-primary { border:2px solid #7b9eff;background:#fff;box-shadow:0 14px 34px rgba(39,100,255,.1); }
.child-plan-carryover { border-color:#efdfb9;background:#fffaf0; }
.child-study-future { margin-top:16px; }

/* Responsive layout: content-based breakpoints, portrait/landscape and safe areas. */
@media (max-width:850px) {
  .child-free-search,.child-free-search.is-locked { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .child-free-search { padding:19px;border-radius:22px; }
  .child-free-search-form { padding:16px; }
  .child-free-search-form .button { width:100%; }
  .child-search-time > div { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
.child-search-time input + span { min-width:0; }
}

@media (max-width:1050px) {
  .guardian-progress-overview { grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr); }
  .guardian-plan-card { grid-column:1/-1; }
  .guardian-progress-details { grid-template-columns:1fr; }
  .guardian-skill-insights,.guardian-growth { grid-column:auto; }
}
@media (max-width:820px) {
  .guardian-progress-overview { grid-template-columns:1fr 1.45fr; }
  .guardian-plan-card { grid-column:1/-1; }
  .guardian-mini-stats { grid-template-columns:1fr 1fr; }
  .guardian-skill-insights { grid-template-columns:1fr; }
  .child-today-task { grid-template-columns:60px minmax(0,1fr); }
  .child-task-action { grid-column:1/-1; }
  .child-task-action .button { width:100%; }
  .child-future-schedule li,.child-route-future li { grid-template-columns:68px minmax(0,1fr); }
  .child-future-schedule li small,.child-route-future li small { grid-column:2; }
}
@media (max-width:620px) {
  .page-loader-health { align-items:flex-start; }
  .child-assist-dock {
    left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .child-assist-dock .guide-fab,.child-assist-dock .child-read-aloud { width:100%;min-width:0;max-width:none;min-height:48px;padding:10px 9px;font-size:13px; }
  .guardian-progress-overview { grid-template-columns:1fr; }
  .guardian-ring-card { grid-template-columns:auto 1fr;text-align:left; }
  .guardian-progress-ring { width:112px; }
  .guardian-ring-card > p { font-size:12px; }
  .guardian-plan-card { grid-column:auto; }
  .guardian-progress-message { align-items:flex-start; }
  .child-today-task { grid-template-columns:48px minmax(0,1fr);gap:12px;padding:14px; }
  .child-task-order { width:46px;border-radius:14px; }
  .child-task-copy h3 { font-size:19px; }
  .child-task-meta { display:grid; }
  .child-future-schedule > summary,.child-route-future > summary { align-items:flex-start;flex-direction:column; }
  .child-future-schedule li,.child-route-future li { grid-template-columns:1fr;gap:3px; }
  .child-future-schedule li small,.child-route-future li small { grid-column:auto; }
  .adaptive-day-row.child-route-day { grid-template-columns:1fr; }
  .adaptive-day-row.child-route-day .adaptive-day-action { grid-column:auto; }
  .adaptive-day-row.child-route-day .button { width:100%; }
}
@media (max-width:390px) {
  .guardian-mini-stats { grid-template-columns:1fr; }
  .guardian-week-chart { gap:3px; }
  .guardian-week-chart > div { grid-template-rows:82px auto auto; }
  .guardian-week-chart > div > span { height:82px; }
  .child-assist-dock .guide-fab,.child-assist-dock .child-read-aloud { font-size:12px; }
}
@media (orientation:landscape) and (max-height:560px) {
  .child-assist-dock { right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));left:auto;display:flex;width:auto; }
  .has-mobile-tabbar .child-assist-dock { bottom:max(10px,env(safe-area-inset-bottom)); }
  .child-assist-dock .guide-fab,.child-assist-dock .child-read-aloud { width:auto;min-width:104px;min-height:44px;padding:8px 12px; }
  .page-loader-card { max-height:calc(100svh - 20px);overflow:auto;overscroll-behavior:contain; }
  .page-loader-cards { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .page-loader-health > span,.guardian-progress-ring,.guardian-week-chart i,.guardian-plan-meter span,.child-assist-dock { animation:none!important;transition:none!important; }
}

/* V106: viewport-fixed drawer. Boundary is shared with app.js. */
@media (max-width: 1480px) {
  body.mobile-nav-open .site-header {
    z-index:1000;
    isolation:isolate;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  body.mobile-nav-open .site-header-inner {
    position:relative;
    z-index:1;
  }
  .nav-scrim { z-index:900; }
  .nav-toggle { display:grid; }
  .site-nav-area {
    display:flex;
    position:fixed;
    z-index:1002;
    left:auto;
    right:0;
    top:var(--site-header-bottom,calc(60px + env(safe-area-inset-top)));
    bottom:0;
    width:min(88vw,420px);
    height:auto;
    max-height:none;
    overflow-x:hidden;
    overflow-y:auto;
    padding:16px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    border:0;
    border-left:1px solid var(--border);
    border-radius:22px 0 0 0;
    background:#fff;
    box-shadow:-22px 0 60px rgba(31,42,68,.2);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(104%,0,0);
    transition:transform .23s cubic-bezier(.2,.75,.25,1),opacity .18s ease,visibility .23s ease;
    overscroll-behavior:contain;
  }
  .site-nav-area.open { display:flex;opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0); }
  .nav-toggle { position:relative;z-index:1003; }
  .site-nav { flex-direction:column;align-items:stretch;margin:0; }
  .site-nav a { padding:12px 14px;white-space:nowrap; }
  .nav-actions { flex-direction:column;align-items:stretch; }
  .nav-actions > a { text-align:center; }
  .guest-pill { justify-content:center; }
}

/* Intermediate wide-tablet/laptop spacing. */
@media (max-width: 1480px) {
  .site-header-inner { gap:12px; }
  .site-nav { gap:2px; }
  .site-nav a { padding-inline:9px; }
  .wide-tablet-header .nav-actions { gap:7px; }
}

/* Carryover remains visible, but separate from today's primary task. */
.child-home-carryover { display:grid;gap:14px;padding:20px 24px;border:1px solid #efdfb9;border-radius:22px;background:#fffaf0; }
.child-carryover-task-list { display:grid;gap:10px; }
.child-carryover-task { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border:1px solid #ead9ad;border-radius:17px;background:#fff; }
.child-carryover-task h3 { margin:7px 0 5px;color:#3f3828;font-size:19px; }
.child-carryover-task p { margin:0;color:#6e644f;line-height:1.6; }
.child-carryover-task small { display:block;margin-top:8px;color:#86775c;font-weight:750; }
.child-carryover-task form { margin:0; }
.child-assist-dock .child-read-aloud.is-unavailable { background:#69778c;color:#fff;opacity:.72;cursor:not-allowed; }
@media (max-width:820px) {
  .child-carryover-task { grid-template-columns:1fr; }
  .child-carryover-task .button { width:100%; }
}

/* A small, one-time acknowledgement when today's target is reached. */
.guardian-progress-ring.is-complete { animation:guardian-achievement .7s ease-out both; }
@keyframes guardian-achievement {
  0% { transform:scale(.94);box-shadow:0 0 0 0 rgba(39,173,140,.28); }
  55% { transform:scale(1.035);box-shadow:0 0 0 12px rgba(39,173,140,.08); }
  100% { transform:scale(1);box-shadow:0 0 0 0 rgba(39,173,140,0); }
}
@media (prefers-reduced-motion:reduce) {
  .guardian-progress-ring.is-complete { animation:none!important; }
}


/* ---------- Mobile dashboard button fixes (v99.0) ---------- */
@media (max-width: 760px) {
  .dash-layout > .dash-nav {
    display: none;
  }
  .has-mobile-tabbar .guide-fab,
  .guide-fab {
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 118px);
    max-width: calc(100vw - 24px);
  }
  .plan-chip-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .has-mobile-tabbar .guide-fab,
  .guide-fab {
    bottom: calc(env(safe-area-inset-bottom) + 132px);
    padding: 12px 15px;
  }
  .guide-fab span {
    font-size: 13px;
  }
}

/* ---------- Admin mobile navigation visibility fix (v99.2) ---------- */
@media (max-width: 1024px) {
  .admin-sidebar a {
    border-color: #f5b37f;
    background: #fff1e5;
    color: #9a3f09;
    box-shadow: 0 2px 8px rgba(154,63,9,.08);
  }
  .admin-sidebar a svg {
    color: #d85f10;
  }
  .admin-sidebar a:hover,
  .admin-sidebar a:focus-visible {
    border-color: #ef7d24;
    background: #ffe4cf;
    color: #7d3208;
  }
  .admin-sidebar a.active,
  .admin-sidebar a[aria-current="page"] {
    border-color: #e96812;
    background: linear-gradient(135deg,#f58a2a,#e96610);
    color: #fff;
    font-weight: 850;
    box-shadow: 0 7px 18px rgba(220,92,12,.24);
  }
  .admin-sidebar a.active svg,
  .admin-sidebar a[aria-current="page"] svg {
    color: #fff;
  }
}

/* ---------- Admin mobile navigation contrast fix (v99.3) ---------- */
@media (max-width: 1024px) {
  .admin-sidebar a:not(.active):not([aria-current="page"]) {
    border-color: #e88b45 !important;
    background: #ffd9bb !important;
    color: #123d63 !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }
  .admin-sidebar a:not(.active):not([aria-current="page"]) span {
    color: #123d63 !important;
    -webkit-text-fill-color: #123d63 !important;
    opacity: 1 !important;
  }
  .admin-sidebar a:not(.active):not([aria-current="page"]) svg {
    color: #b94f08 !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }
  .admin-sidebar a.active,
  .admin-sidebar a[aria-current="page"] {
    border-color: #cc5408 !important;
    background: linear-gradient(135deg,#ed791d,#d95b09) !important;
    color: #fff !important;
  }
  .admin-sidebar a.active span,
  .admin-sidebar a[aria-current="page"] span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
  }
  .admin-sidebar a.active svg,
  .admin-sidebar a[aria-current="page"] svg {
    color: #fff !important;
    stroke: currentColor !important;
  }
}

/* ---------- Mobile mypage detail menu (v99.5) ---------- */
.mobile-mypage-menu {
  display: none;
}

@media (max-width: 760px) {
  .mobile-mypage-menu {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 18px;
    overflow: hidden;
    border: 1px solid rgba(16,52,87,.12);
    border-radius: 22px;
    background: rgba(255,253,249,.98);
    box-shadow: 0 12px 30px rgba(16,52,87,.09);
  }
  .mobile-mypage-menu > summary {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .mobile-mypage-menu > summary::-webkit-details-marker {
    display: none;
  }
  .mobile-mypage-menu > summary > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }
  .mobile-mypage-menu > summary svg {
    color: var(--orange, #ef7419);
  }
  .mobile-mypage-menu > summary strong {
    font-size: 15px;
  }
  .mobile-mypage-menu > summary small {
    color: var(--slate);
    font-size: 11px;
    font-weight: 700;
  }
  .mobile-mypage-menu > summary::after {
    content: "⌄";
    margin-left: -5px;
    color: var(--navy);
    font-size: 20px;
    font-weight: 900;
    transition: transform .18s ease;
  }
  .mobile-mypage-menu[open] > summary::after {
    transform: rotate(180deg);
  }
  .mobile-mypage-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
    padding: 0 12px 12px;
  }
  .mobile-mypage-menu-grid > a {
    display: flex;
    min-width: 0;
    min-height: 66px;
    align-items: center;
    gap: 9px;
    padding: 11px 10px;
    border: 1px solid #dce8ed;
    border-radius: 16px;
    background: #f7fbfd;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .mobile-mypage-menu-grid > a:active {
    transform: scale(.98);
  }
  .mobile-mypage-menu-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    color: var(--blue-deep);
    background: var(--blue-soft);
  }
  .mobile-mypage-menu-grid > a.is-active {
    border-color: #eb741b;
    background: linear-gradient(135deg,#ff8a2a,#e96812);
    color: #fff;
    box-shadow: 0 8px 18px rgba(232,105,18,.22);
  }
  .mobile-mypage-menu-grid > a.is-active .mobile-mypage-menu-icon {
    color: #fff;
    background: rgba(255,255,255,.18);
  }
  .mobile-mypage-menu-grid > a.is-support .mobile-mypage-menu-icon {
    color: #277d62;
    background: #e7f7f0;
  }
  .mobile-mypage-menu-grid > a.is-danger {
    color: #9b3542;
    background: #fff8f8;
    border-color: #f0d9dc;
  }
  .mobile-mypage-menu-grid > a.is-danger .mobile-mypage-menu-icon {
    color: #a53c49;
    background: #fdecee;
  }
  .mobile-mypage-menu-grid > a.is-search {
    grid-column: 1 / -1;
    min-height: 54px;
    justify-content: center;
    color: #fff;
    border-color: #123f66;
    background: linear-gradient(135deg,#123f66,#0d3153);
  }
  .mobile-mypage-menu-grid > a.is-search .mobile-mypage-menu-icon {
    color: #fff;
    background: rgba(255,255,255,.14);
  }
  .mobile-mypage-menu-grid > a.is-search > svg:last-child {
    margin-left: auto;
  }
}

@media (max-width: 370px) {
  .mobile-mypage-menu-grid {
    grid-template-columns: 1fr;
  }
  .mobile-mypage-menu-grid > a.is-search {
    grid-column: auto;
  }
}

/* Learning notification status and test controls */
.notification-readiness{margin:20px 0;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:#f8fbff}.notification-readiness strong{display:block;margin-bottom:10px}.notification-readiness ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.notification-readiness li{padding:9px 11px;border-radius:11px;font-size:13px;font-weight:750}.notification-readiness li.is-ok{color:#176b51;background:#e9f8f1}.notification-readiness li.is-error{color:#a13c24;background:#fff0ea}.notification-test-form{display:flex;align-items:center;gap:12px;margin-top:14px}.notification-test-form small{color:var(--slate)}@media(max-width:600px){.notification-readiness ul{grid-template-columns:1fr}.notification-test-form{align-items:stretch;flex-direction:column}.notification-test-form .button{width:100%}}

/* ============================================================
   管理画面：お問い合わせ受信箱の常時表示・ダッシュボード通知 V101
   ============================================================ */
.admin-sidebar a { position: relative; }
.admin-sidebar .admin-nav-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-sidebar .admin-nav-badge {
  display: inline-flex;
  min-width: 25px;
  height: 25px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.admin-sidebar .admin-nav-badge.is-alert {
  border-color: #F5A7A1;
  background: var(--bad);
  color: #fff;
  box-shadow: 0 5px 14px rgba(180,35,24,.22);
}
.admin-sidebar .admin-nav-badge.is-clear {
  border-color: #B9E4D0;
  background: var(--ok-soft);
  color: var(--ok);
}
.admin-sidebar a.has-notice {
  border: 1px solid #F5C3BE;
  background: linear-gradient(135deg, #FFF8F7, #FFF0EE);
  color: #8F1D14;
  font-weight: 800;
}
.admin-sidebar a.has-notice:hover {
  background: #FFE9E6;
}
.admin-sidebar a.has-notice.active {
  background: #FFE6E2;
  color: #83170F;
  box-shadow: inset 3px 0 0 var(--bad);
}

.admin-contact-notice {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0 0 20px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.admin-contact-notice.is-pending {
  border-color: #F0B7B2;
  background:
    radial-gradient(340px 130px at 0 0, rgba(180,35,24,.10), transparent 72%),
    linear-gradient(135deg, #FFF9F8, #FFF1EF);
  box-shadow: 0 12px 34px rgba(180,35,24,.10);
}
.admin-contact-notice.is-clear {
  border-color: #BFE2D2;
  background:
    radial-gradient(320px 130px at 0 0, rgba(27,122,85,.09), transparent 72%),
    linear-gradient(135deg, #FBFFFD, #F0FAF5);
}
.admin-contact-notice.is-warning {
  border-color: #F2D29B;
  background:
    radial-gradient(320px 130px at 0 0, rgba(181,71,8,.09), transparent 72%),
    linear-gradient(135deg, #FFFCF7, #FFF5E8);
}
.admin-contact-notice-icon,
.admin-contact-notice-count {
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  place-items: center;
  border-radius: 20px;
}
.admin-contact-notice.is-clear .admin-contact-notice-icon {
  background: var(--ok-soft);
  color: var(--ok);
}
.admin-contact-notice.is-warning .admin-contact-notice-icon {
  background: var(--warn-soft);
  color: var(--warn);
}
.admin-contact-notice-count {
  align-content: center;
  gap: 0;
  background: var(--bad);
  color: #fff;
  box-shadow: 0 9px 22px rgba(180,35,24,.23);
  text-align: center;
}
.admin-contact-notice-count strong {
  color: inherit;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.admin-contact-notice-count small {
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.admin-contact-notice-copy { min-width: 0; }
.admin-contact-notice-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--slate);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}
.admin-contact-notice.is-pending .admin-contact-notice-kicker { color: var(--bad); }
.admin-contact-notice.is-clear .admin-contact-notice-kicker { color: var(--ok); }
.admin-contact-notice.is-warning .admin-contact-notice-kicker { color: var(--warn); }
.admin-contact-notice h2 {
  margin: 0 0 4px;
  font-size: clamp(17px,2vw,21px);
}
.admin-contact-notice p {
  margin: 0;
  color: var(--slate);
  font-size: 13px;
  line-height: 1.6;
}
.admin-contact-notice > .button {
  justify-self: end;
  white-space: nowrap;
}
.admin-contact-breakdown {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 7px !important;
}
.admin-contact-breakdown span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(180,35,24,.14);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.72);
  color: var(--navy-soft);
  font-size: 11.5px;
}
.admin-contact-breakdown strong { color: var(--bad); }

/* お問い合わせ受信箱本体 */
.contact-admin-kpis {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.contact-admin-kpis a {
  display: grid;
  gap: 4px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.contact-admin-kpis a:hover {
  border-color: #BDD1F7;
  background: var(--blue-soft);
}
.contact-admin-kpis span {
  color: var(--slate);
  font-size: 11.5px;
  font-weight: 800;
}
.contact-admin-kpis strong {
  color: var(--navy);
  font-size: 25px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.contact-admin-filters {
  display: grid;
  grid-template-columns: minmax(220px,1fr) minmax(150px,190px) minmax(150px,190px) auto auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-sm);
}
.contact-admin-filters label,
.contact-admin-filters input,
.contact-admin-filters select { width: 100%; }
.contact-admin-shell {
  display: grid;
  grid-template-columns: minmax(300px,370px) minmax(0,1fr);
  gap: 15px;
  align-items: start;
}
.contact-inbox-list {
  position: sticky;
  top: 84px;
  max-height: calc(100dvh - 104px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.contact-inbox-title {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}
.contact-inbox-title strong { font-size: 13px; }
.contact-inbox-title small { color: var(--slate); font-size: 10.5px; }
.contact-inbox-item {
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid transparent;
  color: var(--navy-soft);
}
.contact-inbox-item:last-child { border-bottom: 0; }
.contact-inbox-item:hover { background: #F8FBFF; }
.contact-inbox-item.is-active {
  border-left-color: var(--blue);
  background: var(--blue-soft);
}
.contact-inbox-item.status-new { border-left-color: var(--bad); }
.contact-inbox-item.status-in_progress { border-left-color: var(--warn); }
.contact-inbox-item.status-waiting { border-left-color: var(--blue); }
.contact-inbox-item.status-replied { border-left-color: var(--ok); }
.contact-inbox-item.status-closed { opacity: .72; }
.contact-inbox-row,
.contact-inbox-meta {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.contact-inbox-row b { color: var(--navy); font-size: 11px; }
.contact-inbox-row time { color: var(--slate); font-size: 10.5px; }
.contact-inbox-item > strong { color: var(--navy); font-size: 14px; }
.contact-inbox-item p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--slate);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.contact-inbox-meta { justify-content: flex-start; }
.contact-inbox-meta i {
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--slate);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}
.contact-inbox-empty,
.contact-detail-empty {
  display: grid;
  min-height: 240px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  color: var(--slate);
  text-align: center;
}
.contact-inbox-empty > span,
.contact-detail-empty > span { font-size: 34px; }
.contact-detail-empty h2 { margin: 0; font-size: 19px; }
.contact-detail-empty p { margin: 0; font-size: 13px; }
.contact-admin-detail { display: grid; gap: 14px; min-width: 0; }
.contact-detail-card,
.contact-reply-card,
.contact-history-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.contact-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.contact-detail-head h2 { margin: 5px 0 0; font-size: 20px; }
.contact-detail-head small { margin-left: 8px; color: var(--slate); }
.contact-status {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--navy-soft);
  font-size: 10.5px;
  font-weight: 900;
}
.contact-status.status-new { background: var(--bad-soft); color: var(--bad); }
.contact-status.status-in_progress { background: var(--warn-soft); color: var(--warn); }
.contact-status.status-waiting { background: var(--blue-soft); color: var(--blue-deep); }
.contact-status.status-replied,
.contact-status.status-closed { background: var(--ok-soft); color: var(--ok); }
.contact-status-form {
  display: flex;
  gap: 7px;
  align-items: end;
  flex: 0 0 auto;
}
.contact-status-form label { display: grid; gap: 4px; color: var(--slate); font-size: 10.5px; font-weight: 800; }
.contact-person-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.contact-person-grid > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FAFCFF;
}
.contact-person-grid span { color: var(--slate); font-size: 10px; font-weight: 800; }
.contact-person-grid strong { overflow-wrap: anywhere; font-size: 12.5px; }
.contact-direct-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.contact-account-ready,
.contact-account-unavailable {
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 800;
}
.contact-account-ready { background: var(--ok-soft); color: var(--ok); }
.contact-account-unavailable { background: var(--mist); color: var(--slate); }
.contact-original-message {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #FCFDFE;
}
.contact-original-message header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--mist);
  font-size: 11px;
}
.contact-original-message time { color: var(--slate); }
.contact-original-message p {
  margin: 0;
  padding: 16px;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: 14px;
  line-height: 1.8;
}
.contact-reply-heading {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 15px;
}
.contact-reply-heading > span { font-size: 25px; }
.contact-reply-heading h2 { margin: 0 0 3px; font-size: 19px; }
.contact-reply-heading p { margin: 0; color: var(--slate); font-size: 12px; }
.contact-reply-form { display: grid; gap: 14px; }
.contact-reply-form fieldset { margin: 0; padding: 0; border: 0; }
.contact-reply-form legend { margin-bottom: 8px; color: var(--slate); font-size: 11px; font-weight: 900; }
.contact-reply-channels {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.contact-reply-channels label { cursor: pointer; }
.contact-reply-channels input { position: absolute; opacity: 0; pointer-events: none; }
.contact-reply-channels label > span {
  display: grid;
  gap: 2px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
}
.contact-reply-channels input:checked + span {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.contact-reply-channels label.is-unavailable { opacity: .48; cursor: not-allowed; }
.contact-reply-channels strong { font-size: 12.5px; }
.contact-reply-channels small { color: var(--slate); font-size: 10.5px; overflow-wrap: anywhere; }
.contact-quick-replies {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.contact-quick-replies > span { color: var(--slate); font-size: 11px; font-weight: 800; }
.contact-quick-replies button {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--navy-soft);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.contact-quick-replies button:hover { border-color: #AFC7F4; background: var(--blue-soft); }
.contact-reply-body { display: grid; gap: 5px; font-size: 12px; font-weight: 800; }
.contact-reply-body textarea { width: 100%; resize: vertical; }
.contact-reply-body small { justify-self: end; color: var(--slate); font-weight: 500; }
.contact-reply-footer {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
}
.contact-reply-footer label { display: grid; gap: 4px; color: var(--slate); font-size: 10.5px; font-weight: 800; }
.contact-history-card h2 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 18px;
}
.contact-history-card h2 span {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--slate);
  font-size: 10px;
}
.contact-history-empty { padding: 20px; color: var(--slate); text-align: center; font-size: 12px; }
.contact-history-list { display: grid; gap: 9px; }
.contact-history-list article {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  background: #FCFDFE;
}
.contact-history-list article.delivery-failed { border-left-color: var(--bad); }
.contact-history-list article.delivery-accepted,
.contact-history-list article.delivery-sent,
.contact-history-list article.delivery-recorded { border-left-color: var(--ok); }
.contact-history-list header {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 10.5px;
}
.contact-history-list header b { color: var(--slate); }
.contact-history-list header time { margin-left: auto; color: var(--slate); }
.contact-history-list p { margin: 9px 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
.contact-history-list footer { color: var(--slate); font-size: 10.5px; }
.contact-history-list footer strong { color: var(--bad); }

@media (max-width: 1120px) {
  .contact-admin-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .contact-admin-filters { grid-template-columns: minmax(200px,1fr) minmax(140px,1fr) minmax(140px,1fr); }
  .contact-admin-filters .button { width: 100%; }
  .contact-admin-shell { grid-template-columns: minmax(275px,330px) minmax(0,1fr); }
  .contact-person-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .admin-contact-notice { grid-template-columns: auto minmax(0,1fr); }
  .admin-contact-notice > .button { grid-column: 2; justify-self: start; }
  .contact-admin-shell { grid-template-columns: 1fr; }
  .contact-inbox-list { position: static; max-height: 470px; }
}
@media (max-width: 700px) {
  .admin-contact-notice {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 16px;
  }
  .admin-contact-notice-icon,
  .admin-contact-notice-count { width: 52px; height: 52px; border-radius: 16px; }
  .admin-contact-notice > .button { grid-column: auto; width: 100%; justify-self: stretch; }
  .contact-admin-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-admin-filters { grid-template-columns: 1fr; }
  .contact-detail-head,
  .contact-reply-footer { display: grid; }
  .contact-status-form { width: 100%; }
  .contact-status-form label { flex: 1; }
  .contact-person-grid,
  .contact-reply-channels { grid-template-columns: 1fr; }
  .contact-reply-footer .button { width: 100%; }
}
@media (max-width: 420px) {
  .admin-sidebar .admin-nav-badge { min-width: 22px; height: 22px; padding: 0 6px; }
  .contact-admin-kpis { grid-template-columns: 1fr; }
  .contact-direct-actions .button { width: 100%; }
}

.pwa-nudge {
  position: fixed;
  z-index: 1200;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 16px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: min(540px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid #9ab5ee;
  border-radius: 18px;
  background: #fff;
  color: #0f2948;
  box-shadow: 0 16px 50px rgba(10, 36, 75, .24);
}
.pwa-nudge[hidden] { display: none; }
.pwa-nudge div { display: grid; gap: 3px; }
.pwa-nudge div span { color: #3e5873; font-size: 12px; }
.pwa-nudge > button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #eef3fb;
  color: #173456;
  font-size: 22px;
}
@media (max-width: 600px) {
  .pwa-nudge { grid-template-columns: minmax(0, 1fr) auto; }
  .pwa-nudge > div { grid-column: 1 / -1; }
}

/* V99 final cascade: keep the large, pinch-safe handwriting viewport above legacy rules. */
.handwriting-canvas-wrap[data-canvas-viewport] {
  position:relative;
  height:clamp(480px,60vh,720px);
  overflow:hidden;
  overscroll-behavior:contain;
  background:#fff;
  touch-action:none;
}
.handwriting-canvas-wrap[data-canvas-viewport] .handwriting-zoom-surface {
  position:absolute;
  inset:0;
  transform-origin:0 0;
  will-change:transform;
}
.handwriting-canvas-wrap[data-canvas-viewport] canvas,
.canvas-wrap[data-canvas-viewport] canvas {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.handwriting-canvas-wrap[data-canvas-viewport]::before { z-index:2; }
.handwriting-zoom-surface > span { position:absolute;left:20px;top:18px;color:#7d8da3;pointer-events:none;font-weight:800; }
.canvas-wrap[data-canvas-viewport] { position:relative;height:clamp(420px,55vh,650px);overflow:hidden;overscroll-behavior:contain;touch-action:none; }
.canvas-wrap[data-canvas-viewport] .handwriting-zoom-surface { position:absolute;inset:0;transform-origin:0 0;will-change:transform; }
@media (max-width:680px) {
  .handwriting-canvas-wrap[data-canvas-viewport] { height:max(440px,62dvh);max-height:680px; }
  .canvas-wrap[data-canvas-viewport] { height:max(420px,58dvh);max-height:620px; }
  .handwriting-problem-print > p { display:grid;grid-template-columns:1fr;gap:4px; }
}
@media (max-width:380px) {
  .handwriting-canvas-wrap[data-canvas-viewport] { height:max(420px,60dvh); }
}

/* ============================================================
   V135: video + learning points + handwriting in one workspace
   ============================================================ */
.practice-unified-hero {
  grid-template-columns:minmax(0,1fr) 220px;
  gap:22px;
  padding:clamp(24px,4vw,38px);
  border-radius:26px;
  background:
    radial-gradient(circle at 92% 12%,rgba(255,154,76,.18),transparent 30%),
    radial-gradient(circle at 6% 90%,rgba(55,196,184,.13),transparent 31%),
    linear-gradient(135deg,#fff,#f5f9ff 54%,#fff8f1);
}
.practice-unified-hero-copy { display:grid;gap:10px; }
.practice-unified-hero-copy .back-link { width:max-content;margin-bottom:3px; }
.practice-unified-hero h1 { margin:0;font-size:clamp(29px,4.1vw,48px); }
.practice-unified-hero p { margin:0;line-height:1.7; }
.practice-question.future-question-renderer {
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.practice-unified-workspace {
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.practice-unified-learning,
.practice-unified-answer {
  min-width:0;
  border:1px solid #d9e5f3;
  border-radius:25px;
  background:#fff;
  box-shadow:0 16px 42px rgba(19,50,90,.08);
}
.practice-unified-learning {
  position:sticky;
  top:calc(var(--header-height,74px) + 16px);
  display:grid;
  gap:15px;
  padding:20px;
  background:linear-gradient(160deg,#f8fcff,#fff 48%,#fffaf3);
}
.practice-unified-pane-head { display:grid;gap:7px; }
.practice-unified-pane-head > span { display:flex;align-items:center;gap:7px;color:#176b92;font-size:12px;font-weight:900; }
.practice-unified-pane-head h2 { margin:0;font-size:clamp(18px,2vw,23px);line-height:1.45; }
.practice-unified-pane-head p { margin:0;color:#536a82;font-size:12.5px;line-height:1.65; }
.practice-unified-video {
  grid-template-columns:1fr;
  gap:12px;
  margin:0;
  padding:14px;
  border-left-width:1px;
  border-radius:18px;
}
.practice-unified-video > .button { width:100%; }
.practice-unified-video .practice-video-hint-copy > span { width:38px;height:38px;flex-basis:38px; }
.practice-unified-video .practice-video-hint-copy strong { font-size:14px; }
.practice-unified-video .practice-video-hint-copy p { font-size:11.5px; }
.practice-unified-video .practice-video-hint-player { grid-column:auto; }
.practice-unified-video .practice-video-hint-player > a { font-size:11px; }
.practice-unified-mission { display:grid;gap:9px; }
.practice-unified-mission article { display:grid;gap:4px;padding:12px 13px;border:1px solid #e0e8f3;border-radius:15px;background:rgba(255,255,255,.88); }
.practice-unified-mission article > span { color:#2764ff;font-size:9px;font-weight:950;letter-spacing:.13em; }
.practice-unified-mission article > strong { color:#173757;font-size:13px; }
.practice-unified-mission article > p { margin:0;color:#51677d;font-size:11.5px;line-height:1.65; }
.practice-unified-answer { padding:clamp(19px,3vw,32px); }
.practice-unified-answer .practice-question-head h2 { font-size:clamp(24px,3.2vw,34px); }
.practice-easy-rebuild {
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px;
  border:1px solid #b9dfd5;
  border-radius:18px;
  background:linear-gradient(135deg,#f0fcf8,#fff);
  color:#173f39;
}
.practice-easy-rebuild > div { display:grid;gap:3px; }
.practice-easy-rebuild > div strong { font-size:14px; }
.practice-easy-rebuild > div span { color:#52716c;font-size:12px;line-height:1.55; }
.practice-easy-rebuild form { flex:0 0 auto;margin:0; }
.practice-question-badges { display:grid;gap:8px;justify-items:end;align-self:start; }
.practice-easy-chip {
  display:inline-flex;
  padding:6px 11px;
  border-radius:999px;
  background:#e4f8ef;
  color:#08765d;
  font-size:11px;
  font-weight:950;
}
.practice-answer-contract {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.practice-answer-contract > div {
  display:grid;
  gap:4px;
  min-width:0;
  padding:12px 13px;
  border:1px solid #d9e6f5;
  border-radius:13px;
  background:rgba(255,255,255,.92);
}
.practice-answer-contract span { color:#60758e;font-size:10px;font-weight:950;letter-spacing:.08em; }
.practice-answer-contract strong { color:#173757;font-size:13px;line-height:1.55;overflow-wrap:anywhere; }
.practice-unified-answer .practice-answer-area { margin:20px 0; }
.practice-unified-answer .practice-study-dock { margin-top:18px; }
.practice-unified-answer .handwriting-canvas-wrap[data-canvas-viewport] { height:clamp(500px,60vh,700px); }
@media (max-width:980px) {
  .practice-unified-workspace { grid-template-columns:1fr; }
  .practice-unified-learning { position:relative;top:auto; }
  .practice-unified-mission { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .practice-unified-hero { grid-template-columns:1fr;padding:21px;border-radius:22px; }
  .practice-unified-hero .practice-progress-card { padding:16px; }
  .practice-unified-workspace { gap:14px; }
  .practice-unified-learning,.practice-unified-answer { padding:16px;border-radius:20px; }
  .practice-unified-mission { grid-template-columns:1fr; }
  .practice-unified-answer .practice-question-head h2 { font-size:24px; }
  .practice-easy-rebuild { display:grid;padding:14px; }
  .practice-easy-rebuild form,.practice-easy-rebuild .button { width:100%; }
  .practice-question-badges { display:flex;justify-items:initial;flex-wrap:wrap; }
  .practice-answer-contract { grid-template-columns:1fr; }
  .practice-unified-answer .handwriting-canvas-wrap[data-canvas-viewport] { height:max(440px,58dvh); }
}

/* V120: index.php と同じ標準検索へ統合した「今日の復習」 */
.standard-review-layout {
  grid-template-columns:232px minmax(0,1fr);
}
.standard-review-main {
  min-width:0;
  max-width:1040px;
  width:100%;
}
.standard-review-hero {
  align-items:center;
  padding:clamp(24px,4vw,42px);
  border:1px solid rgba(39,100,255,.16);
  border-radius:28px;
  background:
    radial-gradient(circle at 92% 8%,rgba(39,100,255,.16),transparent 34%),
    linear-gradient(145deg,#fff,#f6f9ff 62%,#f1fbf7);
  box-shadow:0 20px 54px rgba(25,57,103,.10);
}
.standard-review-hero h1 {
  max-width:760px;
  line-height:1.28;
}
.standard-review-hero p { margin-bottom:0; }
.standard-review-hero-stat {
  display:grid;
  min-width:145px;
  place-items:center;
  padding:19px 24px;
  border:1px solid rgba(39,100,255,.16);
  border-radius:22px;
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 32px rgba(22,59,109,.09);
}
.standard-review-hero-stat span {
  color:var(--slate);
  font-size:12px;
  font-weight:850;
}
.standard-review-hero-stat strong {
  color:var(--blue);
  font-size:clamp(44px,6vw,62px);
  line-height:1;
}
.standard-review-hero-stat small {
  color:var(--navy-soft);
  font-weight:900;
}
.standard-review-intro {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr);
  gap:24px;
  align-items:center;
  margin-bottom:16px;
  padding:20px 22px;
}
.standard-review-intro h2 { margin:5px 0 0; }
.standard-review-intro p { margin:0;color:var(--slate);line-height:1.75; }
.standard-review-list { display:grid;gap:16px; }
.standard-review-card {
  position:relative;
  overflow:hidden;
}
.standard-review-card::before {
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--blue);
  content:"";
}
.standard-review-card.is-secondary::before { background:#9aabc2; }
.standard-review-card.is-secondary { box-shadow:0 8px 24px rgba(24,51,89,.055); }
.standard-review-card > header small {
  display:block;
  color:var(--slate);
  font-size:12px;
  line-height:1.6;
}
.standard-review-focus {
  display:grid;
  gap:6px;
  margin:18px 0 14px;
  padding:15px 17px;
  border:1px solid rgba(39,100,255,.13);
  border-radius:16px;
  background:linear-gradient(135deg,#f7f9ff,#f5fffb);
}
.standard-review-focus span {
  color:var(--blue);
  font-size:11px;
  font-weight:900;
}
.standard-review-focus strong { color:var(--navy-soft);line-height:1.65; }
.standard-review-meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.standard-review-meta span {
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:#f2f5fa;
  color:var(--slate);
  font-size:11px;
  font-weight:800;
}
.standard-review-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.standard-review-actions form:first-child { flex:1 1 300px; }
.standard-review-actions form:first-child .button { width:100%; }
.standard-review-actions .ghost { min-height:48px; }
.standard-review-future {
  margin-top:22px;
  padding:0;
  overflow:hidden;
  background:#fff;
}
.standard-review-future summary {
  padding:17px 20px;
  background:#f7f9fc;
  color:var(--navy-soft);
}
.standard-review-future ul {
  display:grid;
  gap:0;
  margin:0;
  padding:0 20px;
  list-style:none;
}
.standard-review-future li {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--border);
}
.standard-review-future li:first-child { border-top:0; }
.standard-review-future li span { display:grid;gap:3px; }
.standard-review-future li small { color:var(--slate); }
.standard-review-future time { flex:0 0 auto;color:var(--blue);font-weight:900; }
.standard-review-empty { padding:clamp(30px,6vw,60px); }
.standard-review-context-strip {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  margin-bottom:18px;
  padding:18px 20px;
  border-color:rgba(39,100,255,.18);
  background:linear-gradient(135deg,#f8faff,#f3fbf7);
}
.standard-review-context-strip h2 { margin:4px 0 6px;font-size:clamp(20px,3vw,27px); }
.standard-review-context-strip p { margin:0;color:var(--slate);line-height:1.7; }
.standard-review-context-score {
  display:grid;
  min-width:132px;
  place-items:center;
  padding:13px 17px;
  border:1px solid rgba(39,100,255,.15);
  border-radius:17px;
  background:#fff;
}
.standard-review-context-score span { color:var(--slate);font-size:11px;font-weight:850; }
.standard-review-context-score strong { color:var(--blue);font-size:34px;line-height:1.15; }
.standard-review-context-score small { margin-left:2px;font-size:14px; }
.standard-review-result-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:22px 0;
}
.standard-review-result-summary > div {
  display:grid;
  gap:4px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#f7f9fc;
}
.standard-review-result-summary span { color:var(--slate);font-size:11px;font-weight:850; }
.standard-review-result-summary strong { color:var(--navy-soft);font-size:20px; }

@media(max-width:1080px) {
  .standard-review-layout { grid-template-columns:210px minmax(0,1fr); }
}
@media(max-width:860px) {
  .standard-review-layout { grid-template-columns:1fr; }
  .standard-review-intro { grid-template-columns:1fr;gap:8px; }
}
@media(max-width:680px) {
  .standard-review-hero { padding:24px;border-radius:23px; }
  .standard-review-hero-stat { grid-template-columns:auto auto auto;gap:5px;min-width:0;justify-self:start; }
  .standard-review-hero-stat strong { font-size:38px; }
  .standard-review-card > header { align-items:flex-start; }
  .standard-review-card > header > p strong { font-size:38px; }
  .standard-review-actions { display:grid; }
  .standard-review-actions form,.standard-review-actions .button { width:100%; }
  .standard-review-context-strip { grid-template-columns:1fr; }
  .standard-review-context-score { grid-template-columns:1fr auto;justify-content:space-between;place-items:center stretch; }
  .standard-review-result-summary { grid-template-columns:1fr; }
  .standard-review-future li { align-items:flex-start; }
}

/* Saved learning route deletion */
.route-card-actions{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:auto;flex-wrap:wrap}
.route-delete-form{margin:0}
.route-delete-form .button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.route-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
.route-title-row>div{min-width:0}
.route-delete-form-head{flex:0 0 auto;margin-top:4px}
@media(max-width:720px){.route-title-row{display:grid;grid-template-columns:1fr}.route-delete-form-head{width:100%}.route-delete-form-head .button{width:100%}.route-card-actions{align-items:stretch}.route-card-actions>a,.route-card-actions form{flex:1 1 130px}.route-card-actions .button{width:100%}}

/* ========================================================================== 
   V126 — Child-first navigation, responsive free search, compact assistance,
   and friendly safe-search recovery. This final block intentionally overrides
   older child layout rules without weakening security-related visibility.
   ========================================================================== */
.is-child-mode {
  --child-ink:#17355f;
  --child-muted:#60738f;
  --child-blue:#2864f0;
  --child-blue-soft:#edf4ff;
  --child-green:#159878;
  --child-orange:#ef6c18;
  --child-line:#d9e5f5;
  --child-surface:#ffffff;
  --child-shadow:0 18px 44px rgba(28,64,118,.10);
}
.is-child-mode .container {
  width:min(1180px,calc(100% - 32px));
  padding-top:22px;
  padding-bottom:150px;
}
.is-child-mode .site-footer { display:none; }
.is-child-mode [id^="child-"] { scroll-margin-top:170px; }

/* Always-visible desktop/tablet wayfinding. */
.child-global-nav {
  position:sticky;
  z-index:430;
  top:var(--site-header-bottom,72px);
  border-bottom:1px solid rgba(191,210,237,.8);
  background:rgba(248,251,255,.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 24px rgba(27,58,104,.06);
}
.child-global-nav-inner {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  width:min(920px,calc(100% - 32px));
  margin:0 auto;
  padding:10px 0;
}
.child-global-nav a {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:50px;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:16px;
  color:#425b7d;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.child-global-nav a:hover,
.child-global-nav a:focus-visible {
  transform:translateY(-1px);
  border-color:#cbdcf6;
  background:#fff;
  box-shadow:0 8px 20px rgba(39,100,240,.10);
}
.child-global-nav a.is-active {
  border-color:#aec8ff;
  background:linear-gradient(135deg,#2864f0,#4d79ef);
  color:#fff;
  box-shadow:0 10px 24px rgba(40,100,240,.22);
}
.child-global-nav a.is-locked:not(.is-active) { color:#7b8799;background:#f1f4f8; }

/* The first decision is always visible and uses plain child-facing language. */
.child-home-shell.child-today-focused {
  display:grid;
  gap:22px;
  max-width:1120px;
  margin:0 auto;
}
.child-home-hero {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(220px,.7fr);
  gap:22px;
  align-items:center;
  padding:clamp(22px,4vw,38px);
  border:1px solid var(--child-line);
  border-radius:30px;
  background:
    radial-gradient(circle at 8% 0%,rgba(79,145,255,.18),transparent 35%),
    radial-gradient(circle at 92% 100%,rgba(40,196,156,.14),transparent 32%),
    #fff;
  box-shadow:var(--child-shadow);
}
.child-home-hero h1 { margin:7px 0 10px;color:var(--child-ink);font-size:clamp(30px,5vw,52px);line-height:1.22;letter-spacing:-.03em; }
.child-home-hero p { margin:0;color:var(--child-muted);font-size:clamp(14px,2vw,17px);line-height:1.75; }
.child-home-quick-nav {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}
.child-home-quick-nav > a {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:13px;
  align-items:center;
  min-height:104px;
  padding:17px;
  border:2px solid var(--child-line);
  border-radius:23px;
  background:#fff;
  color:var(--child-ink);
  text-decoration:none;
  box-shadow:0 12px 30px rgba(28,64,118,.07);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.child-home-quick-nav > a:hover,
.child-home-quick-nav > a:focus-visible {
  transform:translateY(-3px);
  border-color:#8cb0ff;
  box-shadow:0 16px 35px rgba(40,100,240,.14);
}
.child-home-quick-icon {
  display:grid;
  width:54px;
  height:54px;
  place-items:center;
  border-radius:18px;
  background:var(--child-blue-soft);
  color:var(--child-blue);
}
.child-home-quick-nav a.is-search .child-home-quick-icon { background:#e9f9f3;color:var(--child-green); }
.child-home-quick-nav a.is-review .child-home-quick-icon { background:#fff1e8;color:var(--child-orange); }
.child-home-quick-nav a.is-locked { border-style:dashed;background:#f7f9fc;color:#77869a; }
.child-home-quick-nav a.is-locked .child-home-quick-icon { background:#eef1f5;color:#77869a; }
.child-home-quick-nav > a > span:last-child { display:grid;gap:2px;min-width:0; }
.child-home-quick-nav small { color:#71829a;font-size:10px;font-weight:800; }
.child-home-quick-nav strong { overflow:hidden;font-size:18px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap; }
.child-home-quick-nav em { justify-self:start;margin-top:3px;padding:4px 8px;border-radius:999px;background:#f1f5fb;color:#526985;font-size:10px;font-style:normal;font-weight:900; }

/* One task per screen flow: input -> quick topic -> time -> search. */
.child-free-search,
.child-free-search.is-locked {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  width:100%;
  max-width:900px;
  margin-inline:auto;
  padding:clamp(20px,4vw,36px);
  border:1px solid #d4e2f5;
  border-radius:28px;
  background:
    radial-gradient(circle at 100% 0%,rgba(40,100,240,.10),transparent 36%),
    linear-gradient(145deg,#fbfdff,#f5f9ff);
  box-shadow:var(--child-shadow);
}
.child-free-search-copy {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.child-free-search-copy h2 { margin:5px 0 7px;font-size:clamp(27px,4vw,40px);letter-spacing:-.025em; }
.child-free-search-copy > p { max-width:500px;font-size:14px; }
.child-free-search-form {
  display:grid;
  gap:18px;
  padding:clamp(17px,3vw,25px);
  border:1px solid #d8e4f4;
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 34px rgba(28,64,118,.08);
}
.child-search-step {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:13px;
  align-items:start;
}
.child-search-step-number {
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#2864f0,#557ff1);
  color:#fff;
  font-size:18px;
  font-weight:950;
  box-shadow:0 8px 18px rgba(40,100,240,.20);
}
.child-search-step-body { display:grid;gap:11px;min-width:0; }
.child-search-step-body > label,
.child-search-step-body > legend { color:var(--child-ink);font-size:16px;font-weight:950; }
.child-free-search-form textarea {
  width:100%;
  min-height:112px;
  padding:16px 18px;
  resize:vertical;
  border:2px solid #bfd1e9;
  border-radius:19px;
  background:#fff;
  color:#203858;
  font-size:18px;
  line-height:1.65;
}
.child-free-search-form textarea::placeholder { color:#8190a4;opacity:1; }
.child-search-examples {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.child-search-examples button {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:50px;
  padding:9px 12px;
  border:1.5px solid #d4e0f0;
  border-radius:15px;
  background:#f8faff;
  color:#385474;
  font-size:14px;
  font-weight:900;
  text-align:left;
}
.child-search-examples button > span {
  display:grid;
  min-width:28px;
  min-height:28px;
  place-items:center;
  border-radius:9px;
  background:#fff;
  color:var(--child-blue);
  font-size:11px;
  box-shadow:0 3px 10px rgba(28,64,118,.08);
}
.child-search-examples button:hover,
.child-search-examples button:focus-visible { border-color:#7da3fa;background:#eef4ff; }
.child-search-time > div {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  margin-top:0;
}
.child-search-time label { min-width:0; }
.child-search-time input + span {
  display:grid;
  min-width:0;
  min-height:68px;
  place-items:center;
  align-content:center;
  gap:2px;
  padding:9px 6px;
  border:2px solid #d5e1f0;
  border-radius:17px;
  background:#fff;
  color:#50647f;
}
.child-search-time input + span > small { color:#7a899d;font-size:9px;font-weight:850; }
.child-search-time input + span > strong { font-size:17px; }
.child-search-time input:checked + span {
  border-color:var(--child-blue);
  background:linear-gradient(145deg,#2864f0,#4d79ef);
  color:#fff;
  box-shadow:0 9px 20px rgba(40,100,240,.24);
}
.child-search-time input:checked + span > small { color:#eaf0ff; }
.child-search-submit {
  display:grid!important;
  width:100%;
  min-height:72px;
  place-items:center;
  align-content:center;
  gap:3px;
  border-radius:20px!important;
  background:linear-gradient(135deg,#ef781f,#e85a0b)!important;
  box-shadow:0 14px 28px rgba(232,90,11,.24)!important;
  font-size:19px!important;
}
.child-search-submit > span { display:flex;align-items:center;justify-content:center;gap:8px; }
.child-search-submit > small { color:#fff5e9;font-size:10px;font-weight:750; }
.child-search-safety-note,
.child-search-safety-kept {
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px 14px;
  border:1px solid #cde8dc;
  border-radius:15px;
  background:#f0fbf6;
  color:#276252;
  font-size:11px;
  font-weight:750;
  line-height:1.65;
}
.child-free-search-locked { min-height:116px; }

/* Three equal mobile destinations, not a hidden drawer dependency. */
.is-child-mode .mobile-tabbar {
  grid-template-columns:repeat(3,minmax(0,1fr));
  min-height:68px;
  padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  border-top:1px solid #d8e4f3;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 -12px 30px rgba(20,50,93,.10);
}
.is-child-mode .mobile-tabbar a {
  min-width:0;
  min-height:52px;
  border-radius:15px;
  color:#5d708a;
  font-size:11px;
  font-weight:900;
}
.is-child-mode .mobile-tabbar a.is-active { background:#eaf1ff;color:#245de0; }
.is-child-mode .mobile-tabbar a.is-locked { color:#8793a3;background:#f2f4f7; }
.is-child-mode .mobile-tabbar-icon { width:25px;height:25px; }

/* Assistance remains reachable without covering the learning card. */
.is-child-mode .child-assist-dock,
.is-child-mode.has-mobile-tabbar .child-assist-dock {
  right:max(12px,env(safe-area-inset-right));
  bottom:calc(82px + env(safe-area-inset-bottom));
  left:auto;
  display:flex;
  width:auto;
  max-width:230px;
  gap:7px;
}
.is-child-mode .child-assist-dock .guide-fab,
.is-child-mode .child-assist-dock .child-read-aloud {
  width:auto;
  min-width:96px;
  min-height:44px;
  max-width:110px;
  padding:8px 11px;
  border-width:1px;
  font-size:12px;
  box-shadow:0 9px 24px rgba(15,35,70,.20);
}

/* No-result is a recoverable choice screen instead of a large failure page. */
.child-search-recovery {
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:20px 24px;
  max-width:960px;
  margin:18px auto;
  padding:clamp(22px,4vw,38px);
  border:1px solid #d6e3f4;
  border-radius:28px;
  background:linear-gradient(145deg,#fff,#f6f9ff);
  box-shadow:var(--child-shadow);
}
.child-search-recovery-visual {
  position:relative;
  display:grid;
  width:112px;
  height:112px;
  place-items:center;
  align-self:start;
  border-radius:34px;
  background:linear-gradient(145deg,#edf4ff,#e6fbf4);
  color:var(--child-blue);
}
.child-search-recovery-visual > span { position:relative;z-index:2;font-size:48px;font-weight:950; }
.child-search-recovery-visual i,
.child-search-recovery-visual i::after { position:absolute;content:"";border-radius:50%;border:2px dashed rgba(40,100,240,.22); }
.child-search-recovery-visual i { inset:12px; }
.child-search-recovery-visual i::after { inset:12px; }
.child-search-recovery-copy h1 { margin:7px 0 11px;color:var(--child-ink);font-size:clamp(27px,4.5vw,43px);line-height:1.25;letter-spacing:-.025em; }
.child-search-recovery-copy > p { margin:0 0 15px;color:var(--child-muted);font-size:15px;line-height:1.8; }
.child-search-retry-grid {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
.child-search-retry-grid form { margin:0; }
.child-search-retry-grid button {
  display:grid;
  width:100%;
  min-height:132px;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"number title" "number hint";
  gap:4px 10px;
  align-content:center;
  padding:16px;
  border:2px solid #d5e2f3;
  border-radius:20px;
  background:#fff;
  color:var(--child-ink);
  text-align:left;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.child-search-retry-grid button:hover,
.child-search-retry-grid button:focus-visible { transform:translateY(-2px);border-color:#78a0fa;box-shadow:0 12px 26px rgba(40,100,240,.12); }
.child-search-retry-grid button > span { grid-area:number;display:grid;width:34px;height:34px;place-items:center;border-radius:11px;background:#edf3ff;color:var(--child-blue);font-weight:950; }
.child-search-retry-grid button strong { grid-area:title;font-size:15px;line-height:1.45; }
.child-search-retry-grid button small { grid-area:hint;color:#60738e;font-size:10px;font-weight:850; }
.child-search-recovery-actions { grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px; }
.child-search-technical-note { grid-column:1/-1;margin:0;color:#7b8798;font-size:10px; }
.child-search-error-card {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
  max-width:760px;
  margin:30px auto;
  padding:28px;
  border:1px solid #e5ddbd;
  border-radius:25px;
  background:#fffaf0;
  box-shadow:var(--child-shadow);
}
.child-search-error-icon { display:grid;width:58px;height:58px;place-items:center;border-radius:18px;background:#fff1c8;color:#8a6300; }
.child-search-error-card h1 { margin:6px 0 8px;color:var(--child-ink);font-size:clamp(25px,4vw,36px); }
.child-search-error-card p { color:var(--child-muted);line-height:1.7; }

@media (max-width:900px) {
  .child-home-hero { grid-template-columns:1fr; }
  .child-home-quick-nav { grid-template-columns:1fr; }
  .child-home-quick-nav > a { min-height:86px; }
  .child-search-retry-grid { grid-template-columns:1fr; }
  .child-search-retry-grid button { min-height:92px; }
}

@media (max-width:760px) {
  .child-global-nav { display:none; }
  .is-child-mode .container { width:min(100% - 20px,760px);padding-top:12px;padding-bottom:165px; }
  .is-child-mode [id^="child-"] { scroll-margin-top:92px; }
  .child-home-shell.child-today-focused { gap:15px; }
  .child-home-hero { padding:21px;border-radius:24px; }
  .child-home-hero h1 { font-size:clamp(29px,9vw,42px); }
  .child-home-quick-nav { grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
  .child-home-quick-nav > a {
    grid-template-columns:1fr;
    justify-items:center;
    min-height:112px;
    padding:12px 7px;
    text-align:center;
    border-radius:18px;
  }
  .child-home-quick-icon { width:45px;height:45px;border-radius:15px; }
  .child-home-quick-nav > a > span:last-child { justify-items:center; }
  .child-home-quick-nav small { display:none; }
  .child-home-quick-nav strong { max-width:100%;font-size:13px;white-space:normal; }
  .child-home-quick-nav em { justify-self:center;font-size:9px; }
  .child-free-search,.child-free-search.is-locked { padding:18px 13px;border-radius:23px; }
  .child-free-search-copy { display:block;padding-inline:4px; }
  .child-free-search-copy h2 { font-size:29px; }
  .child-free-search-form { gap:16px;padding:15px;border-radius:20px; }
  .child-search-step { grid-template-columns:35px minmax(0,1fr);gap:9px; }
  .child-search-step-number { width:35px;height:35px;border-radius:11px;font-size:15px; }
  .child-search-step-body > label,.child-search-step-body > legend { font-size:15px; }
  .child-free-search-form textarea { min-height:104px;padding:14px;font-size:17px; }
  .child-search-examples { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
  .child-search-examples button { min-height:46px;padding:7px 9px;font-size:12px; }
  .child-search-time > div { grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
  .child-search-time input + span { min-height:61px;border-radius:14px; }
  .child-search-submit { min-height:68px;font-size:17px!important; }
  .child-search-recovery { grid-template-columns:1fr;gap:14px;margin:8px auto;padding:21px 16px;border-radius:24px; }
  .child-search-recovery-visual { width:76px;height:76px;border-radius:24px; }
  .child-search-recovery-visual > span { font-size:34px; }
  .child-search-retry-grid,.child-search-recovery-actions,.child-search-technical-note { grid-column:auto; }
  .child-search-recovery-actions { display:grid;grid-template-columns:1fr; }
  .child-search-recovery-actions .button { width:100%; }
}

@media (max-width:430px) {
  .is-child-mode .container { width:calc(100% - 14px); }
  .child-home-quick-nav > a { min-height:105px;padding-inline:5px; }
  .child-home-quick-icon { width:42px;height:42px; }
  .child-home-quick-nav strong { font-size:12px; }
  .child-search-examples button > span { display:none; }
  .child-search-examples button { justify-content:center;text-align:center; }
  .child-search-time > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .is-child-mode .child-assist-dock,
  .is-child-mode.has-mobile-tabbar .child-assist-dock { right:8px;bottom:calc(79px + env(safe-area-inset-bottom));gap:5px; }
  .is-child-mode .child-assist-dock .guide-fab,
  .is-child-mode .child-assist-dock .child-read-aloud { min-width:82px;max-width:94px;min-height:42px;padding:7px 8px;font-size:11px; }
  .child-search-error-card { grid-template-columns:1fr;margin:10px auto;padding:20px; }
}

@media (orientation:landscape) and (max-height:600px) {
  .is-child-mode .child-assist-dock,
  .is-child-mode.has-mobile-tabbar .child-assist-dock { right:10px;bottom:10px; }
  .child-home-hero { grid-template-columns:minmax(0,1fr) minmax(210px,.65fr); }
}

@media (prefers-reduced-motion:reduce) {
  .child-global-nav a,
  .child-home-quick-nav > a,
  .child-search-retry-grid button { transition:none!important; }
}

/* ========================================================================== 
   V132.4 — Today's review usability redesign
   Fixes the child-mode 232px phantom sidebar and aligns review with the
   current Manabi Video Navi visual language without changing review logic.
   ========================================================================== */
[data-page="dekiru_review"] .standard-review-layout {
  width:100%;
  min-width:0;
  gap:24px;
  align-items:start;
}
[data-page="dekiru_review"] .standard-review-layout.is-child-review-layout {
  display:block;
  grid-template-columns:1fr;
}
[data-page="dekiru_review"] .standard-review-layout.has-review-sidebar {
  grid-template-columns:232px minmax(0,1fr);
}
[data-page="dekiru_review"] .standard-review-main {
  width:min(100%,1180px);
  max-width:none;
  min-width:0;
  margin:0 auto;
  padding:10px 0 74px;
}
[data-page="dekiru_review"].is-child-mode .standard-review-main {
  width:min(100%,1240px);
}
[data-page="dekiru_review"] .standard-review-hero-v1324 {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  margin:8px 0 18px;
  padding:clamp(24px,4vw,42px);
  overflow:hidden;
  border:1px solid #d9e5f4;
  border-radius:30px;
  background:
    radial-gradient(circle at 88% 12%,rgba(40,100,240,.14),transparent 32%),
    radial-gradient(circle at 12% 100%,rgba(246,126,32,.08),transparent 30%),
    linear-gradient(145deg,#fff,#f7fbff 70%,#f4f9ff);
  box-shadow:0 20px 58px rgba(22,52,92,.09);
}
[data-page="dekiru_review"] .standard-review-hero-v1324::after {
  position:absolute;
  width:190px;
  height:190px;
  right:-74px;
  bottom:-108px;
  border:28px solid rgba(40,100,240,.055);
  border-radius:50%;
  content:"";
  pointer-events:none;
}
[data-page="dekiru_review"] .standard-review-hero-copy { min-width:0;position:relative;z-index:1; }
[data-page="dekiru_review"] .standard-review-kicker {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#f27218;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
[data-page="dekiru_review"] .standard-review-hero-v1324 h1 {
  margin:8px 0 9px;
  color:#17355f;
  font-size:clamp(36px,5.2vw,58px);
  line-height:1.08;
  letter-spacing:-.045em;
  word-break:keep-all;
  overflow-wrap:normal;
}
[data-page="dekiru_review"] .standard-review-hero-v1324 p {
  max-width:720px;
  margin:0;
  color:#60738e;
  font-size:clamp(14px,1.7vw,17px);
  line-height:1.8;
}
[data-page="dekiru_review"] .standard-review-hero-v1324 p strong { color:#245de0;font-size:1.08em; }
[data-page="dekiru_review"] .standard-review-today-count {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto auto auto;
  gap:5px;
  align-items:end;
  min-width:166px;
  padding:18px 22px;
  border:1px solid #d9e6f7;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 32px rgba(29,63,110,.09);
}
[data-page="dekiru_review"] .standard-review-today-count span {
  grid-column:1/-1;
  color:#60738e;
  font-size:11px;
  font-weight:900;
}
[data-page="dekiru_review"] .standard-review-today-count strong {
  color:#2864f0;
  font-size:48px;
  line-height:.95;
  letter-spacing:-.05em;
}
[data-page="dekiru_review"] .standard-review-today-count small { color:#17355f;font-size:15px;font-weight:900; }

[data-page="dekiru_review"] .standard-review-flow {
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:18px;
  align-items:center;
  margin:0 0 22px;
  padding:16px 18px;
  border:1px solid #dce6f3;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 28px rgba(24,51,89,.055);
}
[data-page="dekiru_review"] .standard-review-flow-head { display:grid;gap:4px; }
[data-page="dekiru_review"] .standard-review-flow-head strong { color:#17355f;font-size:15px; }
[data-page="dekiru_review"] .standard-review-flow ol {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
[data-page="dekiru_review"] .standard-review-flow li {
  position:relative;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:9px;
  align-items:center;
  min-width:0;
  min-height:62px;
  padding:9px 10px;
  border:1px solid #e2e9f3;
  border-radius:15px;
  background:#f8fafc;
}
[data-page="dekiru_review"] .standard-review-flow li.is-current { border-color:#bfd3ff;background:#edf4ff; }
[data-page="dekiru_review"] .standard-review-flow li b {
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#58708f;
  box-shadow:inset 0 0 0 1px #dce5f1;
  font-size:12px;
}
[data-page="dekiru_review"] .standard-review-flow li.is-current b { background:#2864f0;color:#fff;box-shadow:none; }
[data-page="dekiru_review"] .standard-review-flow li span { min-width:0;display:grid;gap:2px; }
[data-page="dekiru_review"] .standard-review-flow li strong { color:#29435f;font-size:12px;line-height:1.35;word-break:keep-all; }
[data-page="dekiru_review"] .standard-review-flow li small { color:#7a899d;font-size:10px;line-height:1.35; }

[data-page="dekiru_review"] .standard-review-section-head {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(300px,1.2fr);
  gap:20px;
  align-items:end;
  margin:30px 2px 14px;
}
[data-page="dekiru_review"] .standard-review-section-head h2 {
  margin:5px 0 0;
  color:#17355f;
  font-size:clamp(25px,3.1vw,35px);
  line-height:1.25;
  letter-spacing:-.025em;
  word-break:keep-all;
}
[data-page="dekiru_review"] .standard-review-section-head p { margin:0;color:#60738e;line-height:1.75; }
[data-page="dekiru_review"] .standard-review-list-v1324 { display:grid;gap:16px; }
[data-page="dekiru_review"] .standard-review-task-card {
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:clamp(20px,3vw,30px);
  border:1px solid #d7e2ef;
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 36px rgba(24,51,89,.07);
}
[data-page="dekiru_review"] .standard-review-task-card.is-primary {
  border-color:#aac5ff;
  box-shadow:0 18px 46px rgba(40,100,240,.12);
}
[data-page="dekiru_review"] .standard-review-task-card.is-primary::before {
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(#2864f0,#38a9d7);
  content:"";
}
[data-page="dekiru_review"] .standard-review-task-card.is-secondary { background:linear-gradient(145deg,#fff,#fbfcfe); }
[data-page="dekiru_review"] .standard-review-task-index {
  position:absolute;
  right:18px;
  bottom:-19px;
  color:#f1f5fa;
  font-size:102px;
  font-weight:950;
  line-height:1;
  pointer-events:none;
}
[data-page="dekiru_review"] .standard-review-task-head {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:24px;
  align-items:start;
}
[data-page="dekiru_review"] .standard-review-task-title { min-width:0; }
[data-page="dekiru_review"] .standard-review-task-tags { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px; }
[data-page="dekiru_review"] .standard-review-task-tags span {
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border-radius:999px;
  background:#f0f4f9;
  color:#60738e;
  font-size:10px;
  font-weight:900;
}
[data-page="dekiru_review"] .standard-review-task-tags .is-now { background:#fff0e5;color:#df620b; }
[data-page="dekiru_review"] .standard-review-task-head h3 {
  margin:0;
  max-width:830px;
  color:#17355f;
  font-size:clamp(20px,2.45vw,29px);
  line-height:1.45;
  letter-spacing:-.018em;
  word-break:normal;
  overflow-wrap:anywhere;
}
[data-page="dekiru_review"] .standard-review-task-subject {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:8px 0 0;
  color:#6e7f95;
  font-size:12px;
  line-height:1.55;
}
[data-page="dekiru_review"] .standard-review-task-subject strong { color:#2864f0; }
[data-page="dekiru_review"] .standard-review-mastery {
  display:grid;
  gap:5px;
  align-self:start;
  min-width:0;
  padding:12px 14px;
  border:1px solid #e0e8f2;
  border-radius:17px;
  background:#f8fafc;
}
[data-page="dekiru_review"] .standard-review-mastery > span { color:#6c7e95;font-size:10px;font-weight:900; }
[data-page="dekiru_review"] .standard-review-mastery > strong { color:#2864f0;font-size:31px;line-height:1;letter-spacing:-.04em; }
[data-page="dekiru_review"] .standard-review-mastery > strong small { margin-left:2px;font-size:12px; }
[data-page="dekiru_review"] .standard-review-mastery > progress {
  display:block;
  width:100%;
  height:6px;
  overflow:hidden;
  border:0;
  border-radius:999px;
  background:#e2e9f3;
  appearance:none;
  -webkit-appearance:none;
}
[data-page="dekiru_review"] .standard-review-mastery > progress::-webkit-progress-bar { background:#e2e9f3;border-radius:999px; }
[data-page="dekiru_review"] .standard-review-mastery > progress::-webkit-progress-value { background:linear-gradient(90deg,#2864f0,#39b8c8);border-radius:999px; }
[data-page="dekiru_review"] .standard-review-mastery > progress::-moz-progress-bar { background:linear-gradient(90deg,#2864f0,#39b8c8);border-radius:999px; }
[data-page="dekiru_review"] .standard-review-focus-v1324 {
  position:relative;
  z-index:1;
  display:grid;
  gap:8px;
  margin:19px 0 13px;
  padding:15px 17px;
  border:1px solid #dbe7f5;
  border-radius:17px;
  background:linear-gradient(135deg,#f7fbff,#f6fbf9);
}
[data-page="dekiru_review"] .standard-review-focus-v1324 > span {
  display:flex;
  gap:7px;
  align-items:center;
  color:#2864f0;
  font-size:11px;
  font-weight:900;
}
[data-page="dekiru_review"] .standard-review-focus-v1324 > strong {
  color:#29435f;
  font-size:clamp(14px,1.55vw,17px);
  line-height:1.7;
  word-break:normal;
  overflow-wrap:anywhere;
}
[data-page="dekiru_review"] .standard-review-meta-v1324 {
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:18px;
}
[data-page="dekiru_review"] .standard-review-meta-v1324 > span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid #e2e9f2;
  border-radius:999px;
  background:#fff;
  color:#6a7c93;
  font-size:11px;
}
[data-page="dekiru_review"] .standard-review-meta-v1324 > span svg { color:#4f7fe8; }
[data-page="dekiru_review"] .standard-review-meta-v1324 > span b { color:#405672; }
[data-page="dekiru_review"] .standard-review-actions-v1324 {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:9px;
  align-items:stretch;
}
[data-page="dekiru_review"] .standard-review-actions-v1324 form { margin:0; }
[data-page="dekiru_review"] .standard-review-actions-v1324 .button { min-height:52px;justify-content:center; }
[data-page="dekiru_review"] .standard-review-actions-v1324 form:first-child .button { width:100%; }
[data-page="dekiru_review"] .standard-review-task-card.is-primary .standard-review-actions-v1324 .primary {
  background:linear-gradient(135deg,#2864f0,#2e6bf4 60%,#594ae6);
  box-shadow:0 10px 25px rgba(40,100,240,.22);
}
[data-page="dekiru_review"] .standard-review-more-note {
  display:flex;
  gap:9px;
  align-items:center;
  margin:14px 2px 0;
  padding:12px 14px;
  border:1px solid #dbe6f3;
  border-radius:14px;
  background:#f7faff;
  color:#60738e;
  font-size:12px;
}
[data-page="dekiru_review"] .standard-review-more-note svg { flex:0 0 auto;color:#2864f0; }
[data-page="dekiru_review"] .standard-review-more-note strong { color:#17355f; }
[data-page="dekiru_review"] .standard-review-future-v1324 {
  margin-top:22px;
  border:1px solid #dbe4ef;
  border-radius:20px;
  box-shadow:0 8px 24px rgba(24,51,89,.045);
}
[data-page="dekiru_review"] .standard-review-future-v1324 summary {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  background:#fff;
  cursor:pointer;
}
[data-page="dekiru_review"] .standard-review-future-v1324 summary > span { display:flex;gap:8px;align-items:center;color:#29435f;font-weight:850; }
[data-page="dekiru_review"] .standard-review-future-v1324 summary > span svg { color:#2864f0; }
[data-page="dekiru_review"] .standard-review-future-v1324 summary > strong { color:#2864f0;font-size:12px; }
[data-page="dekiru_review"] .standard-review-state-card {
  display:grid;
  justify-items:center;
  max-width:820px;
  margin:32px auto 0;
  padding:clamp(30px,5vw,54px);
  text-align:center;
  border-radius:28px;
}
[data-page="dekiru_review"] .standard-review-state-card h2 { margin:7px 0 9px;color:#17355f;font-size:clamp(25px,3.5vw,36px);word-break:keep-all; }
[data-page="dekiru_review"] .standard-review-state-card > p { max-width:620px;margin:0 0 18px;color:#60738e;line-height:1.8; }
[data-page="dekiru_review"] .standard-review-state-icon {
  display:grid;
  width:66px;
  height:66px;
  place-items:center;
  margin-bottom:13px;
  border-radius:22px;
}
[data-page="dekiru_review"] .standard-review-state-icon.is-complete { background:#eaf9f3;color:#0b8064; }
[data-page="dekiru_review"] .standard-review-state-icon.is-warning { background:#fff4e8;color:#d96814; }

/* Keep the two persistent helpers reachable without covering review actions. */
[data-page="dekiru_review"].is-child-mode .child-assist-dock,
[data-page="dekiru_review"].is-child-mode.has-mobile-tabbar .child-assist-dock {
  right:max(10px,env(safe-area-inset-right));
  bottom:calc(82px + env(safe-area-inset-bottom));
  opacity:.94;
}
[data-page="dekiru_review"].is-child-mode .child-assist-dock .guide-fab,
[data-page="dekiru_review"].is-child-mode .child-assist-dock .child-read-aloud {
  min-width:92px;
  max-width:106px;
  min-height:42px;
  padding:7px 10px;
  font-size:11px;
}

@media(max-width:1080px) {
  [data-page="dekiru_review"] .standard-review-layout.has-review-sidebar { grid-template-columns:205px minmax(0,1fr);gap:18px; }
  [data-page="dekiru_review"] .standard-review-flow { grid-template-columns:1fr; }
  [data-page="dekiru_review"] .standard-review-flow ol { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:900px) {
  [data-page="dekiru_review"] .standard-review-layout.has-review-sidebar { grid-template-columns:1fr; }
  [data-page="dekiru_review"] .standard-review-section-head { grid-template-columns:1fr;gap:7px; }
  [data-page="dekiru_review"] .standard-review-flow ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  [data-page="dekiru_review"] .standard-review-main { padding-top:2px;padding-bottom:130px; }
  [data-page="dekiru_review"] .standard-review-hero-v1324 { grid-template-columns:1fr;gap:15px;padding:22px 18px;border-radius:24px; }
  [data-page="dekiru_review"] .standard-review-hero-v1324 h1 { font-size:clamp(34px,10vw,46px); }
  [data-page="dekiru_review"] .standard-review-today-count { grid-template-columns:auto auto auto;justify-content:start;min-width:0;width:max-content;padding:12px 15px;border-radius:17px; }
  [data-page="dekiru_review"] .standard-review-today-count span { grid-column:auto;align-self:center;font-size:12px; }
  [data-page="dekiru_review"] .standard-review-today-count strong { font-size:34px; }
  [data-page="dekiru_review"] .standard-review-flow { padding:13px;border-radius:18px; }
  [data-page="dekiru_review"] .standard-review-flow ol { grid-template-columns:1fr 1fr;gap:6px; }
  [data-page="dekiru_review"] .standard-review-flow li { min-height:58px;padding:8px;grid-template-columns:29px minmax(0,1fr); }
  [data-page="dekiru_review"] .standard-review-flow li b { width:29px;height:29px; }
  [data-page="dekiru_review"] .standard-review-flow li small { display:none; }
  [data-page="dekiru_review"] .standard-review-section-head { margin-top:23px; }
  [data-page="dekiru_review"] .standard-review-task-card { padding:19px 16px;border-radius:21px; }
  [data-page="dekiru_review"] .standard-review-task-head { grid-template-columns:1fr;gap:12px; }
  [data-page="dekiru_review"] .standard-review-mastery { grid-template-columns:auto auto minmax(80px,1fr);align-items:center;gap:9px;padding:10px 12px; }
  [data-page="dekiru_review"] .standard-review-mastery > span { font-size:10px; }
  [data-page="dekiru_review"] .standard-review-mastery > strong { font-size:25px; }
  [data-page="dekiru_review"] .standard-review-mastery > progress { min-width:80px; }
  [data-page="dekiru_review"] .standard-review-focus-v1324 { padding:13px 14px; }
  [data-page="dekiru_review"] .standard-review-actions-v1324 { grid-template-columns:1fr; }
  [data-page="dekiru_review"] .standard-review-actions-v1324 .button { width:100%;min-height:54px; }
  [data-page="dekiru_review"] .standard-review-task-index { right:8px;font-size:78px; }
  [data-page="dekiru_review"] .standard-review-future-v1324 li { align-items:flex-start; }
}
@media(max-width:390px) {
  [data-page="dekiru_review"] .standard-review-flow ol { grid-template-columns:1fr; }
  [data-page="dekiru_review"] .standard-review-flow li { grid-template-columns:30px minmax(0,1fr); }
  [data-page="dekiru_review"] .standard-review-meta-v1324 > span { flex:1 1 120px;justify-content:center; }
}

/* V174: 学習ルートと共通の繰り越し状態を学習計画でも明確に表示する。 */
.study-plan-carryover-alert { margin:14px 0 20px; }
.study-plan-task-list .status-skipped { color:#9a5200; }
/* V197: handwriting and single-choice practice share one calm answer surface. */
.practice-choice-card{display:grid;gap:18px;padding:clamp(20px,4vw,36px);border:1px solid #d7e3f1;border-radius:24px;background:linear-gradient(145deg,#fffdf8,#f5fbff);box-shadow:0 20px 54px rgba(20,45,79,.09)}
.practice-choice-card h3{margin:0;color:#132340;font-size:clamp(22px,3vw,31px);line-height:1.55}
.practice-choice-kicker{color:#a56a1f;font-size:11px;font-weight:950;letter-spacing:.18em}
.practice-choice-grid legend{margin-bottom:12px;color:#52657d;font-weight:850}
.practice-choice-grid span em{min-width:0;color:#172b4d;font-style:normal;line-height:1.55;overflow-wrap:anywhere}
.practice-choice-grid input:focus-visible+span{outline:3px solid rgba(39,100,255,.28);outline-offset:3px}
.practice-choice-assurance{display:flex;gap:8px;align-items:center;margin:0;padding:12px 14px;border-radius:14px;background:#eef9f6;color:#176653;font-weight:800}

/* ============================================================
   V256 visual fail-open guard
   ============================================================
   V233 remains the functional source of truth. The original transition
   loader still opens for an explicit link/form action, but page-boot.js can
   no longer cover the initial document. Real HTML is also visible without
   waiting for an IntersectionObserver or a footer presentation script. */
html.is-page-booting:not(.page-loading-active)
  body.mnv-system-parity-v256
  .page-transition-overlay:not(.is-visible) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mnv-system-parity-v256 [data-animate]:not([hidden]),
body.mnv-system-parity-v256 .mf-horizon-reveal:not([hidden]),
body.mnv-system-parity-v256 .mnv-v241-reveal:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.mnv-system-parity-v256:not(.shell-public)
  :is([data-animate], .mf-horizon-reveal, .mnv-v241-reveal):not([hidden]) {
  animation-name: none !important;
  transition-delay: 0s !important;
}

/* Authenticated screens favor stable interaction over costly compositor
   effects. Colors, borders and layout remain unchanged; only live blur and
   decorative pseudo-element animation are flattened. */
body.mnv-system-parity-v256:not(.shell-public)
  :where(.site-header, .admin-topbar, .panel, .card, .admin-card, .org-card, .org-panel, .auth-card, dialog) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.mnv-system-parity-v256:not(.shell-public) *::before,
body.mnv-system-parity-v256:not(.shell-public) *::after,
body.mnv-system-parity-v256 .page-transition-overlay:not(.is-visible) * {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.mnv-system-parity-v256
    :is([data-animate], .mf-horizon-reveal, .mnv-v241-reveal):not([hidden]) {
    animation: none !important;
    transition: none !important;
  }
}