:root {
  --navy: #01233e;
  --orange: #fe5304;
  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1a1a1a;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text);
}
header.top {
  background: var(--navy); color: #fff; padding: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
header.top h1 { font-size: 1.15rem; margin: 0; }
header.top .motto { font-size: 0.75rem; opacity: 0.8; }
main { padding: 16px; max-width: 640px; margin: 0 auto; }
.card { background: var(--card); border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.bigbtn {
  display: flex; align-items: center; width: 100%; min-height: 56px;
  padding: 14px 16px; margin-bottom: 10px; border: none; border-radius: 12px;
  background: var(--navy); color: #fff; font-size: 1.05rem; text-align: left;
  cursor: pointer;
}
.bigbtn:active { opacity: 0.85; }
.bigbtn.orange { background: var(--orange); color: #01233e; font-weight:600; }
.bigbtn.ghost { background: #e9ebf0; color: var(--text); }
input[type=email], input[type=text], input[type=tel] {
  width: 100%; padding: 14px; font-size: 1.05rem; border: 1px solid #c9cdd6;
  border-radius: 10px; margin-bottom: 12px;
}
label { font-weight: 600; display: block; margin-bottom: 6px; }
.muted { color: #666; font-size: 0.9rem; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.pill.ok { background: #e2f4e5; color: #1c6b2a; }
.pill.warn { background: #fdf0e2; color: #9a5410; }
.error { color: #b3261e; margin: 8px 0; }
.notice { border-left: 4px solid var(--orange); }
ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { padding: 10px 0; border-bottom: 1px solid #eee; }

input[type=date], input[type=time], input[type=number], select, textarea {width:100%; min-height:48px; padding:12px; font:inherit; border:1px solid #aab2bc; border-radius:10px; margin-bottom:12px;}
.field-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
fieldset {border:1px solid #c9cdd6;border-radius:10px;margin:12px 0;padding:12px;}
legend {font-weight:600;}
button:disabled {opacity:.6;cursor:wait;}
input:disabled,select:disabled,textarea:disabled {color:#333;background:#eee;}
h2 {font-size:1.15rem;}

input[type=search] {width:100%;min-height:48px;padding:12px;font:inherit;border:1px solid #aab2bc;border-radius:10px;}
summary {padding:16px 0;min-height:52px;font-weight:600;cursor:pointer;border-bottom:1px solid #ddd;}
.handbook-text {white-space:pre-wrap;line-height:1.55;padding:12px 0;}

.score-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.score-grid .bigbtn {justify-content:center;font-size:1.5rem;min-height:70px;}
.smallbtn {min-width:48px;min-height:48px;margin:4px;padding:8px;border-radius:8px;border:1px solid #aab2bc;background:#e9ebf0;font:inherit;}
.lives-row {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;}
.timer {font-size:2rem;font-variant-numeric:tabular-nums;}
.compare-text {white-space:pre-wrap;overflow-wrap:anywhere;font:0.9rem ui-monospace,monospace;line-height:1.5;}