/* Screenshot-based Figma exploration. Kept separate from the main UI stylesheet. */
:root {
  --bg: #edf1f7;
  --panel: #fff;
  --surface: #f5f7fc;
  --surface-hover: #e9eef7;
  --line: #dfe6f0;
  --text: #263950;
  --muted: #687b96;
  --accent: #147e69;
  --accent-soft: #e5f6ef;
  --danger: #bf4959;
  --danger-soft: #fff0f2;
  --input: #fff;
  --shadow: 0 5px 17px #304c6d0b, 0 1px 3px #304c6d05;
  --figma-header: #263c56;
  --metric-label: #626eac;
  --mint: #58c7ad;
  --coral: #f68183;
  --violet: #a39be9;
}
:root[data-theme="dark"] {
  --bg: #1b1c20;
  --panel: #25262a;
  --surface: #292b30;
  --surface-hover: #33363e;
  --line: #373a42;
  --text: #edf0f5;
  --muted: #acb7c9;
  --accent: #79dfc3;
  --accent-soft: #253f38;
  --danger: #ffa2ac;
  --danger-soft: #442d36;
  --input: #23252b;
  --shadow: 0 8px 20px #0005, inset 0 1px #ffffff05;
  --figma-header: #17181b;
  --metric-label: #aaa3ff;
}
body { background: var(--bg); }
.topbar {
  height: 78px;
  min-height: 78px;
  margin: 0 -20px;
  padding: 0 25px;
  background: var(--figma-header);
  border-bottom: 1px solid #ffffff09;
}
.brand { gap: 18px; }
.brand > img { width: 140px; }
.brand-product { border-color: #ffffff20; }
.brand strong { color: #edf2fb; font-size: 16px; }
.brand strong span, .brand small { color: #b1c4db; }
.topbar nav { padding: 0; background: transparent; border: 0; border-radius: 0; gap: 17px; }
.topbar nav button.secondary {
  padding: 12px 4px;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #d3dce9;
  font-weight: 500;
}
.topbar nav button.secondary:hover { background: transparent; color: #fff; }
.topbar nav button.secondary.active { background: transparent; border-bottom-color: #8cddca; color: #a5e9d9; }
.nav-symbol { color: inherit; }
.account-nav .theme-toggle { background: #ffffff09; border-color: #ffffff20; color: #d8e2ef; }
.account-nav .theme-toggle:hover { background: #ffffff12; color: #fff; }
.account-nav > button:last-child { color: #c0cfdf; }
#current-user { border-color: #ffffff20; color: #e1e9f5; }
.workspace-overview { padding-top: 12px; }
.overview-metrics { height: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 16px; }
.metric-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1px 12px;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--panel) 60%, var(--surface));
  box-shadow: var(--shadow);
}
.metric-top { display: contents; }
.metric-icon { grid-column: 1; grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--mint); color: #fff; }
.metric-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-tone="coral"] .metric-icon { background: var(--coral); }
[data-tone="violet"] .metric-icon { background: var(--violet); }
.metric-caption { display: none; }
.metric-card > strong { grid-column: 2; grid-row: 1; align-self: end; font-size: 23px; line-height: 1.15; font-weight: 600; letter-spacing: -.7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-label { grid-column: 2; grid-row: 2; font-size: 10px; color: var(--metric-label); }
.connection-card > #vessel-state { font-size: 15px; font-weight: 550; color: var(--accent); overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.connection-card > #connection-state { grid-column: 2; grid-row: 2; margin: 0; text-align: left; font-size: 9px; min-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-shell { height: calc(100dvh - 214px); gap: 17px; }
.panel, .left-side, .right-telemetry { border-radius: 15px; }
.left-side, .right-telemetry { background: var(--panel); box-shadow: var(--shadow); }
.side-heading { padding: 2px 1px 6px; }
.side-heading h2 { font-size: 13px; }
.side-heading .eyebrow { color: var(--metric-label); letter-spacing: .9px; }
.tabs { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 3px; }
.tabs button.active { color: var(--accent); background: var(--panel); box-shadow: 0 2px 7px #0000000b; }
.sensor-card { border: 1px solid var(--line); background: linear-gradient(135deg, var(--panel) 40%, var(--surface)); padding: 12px; border-radius: 11px; }
.sensor-card h3 { font-size: 12px; font-weight: 550; }
.sensor-card dt { color: var(--metric-label); }
.sensor-card dd { font-weight: 450; }
.sensor-state { font-size: 9px; }
.sensor-group { gap: 10px; }
.local-position { border: 1px solid var(--line); background: var(--surface); }
.inline-stats b { font-weight: 500; }
.map-panel { background: var(--panel); padding: 15px; gap: 10px; }
.map-panel .section-head h1 { font-size: 16px; }
.map-panel .eyebrow { color: var(--metric-label); font-size: 8px; }
.map-wrap { border: 1px solid #60bba688; box-shadow: 0 0 0 3px #68cbb310; border-radius: 11px; min-height: 150px; }
.map-controls { gap: 8px; }
.map-controls button { border-radius: 7px; }
.map-footer { gap: 3px; font-size: 9px; }
.map-footer .map-note, #data-origin, #data-quality { font-size: 8px; }
.camera-panel { background: linear-gradient(135deg, var(--panel) 65%, var(--surface)); padding: 13px; gap: 7px; }
.camera-panel h2 { font-size: 12px; font-weight: 550; }
.camera-select select { background: var(--surface); }
.camera-viewport { border: 1px solid #65bba477; box-shadow: inset 0 0 0 3px #65bba40a; background: #131a20; }
.camera-placeholder { color: #a7b6c9; }
.live-dot { color: var(--accent); letter-spacing: 1px; font-size: 8px; }
.coordinate-bar { background: #17232ee8; border-color: #7fdec64a; }
.replay-controls { box-shadow: none; }
#vessel-command-panel { padding: 2px; }
#vessel-command-panel > .muted { font-size: 10px; }
.account-panel { background: linear-gradient(135deg, var(--panel) 65%, var(--surface)); }
.page-heading .eyebrow { color: var(--metric-label); }
.member-row { border-color: var(--line); }
.login-layout { background: var(--bg); }
.login-story { background: #1a1d22; border-right: 1px solid #ffffff0a; }
.login-story:before { background: radial-gradient(ellipse at 65% 65%, #3d776324, transparent 60%), linear-gradient(145deg, #27292e, #16191e); }
.login-logo { width: 210px; }
.story-copy { margin-top: 32px; }
.story-copy .eyebrow { color: #84d7bd; letter-spacing: 2.3px; }
.story-copy > p:last-child { color: #acbbc7; font-size: 17px; font-weight: 350; line-height: 1.9; margin-top: 15px; }
.story-bottom { color: #88949f; }
.ocean-art { opacity: .8; }
.login-form-section { background: linear-gradient(145deg, var(--panel), var(--bg)); }
.product-tag { color: var(--metric-label); letter-spacing: 2px; }
.welcome-icon { border-radius: 17px; background: linear-gradient(145deg, var(--panel), var(--surface)); box-shadow: var(--shadow); }
.login-form-body h2 { font-weight: 550; letter-spacing: -.7px; }
.login-form-body .eyebrow { color: var(--metric-label); }
#login-form input { box-shadow: inset 0 1px 3px #00000004; }
#login-submit { border-radius: 10px; }
.theme-toggle { border-radius: 8px; }
.login-access-note { font-size: 10px; }
dialog { background: var(--panel); box-shadow: var(--shadow); }
.app-copyright { min-height: 24px; }

@media(min-width:1700px) {
  .overview-metrics { gap: 20px; }
  .dashboard-shell { gap: 20px; }
  .metric-card { padding-left: 20px; padding-right: 20px; }
  .metric-card > strong { font-size: 24px; }
}
@media(max-height:800px) and (min-width:1051px) {
  .topbar { height: 68px; min-height: 68px; margin: 0 -16px; padding: 0 20px; }
  .workspace-overview { padding-top: 8px; }
  .overview-metrics { height: 56px; gap: 12px; margin-bottom: 12px; }
  .metric-card { grid-template-columns: 24px minmax(0, 1fr); gap: 1px 10px; padding: 7px 12px; border-radius: 12px; }
  .metric-icon { width: 24px; height: 24px; border-radius: 7px; }
  .metric-icon svg { width: 17px; height: 17px; }
  .metric-card > strong { font-size: 20px; }
  .metric-label { font-size: 9px; }
  .connection-card > #vessel-state { font-size: 14px; }
  .dashboard-shell { height: calc(100dvh - 184px); gap: 12px; }
  .map-panel { padding: 12px; gap: 8px; }
  .map-panel .section-head h1 { font-size: 15px; }
  .sensor-card { padding: 9px; }
  .camera-panel { padding: 10px; gap: 6px; }
  .camera-viewport { aspect-ratio: 2/1; }
}
@media(max-width:1150px) and (min-width:1051px) {
  .topbar nav { gap: 12px; }
  .topbar nav button.secondary { padding: 10px 3px; }
  .brand > img { width: 112px; }
  .metric-caption { letter-spacing: .4px; font-size: 7px; }
  .dashboard-shell { gap: 10px; }
}
@media(max-width:1050px) {
  .topbar { height: auto; padding: 14px 20px; margin: 0 -20px; }
  .overview-metrics { gap: 12px; height: 64px; }
  .metric-card { padding: 9px 11px; gap: 1px 9px; }
  .metric-card > strong { font-size: 21px; }
  .connection-card > #vessel-state { font-size: 14px; }
  .metric-caption { font-size: 7px; letter-spacing: .3px; }
  .dashboard-shell { height: auto; }
  .map-panel { height: 65dvh; min-height: 460px; }
}
@media(max-width:680px) {
  .topbar { margin: 0 -12px; padding: 12px; gap: 12px; }
  .topbar nav { gap: 8px; }
  .topbar nav button.secondary { padding: 9px; border-radius: 5px 5px 0 0; }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 10px; margin-bottom: 14px; }
  .metric-card { min-height: 64px; }
  .metric-caption { font-size: 8px; }
  .metric-card > strong { font-size: 20px; }
  .connection-card > #vessel-state { font-size: 14px; }
  .dashboard-shell { height: auto; gap: 14px; }
  .map-panel { min-height: 510px; height: 65dvh; }
  .map-panel:has(#replay-controls:not([hidden])) { min-height: 710px; }
  .camera-panel { padding: 14px; }
  .login-story { border-right: 0; border-bottom: 1px solid #ffffff10; }
  .login-logo { width: 144px; }
  .story-copy > p:last-child { display: none; }
}