:root{
  --primary: #005bbb;
  --accent: #00a1ff;
  --bg: #0b0f14;
  --text: #0b0f14;
  --light: #f7f9fc;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fff}
.header{position:sticky;top:0;background:var(--primary);color:#fff;padding:12px 16px;z-index:50}
.header .brand{display:flex;align-items:center;gap:10px;font-weight:700}
.header nav a{color:#fff;text-decoration:none;margin:0 8px;opacity:.9}
.header nav a:hover{opacity:1;text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:16px}
.hero{padding:32px 16px;background:linear-gradient(180deg,var(--light),#fff)}
.card{background:#fff;border:1px solid #e8eef5;border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(20,33,61,.04)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid transparent;background:var(--primary);color:#fff;text-decoration:none;cursor:pointer}
.btn.secondary{background:#fff;color:var(--primary);border-color:var(--primary)}
input,select,textarea{width:100%;padding:10px;border:1px solid #dfe7f1;border-radius:10px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#eef5ff;color:#004b9a;border:1px solid #d7e6ff}
.list{display:flex;flex-direction:column;gap:8px}
.station{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid #e6edf6;padding:12px;border-radius:12px}
.rating{font-size:13px;color:#546a85}
footer{padding:32px 16px;color:#5b6d84;border-top:1px solid #e8eef5;text-align:center}
.alert{padding:12px;border-radius:12px;border:1px solid #e8eef5;background:#f5fbff}
.kv{display:flex;gap:8px;flex-wrap:wrap}
.kv div{background:#f7f9fc;border:1px solid #e8eef5;border-radius:8px;padding:6px 10px}