:root {
  --bg: #06111c;
  --sidebar: #071521;
  --panel: #0b1a28;
  --panel-soft: #0a1926;
  --text: #e9f3f7;
  --text-strong: #ffffff;
  --muted: #87a0ad;
  --dim: #6f8995;
  --faint: #57707c;
  --border: rgba(151, 184, 198, 0.16);
  --mint: #54e6c1;
  --amber: #f4b860;
  --blue: #69b7ff;
  --coral: #ff7f6f;
  --danger-text: #ffc0b8;

  /* Chart category fills are separate from the text-accent tokens above —
     text accents get darkened in light mode for contrast against white,
     but that same darkening reads as dull/muddy when used as a big chart
     fill area, so charts get their own palette per theme instead. */
  --chart-mint: #54e6c1;
  --chart-amber: #f4b860;
  --chart-blue: #69b7ff;
  --chart-coral: #ff7f6f;
  --chart-violet: #a78bfa;
  --chart-rose: #e85d75;
  --chart-muted: #57707c;

  --card-bg: linear-gradient(145deg,rgba(13,31,46,.95),rgba(8,21,33,.9));
  --card-bg-flat: rgba(11,26,40,.88);
  --surface-translucent: rgba(7,21,33,.94);
  --surface-translucent-soft: rgba(7,21,33,.95);
  --input-bg: #0b1b29;
  --dropdown-bg: #0b1b29;
  --sticky-bg: #0c1b22;
  --overlay-weak: rgba(255,255,255,.04);
  --overlay-medium: rgba(255,255,255,.06);
  --overlay-strong: rgba(255,255,255,.08);
  --overlay-hover: rgba(255,255,255,.055);
  --row-border: rgba(255,255,255,.06);
  --grid-line: rgba(255,255,255,.018);
  --glow: rgba(84,230,193,.09);
}

:root[data-theme="light"] {
  --bg: #f3f6f8;
  --sidebar: #ffffff;
  --panel: #ffffff;
  --panel-soft: #eef2f5;
  --text: #16242c;
  --text-strong: #0a151c;
  --muted: #5c7482;
  --dim: #72868f;
  --faint: #93a7b0;
  --border: rgba(23, 48, 61, 0.14);
  --mint: #0e9d76;
  --amber: #b36e17;
  --blue: #1f6fd6;
  --coral: #d6432f;
  --danger-text: #ab2a1e;

  /* A dedicated, saturated chart palette for light mode — the pastel dark-
     mode hues wash out on white, and the darkened text-accent colors above
     read as muddy when used as large fill areas instead of text. */
  --chart-mint: #0f9d6e;
  --chart-amber: #dd8b2e;
  --chart-blue: #3576d6;
  --chart-coral: #e2574c;
  --chart-violet: #8b6fd6;
  --chart-rose: #d6487f;
  --chart-muted: #8a97a0;

  --card-bg: linear-gradient(145deg, #ffffff, #f6f9fa);
  --card-bg-flat: #ffffff;
  --surface-translucent: rgba(255,255,255,.94);
  --surface-translucent-soft: rgba(255,255,255,.96);
  --input-bg: #ffffff;
  --dropdown-bg: #ffffff;
  --sticky-bg: #ffffff;
  --overlay-weak: rgba(15,35,45,.035);
  --overlay-medium: rgba(15,35,45,.05);
  --overlay-strong: rgba(15,35,45,.09);
  --overlay-hover: rgba(15,35,45,.045);
  --row-border: rgba(15,35,45,.08);
  --grid-line: rgba(15,35,45,.028);
  --glow: rgba(14,157,118,.06);
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 82% 4%, var(--glow), transparent 28rem),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  transition: background-color .2s ease, color .2s ease;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
.hidden { display: none !important; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { width: min(100%, 460px); padding: 36px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface-translucent); box-shadow: 0 32px 90px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.login-card::before { content: ""; display: block; width: 92px; height: 3px; margin: -36px 0 32px; border-radius: 999px; background: linear-gradient(90deg,var(--mint),var(--blue)); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 46px; }
.login-brand strong { display: block; font: 600 19px/1 Outfit, sans-serif; color: var(--text-strong); }
.login-brand div span { display: block; margin-top: 5px; color: var(--dim); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.login-card h1 { color: var(--text-strong); font-size: clamp(32px, 8vw, 42px); }
.login-form { display: grid; gap: 17px; margin-top: 28px; }
.login-form label > span { display: block; margin: 0 0 8px 2px; color: var(--muted); font-size: 13px; font-weight: 700; }
.login-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 11px; outline: 0; color: var(--text-strong); background: var(--input-bg); }
.login-form input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(84,230,193,.1); }
.login-form .button { min-height: 48px; margin-top: 5px; }
.form-error { margin: 0; color: var(--danger-text); font-size: 14px; line-height: 1.45; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; width: 248px; height: 100vh; padding: 28px 24px;
  border-right: 1px solid var(--overlay-strong); background: var(--surface-translucent-soft); backdrop-filter: blur(18px);
  transition: margin-left .25s ease, visibility .25s;
}
.sidebar .brand-logo { width: 164px; }
/* Collapsing slides the sidebar out (its grid column shrinks to 0); the toggle stays fixed on screen. */
.sidebar-toggle {
  position: fixed; top: 26px; left: 202px; z-index: 20; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--panel); backdrop-filter: blur(12px);
  transition: left .25s ease, color .2s ease, background .2s ease;
}
.sidebar-toggle:hover { color: var(--text-strong); background: var(--overlay-medium); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.sidebar-toggle svg { transition: transform .25s ease; }
html[data-sidebar="collapsed"] .sidebar { margin-left: -248px; visibility: hidden; }
html[data-sidebar="collapsed"] .sidebar-toggle { left: 16px; }
html[data-sidebar="collapsed"] .sidebar-toggle svg { transform: rotate(180deg); }
html[data-sidebar="collapsed"] .content { padding-left: max(76px, clamp(24px, 4vw, 52px)); }
.brand-row { position: relative; display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--mint); color: #03130f; font-family: Outfit, sans-serif; font-size: 18px; font-weight: 700; }
.brand-row strong { display: block; font: 600 19px/1 Outfit, sans-serif; color: var(--text-strong); }
.brand-row div span { display: block; margin-top: 5px; color: var(--dim); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.brand-row, .login-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
.brand-logo { display: block; width: 190px; max-width: 100%; height: auto; }
.brand-caption { color: var(--dim); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.timezone { position: absolute; top: 68px; left: 0; padding: 5px 9px; border: 1px solid rgba(84,230,193,.2); border-radius: 999px; color: var(--mint); background: rgba(84,230,193,.1); font-size: 12px; font-weight: 700; }
nav { margin-top: 76px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; text-align: left; font-size: 14px; font-weight: 600; transition: .2s ease; }
.nav-item:hover, .nav-item.active { color: var(--text-strong); background: var(--overlay-hover); }
.nav-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--mint); background: rgba(84,230,193,.09); font: 600 10px/1 "DM Sans", sans-serif; }
.source-card { margin-top: 28px; padding: 16px; border: 1px solid var(--overlay-strong); border-radius: 17px; background: var(--panel); }
.source-title { display: flex; align-items: center; gap: 8px; color: var(--text-strong); font-size: 14px; font-weight: 700; }
.signal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(105,183,255,.1); }
.source-card > p { margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.source-card > .data-status { color: var(--mint); font-size: 12px; }
.file-list { display: grid; gap: 8px; margin-top: 14px; }
.file-item { padding: 9px 10px; border-radius: 9px; background: var(--overlay-weak); overflow: hidden; }
.file-item strong { display: block; overflow: hidden; color: var(--text-strong); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.file-item span { color: var(--dim); font-size: 12px; }

.content { min-width: 0; padding: 34px clamp(24px, 4vw, 52px) 48px; }
.page-header { position: relative; z-index: 35; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--mint); font-size: 14px; font-weight: 700; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(84,230,193,.1); }
h1 { margin: 8px 0 0; color: var(--text-strong); font: 600 clamp(32px, 4vw, 44px)/1.05 Outfit, sans-serif; letter-spacing: -.035em; }
.subtitle { margin: 9px 0 0; color: var(--muted); line-height: 1.5; }
.header-actions { display: flex; gap: 9px; }
.signed-in-user { align-self: center; max-width: 220px; margin-right: 6px; text-align: right; }
.signed-in-user strong, .signed-in-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signed-in-user strong { color: var(--text-strong); font-size: 13px; }
.signed-in-user span { margin-top: 3px; color: var(--dim); font-size: 11px; }
.button { min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 11px; font-size: 14px; font-weight: 700; transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.button:active { transform: translateY(1px); }
.button.primary { color: #03130f; background: var(--mint); }
.button.primary:hover { background: #70efd0; }
.button.secondary { color: var(--text); border-color: var(--border); background: var(--overlay-weak); }
.button.secondary:hover, .button.ghost:hover { color: var(--text-strong); background: var(--overlay-medium); }
.button.ghost { color: var(--muted); background: transparent; }

.filter-controls { display: flex; justify-content: flex-end; margin-top: 22px; }
/* Icon toggle matching the sidebar toggle (PA-075). */
.filter-toggle {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--panel);
  transition: color .2s ease, background .2s ease;
}
.filter-toggle:hover { color: var(--text-strong); background: var(--overlay-medium); }
.filter-toggle:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.filter-toggle svg { transition: transform .25s ease; }
.filter-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
/* Flex rather than a fixed grid: fields that hide (seller, custom range) leave no empty slots. */
.filter-bar { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; padding: 15px; border: 1px solid var(--overlay-strong); border-radius: 17px; background: var(--panel-soft); }
.filter-bar > label { flex: 0 0 140px; }
.filter-bar > .seller-field { flex: 1 1 200px; }
.filter-bar > .month-field { flex: 0 0 190px; }
.filter-bar > #account-field { flex: 0 1 260px; }
.filter-bar > #reset-filters { margin-left: auto; }
.filter-bar label { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.filter-bar label > span { display: block; margin: 0 0 7px 2px; }
.filter-bar select, .filter-bar input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; outline: 0; color: var(--text); background: var(--input-bg); font-size: 14px; }
.filter-bar select:focus, .filter-bar input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(84,230,193,.1); }
.filter-bar input::placeholder { color: var(--faint); }
.filter-bar .button { align-self: end; }
.seller-field { position: relative; }
.seller-combobox { position: relative; }
.seller-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 230px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--dropdown-bg); box-shadow: 0 14px 28px rgba(0,0,0,.4); }
.seller-dropdown.hidden { display: none; }
.seller-option { padding: 9px 11px; font-size: 13px; color: var(--text); cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 400; }
.seller-option:hover, .seller-option.active { background: rgba(84,230,193,.12); }
.seller-option small { display: block; color: var(--muted); font-size: 11px; }
.seller-empty { padding: 9px 11px; font-size: 13px; color: var(--dim); text-transform: none; letter-spacing: normal; font-weight: 400; }

.loading-panel, .error-panel { margin-top: 22px; padding: 18px; border-radius: 17px; }
.loading-panel { border: 1px solid rgba(84,230,193,.15); background: rgba(84,230,193,.055); }
.loading-panel > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
#progress-value { color: var(--mint); font-variant-numeric: tabular-nums; }
.progress-track { height: 6px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: var(--overlay-strong); }
#progress-bar { width: 0; height: 100%; border-radius: inherit; background: var(--mint); transition: width .25s ease; }
#progress-bar.active { width: 42%; animation: loading-slide 1.2s ease-in-out infinite alternate; }
.loading-dot { color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
#progress-label, .error-panel p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.error-panel { border: 1px solid rgba(255,127,111,.25); background: rgba(255,127,111,.07); }
.error-panel strong, .error-panel p { color: var(--danger-text); }

.empty-state { min-height: 390px; margin-top: 22px; padding: 40px 24px; display: grid; place-content: center; justify-items: center; border: 1px dashed rgba(84,230,193,.27); border-radius: 24px; background: var(--panel-soft); text-align: center; }
.empty-state.dragging { border-color: var(--mint); background: rgba(84,230,193,.06); }
.file-symbol { width: 66px; height: 66px; padding: 17px; border: 1px solid rgba(84,230,193,.2); border-radius: 18px; background: rgba(84,230,193,.1); }
.file-symbol span { display: block; height: 3px; margin: 5px 0; border-radius: 3px; background: var(--mint); }
.empty-state h2 { margin: 20px 0 0; color: var(--text-strong); font: 600 25px/1.2 Outfit, sans-serif; }
.empty-state > p { max-width: 480px; margin: 10px 0 0; color: var(--muted); line-height: 1.55; }
.empty-state .button { margin-top: 23px; }
.schema-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 26px; }
.schema-tags code { padding: 5px 8px; border: 1px solid var(--overlay-strong); border-radius: 999px; color: var(--muted); font-size: 12px; }

.results-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 23px; color: var(--dim); font-size: 14px; }
.results-meta p { margin: 0; }
.results-meta strong { color: var(--text-strong); }
.results-context { display: flex; align-items: center; gap: 14px; }
.platform-pill { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(84,230,193,.2); border-radius: 999px; background: rgba(84,230,193,.08); }
.platform-pill span { color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.platform-pill strong { color: var(--mint); font-size: 12px; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 16px; }
.kpi-card { position: relative; overflow: hidden; min-width: 0; min-height: clamp(230px, 27vh, 320px); padding: clamp(24px, 2.2vw, 34px); border: 1px solid var(--border); border-radius: 20px; background: var(--card-bg-flat); box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.kpi-card::before { content: ""; position: absolute; inset: 0 18% auto; height: 1px; background: linear-gradient(90deg,transparent,var(--overlay-strong),transparent); }
.kpi-top { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.kpi-top span { display: block; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.kpi-top strong { display: block; margin-top: 18px; color: var(--text-strong); font: 600 clamp(44px,4.2vw,68px)/1 Outfit, sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.kpi-top strong b { font: inherit; }
.kpi-top small { margin-left: 4px; color: var(--muted); font: 600 20px/1 Outfit, sans-serif; }
.kpi-icon { display: grid; place-items: center; flex: 0 0 52px; height: 52px; border: 1px solid currentColor; border-radius: 15px; font: 700 16px/1 Outfit, sans-serif; }
.mint .kpi-icon { color: var(--mint); background: rgba(84,230,193,.12); }
.coral .kpi-icon { color: var(--coral); background: rgba(255,127,111,.12); }
.amber .kpi-icon { color: var(--amber); background: rgba(244,184,96,.12); }
.blue .kpi-icon { color: var(--blue); background: rgba(105,183,255,.12); }
.kpi-card > p { min-height: 48px; margin: 28px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.detail-board-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 20px; align-items: stretch; }
.detail-board { min-width: 0; min-height: 350px; padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: var(--card-bg); box-shadow: 0 18px 50px rgba(0,0,0,.12); }
.detail-board-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--row-border); }
.detail-board-header h2 { margin: 5px 0 0; color: var(--text-strong); font: 600 23px/1.15 Outfit,sans-serif; letter-spacing: -.02em; }
.detail-board-header > span { color: var(--dim); font-size: 12px; white-space: nowrap; }
.board-index { margin: 0; color: var(--mint); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.board-summary { text-align: right; }
.board-summary strong { display: block; color: var(--text-strong); font: 600 25px/1 Outfit,sans-serif; }
.board-summary span { display: block; margin-top: 5px; color: var(--dim); font-size: 11px; text-transform: uppercase; }
.paid-order-total { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; }
.paid-order-total strong { color: var(--mint); font: 600 clamp(58px,6vw,86px)/.9 Outfit,sans-serif; letter-spacing: -.055em; }
.paid-order-total span { color: var(--muted); font-size: 14px; }
.paid-order-breakdown { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 34px; }
.sub-metric { position: relative; padding: 18px; border: 1px solid var(--row-border); border-radius: 15px; background: var(--overlay-weak); }
.sub-metric > span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.sub-metric-value { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; }
.sub-metric-value > strong { color: var(--mint); font: 600 31px/1 Outfit,sans-serif; }
.sub-metric-value > small { color: var(--mint); font-size: 13px; font-weight: 700; white-space: nowrap; }
.sub-metric-extra { position: absolute; right: 17px; bottom: 4px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.shipping-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 24px; }
.shipping-metric { min-height: 107px; padding: 18px; border: 1px solid var(--row-border); border-radius: 15px; background: var(--overlay-weak); }
.shipping-metric > span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.shipping-metric > strong { display: block; margin-top: 16px; color: var(--text-strong); font: 600 34px/1 Outfit,sans-serif; }
.shipping-metric.lbp-metric > strong { color: var(--mint); }
.shipping-metric > strong b { font: inherit; }
.shipping-metric > strong small { margin-left: 6px; color: var(--dim); font-size: 13px; font-weight: 600; }
.shipping-metric.fastest { grid-column: 1 / -1; border-color: rgba(84,230,193,.22); background: linear-gradient(135deg,rgba(84,230,193,.075),var(--overlay-weak)); }
.shipping-metric.fastest > strong { color: var(--mint); font-size: 29px; }
.inline-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px 16px; border-radius: 13px; background: rgba(84,230,193,.08); }
.inline-total span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.inline-total strong { color: var(--text-strong); font: 600 25px/1 Outfit,sans-serif; }
.board-note { margin: 14px 0 -3px; color: var(--dim); font-size: 12px; }
.multi-breakdown-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.multi-breakdown-list li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--row-border); background: var(--overlay-weak); font-size: 12px; color: var(--muted); }
.multi-breakdown-list li strong { color: var(--text); font-weight: 700; }

.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 190px; margin-top: 22px; padding: 0 2px 14px; border-bottom: 1px solid var(--overlay-strong); overflow-x: auto; }
.chart-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1 1 0; min-width: 26px; height: 100%; }
.chart-bar-col:has(.chart-bar-plot) { display: grid; grid-template-rows: 22px minmax(0, 1fr) 24px; justify-items: center; }
.chart-bar-plot { width: 100%; height: 100%; position: relative; display: block; }
.chart-bar-plot > .chart-bar-fill { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.chart-bar-value { margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-bar-col.is-peak .chart-bar-value { color: var(--text-strong); font-size: 12px; }
.chart-bar-fill { width: 20px; max-width: 60%; min-height: 2px; border-radius: 4px 4px 0 0; }
.chart-bar-fill.amber { background: var(--chart-amber); }
.chart-bar-fill.blue { background: var(--chart-blue); }
.chart-bar-fill.mint { background: var(--chart-mint); }
.chart-bar-label { margin-top: 9px; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.chart-bar-sublabel { margin-top: 2px; color: var(--faint); font-size: 9px; white-space: nowrap; }
.chart-bar-fill.stacked-fill { display: flex; flex-direction: column-reverse; background: none; overflow: hidden; }
.chart-segment { width: 100%; }
.chart-segment:last-child { border-radius: 4px 4px 0 0; }
.chart-segment.mint { background: var(--chart-mint); }
.chart-segment.amber { background: var(--chart-amber); }
.chart-segment.blue { background: var(--chart-blue); }
.chart-segment.coral { background: var(--chart-coral); }
.chart-segment.violet { background: var(--chart-violet); }
.chart-segment.rose { background: var(--chart-rose); }
.chart-segment.muted { background: var(--chart-muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.legend-item { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-dot.mint { background: var(--chart-mint); }
.legend-dot.amber { background: var(--chart-amber); }
.legend-dot.blue { background: var(--chart-blue); }
.legend-dot.coral { background: var(--chart-coral); }
.legend-dot.violet { background: var(--chart-violet); }
.legend-dot.rose { background: var(--chart-rose); }
.legend-dot.muted { background: var(--chart-muted); }
.account-scope-note { margin: 0 0 16px; }
.account-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }
.account-column { display: flex; flex-direction: column; gap: 20px; }
.detail-table-wrap { margin-top: 19px; overflow-x: auto; }
.reconciliation-tx-wrap { max-height: 520px; overflow-y: auto; }
.reconciliation-day-field { display: block; padding: 12px 0; }
.reconciliation-day-field > span { display: block; margin-bottom: 8px; }
.reconciliation-summary-table th:nth-child(2), .reconciliation-summary-table td:nth-child(2) { width: 92px; text-align: right; }
.reconciliation-summary-table th:last-child, .reconciliation-summary-table td:last-child { width: 140px; text-align: right; }
.reconciliation-detail-table th:nth-child(2), .reconciliation-detail-table td:nth-child(2) { width: auto; text-align: left; }
.reconciliation-detail-table th:nth-child(4), .reconciliation-detail-table td:nth-child(4) { width: auto; text-align: left; }
.reconciliation-detail-table th:nth-child(5), .reconciliation-detail-table td:nth-child(5) { width: 140px; text-align: right; }
.reconciliation-detail-table th:last-child, .reconciliation-detail-table td:last-child { width: 140px; text-align: right; }
.reconciliation-summary-table td:nth-child(2), .reconciliation-summary-table td:last-child,
.reconciliation-detail-table td:nth-child(5), .reconciliation-detail-table td:last-child {
  font-variant-numeric: tabular-nums;
}
.reconciliation-header { align-items: center; justify-content: space-between; margin-bottom: 4px; }
.reconciliation-header .board-note { margin: 4px 0 0; }
.section-divider { display: flex; align-items: center; gap: 14px; margin: 36px 0 20px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--overlay-strong); }
.theme-toggle-row { margin-top: 16px; }
.theme-toggle-row .button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.theme-toggle-icon { font-size: 15px; line-height: 1; }
.order-trend-wrap { max-height: 560px; overflow: auto; }
.order-trend-table { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-trend-table th, .order-trend-table td { padding: 8px 9px; text-align: center; }
.order-trend-table th:first-child, .order-trend-table td:first-child {
  position: sticky; left: 0; z-index: 1; text-align: left; white-space: nowrap;
  background: var(--sticky-bg); box-shadow: 1px 0 0 var(--overlay-strong);
}
.order-trend-table thead th { position: sticky; top: 0; z-index: 2; background: var(--sticky-bg); }
.order-trend-table thead th:first-child { z-index: 3; }
.order-trend-table th, .order-trend-table td.order-trend-seller { color: var(--text-strong); }
.order-trend-table td.order-trend-seller small { display: block; color: var(--text-strong); font-weight: 400; }
.order-trend-table td:not(.order-trend-seller) { color: var(--text-strong); }
.order-trend-table td:nth-child(3), .order-trend-table td:nth-child(4), .order-trend-table td:nth-child(5) { color: var(--mint); }
.order-trend-table th.is-sunday, .order-trend-table td.is-sunday { background: rgba(135,160,173,.16); }
.order-trend-table thead th.is-sunday { background-color: rgba(135,160,173,.22); }
/* Recent-days band (D-1/D-2/D-3): a soft tinted column group rather than a
   boxed border — the rest of this table has no vertical rules at all, so a
   hard rectangle around 3 columns would read as a foreign element. An inset
   top accent on the header reads as a grouped "tab" without disturbing row
   height or the table's existing border-collapse behavior. */
.order-trend-table th:nth-child(3), .order-trend-table th:nth-child(4), .order-trend-table th:nth-child(5),
.order-trend-table td:nth-child(3), .order-trend-table td:nth-child(4), .order-trend-table td:nth-child(5) {
  background: rgba(84,230,193,.08);
}
.order-trend-table thead th:nth-child(3), .order-trend-table thead th:nth-child(4), .order-trend-table thead th:nth-child(5) {
  background: rgba(84,230,193,.16);
  box-shadow: inset 0 3px 0 var(--mint);
  padding-top: 14px;
}
.order-trend-table td:not(:first-child):empty::after { content: '—'; color: var(--faint); }
.sunday-tag { display: block; margin-bottom: 5px; color: var(--text); font-size: 9px; line-height: 12px; font-weight: 700; letter-spacing: .08em; }
.order-trend-table thead th.is-sunday { padding-top: 12px; padding-bottom: 10px; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.detail-table th { padding: 0 10px 10px; color: var(--dim); font-size: 11px; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.detail-table th:nth-child(2), .detail-table td:nth-child(2) { width: 92px; text-align: right; }
.detail-table th:last-child, .detail-table td:last-child { width: 130px; text-align: right; }
.detail-table td { padding: 13px 10px; border-top: 1px solid var(--row-border); color: var(--muted); }
.detail-table td strong { color: var(--text); font-weight: 600; }
.share-value { color: var(--mint); font-weight: 700; font-variant-numeric: tabular-nums; }
.empty-row { padding: 28px 10px !important; text-align: center !important; }
.detail-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; margin-top: 18px; }
.panel { padding: 23px; border: 1px solid var(--border); border-radius: 18px; background: var(--card-bg-flat); }
.panel-header { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.panel h2 { margin: 0; color: var(--text-strong); font: 600 19px/1.2 Outfit, sans-serif; }
.panel-header p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.panel-index { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.amber-text { color: var(--amber); }
.coverage-list { display: grid; gap: 18px; margin-top: 23px; }
.coverage-row > div:first-child { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 8px; font-size: 14px; }
.coverage-row code { color: var(--text); }
.coverage-row span { color: var(--muted); font-variant-numeric: tabular-nums; }
.coverage-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--overlay-strong); }
.coverage-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mint),var(--blue)); transition: width .5s ease; }
.rules-panel dl { display: grid; gap: 18px; margin: 23px 0 0; }
.rules-panel dl div { padding-left: 13px; border-left: 2px solid rgba(244,184,96,.28); }
.rules-panel dt { color: var(--text-strong); font-size: 14px; font-weight: 700; }
.rules-panel dd { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loading-slide { from { transform: translateX(-20%); } to { transform: translateX(160%); } }
.rise-in { animation: rise-in 480ms cubic-bezier(.22,1,.36,1) both; }
.delay-1 { animation-delay: 60ms; }.delay-2 { animation-delay: 120ms; }.delay-3 { animation-delay: 180ms; }.delay-4 { animation-delay: 240ms; }

@media (max-width: 1180px) {
  .filter-bar > label { flex-basis: 140px; }
  .detail-board { min-height: 330px; }
}
@media (max-width: 800px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--overlay-strong); }
  .sidebar-toggle { display: none; }
  html[data-sidebar="collapsed"] .sidebar { margin-left: 0; visibility: visible; }
  html[data-sidebar="collapsed"] .content { padding-left: 18px; }
  .timezone { position: static; margin-left: auto; }
  .source-card { display: none; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .sidebar .nav-item { width: auto; }
  .content { padding: 25px 18px 38px; }
  .page-header { align-items: start; }
  .signed-in-user { display: none; }
  .filter-bar > label, .filter-bar > .seller-field, .filter-bar > .month-field { flex: 1 1 calc(50% - 6px); }
    .detail-board-grid { grid-template-columns: 1fr; }
    .account-columns { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-header { display: block; }
  .header-actions { margin-top: 20px; }
  .header-actions .button { flex: 1; }
  .filter-bar > label, .filter-bar > .seller-field, .filter-bar > .month-field { flex-basis: 100%; }
  .filter-bar > #reset-filters { margin-left: 0; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { min-height: 220px; }
    .detail-board { min-height: 0; padding: 21px; }
    .paid-order-breakdown, .shipping-metrics { grid-template-columns: 1fr; }
    .shipping-metric.fastest { grid-column: auto; }
  .results-meta { align-items: start; }
  .results-context > p:first-child { display: none; }
  .empty-state { min-height: 340px; padding: 30px 18px; }
  .login-view { padding: 16px; }
  .login-card { padding: 28px 22px; }
  .login-card::before { margin-top: -28px; }
}
@media (prefers-reduced-motion: reduce) { .rise-in { animation: none; } }

.section-divider.slim { margin: 26px 0 14px; font-size: 10px; }
.chart-segment.stage-0, .legend-dot.stage-0 { background: var(--chart-muted); }
.chart-segment.stage-1, .legend-dot.stage-1 { background: var(--chart-blue); }
.chart-segment.stage-2, .legend-dot.stage-2 { background: var(--chart-mint); }
.chart-segment.stage-3, .legend-dot.stage-3 { background: var(--chart-amber); }
.chart-segment.stage-4, .legend-dot.stage-4 { background: var(--chart-violet); }
.chart-segment.stage-5, .legend-dot.stage-5 { background: var(--chart-rose); }
.chart-segment.stage-6, .legend-dot.stage-6 { background: var(--chart-coral); }

.pipeline-step { display: grid; grid-template-columns: 110px 1fr 160px; align-items: center; gap: 14px; }
.pipeline-step-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.pipeline-step-bar { height: 26px; border-radius: 8px; background: var(--overlay-weak); overflow: hidden; }
.pipeline-step-bar span { display: block; height: 100%; border-radius: 8px; }
.pipeline-step-bar span.stage-0 { background: var(--chart-muted); }
.pipeline-step-bar span.stage-1 { background: var(--chart-blue); }
.pipeline-step-bar span.stage-2 { background: var(--chart-mint); }
.pipeline-step-bar span.stage-3 { background: var(--chart-amber); }
.pipeline-step-bar span.stage-4 { background: var(--chart-violet); }
.pipeline-step-bar span.stage-5 { background: var(--chart-rose); }
.pipeline-step-bar span.stage-6 { background: var(--chart-coral); }
.pipeline-step-value { display: flex; flex-direction: column; text-align: right; }
.pipeline-step-value strong { color: var(--text-strong); font: 600 18px/1.1 Outfit, sans-serif; }
.pipeline-step-value small { color: var(--dim); font-size: 11px; }
@media (max-width: 560px) { .pipeline-step { grid-template-columns: 1fr; gap: 6px; } .pipeline-step-value { text-align: left; } }
.pipeline-grid td:not(.order-trend-seller) { color: var(--text-strong); }
.pipeline-grid td:not(.order-trend-seller):empty::after { content: '—'; color: var(--faint); }
.pipeline-funnel { display: block; margin-top: 18px; }
.pipeline-funnel-svg { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; font-family: "DM Sans", sans-serif; }
.funnel-stage { opacity: .92; stroke: var(--panel); stroke-width: 2; }
.funnel-stage.stage-0 { fill: var(--chart-muted); }
.funnel-stage.stage-1 { fill: var(--chart-blue); }
.funnel-stage.stage-2 { fill: var(--chart-mint); }
.funnel-stage.stage-3 { fill: var(--chart-amber); }
.funnel-stage.stage-4 { fill: var(--chart-violet); }
.funnel-stage.stage-5 { fill: var(--chart-rose); }
.funnel-stage.stage-6 { fill: var(--chart-coral); }
.funnel-count { fill: #ffffff; font: 600 20px/1 Outfit, sans-serif; }
.funnel-label { fill: var(--text); font-size: 14px; font-weight: 700; }
.funnel-conversion { fill: var(--dim); font-size: 12px; }
.pipeline-cohort-row { display: flex; gap: 10px; overflow-x: auto; padding: 14px 4px 10px; }
.pipeline-cohort { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pipeline-cohort svg { display: block; height: 120px; overflow: visible; }
.pipeline-cohort-label { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pipeline-cohort small { color: var(--text-strong); font-size: 12px; font-weight: 700; }
.mini-funnel-count { fill: #ffffff; font-size: 10px; font-weight: 700; }
.pipeline-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pipeline-card { min-height: 520px; display: flex; flex-direction: column; }
.pipeline-card .pipeline-funnel, .pipeline-card .pipeline-cohort-row { flex: 1; align-content: center; }
.pipeline-card .chart-legend { margin-top: auto; }
@media (max-width: 1180px) { .pipeline-trio { grid-template-columns: 1fr; } .pipeline-card { min-height: 0; } }
.pipeline-period { margin-bottom: 18px; }
.pipeline-period-label { color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.pipeline-period-label strong { color: var(--text-strong); }
.pipeline-card .pipeline-cohort-row { display: block; }
.pipeline-trio { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); }
.pipeline-weekly-grid { min-width: 780px; }
.pipeline-weekly-grid thead th:nth-child(3), .pipeline-weekly-grid thead th:nth-child(4), .pipeline-weekly-grid thead th:nth-child(5) {
  background: var(--sticky-bg); box-shadow: none; padding-top: 0;
}
.pipeline-weekly-grid td:nth-child(3), .pipeline-weekly-grid td:nth-child(4), .pipeline-weekly-grid td:nth-child(5) { background: transparent; }
.pipeline-weekly-grid th:nth-child(2), .pipeline-weekly-grid td:nth-child(2) { background: rgba(84,230,193,.08); }
.pipeline-weekly-grid thead th:nth-child(2) { box-shadow: inset 0 3px 0 var(--mint); padding-top: 14px; }
@media (max-width: 1180px) { .pipeline-trio { grid-template-columns: 1fr; } }
.pipeline-daily-card { margin-top: 20px; }
/* Sales pipeline: All and one button per platform group, picking what the three boards show. */
#pipeline-platform-bar { margin-bottom: 18px; }
.platform-pipeline-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-pipeline-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); background: var(--overlay-weak); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.platform-pipeline-tab:hover, .platform-pipeline-tab:focus-visible { background: var(--overlay-medium); outline: 0; }
.platform-pipeline-tab[aria-pressed="true"] { border-color: var(--mint); color: var(--text-strong); background: rgba(84,230,193,.14); }
.platform-pipeline-tab b { color: var(--muted); font-variant-numeric: tabular-nums; }
.platform-pipeline-tab[data-tip] span { text-decoration: underline dotted; text-underline-offset: 3px; }
.platform-pipeline-note { margin: 10px 0 0; }

.cohort-day-button { display: block; min-width: 40px; margin: -7px -6px; padding: 7px 6px; border: 0; border-radius: 5px; background: transparent; color: var(--blue); font: inherit; letter-spacing: inherit; cursor: pointer; }
.cohort-day-button:hover { background: var(--overlay-strong); color: var(--mint); }
.cohort-day-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.pipeline-grid th.is-sunday .cohort-day-button { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.cohort-week-button { margin: 0; padding: 8px 4px; white-space: nowrap; }
.cohort-dialog { width: min(1060px, calc(100vw - 32px)); max-height: 85vh; padding: 0; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,.4); }
.cohort-dialog::backdrop { background: rgba(2,9,15,.72); }
.cohort-dialog-inner { padding: 28px; }
.cohort-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cohort-dialog h2 { margin: 6px 0 0; color: var(--text-strong); font: 600 26px/1.2 Outfit, sans-serif; }
.cohort-eyebrow { margin: 0; color: var(--mint); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.cohort-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.cohort-toolbar p, .cohort-help { color: var(--muted); font-size: 13px; line-height: 1.5; }
.cohort-toolbar p { margin: 0; }
.cohort-help { margin: 16px 0 20px; }
.cohort-table-wrap { overflow-x: auto; }
.cohort-table { width: 100%; min-width: 740px; border-collapse: collapse; text-align: left; font-size: 14px; }
.cohort-table th { padding: 13px 14px; color: var(--dim); background: var(--sticky-bg); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cohort-table td { padding: 19px 14px; vertical-align: top; border-bottom: 1px solid var(--row-border); }
.cohort-table td:first-child { width: 33%; overflow-wrap: anywhere; }
.cohort-table td > strong { display: block; color: var(--text-strong); font-weight: 600; }
.cohort-email { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.cohort-id { display: block; margin-top: 6px; color: var(--dim); font-size: 11px; }
.cohort-stage { display: inline-block; padding: 6px 9px; color: var(--muted); background: var(--overlay-strong); border-radius: 6px; white-space: nowrap; font-size: 12px; }
.cohort-stage.has-topup { color: var(--mint); background: rgba(84,230,193,.1); }
.cohort-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cohort-no-topup { color: var(--dim); font-size: 13px; }
.cohort-history summary { color: var(--blue); font-size: 13px; cursor: pointer; }
.cohort-history ol { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.cohort-history li { display: flex; align-items: center; gap: 12px; font-size: 12px; white-space: nowrap; }
.cohort-history li strong { margin-left: auto; color: var(--mint); }
.cohort-topup-number { color: var(--dim); min-width: 22px; }
.cohort-topup-total { display: flex; justify-content: space-between; gap: 14px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; }
.cohort-topup-total span { color: var(--muted); }
.cohort-topup-total strong { color: var(--mint); white-space: nowrap; }
.cohort-empty { padding: 32px 0; color: var(--muted); }
.cohort-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .cohort-dialog-inner { padding: 18px; } .cohort-dialog h2 { font-size: 21px; } }

.reconciliation-all-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.reconciliation-all-toggle input { accent-color: var(--mint); width: 16px; height: 16px; cursor: pointer; }
.reconciliation-period-table th:not(:first-child), .reconciliation-period-table td:not(:first-child) { text-align: right; width: auto; }

/* Platform colours: Shopify green, TikTok red, Etsy yellow, everything else grey. */
:root {
  --platform-shopify: #5cc84a;
  --platform-tiktokshop: #ff4d6a;
  --platform-etsy: #f2c230;
  --platform-other: var(--chart-muted);
}
:root[data-theme="light"] {
  --platform-shopify: #2f9a3c;
  --platform-tiktokshop: #e0244c;
  --platform-etsy: #cf9a06;
}
.chart-segment.platform-shopify, .legend-dot.platform-shopify { background: var(--platform-shopify); }
.chart-segment.platform-tiktokshop, .legend-dot.platform-tiktokshop { background: var(--platform-tiktokshop); }
.chart-segment.platform-etsy, .legend-dot.platform-etsy { background: var(--platform-etsy); }
.chart-segment.platform-other, .legend-dot.platform-other { background: var(--platform-other); }
/* Adjacent grey groups stay distinguishable by a hairline. */
.chart-segment.platform-other { box-shadow: inset 0 1px 0 rgba(0,0,0,.3); }
.platform-icon { width: 13px; height: 13px; flex: none; fill: currentColor; }
.platform-icon-shopify { color: var(--platform-shopify); }
.platform-icon-tiktokshop { color: var(--platform-tiktokshop); }
.platform-icon-etsy { color: var(--platform-etsy); }
.legend-other { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.chart-bar-col[data-tip] { cursor: default; }
.chart-bar-col[data-tip]:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 6px; }

.chart-tooltip {
  position: fixed; z-index: 60; min-width: 220px; max-width: 340px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--sticky-bg);
  box-shadow: 0 14px 34px rgba(0,0,0,.35); font-size: 12px; pointer-events: none;
}
.chart-tip-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--overlay-strong); color: var(--text-strong); font-weight: 700; }
.chart-tip-row { display: grid; grid-template-columns: 8px minmax(0,1fr) auto 48px; align-items: center; gap: 8px; padding: 3px 0; color: var(--muted); }
.chart-tip-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.chart-tip-row small { color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.chart-tip-row.is-active, .chart-tip-row.is-active b { color: var(--text-strong); font-weight: 700; }
.chart-tip-name { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }

/* Period switch inside a chart title ("Paid Orders by Platforms — Quarterly ▾"). */
.chart-view-select {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0 18px 0 2px; border: 0; border-radius: 6px;
  color: var(--mint); font: inherit; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354e6c1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1px center / 14px;
}
.chart-view-select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.chart-view-select option { color: var(--text); background: var(--sticky-bg); font-size: 14px; }

/* Account KPI */
.kpi-revenue-header { align-items: flex-start; flex-wrap: wrap; }
.kpi-revenue-header .board-note { display: block; margin-top: 4px; }
.kpi-target { min-width: 190px; margin-left: auto; text-align: right; }
.kpi-target-figures { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.kpi-target-figures strong { color: var(--text-strong); font: 600 26px/1 Outfit, sans-serif; font-variant-numeric: tabular-nums; }
.kpi-target-figures span { color: var(--muted); font-size: 14px; font-weight: 700; }
.kpi-target-track, .kpi-mini-track { height: 6px; margin-top: 8px; border-radius: 999px; background: var(--overlay-strong); overflow: hidden; }
.kpi-target-track span, .kpi-mini-track span { display: block; height: 100%; border-radius: inherit; background: var(--chart-amber); transition: width .3s ease; }
.kpi-target.is-met .kpi-target-track span { background: var(--mint); }
.kpi-target small { display: block; margin-top: 6px; color: var(--dim); font-size: 11px; }
.chart-bar-fill.conversion-fill, .legend-dot.conversion-dot { background: var(--chart-blue); }
.chart-bar-fill.conversion-fill.is-young, .legend-dot.conversion-dot.is-young { background: repeating-linear-gradient(135deg, var(--chart-blue) 0 4px, transparent 4px 7px); opacity: .75; }
.legend-dot.conversion-dot.is-young { border: 1px solid var(--chart-blue); }
.chart-tip-line { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; color: var(--muted); }
.chart-tip-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.chart-tip-foot { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--overlay-strong); color: var(--dim); font-size: 11px; line-height: 1.45; }
#kpi-pic-board { margin-top: 20px; }
.kpi-pic-table td small { display: block; color: var(--dim); font-size: 11px; }
.kpi-pic-table .kpi-team-row td { background: rgba(84,230,193,.06); }
.kpi-pic-table tr.is-selected td { background: rgba(84,230,193,.14); }
.kpi-pic-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--mint); }
.kpi-account-link { display: block; padding: 0; border: 0; color: var(--text-strong); background: none; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.kpi-account-link:hover, .kpi-account-link:focus-visible { color: var(--mint); text-decoration: underline; outline: 0; }
.account-columns > .is-wide { grid-column: 1 / -1; }
.kpi-target-input { width: 120px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--input-bg); font: inherit; }
.kpi-target-input:focus { border-color: var(--mint); outline: 0; box-shadow: 0 0 0 3px rgba(84,230,193,.1); }
.kpi-progress-cell { min-width: 120px; }
.kpi-progress-cell .kpi-mini-track { margin-top: 0; }
.kpi-progress-cell small { color: var(--muted); font-size: 11px; }
.chart-bars.is-dense .chart-bar-col:not(:first-child):not(.is-peak) .chart-bar-value { visibility: hidden; }

/* Multi orders by SKU combination (Monthly Detail). */
.multi-breakdown-list.is-combos { align-items: stretch; gap: 6px; max-height: 210px; margin-bottom: 14px; overflow: hidden auto; }
.multi-breakdown-list.is-combos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; border-radius: 10px; }
.combo-types { flex: 1 1 100%; min-width: 0; color: var(--text); font-weight: 700; overflow-wrap: break-word; }
.combo-count { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.multi-breakdown-list li.combo-note { display: block; padding: 2px 2px 0; border: 0; border-radius: 0; background: none; color: var(--dim); font-size: 11px; }

/* Month filter: popover with months and an in-place custom range picker (month-filter.js). */
.month-field { position: relative; }
.filter-label { display: block; margin: 0 0 7px 2px; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.filter-select-button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 38px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--input-bg); font-size: 14px; text-align: left;
}
.filter-select-button[aria-expanded="true"], .filter-select-button:focus-visible { border-color: var(--mint); outline: 0; box-shadow: 0 0 0 3px rgba(84,230,193,.1); }
.filter-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.filter-select-button svg { flex: none; color: var(--muted); transition: transform .2s ease; }
.filter-select-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.month-popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 12px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--sticky-bg); box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.month-option {
  height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; color: var(--text);
  background: var(--overlay-weak); font-size: 13px; font-weight: 600; transition: background .15s ease, border-color .15s ease;
}
.month-option:hover, .month-option:focus-visible { background: var(--overlay-medium); outline: 0; }
.month-option[aria-pressed="true"] { border-color: var(--mint); color: var(--text-strong); background: rgba(84,230,193,.14); }
.month-option.is-wide { display: block; width: 100%; }
.month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.month-option.month-custom { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: auto; padding: 9px 12px; text-align: left; }
.month-custom small { margin-top: 2px; color: var(--dim); font-size: 11px; font-weight: 600; }
.range-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--text-strong); font-size: 14px; }
.range-back { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); background: transparent; font-size: 18px; line-height: 1; }
.range-back:hover { color: var(--text-strong); background: var(--overlay-medium); }
.range-ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.range-end { padding: 7px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg); cursor: text; transition: border-color .15s ease, box-shadow .15s ease; }
.range-end span { display: block; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.range-end input { width: 100%; margin-top: 2px; padding: 0; border: 0; outline: 0; color: var(--text-strong); background: transparent; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.range-end.is-active { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(84,230,193,.1); }
.range-end input.is-invalid { color: var(--danger-text); }
.wheel {
  position: relative; display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; height: 170px; margin-top: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.wheel-band { position: absolute; top: 68px; left: 2px; right: 2px; height: 34px; border-radius: 10px; background: var(--overlay-medium); pointer-events: none; }
.wheel-col { position: relative; height: 170px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; outline: 0; }
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-col:focus-visible { box-shadow: inset 0 0 0 2px var(--mint); border-radius: 10px; }
.wheel-spacer { height: 68px; }
.wheel-item { height: 34px; color: var(--dim); font-size: 15px; font-weight: 600; line-height: 34px; text-align: center; font-variant-numeric: tabular-nums; scroll-snap-align: center; cursor: pointer; user-select: none; }
.wheel-item[aria-selected="true"] { color: var(--text-strong); font-size: 17px; font-weight: 700; }
.range-error { margin: 8px 0 0; color: var(--danger-text); font-size: 12px; }
.range-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.range-actions .button { min-height: 34px; }
.filter-bar .range-end input, .filter-bar .range-end input:focus { height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* Seller Detail Order: the Other row opens a list instead of expanding the table. */
.order-trend-other td { background: rgba(84,230,193,.04); }
.other-open, .other-cell { padding: 0; border: 0; color: var(--mint); background: none; font: inherit; font-weight: 700; cursor: pointer; }
.other-open { display: block; text-align: left; }
.other-open small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.other-open:hover, .other-cell:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.other-open:focus-visible, .other-cell:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 4px; }
.other-dialog { width: min(820px, calc(100vw - 32px)); overflow-x: hidden; }
.other-toolbar { flex-wrap: wrap; }
.other-search { flex: 1 1 260px; max-width: 360px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; outline: 0; color: var(--text); background: var(--input-bg); }
.other-search:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(84,230,193,.1); }
.other-toolbar p { flex: 1 1 260px; }
/* Fixed-height list: 1 seller or 150, the dialog stays the same size and scrolls inside. */
.other-content { max-height: min(56vh, 520px); margin-top: 16px; overflow: auto; border: 1px solid var(--row-border); border-radius: 14px; }
.other-table { min-width: max-content; }

.other-table td { padding: 12px 14px; vertical-align: middle; }
.other-table td.other-orders { color: var(--text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.other-more { display: block; margin: 12px auto; }
.other-more.hidden { display: none; }
@media (max-width: 560px) {
  .other-table td:first-child { width: auto; overflow-wrap: break-word; }
  .other-table td { padding: 10px; }
}

/* Excel exports */
.detail-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.detail-actions + .detail-board-grid { margin-top: 14px; }
.board-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.board-actions .board-note { margin: 0; }
.board-actions .button { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.export-dialog { width: min(560px, calc(100vw - 32px)); }
.export-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.export-modes legend { padding: 0; }
.export-modes label { position: relative; cursor: pointer; }
.export-modes input { position: absolute; opacity: 0; pointer-events: none; }
.export-modes span { display: block; padding: 9px 16px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--overlay-weak); font-size: 14px; font-weight: 600; }
.export-modes input:checked + span { color: var(--text-strong); border-color: var(--mint); box-shadow: 0 0 0 3px rgba(84,230,193,.1); }
.export-modes input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 2px; }
.export-field { display: block; }
.export-field select, .export-field input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; outline: 0; color: var(--text); background: var(--input-bg); font: inherit; font-size: 14px; }
.export-field select:focus, .export-field input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(84,230,193,.1); }
.export-field select option { color: var(--text); background: var(--sticky-bg); }
.export-range { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.export-toolbar p { flex: 1 1 auto; overflow-wrap: anywhere; }
.export-toolbar .button:disabled { opacity: .55; cursor: progress; }
.account-menu { position: relative; align-self: center; }
.account-trigger { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; list-style: none; background: var(--overlay-weak); }
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger .signed-in-user { text-align: left; margin: 0; }
.account-trigger svg, .account-menu-item svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-avatar { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--overlay-medium); color: var(--muted); }
.account-chevron { color: var(--dim); transition: transform .15s; }
.account-menu[open] .account-chevron { transform: rotate(180deg); }
.account-menu[open] .account-trigger { border-color: var(--mint); }
.account-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 230px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--dropdown-bg); box-shadow: 0 12px 35px rgba(0,0,0,.22); z-index: 40; }
.account-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px; border: 0; border-radius: 6px; color: var(--text); background: transparent; text-align: left; text-decoration: none; font-size: 13px; font-weight: 500; }
.account-menu-item:hover { background: var(--overlay-hover); }
.account-new-tab { margin-left: auto; color: var(--dim); }
.account-logout { color: var(--coral); }
.account-trigger:focus-visible,.account-menu-item:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
@media(max-width:560px) { .account-trigger .signed-in-user { max-width: 125px; } .account-avatar { display: none; } }
@media (max-width: 560px) {
  .export-range { grid-template-columns: 1fr; }
  .board-actions { flex-wrap: wrap; }
}

/* Shared scales and readable cohort / Account comparisons. */
.conversion-table { min-width: 660px; }
.conversion-table th, .conversion-table td { vertical-align: top; }
.conversion-table small { display: block; margin-top: 5px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.conversion-rate { display: grid; grid-template-columns: 52px 90px; align-items: center; gap: 10px; }
.conversion-rate i, .benchmark-track { display: block; background: var(--overlay-strong); border-radius: 4px; }
.conversion-rate b { display: block; height: 5px; background: var(--mint); border-radius: 4px; }
.cohort-count-button { border: 0; background: transparent; color: var(--chart-blue); font: inherit; font-weight: 700; padding: 7px; cursor: pointer; border-radius: 4px; }
.cohort-count-button:hover, .cohort-count-button:focus-visible { background: var(--overlay-strong); text-decoration: underline; }
.pipeline-funnel-svg g[role=button] { cursor: pointer; outline: none; }
.pipeline-funnel-svg g[role=button]:focus-visible polygon { stroke: var(--text); stroke-width: 3px; }
.conversion-benchmark-header { margin-top: 26px; }
.benchmark-list { margin: 22px 0 30px; display: grid; gap: 17px; }
.benchmark-row { display: grid; grid-template-columns: minmax(100px,180px) minmax(120px,1fr) 65px 80px; gap: 14px; align-items: center; font-size: 12px; }
.benchmark-row > span { overflow-wrap: anywhere; }
.benchmark-row > small { color: var(--muted); }
.benchmark-track { position: relative; height: 18px; }
.benchmark-track b { display: block; height: 100%; background: var(--chart-blue); border-radius: 4px; }
.benchmark-track i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--mint); }
.active-platform-list { max-height: 540px; overflow-y: auto; margin-top: 20px; }
.active-platform-row { display: grid; grid-template-columns: 90px minmax(120px,1fr) 60px; align-items: start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--row-border); font-size: 12px; }
.active-count-track { height: 22px; background: var(--overlay-weak); border-radius: 4px; }
.active-count-track > div { display: flex; height: 100%; border-radius: 4px; overflow: hidden; }
.active-platform-breakdown { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 9px; color: var(--muted); font-size: 11px; }
.active-platform-breakdown .legend-dot { display: inline-block; margin-right: 4px; }
.other-table td:first-child { min-width: 210px; }
.order-trend-table thead th.is-sunday { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 640px) {
 .benchmark-row { grid-template-columns: 90px minmax(70px,1fr) 50px 60px; gap: 8px; }
 .active-platform-row { grid-template-columns: 65px minmax(100px,1fr) 40px; gap: 8px; }
}

.week-in-progress { display: block; margin-top: 5px; color: var(--mint); font-size: 9px; text-transform: none; }

.benchmark-row > span > small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }