:root {
  --bg: #0d1420;
  --panel: #131d2b;
  --panel-2: #192638;
  --text: #edf4fb;
  --muted: #8ea3b9;
  --line: #26384d;
  --accent: #41a6ff;
  --accent-2: #2378c5;
  --green: #34c759;
  --red: #ff453a;
  --amber: #ffb020;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 20% 0%, #17283d 0, var(--bg) 38rem); color: var(--text); min-height: 100vh; }
a { color: inherit; }
.topbar { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(18px,4vw,54px); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(10,17,27,.82); backdrop-filter: blur(14px); position: relative; z-index: 20; }
.topbar h1 { margin: 2px 0 0; font-size: clamp(20px,3vw,30px); letter-spacing: -.03em; }
.eyebrow { color: var(--accent); font-weight: 800; font-size: 11px; letter-spacing: .16em; }
.header-actions, .button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .7fr); gap: 20px; padding: 20px clamp(18px,4vw,54px); max-width: 1700px; margin: 0 auto; }
.map-card, .info-card, .panel { background: rgba(19,29,43,.94); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.map-card { position: relative; min-height: calc(100vh - 165px); }
#map { position: absolute; inset: 0; background: #101923; }
.map-overlay { position: absolute; z-index: 500; left: 16px; top: 16px; display: flex; align-items: center; gap: 10px; background: rgba(11,18,28,.88); border: 1px solid rgba(255,255,255,.1); padding: 10px; border-radius: 12px; backdrop-filter: blur(10px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.bus-title { font-size: 14px; }
.follow { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.status { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.status-online { background: rgba(52,199,89,.16); color: #7ee798; border: 1px solid rgba(52,199,89,.35); }
.status-offline { background: rgba(255,69,58,.16); color: #ff8b84; border: 1px solid rgba(255,69,58,.35); }
.status-unknown { background: rgba(142,163,185,.14); color: #b7c6d5; border: 1px solid rgba(142,163,185,.28); }
.info-card { padding: 22px; max-height: calc(100vh - 165px); overflow: auto; }
.hero-info { display: grid; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.label, .quick-grid span { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.big-value { font-size: 50px; font-weight: 900; letter-spacing: -.05em; line-height: 1; margin-top: 4px; }
.destination { font-size: 20px; font-weight: 750; line-height: 1.25; margin-top: 4px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 20px 0; }
.quick-grid > div { background: var(--panel-2); padding: 13px; display: grid; gap: 5px; }
.quick-grid strong { font-size: 14px; }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin: 22px 0 8px; }
.section-title h2, .panel h2 { margin: 0; font-size: 18px; }
.section-title span, .hint { color: var(--muted); font-size: 12px; }
.data-list { display: grid; }
.data-row { display: grid; grid-template-columns: minmax(130px,.8fr) minmax(0,1.2fr); gap: 14px; padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.data-row span { color: var(--muted); }
.data-row strong { overflow-wrap: anywhere; text-align: right; }
.bus-marker-wrap { background: none !important; border: 0 !important; }
.bus-marker { width: 42px; height: 42px; display: grid; place-items: center; font-size: 24px; background: #fff; border-radius: 50%; border: 3px solid #147ed1; box-shadow: 0 6px 18px rgba(0,0,0,.38); }
.btn { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; border-radius: 10px; padding: 10px 14px; background: linear-gradient(180deg,var(--accent),var(--accent-2)); color: white; font-weight: 800; font-size: 13px; box-shadow: 0 6px 18px rgba(35,120,197,.24); }
.btn:hover { filter: brightness(1.08); }
.btn-secondary { background: #1d2c3e; border: 1px solid #30465f; box-shadow: none; }
.btn-danger { background: #5c2528; border: 1px solid #8b363a; box-shadow: none; }
.btn-small { padding: 8px 10px; }
.alert { padding: 11px 13px; border-radius: 10px; margin: 12px 0; font-size: 13px; line-height: 1.4; }
.alert-error { background: rgba(255,69,58,.12); border: 1px solid rgba(255,69,58,.30); color: #ffaaa5; }
.alert-warning { background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.3); color: #ffd27e; }
.alert-success { background: rgba(52,199,89,.12); border: 1px solid rgba(52,199,89,.30); color: #97eba9; }
.hidden { display: none !important; }
.empty-state { display: grid; gap: 12px; align-content: start; }
.empty-state h2 { margin: 0; }
.empty-state p, .empty-inline { color: var(--muted); line-height: 1.55; }
footer { color: #60768d; font-size: 11px; text-align: center; padding: 0 20px 20px; }
.admin-body { min-height: 100vh; }
.admin-wrap { max-width: 1250px; margin: 0 auto; padding: 24px clamp(16px,4vw,44px) 50px; }
.admin-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: 20px; align-items: start; }
.admin-side { display: grid; gap: 20px; }
.panel { padding: 22px; overflow: visible; }
.panel.narrow { max-width: 520px; margin: 40px auto; }
.panel h2 { margin-bottom: 8px; }
.panel h3 { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.panel p { color: var(--muted); line-height: 1.5; }
.form-grid { display: grid; gap: 14px; margin-top: 18px; }
.form-grid label { display: grid; gap: 7px; color: #cbd8e5; font-size: 13px; font-weight: 700; }
.form-grid small { color: var(--muted); font-weight: 500; }
.form-grid input, .form-grid select, .form-grid textarea, .copy-row input { width: 100%; border: 1px solid #33475f; background: #0e1722; color: var(--text); border-radius: 9px; padding: 10px 11px; outline: none; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .copy-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(65,166,255,.12); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .check { display: flex; grid-template-columns: none; align-items: center; gap: 9px; font-weight: 600; }
.form-grid .check input { width: auto; }
.copy-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
pre { background: #0b121b; border: 1px solid var(--line); padding: 10px; border-radius: 9px; white-space: pre-wrap; word-break: break-all; color: #b9cee0; font-size: 11px; }
.state-list { margin: 14px 0 18px; }
.state-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.state-list dt { color: var(--muted); font-size: 12px; }
.state-list dd { margin: 0; text-align: right; font-size: 12px; overflow-wrap: anywhere; }
code { background: #0c1622; padding: 2px 5px; border-radius: 5px; color: #a9d7ff; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .map-card { min-height: 58vh; }
  .info-card { max-height: none; }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .topbar { align-items: flex-start; padding: 14px 16px; }
  .layout { padding: 12px; }
  .map-card { min-height: 52vh; border-radius: 14px; }
  .map-overlay { left: 8px; top: 8px; right: 8px; flex-wrap: wrap; }
  .info-card { padding: 16px; }
  .two-cols { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .data-row { grid-template-columns: 1fr; gap: 3px; }
  .data-row strong { text-align: left; }
}

.form-grid textarea { resize: vertical; min-height: 92px; font: inherit; }