/* 航行大屏：地图为主视图。只调整呈现，遥测与指令仍沿用原有协议。 */
:root { --radius:8px; --header-height:70px; --sidebar-width:184px; --panel-top:var(--panel); --nav-bg:#0a1d30; }
:root[data-theme="dark"] { --panel-top:#0d2641; --nav-bg:#071b30; }
body { background-image:radial-gradient(ellipse at 60% 0%,#1b75b00b,transparent 65%); }
html { scroll-padding-top:90px; }
dl,dd { margin:0; }
button { border-radius:5px; min-height:33px; padding:7px 11px; font-size:11px; }
button.primary { background:linear-gradient(135deg,#168bf1,#0873c9); border-color:#279bf7; color:#fff; box-shadow:0 0 16px #078dff16; }
button.primary:hover:not(:disabled) { background:#179cf5; border-color:#6ecbff; }
[data-theme="light"] button.primary { background:var(--accent); border-color:var(--accent); }
[data-theme="dark"] button.primary { color:#fff; }
.small-button { min-height:29px; padding:5px 9px; font-size:10px; }
.icon-button { width:33px; height:33px; min-width:33px; padding:7px; }
.badge,.state,.chip { border-radius:4px; font-size:10px; }
.state { max-width:100%; text-align:left; }
.badge.online::before { box-shadow:0 0 7px currentColor; }
.topbar { position:sticky; inset:0 0 auto; min-height:var(--header-height); padding:11px 22px; gap:20px; z-index:30; background:var(--panel); border-bottom:1px solid var(--line-strong); box-shadow:0 3px 20px #0000000c; }
[data-theme="dark"] .topbar { background:linear-gradient(90deg,#0a2644,#061a30 50%,#081b30); border-bottom-color:#126195; }
.brand { padding:0; font-size:20px; gap:12px; letter-spacing:.1em; white-space:nowrap; color:var(--text); }
.brand>span:last-child { display:block; }
.brand-mark { width:45px; height:42px; border:0; border-radius:0; background:transparent; color:var(--blue); filter:drop-shadow(0 0 9px #279eff55); }
.brand-mark svg { width:43px; height:43px; }
.brand-caption { color:var(--blue); letter-spacing:.29em; font-size:8px; margin-top:3px; }
.topbar-context { display:flex; align-items:center; gap:9px; margin-left:auto; font-size:11px; white-space:nowrap; color:var(--muted); }
.title-dot { background:var(--success); width:6px; height:6px; box-shadow:0 0 9px #30e9ac70; }
.topbar-divider { width:1px; height:16px; background:var(--line-strong); margin:0 5px; }
#dashboardTime { font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.03em; }
.toolbar { gap:7px; flex-shrink:0; }
.toolbar .icon-button { border-color:var(--line); }
.sidebar { inset:var(--header-height) auto 0 0; width:var(--sidebar-width); padding:20px 10px 14px; background:var(--nav-bg); border-right:1px solid #173f60; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#244662 transparent; }
.workspace-label { padding:2px 12px 15px; color:#7493b3; letter-spacing:.12em; font-size:9px; }
.side-nav { gap:5px; margin-top:0; }
.side-nav a { padding:12px 11px; gap:10px; font-size:12px; border-radius:4px; color:#9db6d2; position:relative; }
.side-nav a svg { width:18px; height:18px; }
.side-nav a:hover { background:#0e2b48; color:#e2f2ff; }
.side-nav a.active { color:#78ceff; background:linear-gradient(90deg,#114c7c,#0b2b48); border-color:#1b59802e; }
.side-nav a.active::before { content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:3px; background:#37c3ff; box-shadow:0 0 12px #219fff; }
.nav-index { font-size:9px; color:#577899; }
.side-nav .active .nav-index { color:#67b3e3; }
.vessel-summary { margin:28px 3px 0; padding:12px; border:1px solid #19466b; border-radius:5px; background:linear-gradient(150deg,#0e2a47,#091e33); color:#d6eaff; }
.vessel-summary-heading { display:flex; align-items:center; justify-content:space-between; font-size:11px; }
.vessel-summary .chip { background:#103658; color:#7eb9e4; font-size:8px; padding:2px 5px; }
.vessel-emblem { display:flex; margin:13px auto 8px; width:100%; height:55px; color:#65bff0; background:radial-gradient(ellipse,#1a7aac30,transparent 70%); }
.vessel-emblem svg { width:64px; height:50px; stroke-width:1; }
.vessel-summary>strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.vessel-summary>p { font-size:9px; color:#7d9ebf; margin-top:4px; }
.vessel-summary dl { border-top:1px solid #1b3d5b; margin-top:12px; padding-top:9px; }
.vessel-summary dl>div { display:flex; justify-content:space-between; gap:5px; font-size:9px; padding-top:5px; }
.vessel-summary dt { color:#7d9ebf; }.vessel-summary dd { color:#bad4ef; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.sidebar-bottom { padding-top:25px; margin-top:auto; }
.side-note { padding:12px 9px; font-size:11px; gap:9px; border-color:#193a58; }
.side-note p { font-size:9px; }.side-note>[data-icon] { color:#4aabef; }
.sidebar-setting { padding:9px; font-size:11px; background:#0e2b46; border-color:#1d4768; border-radius:5px; }
.sidebar-version { padding:17px 3px 0; font-size:8px; }
.app-shell { margin-left:var(--sidebar-width); }
.page { padding:18px 20px 16px; max-width:2280px; }
.hero { margin-bottom:15px; gap:16px; align-items:center; flex-wrap:nowrap; }
.hero h1 { font-size:18px; margin:0 0 5px; line-height:1.3; gap:12px; font-weight:600; }
.hero h1>span { font-size:9px; font-weight:400; letter-spacing:.13em; color:var(--faint); }
.hero-heading .muted { font-size:10px; max-width:none; }
.hero-label { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--faint); white-space:nowrap; }
.hero-label svg { width:14px; height:14px; color:var(--accent); }.hero-label i { font-style:normal; color:var(--line-strong); margin:0 3px; }
.grid { gap:14px; }
.card { padding:13px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(160deg,var(--panel-top),var(--panel) 65%); box-shadow:var(--shadow); }
[data-theme="dark"] .card { border-color:#1d496c; }
.card-title { margin-bottom:12px; min-height:26px; gap:8px; }
.card-title h2,.card-title h3 { font-size:12px; font-weight:600; }
.title-with-icon { gap:7px; }.title-with-icon>[data-icon] { color:var(--blue); }.title-with-icon>[data-icon]>svg { width:16px; height:16px; }
.panel-caption { color:var(--faint); font-size:8px; letter-spacing:.1em; font-weight:400; }
.card-icon { width:30px; height:30px; border-radius:50%; }.card-icon svg { width:18px; height:18px; }
.metrics { grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:14px; }
.kpi-card { position:relative; min-height:118px; padding:13px 14px; overflow:hidden; }
.kpi-card::after { content:""; position:absolute; height:1px; width:32%; bottom:-1px; left:14px; background:var(--blue); opacity:.6; }
.kpi-heading { display:flex; gap:8px; align-items:center; }.kpi-heading h2 { font-size:11px; font-weight:500; color:var(--muted); }.kpi-heading small { font-size:8px; font-weight:400; display:block; color:var(--faint); margin-top:1px; }
.kpi-value { display:flex; align-items:baseline; gap:6px; margin:7px 0 4px; min-height:36px; }
.kpi-value strong { font-size:29px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.025em; line-height:1.25; }
.kpi-value>span { font-size:11px; color:var(--muted); }
.speed-card { border-top-width:1px; }.speed-card .kpi-value strong { color:var(--blue); }
.kpi-card>p { font-size:9px; color:var(--muted); }.kpi-card>p b { color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }
.kpi-secondary { margin-left:5px; }.kpi-card .state { background:none; font-size:9px; padding:0; }
.mode-value { align-items:center; }.mode-value strong { font-size:19px; letter-spacing:0; overflow-wrap:anywhere; }
.meter { margin:0; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:transparent; }.meter i { background:var(--blue); }
.navigation-grid { grid-template-columns:minmax(0,2.65fr) minmax(300px,1fr); align-items:stretch; margin-bottom:14px; }
.map-card { padding:13px; }.map-card .card-title { flex-wrap:nowrap; }.map-card .title-with-icon { flex-wrap:wrap; }
.map-card .card-title .small-button svg { width:12px; height:12px; }
.map-stage { flex:1; min-height:410px; border-radius:5px; border-color:var(--line); isolation:isolate; }
#map { height:100%; min-height:410px; position:absolute; inset:0; }
.map-layer-label { position:absolute; top:12px; left:52px; z-index:500; display:flex; gap:7px; align-items:center; padding:7px 11px; background:var(--panel); border:1px solid var(--line-strong); border-radius:4px; font-size:10px; color:var(--text); box-shadow:0 2px 8px #0002; pointer-events:none; }
.map-layer-label svg { width:13px; height:13px; color:var(--accent); }.map-layer-divider { height:11px; width:1px; background:var(--line-strong); margin:0 2px; }
.map-north { position:absolute; bottom:27px; right:12px; z-index:500; height:59px; width:44px; display:flex; align-items:center; flex-direction:column; justify-content:center; background:var(--panel); border:1px solid var(--line-strong); border-radius:23px; color:var(--text); pointer-events:none; }
.map-north b { font-size:9px; color:var(--muted); }.map-north>span { font-size:26px; line-height:1.1; color:var(--accent); }
.map-empty { z-index:550; gap:9px; background-color:var(--panel); background-image:radial-gradient(ellipse at center,#0086ff0a,transparent 60%),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:auto,44px 44px,44px 44px; }
.map-empty strong { font-size:13px; font-weight:500; z-index:1; }.map-empty>span:last-child { font-size:10px; z-index:1; }
.map-empty>[data-icon] { z-index:1; width:58px; height:58px; border-width:5px; margin-bottom:8px; }.map-empty>[data-icon] svg { width:25px; height:25px; }
.radar-rings { width:270px; height:270px; border:1px solid var(--line-strong); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-61%); opacity:.5; background:radial-gradient(circle,transparent 33%,var(--line) 33.5%,transparent 34%,transparent 49%,var(--line) 49.5%,transparent 50%); }
.radar-rings::after { content:""; position:absolute; inset:19px; border-top:1px solid var(--blue); border-radius:50%; transform:rotate(-35deg); opacity:.7; }
.map-controls { margin-top:12px; gap:8px; }.map-controls .button-row { gap:5px; }.map-controls .switch-label { font-size:10px; }
.vector-info { margin-top:9px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
.map-vector-readouts { margin:0; gap:5px 14px; font-size:10px; }.map-vector-status { margin:0; font-size:9px; }
.map-track-info { margin-top:9px; display:flex; justify-content:space-between; gap:6px 12px; align-items:center; flex-wrap:wrap; }.map-track-info .muted { font-size:9px; }.track-legend { margin:0; }
.map-footer { border-top:1px solid var(--line); padding-top:8px; margin-top:9px; font-size:9px; }
.map-velocity-vectors { width:264px; height:264px; } /* 不能继承通用 UI 图标尺寸。 */
[data-theme="dark"] .leaflet-tile-pane { filter:brightness(.67) saturate(.72) hue-rotate(8deg); } /* 只处理底图，轨迹与箭头保留原色。 */
.leaflet-bar { border:1px solid var(--line-strong)!important; box-shadow:0 2px 8px #0002!important; }
.leaflet-bar a,.leaflet-bar a:hover { background:var(--panel); color:var(--text); border-bottom-color:var(--line-strong); }
.leaflet-control-attribution { background:var(--panel)!important; color:var(--muted); padding:2px 5px!important; font-size:8px!important; }.leaflet-control-attribution a { color:var(--accent); }
.telemetry-rail { display:flex; flex-direction:column; gap:14px; min-width:0; }
.attitude-card { padding:12px; }.attitude-card .card-title { margin-bottom:9px; }.attitude-stage { border-radius:4px; border:1px solid var(--line); }
#boatCanvas { height:172px; width:100%; }
.stage-label { top:8px; left:8px; font-size:8px; padding:3px 5px; border-radius:3px; }.stage-label svg { width:11px; height:11px; }
.viewer-controls { margin-top:10px; gap:8px; }.viewer-controls .inline-controls { width:100%; justify-content:space-between; gap:8px; }.switch-label,.quality-label { font-size:10px; }
.viewer-controls .button-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:5px; }.viewer-controls .small-button { padding:4px 5px; font-size:9px; min-height:26px; }
.quality-label select { padding:2px 4px; font-size:10px; border-radius:3px; }.viewer-status { padding-top:7px; font-size:9px; overflow-wrap:anywhere; }
.telemetry-card { flex:1; padding:12px; }.telemetry-card>.card-title { margin-bottom:8px; }
.telemetry-tabs { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-bottom:9px; background:var(--soft); }
.telemetry-tabs button { border:0; border-radius:0; color:var(--muted); background:transparent; font-weight:400; font-size:10px; padding:5px; min-height:28px; }
.telemetry-tabs button[aria-selected="true"] { background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }.telemetry-tabs button:focus-visible { outline-offset:-3px; }
.telemetry-panel { min-height:199px; }.telemetry-panel:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.telemetry-status { display:flex; align-items:center; justify-content:space-between; gap:6px; color:var(--muted); font-size:9px; margin-bottom:5px; flex-wrap:wrap; }.telemetry-status .state { font-size:9px; padding:2px 5px; }
.telemetry-table>div { display:flex; justify-content:space-between; gap:10px; align-items:baseline; min-height:27px; padding:5px 1px; border-bottom:1px solid var(--line); font-size:10px; }
.telemetry-table dt { color:var(--muted); flex-shrink:0; }.telemetry-table dt small { margin-left:4px; font-size:8px; color:var(--faint); }.telemetry-table dd { text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; min-width:0; }
.telemetry-meta { display:flex; gap:5px 12px; flex-wrap:wrap; padding-top:9px; font-size:8px; color:var(--faint); }.telemetry-meta b { font-weight:400; color:var(--muted); }
.attitude-values { margin:8px 0 5px; gap:5px; }.attitude-values>div { padding:7px; border-radius:4px; }.attitude-values span { font-size:8px; }.attitude-values b { font-size:18px; margin-top:3px; }.gyro-table>div { min-height:24px; padding:3px 1px; }
.systems-grid { grid-template-columns:minmax(320px,1fr) minmax(0,1.8fr); align-items:stretch; margin-bottom:14px; }
.chart-card { padding:12px; }.chart-card .card-title { gap:7px; margin-bottom:7px; flex-wrap:wrap; }.chart-card .button-row { margin-left:auto; }.chart-card .small-button { min-height:25px; font-size:9px; padding:4px 7px; }
.chart-legend { font-size:9px; margin:3px 0 0; gap:12px; }.chart-card canvas { height:166px; }.chart-readouts { padding-top:9px; gap:8px; }.chart-readouts span { font-size:9px; }.chart-readouts b { font-size:13px; margin-top:2px; }
#propulsion { min-width:0; }.motors { height:100%; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }.motor { padding:12px; }.motor .card-title { gap:7px; }.motor .card-title h3 { font-size:11px; }.motor .card-title .card-icon { width:25px; height:25px; }.motor .card-title .card-icon svg { width:15px; height:15px; }.motor .state { font-size:9px; padding:3px 5px; }
.motor-main { margin:15px 0; gap:10px; }.motor-dial,.motor-dial svg { width:65px; height:65px; }.motor-dial>[data-icon] svg { width:23px; height:23px; }.motor-rpm strong { font-size:27px; }.motor-rpm>span { font-size:9px; margin-left:4px; }.motor-rpm p { font-size:8px; }.motor-output strong { font-size:18px; }.motor-output strong small { font-size:10px; }.motor-output p { font-size:8px; }
.dial-value { stroke:var(--chart-actual); }.motor:nth-child(2) .dial-value { stroke:var(--blue); }
.motor-values { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:12px 0; }.motor-values>div,.motor-values>div:nth-child(3) { padding-left:8px; border-left:1px solid var(--line); }.motor-values>div:first-child { padding-left:0; border:0; }.motor-values span { font-size:9px; }.motor-values b { font-size:13px; }.motor-values small { font-size:8px; margin-left:2px; }.motor-extra { font-size:8px; gap:4px 10px; line-height:1.9; margin-top:10px; }
.diagnostics-card { padding:12px; }.diagnostics-card .card-title { margin-bottom:10px; }.diagnostics-card .card-icon { height:24px; width:24px; }.diagnostics-card .card-icon svg { height:14px; width:14px; }
.diagnostics-body { display:grid; grid-template-columns:210px minmax(0,1fr) 265px; gap:10px 22px; align-items:center; }
.connection-route { margin:0; padding:13px 10px; gap:5px; border-radius:4px; }.connection-route span { font-size:9px; gap:4px; }.connection-route svg { width:14px; height:14px; }
.diag-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }.diag-grid>span { font-size:8px; }.diag-grid b { font-size:13px; margin-top:3px; }
.diagnostics-card .connection-details { grid-column:1/-1; grid-row:2; border-top:1px solid var(--line); margin:2px 0 0; padding-top:9px; }.connection-details summary { font-size:9px; }.characteristic { font-size:9px; }.connection-details .muted { font-size:9px; }
.settings-callout { margin:0; padding:10px; gap:8px; border-radius:4px; }.settings-callout strong { font-size:10px; }.settings-callout p { font-size:8px; }.settings-callout button { width:27px; min-width:27px; height:27px; padding:6px; }.settings-callout button svg { width:14px; height:14px; }
footer { padding-top:15px; font-size:8px; color:var(--faint); }
/* 大屏保持地图优先；笔记本收窄导航，平板和手机按阅读顺序堆叠。 */
@media(min-width:1800px) {
  :root { --sidebar-width:210px; --header-height:74px; }
  .page { padding:18px 22px; }.brand { font-size:22px; }.topbar { padding:12px 24px; }.topbar-context { margin-left:auto; margin-right:30px; }
  .sidebar { padding-left:14px; padding-right:14px; }.side-nav a { font-size:13px; padding:14px 12px; }.side-nav a.active::before { left:-14px; }.vessel-summary { margin-top:40px; }
  .kpi-card { padding:15px 20px; }.kpi-value strong { font-size:32px; }.mode-value strong { font-size:23px; }.kpi-heading small { display:inline; margin-left:4px; }.kpi-heading h2 { font-size:12px; }
  .navigation-grid { grid-template-columns:minmax(0,3.1fr) minmax(330px,1fr); }.map-stage,#map { min-height:440px; }#boatCanvas { height:186px; }
  .systems-grid { grid-template-columns:1fr 1.8fr; }.chart-card canvas { height:175px; }.motor-main { margin:16px 0; }.motor-dial,.motor-dial svg { height:75px; width:75px; }.motor-rpm strong { font-size:32px; }.motor-values b { font-size:16px; }
}
@media(max-width:1250px) {
  .topbar-context { display:none; }.toolbar { margin-left:auto; }.page { padding:16px; }.grid { gap:12px; }
  .navigation-grid { grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr); }.metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.kpi-card { min-height:105px; padding:11px 14px; }.kpi-heading small { display:inline; margin-left:4px; }.kpi-value { margin-top:5px; min-height:33px; }.kpi-value strong { font-size:26px; }.mode-value strong { font-size:19px; }
  .systems-grid { grid-template-columns:minmax(0,1fr); }.chart-card canvas { height:200px; }.motors { min-height:255px; }.motor-rpm strong { font-size:30px; }.motor-dial,.motor-dial svg { width:72px; height:72px; }.motor-values b { font-size:16px; }
  .diagnostics-body { grid-template-columns:190px minmax(0,1fr); }.diag-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.settings-callout { grid-column:1/-1; grid-row:2; }.diagnostics-card .connection-details { grid-row:3; }
}
@media(max-width:1050px) and (min-width:741px) {
  :root { --sidebar-width:64px; }.sidebar { padding:18px 8px; }.workspace-label,.sidebar-bottom,.vessel-summary { display:none; }.side-nav { gap:9px; }.side-nav a { justify-content:center; padding:13px 0; }.side-nav a>span:not([data-icon]) { display:none; }.side-nav a.active::before { left:-8px; }
}
@media(max-width:860px) {
  .brand { font-size:17px; gap:8px; }.brand-mark,.brand-mark svg { height:35px; width:35px; }.brand-caption { font-size:7px; letter-spacing:.19em; }.topbar { gap:12px; padding:12px 16px; }.toolbar { gap:5px; }.toolbar button { padding:6px 8px; font-size:10px; }.toolbar .icon-button { padding:7px; }
  .hero-label { display:none; }.hero { flex-wrap:nowrap; }.hero h1 { font-size:17px; }.navigation-grid { grid-template-columns:minmax(0,1fr); }.map-stage,#map { min-height:380px; }
  .telemetry-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }.telemetry-panel { min-height:199px; }#boatCanvas { height:172px; }.telemetry-card { min-height:100%; }
  .motor-values { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:740px) {
  :root { --header-height:118px; --sidebar-width:0px; }.sidebar { display:none; }.app-shell { margin-left:0; }.topbar { position:relative; min-height:0; display:flex; flex-wrap:wrap; padding:14px 16px 12px; gap:14px; }.brand { font-size:19px; letter-spacing:.06em; }.brand-caption { font-size:7px; }.brand-mark,.brand-mark svg { height:37px; width:37px; }
  .toolbar { width:100%; margin:0; gap:7px; flex-wrap:wrap; }.toolbar .icon-button { position:absolute; right:16px; top:16px; }.toolbar .badge { margin-right:auto; font-size:9px; padding:4px 7px; }.toolbar button { min-height:32px; padding:6px 9px; font-size:10px; }.toolbar .settings-button svg { display:inline-block; width:13px; height:13px; }.toolbar .primary svg { width:14px; height:14px; }
  .mobile-nav { display:flex; position:sticky; top:0; z-index:20; background:var(--panel); border-bottom:1px solid var(--line); padding:0 12px; gap:0; justify-content:space-between; }.mobile-nav a { padding:12px 9px; font-size:11px; text-decoration:none; white-space:nowrap; color:var(--muted); border-bottom:2px solid transparent; }.mobile-nav a.active { color:var(--accent); border-color:var(--accent); }
  html { scroll-padding-top:65px; }.page { padding:18px 14px 16px; }.hero { margin-bottom:14px; }.hero h1 { font-size:18px; margin:0 0 5px; }.hero h1>span { font-size:8px; }.hero-heading .muted { font-size:10px; }.metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kpi-card { padding:10px; min-height:110px; }.kpi-heading { gap:6px; }.kpi-heading .card-icon { width:25px; height:25px; }.kpi-heading .card-icon svg { width:15px; height:15px; }.kpi-heading h2 { font-size:10px; }.kpi-heading small { display:block; margin:1px 0 0; font-size:7px; }.kpi-value strong { font-size:25px; }.kpi-value>span { font-size:9px; }.mode-value strong { font-size:15px; }.kpi-card>p { font-size:8px; }.kpi-secondary { display:block; margin-left:0; }.kpi-card .state { font-size:8px; }
  .card { border-radius:7px; }.map-card,.attitude-card,.telemetry-card,.chart-card,.motor,.diagnostics-card { padding:12px; }.map-stage,#map { min-height:350px; }.map-card .panel-caption { display:none; }.map-card .card-title h2 { font-size:12px; }
  .map-controls { gap:10px; }.map-controls .small-button { padding:5px 8px; font-size:10px; }.map-controls .switch-label { font-size:10px; }.vector-info { gap:5px; }.map-vector-readouts { font-size:9px; gap:6px 12px; }.map-vector-status { font-size:8px; }.track-legend>span { font-size:8px; }.map-footer { font-size:8px; }
  .systems-grid { gap:12px; }.chart-card canvas { height:205px; }.chart-readouts b { font-size:14px; }
  .diagnostics-body { grid-template-columns:minmax(0,1fr); gap:14px; }.connection-route { padding:12px; }.connection-route span { font-size:11px; }.diag-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.diag-grid>span { font-size:9px; }.diag-grid b { font-size:15px; }.settings-callout { grid-column:auto; grid-row:auto; }.diagnostics-card .connection-details { grid-column:auto; grid-row:auto; padding-top:12px; }.settings-callout strong { font-size:11px; }.settings-callout p { font-size:9px; }
}
@media(max-width:520px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.kpi-card { min-height:111px; padding:12px; }.kpi-heading small { display:inline; margin-left:3px; }.kpi-value { margin:6px 0 3px; }.kpi-value strong { font-size:27px; }.mode-value strong { font-size:19px; }.kpi-secondary { display:inline; margin-left:3px; }.kpi-card>p { font-size:9px; }.kpi-heading .card-icon { height:27px; width:27px; }
  .telemetry-rail { display:flex; gap:12px; }.telemetry-card { min-height:0; }.telemetry-panel { min-height:0; }.telemetry-table>div { min-height:32px; padding:7px 1px; font-size:11px; }.telemetry-meta { font-size:9px; padding-top:12px; }.telemetry-status { font-size:10px; }.telemetry-tabs button { font-size:11px; min-height:32px; }.attitude-values b { font-size:24px; }.attitude-values span { font-size:9px; }.gyro-table>div { min-height:29px; padding:5px 1px; }
  #boatCanvas { height:218px; }.viewer-controls .small-button { font-size:10px; min-height:29px; }.viewer-status { font-size:9px; }.stage-label { font-size:9px; }.telemetry-rail .card-title h2 { font-size:13px; }
  .motors { grid-template-columns:minmax(0,1fr); }.motor-main { gap:14px; margin:15px 0; }.motor-rpm strong { font-size:32px; }.motor-dial,.motor-dial svg { width:74px; height:74px; }.motor-output strong { font-size:24px; }.motor-values b { font-size:15px; }.motor-values span { font-size:10px; }.motor-values small { font-size:9px; }.motor-extra { font-size:9px; }
}
@media(max-width:360px) {
  .page { padding:16px 10px; }.topbar { padding:13px 12px 11px; }.brand { font-size:17px; gap:8px; }.brand-caption { font-size:6px; }.brand-mark,.brand-mark svg { height:34px; width:34px; }.toolbar { gap:5px; }.toolbar .icon-button { right:12px; top:14px; }.toolbar button { padding:6px 7px; font-size:9px; }.toolbar .badge { font-size:8px; }.toolbar .settings-button svg { display:none; }
  .mobile-nav { padding:0 8px; }.mobile-nav a { padding:11px 7px; font-size:10px; }.hero h1 { font-size:17px; gap:8px; }.hero h1>span { font-size:7px; }.kpi-card { padding:11px; }.kpi-heading small { display:block; margin-left:0; }.kpi-value strong { font-size:26px; }.mode-value strong { font-size:17px; }.kpi-card>p { font-size:8px; }.kpi-secondary { margin-left:2px; }
  .map-stage,#map { min-height:310px; }.map-controls .button-row { gap:4px; }.map-controls .small-button { font-size:9px; padding:5px 6px; }.map-layer-label { font-size:9px; padding:6px 8px; left:48px; }.map-north { width:35px; height:51px; }.radar-rings { width:235px; height:235px; }
  .motor-values b { font-size:14px; }.motor-rpm strong { font-size:29px; }.motor-dial,.motor-dial svg { height:65px; width:65px; }
}