/* Affiliate visual styles used by analytics; unrelated portal features omitted. */
:root {
  --fg: #fff;
  --muted: #fff;
  --accent: #fff;
  --light-blue-black: #053d58;
  --gradient-blend: #021e2c;
  --action: #288691;
  --bright-green: #16f59c;
  --sidebar-width: 210px;
  --portal-content-left: var(--sidebar-width);
  --portal-navigation-bottom: 0px;
  --dashboard-surface-radius: 20px;
  --panel: rgba(255, 255, 255, 0.14);
  --panel-subtle: rgba(255, 255, 255, 0.075);
  --line: rgba(255, 255, 255, 0.13);
  --table-header: rgba(0, 18, 28, 0.38);
  --positive: #fff;
  --negative: #fff;
  --noise-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 12 -5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
* { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
html, body {
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html { background: var(--gradient-blend); }
body { position: relative; min-height: 100vh; background: transparent; }
body.dashboard-active .container { width: 100%; max-width: none; padding: 0 0 24px; }
body.dashboard-active .page-content { align-items: flex-start; }
.backdrop {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 20% 25%, rgba(0, 0, 0, 0.7) 0%, transparent 70%),
    radial-gradient(ellipse 95% 75% at 80% 80%, rgba(5, 61, 88, 0.7) 0%, transparent 70%),
    linear-gradient(to bottom right, #000, var(--light-blue-black));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.backdrop::after { position: absolute; inset: 0; background-image: var(--noise-image); content: ""; mix-blend-mode: soft-light; pointer-events: none; }
body > *:not(.backdrop) { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(96, 165, 250, 0.9); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }
.container { display: flex; flex-direction: column; width: min(100%, 1500px); min-height: 100vh; margin: 0 auto; padding: 34px 28px 24px; }
.page-content { display: flex; align-items: center; flex: 1; min-width: 0; width: 100%; }
.logo { display: block; width: min(52vw, 200px); max-width: 200px; height: auto; padding: 8px 8px 0; }

/* Sign in */
.auth-panel { --auth-control-inset: 8px; --auth-control-radius: var(--dashboard-surface-radius); width: min(100%, 530px); min-width: 0; max-width: 530px; margin: 24px auto; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-bottom: 24px; padding: 0 5px; }
.auth-panel .logo { width: min(42%, 184px); margin: 0; padding: 0; }
.portal-label { flex: 1; margin: 0; padding: 0; color: #fff; font-size: 28px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.2; text-align: right; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; color: #fff; font-size: clamp(32px, 5vw, 46px); line-height: 1.05; letter-spacing: -0.035em; }
h2 { margin-bottom: 4px; color: #fff; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; }
.lead { max-width: 420px; padding: 0 5px; margin-bottom: 26px; color: #fff; font-size: 18px; font-weight: 650; line-height: 1.4; }
.email-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px; border-radius: var(--auth-control-radius); }
input { min-width: 0; height: 38px; padding: 0 16px; border: 0; border-radius: calc(var(--auth-control-radius) - var(--auth-control-inset)); color: #fff; background: transparent; box-shadow: none; }
input::placeholder { color: #9aa0a6; }
.primary-action, .secondary-action { border: 0; color: #fff; cursor: pointer; font-size: 13px; font-weight: 650; transition: filter 0.15s ease, transform 0.05s ease, background 0.15s ease; }
.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  border-radius: calc(var(--auth-control-radius) - var(--auth-control-inset));
  white-space: nowrap;
  --bento-color: var(--action);
  background-color: var(--bento-color);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--bento-color) 88%, #000 12%), var(--bento-color));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 8px 16px rgba(255, 255, 255, 0.35);
}
.email-row .primary-action { align-self: center; min-height: 38px; --bento-color: var(--bright-green); color: #000; font-size: 18px; }
a.primary-action:hover { text-decoration: none; }
.primary-action:hover, .secondary-action:hover { filter: brightness(1.15); }
.primary-action:active, .secondary-action:active { transform: translateY(1px); }
button:disabled { cursor: wait; filter: saturate(0.5); opacity: 0.65; }
.inline-status { margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(117, 224, 189, 0.25); border-radius: 12px; color: #fff; background: rgba(15, 92, 70, 0.24); font-size: 14px; }
.inline-status.error { border: 1px solid rgba(255, 155, 155, 0.28); color: #fff; background: rgba(113, 36, 44, 0.3); }
.spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #9fe7eb; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dashboard and navigation */
.dashboard-shell { display: block; padding-left: var(--sidebar-width); }
.dashboard-sidebar {
  position: fixed;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--table-header);
  text-align: left;
}
.sidebar-brand { padding: 10px; }
.sidebar-brand .logo { width: 100%; max-width: none; padding: 0; }
.sidebar-nav { position: relative; display: grid; gap: 3px; margin-top: 10px; }
.sidebar-link, .sidebar-sign-out {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  transition: background 0.15s ease, transform 0.05s ease;
}
.sidebar-link { min-height: 36px; -webkit-tap-highlight-color: transparent; }
.sidebar-link:hover, .sidebar-sign-out:hover { text-decoration: none; }
.sidebar-link:hover { background: rgba(255, 255, 255, 0.05); }
.sidebar-sign-out:hover { background: rgba(255, 255, 255, 0.1); }
.sidebar-link.active { border: 0; background: var(--panel); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.14); }
.sidebar-link svg, .sidebar-sign-out svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sidebar-account { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.sidebar-sign-out { color: rgba(255, 255, 255, 0.84); }
.sidebar-link.disabled { opacity: 0.4; cursor: not-allowed; }
.dashboard-main { min-width: 0; width: min(calc(100% - 56px), 1240px); margin: 34px auto 0; }
.mobile-sign-out { display: none; }

/* Chart controls */
.chart-date-field > input { width: 100%; height: 48px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: rgba(0, 18, 28, 0.45); }
.chart-date-field > input:focus { border-color: var(--action); outline: none; }
.charts-page { overflow-x: clip; text-align: left; }
.page-view-heading { margin: 0 0 18px; font-size: clamp(32px, 4vw, 46px); text-align: left; }
.chart-toolbar { display: flex; align-items: stretch; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.chart-metric-region { flex: 1.35 1 600px; min-width: min(100%, 600px); container-name: chart-metrics; container-type: inline-size; }
.chart-controls { flex: 1 1 420px; min-width: min(100%, 420px); }
.chart-metric-buttons { display: grid; align-content: start; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; }
@container chart-metrics (max-width: 559px) { .chart-metric-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart-metric-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.2vw, 16px);
  min-height: 54px;
  padding: 10px clamp(8px, 1.2vw, 14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--dashboard-surface-radius);
  color: #fff;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.14);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  transition: border-color 0.15s ease;
}
.chart-metric-control.selected { border-color: color-mix(in srgb, var(--metric-color, #288691) 72%, #fff); }
.chart-metric-toggle { position: relative; width: 46px; height: 26px; flex: 0 0 46px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.12); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.chart-metric-toggle > span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28); transition: transform 0.15s ease, background 0.15s ease; }
.chart-metric-toggle[aria-checked="true"] { border-color: var(--metric-color, #288691); background: var(--metric-color, #288691); }
.chart-metric-toggle[aria-checked="true"] > span { background: #fff; transform: translateX(20px); }
.chart-controls { overflow: visible; }
.custom-chart-range { display: grid; gap: 10px; padding: 10px 6px 6px; border-top: 1px solid var(--line); }
.custom-chart-range label { display: grid; gap: 6px; min-width: 0; text-align: left; font-size: 13px; font-weight: 700; }
.custom-chart-range input { width: 100%; font-weight: 400; }
.chart-date-field { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.chart-date-field > input { min-width: 0; flex: 1; }
.custom-chart-range p { margin: 0; text-align: left; }
.custom-chart-range p:empty { display: none; }
.chart-controls-body { display: flex; flex-wrap: wrap; gap: 0; padding: 0; border-radius: var(--dashboard-surface-radius); }
.chart-control-field { flex: 1 0 auto; min-width: max-content; }
.chart-control-field h2 { margin: 0; padding: 10px clamp(10px, 1.4vw, 16px); background: var(--table-header); font-size: clamp(12px, 1.2vw, 15px); text-align: left; }
.chart-control-field:first-child h2 { border-top-left-radius: var(--dashboard-surface-radius); }
.chart-control-field:last-child h2 { border-top-right-radius: var(--dashboard-surface-radius); }
.chart-controls .chart-selector { width: auto; margin: clamp(10px, 1.5vw, 18px) calc(clamp(6px, 1vw, 12px) / 2); }
.chart-control-field:first-child .chart-selector { margin-left: clamp(10px, 1.5vw, 18px); }
.chart-control-field:last-child .chart-selector { margin-right: clamp(10px, 1.5vw, 18px); }
.chart-controls .chart-selector-toggle { min-width: max-content; }
.chart-controls .chart-selector-toggle > span { overflow: visible; text-overflow: clip; }
.chart-selector { position: relative; min-width: 0; }
.chart-selector-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1vw, 16px);
  width: 100%;
  min-height: 44px;
  padding: 0 clamp(8px, 1vw, 14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #fff;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.chart-selector-toggle > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-selector-toggle svg { width: 27px; height: 27px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 0.15s ease; }
.chart-selector-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.chart-selector-menu { position: absolute; z-index: 5; top: calc(100% + 8px); right: 0; display: grid; gap: 4px; width: 100%; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: rgba(2, 30, 44, 0.97); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34); }
.chart-selector-option { min-height: 0; padding: 6px 12px; border: 0; border-radius: 11px; color: rgba(255, 255, 255, 0.78); background: transparent; cursor: pointer; font-size: 14px; font-weight: 700; text-align: left; }
.chart-selector-option:hover, .chart-selector-option:focus-visible { background: rgba(255, 255, 255, 0.1); }
.chart-selector-option.selected { color: #fff; background: var(--panel); }

/* Charts and tables */
.charts-grid { display: grid; gap: 18px; min-width: 0; }
.chart-panel { display: grid; gap: 18px; min-width: 0; max-width: 100%; }
.chart-card { position: relative; min-width: 0; max-width: 100%; padding: 24px 24px 14px; }
.chart-refreshing { position: absolute; z-index: 4; inset: 0; display: grid; border-radius: inherit; background: rgba(0, 18, 28, 0.2); place-items: center; pointer-events: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.chart-table-section { min-width: 0; max-width: 100%; overflow: hidden; }
.chart-table-wrap { min-width: 0; max-width: 100%; width: 100%; overflow-x: auto; overscroll-behavior-x: none; overscroll-behavior-inline: none; -webkit-overflow-scrolling: auto; }
.daily-chart { position: relative; min-width: 0; max-width: 100%; min-height: 405px; overflow: visible; }
.daily-chart > svg { display: block; width: 100%; min-width: 0; max-width: 100%; height: 405px; }
.chart-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; margin-top: 2px; }
.chart-page-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 10px; color: #fff; background: var(--panel); cursor: pointer; font-size: 24px; line-height: 1; }
.chart-page-button:hover:not(:disabled) { filter: brightness(1.15); }
.chart-page-chevron { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.chart-page-chevron.previous { transform: translateX(-1px) rotate(90deg); }
.chart-page-chevron.next { transform: translateX(1px) rotate(-90deg); }
.chart-page-button:disabled { cursor: default; opacity: 0.35; }
.chart-page-status { min-width: 48px; color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
.chart-data-table { display: table; width: 100%; border-collapse: collapse; table-layout: auto; font-size: 12px; }
.chart-data-table thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.chart-data-table tbody { display: table-row-group; }
.chart-data-table tr { display: table-row; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
.chart-data-table th, .chart-data-table td, .chart-data-table td.numeric { display: table-cell; width: auto; min-height: 0; padding: 9px 6px; text-align: center; white-space: nowrap; }
.chart-data-table td { font-size: 15px; }
.chart-data-table th:not(.chart-table-label), .chart-data-table td { width: 80px; min-width: 80px; }
.chart-data-table td::before { content: none; }
.chart-data-table tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.chart-data-table th:nth-child(n + 3), .chart-data-table td:nth-child(n + 3) { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.chart-data-table td.chart-table-incomplete { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 5px, transparent 5px, transparent 10px); }
.chart-data-table .chart-table-label {
  position: sticky;
  z-index: 2;
  left: 0;
  width: 1%;
  min-width: max-content;
  max-width: none;
  padding-right: 14px;
  padding-left: 14px;
  color: #fff;
  background: color-mix(in srgb, #fff 14%, var(--gradient-blend));
  box-shadow: 8px 0 14px rgba(0, 0, 0, 0.18);
  font-weight: 700;
  text-align: left;
}
.chart-data-table .chart-table-label::after { position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.16); content: ""; pointer-events: none; }
.chart-data-table .chart-table-label-heading { z-index: 3; background: #182f3a; }
.chart-grid-line { stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--metric-color, var(--action)); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-line-incomplete { stroke-dasharray: 8 7; }
.chart-bar { fill: var(--metric-color, var(--action)); stroke: none; pointer-events: none; transition: filter 0.15s ease, opacity 0.15s ease; }
.chart-bar.incomplete { stroke: var(--metric-color, var(--action)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-pending-stripe { fill: none; stroke: var(--metric-color, var(--action)); stroke-width: 2; }
.chart-bar.highlighted { filter: brightness(1.35); }
.chart-point { fill: var(--metric-color, var(--action)); stroke: none; opacity: 0; pointer-events: none; transition: fill 0.15s ease, opacity 0.15s ease; }
.chart-point.highlighted { filter: brightness(1.35); opacity: 1; }
.chart-point.incomplete { fill: transparent; stroke: var(--metric-color, var(--action)); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-point.incomplete.highlighted { filter: brightness(1.35); }
.daily-chart svg.hovering .chart-point { opacity: 0; }
.daily-chart svg.hovering .chart-point.highlighted { opacity: 1; }
.daily-chart svg .chart-point.single-point { opacity: 1; }
.daily-chart svg.hovering .chart-bar { opacity: 0.5; }
.daily-chart svg.hovering .chart-bar.highlighted { opacity: 1; }
.chart-stack-incomplete.highlighted { filter: none; }
.chart-stack-highlight, .daily-chart svg.hovering .chart-stack-highlight { opacity: 0; }
.daily-chart svg.hovering .chart-stack-highlight.highlighted { opacity: 1; }
.chart-hover-region { fill: transparent; stroke: none; pointer-events: all; touch-action: pan-y; }
.chart-panel[aria-busy="true"] .chart-hover-region { pointer-events: none; }
.chart-tooltip { position: fixed; z-index: 20; display: grid; gap: 1px; max-width: calc(100vw - 16px); padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; color: #fff; background: rgba(2, 30, 44, 0.96); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); pointer-events: none; font-size: 13px; }
.chart-tooltip-date { color: rgba(255, 255, 255, 0.7); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chart-tooltip-values { display: grid; gap: 3px; margin-top: 3px; }
.chart-tooltip-metric { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 13px; font-weight: 400; white-space: nowrap; }
.chart-tooltip-metric.chart-tooltip-highlighted { position: relative; isolation: isolate; font-weight: 750; }
.chart-tooltip-highlighted::after { position: absolute; z-index: -1; inset: -2px -4px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); content: ""; pointer-events: none; }
.chart-tooltip-metric::before { width: 10.5px; height: 10.5px; flex: 0 0 10.5px; border-radius: 50%; background: var(--metric-color); content: ""; }
.chart-tooltip-total-hidden::before { border: 1.5px dashed rgba(255, 255, 255, 0.8); background: transparent; }
.chart-tooltip-name { flex: 1; }
.chart-tooltip-value { color: #fff; font-size: 13px; font-weight: inherit; margin-left: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.chart-axis-label, .chart-date-label { fill: #fff; font-family: inherit; font-size: 11px; }
.chart-unavailable { display: grid; min-height: 405px; margin: 0; place-items: center; color: #fff; text-align: center; }

/* Overview and shared surfaces */
.summary-grid { display: grid; align-items: start; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.dashboard-surface { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--dashboard-surface-radius); background: var(--panel); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.14); }
.metric-card { padding: 23px; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; color: inherit; cursor: pointer; overflow: hidden; text-decoration: none; text-align: left; transition: border-color 0.15s ease, filter 0.15s ease; }
.metric-card:hover { filter: brightness(1.08); text-decoration: none; }
.overview-sparkline { width: calc(100% + 46px); height: 62px; flex: 0 0 62px; margin: 0 -23px -23px; overflow: hidden; }
.overview-sparkline svg { display: block; width: 100%; height: 100%; }
.overview-sparkline-line { fill: none; stroke: var(--metric-color, #fff); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.overview-sparkline-incomplete { stroke-dasharray: 5 6; }
.metric-label { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.2; }
.metric-value { margin-top: 9px; color: #fff; font-size: 44px; line-height: 1; letter-spacing: -0.04em; }
.metric-note { margin-top: 6px; color: #fff; font-size: 15px; line-height: 1.3; }
.activity-section { margin-top: 28px; }
.section-heading { display: flex; justify-content: flex-start; margin-bottom: 12px; padding: 0 8px; text-align: left; }
.section-heading h2 { margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { padding: 6px 8px; color: #fff; background: var(--table-header); font-size: 15px; font-weight: 700; letter-spacing: 0; text-align: left; text-transform: none; white-space: nowrap; }
td { padding: 8px; color: #fff; text-align: left; vertical-align: middle; white-space: nowrap; }
td.numeric, th.numeric { text-align: left; }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.secondary-action { min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.09); }
.mobile-sign-out { color: inherit; white-space: nowrap; }
.noscript { margin: 20px; padding: 14px; border-radius: 12px; color: #fff; background: #6d2730; text-align: center; }

@media (max-width: 900px) {
  :root { --portal-content-left: 0px; --portal-navigation-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  body.dashboard-active .container { padding: 24px 16px calc(var(--portal-navigation-bottom) + 18px); }
  .dashboard-shell { padding-left: 0; }
  .dashboard-main { width: 100%; margin-top: 0; }
  .dashboard-sidebar {
    z-index: 5;
    top: auto;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 5px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 0;
    border-radius: 33px 33px 0 0;
    background: rgba(0, 18, 28, 0.9);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .sidebar-brand, .sidebar-account { display: none; }
  .sidebar-nav { --tab-capsule-opacity: 0; --tab-capsule-width: 0px; --tab-capsule-x: 0px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0; }
  .sidebar-nav::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: var(--tab-capsule-width);
    height: 52px;
    border: 0;
    border-radius: 26px;
    background: var(--panel);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    content: "";
    opacity: var(--tab-capsule-opacity);
    transform: translateX(var(--tab-capsule-x));
    transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 100ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .sidebar-link { position: relative; z-index: 1; justify-content: center; flex-direction: column; gap: 2px; min-height: 52px; padding: 3px 4px; border-radius: 12px; font-size: 11px; line-height: 1.1; text-align: center; }
  .sidebar-link.active { border-color: transparent; background: transparent; box-shadow: none; }
  .sidebar-link:hover, .sidebar-link:active { background: transparent; }
  .sidebar-link svg { width: 22px; height: 22px; }
  .mobile-sign-out { display: inline; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; cursor: pointer; font-size: 13px; font-weight: 400; line-height: inherit; }
}
@media (max-width: 640px) {
  .container { padding: 24px 16px 20px; }
  .auth-panel { width: 100%; margin: 22px auto; }
  .email-row { grid-template-columns: 1fr; }
  .email-row .primary-action { width: 100%; }
  .summary-grid { grid-template-columns: 1fr; }
  .chart-selector { min-width: 0; width: 100%; }
  .chart-card { padding: 20px 16px 10px; }
  .activity-section { margin-top: 24px; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  tbody { display: grid; gap: 0; }
  tr { display: grid; grid-template-columns: max-content minmax(0, max-content); justify-content: center; column-gap: 12px; padding: 9px 13px; border: 0; border-radius: 0; background: transparent; }
  tbody tr:nth-child(even) { background: rgba(0, 18, 28, 0.38); }
  td, td.numeric { display: grid; align-items: center; grid-column: 1 / -1; grid-template-columns: subgrid; justify-items: start; min-height: 30px; padding: 5px 2px; text-align: left; white-space: normal; }
  td::before { color: #fff; content: attr(data-label); font-size: inherit; font-weight: 700; justify-self: stretch; letter-spacing: 0; text-align: right; text-transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .spinner { animation-duration: 1.5s; }
}