@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Montserrat:wght@800;900&display=swap");

:root{
  color-scheme: dark;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --bg-app: #131211;
  --bg-header: linear-gradient(90deg, rgba(24, 24, 22, 0.97) 0%, rgba(54, 48, 34, 0.98) 50%, rgba(23, 23, 21, 0.98) 100%);
  --bg-sidebar: #191714;
  --bg-sidebar-rail: linear-gradient(180deg, rgba(30, 27, 24, 0.98) 0%, rgba(22, 20, 18, 0.98) 100%);
  --bg-sidebar-detail: linear-gradient(180deg, rgba(29, 26, 23, 0.985) 0%, rgba(22, 20, 18, 0.985) 100%);
  --bg-sidebar-topbar: linear-gradient(180deg, rgba(32, 29, 26, 0.985) 0%, rgba(27, 24, 21, 0.985) 100%);
  --surface-0: rgba(255, 255, 255, 0.014);
  --surface-1: rgba(255, 255, 255, 0.028);
  --surface-2: rgba(255, 255, 255, 0.045);
  --surface-3: rgba(255, 255, 255, 0.075);
  --accent-yellow: #f1c43a;
  --accent-yellow-hover: #f4ca4e;
  --accent-yellow-dark: #b58d12;
  --accent-yellow-soft: rgba(241, 196, 58, 0.12);
  --accent-yellow-ink: #231c08;
  --accent-yellow-ink-strong: #1d1708;
  --accent-blue: #58b7ff;
  --accent-blue-dark: #2f93dc;
  --accent-blue-soft: rgba(88, 183, 255, 0.14);
  --control-active-bg: rgba(255, 248, 226, 0.96);
  --control-active-bg-hover: rgba(255, 251, 236, 0.98);
  --control-active-text: #463300;
  --control-active-text-hover: #2f2300;
  --control-active-border: rgba(241, 196, 58, 0.34);
  --control-active-border-hover: rgba(241, 196, 58, 0.46);
  --control-active-ring: rgba(241, 196, 58, 0.34);
  --control-active-shadow: inset 0 0 0 1px rgba(132, 99, 0, 0.1), 0 2px 8px rgba(92, 68, 0, 0.08);
  --control-active-shadow-hover: inset 0 0 0 1px rgba(132, 99, 0, 0.12), 0 2px 10px rgba(92, 68, 0, 0.1);
  --border-nrw: 1px solid rgba(255, 255, 255, 0.08);
  --border-dv: 1px solid rgba(255, 255, 255, 0.07);
  --projection-bg: #1d1915;
  --radius-lg: 12px;
  --radius-sm: 6px;
  --text-light: #f3f5f7;
  --text-dark: #1d1606;
  --muted: #97a2ad;
  --ui-nav-size: 0.92rem;
  --ui-nav-weight: 700;
  --ui-nav-spacing: 0.03em;
  --ui-section-size: 0.75rem;
  --ui-section-weight: 700;
  --ui-section-spacing: 0.04em;
  --section-title-size: 14px;
  --section-title-weight: 600;
  --section-title-pad-left: 10px;
  --section-title-border-muted: rgba(241, 196, 58, 0.28);
  --section-title-border-hover: rgba(241, 196, 58, 0.62);
  --section-title-border-active: var(--accent-yellow);
  --sidebar-item-border: rgba(255, 255, 255, 0.08);
  --sidebar-item-border-soft: rgba(255, 255, 255, 0.045);
  --sidebar-item-summary-hover: rgba(255, 255, 255, 0.045);
  --sidebar-item-summary-open: rgba(255, 255, 255, 0.022);
  --sidebar-item-body-bg: rgba(255, 255, 255, 0.018);
  --sidebar-item-meta: rgba(255, 255, 255, 0.46);
  --sidebar-item-meta-strong: rgba(255, 255, 255, 0.68);
  --header-h: 60px;
  --transition-fast: 150ms ease-out;
}

* {
    box-sizing:border-box
}

html, body {
    min-height: 100%;
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-light);
    background:
      radial-gradient(circle at top center, rgba(241, 196, 58, 0.14), transparent 340px),
      radial-gradient(circle at 15% 12%, rgba(88, 183, 255, 0.08), transparent 280px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 220px),
      var(--bg-app);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
  letter-spacing: -0.01em;
}

::selection {
  background: rgba(241, 196, 58, 0.24);
  color: var(--text-light);
}

:is(.sidebar-layer-group-toggle-btn, .map-selection-card-title, .map-selection-focus-title) {
  padding: 2px 0 3px var(--section-title-pad-left);
  border-left: 3px solid var(--section-title-border-muted);
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  letter-spacing: 0;
  line-height: 1.2;
}