@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/Inter-VariableFont_opsz,wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: block;
}

:root {
  --font-sans: Inter, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  /* Emberglass light = porcelain: cool grey-blue room, pure white panels.
     Same hue family as the dark slate theme at high luminance — the two themes
     are one identity at different exposures. (The warm cream era ended 2026-07.) */
  --bg: #eceef2;
  --panel: #ffffff;
  --panel-2: #f3f5f8;
  --panel-soft: #eef1f5;
  --input-bg: #ffffff;
  --missing-bg: #faf0f1;
  --sidebar-bg: #10161f;
  --sidebar-text: #aec0cf;
  --sidebar-heading: #f4f7fa;
  --sidebar-active-bg: rgba(255, 255, 255, .08);
  --sidebar-active-text: #ff6b2c; /* ember active nav label; sidebar is slate in both themes, so :root-only */
  --top-bg: rgba(236, 238, 242, .92);
  --line: #dce0e8;
  --line-soft: rgba(22, 30, 48, .09);
  --map-border: #b6c0d0;
  --text: #171a20;
  --text-soft: #454b57;
  --text-inverse: #ffffff;
  --muted: #6d7484;
  --muted-2: #98a0ae;
  --accent: #3b5cc4;
  --accent-strong: #2e49a3;
  --accent-soft: rgba(59, 92, 196, .10);
  --accent-hover: rgba(59, 92, 196, .16);
  --blue: #2563eb;
  --indigo: #4f46e5;
  --chart-grid: rgba(22, 30, 48, .08);
  --chart-grid-stripes: linear-gradient(to right, var(--chart-grid) 1px, transparent 1px);
  --chart-line: #3b5cc4;
  --chart-wash: linear-gradient(135deg, rgba(59, 92, 196, .1), rgba(226, 88, 14, .06));
  --chart-placeholder-bg:
    linear-gradient(to bottom, transparent 32%, var(--chart-grid) 33%, transparent 34%, transparent 65%, var(--chart-grid) 66%, transparent 67%),
    var(--chart-wash);
  --chart-axis: rgba(22, 30, 48, .30);
  --chart-series-revenue: #3b5cc4;
  --chart-series-profit-margin: #8b6fc6;
  --chart-series-net-profit: #16845b;
  --chart-series-orders: #cc6418;
  --chart-series-units: #68758a;
  --chart-series-refund-amount: #c43d3d;
  --chart-series-refund-units: #a84d3f;
  --chart-series-impressions: #6f7f3f;
  --chart-series-clicks: #cc6418;
  --chart-series-purchases: #3b5cc4;
  /* PPC/insights chart palette — mid-tones that read on both light & dark plot areas */
  --chart-blue: #315f9f;
  --chart-blue-soft: #5278ad;
  --chart-green: #2f8f55;
  --chart-olive: #6f7f3f;
  --chart-lime: #7fbf4d;
  --chart-red: #c94a43;
  --chart-rust: #a84d3f;
  --chart-purple: #8b6fc6;
  --chart-lavender: #9b7ac5;
  --chart-orange: #ff6b17;
  --chart-peach: #f29b5f;
  --chart-teal: #8bd0d6;
  --orange: #ff6b2c;
  --orange-2: #c24a0e;
  --green: #16845b;
  --red: #c43d3d;
  --warn: #c07c18;
  --alert-yellow: #ffea00;
  --good-soft: rgba(22, 132, 91, .1);
  --bad-soft: rgba(196, 61, 61, .1);
  --warn-soft: rgba(192, 124, 24, .11);
  --metric-up: #16845b;
  --metric-down: #c43d3d;
  --primary-bg: #e2580e;
  --primary-text: #ffffff;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  --focus-ring-tight: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
  --scrollbar-color: rgba(100, 116, 139, .38);
  --scrollbar-thumb: rgba(100, 116, 139, .32);
  --overlay-scrim: rgba(15, 23, 42, .38);
  --listing-dialog-shadow: 0 24px 80px rgba(15, 23, 42, .32);
  --listing-arrow-color: color-mix(in srgb, var(--accent) 58%, #94a3b8);
  --kpi-inverse-border: rgba(255, 255, 255, .06);
  --kpi-revenue-shadow: 0 8px 18px rgba(15, 23, 42, .14);
  --shadow-sm: 0 1px 2px rgba(23, 26, 32, .06);
  --shadow-soft: 0 4px 14px rgba(23, 26, 32, .08);
  --shadow-card-soft: 0 12px 28px rgba(23, 33, 43, .04);
  --shadow-drawer: -18px 0 30px rgba(13, 27, 42, .14);
  --shadow-drawer-head: 0 8px 18px rgba(13, 27, 42, .07);
  --shadow-popover: 0 18px 42px rgba(23, 26, 32, .16);
  --shadow-menu: 0 12px 24px rgba(23, 26, 32, .16);
  --shadow-tooltip: 0 4px 14px rgba(23, 26, 32, .12);
  --dp-heat-rgb: 75, 191, 168;
  --dp-heat-selected-bg: rgba(var(--dp-heat-rgb), .18);
  --dp-heat-ramp-bg: linear-gradient(90deg, rgba(var(--dp-heat-rgb), .08), rgba(var(--dp-heat-rgb), .5), rgba(var(--dp-heat-rgb), .92));
  --dp-cell-hover-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  --cw-summary-active-bg:
    linear-gradient(to right, color-mix(in srgb, var(--cw-series-color) 72%, transparent) 0 3px, transparent 3px),
    color-mix(in srgb, var(--cw-series-color) 12%, var(--panel));
  --cw-summary-active-hover-bg:
    linear-gradient(to right, color-mix(in srgb, var(--cw-series-color) 84%, transparent) 0 3px, transparent 3px),
    color-mix(in srgb, var(--cw-series-color) 18%, var(--panel));
  --cw-drawer-body-bg:
    linear-gradient(135deg, var(--line-soft), transparent 36%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  --cw-pending-active-bg: linear-gradient(90deg, color-mix(in srgb, var(--orange) 9%, var(--panel)), var(--panel));
  --danger-text: #c43d3d;
  --danger-border: rgba(196, 61, 61, .35);
  --key-border: rgba(226, 88, 14, .32);
  --key-bg: rgba(226, 88, 14, .08);
  --key-text: #8a4a20;
  --pill-bg: #eef1f5;
  --intent-very-high-bg: #d9f2df;
  --intent-very-high-text: #145c2a;
  --intent-high-bg: #e7f5dc;
  --intent-high-text: #3f6420;
  --intent-medium-bg: #e8eef5;
  --intent-medium-text: #38536c;
  --intent-low-bg: #eef1f4;
  --intent-low-text: #64717d;
  --intent-very-low-bg: #f4f5f6;
  --intent-very-low-text: #7a828a;
}

/* ── Dark theme: same token names, slate values (THEME.md) ── */
:root[data-theme="dark"] {
  /* Emberglass dark = the primary design surface. Values barely moved from the
     original slate — nudged cooler/deeper to pair with the porcelain light. */
  --bg: #0f131a;
  --panel: #171e29;
  --panel-2: #1e2735;
  --panel-soft: #1c2431;
  --input-bg: #1e2735;
  --missing-bg: #2a1d1d;
  --sidebar-bg: #10161f;
  --sidebar-text: #aec0cf;
  --sidebar-heading: #e9ebef;
  --sidebar-active-bg: rgba(255, 255, 255, .09);
  --top-bg: rgba(15, 19, 26, .92);
  --line: #2a3548;
  --line-soft: rgba(255, 255, 255, .07);
  --map-border: #44597a;
  --text: #e9ebef;
  --text-soft: #b6bcc7;
  --text-inverse: #ffffff;
  --muted: #8b93a1;
  --muted-2: #6b7280;
  --accent: #7f9ae6;
  --accent-strong: #93abf0;
  --accent-soft: rgba(127, 154, 230, .14);
  --accent-hover: rgba(127, 154, 230, .22);
  --chart-grid: rgba(255, 255, 255, .06);
  --chart-line: #7f9ae6;
  --chart-wash: linear-gradient(135deg, rgba(127, 154, 230, .12), rgba(232, 132, 58, .06));
  --chart-axis: rgba(255, 255, 255, .28);
  --chart-series-revenue: #7f9ae6;
  --chart-series-profit-margin: #9b7ede;
  --chart-series-net-profit: #4cb87b;
  --chart-series-orders: #e8843a;
  --chart-series-units: #8a97ab;
  --chart-series-refund-amount: #e07178;
  --chart-series-refund-units: #c4705f;
  --chart-series-impressions: #9aa861;
  --chart-series-clicks: #e8843a;
  --chart-series-purchases: #7f9ae6;
  --orange: #ff6b2c;
  --orange-2: #ff7a3c;
  --green: #4cb87b;
  --red: #e07178;
  --warn: #c79a52;
  --alert-yellow: #ffea00;
  --good-soft: rgba(76, 184, 123, .12);
  --bad-soft: rgba(224, 113, 120, .12);
  --warn-soft: rgba(199, 154, 82, .14);
  --metric-up: #4cb87b;
  --metric-down: #e07178;
  --primary-bg: #ff6b2c;
  --primary-text: #1a0e06;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, .36);
  --shadow-popover: 0 18px 42px rgba(0, 0, 0, .5);
  --shadow-menu: 0 12px 24px rgba(0, 0, 0, .5);
  --shadow-tooltip: 0 4px 14px rgba(0, 0, 0, .42);
  --danger-text: #e07178;
  --danger-border: rgba(224, 113, 120, .4);
  --key-border: rgba(255, 107, 44, .35);
  --key-bg: rgba(255, 107, 44, .12);
  --key-text: #ff9a5c;
  --pill-bg: #1e2735;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font-sans);
  font-feature-settings: "tnum";
  text-rendering: optimizeLegibility;
}
.dashboard-tooltip {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text);
  font: 500 11px/15px var(--font-sans);
  box-shadow: var(--shadow-tooltip);
  pointer-events: none;
  white-space: nowrap;
}
.dashboard-tooltip .date {
  color: var(--muted);
  font-weight: 500;
}
.dashboard-tooltip .value {
  margin-top: 2px;
  color: var(--text);
  font-weight: 650;
}
.dashboard-tooltip .tooltip-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.dashboard-tooltip .tooltip-row strong {
  color: var(--text);
  font-weight: 650;
}
a { color: inherit; text-decoration: none; }
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.side {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.brand { display: flex; justify-content: center; }
.brand img { width: 128px; max-width: 100%; height: auto; display: block; }
nav { display: grid; gap: 6px; }
details { display: grid; gap: 6px; }
summary {
  cursor: pointer;
  color: var(--sidebar-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 9px 8px;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "v";
  float: right;
  color: var(--sidebar-text);
}
details:not([open]) summary::after { content: ">"; }
nav a {
  display: block;
  color: var(--sidebar-text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}
nav a:hover, nav a.active {
  background: var(--sidebar-active-bg);
  color: var(--text-inverse);
}

nav a.active {
  color: var(--sidebar-active-text);
}
.side-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--sidebar-text);
  display: grid;
  gap: 6px;
}
.side-foot a { color: var(--orange-2); }
.main { min-width: 0; }
.top {
  height: 72px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--top-bg);
}
.super-form { display: flex; align-items: center; gap: 10px; }
.super-form label { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.top-meta { display: flex; gap: 22px; color: var(--muted); }
.top-meta strong { color: var(--text); font-weight: 600; }
.content { padding: 26px; max-width: 1500px; }
.page-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
h1 { margin: 0; font-size: 28px; font-weight: 750; letter-spacing: -.01em; }
h2 { margin: 0 0 14px; font-size: 18px; font-weight: 720; letter-spacing: -.005em; }
h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.card-value { font-size: 28px; font-weight: 750; margin-bottom: 4px; letter-spacing: -.01em; }
.card-caption { color: var(--muted); font-size: 12px; margin-top: 2px; }
.muted { color: var(--muted); }
.flash {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 10px 12px;
  border-radius: 7px;
  margin-bottom: 14px;
}
.flash.error { border-color: var(--danger-border); color: var(--danger-text); }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
input, select, textarea {
  width: 100%;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font: inherit;
}
textarea { min-height: 100px; resize: vertical; }
label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; }
.checkbox-label input { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.one { grid-template-columns: 1fr; }
.form-grid.one-third { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button, .button {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 2px;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
button:hover, .button:hover {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--panel-2) 84%, var(--text));
}
button.primary, .button.primary {
  background: var(--primary-bg);
  border-color: var(--primary-bg);
  color: var(--primary-text);
  font-weight: 700;
}
button.secondary, .button.secondary {
  background: var(--orange);
  border-color: var(--orange);
  border-radius: 2px;
  color: var(--primary-text);
  font-weight: 700;
}
button.secondary:hover, .button.secondary:hover {
  background: var(--orange-2);
  border-color: var(--orange-2);
}
button.danger { color: var(--danger-text); border-color: var(--danger-border); }
.pill {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--muted);
  font-size: 12px;
}
.pill.ok { color: var(--green); background: var(--good-soft); }
.pill.no { color: var(--red); background: var(--bad-soft); }
.code {
  font-size: 12px;
  word-break: break-all;
}
.key-box {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid var(--key-border);
  border-radius: 7px;
  background: var(--key-bg);
}
.key-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.key-row code {
  flex: 1;
  color: var(--key-text);
}
.credential-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.plan-block { margin-top: 16px; }
.plan-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.plan-tables { margin-top: 16px; align-items: start; }
.feature-group { margin-bottom: 16px; }
.feature-group:last-child { margin-bottom: 0; }
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card { width: min(430px, 100%); }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; }
  .top { height: auto; padding: 14px; align-items: flex-start; gap: 12px; flex-direction: column; }
  .form-grid, .form-grid.two, .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
}