/* OpenC5ISR OpenOcean v1.3.0 — premium responsive operator workspace */
:root {
  color-scheme: dark;
  --bg-0: #020711;
  --bg-1: #05111e;
  --bg-2: #071a29;
  --panel: rgba(7, 22, 35, 0.91);
  --panel-strong: rgba(6, 18, 30, 0.98);
  --panel-soft: rgba(11, 31, 46, 0.72);
  --line: rgba(124, 181, 207, 0.18);
  --line-strong: rgba(115, 205, 232, 0.36);
  --text: #edf8fb;
  --muted: #8eafbf;
  --quiet: #648394;
  --ocean: #48cce2;
  --ocean-bright: #78e8f5;
  --blue: #4e8dff;
  --blue-soft: #86b8ff;
  --green: #65dca5;
  --amber: #ffca70;
  --orange: #ff9b59;
  --red: #ff6d64;
  --violet: #b49aff;
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 11px;
  --radius-sm: 7px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg-0); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% -5%, rgba(37, 127, 176, 0.22), transparent 30rem),
    radial-gradient(circle at 87% 6%, rgba(29, 77, 149, 0.2), transparent 32rem),
    linear-gradient(145deg, #020711 0%, #04101c 52%, #020811 100%);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

::selection { color: #001017; background: var(--ocean-bright); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15); }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 20px; background: rgba(111, 174, 198, 0.36); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(111, 194, 219, 0.55); }

.ambient-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(105, 187, 217, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 187, 217, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
}

.app-shell {
  width: min(1920px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px clamp(18px, 2.3vw, 48px) 20px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 22px;
  padding: 4px 2px 0;
}

.brand-lockup { max-width: 860px; }
.brand-kicker, .section-label {
  color: var(--ocean);
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand-row { display: flex; align-items: center; gap: 14px; margin: 5px 0 2px; }
.brand-row h1 {
  margin: 0;
  color: #f4fcff;
  font-size: clamp(2.45rem, 4vw, 4.45rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.95;
}
.brand-row h1 span { color: var(--ocean-bright); font-weight: 420; }
.version-chip, .integration-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid rgba(93, 219, 238, 0.35);
  border-radius: 999px;
  padding: 4px 9px;
  color: #a9eff7;
  background: rgba(49, 170, 194, 0.1);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.brand-lockup > p { max-width: 790px; margin: 9px 0 0; color: var(--muted); font-size: 0.96rem; }

.topbar-status { display: flex; align-items: stretch; gap: 10px; }
.system-state, .utc-clock {
  display: flex;
  align-items: center;
  min-width: 190px;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 15px;
  background: rgba(4, 15, 26, 0.78);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
.system-state { gap: 11px; }
.system-state small, .utc-clock small, .aoi-title small, .aoi-state small {
  display: block;
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.system-state strong, .utc-clock strong { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.88rem; letter-spacing: 0.07em; }
.system-state[data-state="operational"] strong { color: var(--green); }
.system-state[data-state="demonstration"] strong { color: var(--amber); }
.system-state[data-state="collecting"] strong, .system-state[data-state="connecting"] strong { color: var(--ocean-bright); }
.system-state[data-state="degraded"] strong, .system-state[data-state="offline"] strong { color: var(--red); }
.state-light, .footer-light, .state-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--quiet);
  box-shadow: 0 0 0 4px rgba(100, 131, 148, 0.12);
}
.state-light[data-state="operational"], .state-dot.live, .footer-light { background: var(--green); box-shadow: 0 0 0 4px rgba(101, 220, 165, 0.1), 0 0 14px rgba(101, 220, 165, 0.65); }
.state-light[data-state="demonstration"], .state-light[data-state="fallback"], .state-dot.demo, .state-dot.archive { background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 202, 112, 0.1), 0 0 14px rgba(255, 202, 112, 0.5); }
.state-light[data-state="collecting"], .state-light[data-state="connecting"], .state-dot.cached { background: var(--ocean); box-shadow: 0 0 0 4px rgba(72, 204, 226, 0.1), 0 0 14px rgba(72, 204, 226, 0.55); animation: pulse 1.6s infinite; }
.state-light[data-state="degraded"], .state-light[data-state="offline"], .state-dot.unavailable, .state-dot.out-of-range { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 109, 100, 0.1), 0 0 14px rgba(255, 109, 100, 0.45); }
.utc-clock { display: grid; min-width: 150px; text-align: right; }
.utc-clock strong { color: var(--text); font-size: 1.05rem; }
.utc-clock span { color: var(--quiet); font-family: var(--mono); font-size: 0.65rem; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(12, 34, 50, 0.76), rgba(4, 15, 26, 0.91)),
    var(--panel);
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(18px);
}

.aoi-command-bar {
  display: grid;
  grid-template-columns: minmax(235px, 1.3fr) minmax(135px, 0.62fr) minmax(135px, 0.62fr) minmax(118px, 0.48fr) auto minmax(150px, 0.68fr);
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 13px 16px;
  border-color: rgba(83, 198, 224, 0.27);
  background: linear-gradient(90deg, rgba(12, 53, 73, 0.88), rgba(5, 20, 33, 0.94) 60%);
}
.aoi-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.aoi-title strong { display: block; overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.section-index {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(102, 220, 239, 0.38);
  border-radius: 50%;
  color: var(--ocean-bright);
  background: rgba(47, 174, 199, 0.1);
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.compact-field, .field { display: grid; gap: 6px; min-width: 0; }
.compact-field > span, .field > span, .select-field > span, .source-detail-block > span, .source-endpoint > span {
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
input, select, textarea {
  width: 100%;
  border: 1px solid rgba(113, 171, 196, 0.22);
  border-radius: var(--radius-sm);
  outline: 0;
  padding: 10px 11px;
  color: var(--text);
  background: rgba(0, 8, 16, 0.52);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
input:hover, select:hover, textarea:hover { border-color: rgba(113, 195, 220, 0.38); }
input:focus, select:focus, textarea:focus { border-color: var(--ocean); background: rgba(2, 17, 28, 0.86); box-shadow: 0 0 0 3px rgba(72, 204, 226, 0.11); }
textarea { min-height: 92px; resize: vertical; }
select { cursor: pointer; }
.input-unit { display: flex; align-items: stretch; overflow: hidden; border: 1px solid rgba(113, 171, 196, 0.22); border-radius: var(--radius-sm); background: rgba(0, 8, 16, 0.52); }
.input-unit input { border: 0; border-radius: 0; background: transparent; }
.input-unit b { display: grid; min-width: 44px; place-items: center; border-left: 1px solid var(--line); color: var(--ocean); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; }
.aoi-actions { display: flex; gap: 8px; }
.aoi-state { text-align: right; }
.aoi-state small { margin-top: 5px; }

.button, .mini-button, .icon-button, .format-button {
  position: relative;
  border: 1px solid rgba(102, 184, 211, 0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: #dff5fa;
  background: rgba(27, 67, 88, 0.4);
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.button { min-height: 42px; padding: 10px 15px; white-space: nowrap; }
.button:hover, .mini-button:hover, .icon-button:hover, .format-button:hover { border-color: rgba(113, 224, 242, 0.66); background: rgba(40, 103, 128, 0.48); transform: translateY(-1px); }
.button:active, .mini-button:active, .icon-button:active, .format-button:active { transform: translateY(0); }
.button:focus-visible, .mini-button:focus-visible, .icon-button:focus-visible, .format-button:focus-visible, .workspace-tab:focus-visible, .source-card:focus-visible { outline: 2px solid var(--ocean-bright); outline-offset: 3px; }
.button.primary { border-color: rgba(70, 214, 235, 0.7); color: #001216; background: linear-gradient(135deg, #78e8f5, #43b9d2); box-shadow: 0 10px 28px rgba(32, 181, 209, 0.22); }
.button.primary:hover { background: linear-gradient(135deg, #9df3fa, #55cade); }
.button.subtle { background: rgba(8, 32, 47, 0.45); }
.button.wide { width: 100%; }
.button-icon { margin-right: 5px; font-size: 1rem; }
.mini-button { min-height: 31px; padding: 6px 10px; }
.icon-button { display: inline-grid; width: 34px; height: 34px; place-items: center; padding: 0; font-family: var(--sans); font-size: 1.08rem; }
.icon-button.danger { border-color: rgba(255, 109, 100, 0.25); color: #ffaaa4; background: rgba(109, 28, 25, 0.24); }
button:disabled { cursor: not-allowed; opacity: 0.38; transform: none !important; }
.busy { pointer-events: none; opacity: 0.76; }
.busy::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.72s linear infinite;
}

.mode-pill, .freshness-chip, .result-count, .source-status, .table-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: #a9c8d5;
  background: rgba(9, 30, 43, 0.72);
  font-family: var(--mono);
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mode-pill[data-mode="live-and-archive"], .table-state.live, .source-status.operational { border-color: rgba(101, 220, 165, 0.4); color: var(--green); background: rgba(35, 105, 77, 0.17); }
.mode-pill[data-mode^="demo"], .table-state.demo, .table-state.archive { border-color: rgba(255, 202, 112, 0.38); color: var(--amber); background: rgba(125, 82, 22, 0.16); }
.table-state.cached { color: var(--ocean-bright); }
.table-state.unavailable, .table-state.out-of-range { color: var(--red); }

.workspace-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 4px;
  margin-bottom: 16px;
  padding: 5px;
  overflow-x: auto;
  border-radius: 13px;
  background: rgba(3, 13, 23, 0.91);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.24);
}
.workspace-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 62px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
  background: transparent;
  transition: background 140ms ease, border-color 140ms ease;
}
.workspace-tab > span { grid-row: 1 / 3; margin-right: 9px; color: #567b8d; font-family: var(--mono); font-size: 0.67rem; font-weight: 900; }
.workspace-tab b { color: #aac5d1; font-size: 0.71rem; letter-spacing: 0.025em; }
.workspace-tab small { overflow: hidden; color: #577889; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-tab:hover { background: rgba(40, 94, 118, 0.2); }
.workspace-tab.active { border-color: rgba(69, 204, 227, 0.3); background: linear-gradient(145deg, rgba(35, 119, 145, 0.28), rgba(10, 43, 60, 0.36)); }
.workspace-tab.active > span, .workspace-tab.active b { color: var(--ocean-bright); }
.workspace-tab.active small { color: #9ab8c6; }

.workspace { min-height: 660px; }
.tab-panel { animation: tabIn 220ms ease-out; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading h2, .panel-heading h3 { margin: 3px 0 0; line-height: 1.15; }
.panel-heading h2 { font-size: clamp(1.4rem, 2.2vw, 2.25rem); letter-spacing: -0.035em; }
.panel-heading h3 { font-size: 1.04rem; }

.command-hero, .section-hero {
  position: relative;
  display: flex;
  min-height: 235px;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  overflow: hidden;
  padding: clamp(26px, 3.6vw, 54px);
  border-color: rgba(91, 206, 230, 0.28);
  background:
    radial-gradient(circle at 82% 48%, rgba(40, 172, 203, 0.18), transparent 24rem),
    linear-gradient(125deg, rgba(10, 45, 64, 0.96), rgba(4, 16, 28, 0.94) 58%);
}
.command-hero::after, .section-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(85, 218, 239, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(85, 218, 239, 0.025), 0 0 0 112px rgba(85, 218, 239, 0.018);
}
.hero-copy { position: relative; z-index: 1; max-width: 850px; }
.hero-copy h2, .section-hero h2 { max-width: 980px; margin: 8px 0 10px; font-size: clamp(2rem, 4vw, 4.1rem); font-weight: 760; letter-spacing: -0.055em; line-height: 0.98; }
.hero-copy p, .section-hero p { max-width: 800px; margin: 0; color: #a2bec9; font-size: clamp(0.92rem, 1.2vw, 1.08rem); }
.hero-actions { display: flex; gap: 9px; margin-top: 23px; }

.posture-display { position: relative; z-index: 1; display: grid; justify-items: center; min-width: 245px; }
.posture-ring {
  --posture-score: 0;
  display: grid;
  width: 178px;
  height: 178px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--ocean) calc(var(--posture-score) * 1%), rgba(90, 140, 160, 0.14) 0);
  box-shadow: 0 0 55px rgba(48, 178, 202, 0.13);
}
.posture-ring::before { content: ""; position: absolute; width: 156px; height: 156px; border: 1px solid rgba(111, 194, 218, 0.22); border-radius: 50%; background: #061725; }
.posture-ring > div { position: relative; z-index: 1; text-align: center; }
.posture-ring small { display: block; color: var(--quiet); font-family: var(--mono); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.13em; }
.posture-ring strong { display: block; margin: 4px 0; color: var(--ocean-bright); font-size: 1.2rem; letter-spacing: 0.04em; }
.posture-ring span { color: #93b6c4; font-family: var(--mono); font-size: 0.71rem; }
.posture-display[data-level="favorable"] .posture-ring { background: conic-gradient(var(--green) calc(var(--posture-score) * 1%), rgba(90, 140, 160, 0.14) 0); }
.posture-display[data-level="caution"] .posture-ring { background: conic-gradient(var(--amber) calc(var(--posture-score) * 1%), rgba(90, 140, 160, 0.14) 0); }
.posture-display[data-level="high"], .posture-display[data-level="severe"] { --ocean: var(--red); }
.posture-display > p { max-width: 250px; margin: 13px 0 0; color: var(--muted); text-align: center; font-size: 0.78rem; }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.metric-card {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  background: linear-gradient(145deg, rgba(13, 39, 56, 0.78), rgba(5, 19, 31, 0.9));
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.025);
}
.metric-card::after { content: ""; position: absolute; right: -26px; bottom: -38px; width: 100px; height: 100px; border: 1px solid rgba(86, 205, 227, 0.09); border-radius: 50%; }
.metric-card > span { display: block; color: #7898a8; font-family: var(--mono); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; }
.metric-card > strong { display: block; margin: 12px 0 7px; color: #f3fbfd; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -0.04em; }
.metric-card > small { display: block; color: #698897; font-size: 0.68rem; }
.metric-icon { display: grid; position: absolute; top: 14px; right: 15px; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(84, 205, 226, 0.22); border-radius: 50%; color: var(--ocean); background: rgba(44, 162, 184, 0.08); font-size: 1rem; }

.command-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 12px; }
.command-grid > .panel, .source-readiness-panel, .profile-panel { min-height: 322px; padding: 21px; }
.brief-list { display: grid; gap: 9px; }
.brief-item { display: grid; grid-template-columns: 43px 1fr; gap: 11px; align-items: start; border-top: 1px solid rgba(123, 178, 199, 0.1); padding-top: 11px; }
.brief-item:first-child { border-top: 0; padding-top: 0; }
.brief-item > span { display: grid; min-height: 32px; place-items: center; border: 1px solid rgba(88, 203, 225, 0.2); border-radius: 6px; color: var(--ocean); background: rgba(29, 112, 135, 0.1); font-family: var(--mono); font-size: 0.63rem; font-weight: 900; }
.brief-item.lead > span { color: var(--amber); }
.brief-item b { color: #dcedf2; font-size: 0.82rem; }
.brief-item p { margin: 3px 0 0; color: #718e9c; font-size: 0.7rem; }
.impact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 17px; }
.impact-row > div { border: 1px solid rgba(117, 177, 198, 0.13); border-radius: 7px; padding: 8px; background: rgba(4, 15, 25, 0.45); }
.impact-row span { display: block; color: var(--quiet); font-family: var(--mono); font-size: 0.53rem; font-weight: 800; letter-spacing: 0.08em; }
.impact-row b { display: block; overflow: hidden; margin-top: 3px; color: #cce2e9; font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.skeleton-line { height: 12px; margin: 10px 0; border-radius: 5px; background: linear-gradient(90deg, rgba(91, 151, 174, 0.08), rgba(91, 151, 174, 0.2), rgba(91, 151, 174, 0.08)); background-size: 200% 100%; animation: shimmer 1.8s infinite; }
.skeleton-line.short { width: 64%; }

.source-state-list { display: grid; gap: 8px; }
.source-state-row { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; border-bottom: 1px solid rgba(108, 164, 185, 0.1); padding: 8px 0 11px; }
.source-state-row:last-child { border-bottom: 0; }
.source-state-row b { display: block; color: #cce2e9; font-family: var(--mono); font-size: 0.67rem; }
.source-state-row small { display: block; overflow: hidden; max-width: 210px; margin-top: 2px; color: #64818f; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.source-state-row > strong { color: #90b0bd; font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.05em; }
.profile-quicklook { display: grid; gap: 7px; }
.profile-row { display: grid; grid-template-columns: 43px 1fr; gap: 9px; align-items: center; width: 100%; border: 1px solid rgba(105, 166, 188, 0.12); border-radius: 7px; padding: 8px; cursor: pointer; text-align: left; color: inherit; background: rgba(4, 17, 28, 0.44); }
.profile-row:hover { border-color: rgba(97, 207, 229, 0.32); }
.profile-row > span { color: var(--green); font-family: var(--mono); font-size: 0.58rem; font-weight: 900; }
.profile-row.constrained > span { color: var(--amber); }
.profile-row b { display: block; color: #d1e5eb; font-size: 0.7rem; }
.profile-row small { display: block; color: #668594; font-size: 0.59rem; }

.integration-strip { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 12px; padding: 16px 22px; }
.integration-strip div:not(.flow-arrow) span { display: block; color: var(--ocean); font-family: var(--mono); font-size: 0.57rem; font-weight: 900; letter-spacing: 0.1em; }
.integration-strip div:not(.flow-arrow) b { display: block; margin-top: 3px; color: #9ebac6; font-size: 0.66rem; font-weight: 600; }
.flow-arrow { color: #44778b; font-size: 1.2rem; }

.section-hero { min-height: 190px; margin-bottom: 12px; padding: 32px 38px; }
.section-hero h2 { max-width: 940px; font-size: clamp(1.9rem, 3.2vw, 3.15rem); }
.source-counts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 112px); gap: 7px; }
.source-counts > div, .assurance-score { border: 1px solid rgba(100, 190, 216, 0.18); border-radius: 10px; padding: 12px; background: rgba(3, 17, 28, 0.56); }
.source-counts strong, .assurance-score strong { display: block; color: var(--ocean-bright); font-size: 1.65rem; }
.source-counts span, .assurance-score span, .assurance-score small { color: var(--quiet); font-family: var(--mono); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.08em; }

.source-toolbar { display: grid; grid-template-columns: auto minmax(240px, 1fr) minmax(190px, 0.38fr) auto; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px; }
.segmented { display: flex; gap: 3px; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: rgba(0, 8, 15, 0.42); }
.segmented button { min-width: 62px; border: 0; border-radius: 5px; padding: 8px 10px; cursor: pointer; color: #7693a1; background: transparent; font-family: var(--mono); font-size: 0.6rem; font-weight: 900; }
.segmented button.active { color: #001217; background: var(--ocean); }
.search-field { display: flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid rgba(113, 171, 196, 0.22); border-radius: 8px; padding: 0 10px; background: rgba(0, 8, 16, 0.52); }
.search-field > span { color: var(--ocean); font-size: 1.1rem; }
.search-field input { border: 0; padding-left: 0; background: transparent; }
.select-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.select-field select { padding: 9px; }

.source-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.75fr); gap: 12px; align-items: start; }
.source-list { max-height: 760px; overflow: auto; padding: 12px; }
.source-group + .source-group { margin-top: 12px; }
.source-group-heading, .layer-group-heading { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; color: #7ea2b1; font-family: var(--mono); font-size: 0.59rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.source-group-heading b, .layer-group-heading b { color: var(--ocean); }
.source-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 66px; border: 1px solid transparent; border-top-color: rgba(101, 157, 179, 0.1); padding: 10px; cursor: pointer; text-align: left; color: inherit; background: rgba(3, 14, 24, 0.28); transition: background 120ms ease, border-color 120ms ease; }
.source-card:first-of-type { border-top-color: transparent; }
.source-card:hover, .source-card.selected { border-color: rgba(82, 204, 228, 0.27); border-radius: 8px; background: rgba(29, 85, 107, 0.25); }
.agency-mark { display: inline-grid; min-width: 43px; min-height: 28px; place-items: center; border: 1px solid rgba(82, 204, 228, 0.28); border-radius: 6px; color: var(--ocean-bright); background: rgba(29, 107, 129, 0.16); font-family: var(--mono); font-size: 0.6rem; font-weight: 900; }
.agency-mark.nasa { border-color: rgba(102, 145, 255, 0.34); color: #a7c0ff; background: rgba(49, 76, 150, 0.18); }
.source-card-copy { min-width: 0; }
.source-card-copy b { display: block; overflow: hidden; color: #d6e9ee; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.source-card-copy small { display: block; overflow: hidden; margin-top: 3px; color: #648392; font-size: 0.63rem; text-overflow: ellipsis; white-space: nowrap; }
.source-status { font-size: 0.52rem; }
.source-inspector { position: sticky; top: 12px; min-height: 460px; padding: 22px; }
.empty-inspector { display: grid; min-height: 410px; place-content: center; justify-items: center; text-align: center; }
.empty-inspector > span { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid rgba(79, 207, 231, 0.25); border-radius: 50%; color: var(--ocean); font-family: var(--mono); font-weight: 900; }
.empty-inspector h3 { margin: 15px 0 4px; }
.empty-inspector p { max-width: 300px; margin: 0; color: var(--quiet); font-size: 0.75rem; }
.source-inspector-hero { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 21px; }
.source-inspector-hero h3 { margin: 4px 0 0; font-size: 1.25rem; }
.source-detail-dl { margin-bottom: 18px !important; }
.source-detail-block { margin-top: 16px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tag-row i { border: 1px solid rgba(102, 177, 202, 0.18); border-radius: 999px; padding: 4px 7px; color: #9db8c3; background: rgba(17, 49, 65, 0.42); font-style: normal; font-size: 0.61rem; }
.source-note { margin-top: 17px; border-left: 3px solid var(--amber); padding: 10px 12px; background: rgba(96, 61, 17, 0.12); }
.source-note b { color: var(--amber); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; }
.source-note p { margin: 5px 0 0; color: #a9bac0; font-size: 0.7rem; }
.source-endpoint { margin: 17px 0; }
.source-endpoint code { display: block; overflow: auto; margin-top: 7px; border: 1px solid rgba(107, 165, 185, 0.13); border-radius: 7px; padding: 9px; color: #88d8e6; background: rgba(0, 8, 15, 0.55); font-family: var(--mono); font-size: 0.62rem; white-space: nowrap; }
.source-doc-link { display: grid; place-items: center; text-decoration: none; }

.map-workspace { display: grid; grid-template-columns: 290px minmax(600px, 1fr) 300px; gap: 10px; min-height: 720px; }
.map-layer-rail, .map-inspector { padding: 16px; }
.map-layer-rail { max-height: 820px; overflow: auto; }
.bridge-state { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; border: 1px solid rgba(105, 174, 198, 0.15); border-radius: 8px; padding: 9px; background: rgba(4, 16, 27, 0.54); }
.bridge-state small { display: block; color: var(--quiet); font-family: var(--mono); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.08em; }
.bridge-state strong { display: block; margin-top: 2px; color: #b3d0da; font-family: var(--mono); font-size: 0.61rem; }
.layer-group + .layer-group { margin-top: 8px; }
.layer-item { border: 1px solid transparent; border-radius: 7px; padding: 7px; transition: background 120ms ease, border-color 120ms ease; }
.layer-item.enabled { border-color: rgba(86, 195, 218, 0.14); background: rgba(24, 74, 94, 0.15); }
.layer-item label { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; cursor: pointer; }
.layer-item input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--ocean); }
.layer-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ocean); box-shadow: 0 0 9px rgba(72, 204, 226, 0.4); }
.layer-swatch.bathymetry { background: #2b82d8; }
.layer-swatch.weather { background: #b49aff; }
.layer-swatch.satellite { background: #65dca5; }
.layer-swatch.hazards { background: #ff6d64; }
.layer-swatch.operations { background: #ffca70; }
.layer-swatch.observations { background: #55e2f0; }
.layer-copy { min-width: 0; }
.layer-copy b { display: block; overflow: hidden; color: #c9e0e7; font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.layer-copy small { display: block; overflow: hidden; margin-top: 2px; color: #5f7e8c; font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; }
.layer-opacity { height: 3px; margin: 7px 0 0 47px; padding: 0; accent-color: var(--ocean); opacity: 0.35; }
.layer-item.enabled .layer-opacity { opacity: 1; }
.map-disclaimer { display: grid; gap: 4px; margin-top: 16px; border: 1px solid rgba(255, 202, 112, 0.22); border-radius: 8px; padding: 10px; background: rgba(101, 65, 17, 0.11); }
.map-disclaimer b { color: var(--amber); font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.08em; }
.map-disclaimer span { color: #927d61; font-size: 0.62rem; }
.map-stage { display: flex; min-width: 0; flex-direction: column; overflow: hidden; padding: 10px; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 3px 5px 11px; }
.map-title { display: block; color: #d9edf2; font-family: var(--mono); font-size: 0.69rem; font-weight: 900; letter-spacing: 0.09em; }
.map-toolbar small { color: var(--quiet); font-size: 0.65rem; }
.map-tools { display: flex; gap: 5px; }
.map-canvas-wrap { position: relative; min-height: 560px; flex: 1; overflow: hidden; border: 1px solid rgba(104, 190, 216, 0.23); border-radius: 10px; background: #031624; }
#oceanMapCanvas { display: block; width: 100%; height: 100%; min-height: 560px; cursor: crosshair; object-fit: cover; }
#oceanMapCanvas.dragging { cursor: grabbing; }
.map-loading { display: none; position: absolute; inset: 0; place-content: center; justify-items: center; pointer-events: none; color: #c9f4fa; background: rgba(2, 11, 19, 0.34); backdrop-filter: blur(2px); font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em; }
.map-loading.active { display: grid; }
.map-loading span { width: 33px; height: 33px; margin-bottom: 10px; border: 3px solid rgba(94, 213, 232, 0.23); border-top-color: var(--ocean); border-radius: 50%; animation: spin 0.8s linear infinite; }
.map-corner { position: absolute; display: flex; gap: 7px; pointer-events: none; }
.map-corner span { border: 1px solid rgba(113, 194, 218, 0.22); border-radius: 4px; padding: 5px 7px; color: #b8d7df; background: rgba(2, 11, 19, 0.76); font-family: var(--mono); font-size: 0.53rem; font-weight: 800; letter-spacing: 0.05em; }
.map-corner.top-left { top: 12px; left: 12px; }
.map-corner.bottom-left { bottom: 12px; left: 12px; }
.map-corner.bottom-right { right: 12px; bottom: 12px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; min-height: 34px; padding: 10px 5px 1px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; color: #819fac; font-size: 0.59rem; }
.inspector-dl, .health-dl { display: grid; grid-template-columns: minmax(90px, 0.66fr) 1fr; gap: 0; margin: 0; }
.inspector-dl dt, .health-dl dt { border-top: 1px solid rgba(109, 163, 183, 0.11); padding: 10px 4px; color: var(--quiet); font-family: var(--mono); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.08em; }
.inspector-dl dd, .health-dl dd { margin: 0; border-top: 1px solid rgba(109, 163, 183, 0.11); padding: 10px 4px; color: #bcd4dc; font-family: var(--mono); font-size: 0.63rem; text-align: right; overflow-wrap: anywhere; }
.map-feature-list { margin: 18px 0; }
#featureList { display: grid; gap: 5px; margin-top: 8px; }
#featureList button { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; width: 100%; border: 1px solid rgba(110, 170, 191, 0.11); border-radius: 7px; padding: 8px; cursor: pointer; text-align: left; color: inherit; background: rgba(4, 16, 27, 0.45); }
#featureList button:hover { border-color: rgba(80, 205, 228, 0.28); }
.feature-icon { width: 9px; height: 9px; border-radius: 50%; background: var(--ocean); }
.feature-icon.coops-station { background: var(--blue); }
.feature-icon.eonet-event { background: var(--orange); }
#featureList b { display: block; color: #c9e0e7; font-size: 0.65rem; }
#featureList small { display: block; color: #63818f; font-size: 0.55rem; }

.conditions-hero { align-items: flex-start; }
.time-range-display, .drift-callout { position: relative; z-index: 1; min-width: 250px; border: 1px solid rgba(90, 197, 219, 0.2); border-radius: 11px; padding: 14px; background: rgba(4, 18, 29, 0.62); }
.time-range-display small, .drift-callout span { display: block; color: var(--ocean); font-family: var(--mono); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.09em; }
.time-range-display strong, .drift-callout strong { display: block; margin: 6px 0; color: #d6e9ee; font-size: 0.8rem; }
.time-range-display span, .drift-callout small { color: var(--quiet); font-size: 0.63rem; }
.condition-metrics { grid-template-columns: repeat(6, 1fr); }
.condition-metrics .metric-card { min-height: 110px; }
.condition-metrics .metric-card > strong { margin-top: 9px; font-size: 1.42rem; }
.conditions-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; }
.timeline-panel, .window-builder, .windows-panel { padding: 20px; }
.timeline-panel { position: relative; min-width: 0; }
#conditionsChart { display: block; width: 100%; height: auto; max-height: 500px; border: 1px solid rgba(102, 180, 205, 0.13); border-radius: 8px; background: #04121f; }
.chart-key { display: flex; gap: 7px; }
.chart-key span { border-bottom: 3px solid; padding: 3px 6px; color: #91afba; font-family: var(--mono); font-size: 0.54rem; font-weight: 900; }
.wave-key { border-color: #55e2f0 !important; }
.wind-key { border-color: #a6daff !important; }
.tide-key { border-color: #ffcd70 !important; }
.timeline-empty { position: absolute; inset: 90px 20px 20px; display: grid; place-items: center; pointer-events: none; color: #63818f; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.threshold-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.window-builder .button { margin-top: 15px; }
.window-summary { display: grid; margin-top: 15px; border: 1px solid rgba(91, 180, 205, 0.16); border-radius: 9px; padding: 12px; background: rgba(4, 16, 27, 0.48); }
.window-summary span { color: var(--quiet); font-family: var(--mono); font-size: 0.57rem; font-weight: 900; }
.window-summary strong { margin: 5px 0; color: var(--ocean-bright); font-size: 1.2rem; }
.window-summary small { color: #718f9c; font-size: 0.65rem; }
.windows-panel { margin-top: 12px; }
.window-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.window-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; border: 1px solid rgba(94, 194, 215, 0.15); border-radius: 9px; padding: 11px; background: rgba(5, 22, 34, 0.58); }
.window-card > span { color: var(--ocean); font-family: var(--mono); font-size: 0.64rem; font-weight: 900; }
.window-card b { display: block; color: #d3e7ec; font-size: 0.7rem; }
.window-card small { color: #698895; font-size: 0.61rem; }
.window-card > strong { color: var(--green); font-family: var(--mono); font-size: 0.58rem; }

.drift-grid { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 12px; }
.drift-controls, .drift-visual { padding: 20px; }
.drift-fields { grid-template-columns: repeat(2, 1fr); }
.drift-controls > .button { margin-top: 15px; }
#driftCanvas { display: block; width: 100%; height: auto; max-height: 600px; border: 1px solid rgba(103, 183, 208, 0.14); border-radius: 9px; }
.drift-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 10px; }
.drift-results > div { border: 1px solid rgba(106, 167, 189, 0.13); border-radius: 7px; padding: 9px; background: rgba(3, 15, 25, 0.5); }
.drift-results span { display: block; color: var(--quiet); font-family: var(--mono); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.07em; }
.drift-results strong { display: block; margin-top: 4px; color: #d6e9ee; font-size: 0.8rem; }
.mission-effects-grid { display: grid; grid-template-columns: 1.5fr 0.7fr; gap: 12px; margin-top: 12px; }
.task-proposal-panel, .model-transparency-panel { padding: 20px; }
.task-form-grid, .report-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wide-field { grid-column: 1 / -1; }
.action-result { display: grid; min-height: 35px; align-content: center; margin-top: 10px; border-radius: 7px; color: #8eaeba; font-family: var(--mono); font-size: 0.61rem; }
.action-result span { font-weight: 900; }
.action-result .success { color: var(--green); }
.action-result .error { color: var(--red); }
.action-result small { margin-top: 3px; color: var(--quiet); }
.model-transparency-panel ol { margin: 0; padding-left: 23px; color: #9eb9c4; }
.model-transparency-panel li { margin: 10px 0; padding-left: 3px; }
.model-transparency-panel p { border-left: 3px solid var(--ocean); padding-left: 11px; color: #7897a5; font-size: 0.73rem; }

.reports-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.58fr); gap: 12px; }
.report-builder, .report-contents, .report-archive-panel { padding: 22px; }
.report-preview-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 16px 0; }
.report-preview-strip > div { border: 1px solid rgba(107, 169, 190, 0.13); border-radius: 8px; padding: 9px; background: rgba(4, 16, 27, 0.48); }
.report-preview-strip span { display: block; color: var(--quiet); font-family: var(--mono); font-size: 0.53rem; font-weight: 900; }
.report-preview-strip strong { display: block; overflow: hidden; margin-top: 4px; color: #c9e0e7; font-size: 0.69rem; text-overflow: ellipsis; white-space: nowrap; }
.report-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.format-button { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 12px; min-height: 83px; padding: 12px; text-align: left; text-transform: none; }
.format-icon { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid currentColor; border-radius: 8px; font-family: var(--mono); font-size: 0.7rem; font-weight: 900; }
.format-button.pdf { color: #ff9f97; background: rgba(105, 31, 27, 0.2); }
.format-button.pptx { color: #ffbd7b; background: rgba(115, 61, 24, 0.2); }
.format-button b { display: block; color: #e2f0f3; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; }
.format-button small { display: block; margin-top: 4px; color: #738e9a; font-size: 0.62rem; }
.report-progress { display: grid; grid-template-columns: 10px 1fr; gap: 11px; align-items: center; margin-top: 13px; border: 1px solid rgba(104, 167, 189, 0.13); border-radius: 8px; padding: 10px; background: rgba(3, 14, 24, 0.45); }
.report-progress > span { width: 8px; height: 8px; border-radius: 50%; background: var(--quiet); }
.report-progress[data-state="working"] > span { background: var(--ocean); animation: pulse 1.2s infinite; }
.report-progress[data-state="success"] > span { background: var(--green); }
.report-progress[data-state="error"] > span { background: var(--red); }
.report-progress b { display: block; color: #bcd4dc; font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.07em; }
.report-progress small { display: block; margin-top: 2px; color: #698794; font-size: 0.6rem; }
.contents-list { display: grid; gap: 5px; }
.contents-list > div { display: grid; grid-template-columns: 34px 1fr; gap: 8px; border-bottom: 1px solid rgba(107, 165, 185, 0.1); padding: 9px 0; }
.contents-list > div > span { grid-row: 1 / 3; color: var(--ocean); font-family: var(--mono); font-size: 0.61rem; font-weight: 900; }
.contents-list b { color: #c8dfe6; font-size: 0.7rem; }
.contents-list small { color: #637f8d; font-size: 0.6rem; }
.report-archive-panel { margin-top: 12px; }
.report-archive { display: grid; gap: 7px; }
.report-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 11px; align-items: center; border: 1px solid rgba(103, 168, 190, 0.13); border-radius: 9px; padding: 10px; background: rgba(4, 17, 28, 0.48); }
.report-format { display: grid; min-height: 39px; place-items: center; border: 1px solid rgba(255, 154, 145, 0.32); border-radius: 7px; color: #ffaaa3; background: rgba(104, 33, 28, 0.19); font-family: var(--mono); font-size: 0.64rem; font-weight: 900; }
.report-format.pptx { border-color: rgba(255, 184, 113, 0.35); color: #ffc58e; background: rgba(107, 62, 24, 0.19); }
.report-row-copy { min-width: 0; }
.report-row-copy b { display: block; overflow: hidden; color: #d3e7ec; font-size: 0.73rem; text-overflow: ellipsis; white-space: nowrap; }
.report-row-copy small, .report-row-copy code { display: block; margin-top: 2px; color: #688693; font-size: 0.59rem; }
.report-row-copy code { color: #76bacc; font-family: var(--mono); }
.report-row-actions { display: flex; gap: 5px; }

.assurance-score { position: relative; z-index: 1; min-width: 180px; text-align: center; }
.assurance-score strong { font-size: 3rem; }
.assurance-score small { display: block; }
.assurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.health-panel, .cache-panel, .auth-panel, .provenance-panel, .architecture-panel, .boundaries-panel { padding: 20px; }
.cache-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.cache-metrics > div { border: 1px solid rgba(106, 166, 188, 0.12); border-radius: 8px; padding: 11px; background: rgba(3, 16, 26, 0.48); }
.cache-metrics span { display: block; color: var(--quiet); font-family: var(--mono); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.06em; }
.cache-metrics strong { display: block; margin-top: 5px; color: var(--ocean-bright); font-size: 1.25rem; }
.auth-panel > p { margin: 0 0 15px; color: #7c9aa7; font-size: 0.7rem; }
.provenance-panel { margin-top: 12px; }
.provenance-table-wrap { overflow-x: auto; }
.provenance-table { width: 100%; border-collapse: collapse; font-size: 0.68rem; }
.provenance-table th { border-bottom: 1px solid rgba(104, 171, 193, 0.23); padding: 9px; color: #7896a4; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.07em; text-align: left; }
.provenance-table td { border-bottom: 1px solid rgba(104, 164, 184, 0.09); padding: 10px 9px; color: #94afba; vertical-align: top; }
.provenance-table td b { color: #cce1e7; font-family: var(--mono); font-size: 0.63rem; }
.architecture-grid { display: grid; grid-template-columns: 1.45fr 0.7fr; gap: 12px; margin-top: 12px; }
.architecture-flow { display: flex; align-items: stretch; gap: 8px; }
.architecture-node { display: grid; flex: 1; align-content: center; min-height: 94px; border: 1px solid rgba(104, 170, 192, 0.14); border-radius: 9px; padding: 10px; background: rgba(3, 16, 26, 0.46); }
.architecture-node.active { border-color: rgba(81, 207, 230, 0.42); background: rgba(24, 95, 117, 0.25); }
.architecture-node span { color: var(--ocean); font-family: var(--mono); font-size: 0.57rem; font-weight: 900; letter-spacing: 0.08em; }
.architecture-node b { margin-top: 5px; color: #9eb9c4; font-size: 0.63rem; font-weight: 600; }
.architecture-flow > i { align-self: center; color: #497487; font-style: normal; }
.boundaries-panel ul { margin: 0; padding-left: 20px; color: #9ab4bf; }
.boundaries-panel li { margin: 9px 0; }

.empty-state { display: grid; min-height: 90px; place-items: center; border: 1px dashed rgba(103, 174, 198, 0.18); border-radius: 8px; padding: 16px; color: #688694; text-align: center; font-size: 0.7rem; }
.empty-state.constrained { border-color: rgba(255, 109, 100, 0.23); color: #c08c87; }

.app-footer { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; margin-top: 17px; color: #557482; font-family: var(--mono); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.07em; text-align: center; }
.app-footer b { color: #9dc1cd; }
.footer-separator { color: #335768; }

.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: grid; width: min(390px, calc(100vw - 40px)); gap: 8px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; overflow: hidden; border: 1px solid rgba(107, 183, 207, 0.28); border-radius: 10px; padding: 12px; pointer-events: auto; background: rgba(5, 20, 32, 0.97); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.46); animation: toastIn 220ms ease-out; }
.toast.leaving { opacity: 0; transform: translateX(14px); transition: 220ms ease; }
.toast-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--ocean); }
.toast.success .toast-mark { background: var(--green); }
.toast.warning .toast-mark { background: var(--amber); }
.toast.error .toast-mark { background: var(--red); }
.toast b { display: block; color: #d9ebef; font-size: 0.72rem; }
.toast small { display: block; margin-top: 2px; color: #7594a1; font-size: 0.62rem; }
.toast button { border: 0; cursor: pointer; color: #708e9b; background: transparent; font-size: 1rem; }

.modal-backdrop { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; background: rgba(0, 5, 10, 0.78); backdrop-filter: blur(8px); }
.snapshot-modal { width: min(1120px, 96vw); max-height: 92vh; overflow: auto; padding: 18px; }
.snapshot-modal img { display: block; width: 100%; border: 1px solid rgba(104, 190, 216, 0.23); border-radius: 10px; background: #031624; }
.snapshot-modal p { margin: 11px 0 0; color: #7c9aa7; font-size: 0.7rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.45; transform: scale(0.85); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes tabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1520px) {
  .aoi-command-bar { grid-template-columns: minmax(210px, 1fr) repeat(3, minmax(110px, 0.48fr)) auto; }
  .aoi-state { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
  .aoi-state small { margin: 0; }
  .workspace-tabs { grid-template-columns: repeat(7, minmax(145px, 1fr)); }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .map-workspace { grid-template-columns: 255px minmax(520px, 1fr); }
  .map-inspector { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(300px, 0.8fr) 1fr auto; align-items: start; gap: 20px; }
  .map-inspector > .panel-heading { grid-column: 1 / -1; margin-bottom: 0; }
  .map-feature-list { margin: 0; }
  .map-inspector > .button { align-self: end; }
}

@media (max-width: 1180px) {
  .topbar { align-items: stretch; }
  .topbar-status { display: grid; }
  .system-state, .utc-clock { min-height: 54px; }
  .aoi-command-bar { grid-template-columns: repeat(3, 1fr); }
  .aoi-title { grid-column: 1 / -1; }
  .aoi-actions { grid-column: span 2; }
  .aoi-state { grid-column: auto; display: grid; }
  .command-grid { grid-template-columns: 1fr 1fr; }
  .commander-panel { grid-column: 1 / -1; }
  .integration-strip { grid-template-columns: 1fr; gap: 7px; }
  .flow-arrow { display: none; }
  .source-layout { grid-template-columns: 1fr; }
  .source-inspector { position: static; min-height: 0; }
  .empty-inspector { min-height: 220px; }
  .map-workspace { grid-template-columns: 230px minmax(450px, 1fr); }
  .conditions-grid { grid-template-columns: 1fr; }
  .window-builder { display: grid; grid-template-columns: 1fr 1.5fr; gap: 14px; }
  .window-builder .panel-heading, .window-builder .button, .window-builder .window-summary { grid-column: 1 / -1; }
  .window-list { grid-template-columns: repeat(2, 1fr); }
  .assurance-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-panel { grid-column: 1 / -1; }
  .architecture-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app-shell { padding-inline: 13px; }
  .topbar { display: grid; }
  .topbar-status { grid-template-columns: 1fr 1fr; }
  .brand-row h1 { font-size: 3rem; }
  .workspace-tabs { grid-template-columns: repeat(7, 155px); }
  .command-hero, .section-hero { display: grid; padding: 25px; }
  .posture-display { min-width: 0; }
  .posture-ring { width: 150px; height: 150px; }
  .posture-ring::before { width: 132px; height: 132px; }
  .metric-grid, .condition-metrics { grid-template-columns: repeat(2, 1fr); }
  .command-grid { grid-template-columns: 1fr; }
  .commander-panel { grid-column: auto; }
  .source-toolbar { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; grid-row: 1; }
  .map-workspace { grid-template-columns: 1fr; }
  .map-layer-rail { max-height: none; }
  .map-inspector { grid-column: auto; grid-template-columns: 1fr; }
  .map-inspector > .panel-heading { grid-column: auto; }
  .drift-grid { grid-template-columns: 1fr; }
  .mission-effects-grid { grid-template-columns: 1fr; }
  .reports-layout { grid-template-columns: 1fr; }
  .architecture-flow { display: grid; grid-template-columns: 1fr; }
  .architecture-flow > i { display: none; }
}

@media (max-width: 680px) {
  body { font-size: 14px; }
  .app-shell { padding: 14px 9px; }
  .topbar { margin-bottom: 15px; }
  .topbar-status { grid-template-columns: 1fr; }
  .system-state, .utc-clock { min-width: 0; }
  .utc-clock { text-align: left; }
  .aoi-command-bar { grid-template-columns: 1fr 1fr; padding: 11px; }
  .aoi-title, .aoi-actions, .aoi-state { grid-column: 1 / -1; }
  .radius-field { grid-column: 1 / -1; }
  .aoi-actions { display: grid; grid-template-columns: 1fr; }
  .aoi-state { justify-content: start; text-align: left; }
  .workspace { min-height: 0; }
  .command-hero, .section-hero { min-height: 0; padding: 21px; }
  .hero-copy h2, .section-hero h2 { font-size: 2.05rem; }
  .hero-actions { display: grid; }
  .metric-grid, .condition-metrics { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 122px; padding: 14px; }
  .metric-card > strong { font-size: 1.35rem; }
  .impact-row { grid-template-columns: repeat(2, 1fr); }
  .source-counts { grid-template-columns: repeat(2, minmax(80px, 1fr)); }
  .source-toolbar { grid-template-columns: 1fr; }
  .search-field, .segmented, .select-field { grid-column: auto; grid-row: auto; }
  .segmented button { flex: 1; }
  .source-card { grid-template-columns: 44px 1fr; }
  .source-status { display: none; }
  .map-stage { padding: 7px; }
  .map-toolbar { align-items: flex-start; }
  .map-title { font-size: 0.57rem; }
  .map-canvas-wrap, #oceanMapCanvas { min-height: 420px; }
  .map-corner.top-left { display: grid; }
  .threshold-grid, .drift-fields { grid-template-columns: 1fr 1fr; }
  .window-builder { display: block; }
  .window-list { grid-template-columns: 1fr; }
  .drift-results { grid-template-columns: repeat(2, 1fr); }
  .task-form-grid, .report-form { grid-template-columns: 1fr; }
  .wide-field { grid-column: auto; }
  .report-preview-strip { grid-template-columns: repeat(2, 1fr); }
  .report-actions { grid-template-columns: 1fr; }
  .report-row { grid-template-columns: 48px 1fr; }
  .report-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .assurance-grid { grid-template-columns: 1fr; }
  .auth-panel { grid-column: auto; }
  .cache-metrics { grid-template-columns: 1fr 1fr; }
  .architecture-node { min-height: 76px; }
  .app-footer { flex-wrap: wrap; }
  .footer-separator { display: none; }
}

@media (max-width: 430px) {
  .brand-row { align-items: flex-end; }
  .brand-row h1 { font-size: 2.45rem; }
  .brand-lockup > p { font-size: 0.8rem; }
  .metric-grid, .condition-metrics { grid-template-columns: 1fr; }
  .threshold-grid, .drift-fields { grid-template-columns: 1fr; }
  .source-counts { width: 100%; }
  .time-range-display, .drift-callout { min-width: 0; }
  .map-tools { display: grid; grid-template-columns: repeat(4, auto); }
  .report-preview-strip, .cache-metrics { grid-template-columns: 1fr; }
  .format-button { grid-template-columns: 50px 1fr; }
  .toast-stack { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
  .ambient-grid, .workspace-tabs, .aoi-command-bar, .topbar-status, .app-footer, button { display: none !important; }
  body { background: #fff; color: #111; }
  .app-shell { width: 100%; padding: 0; }
  .panel, .metric-card { break-inside: avoid; border-color: #bbb; color: #111; background: #fff; box-shadow: none; }
}

/* OpenOcean v1.3 — separate environmental severity from information confidence. */
.decision-score-display{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:16px;min-width:370px;align-items:start}
.decision-score-card{display:grid;justify-items:center;min-width:0}
.decision-score-ring{--decision-score:0;position:relative;display:grid;width:154px;height:154px;place-items:center;border-radius:50%;background:conic-gradient(var(--ocean) calc(var(--decision-score)*1%),rgba(90,140,160,.14) 0);box-shadow:0 0 46px rgba(48,178,202,.12)}
.decision-score-ring::before{content:"";position:absolute;width:134px;height:134px;border:1px solid rgba(111,194,218,.22);border-radius:50%;background:#061725}
.decision-score-ring>div{position:relative;z-index:1;text-align:center;max-width:118px}
.decision-score-ring small{display:block;color:var(--quiet);font-family:var(--mono);font-size:.49rem;font-weight:900;letter-spacing:.11em;line-height:1.35}
.decision-score-ring strong{display:block;margin:5px 0;color:var(--ocean-bright);font-size:1rem;letter-spacing:.04em}
.decision-score-ring span{color:#93b6c4;font-family:var(--mono);font-size:.66rem}
.decision-score-card>p{max-width:180px;margin:10px 0 0;color:var(--muted);text-align:center;font-size:.7rem;line-height:1.4}
.severity-score[data-level="severe"] .decision-score-ring,.severity-score[data-level="high"] .decision-score-ring{--ocean:var(--red)}
.severity-score[data-level="moderate"] .decision-score-ring,.severity-score[data-level="low"] .decision-score-ring{--ocean:var(--amber)}
.severity-score[data-level="nominal"] .decision-score-ring{--ocean:var(--green)}
.confidence-score[data-level="high"] .decision-score-ring{--ocean:var(--green)}
.confidence-score[data-level="moderate"] .decision-score-ring{--ocean:var(--ocean)}
.confidence-score[data-level="low"] .decision-score-ring,.confidence-score[data-level="poor"] .decision-score-ring{--ocean:var(--amber)}
.brief-dual-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.brief-dual-summary>div{border:1px solid rgba(117,177,198,.16);border-radius:8px;padding:11px;background:rgba(4,15,25,.46)}
.brief-dual-summary span,.brief-section-title{display:block;color:var(--ocean);font-family:var(--mono);font-size:.56rem;font-weight:900;letter-spacing:.1em}
.brief-dual-summary strong{display:block;margin-top:5px;color:#dceef3;font-size:.83rem}
.brief-dual-summary small{display:block;margin-top:4px;color:#718e9c;font-size:.64rem;line-height:1.35}
.brief-section-title{margin:14px 0 7px;border-bottom:1px solid rgba(113,171,192,.12);padding-bottom:6px}
.brief-item.constraint>span{color:var(--amber)}
.brief-item.uncertainty>span{color:#e9bb62;border-color:rgba(233,187,98,.25);background:rgba(143,101,24,.12)}
.brief-item.good>span{color:var(--green);border-color:rgba(77,222,164,.22);background:rgba(29,120,88,.10)}
.brief-gap-list{display:flex;flex-wrap:wrap;gap:7px}
.brief-gap-list span{border:1px solid rgba(233,187,98,.28);border-radius:999px;padding:6px 9px;color:#e8c982;background:rgba(126,88,20,.12);font-family:var(--mono);font-size:.62rem;font-weight:800;text-transform:uppercase}
.report-preview-strip{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.decision-score-display{min-width:0;grid-template-columns:1fr 1fr}.decision-score-ring{width:140px;height:140px}.decision-score-ring::before{width:122px;height:122px}}
@media(max-width:680px){.decision-score-display{grid-template-columns:1fr 1fr;width:100%}.decision-score-ring{width:126px;height:126px}.decision-score-ring::before{width:108px;height:108px}.brief-dual-summary{grid-template-columns:1fr}.report-preview-strip{grid-template-columns:1fr 1fr}}