/* Levelka 2: one set of surfaces and touch targets for both family roles. */
:root {
  color-scheme: light; --bg:#f3f5f2; --bg-soft:#edf2ef; --panel:#fff; --panel-2:#edf2ef; --panel-3:#e3ece6;
  --text:#172b29; --muted:#526860; --line:#dce5df; --line-strong:#9cb2a6;
  --primary:#167965; --primary-ink:#fff; --secondary:#21695e; --danger:#ae3548; --warning:#81530d;
  --success:#167965; --focus:#167965; --accent-soft:#e0f3eb; --danger-soft:#fcecef; --warning-soft:#fff1d4;
  --violet:#6456a2; --violet-soft:#f0ecfa; --radius:18px; --radius-small:12px;
  --shadow:0 10px 35px rgb(23 43 41 / 10%); --max:1220px;
  --accent:var(--primary); --surface:var(--panel); --surface-2:var(--panel-2); --border:var(--line); --glow-primary:none;
}
:root[data-theme="dark"] {
  color-scheme:dark; --bg:#111b1a; --bg-soft:#192725; --panel:#192725; --panel-2:#223431; --panel-3:#2c413b;
  --text:#eff6f2; --muted:#b0c5bb; --line:#344943; --line-strong:#647f73;
  --primary:#8ee3c5; --primary-ink:#10392d; --secondary:#9ee2d0; --danger:#ff9cac; --warning:#f5cc87;
  --success:#8ee3c5; --focus:#8ee3c5; --accent-soft:#234a3d; --danger-soft:#45292f; --warning-soft:#413725;
  --violet:#cabfff; --violet-soft:#302c47; --shadow:0 10px 35px rgb(0 0 0 / 18%);
}
html { scroll-padding-top:80px; }
body { background:var(--bg); font-family:"Segoe UI",system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.5; }
body { padding-bottom:0; }
body::before, body.role-child::after { display:none; }
body, .role-child { --primary-glow:transparent; }
[hidden] { display:none !important; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button, .button { touch-action:manipulation; }
a, button { overflow-wrap:anywhere; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.ui-icon { width:22px; height:22px; flex:0 0 22px; }
.app-frame.signed-in { display:grid; grid-template-columns:216px minmax(0,1fr); min-height:100dvh; }
.app-sidebar { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; gap:32px; padding:26px 16px 20px; background:var(--panel); border-right:1px solid var(--line); }
.app-sidebar .brand { padding:0 9px; }
.brand-name { font-size:21px; letter-spacing:-.7px; }
.brand-caption { display:block; font-size:10px; font-weight:500; letter-spacing:0; color:var(--muted); margin-top:2px; }
.brand-mark { width:36px; height:36px; border-radius:11px; }
.side-navigation { display:grid; gap:7px; }
.side-navigation a { display:flex; align-items:center; gap:13px; padding:13px 12px; border-radius:12px; color:var(--muted); font-weight:600; min-height:48px; }
.side-navigation a:hover { background:var(--panel-2); text-decoration:none; }
.side-navigation a.active { background:var(--accent-soft); color:var(--primary); }
.sidebar-footnote { margin-top:auto; color:var(--muted); font-size:12px; padding:0 12px; }
.app-page { min-width:0; }
.topbar { height:72px; min-height:64px; padding:10px 32px; background:var(--bg); border:0; box-shadow:none; backdrop-filter:blur(14px); gap:12px; }
.signed-in .topbar-brand { display:none; }
.page-context { color:var(--muted); font-size:13px; flex:1; }
.account-actions { margin-left:auto; gap:8px; }
.profile-chip { background:transparent; border:0; min-height:44px; padding:0; gap:8px; }
.profile-dot { color:var(--primary); background:var(--accent-soft); width:36px; height:36px; font-size:14px; }
.icon-button { width:44px; height:44px; border-radius:12px; background:var(--panel); border:1px solid var(--line); }
.icon-button:hover { color:var(--primary); background:var(--accent-soft); text-decoration:none; }
.page-shell { width:100%; max-width:var(--max); padding:18px 32px 56px; margin-inline:auto; }
.page-header { margin:0 0 22px; }
.page-header h1, .hero h1, .child-welcome h1 { font-size:clamp(25px,3vw,34px); letter-spacing:-1px; line-height:1.18; margin:4px 0 8px; }
.page-header p { font-size:14px; }
.compact-header, .split-header { gap:16px; }
h2 { font-size:19px; } h3 { font-size:16px; }
.eyebrow { color:var(--muted); font-size:11px; letter-spacing:1.1px; }
.card, .hero, .modal, .game-session, .running-hero, .activity-choice, .menu-panel { background:var(--panel); box-shadow:none; border-color:var(--line); }
.card { padding:20px; }
.stat-panel, .usage-device-card, .activity-pick-step, .price-preview, .progressive-preview, .history-row-trigger:hover { background:var(--panel); }
.stat-panel { box-shadow:none; }
.price-warning, .price-alert-panel { color:var(--warning); background:var(--warning-soft); }
.status-pill.bad { color:var(--danger); background:var(--danger-soft); }
.status-pill.cancelled { color:var(--muted); background:var(--panel-2); }
.weekly-grid th, .compact-weekly-grid thead th, .compact-weekly-grid tbody th { background:var(--panel-2); }
.price-cell.is-now { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.price-cell i { color:var(--text); }
.child-price-calendar .readonly-weekly-grid { width:100%; min-width:0; table-layout:fixed; }
.child-price-calendar caption { text-align:left; color:var(--muted); padding:0 0 10px; font-size:.8rem; }
.child-price-calendar .readonly-weekly-grid th:first-child { width:42px; }
.child-price-calendar .readonly-weekly-grid .price-cell { font-size:clamp(.65rem,1.6vw,.82rem); min-height:25px; }
.child-price-calendar .price-cell.is-past { opacity:.7; }
@media(max-width:720px) {
    .child-price-calendar.card { padding:12px 8px; }
    .child-price-calendar .readonly-weekly-grid th:first-child { width:34px; }
    .child-price-calendar .readonly-weekly-grid th, .child-price-calendar .readonly-weekly-grid td { padding:2px 1px; }
    .child-price-calendar .day-full { display:none; }
    .child-price-calendar .day-short { display:block; }
    .child-price-calendar .price-cell .exception-star { right:1px; top:-3px; font-size:.5rem; }
}
.factor-free { color:var(--primary) !important; background:var(--accent-soft) !important; border-color:var(--primary) !important; }
.factor-cheap { color:var(--violet) !important; background:var(--violet-soft) !important; border-color:var(--violet) !important; }
.factor-normal { color:var(--text) !important; background:var(--panel-2) !important; border-color:var(--line-strong) !important; }
.factor-high { color:var(--danger) !important; background:var(--danger-soft) !important; border-color:var(--danger) !important; }
.parent-active-countdown-icon, .parent-active-countdown-time strong, .parent-device-indicator.is-unaccounted, .parent-device-legend i.is-unaccounted, .amount-warning { color:var(--warning); }
.parent-device-indicator.is-counting, .parent-device-legend i.is-counting, .amount-positive { color:var(--primary); }
.amount-negative { color:var(--danger); }
.weekday-picks input:checked + span { color:var(--primary-ink); }
pre { background:var(--panel-2); color:var(--text); }
.toggle-switch > span { background:var(--panel-2); }
.card h2 { margin:0 0 8px; }
.menu-panel { box-shadow:var(--shadow); color:var(--text); }
.menu-panel a, .menu-panel button { min-height:44px; color:var(--text); }
.menu-panel a:hover, .menu-panel button:hover { background:var(--panel-2); }
.menu-panel form { margin:0; }
.button { min-height:46px; border-radius:12px; font-weight:650; padding:11px 16px; font-size:14px; }
.button:hover { transform:none; }
.button-primary { background:var(--primary); color:var(--primary-ink); }
.button-primary:hover { background:var(--primary); filter:brightness(.94); }
.button-secondary { color:var(--text); background:var(--panel); border-color:var(--line-strong); }
.button-secondary:hover { background:var(--panel-2); }
.button-danger { color:var(--danger); background:var(--danger-soft); border-color:var(--danger); }
.button-quiet { color:var(--muted); background:transparent; }
.button-small { min-height:40px; font-size:13px; padding:8px 12px; }
.button-xl, .button-large { min-height:50px; font-size:15px; }
.field > span, .field legend, fieldset.field > legend { color:var(--text); }
input, select, textarea { background:var(--panel); color:var(--text); border-color:var(--line-strong); font-size:16px; min-height:46px; }
input[type=checkbox], input[type=radio] { min-height:0; width:20px; height:20px; flex-shrink:0; }
input::file-selector-button { padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:var(--panel-2); color:var(--text); margin-right:8px; }
.validation { color:var(--danger); }
.flash, .callout, .note-box, .mini-form, .notification-item { border-color:var(--line); background:var(--panel-2); color:var(--text); }
.flash-success, .status-good, .good { color:var(--success); background:var(--accent-soft); }
.flash-error { color:var(--danger); background:var(--danger-soft); }
.flash-info { color:var(--text); background:var(--accent-soft); }
.status-warning, .waiting { color:var(--warning); background:var(--warning-soft); }
.status-pill { border:0; border-radius:7px; font-size:11px; padding:4px 8px; }
.status-pill.good { color:var(--success); background:var(--accent-soft); }
.status-pill.waiting { color:var(--warning); background:var(--warning-soft); }
.toast { color:var(--text); background:var(--panel); box-shadow:var(--shadow); }
.avatar { background:var(--accent-soft); color:var(--primary); }
.modal { color:var(--text); border-radius:20px; box-shadow:var(--shadow); max-height:calc(100dvh - 40px); }
.modal::backdrop { background:rgb(14 28 24 / 45%); backdrop-filter:blur(3px); }
.modal-head { position:sticky; top:0; background:var(--panel); z-index:2; padding-bottom:12px; }
.modal-head h2 { padding-right:8px; }
.modal-head .icon-button { flex-shrink:0; }
.formatted-detail-list li, .permission-chips li.ok { color:var(--text); }
.permission-chips li.missing, .ledger-sign.is-debit, .ledger-amount.is-debit, .ledger-detail-amount.is-debit { color:var(--danger); }
.table-scroll { max-width:100%; overscroll-behavior-x:contain; }
.data-table th { background:var(--panel-2); }
.data-table tr:hover td { background:var(--bg-soft); }
.grid-two, .children-grid { gap:16px; }
.app-page .child-dashboard { max-width:920px; margin-inline:auto; display:grid; gap:20px; }
.child-welcome { text-align:left; margin:0; }
.child-welcome .eyebrow { color:var(--muted); }
.today-credit { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--accent-soft); color:var(--text); border-radius:20px; padding:20px 24px; }
.today-credit:hover { text-decoration:none; }
.today-credit > div { display:grid; gap:3px; }
.today-credit strong { font-size:36px; line-height:1.15; letter-spacing:-1px; color:var(--primary); }
.today-credit strong small { font-size:15px; font-weight:500; color:var(--primary); }
.today-credit > .ui-icon { width:26px; height:26px; }
.today-title { margin:0; font-size:18px; }
.child-primary-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; }
.child-primary-actions a { background:var(--panel); border:1px solid var(--line); border-radius:18px; color:var(--text); padding:20px; min-height:130px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; gap:12px; text-align:left; box-shadow:none; }
.child-primary-actions a:hover { background:var(--accent-soft); transform:none; text-decoration:none; }
.child-primary-actions .action-symbol { grid-column:1 / -1; color:var(--primary); display:grid; place-items:center; background:var(--accent-soft); width:40px; height:40px; border-radius:12px; }
.child-primary-actions a > span:not(.action-symbol) { display:grid; gap:5px; }
.child-primary-actions a strong { font-size:18px; }
.child-primary-actions a small { font-size:13px; font-weight:400; }
.running-hero { border-radius:20px; padding:22px; margin:0; border:1px solid var(--line); }
.running-hero-time { font-size:clamp(32px,6vw,48px); color:var(--primary); }
.game-session { padding:26px 20px; border-radius:20px; }
.game-session-grid, .credit-core-glow { display:none; }
.countdown-huge { font-size:clamp(48px,10vw,80px); color:var(--primary); }
.game-session.is-overdue, .running-hero.is-overdue { background:var(--danger-soft); border-color:var(--danger); }
.review-mode-banner { background:var(--warning-soft); color:var(--text); border-color:var(--warning); box-shadow:none; margin:0; }
.review-mode-icon { background:var(--warning-soft); color:var(--warning); }
.review-mode-banner p { color:var(--muted); }
.section-tabs { display:flex; gap:6px; margin:0 0 20px; padding:4px; width:fit-content; max-width:100%; background:var(--panel-2); border-radius:13px; }
.section-tabs a { display:flex; align-items:center; gap:8px; padding:10px 16px; min-height:44px; border-radius:10px; color:var(--muted); font-weight:600; }
.section-tabs a.active { background:var(--panel); color:var(--primary); box-shadow:0 1px 4px rgb(0 0 0 / 5%); }
.section-tabs a:hover { text-decoration:none; }
.child-device-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.child-device-card { display:grid; gap:14px; }
.child-device-card .section-heading { margin:0; }
.child-device-card h2 { font-size:18px; }
.child-device-card p { margin:0; }
.child-device-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; align-self:end; }
.child-device-card .child-device-actions form { display:flex; margin:0; min-width:0; }
.child-device-actions .button { width:100%; height:100%; min-width:0; min-height:48px; padding:10px 8px; line-height:1.3; }
.device-name-heading { display:flex; align-items:center; gap:8px; }
.device-name-heading > span { min-width:0; overflow-wrap:anywhere; }
.device-name-heading .ui-icon { align-self:flex-start; margin-top:.15em; }
.device-detail { display:grid; gap:20px; }
.device-detail form { display:grid; gap:12px; }
.device-detail dl { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; }
.device-detail dd { margin:0; }
.child-profile { display:grid; gap:20px; }
.profile-summary { display:flex; gap:16px; align-items:center; }
.profile-summary h1, .profile-summary p { margin:0; }
.profile-summary .avatar { width:56px; height:56px; font-size:23px; }
.profile-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-links a { display:flex; align-items:center; gap:14px; color:var(--text); min-height:80px; }
.profile-links span { display:grid; gap:2px; }
.profile-links .ui-icon { color:var(--primary); }
.theme-field { max-width:320px; }
.help-steps { padding-left:22px; margin:0; display:grid; gap:14px; }
.help-steps li { padding-left:4px; }
.help-steps p { margin:4px 0 0; }
.help-grid { gap:14px; }
.role-child .page-header:has(.toolbar-menu) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; }
.learning-table { width:100%; }
.learning-section { overflow-x:auto; }
.home-alone-panel { gap:10px; }
.home-alone-panel h2 { font-size:18px; margin:0; }
.home-alone-panel p { margin:0; font-size:13px; }
.home-alone-actions { grid-template-columns:1fr 1fr; gap:10px; }
.home-alone-actions .button { font-size:14px; min-height:50px; padding:10px; }
.activity-filter-panel { background:var(--bg-soft); border-color:var(--line); padding:16px; }
.activity-tag-filters button, .device-filter button { background:var(--panel); color:var(--muted); border-color:var(--line); min-height:42px; padding:8px 13px; }
.activity-tag-filters button[aria-pressed=true], .device-filter button.is-active { background:var(--accent-soft); color:var(--primary); border-color:var(--primary); }
.activity-choice, .activity-choice.activity-choice-edupage { background:var(--panel); border-color:var(--line); padding:16px; }
.activity-choice:has(input:checked), .activity-choice.activity-choice-edupage:has(input:checked) { background:var(--accent-soft); border-color:var(--primary); }
.activity-choice-edupage .activity-card-tags span, .edupage-activity-badge { color:var(--violet); background:var(--violet-soft); }
.edupage-activity-bonus { color:var(--violet); }
.activity-choice.activity-choice-promotion { background:var(--warning-soft); border-color:var(--warning); box-shadow:none; }
.activity-choice.activity-choice-promotion:has(input:checked) { background:var(--accent-soft); border-color:var(--primary); box-shadow:none; }
.activity-promotion-badge { color:var(--warning); background:var(--warning-soft); }
.activity-promotion-end { color:var(--warning); }
.recommended-break > strong { color:var(--text); }
.recommended-break.is-completed > strong { color:var(--primary); }
.activity-card-tags span { color:var(--muted); background:var(--panel-2); }
.activity-choice h3 { font-size:16px; }
.activity-choice-grid { gap:12px; }
.activity-choice-description { color:var(--muted); }
.activity-choice-credits, .console-balance strong { color:var(--primary); }
.device-choice, .device-choice:has(input:checked), .pricing-stat, .price-stat { background:var(--panel-2); color:var(--text); }
.device-choice:has(input:checked) { background:var(--accent-soft); border-color:var(--primary); }
.electronics-start-layout { gap:20px; }
.electronics-start-layout > *, .retroactive-start-panel, .retroactive-start-panel label { min-width:0; }
.electronics-console, .pricing-console { background:var(--panel); box-shadow:none; }
.session-device-badge { background:var(--accent-soft); color:var(--primary); border-color:var(--line); }
.retroactive-start-panel { background:var(--warning-soft); border-color:var(--warning); }
.device-choice:has(input:checked) .device-check, .device-choice-check, .stat-price .stat-icon, .activity-choice-check { color:var(--primary-ink); }
.device-map { position:relative; width:min(100%,768px); margin-inline:auto; background:var(--panel-2); border:1px solid var(--line); overflow:hidden; border-radius:14px; }
.device-map-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.device-map-tiles img { display:block; width:100%; height:auto; aspect-ratio:1; }
.device-map-pin { position:absolute; transform:translate(-50%,-50%); width:25px; height:25px; display:grid; place-items:center; border:4px solid #fff; background:#ae3548; color:#ae3548; border-radius:50%; box-shadow:0 1px 8px #0008; }
.device-map-attribution { position:absolute; right:0; bottom:0; padding:3px 6px; background:#fffe; color:#172b29; font-size:10px; }
.device-map-attribution a { color:#21695e; }
.auth-intro h1 { font-size:clamp(40px,6vw,66px); line-height:1.08; }
.mobile-dock { display:none; }
@media (min-width:721px) and (max-width:1050px) {
  .app-frame.signed-in { grid-template-columns:78px minmax(0,1fr); }
  .app-sidebar { padding:20px 10px; gap:24px; }
  .app-sidebar .brand { padding:0; justify-content:center; }
  .app-sidebar .brand-name, .app-sidebar .nav-label, .sidebar-footnote { display:none; }
  .side-navigation a { justify-content:center; padding:13px; }
  .page-shell { padding:16px 24px 40px; }
  .topbar { padding-inline:24px; }
  .electronics-start-layout { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  body { font-size:14px; }
  .app-frame.signed-in { display:block; }
  .app-sidebar, .signed-in .page-context { display:none; }
  .signed-in .topbar-brand { display:inline-flex; }
  .topbar { height:62px; min-height:62px; padding:8px 16px; }
  .topbar .brand-mark { width:31px; height:31px; }
  .topbar .brand-name { display:inline-block; font-size:19px; }
  .topbar .icon-button { width:38px; height:42px; border:0; background:transparent; }
  .topbar .user-name { display:none; }
  .topbar .profile-dot { width:32px; height:32px; }
  .account-actions { gap:4px; }
  .page-shell { width:100%; padding:14px 16px calc(92px + env(safe-area-inset-bottom)); }
  .page-header { margin-bottom:18px; }
  .page-header h1, .child-welcome h1 { font-size:27px; }
  .split-header { align-items:start; flex-wrap:wrap; gap:12px; }
  .card { padding:17px; border-radius:16px; }
  .child-dashboard { gap:16px !important; }
  .today-credit { padding:19px 20px; }
  .today-credit strong { font-size:34px; }
  .child-primary-actions { gap:11px; }
  .child-primary-actions a { padding:17px 14px; gap:10px; min-height:154px; }
  .child-primary-actions a > .ui-icon { display:none; }
  .child-primary-actions a strong { font-size:17px; }
  .child-primary-actions a small { font-size:12px; }
  .running-hero { display:grid; gap:16px; padding:20px; }
  .running-hero .button { width:100%; }
  .mobile-dock { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; inset:auto 0 0; gap:2px; padding:6px 7px calc(6px + env(safe-area-inset-bottom)); width:100%; border-radius:0; border:0; border-top:1px solid var(--line); background:var(--panel); box-shadow:none; z-index:45; }
  .role-child .mobile-dock { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .mobile-dock a { min-width:0; min-height:54px; padding:6px 1px 4px; gap:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); border-radius:11px; }
  .mobile-dock a.active { color:var(--primary); background:var(--accent-soft); }
  .mobile-dock a .nav-label { font-size:10px; font-weight:600; line-height:1.4; white-space:nowrap; }
  .mobile-dock a:hover { text-decoration:none; }
  .mobile-dock .ui-icon { width:22px; height:22px; }
  .toast-region { bottom:calc(82px + env(safe-area-inset-bottom)); }
  .form-grid, .form-grid.thirds, .history-filter-form, .ledger-detail-grid, .grid-two, .child-device-list, .profile-links, .electronics-start-layout { grid-template-columns:1fr; }
  .child-overview-links { gap:12px; }
  .child-overview-links > a { grid-template-columns:1fr; }
  .child-overview-links > a > span { display:none; }
  .modal { max-width:calc(100% - 16px); width:calc(100% - 16px); max-height:calc(100dvh - 24px); padding:20px; margin:auto; border-radius:20px; }
  .modal .button-row > *, .modal .decision-grid { min-width:0; }
  .modal .decision-grid { grid-template-columns:1fr; }
  .activity-filter-options { grid-template-columns:1fr 1fr; }
  .activity-choice-grid { grid-template-columns:1fr; }
  .activity-choice { min-height:0; }
  .help-grid { grid-template-columns:1fr; }
  .home-alone-checklist-row { align-items:start; }
  .home-alone-actions { grid-template-columns:1fr 1fr; }
  .learning-table thead { display:none; }
  .learning-table, .learning-table tbody, .learning-table tr, .learning-table td { display:block; min-width:0; }
  .learning-table tr { padding:14px 0; border-top:1px solid var(--line); }
  .learning-table td { border:0; padding:5px 0; }
  .auth-shell { grid-template-columns:1fr; gap:24px; min-height:0; }
  .auth-intro h1 { font-size:38px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}