/* 登入頁（唯一不用登入的頁面）：預設淺色，右上角切換深色；選擇記在 kidgames.mode（和導覽列共用） */
:root{
  color-scheme: light;
  --bg:#F6F3EC; --panel:#FFFFFF; --ink:#1E2230; --ink-2:#596173; --line:#E0DACD; --chip:#EFEADF;
  --brick:#D9482B; --brick-ink:#FFFFFF; --gear:#2F6F8F; --leaf:#3D8B4F; --bad:#B42318; --bad-bg:#FDECEA; --ok-bg:#E8F5EC;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#14171D; --panel:#1D222B; --ink:#ECEFF4; --ink-2:#A8B0BF; --line:#2F3542; --chip:#262C37;
  --brick:#FF7A5C; --brick-ink:#1B0A06; --gear:#6FB7D8; --leaf:#74C987; --bad:#FF8A80; --bad-bg:#3A1F1E; --ok-bg:#1E3326;
}
@media print{ :root{ color-scheme:light; --bg:#fff; --panel:#fff; --ink:#000; --ink-2:#333; --line:#ccc } }
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh; background:var(--bg); color:var(--ink); font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif; font-size:15px; line-height:1.55}
[hidden]{display:none!important}
a{color:var(--gear)}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel)}
.brand{display:inline-flex; align-items:center; gap:8px; font-weight:900; font-size:17px; color:var(--ink); text-decoration:none; letter-spacing:.02em}
.logo{font-size:22px}
.theme{font:inherit; font-size:13px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); border-radius:999px; padding:5px 12px; cursor:pointer; white-space:nowrap}
.wrap{max-width:460px; margin:0 auto; padding:28px 16px 40px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px 22px 24px; box-shadow:0 10px 30px rgba(30,34,48,.08)}
.hello{margin:0 0 14px; color:var(--ink-2); font-size:14px}
.tabs{display:flex; gap:4px; background:var(--chip); padding:4px; border-radius:12px; margin-bottom:16px}
.tabs button{flex:1; font:inherit; font-weight:700; border:0; background:transparent; color:var(--ink-2); padding:8px; border-radius:9px; cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
h1{font-size:21px; margin:0 0 12px}
label{display:block; margin:12px 0 0; font-weight:700; font-size:14px}
input{display:block; width:100%; margin-top:5px; font:inherit; font-weight:400; font-size:16px; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink)}
input:focus{outline:none; border-color:var(--gear); box-shadow:0 0 0 3px color-mix(in srgb, var(--gear) 22%, transparent)}
.hint{display:block; margin-top:4px; font-weight:400; font-size:12.5px; color:var(--ink-2)}
.opt{font-weight:400; font-size:12.5px; color:var(--ink-2)}
.pw{position:relative; display:block}
.pw input{padding-right:46px}
.eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); margin-top:2.5px; border:0; background:transparent; font-size:17px; cursor:pointer; padding:6px; border-radius:8px; color:var(--ink-2)}
.eye[aria-pressed="true"]{background:var(--chip)}
.rules{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:2px; font-size:12.5px; color:var(--ink-2)}
.rules li::before{content:"○ "; color:var(--ink-2)}
.rules li.ok{color:var(--leaf)} .rules li.ok::before{content:"✓ "; color:var(--leaf)}
.rules li.bad{color:var(--bad)} .rules li.bad::before{content:"✗ "; color:var(--bad)}
.go{display:block; width:100%; margin-top:18px; font:inherit; font-size:17px; font-weight:900; border:0; border-radius:12px; padding:12px; background:var(--brick); color:var(--brick-ink); cursor:pointer}
.go:disabled{opacity:.6; cursor:progress}
.alt{font:inherit; font-weight:700; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); border-radius:12px; padding:11px 16px; cursor:pointer; margin-top:18px}
.row{display:flex; gap:10px; align-items:stretch}
.row .go{flex:1}
.msg{margin:0 0 6px; padding:10px 12px; border-radius:10px; background:var(--bad-bg); color:var(--bad); font-size:14px; font-weight:700}
.msg.ok{background:var(--ok-bg); color:var(--leaf)}
.small{font-size:13px; color:var(--ink-2); margin:10px 0 0}
.center{text-align:center}
.big{font-size:48px; line-height:1.2}
.center .row{justify-content:center}
.foot{text-align:center; font-size:12.5px; color:var(--ink-2); margin-top:16px}
.theme:focus-visible, .tabs button:focus-visible, .go:focus-visible, .alt:focus-visible, .eye:focus-visible, a:focus-visible{outline:2px solid var(--brick); outline-offset:2px}
@media (max-width:420px){ .card{padding:18px 16px 20px; border-radius:14px} .wrap{padding-top:18px} }