:root { color-scheme:light; --ink:#17231f; --muted:#64736c; --line:#dfe9e2; --green:#1f8f5f; --mint:#eff8f2; --yellow:#fff4cf; --blue:#2563eb; --coral:#b7422f; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { max-width:100%; overflow-x:hidden; }
body { margin:0; font:16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; color:var(--ink); background:#f6faf7; }
button,input,select { font:inherit; }
button { cursor:pointer; border:0; }
button:disabled { cursor:wait; opacity:.65; }
.shell { width:100%; min-width:0; max-width:1180px; margin:auto; padding:28px 20px 60px; }
.panel,.card { background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 30px rgba(35,65,48,.06); }
.login-panel { width:100%; min-width:0; max-width:520px; margin:7vh auto; padding:34px; }
.login-panel > * { min-width:0; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--green); color:#fff; font-size:25px; }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.15; margin:0 0 12px; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { font-size:42px; max-width:760px; }
h2 { font-size:28px; }
.muted,.hint { color:var(--muted); }
.hint { font-size:13px; }
label { display:grid; gap:6px; margin:18px 0; font-weight:700; }
input,select { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:6px; background:#fff; }
input:focus,select:focus { outline:3px solid rgba(37,99,235,.16); border-color:var(--blue); }
.primary,.secondary,.ghost,.nav { padding:12px 16px; border-radius:6px; font-weight:750; }
.primary { width:100%; color:#fff; background:var(--green); }
.secondary { color:var(--green); background:#e6f5eb; }
.ghost { color:var(--green); background:transparent; border:1px solid var(--line); }
.button-link { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 16px; border-radius:6px; font-weight:750; text-decoration:none; }
.role-switch { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:24px 0 16px; }
.role-button { min-width:0; min-height:52px; padding:12px 6px; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:#fff; font-weight:800; }
.role-button.active { border-color:var(--green); color:var(--green); background:#e7f5ec; }
.role-button[data-role="child"].active { border-color:var(--blue); color:var(--blue); background:#eef4ff; }
.auth-tabs { display:flex; gap:20px; border-bottom:1px solid var(--line); }
.auth-tab { min-height:48px; padding:12px 2px 10px; border-bottom:3px solid transparent; color:var(--muted); background:transparent; font-weight:800; }
.auth-tab.active { color:var(--ink); border-color:var(--green); }
.text-action { display:block; min-height:44px; margin:10px auto 0; padding:8px 4px; color:var(--green); background:transparent; font-weight:750; text-decoration:underline; text-underline-offset:3px; }
.text-action:hover,.text-action:focus-visible { color:var(--ink); }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:8px 0 28px; }
.topbar h1 { font-size:32px; }
.notice { padding:14px 16px; margin-bottom:18px; border-left:4px solid var(--green); background:var(--yellow); border-radius:4px; }
.notice[data-kind="error"] { color:#7a271a; border-color:var(--coral); background:#fff0ed; }
.notice[data-kind="success"] { border-color:var(--green); background:#e7f5ec; }
.layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:22px; }
.sidebar { display:grid; align-content:start; gap:6px; }
.nav { text-align:left; color:var(--muted); background:transparent; }
.nav:hover,.nav.active { color:var(--green); background:#e7f5ec; }
.content { min-width:0; }
.view { display:grid; gap:18px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.card { padding:20px; }
.card h3 { font-size:20px; }
.metric { font-size:30px; font-weight:800; }
.metric small { display:block; font-size:13px; color:var(--muted); font-weight:600; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.stack { display:grid; gap:10px; }
.tag { display:inline-block; padding:4px 8px; border-radius:20px; background:#e9f6ed; color:var(--green); font-size:12px; font-weight:800; }
.child-option,.reward-option { width:100%; display:flex; justify-content:space-between; padding:14px; text-align:left; border:1px solid var(--line); border-radius:6px; background:#fff; }
.child-option.selected { border:2px solid var(--green); background:#edf9f0; }
.child-card { display:grid; gap:12px; }
.child-card .child-option { padding:0 0 12px; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.child-card .child-option.selected { padding:10px; border:2px solid var(--green); border-radius:6px; }
.inline-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.inline-actions > * { flex:1 1 150px; min-height:48px; }
.invite-code { display:grid; gap:2px; margin-top:14px; padding:16px; border:2px dashed var(--green); border-radius:6px; background:var(--mint); text-align:center; }
.invite-code strong { font-size:30px; letter-spacing:.12em; color:var(--green); }
.invite-code small { color:var(--muted); }
.invitation-result { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:20px; align-items:center; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.qr-code { display:block; width:180px; height:180px; padding:8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.task { padding:30px; text-align:center; background:var(--mint); border-radius:8px; }
.task-question { font-size:42px; font-weight:850; margin:20px 0; }
.answer-row { display:flex; gap:8px; }
.answer-row button { min-width:120px; }
.details { display:grid; gap:0; margin:0; }
.details div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.details div:last-child { border-bottom:0; }
.details dt { color:var(--muted); }
.details dd { margin:0; font-weight:750; text-align:right; overflow-wrap:anywhere; }
.device-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.device-row:last-child { border-bottom:0; }
.danger { color:var(--coral); }
.muted-tag { color:var(--muted); background:#f1f3f2; }
@media (max-width:760px) {
  .shell{padding:18px 14px 40px}.layout{grid-template-columns:1fr}.sidebar{display:flex; overflow:auto}.nav{white-space:nowrap}
  .login-panel{margin:3vh auto;padding:24px}.task-question{font-size:34px}.topbar{align-items:center}h1{font-size:30px}
  .role-button{font-size:14px}
  .invitation-result{grid-template-columns:1fr}.qr-code{width:100%;max-width:220px;height:auto;margin:auto}.answer-row{flex-direction:column}
}