:root {
  color-scheme: dark;
  --bg: #070c15;
  --surface: #0d1625;
  --surface-2: #121e31;
  --surface-3: #17253a;
  --line: #21334c;
  --line-soft: rgba(128, 164, 204, .13);
  --text: #edf5ff;
  --muted: #8194ab;
  --blue: #3d8cff;
  --cyan: #24c5ef;
  --green: #28d39b;
  --purple: #9c7dff;
  --amber: #f5b941;
  --red: #fb5c74;
  --shadow: 0 20px 70px rgba(0, 0, 0, .38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: wait; }
[hidden] { display: none !important; }

.login-screen { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 0%, #11294a 0, #070c15 48%); }
.login-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(100px); opacity: .15; }
.login-glow-a { background: var(--blue); top: -240px; right: -120px; }
.login-glow-b { background: var(--purple); bottom: -300px; left: -100px; }
.login-card { position: relative; width: min(430px, calc(100vw - 32px)); padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: rgba(13, 22, 37, .88); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.login-card h1 { margin: 8px 0 4px; font-size: 38px; letter-spacing: -.04em; }
.login-card > .muted { margin: 0 0 30px; }
.login-card label, .form-panel > label, .settings-card > label, .sms-tester label { display: grid; gap: 9px; margin: 17px 0; color: #b6c4d5; font-size: 13px; font-weight: 650; }
.login-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; }
.login-hint code { color: #a9d3ff; }
.form-error { color: #ff91a2; background: rgba(251, 92, 116, .1); border: 1px solid rgba(251, 92, 116, .25); border-radius: 10px; padding: 10px; font-size: 13px; }

input, select { width: 100%; border: 1px solid var(--line); color: var(--text); background: #0a1321; border-radius: 10px; padding: 11px 12px; outline: none; transition: .2s; }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61, 140, 255, .12); }
input[readonly] { color: #9eb1c7; }
.muted { color: var(--muted); }
.eyebrow { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .16em; }

.app-shell { min-height: 100vh; }
.topbar { height: 70px; display: flex; align-items: center; gap: 30px; padding: 0 24px; position: sticky; top: 0; z-index: 1000; background: rgba(7, 12, 21, .94); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(18px); }
.brand { min-width: 210px; display: flex; align-items: center; gap: 11px; }
.brand strong { display: block; font-size: 18px; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: end; justify-content: center; gap: 3px; padding: 8px; background: linear-gradient(145deg, #256cff, #5e47e8); box-shadow: 0 8px 25px rgba(61, 140, 255, .3); }
.brand-mark.large { width: 46px; height: 46px; border-radius: 14px; padding: 11px; }
.brand-mark span { display: block; width: 4px; border-radius: 3px; background: white; }
.brand-mark span:nth-child(1) { height: 42%; opacity: .65; }.brand-mark span:nth-child(2) { height: 75%; }.brand-mark span:nth-child(3) { height: 100%; opacity: .85; }
.main-nav { flex: 1; display: flex; align-self: stretch; align-items: stretch; justify-content: center; gap: 2px; }
.nav-button { padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; transition: .2s; }
.nav-button span { margin-right: 5px; color: #5f7692; }
.nav-button:hover { color: var(--text); background: rgba(255,255,255,.025); }
.nav-button.active { color: #dcecff; border-color: var(--blue); background: linear-gradient(0deg, rgba(61, 140, 255, .10), transparent); }
.nav-button.active span { color: var(--cyan); }
.top-actions { min-width: 210px; display: flex; justify-content: end; align-items: center; gap: 10px; }
.device-select { width: 150px; padding: 8px 28px 8px 10px; border-radius: 9px; color: #b9cce1; background: #0d1726; font-size: 10px; }
.connection-chip, .status-badge, .demo-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(40, 211, 155, .24); color: #6ce9bd; background: rgba(40, 211, 155, .09); border-radius: 999px; padding: 7px 11px; font-size: 11px; font-weight: 750; }
.connection-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.connection-chip.offline { color: #ff8396; border-color: rgba(251,92,116,.2); background: rgba(251,92,116,.08); }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); }
.icon-button:hover { color: white; border-color: #3c5472; }

.view { display: none; }.view.active { display: block; }
.dashboard-grid { height: calc(100vh - 70px); display: grid; grid-template-columns: 360px 1fr; }
.dashboard-sidebar { padding: 16px; background: #09111d; border-right: 1px solid var(--line-soft); }
.scrollable { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #263d5c transparent; }
.panel { border: 1px solid var(--line); background: linear-gradient(150deg, rgba(19, 31, 50, .98), rgba(11, 19, 32, .98)); border-radius: 14px; box-shadow: 0 12px 35px rgba(0,0,0,.16); }
.dashboard-sidebar .panel { padding: 17px; margin-bottom: 14px; }
.panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.panel-title.compact { margin: 0; }.panel-title h2 { margin: 0; font-size: 14px; }.panel-title p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.panel-heading-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.icon-box { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; }
.icon-box.blue { color: #7fb5ff; background: rgba(61, 140, 255, .13); }.icon-box.cyan { color: var(--cyan); background: rgba(36,197,239,.12); }.icon-box.green { color: var(--green); background: rgba(40,211,155,.12); }.icon-box.purple { color: #b7a5ff; background: rgba(156,125,255,.13); }
.date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.date-grid label { color: var(--muted); font-size: 10px; font-weight: 700; }
.date-grid input { margin-top: 7px; padding: 9px 8px; font-size: 10px; }
.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 15px; color: white; font-size: 12px; font-weight: 750; transition: transform .15s, background .15s, border-color .15s; }
.button:hover { transform: translateY(-1px); }.button.primary { background: linear-gradient(135deg, #347fff, #5473ef); box-shadow: 0 8px 22px rgba(61,140,255,.2); }.button.primary:hover { background: linear-gradient(135deg, #4a91ff, #665ff4); }.button.secondary { color: #b8c8da; background: #121f31; border-color: #2b405b; }.button.secondary:hover { color: white; border-color: #456181; }.button.danger-outline { color: #ff8799; border-color: rgba(251,92,116,.32); background: rgba(251,92,116,.07); }.button.wide { width: 100%; }.filter-panel > .button { margin-top: 10px; }
.quick-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }.quick-filters button { padding: 8px 3px; border: 1px solid #263a54; border-radius: 8px; color: #98aac0; background: #111d2e; font-size: 10px; font-weight: 700; }.quick-filters button.active { color: #86c7ff; border-color: #327fc2; background: rgba(40,139,216,.13); }
.result-badge { margin-top: 10px; padding: 8px; border: 1px solid rgba(36,197,239,.15); background: rgba(36,197,239,.05); border-radius: 8px; color: #5fcbee; text-align: center; font-size: 10px; }
.status-badge { padding: 5px 9px; }.status-badge.offline { color: #ff8396; border-color: rgba(251,92,116,.2); background: rgba(251,92,116,.08); }
.live-data-list { margin: 0; }.live-data-list div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }.live-data-list dt { color: var(--muted); font-size: 10px; }.live-data-list dd { margin: 0; color: #ccdaeb; font: 650 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.speed-readout { display: flex; align-items: end; justify-content: space-between; padding-top: 13px; }.speed-readout span { color: var(--muted); font-size: 10px; }.speed-readout strong { color: var(--cyan); font-size: 22px; }.speed-readout small { font-size: 11px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.stat { padding: 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(5,10,18,.23); }.stat.wide { grid-column: span 2; }.stat span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; }.stat strong { font-size: 12px; }
.chart-panel svg { width: 100%; min-height: 120px; overflow: visible; }

.map-stage { min-width: 0; position: relative; overflow: hidden; }.map-stage #map { width: 100%; height: 100%; background: #122033; }.leaflet-container { font-family: inherit; }.leaflet-control-zoom a { background: #111d2e !important; color: white !important; border-color: #293d58 !important; }.leaflet-control-attribution { background: rgba(4,8,14,.68) !important; color: #899aae !important; }.leaflet-control-attribution a { color: #75a9d8 !important; }
.panel-glass { background: rgba(10,18,30,.88); border: 1px solid rgba(128,164,204,.24); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.map-toolbar { position: absolute; z-index: 500; top: 18px; right: 18px; display: flex; padding: 4px; border-radius: 10px; }.map-toolbar button { border: 0; border-radius: 7px; padding: 7px 11px; background: transparent; color: #8da0b7; font-size: 10px; font-weight: 750; }.map-toolbar button.active { color: white; background: #243651; }
.map-legend { position: absolute; z-index: 500; bottom: 106px; right: 18px; display: flex; gap: 12px; border-radius: 9px; padding: 8px 10px; color: #9eb0c5; font-size: 9px; }.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }.legend-dot.slow { background: #28d39b; }.legend-dot.normal { background: #2cbdf3; }.legend-dot.fast { background: #ef55d9; }
.device-float { position: absolute; z-index: 500; top: 18px; left: 18px; min-width: 265px; padding: 12px; border-radius: 13px; display: flex; align-items: center; gap: 11px; }.device-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #89c2ff; background: rgba(61,140,255,.15); font-size: 20px; }.device-float small, .device-float span { display: block; }.device-float small { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .12em; }.device-float strong { display: block; margin: 2px 0; font-size: 11px; }.device-float span { color: #7f95ae; font-size: 9px; }.device-float .battery { margin-left: auto; color: #63dcb2; font-size: 10px; font-weight: 800; }
.playback { position: absolute; z-index: 500; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(710px, calc(100% - 38px)); border-radius: 14px; padding: 13px 16px; display: flex; align-items: center; gap: 14px; }.play-button { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; border: 0; color: white; background: linear-gradient(135deg, #388cff, #536ff0); box-shadow: 0 8px 20px rgba(61,140,255,.3); }.playback-main { flex: 1; min-width: 0; }.playback-main > div:first-child { display: flex; justify-content: space-between; font-size: 9px; color: #91a4ba; }.playback-main > div:first-child strong { color: var(--cyan); }.playback input[type=range] { appearance: none; height: 3px; padding: 0; margin: 9px 0; border: 0; border-radius: 3px; background: #2b3e58; }.playback input[type=range]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: white; box-shadow: 0 0 0 3px rgba(61,140,255,.35); }.playback-meta { display: flex; gap: 20px; color: #768ba4; font-size: 8px; }
.tracker-marker { width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #3d8cff; border: 3px solid white; box-shadow: 0 5px 18px rgba(0,0,0,.45); }.tracker-marker::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #06111f; }.playback-marker { width: 16px; height: 16px; border: 3px solid white; border-radius: 50%; background: #f5b941; box-shadow: 0 0 0 5px rgba(245,185,65,.25); }

.page-view { min-height: calc(100vh - 70px); padding: 34px max(28px, 4vw) 60px; background: radial-gradient(circle at 95% 0%, rgba(61,140,255,.07), transparent 35%), #080e18; }.page-header { display: flex; justify-content: space-between; align-items: end; margin: 0 auto 25px; max-width: 1380px; }.page-header h1 { margin: 6px 0; font-size: 30px; letter-spacing: -.035em; }.page-header > div > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.summary-strip { max-width: 1380px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.summary-strip div { padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }.summary-strip small { display: block; color: var(--muted); font-size: 10px; }.summary-strip strong { display: block; margin-top: 5px; font-size: 18px; }
.table-panel { max-width: 1380px; margin: 0 auto; overflow: auto; }table { width: 100%; border-collapse: collapse; min-width: 920px; }th { padding: 13px 16px; text-align: left; color: #71869f; background: rgba(255,255,255,.015); border-bottom: 1px solid var(--line); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }td { padding: 15px 16px; border-bottom: 1px solid var(--line-soft); color: #b7c5d6; font-size: 11px; }tbody tr:hover { background: rgba(61,140,255,.035); }.trip-name { color: white; font-weight: 750; }.trip-name small { display: block; color: #617b99; margin-top: 3px; }.table-action { border: 1px solid #2b4464; border-radius: 7px; color: #83bbff; background: #122039; padding: 6px 9px; font-size: 10px; }.pill { display: inline-block; padding: 4px 8px; border-radius: 999px; color: #72e4bc; background: rgba(40,211,155,.1); font-size: 9px; font-weight: 700; }.pill.closed { color: #8ea2b8; background: rgba(142,162,184,.09); }
.two-column { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.two-column > .panel { padding: 22px; }.timeline-list, .sms-list, .number-list { display: grid; gap: 10px; }.timeline-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(4,9,16,.18); }.timeline-item > i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 9px currentColor; }.timeline-item.warning > i { background: var(--amber); }.timeline-item.danger > i { background: var(--red); }.timeline-item.success > i { background: var(--green); }.timeline-item strong { display: block; font-size: 11px; }.timeline-item p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.timeline-item time { color: #647990; font-size: 9px; }
.sms-message { padding: 12px; border-radius: 12px; max-width: 90%; color: #b9c8d8; background: #17263a; font-size: 10px; white-space: pre-wrap; }.sms-message.outgoing { margin-left: auto; background: rgba(61,140,255,.16); border: 1px solid rgba(61,140,255,.2); }.sms-message header { display: flex; justify-content: space-between; margin-bottom: 7px; color: #7f96b0; font-size: 8px; }.empty-state { padding: 28px; color: var(--muted); text-align: center; font-size: 11px; }
.numbers-layout { grid-template-columns: 380px 1fr; }.form-panel { align-self: start; }.toggle-row { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 15px !important; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }.toggle-row span { flex: 1; }.toggle-row strong, .toggle-row small { display: block; }.toggle-row strong { color: #c1cedc; font-size: 11px; }.toggle-row small { margin-top: 3px; color: #71869f; font-size: 9px; font-weight: 500; }.toggle-row input { appearance: none; width: 38px; height: 21px; padding: 0; border: 0; border-radius: 99px; background: #293a50; position: relative; }.toggle-row input::after { content: ''; position: absolute; width: 15px; height: 15px; top: 3px; left: 3px; border-radius: 50%; background: #8798aa; transition: .2s; }.toggle-row input:checked { background: #247c64; }.toggle-row input:checked::after { transform: translateX(17px); background: #54e0b1; }
.number-item { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 11px; background: rgba(4,9,16,.2); }.contact-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #89bdff; background: rgba(61,140,255,.12); font-weight: 800; }.number-item .contact-info { flex: 1; }.number-item strong, .number-item span { display: block; }.number-item strong { font-size: 11px; }.number-item span { margin-top: 3px; color: var(--muted); font: 9px ui-monospace, monospace; }.number-tags { display: flex; gap: 5px; margin-top: 6px; }.number-tags em { color: #70dcb7; background: rgba(40,211,155,.08); border-radius: 99px; padding: 3px 6px; font-size: 7px; font-style: normal; }.delete-number { border: 0; color: #ff8094; background: transparent; font-size: 18px; }
.devices-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 390px 1fr; gap: 18px; }.devices-grid > .panel { padding: 22px; }.span-all { grid-column: 1 / -1; }.credential-box { margin-top: 14px; padding: 13px; border: 1px solid rgba(40,211,155,.25); border-radius: 10px; color: #a8c6ba; background: rgba(40,211,155,.06); font: 9px/1.65 ui-monospace, monospace; overflow-wrap: anywhere; }.credential-box strong { display: block; color: #65dfb5; font-family: inherit; }.device-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }.device-item { padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(4,9,16,.2); }.device-item.pending { border-color: rgba(245,185,65,.24); }.device-item header { display: flex; align-items: center; gap: 10px; }.device-item header > i { width: 9px; height: 9px; border-radius: 50%; background: #62758a; }.device-item.online header > i { background: var(--green); box-shadow: 0 0 8px var(--green); }.device-item.pending header > i { background: var(--amber); box-shadow: 0 0 8px rgba(245,185,65,.6); }.device-item header div { flex: 1; }.device-item strong, .device-item small { display: block; }.device-item strong { font-size: 11px; }.device-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }.device-item dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 13px 0; }.device-item dl div { padding: 8px; border-radius: 7px; background: rgba(255,255,255,.025); }.device-item dt { color: #657b94; font-size: 7px; }.device-item dd { margin: 4px 0 0; font-size: 9px; overflow-wrap: anywhere; }.device-actions { display: flex; gap: 7px; }.device-actions button { flex: 1; padding: 7px; border: 1px solid #29415f; border-radius: 7px; color: #83baff; background: #101e31; font-size: 8px; }.firmware-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.server-firmware-card { min-height: 170px; display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid rgba(156,125,255,.22); border-radius: 14px; background: radial-gradient(circle at 0 0, rgba(156,125,255,.13), transparent 48%), rgba(4,9,16,.18); }.firmware-orb { flex: 0 0 68px; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 22px; color: #c4b7ff; background: linear-gradient(145deg, rgba(156,125,255,.3), rgba(61,140,255,.16)); font-size: 30px; }.server-firmware-card span { color: #9b86ef; font-size: 8px; font-weight: 800; letter-spacing: .12em; }.server-firmware-card h3 { margin: 7px 0; font-size: 20px; }.server-firmware-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.flash-station { display: grid; align-content: start; }.usb-illustration { height: 80px; margin: 5px 0 15px; display: flex; align-items: center; justify-content: center; gap: 0; color: #7990aa; }.usb-illustration span { padding: 8px 12px; border: 2px solid #3c526c; border-radius: 5px; font-size: 9px; }.usb-illustration i { width: 90px; border-top: 4px solid #30465e; }.usb-illustration strong { padding: 14px 18px; border: 2px solid #277d70; border-radius: 8px; color: #76d8bd; background: rgba(40,211,155,.07); font-size: 10px; }.flash-device-label { display:grid; gap:7px; margin-bottom:12px; color:var(--muted); font-size:10px; }.flash-device-label select { width:100%; }.flash-note { display: block; padding: 12px; color: #e7b764; border: 1px solid rgba(245,185,65,.2); border-radius: 8px; background: rgba(245,185,65,.06); font-size: 10px; }.flash-help { display: flex; gap: 20px; padding: 0; margin: 16px 0 0; list-style: none; counter-reset: flash; }.flash-help li { flex: 1; position: relative; padding-left: 26px; color: #748aa2; font-size: 8px; line-height: 1.5; }.flash-help li::before { counter-increment: flash; content: counter(flash); position: absolute; left: 0; top: -3px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #8cc5ff; background: rgba(61,140,255,.12); }
.settings-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.settings-card { padding: 22px; }.settings-card > label { display: grid; grid-template-columns: 1fr minmax(170px, 45%); align-items: center; gap: 15px; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line-soft); }.settings-card > .toggle-row { display: flex; }.settings-card input, .settings-card select { padding: 9px 10px; font-size: 11px; }.unit-field { position: relative; }.unit-field input { padding-right: 76px; }.unit-field em { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #647b95; font-size: 9px; font-style: normal; }.secret-field { display: flex; }.secret-field input { border-radius: 9px 0 0 9px; }.secret-field button { border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0; color: #8ab9ef; background: #132239; font-size: 9px; }.api-card > .button { margin-top: 16px; }.warning-note { color: #9b8257; font-size: 9px; line-height: 1.5; }.settings-card form > label { display: grid; gap: 7px; margin: 13px 0; color: #aebed0; font-size: 10px; font-weight: 650; }
.app-install-row { display: flex; align-items: center; gap: 14px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(4,9,16,.2); }.app-install-row img { width: 52px; height: 52px; border-radius: 13px; }.app-install-row strong, .app-install-row small { display: block; }.app-install-row strong { font-size: 12px; }.app-install-row small { margin-top: 5px; color: var(--muted); font-size: 9px; }.pwa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }.pwa-actions button:last-child { grid-column: 1 / -1; }.pwa-help { min-height: 44px; margin: 14px 0 0; padding: 11px 12px; border: 1px solid rgba(61,140,255,.18); border-radius: 9px; color: #8fa9c7; background: rgba(61,140,255,.055); font-size: 9px; line-height: 1.55; }
.demo-badge { color: #b3a2ff; border-color: rgba(156,125,255,.25); background: rgba(156,125,255,.09); }.sim-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.sim-grid > .panel { padding: 22px; }.device-console { grid-row: span 2; }.board-visual { width: min(360px, 100%); aspect-ratio: 1.5; margin: 8px auto 28px; position: relative; overflow: hidden; border: 5px solid #151b22; border-radius: 16px; background: linear-gradient(135deg, #18645c, #0d3835); box-shadow: inset 0 0 0 2px #2c8278, 0 25px 50px rgba(0,0,0,.35); }.board-visual::before { content: ''; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(90deg, transparent 49%, #b4d5b7 50%, transparent 51%), linear-gradient(transparent 49%, #b4d5b7 50%, transparent 51%); background-size: 25px 25px; }.chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 120px; height: 90px; display: grid; place-items: center; border-radius: 6px; color: #a7b2ba; background: #21272e; border: 2px solid #4d545c; box-shadow: 0 8px 20px rgba(0,0,0,.35); font: 700 13px ui-monospace, monospace; }.chip small { display: block; font-size: 8px; }.antenna, .sd-slot { position: absolute; color: #6f808a; background: #101820; border: 2px solid #49575e; font-size: 8px; font-weight: 800; letter-spacing: .1em; }.antenna { width: 68px; height: 32px; right: 18px; top: 20px; display: grid; place-items: center; border-radius: 5px; }.sd-slot { width: 80px; height: 29px; left: 15px; bottom: 18px; display: grid; place-items: center; }.board-label { position: absolute; left: 18px; top: 18px; font-weight: 900; font-size: 16px; }.board-label small { display: block; font-size: 8px; letter-spacing: .1em; }.led { position: absolute; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }.led-a { right: 22px; bottom: 22px; background: var(--green); color: var(--green); }.led-b { right: 40px; bottom: 22px; background: var(--blue); color: var(--blue); }.console-status { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); color: #91a5ba; font-size: 11px; }.console-status i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #68798c; margin-right: 6px; }.console-status i.on { background: var(--green); box-shadow: 0 0 9px var(--green); }.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }.span-two { grid-column: span 2; }
.telemetry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.telemetry-grid div { padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(4,9,16,.2); }.telemetry-grid span, .telemetry-grid strong { display: block; }.telemetry-grid span { color: var(--muted); font-size: 9px; }.telemetry-grid strong { margin-top: 5px; font-size: 11px; }.sim-error { margin-top: 12px; padding: 10px; border: 1px solid rgba(251,92,116,.25); border-radius: 8px; color: #ff8fa0; background: rgba(251,92,116,.08); font-size: 10px; }.sms-tester form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; }.sms-tester form label { margin: 0; }.phone-message { min-height: 125px; margin: 18px 0 0; padding: 15px; border: 1px solid rgba(61,140,255,.16); border-radius: 12px; color: #b9d6f3; background: #091321; font: 10px/1.6 ui-monospace, monospace; white-space: pre-wrap; }
.sd-meter > div { height: 9px; overflow: hidden; border-radius: 99px; background: #26374c; }.sd-meter > div span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--purple), var(--blue)); transition: width .3s; }.sd-meter strong { display: block; margin-top: 8px; color: #9eaec0; font-size: 10px; }.sync-steps { padding: 0; margin: 22px 0 0; list-style: none; counter-reset: step; }.sync-steps li { position: relative; padding: 0 0 19px 34px; color: #8194aa; font-size: 10px; }.sync-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -4px; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #334961; border-radius: 50%; color: #7f95ad; background: #101c2d; font-size: 9px; }.sync-steps li:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 22px; bottom: 0; border-left: 1px solid #263b54; }.sync-steps li.done { color: #66dcb5; }.sync-steps li.done::before { content: '✓'; border-color: rgba(40,211,155,.4); color: var(--green); background: rgba(40,211,155,.08); }
.toast-host { position: fixed; right: 18px; top: 84px; z-index: 3000; display: grid; gap: 8px; }.toast { min-width: 260px; max-width: 380px; padding: 12px 15px; border: 1px solid #2a4362; border-radius: 10px; color: #c6d5e6; background: #122136; box-shadow: var(--shadow); font-size: 11px; animation: toast-in .25s ease-out; }.toast.error { border-color: rgba(251,92,116,.35); color: #ff9dac; }.toast.success { border-color: rgba(40,211,155,.3); color: #7ce8c1; }@keyframes toast-in { from { transform: translateX(15px); opacity: 0; } }

@media (max-width: 1100px) {
  .topbar { gap: 10px; }.brand, .top-actions { min-width: auto; }.brand div:last-child, .connection-chip span, .nav-button { font-size: 0; }.nav-button span { margin: 0; font-size: 16px; }.main-nav { justify-content: end; }.nav-button { width: 46px; }
  .dashboard-grid { grid-template-columns: 315px 1fr; }.two-column, .settings-grid, .sim-grid { grid-template-columns: 1fr; }.numbers-layout, .devices-grid { grid-template-columns: 1fr; }.device-console { grid-row: auto; }.device-select { width: 120px; }.firmware-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar { height: 62px; padding: 0 10px; }.brand .brand-mark { width: 30px; height: 30px; }.top-actions .connection-chip, .device-select { display: none; }.nav-button { width: 37px; padding: 0; }.dashboard-grid { height: auto; display: flex; flex-direction: column-reverse; }.map-stage { height: 65vh; min-height: 520px; }.dashboard-sidebar { border-right: 0; }.device-float { left: 10px; top: 10px; min-width: 220px; }.map-toolbar { top: 10px; right: 10px; }.map-legend { display: none; }.playback { bottom: 10px; }.page-view { padding: 24px 14px 50px; }.page-header { align-items: start; gap: 15px; }.page-header h1 { font-size: 25px; }.summary-strip { grid-template-columns: 1fr; }.settings-grid { display: block; }.settings-card { margin-bottom: 14px; }.settings-card > label { grid-template-columns: 1fr; }.sms-tester form { grid-template-columns: 1fr; }.two-column > .panel, .sim-grid > .panel, .devices-grid > .panel { padding: 17px; }.flash-help { display: grid; }.firmware-item { grid-template-columns: 70px 1fr; }
}