:root {
  --sov-bg: #070a0f;
  --sov-bg-2: #0a0f16;
  --sov-panel: rgba(11, 16, 24, 0.88);
  --sov-panel-2: rgba(15, 22, 32, 0.82);
  --sov-line: rgba(132, 160, 190, 0.18);
  --sov-line-soft: rgba(132, 160, 190, 0.10);
  --sov-blue: #4a9eff;
  --sov-blue-soft: rgba(74, 158, 255, 0.14);
  --sov-gold: #d8a84f;
  --sov-gold-soft: rgba(216, 168, 79, 0.12);
  --sov-green: #34d37a;
  --sov-red: #ef5555;
  --sov-orange: #f2a43a;
  --sov-violet: #a78bfa;
  --sov-text: #edf4fb;
  --sov-text-2: #99a7b8;
  --sov-text-3: #526071;
  --sov-radius: 8px;
  --sov-font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --sov-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

html, body {
  color-scheme: dark;
  background:
    radial-gradient(circle at 18% 0%, rgba(74, 158, 255, 0.08), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(216, 168, 79, 0.055), transparent 28rem),
    var(--sov-bg) !important;
  color: var(--sov-text);
}

body {
  font-family: var(--sov-font);
}

* {
  scrollbar-color: rgba(154, 177, 205, 0.18) transparent;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background: rgba(154, 177, 205, 0.18);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(154, 177, 205, 0.28);
}

button, input, select, textarea {
  font: inherit;
}

button, .btn, .button, .download, .quick-btn, .mode-btn, .tab, .stab {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
.btn:focus-visible,
.button:focus-visible,
.download:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(74, 158, 255, 0.42) !important;
  outline-offset: 2px !important;
}

/* App shell */
#sov-nav {
  height: 58px !important;
  padding: 0 22px !important;
  background: rgba(4, 7, 12, 0.88) !important;
  border-bottom: 1px solid var(--sov-line-soft) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset !important;
  backdrop-filter: saturate(160%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
}

#sov-nav .brand {
  color: var(--sov-text) !important;
  font-weight: 650 !important;
  letter-spacing: 0.20em !important;
  text-shadow: 0 0 18px rgba(74, 158, 255, 0.12) !important;
}

#sov-nav .brand::after {
  content: "4.3";
  margin-left: 9px;
  color: var(--sov-gold);
  font-family: var(--sov-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

#sov-nav .tabs,
#sov-sub .stabs {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--sov-line-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#sov-nav .tab,
#sov-sub .stab {
  color: rgba(237, 244, 251, 0.50) !important;
  letter-spacing: 0.12em !important;
}

#sov-nav .tab:hover,
#sov-sub .stab:hover {
  color: var(--sov-text) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

#sov-nav .tab.on,
#sov-sub .stab.on {
  color: #06111f !important;
  background: linear-gradient(180deg, #eef7ff, #bcdcff) !important;
  box-shadow: 0 8px 24px rgba(74, 158, 255, 0.25) !important;
}

#sov-nav .brief {
  color: var(--sov-gold) !important;
  border-color: rgba(216, 168, 79, 0.42) !important;
  background: rgba(216, 168, 79, 0.07) !important;
}

#sov-nav .brief:hover {
  color: #070a0f !important;
  background: #efc766 !important;
}

#sov-nav .mic,
#sov-nav .ava {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: var(--sov-line-soft) !important;
}

#sov-sub {
  height: 42px !important;
  background: rgba(5, 8, 13, 0.80) !important;
  border-bottom: 1px solid var(--sov-line-soft) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#sov-sub .lab {
  color: var(--sov-text-3) !important;
}

#sov-iframe-w {
  background: var(--sov-bg) !important;
}

#sov-iframe-w iframe {
  background: var(--sov-bg) !important;
}

#sov-home-waves {
  background:
    radial-gradient(circle at 50% 35%, rgba(74, 158, 255, 0.14), transparent 32rem),
    radial-gradient(circle at 50% 92%, rgba(216, 168, 79, 0.09), transparent 34rem),
    #000 !important;
}

/* Map and MATLAS controls stay functional, just less default-looking. */
.mapboxgl-ctrl-group,
.leaflet-control-zoom,
.leaflet-control-layers {
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  border-radius: 10px !important;
  background: rgba(8, 12, 18, 0.78) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.mapboxgl-ctrl button,
.leaflet-control-zoom a {
  color: var(--sov-text) !important;
  background: transparent !important;
}

.mapboxgl-ctrl button:hover,
.leaflet-control-zoom a:hover {
  background: rgba(74, 158, 255, 0.12) !important;
}

.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib {
  opacity: 0.62 !important;
}

/* Ruler graph HUD */
#search-input {
  width: min(440px, 44vw) !important;
  background: rgba(7, 11, 17, 0.78) !important;
  border-color: rgba(74, 158, 255, 0.24) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#search-input:focus {
  border-color: rgba(74, 158, 255, 0.58) !important;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.12) !important;
}

#stats,
#legend,
#axis-key,
#side-panel {
  background: rgba(7, 11, 17, 0.76) !important;
  border-color: rgba(132, 160, 190, 0.16) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#side-panel {
  background:
    linear-gradient(180deg, rgba(12, 18, 27, 0.96), rgba(6, 9, 14, 0.98)) !important;
  border-left-color: rgba(74, 158, 255, 0.24) !important;
}

#panel-center,
#panel-copy-id,
#panel-close {
  border-radius: var(--sov-radius) !important;
}

body.sov-matlas #sov-nav {
  background: rgba(5, 10, 18, 0.90) !important;
}

body.sov-matlas .leaflet-container {
  background: #dfe7ed !important;
}

/* Shared page language */
.page,
.shell,
.home {
  position: relative;
}

.page::before,
.shell::before,
.home::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%);
  opacity: 0.22;
  z-index: 0;
}

.page > *,
.shell > *,
.home > * {
  position: relative;
  z-index: 1;
}

.card,
.panel,
.router-card,
.stat,
.metric,
.service,
.hero-stat,
.disc-card,
.q-st,
.reg-s,
.latest,
.vbox,
.left,
.right,
.center,
.hdr,
.q-bar,
.file-row,
.recent-row,
.result-card,
.mini {
  background: var(--sov-panel) !important;
  border: 1px solid var(--sov-line-soft) !important;
  border-radius: var(--sov-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.card:hover,
.panel:hover,
.hero-stat:hover,
.disc-card:hover,
.file-row:hover,
.recent-row:hover,
.service:hover {
  border-color: rgba(74, 158, 255, 0.25) !important;
  background: var(--sov-panel-2) !important;
}

.eyebrow,
.card-label,
.panel-title,
.title,
.hdr-title,
.sec,
.label,
.panel-sub,
.subtitle,
.dc-label,
.metric-label,
.step-label,
.mode-badge,
.health,
.status,
.pill {
  font-family: var(--sov-mono) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
}

h1,
.brand h1,
.g-text h1 {
  color: var(--sov-text) !important;
  letter-spacing: -0.035em !important;
}

.sub,
.subtitle,
.row-desc,
.service-note,
.panel-sub,
.muted,
.file-meta,
.recent-meta,
.result-text,
.srv-m,
.srv-ip,
.s-row .l,
.q-st .lb,
.reg-s .lb,
.waiting,
.small {
  color: var(--sov-text-2) !important;
}

.card-label,
.panel-title,
.title,
.hdr-title,
.sec,
.label,
.score,
.download,
.btn,
.button,
.run-btn,
.init {
  color: var(--sov-gold) !important;
}

.btn,
.button,
.run-btn,
.init,
.download,
.quick-btn,
.cb,
.gbtn,
.tbtn {
  border-radius: var(--sov-radius) !important;
  border-color: rgba(74, 158, 255, 0.22) !important;
  background: rgba(74, 158, 255, 0.075) !important;
  color: var(--sov-text) !important;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease !important;
}

.btn:hover,
.button:hover,
.run-btn:hover,
.init:hover,
.download:hover,
.quick-btn:hover,
.cb:hover,
.gbtn:hover,
.tbtn:hover {
  border-color: rgba(74, 158, 255, 0.42) !important;
  background: rgba(74, 158, 255, 0.14) !important;
  color: #ffffff !important;
}

input,
select,
textarea,
.search input,
.inp,
.sel,
.q-input {
  background: rgba(5, 8, 13, 0.72) !important;
  border: 1px solid var(--sov-line-soft) !important;
  border-radius: var(--sov-radius) !important;
  color: var(--sov-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--sov-text-3) !important;
}

.dot.ok,
.q-dot,
.status-dot,
.srv-d.on,
.svc-d.on {
  background: var(--sov-green) !important;
  box-shadow: 0 0 18px rgba(52, 211, 122, 0.44) !important;
}

.dot.bad,
.srv-d.off {
  background: var(--sov-red) !important;
  box-shadow: 0 0 18px rgba(239, 85, 85, 0.38) !important;
}

.score-ring .fill {
  stroke: var(--sov-blue) !important;
  filter: drop-shadow(0 0 8px rgba(74, 158, 255, 0.22));
}

.score-num,
.score-lbl,
.score-card .card-label,
.ruler-bar .n,
.hero-stat .value,
.dc-num,
.metric-value,
.stat .value {
  font-variant-numeric: tabular-nums;
}

.q-av,
.q-avatar,
.g-logo {
  background: linear-gradient(135deg, #eaf4ff, #72b7ff) !important;
  color: #05101d !important;
  box-shadow: 0 0 28px rgba(74, 158, 255, 0.22) !important;
}

.drop,
.drop-zone,
.result-area {
  background:
    linear-gradient(180deg, rgba(74, 158, 255, 0.07), rgba(255, 255, 255, 0.018)) !important;
  border-color: rgba(74, 158, 255, 0.24) !important;
  border-radius: var(--sov-radius) !important;
}

.drop.drag,
.drop-zone.over,
.drop:hover,
.drop-zone:hover {
  border-color: rgba(74, 158, 255, 0.58) !important;
  background: rgba(74, 158, 255, 0.10) !important;
}

.mode-btn.on,
.cb.act {
  color: #eaf4ff !important;
  background: rgba(74, 158, 255, 0.18) !important;
  border-color: rgba(74, 158, 255, 0.40) !important;
}

.pipeline .pipe-step.active .step-num,
.pipe-step.active .step-num {
  border-color: var(--sov-blue) !important;
  color: var(--sov-blue) !important;
  box-shadow: 0 0 14px rgba(74, 158, 255, 0.20) !important;
}

.pipe-step.done .step-num {
  background: var(--sov-blue) !important;
  border-color: var(--sov-blue) !important;
  color: #06111f !important;
}

.history-table th,
.history-table td {
  border-bottom-color: var(--sov-line-soft) !important;
}

.history-table tr:hover td {
  background: rgba(74, 158, 255, 0.055) !important;
}

.waiting .big,
#res .waiting .big {
  color: rgba(237, 244, 251, 0.06) !important;
}

@keyframes sov-premium-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -180% 0; }
}

.value:empty,
.metric-value:empty,
.dc-num:empty,
.stat .value:empty {
  min-height: 1em;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(74, 158, 255, 0.10), rgba(255, 255, 255, 0.04));
  background-size: 220% 100%;
  animation: sov-premium-shimmer 900ms linear infinite;
}

/* Sandbox keeps its desktop density but stops trapping users on small screens. */
body:has(.grid) {
  overflow: hidden;
}

@media (max-width: 980px) {
  #sov-nav {
    padding: 0 12px !important;
  }

  #sov-nav .brand {
    margin-right: 12px !important;
    font-size: 13px !important;
  }

  #sov-nav .brand::after,
  #sov-nav .right {
    display: none !important;
  }

  #sov-nav .tabs {
    overflow-x: auto !important;
    max-width: calc(100vw - 150px) !important;
  }

  #sov-nav .tab {
    padding: 7px 10px !important;
    white-space: nowrap !important;
  }

  .hero,
  .top,
  .search-row,
  .layout {
    grid-template-columns: 1fr !important;
  }

  .home {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  .hero {
    align-items: stretch !important;
  }

  body:has(.grid) {
    overflow: auto;
  }

  .grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  .left,
  .right,
  .center {
    min-height: auto !important;
    max-height: none !important;
  }

  .viz-top {
    min-height: 460px !important;
  }
}

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