:root { --teal:#006970; --coral:#FF6B6B; --gold:#FFC300; --bg:#FFF8F0; --ink:#1A1A2E; --muted:#7A7568; --amber:#C98A00; --red:#C0392B; }
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--ink); font-family:"Helvetica Neue",Arial,sans-serif; }
.bar { background:linear-gradient(135deg,#00565E,#006970 55%,#00808B); color:#fff; padding:calc(14px + env(safe-area-inset-top)) 16px 14px; display:flex; justify-content:space-between; align-items:center; }
.brand { font-weight:800; font-size:18px; display:flex; align-items:center; gap:10px; }
.mark { height:26px; width:auto; display:block; } .tag { color:var(--gold); font-size:10px; font-weight:700; letter-spacing:2px; }
main { max-width:720px; margin:0 auto; padding:16px; }
h1 { font-size:24px; margin:8px 0 14px; } h1 small { color:var(--muted); font-size:14px; font-weight:600; }
h2 { font-size:15px; text-transform:uppercase; letter-spacing:1.5px; color:var(--teal); margin-bottom:10px; }
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.tile, .card { background:#fff; border:1px solid #EDE3D4; border-radius:12px; padding:12px 14px; }
.card { margin-top:14px; } .narrow { max-width:380px; margin:40px auto; }
.lab { font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.val { font-size:26px; font-weight:800; margin-top:4px; } .sub, .note { font-size:12px; color:var(--muted); margin-top:4px; }
.status { list-style:none; padding:0; } .status li { display:flex; justify-content:space-between; padding:8px 0 8px 12px; border-left:4px solid var(--teal); margin-bottom:6px; font-size:14px; }
.status li.warn { border-color:var(--amber); } .status li.bad { border-color:var(--red); color:var(--red); }
label { display:block; font-size:13px; font-weight:700; margin-top:10px; }
input { width:100%; padding:10px; border:1px solid #DDD3C4; border-radius:8px; font-size:16px; margin-top:4px; }
button { margin-top:12px; background:var(--teal); color:#fff; border:0; border-radius:8px; padding:10px 16px; font-weight:700; font-size:15px; }
button.link { background:none; color:var(--teal); padding:0; margin:0; }
.err { color:var(--red); font-weight:700; margin:8px 0; }
.foot { display:flex; justify-content:space-between; margin:20px 0; } a { color:var(--teal); }
@media (min-width:640px) { .tiles { grid-template-columns:repeat(3,1fr); } }