:root { --fg:#1a1a1a; --sub:#666; --line:#e3e3e3; --blue:#0064d2; --bg:#fafafa; }
* { box-sizing:border-box; }
body { margin:0; padding:24px; max-width:760px; margin-inline:auto;
  font-family:-apple-system,"Segoe UI","Yu Gothic UI",sans-serif; color:var(--fg); background:var(--bg); }
body.center { display:flex; align-items:center; justify-content:center; min-height:100vh; }
header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
h1 { font-size:20px; margin:0; }
h2 { font-size:14px; margin:28px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.logout { font-size:12px; color:var(--sub); }
.saved { background:#e8f5e9; border:1px solid #b8e0bd; padding:10px 12px; border-radius:6px; font-size:13px; }

.cards { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 10px;
  text-align:center; font-size:11px; color:var(--sub); }
.card .num { display:block; font-size:22px; font-weight:700; color:var(--fg); }
.card.hit .num { color:var(--blue); }

form { background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 18px 20px; margin-top:18px; }
.row { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #f2f2f2; }
.row:last-of-type { border-bottom:none; }
.txt b { display:block; font-size:14px; }
.txt small { color:var(--sub); font-size:12px; }
.num-input { width:96px; padding:8px; border:1px solid #ccc; border-radius:6px; font-size:14px; text-align:right; }

.switch { position:relative; display:inline-block; width:46px; height:26px; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#ccc; border-radius:26px; transition:.2s; cursor:pointer; }
.slider:before { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider { background:var(--blue); }
.switch input:checked + .slider:before { transform:translateX(20px); }

button { margin-top:18px; width:100%; padding:12px; font-size:15px; font-weight:600;
  color:#fff; background:var(--blue); border:none; border-radius:6px; cursor:pointer; }
button:hover { background:#0056b3; }
.note { font-size:12px; color:var(--sub); line-height:1.7; margin-top:18px; }
.login { width:320px; }
.login .hint { font-size:12px; color:var(--sub); margin:0 0 12px; }
.login input { width:100%; margin-bottom:8px; padding:11px; border:1px solid #ccc; border-radius:6px; font-size:15px; }
.error { color:#c00; font-size:13px; }