:root {
  color-scheme: dark;
  --bg: #070b12;
  --surface: #0e1520;
  --surface-2: #131d2a;
  --line: rgba(255, 255, 255, 0.09);
  --text: #eef4fa;
  --muted: #8795a7;
  --cyan: #27e5cd;
  --blue: #28a8ff;
  --purple: #8b5cf6;
  --green: #32dc92;
  --yellow: #f7bd4a;
  --red: #ff5d70;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 14px;
}
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }

.topbar {
  align-items: center;
  background: rgba(8, 13, 21, 0.94);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 72px;
  justify-content: space-between;
  padding: 0 28px;
  position: relative;
  z-index: 1000;
}
.brand { align-items: center; display: flex; gap: 12px; letter-spacing: .05em; }
.brand-mark, .login-emblem {
  align-items: center;
  background: linear-gradient(145deg, var(--cyan), var(--blue) 55%, var(--purple));
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(39, 229, 205, .2);
  color: #061019;
  display: flex;
  font-size: 22px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; }
.brand small { color: var(--muted); font-size: 8px; letter-spacing: .22em; margin-top: 2px; }
.topbar-actions { align-items: center; display: flex; gap: 18px; }
.topbar-actions form { margin: 0; }
.operator { color: var(--muted); }

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { background: linear-gradient(120deg, #1fcdb9, #168fe0); color: #051017; }
.button-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.button-ghost:hover { border-color: rgba(39, 229, 205, .45); }
.button-danger { background: var(--red); color: #170308; }
.button-danger-subtle { background: rgba(255, 93, 112, .09); border-color: rgba(255, 93, 112, .22); color: #ff8c99; }
.button-small { min-height: 34px; padding: 0 12px; font-size: 11px; }
.button-wide { width: 100%; }
.button-icon { background: rgba(39, 229, 205, .12); border-color: rgba(39, 229, 205, .25); color: var(--cyan); font-size: 24px; height: 42px; min-width: 42px; padding: 0; }

.dashboard-layout { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 72px); }
.sidebar {
  background: linear-gradient(180deg, #0d141f, #0a1019);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 28px 22px 18px;
  position: relative;
  z-index: 500;
}
.section-heading, .page-header { align-items: flex-start; display: flex; justify-content: space-between; }
.section-heading h1, .page-header h1 { font-size: 28px; margin: 2px 0 0; }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .18em; margin: 0 0 5px; text-transform: uppercase; }
.muted { color: var(--muted); }

.summary-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); margin: 22px 0 18px; }
.summary-grid > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; }
.summary-grid strong, .summary-grid span { display: block; }
.summary-grid strong { font-size: 20px; }
.summary-grid span { color: var(--muted); font-size: 9px; margin-top: 3px; white-space: nowrap; }
.dot { border-radius: 50%; display: inline-block; height: 7px; margin-right: 5px; width: 7px; }
.dot-online { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot-warning { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.dot-offline { background: var(--red); }

.search-box { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 10px; padding: 0 12px; }
.search-box span { color: var(--muted); font-size: 20px; }
.search-box input { background: transparent; border: 0; color: var(--text); height: 42px; outline: none; width: 100%; }
.parking-list { margin-top: 14px; min-height: 0; overflow-y: auto; }
.parking-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 13px; padding: 15px 6px; }
.parking-row:hover { background: rgba(255, 255, 255, .025); }
.parking-copy { min-width: 0; }
.parking-copy strong, .parking-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parking-copy small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.chevron { color: #506174; font-size: 24px; margin-left: auto; }
.status-ring { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: flex; height: 24px; justify-content: center; min-width: 24px; }
.status-ring i { background: currentColor; border-radius: 50%; height: 7px; width: 7px; }
.status-online { color: var(--green); }
.status-warning { color: var(--yellow); }
.status-offline { color: var(--red); }
.status-disabled { color: #697586; }

.map-panel { min-width: 0; position: relative; }
#map { background: #0b1420; height: 100%; width: 100%; }
.leaflet-container { font-family: "Manrope", system-ui, sans-serif; }
.leaflet-control-zoom a { background: #101a27 !important; border-color: var(--line) !important; color: var(--text) !important; }
.leaflet-control-attribution { background: rgba(9, 14, 23, .76) !important; color: #8290a0 !important; }
.leaflet-control-attribution a { color: #a8b5c4 !important; }
.map-legend { background: rgba(9, 14, 23, .9); border: 1px solid var(--line); border-radius: 10px; bottom: 20px; display: flex; gap: 16px; left: 20px; padding: 10px 14px; position: absolute; z-index: 450; }
.map-legend span { color: #b6c1cc; font-size: 10px; }

.vion-map-marker-wrapper { background: none; border: 0; overflow: visible; }
.vion-map-marker { background: #111d2a; border: 2px solid currentColor; border-radius: 50% 50% 50% 5px; box-shadow: 0 5px 20px rgba(0, 0, 0, .5); display: block; height: 32px; transform: rotate(-45deg); width: 32px; }
.vion-map-marker i { background: currentColor; border-radius: 50%; display: block; height: 9px; margin: 9px; width: 9px; }
.marker-online { color: var(--green); }
.marker-warning { color: var(--yellow); }
.marker-offline { color: var(--red); }
.marker-disabled { color: #697586; }
.marker-car-count { align-items: center; background: #effaf8; border: 2px solid #0d1722; border-radius: 999px; box-shadow: 0 5px 14px rgba(0, 0, 0, .32); color: #07141b; display: flex; font-size: 11px; font-weight: 900; height: 24px; justify-content: center; left: 25px; min-width: 24px; padding: 0 7px; position: absolute; top: -7px; z-index: 3; }
.parking-car-count { align-items: flex-end; color: var(--cyan); display: flex; flex-direction: column; margin-left: auto; min-width: 38px; }
.parking-car-count b { font-size: 17px; line-height: 1; }
.parking-car-count small { color: var(--muted); font-size: 8px; margin-top: 3px; text-transform: uppercase; }
.parking-row .chevron { margin-left: 2px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #111a26; color: var(--text); }
.leaflet-popup-content-wrapper { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.map-popup { min-width: 210px; }
.map-popup h3 { font-size: 16px; margin: 8px 0 3px; }
.map-popup p { color: var(--muted); margin: 0 0 8px; }
.map-popup small { color: #6f7f92; display: block; }
.popup-car-count { align-items: center; background: rgba(39, 229, 205, .08); border: 1px solid rgba(39, 229, 205, .15); border-radius: 9px; display: grid; gap: 0 8px; grid-template-columns: auto auto 1fr; margin: 12px 0; padding: 9px 10px; }
.popup-car-count span { font-size: 17px; }
.popup-car-count strong { color: var(--cyan); font-size: 20px; }
.popup-car-count small { color: #9aa9b8; }
.map-popup a { color: var(--cyan); display: inline-block; font-weight: 700; margin-top: 13px; }
.popup-status { border-radius: 5px; display: inline-block; font-size: 9px; font-weight: 800; padding: 3px 7px; text-transform: uppercase; }
.popup-online { background: rgba(50, 220, 146, .15); color: var(--green); }
.popup-warning { background: rgba(247, 189, 74, .15); color: var(--yellow); }
.popup-offline { background: rgba(255, 93, 112, .15); color: var(--red); }
.popup-disabled { background: rgba(105, 117, 134, .15); color: #96a1af; }

.login-page { align-items: center; background: radial-gradient(circle at 50% 15%, rgba(39, 229, 205, .1), transparent 30%), radial-gradient(circle at 80% 80%, rgba(139, 92, 246, .08), transparent 35%); display: flex; justify-content: center; min-height: 100vh; padding: 25px; }
.login-card { background: rgba(13, 21, 32, .92); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 42px; width: min(100%, 420px); }
.login-emblem { height: 54px; margin-bottom: 28px; width: 54px; }
.login-card h1 { font-size: 33px; margin: 5px 0 8px; }
.form-stack { display: grid; gap: 17px; margin-top: 28px; }
label > span { color: #acb7c5; display: block; font-size: 11px; font-weight: 700; margin: 0 0 7px; text-transform: uppercase; }
input, textarea { background: #0a111b; border: 1px solid var(--line); border-radius: 9px; color: var(--text); outline: none; padding: 12px 13px; width: 100%; }
input:focus, textarea:focus { border-color: rgba(39, 229, 205, .6); box-shadow: 0 0 0 3px rgba(39, 229, 205, .08); }

.content-page { margin: 0 auto; max-width: 1120px; padding: 42px 28px 70px; }
.narrow-page { max-width: 760px; }
.page-header { margin-bottom: 25px; }
.page-header h1 { font-size: 34px; }
.back-link { color: var(--muted); display: inline-block; font-size: 12px; margin-bottom: 24px; }
.back-link:hover { color: var(--cyan); }
.panel { background: linear-gradient(145deg, rgba(18, 28, 41, .95), rgba(12, 19, 29, .95)); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 28px; }
.panel h2 { font-size: 17px; margin: 0 0 22px; }
.form-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.span-2 { grid-column: span 2; }
.form-actions { border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; padding-top: 22px; }
.form-section-heading { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 22px; }
.form-section-heading h2 { margin-bottom: 5px; }
.form-section-heading p, .field-help { color: var(--muted); font-size: 11px; line-height: 1.5; }
.field-help { display: block; margin-top: 7px; }
.connection-panel { margin-top: 20px; }
.connection-panel details summary { color: var(--cyan); cursor: pointer; font-weight: 700; }
.location-picker-block { min-width: 0; }
.field-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 9px; }
.field-heading small { color: var(--muted); display: block; font-size: 11px; margin-top: 4px; }
.field-label { color: #acb7c5; display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.coordinate-chip { background: #0a111b; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; padding: 6px 10px; }
.coordinate-chip-active { border-color: rgba(39, 229, 205, .35); color: var(--cyan); }
#parking-picker-map { background: #0b1420; border: 1px solid var(--line); border-radius: 12px; height: 390px; overflow: hidden; width: 100%; }
.success-panel { text-align: center; }
.success-icon { align-items: center; background: rgba(50, 220, 146, .12); border: 1px solid rgba(50, 220, 146, .3); border-radius: 50%; color: var(--green); display: inline-flex; font-size: 24px; height: 56px; justify-content: center; margin-bottom: 20px; width: 56px; }
.credential-box { background: #070c13; border: 1px solid var(--line); border-radius: 10px; margin: 26px 0 14px; padding: 18px; text-align: left; }
.credential-box label { color: var(--muted); display: block; font-size: 10px; margin: 12px 0 6px; text-transform: uppercase; }
.credential-box label:first-child { margin-top: 0; }
.credential-box code { color: var(--cyan); overflow-wrap: anywhere; }
.warning-note { background: rgba(247, 189, 74, .08); border: 1px solid rgba(247, 189, 74, .18); border-radius: 9px; color: #d9b66d; font-size: 12px; margin-bottom: 24px; padding: 12px; }
.large-status { border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 8px 13px; }
.status-label-online { color: var(--green); }
.status-label-warning { color: var(--yellow); }
.status-label-offline { color: var(--red); }
.status-label-disabled { color: #8793a2; }
.detail-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.data-list { margin: 0 0 24px; }
.data-list > div { border-bottom: 1px solid var(--line); display: flex; gap: 15px; justify-content: space-between; padding: 12px 0; }
.data-list dt { color: var(--muted); }
.data-list dd { margin: 0; text-align: right; }
.metrics-json { background: #080e16; border-radius: 9px; color: #a9d8d2; font-size: 12px; max-height: 400px; overflow: auto; padding: 16px; }
.empty-state { color: var(--muted); padding: 35px 12px; text-align: center; }
.empty-state strong { color: var(--text); }
.empty-state p { font-size: 12px; line-height: 1.6; }
.empty-state.compact { padding: 25px 5px; }
.flash-stack { left: 50%; position: fixed; top: 86px; transform: translateX(-50%); width: min(92vw, 580px); z-index: 2000; }
.flash { background: #101a27; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); margin-bottom: 8px; padding: 13px 16px; }
.flash-danger { border-color: rgba(255, 93, 112, .4); }
.flash-warning { border-color: rgba(247, 189, 74, .4); }

.server-control-page { max-width: 1280px; }
.telemetry-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }
.metric-card { background: linear-gradient(145deg, #121c29, #0b121c); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.metric-card > span, .metric-card > small { color: var(--muted); display: block; font-size: 10px; text-transform: uppercase; }
.metric-card strong { display: block; font-size: 28px; margin: 8px 0 5px; }
.metric-card .metric-version { color: var(--cyan); font-size: 18px; margin: 14px 0 8px; }
.services-panel, .update-panel, .log-panel, .terminal-panel { margin-top: 20px; }
.panel-heading-row { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.panel-heading-row h2 { margin-bottom: 0; }
.panel-heading-row .muted { font-size: 11px; margin: 5px 0 0; }
.live-indicator { color: var(--green); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.live-indicator i { animation: live-pulse 1.8s infinite; background: var(--green); border-radius: 50%; display: inline-block; height: 7px; margin-right: 6px; width: 7px; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 6px rgba(50, 220, 146, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(50, 220, 146, .3); } }
.service-group { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.service-group > summary { align-items: center; background: #101925; cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 17px; }
.service-group > summary::-webkit-details-marker { display: none; }
.service-main { align-items: center; display: flex; gap: 12px; min-width: 0; }
.service-main strong, .service-main small { display: block; }
.service-main small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.service-dot { background: #5e6977; border-radius: 50%; box-shadow: 0 0 0 5px rgba(94, 105, 119, .1); height: 9px; min-width: 9px; }
.service-dot-online { background: var(--green); box-shadow: 0 0 0 5px rgba(50, 220, 146, .1), 0 0 10px rgba(50, 220, 146, .45); }
.service-dot-offline { background: var(--red); box-shadow: 0 0 0 5px rgba(255, 93, 112, .08); }
.service-summary-actions, .component-actions, .terminal-actions { align-items: center; display: flex; gap: 10px; }
.service-state { color: var(--muted); font-size: 10px; font-weight: 700; min-width: 78px; text-align: right; text-transform: uppercase; }
.service-state-online { color: var(--green); }
.service-state-offline { color: var(--red); }
.disclosure { color: var(--muted); font-size: 18px; transition: transform .2s ease; }
.service-group[open] .disclosure { transform: rotate(180deg); }
.component-list { border-top: 1px solid var(--line); padding-left: 30px; }
.component-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 67px; padding: 11px 16px; }
.component-row:last-child { border-bottom: 0; }
.infrastructure-list { border: 1px solid var(--line); border-radius: 12px; margin-top: 14px; }
.server-log { background: #050910; border: 1px solid var(--line); border-radius: 10px; color: #b9c8d7; font-family: "Cascadia Code", "JetBrains Mono", monospace; font-size: 11px; height: 330px; line-height: 1.55; margin: 0; overflow: auto; padding: 16px; white-space: pre-wrap; }
.terminal-warning { background: rgba(247, 189, 74, .07); border: 1px solid rgba(247, 189, 74, .16); border-radius: 8px; color: #c7a764; font-size: 11px; margin-bottom: 12px; padding: 10px 12px; }
.ssh-terminal { background: #050910; border: 1px solid var(--line); border-radius: 10px; height: 490px; overflow: hidden; padding: 8px; }
.ssh-terminal .xterm { height: 100%; }
.terminal-placeholder { align-items: center; color: var(--muted); display: flex; height: 100%; justify-content: center; }
.update-status-row { align-items: center; background: #0a111b; border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 12px; padding: 13px 15px; }
.update-state { border: 1px solid #657181; border-radius: 999px; color: #a9b4c2; font-size: 9px; font-weight: 800; padding: 5px 8px; text-transform: uppercase; white-space: nowrap; }
.update-state-running, .update-state-rolling_back { border-color: var(--yellow); color: var(--yellow); }
.update-state-success, .update-state-up_to_date { border-color: var(--green); color: var(--green); }
.update-state-rolled_back { border-color: var(--blue); color: var(--blue); }
.update-state-failed, .update-state-rollback_failed { border-color: var(--red); color: var(--red); }
.update-steps { display: grid; grid-template-columns: repeat(6, 1fr); margin: 25px 0 20px; }
.update-steps > div { color: var(--muted); font-size: 10px; position: relative; text-align: center; }
.update-steps > div::before { background: #283341; content: ""; height: 2px; left: -50%; position: absolute; top: 6px; width: 100%; }
.update-steps > div:first-child::before { display: none; }
.update-steps i { background: #303c4b; border: 2px solid #151f2c; border-radius: 50%; display: block; height: 14px; margin: 0 auto 8px; position: relative; width: 14px; z-index: 1; }
.update-step-active { color: var(--yellow) !important; }
.update-step-active i { background: var(--yellow); box-shadow: 0 0 12px rgba(247, 189, 74, .45); }
.update-step-done { color: var(--green) !important; }
.update-step-done::before, .update-step-done i { background: var(--green) !important; }
.update-step-error { color: var(--red) !important; }
.update-step-error i { background: var(--red); }
.update-meta { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 10px; gap: 16px; }
.update-meta code { color: #bdd4df; }
.text-button { background: none; border: 0; color: var(--cyan); cursor: pointer; font: inherit; margin-left: auto; padding: 0; }

@media (max-width: 850px) {
  .dashboard-layout { display: block; height: auto; }
  .sidebar { height: 52vh; }
  .map-panel, #map { height: calc(48vh - 72px); min-height: 360px; }
  .detail-grid { grid-template-columns: 1fr; }
  .telemetry-grid { grid-template-columns: 1fr 1fr; }
  .component-row { align-items: flex-start; gap: 12px; }
  .component-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 16px; }
  .operator { display: none; }
  .dashboard-layout { height: auto; }
  .sidebar { height: auto; min-height: 520px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .map-panel, #map { height: 430px; }
  .map-legend { flex-direction: column; gap: 7px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .login-card { padding: 30px 24px; }
  .content-page { padding: 30px 18px 50px; }
  .page-header { display: block; }
  .large-status { display: inline-block; margin-top: 16px; }
  .telemetry-grid { grid-template-columns: 1fr; }
  .panel-heading-row, .service-group > summary, .component-row { align-items: stretch; flex-direction: column; }
  .service-summary-actions, .component-actions { justify-content: flex-start; margin-top: 12px; }
  .service-state { min-width: 0; text-align: left; }
  .component-list { padding-left: 12px; }
  .ssh-terminal { height: 420px; }
  .update-steps { gap: 10px; grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .update-steps > div::before { display: none; }
}