:root{
  --bg:#EFF1F4; --surface:#FFFFFF; --surface-2:#F6F7F9; --ink:#1B2230; --ink-soft:#5A6376; --line:#DDE1E8;
  --accent:#3E7CB1; --accent-ink:#fff; --good:#3E9C86; --alert:#C0563E; --warn:#C8873B; --exec:#7A5C9E;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0F1218; --surface:#171B23; --surface-2:#1E232D; --ink:#E7EAF0; --ink-soft:#9AA3B5; --line:#2A303C; } }
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;-webkit-font-smoothing:antialiased}
#app{max-width:880px;margin:0 auto;padding:18px 16px 60px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.top{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:8px}
.brand{font-weight:700;font-size:18px}.brand small{font-weight:500;color:var(--ink-soft);margin-left:6px}
.lang{display:flex}.lang button{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);padding:6px 12px;cursor:pointer;font:inherit;font-size:13px}
.lang button:first-child{border-radius:8px 0 0 8px}.lang button:last-child{border-radius:0 8px 8px 0;border-left:0}
.lang button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
h1{font-size:26px;margin:18px 0 4px}h2{font-size:18px;margin:0 0 8px}h3{font-size:15px;margin:14px 0 6px}
.soft{color:var(--ink-soft)}.small{font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.pick{display:block;text-align:left;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:18px;padding:22px 18px;cursor:pointer;font:inherit;transition:border-color .12s,transform .12s}
.pick:hover,.pick:focus-visible{border-color:var(--accent);outline:none}.pick:active{transform:scale(.99)}
.pick .em{font-size:44px;line-height:1}.pick b{display:block;font-size:20px;margin:10px 0 2px}
.pick.off{opacity:.7}.pick .soon{display:inline-block;margin-top:8px;font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0;max-width:520px}
label{display:block;font-size:13px;color:var(--ink-soft);margin:12px 0 3px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink)}
input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[aria-invalid=true]{border-color:var(--alert)}
.pw{position:relative}.pw input{padding-right:64px}.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;padding:6px 8px}
.hint{font-size:12px;color:var(--ink-soft);margin-top:3px}
.btn{font:inherit;font-weight:600;padding:11px 18px;border-radius:10px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;margin-top:16px;min-height:44px}
.btn[disabled]{opacity:.6;cursor:progress}
.btn.alt{background:transparent;color:var(--accent);border:1px solid var(--line)}.btn.wide{width:100%}
.tabs{display:flex;gap:6px;margin-bottom:6px}.tabs button{flex:1;padding:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);border-radius:10px;cursor:pointer;font:inherit}.tabs button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.err{color:var(--alert);margin-top:12px;font-size:14px;min-height:20px}.ok{color:var(--good)}
.notice{background:color-mix(in srgb,var(--warn) 16%,transparent);border-radius:12px;padding:10px 14px;font-size:14px;margin:12px 0}
.back{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:8px 0;margin:6px 0}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;font-size:13px;padding:6px 0;text-decoration:underline}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.center{text-align:center;padding:60px 0}
/* the child's sign-in: bigger, friendlier */
.kid h1{font-size:32px}
.kid .card{border-width:2px;border-radius:22px;padding:22px}
.kid input{font-size:20px;padding:13px 14px;border-radius:14px}
.kid .btn{font-size:20px;min-height:56px;border-radius:16px;background:var(--good)}
.kid .pin{font-size:30px;letter-spacing:.4em;text-align:center}
.kid .err{font-size:17px}
.avatar{width:84px;height:84px;border-radius:50%;background:var(--good);color:#fff;font-size:40px;font-weight:700;display:grid;place-items:center;margin:4px auto 6px}
.hello{text-align:center;font-size:24px;font-weight:700;margin:0}
.hello-sub{text-align:center;color:var(--ink-soft);margin:2px 0 8px}
@media (max-width:480px){
  #app{padding-top:12px}h1{font-size:23px}.kid h1{font-size:27px}.card{padding:14px;max-width:none}.pick{padding:16px 14px}.pick .em{font-size:36px}
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}.pick{transition:none}}