:root {
  /* Colors */
  --color-carbon: #181925;
  --color-paper-white: #ffffff;
  --color-linen: #fafafa;
  --color-mist: #f5f5f5;
  --color-fog: #e8e8e8;
  --color-ash: #999999;
  --color-graphite: #666666;
  --color-lavender: #918df6;
  --color-iris: #9580ff;
  --color-mint: #33c758;
  --color-mint-wash: #def6e4;
  --color-amber: #ffa600;
  --color-sky: #2c78fc;
  --color-magenta: #d6409f;
  --color-ember: #ff3e00;

  /* Typography — Font Families */
  --font-openrunde: 'OpenRunde', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: -0.32px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.32px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.17;
  --tracking-heading-sm: -0.31px;
  --text-heading: 36px;
  --leading-heading: 1.22;
  --tracking-heading: -0.61px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.34px;
  --text-display: 60px;
  --leading-display: 1.13;
  --tracking-display: -3px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 32px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 16px;
  --radius-images: 8px;
  --radius-inputs: 8px;
  --radius-tables: 24px;
  --radius-buttons: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 8px 16px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-linen-band: #fafafa;
  --surface-mist-fill: #f5f5f5;
  --surface-mint-wash: #def6e4;
}
/* Shared shell for every dashboard page: top bar, dashboard switcher, theme toggle.
   Built into assets/shell.css after src/design-variables.css. Variables are namespaced --sh-* so they never
   collide with a dashboard's own tokens. */
:root {
  --sh-font: 'OpenRunde', 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sh-bg: var(--surface-linen-band); --sh-panel: var(--surface-canvas); --sh-fill: var(--surface-mist-fill);
  --sh-line: var(--color-fog); --sh-ink: var(--color-carbon); --sh-muted: var(--color-graphite); --sh-faint: var(--color-ash);
  --sh-accent: var(--color-lavender); --sh-on-accent: #ffffff; --sh-tip: #181925; --sh-grid: #f0f0f0;
  --sh-shadow-btn: var(--shadow-subtle-2); --sh-shadow-float: var(--shadow-subtle-3);
}
:root[data-theme="dark"] {
  --sh-bg: #101118; --sh-panel: #181925; --sh-fill: #20212f; --sh-line: #2b2c3b; --sh-ink: #f5f5f5; --sh-muted: #a6a7b3;
  --sh-faint: #77788a; --sh-accent: #9a96f7; --sh-tip: #2b2c3b; --sh-grid: #24252f;
  --sh-shadow-btn: rgba(0,0,0,.4) 0 1px 1px 0, rgba(255,255,255,.06) 0 0 0 1px;
  --sh-shadow-float: rgba(0,0,0,.35) 0 1px 3px 0, rgba(0,0,0,.35) 0 8px 16px 0, rgba(255,255,255,.05) 0 0 0 1px;
}

.sh-bar, .sh-bar *, .sh-slot, .sh-slot * { box-sizing: border-box; }
.sh-bar { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--sh-panel) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--sh-line);
  font-family: var(--sh-font); font-size: 14px; line-height: 1.43; letter-spacing: -0.023em; color: var(--sh-ink); padding-top: env(safe-area-inset-top, 0px); }
.sh-bar-in { max-width: 1320px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 16px; min-height: 60px; }
.sh-brand { display: block; height: 34px; flex: none; }
.sh-brand img { height: 100%; width: auto; display: block; }
.sh-brand .sh-logo-dark { display: none; }
:root[data-theme="dark"] .sh-brand .sh-logo-light { display: none; }
:root[data-theme="dark"] .sh-brand .sh-logo-dark { display: block; }
.sh-brand:hover { opacity: .85; }
.sh-brand:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 4px; border-radius: 6px; }
.sh-sep { width: 1px; height: 28px; background: var(--sh-line); flex: none; }
.sh-spacer { flex: 1; }

/* switcher */
.sh-switch { position: relative; min-width: 0; }
.sh-switch-btn { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; border: 0; cursor: pointer; text-align: left;
  background: none; color: var(--sh-ink); font: inherit; padding: 6px 12px 6px 8px; border-radius: var(--radius-xl, 12px); }
.sh-switch-btn:hover, .sh-switch-btn[aria-expanded="true"] { background: var(--sh-fill); }
.sh-switch-btn:focus-visible, .sh-theme button:focus-visible, .sh-menu a:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }
.sh-switch-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--sh-accent); color: var(--sh-on-accent); display: grid; place-items: center; flex: none; }
.sh-switch-ic svg { width: 17px; height: 17px; }
.sh-switch-txt { display: flex; flex-direction: column; min-width: 0; }
.sh-switch-txt small { font-size: 11px; color: var(--sh-faint); line-height: 1.2; }
.sh-switch-txt b { font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-chev { width: 14px; height: 14px; color: var(--sh-faint); flex: none; transition: transform .15s; }
.sh-switch-btn[aria-expanded="true"] .sh-chev { transform: rotate(180deg); }
.sh-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 420px; max-width: calc(100vw - 32px); background: var(--sh-panel);
  border-radius: var(--radius-cards, 16px); box-shadow: var(--sh-shadow-float); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 1001; }
.sh-menu[hidden] { display: none; }
.sh-menu-title { font-size: 12px; color: var(--sh-faint); padding: 6px 10px 4px; }
.sh-menu a { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; align-items: center; padding: 10px; border-radius: var(--radius-xl, 12px);
  color: var(--sh-ink); text-decoration: none; }
.sh-menu a:hover { background: var(--sh-bg); }
.sh-menu a[aria-current="page"] { background: color-mix(in srgb, var(--sh-accent) 12%, transparent); }
.sh-menu a .ic { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.sh-menu a .ic svg { width: 18px; height: 18px; }
.sh-menu a b { font-size: 14px; font-weight: 500; line-height: 1.3; }
.sh-menu a span { font-size: 12px; color: var(--sh-faint); line-height: 1.35; }
.sh-menu hr { border: 0; border-top: 1px solid var(--sh-line); margin: 6px 4px; }

/* signed-in user */
.sh-user { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 10px 10px 4px; border-top: 1px solid var(--sh-line);
  font-size: 13px; color: var(--sh-faint); }
.sh-user b { color: var(--sh-ink); font-weight: 500; }
.sh-logout { border: 0; cursor: pointer; font: 500 13px/1 var(--sh-font); color: var(--sh-muted); background: var(--sh-fill); padding: 7px 12px; border-radius: 9999px; }
.sh-logout:hover { color: var(--sh-ink); }
.sh-acct { position: relative; flex: none; }
.sh-acct-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--sh-fill); color: var(--sh-ink);
  font: 500 13px/1 var(--sh-font); letter-spacing: -0.02em; padding: 3px 10px 3px 3px; border-radius: 9999px; max-width: 220px; }
.sh-acct-btn:hover, .sh-acct-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--sh-accent) 14%, var(--sh-fill)); }
.sh-acct-btn:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }
.sh-acct-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sh-acct-btn[aria-expanded="true"] .sh-chev { transform: rotate(180deg); }
.sh-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--sh-accent); color: var(--sh-on-accent);
  font: 600 11px/1 var(--sh-font); letter-spacing: .02em; }
.sh-avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.sh-acct-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; max-width: calc(100vw - 24px); background: var(--sh-panel); color: var(--sh-ink);
  border-radius: var(--radius-cards, 16px); box-shadow: var(--sh-shadow-float); padding: 8px; z-index: 1001; }
.sh-acct-menu[hidden] { display: none; }
.sh-acct-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-bottom: 1px solid var(--sh-line); margin-bottom: 6px; }
.sh-acct-head div { display: flex; flex-direction: column; min-width: 0; }
.sh-acct-head b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-acct-head span { font-size: 12px; color: var(--sh-faint); }
.sh-acct-admin { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--sh-line); }
.sh-acct-link { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius-xl, 12px); color: var(--sh-ink); text-decoration: none; }
.sh-acct-link:hover { background: var(--sh-bg); }
.sh-acct-link[aria-current="page"] { background: color-mix(in srgb, var(--sh-accent) 12%, transparent); }
.sh-acct-link:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }
.sh-acct-link .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.sh-acct-link .ic svg { width: 16px; height: 16px; }
.sh-acct-link b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.sh-acct-link small { display: block; font-size: 11.5px; color: var(--sh-faint); line-height: 1.35; }
.sh-acct-logout { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; cursor: pointer; background: none; color: var(--sh-ink); text-align: left;
  font: 500 14px/1 var(--sh-font); letter-spacing: -0.02em; padding: 11px 10px; border-radius: var(--radius-xl, 12px); }
.sh-acct-logout:hover { background: color-mix(in srgb, var(--color-ember) 10%, transparent); color: var(--color-ember); }
.sh-acct-logout svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-menu [hidden] { display: none; }

/* theme toggle */
.sh-theme { display: inline-flex; padding: 3px; border-radius: var(--radius-buttons, 9999px); background: var(--sh-fill); flex: none; }
.sh-theme button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--sh-muted); cursor: pointer;
  font: 500 13px/1 var(--sh-font); letter-spacing: -0.02em; padding: 7px 12px; border-radius: var(--radius-buttons, 9999px); }
.sh-theme button:hover { color: var(--sh-ink); }
.sh-theme button[aria-pressed="true"] { background: var(--sh-accent); color: var(--sh-on-accent); box-shadow: var(--shadow-subtle); }
.sh-theme svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.sh-theme button[data-sh-theme="dark"] svg { fill: currentColor; stroke: none; }

/* compact switcher used inside the map rail and the master-data bar */
.sh-slot .sh-switch-btn { padding: 4px 10px 4px 4px; background: var(--sh-fill); border-radius: var(--radius-buttons, 9999px); }
.sh-slot .sh-switch-ic { width: 28px; height: 28px; border-radius: 50%; }
.sh-slot .sh-switch-txt small { display: none; }
.sh-slot .sh-switch-txt b { font-size: 13px; }
.sh-slot .sh-menu { left: auto; right: 0; }
.sh-slot.sh-left .sh-menu { left: 0; right: auto; }

@media (max-width: 760px) {
  .sh-bar-in { padding: 8px 16px; gap: 10px; min-height: 52px; }
  .sh-brand { height: 26px; }
  .sh-sep { display: none; }
  .sh-switch-txt small { display: none; }
  .sh-switch-txt b { font-size: 14px; max-width: 46vw; }
  .sh-switch-ic { width: 28px; height: 28px; }
  .sh-theme button span, .sh-acct-name, .sh-acct-btn .sh-chev { display: none; }
  .sh-acct-btn { padding: 3px; }
  .sh-acct-menu { position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); right: 12px; }
  .sh-theme button { padding: 7px 9px; }
  .sh-menu, .sh-slot .sh-menu { position: fixed; left: 12px; right: 12px; width: auto; top: calc(56px + env(safe-area-inset-top, 0px)); max-height: 75vh; overflow-y: auto; }
}
@media (max-width: 420px) { .sh-bar .sh-switch-txt { display: none; } .sh-brand { height: 22px; } .sh-bar .sh-sep { display: none; } }
@media (prefers-reduced-motion: reduce) { .sh-chev { transition: none; } }

/* logo chip in the map corner (map page) */