:root{
  --bg:#ffffff; --surface:#f5f4ef; --card:#ffffff; --text:#1f1f1d; --muted:#5f5e5a;
  --hint:#888780; --border:#e3e1da; --accent:#185fa5; --accent-bg:#e6f1fb;
  --ok:#0f6e56; --ok-bg:#e1f5ee; --warn:#854f0b; --warn-bg:#faeeda;
  --danger:#a32d2d; --danger-bg:#fcebeb; --radius:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1a1a18; --surface:#242422; --card:#2c2c2a; --text:#f1efe8; --muted:#b4b2a9;
    --hint:#888780; --border:#3a3a37; --accent:#85b7eb; --accent-bg:#0c447c;
    --ok:#5dcaa5; --ok-bg:#085041; --warn:#ef9f27; --warn-bg:#633806;
    --danger:#f09595; --danger-bg:#791f1f;
  }
}
*{box-sizing:border-box;}
body{font-family:var(--font); color:var(--text); background:var(--bg);
  margin:0; padding:20px; line-height:1.6; font-size:16px;}
.wrap{max-width:640px; margin:0 auto;}
h1{font-size:20px; font-weight:500; margin:0 0 4px;}
.sub{font-size:14px; color:var(--muted); margin:0 0 20px;}
.card{background:var(--surface); border-radius:12px; padding:20px; margin-bottom:14px;}
label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px;}
input,select,button{font-family:inherit; font-size:15px; color:var(--text);}
input[type=number],input[type=text],select{
  width:100%; height:38px; padding:0 10px; background:var(--card);
  border:0.5px solid var(--border); border-radius:var(--radius);}
input:focus,select:focus{outline:none; box-shadow:0 0 0 2px var(--accent-bg);}
button{cursor:pointer; background:var(--card); border:0.5px solid var(--border);
  border-radius:var(--radius); padding:8px 14px; transition:background .12s;}
button:hover{background:var(--surface);}
button:active{transform:scale(0.98);}
.row{display:flex; gap:8px; flex-wrap:wrap;}
.result{font-size:32px; font-weight:500; color:var(--accent);}
.pill{font-size:12px; padding:2px 8px; border-radius:20px; display:inline-block;}
.note{font-size:12px; color:var(--hint); margin:6px 0 0;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
.src{font-size:11px; color:var(--hint); margin-top:16px; padding-top:12px;
  border-top:0.5px solid var(--border);}