:root{--bg:#0b1020;--card:#111833;--text:#e8ecff;--muted:#9aa7d7;--ok:#10b981;--err:#ef4444;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:var(--bg);color:var(--text)}
header,footer{padding:12px 16px;background:#0d142a;border-bottom:1px solid #202a55}
footer{border-top:1px solid #202a55;border-bottom:none}
h1,h2{margin:0 0 8px 0}
main{max-width:980px;margin:24px auto;padding:0 16px}
.card{background:var(--card);padding:16px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.3);margin-bottom:16px}
button{background:#4453c4;color:white;border:0;padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.1)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.city{display:block;padding:14px 16px;background:#0f1733;border-radius:12px;text-decoration:none;color:#dfe6ff;border:1px solid #202a55}
.city:hover{background:#131d3f}
.row{display:flex;gap:8px;margin-top:10px}
.row input{flex:1;padding:10px;border-radius:10px;border:1px solid #2a356b;background:#0f1733;color:#fff}
.result{margin-top:12px;padding:10px;border-radius:10px;border:1px solid #2a356b;background:#0f1733}
.result.ok{border-color:#14532d}
.result.err{border-color:#7f1d1d}
.note{padding:10px;border-radius:10px;background:#0f1733;border:1px dashed #2a356b;color:var(--muted)}
summary{cursor:pointer}