:root { --ink:#14232d; --muted:#586874; --teal:#0b6e6e; --red:#b8322a; --amber:#a86a00; --green:#2b7a4b; }
* { box-sizing:border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin:0; font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:#f2f5f7; }
header { background:#10202a; color:#fff; font-weight:650; font-size:1.1rem; padding:.9rem 1rem; display:flex; gap:.5rem; align-items:center; }
main { padding:1.2rem 1rem 3rem; max-width:560px; margin:0 auto; }
h1 { font-size:1.5rem; line-height:1.2; margin:0 0 .5rem; }
label { display:block; font-weight:600; font-size:.92rem; margin:1rem 0 .25rem; }
input, textarea { width:100%; font:inherit; padding:.7rem; border:1px solid #b9c6ce; border-radius:8px; background:#fff; color:inherit; }
button { width:100%; margin-top:1rem; font:inherit; font-weight:650; color:#fff; background:var(--teal); border:0; border-radius:8px; padding:.85rem; }
button:disabled { opacity:.6; }
input:focus-visible, textarea:focus-visible, button:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
#result { background:#fff; border-radius:10px; padding:1rem; margin-top:1.2rem; border:1px solid #d8e0e5; }
.verdict { font-weight:650; font-size:1.2rem; margin:0 0 .5rem; }
.verdict.bad { color:var(--red); } .verdict.warn { color:var(--amber); } .verdict.good { color:var(--green); }
ul { margin:0 0 .6rem; padding-left:1.1rem; }
.fine { color:var(--muted); font-size:.9rem; }
.msg { color:var(--red); font-weight:600; min-height:1.4em; }