:root {
    --bg: #070b13;
    --sidebar: rgba(10, 15, 26, .93);
    --panel: rgba(15, 22, 37, .88);
    --panel-2: rgba(20, 29, 48, .92);
    --line: rgba(148, 163, 184, .14);
    --text: #f4f7fb;
    --muted: #8995aa;
    --blue: #4895ff;
    --cyan: #23d5d5;
    --purple: #a66bff;
    --green: #48d597;
    --amber: #f7b84b;
    --red: #ff6474;
    --radius: 18px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    color: var(--text);
    background: var(--bg);
    font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
.hidden { display: none !important; }

.ambient { position: fixed; border-radius: 999px; filter: blur(100px); pointer-events: none; opacity: .12; z-index: -1; }
.ambient-one { width: 430px; height: 430px; background: #3b82f6; top: -180px; right: 15%; }
.ambient-two { width: 330px; height: 330px; background: #7c3aed; left: 42%; bottom: -200px; }
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
    position: sticky; top: 0; height: 100vh; padding: 26px 17px 18px;
    display: flex; flex-direction: column; gap: 26px;
    background: var(--sidebar); border-right: 1px solid var(--line); backdrop-filter: blur(18px); z-index: 20;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font-size: 20px; letter-spacing: -.4px; padding: 0 8px; }
.brand strong { font-weight: 750; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #1d6fff, #7b55ee); box-shadow: 0 8px 22px rgba(72,149,255,.28); }
.brand-mark svg { width: 26px; fill: none; stroke: white; stroke-width: 2.1; stroke-linecap: round; }
.nav-list { display: grid; gap: 7px; }
.nav-item { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 45px; padding: 0 13px; color: #8f9db3; text-decoration: none; border: 1px solid transparent; border-radius: 12px; transition: .2s ease; }
.nav-item:hover { color: #dfe8f7; background: rgba(255,255,255,.035); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(72,149,255,.18), rgba(72,149,255,.05)); border-color: rgba(72,149,255,.18); }
.nav-icon { width: 21px; text-align: center; font-size: 20px; color: #70aaff; }
.button-reset { border: 0; background: transparent; text-align: left; }
.sidebar-spacer { flex: 1; }
.api-status-card { padding: 14px; background: rgba(255,255,255,.028); border: 1px solid var(--line); border-radius: 14px; }
.status-heading { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.status-dot { width: 8px; height: 8px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 0 4px rgba(247,184,75,.1); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(72,213,151,.1), 0 0 18px rgba(72,213,151,.35); }
.status-dot.error { background: var(--red); box-shadow: 0 0 0 4px rgba(255,100,116,.1); }
.status-copy { margin-top: 9px; font-size: 12px; color: #aeb8c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-meta { margin-top: 3px; color: #606d82; font-size: 11px; }

.main-content { min-width: 0; padding: 0 32px 32px; }
.topbar { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 5px; color: #66738a; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
h1, h2 { margin: 0; letter-spacing: -.5px; }
h1 { font-size: 24px; font-weight: 690; }
h2 { font-size: 17px; font-weight: 680; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.live-pill { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(72,213,151,.18); background: rgba(72,213,151,.06); color: #73dfa9; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .8px; }
.live-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(72,213,151,.7); }
.icon-button, .mobile-menu { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: #b8c3d4; background: rgba(255,255,255,.025); }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.spinning svg { animation: spin .85s linear infinite; }
.account-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(140deg, #2c70ec, #7b4fd5); font-weight: 800; font-size: 12px; }
.mobile-menu { display: none; font-size: 18px; }

.filter-bar { display: grid; grid-template-columns: minmax(155px, 1fr) minmax(260px, 1.45fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(170px, 1fr) auto; align-items: end; gap: 10px; padding: 18px 0 8px; }
.filter-control { min-width: 0; }
.filter-control > span, .dialog-field > span { display: block; margin: 0 0 7px 3px; color: #758198; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .7px; }
.filter-control select, .filter-control input, .dialog-field select { width: 100%; height: 41px; padding: 0 12px; border: 1px solid var(--line); outline: 0; border-radius: 11px; color: #dbe4f1; background: #111927; }
.filter-control select:focus, .filter-control input:focus, .dialog-field select:focus { border-color: rgba(72,149,255,.55); box-shadow: 0 0 0 3px rgba(72,149,255,.08); }
select { color-scheme: dark; }
.date-picker-shell { position: relative; }
.date-range-button { width: 100%; height: 41px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 0 11px; color: #dbe4f1; text-align: left; background: #111927; border: 1px solid var(--line); border-radius: 11px; }
.date-range-button:hover, .date-range-button[aria-expanded="true"] { border-color: rgba(72,149,255,.5); background: #141e2f; }
.date-range-button svg { width: 18px; fill: none; stroke: #63a4ff; stroke-width: 1.7; stroke-linecap: round; }
.date-range-button > span { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.date-range-button strong { flex: none; font-size: 11px; }
.date-range-button small { min-width: 0; color: #758198; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.date-range-button > i { color: #5f6d84; font-style: normal; }
.date-picker-popover { position: absolute; z-index: 60; top: calc(100% + 9px); left: 0; width: min(660px, calc(100vw - 285px)); min-width: 570px; display: grid; grid-template-columns: 185px minmax(0,1fr); overflow: hidden; color: #dce4f1; background: #121b2b; border: 1px solid rgba(148,163,184,.25); border-radius: 15px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.date-preset-list { max-height: 430px; overflow-y: auto; padding: 12px 8px; background: #0d1522; border-right: 1px solid var(--line); }
.date-preset-list p { margin: 3px 10px 8px; color: #718097; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .7px; }
.date-preset-list button { width: 100%; height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 9px; color: #aab5c7; background: transparent; border: 0; border-radius: 8px; text-align: left; font-size: 11px; }
.date-preset-list button:hover { color: white; background: rgba(255,255,255,.04); }
.date-preset-list button i { width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid #536179; border-radius: 50%; }
.date-preset-list button.active { color: #fff; background: rgba(72,149,255,.1); }
.date-preset-list button.active i { border: 4px solid #16243a; background: #4b9cff; box-shadow: 0 0 0 1px #4b9cff; }
.date-custom-panel { min-width: 0; padding: 20px; }
.date-panel-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.date-panel-head h3 { margin: 0; font-size: 18px; }.date-panel-head > span { padding: 5px 8px; color: #6f7e94; border: 1px solid var(--line); border-radius: 99px; font-size: 9px; }
.date-pair.expanded { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.date-pair.expanded label > span { display: block; margin: 0 0 6px 2px; color: #718097; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.date-pair.expanded input { width: 100%; height: 41px; padding: 0 9px; color: #e0e7f1; background: #0d1522; border: 1px solid var(--line); border-radius: 9px; }
.date-pair.expanded > i { padding-bottom: 11px; color: #536078; font-style: normal; }
.date-preview { display: flex; justify-content: space-between; margin-top: 16px; padding: 12px; color: #718097; background: rgba(72,149,255,.05); border: 1px solid rgba(72,149,255,.12); border-radius: 9px; font-size: 11px; }.date-preview strong { color: #b9d6ff; }
.timezone-note { margin: 14px 0 0; color: #5f6d83; font-size: 10px; }
.date-picker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.primary-button, .secondary-button { height: 41px; padding: 0 16px; border-radius: 11px; font-weight: 700; }
.primary-button { border: 1px solid #488ff0; color: white; background: linear-gradient(135deg, #246fd8, #6b5ce7); box-shadow: 0 8px 24px rgba(47,111,219,.2); }
.primary-button:hover { filter: brightness(1.08); }
.secondary-button { color: #c6d0df; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.notice { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; color: #ffc8ce; background: rgba(255,100,116,.09); border: 1px solid rgba(255,100,116,.2); }
.notice.info { color: #b9d6ff; background: rgba(72,149,255,.08); border-color: rgba(72,149,255,.2); }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; padding: 16px 0 13px; }
.kpi-card { min-width: 0; min-height: 152px; padding: 18px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(25,35,55,.95), rgba(12,19,31,.94)); box-shadow: var(--shadow); }
.kpi-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.kpi-card::after { content: ''; position: absolute; width: 100px; height: 100px; top: -48px; right: -40px; border-radius: 50%; background: var(--accent); filter: blur(45px); opacity: .15; }
.kpi-card.purple { --accent: var(--purple); }.kpi-card.green { --accent: var(--green); }.kpi-card.blue { --accent: var(--blue); }.kpi-card.amber { --accent: var(--amber); }.kpi-card.cyan { --accent: var(--cyan); }.kpi-card.red { --accent: var(--red); }
.kpi-label { display: flex; align-items: center; gap: 8px; color: #96a2b6; font-size: 12px; font-weight: 650; }
.metric-icon { width: 27px; height: 27px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border-radius: 8px; }
.kpi-value { margin-top: 16px; font-size: clamp(23px, 2vw, 31px); font-weight: 720; letter-spacing: -1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-foot { position: absolute; left: 18px; right: 18px; bottom: 15px; display: flex; justify-content: space-between; gap: 8px; color: #647188; font-size: 10px; }
.source-tag { padding: 2px 5px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 5px; font-weight: 800; }
.shopify-tag { color: #75d8a7; border-color: rgba(117,216,167,.3); }
.mini-meter { width: 45px; height: 4px; overflow: hidden; margin-top: 5px; background: #273247; border-radius: 4px; }.mini-meter i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: inherit; transition: width .5s; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, .72fr); gap: 13px; margin-top: 0; }
.panel { min-width: 0; padding: 20px; background: linear-gradient(145deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.legend { display: flex; gap: 14px; color: #7f8ba0; font-size: 11px; }.legend span { display: flex; align-items: center; gap: 6px; }.legend i { width: 15px; height: 3px; border-radius: 4px; }.legend-spend { background: var(--blue); }.legend-revenue { background: var(--green); }
.chart-wrap { width: 100%; height: 280px; overflow: hidden; }.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }.chart-empty { height: 100%; display: grid; place-items: center; color: #647188; }
.grid-line { stroke: rgba(148,163,184,.10); stroke-width: 1; }.axis-label { fill: #56637a; font-size: 10px; }.line-spend { fill: none; stroke: var(--blue); stroke-width: 2.4; }.line-revenue { fill: none; stroke: var(--green); stroke-width: 2.4; }.area-spend { fill: url(#spendGradient); }.data-point { stroke: #0e1625; stroke-width: 2; }.chart-hit { fill: transparent; cursor: crosshair; }.chart-tooltip { position: fixed; z-index: 100; pointer-events: none; min-width: 145px; padding: 10px 12px; background: #1a2437; border: 1px solid rgba(148,163,184,.22); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.4); font-size: 11px; }.chart-tooltip strong { display: block; margin-bottom: 5px; color: white; }.chart-tooltip span { display: block; color: #9aa6b9; }
.efficiency-panel { display: flex; flex-direction: column; }
.gauge-wrap { flex: 1; display: grid; place-items: center; min-height: 170px; }
.gauge { --gauge: 0deg; width: 155px; height: 155px; padding: 11px; border-radius: 50%; background: conic-gradient(var(--blue) var(--gauge), #263146 var(--gauge)); position: relative; transition: .5s; }
.gauge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 10%, rgba(255,255,255,.14), transparent 35%); }
.gauge-inner { width: 100%; height: 100%; display: grid; align-content: center; place-items: center; background: #111a2a; border-radius: 50%; position: relative; z-index: 1; }
.gauge-inner strong { font-size: 30px; letter-spacing: -1px; }.gauge-inner span { color: #657188; font-size: 10px; letter-spacing: 1px; font-weight: 800; }
.efficiency-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 15px; }.efficiency-stats div { text-align: center; border-right: 1px solid var(--line); }.efficiency-stats div:last-child { border: 0; }.efficiency-stats span { display: block; color: #68758b; font-size: 10px; }.efficiency-stats strong { display: block; margin-top: 3px; font-size: 13px; }

.segmentation-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); margin-top: 13px; }
.info-chip { padding: 5px 8px; color: #718097; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 10px 12px; color: #657188; font-size: 9px; text-align: right; text-transform: uppercase; letter-spacing: .7px; border-bottom: 1px solid var(--line); }
td { padding: 13px 12px; color: #c7d0df; font-size: 12px; text-align: right; border-bottom: 1px solid rgba(148,163,184,.08); }
th:first-child, td:first-child { text-align: left; }.empty-cell { text-align: center !important; color: #66738a; padding: 30px !important; }
.stage-cell { display: flex; align-items: center; gap: 9px; font-weight: 700; }.stage-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--stage-color); box-shadow: 0 0 12px color-mix(in srgb, var(--stage-color) 40%, transparent); }
.roas-badge { display: inline-flex; min-width: 43px; justify-content: center; padding: 4px 7px; color: #82eab5; background: rgba(72,213,151,.08); border-radius: 7px; font-weight: 750; }.roas-badge.low { color: #ff9aa4; background: rgba(255,100,116,.08); }
.creative-list { display: grid; gap: 13px; }.creative-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(100px, 1.35fr) auto; align-items: center; gap: 14px; }.creative-label strong { display: block; font-size: 12px; }.creative-label span { color: #637087; font-size: 10px; }.creative-track { height: 7px; overflow: hidden; border-radius: 99px; background: #273146; }.creative-track i { display: block; width: var(--width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #8b5cf6); }.creative-metric { text-align: right; }.creative-metric strong { display: block; font-size: 12px; }.creative-metric span { color: #637087; font-size: 9px; }
.creative-performance-panel { padding-right: 12px; }.creative-table { min-width: 760px; }.creative-table th, .creative-table td { padding-left: 8px; padding-right: 8px; }.creative-table td:first-child { font-weight: 700; }.spend-share { color: #8fa0b7; }
.creative-total-row td { color: #f2f6fc; font-weight: 750; background: rgba(72,149,255,.06); border-top: 1px solid rgba(72,149,255,.22); }

.campaign-panel { margin-top: 13px; padding-bottom: 8px; }.campaign-head { margin-bottom: 8px; }.table-tools { display: flex; align-items: center; gap: 10px; }.compact-select { color: #6d7990; font-size: 10px; }.compact-select select { margin-left: 5px; padding: 6px 9px; color: #c1ccda; background: #111927; border: 1px solid var(--line); border-radius: 8px; }.campaign-table-wrap { max-height: 460px; }.campaign-table thead { position: sticky; top: 0; background: #151e30; z-index: 2; }.campaign-table td:first-child { max-width: 360px; white-space: normal; }.campaign-name { color: #e4eaf3; font-weight: 650; }.campaign-sub { display: block; margin-top: 3px; color: #59667c; font-size: 9px; }.dashboard-footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 4px 0; color: #526078; font-size: 10px; }
.monthly-panel { margin-top: 13px; padding: 20px 12px 12px; }.monthly-head { padding: 0 8px; }.monthly-tools { display: flex; align-items: center; gap: 12px; }.monthly-tools .secondary-button { height: 34px; padding: 0 13px; font-size: 11px; }.monthly-meta { display: grid; justify-items: end; color: #68758b; font-size: 9px; }.monthly-meta strong { margin-top: 3px; color: #b8c4d5; font-size: 11px; }.monthly-table-wrap { max-height: 520px; border: 1px solid rgba(148,163,184,.09); border-radius: 11px; }.monthly-table { min-width: 2380px; }.monthly-table thead { position: sticky; top: 0; z-index: 4; background: #172236; }.monthly-table th, .monthly-table td { padding: 11px 10px; border-right: 1px solid rgba(148,163,184,.07); }.monthly-table th:first-child, .monthly-table td:first-child { position: sticky; left: 0; z-index: 3; min-width: 105px; background: #172236; box-shadow: 8px 0 14px rgba(5,9,16,.16); }.monthly-table td:first-child { color: #eef3fa; font-weight: 750; background: #131e30; }.monthly-table tbody tr:hover td { background-color: rgba(72,149,255,.045); }.monthly-table tbody tr:hover td:first-child { background-color: #19263b; }.metric-good { color: #8ee5b8 !important; background: rgba(72,213,151,.09); }.metric-warn { color: #ffc2c8 !important; background: rgba(255,100,116,.09); }.change-positive { color: #63dca0; }.change-negative { color: #ff8490; }.monthly-formulas { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 8px 0; color: #637087; font-size: 9px; }.monthly-formulas strong { margin-right: 4px; color: #9eacc0; }

.pivot-panel { margin-top: 13px; padding: 0; overflow: hidden; }
.pivot-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; background: linear-gradient(115deg, rgba(36,111,216,.55), rgba(107,92,231,.34) 62%, rgba(72,149,255,.12)); border-bottom: 1px solid var(--line); }
.pivot-brand { display: flex; align-items: center; gap: 12px; }
.pivot-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #1d6fff, #7b55ee); box-shadow: 0 8px 22px rgba(72,149,255,.28); }
.pivot-icon svg { width: 20px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.pivot-head h2 { color: #f4f7fb; font-size: 18px; font-weight: 680; letter-spacing: -.4px; }
.pivot-dimension { color: #9fb4d4; }
.pivot-wrap { max-height: 520px; overflow: auto; background: #101a2a; }
.pivot-table { width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.pivot-table th, .pivot-table td { background: #101a2a; border-bottom: 1px solid rgba(148,163,184,.09); }
/* line-height carries the whole row box and every rule is drawn as an inset shadow,
   so each header row is exactly 30px and the stacked sticky offsets cannot drift
   apart and let a scrolled row show through the gap. */
.pivot-table thead th { position: sticky; z-index: 3; height: 30px; padding: 0 14px; line-height: 30px; border: 0; background: #172236; color: #8fa0ba; font-size: 10px; font-weight: 650; text-align: right; text-transform: none; letter-spacing: .2px; }
.pivot-dim-row th { top: 0; color: #5f6d84; }
.pivot-group-row th { top: 30px; }
.pivot-metric-row th { top: 60px; color: #657188; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; box-shadow: inset 0 -1px 0 var(--line); }
.pivot-metric-row th.pivot-sep { box-shadow: inset 0 -1px 0 var(--line), inset 1px 0 0 rgba(148,163,184,.12); }
.pivot-table thead th.pivot-group { color: #dbe4f1; font-size: 11px; font-weight: 700; text-align: center; box-shadow: inset 0 1px 0 rgba(72,149,255,.32); }
/* One accent per segment group, so the seven repeating metric columns under each
   heading stay visually separable across a wide table. */
.pivot-table thead th.seg-0 { color: #8fc0ff; box-shadow: inset 0 2px 0 var(--blue); }
.pivot-table thead th.seg-1 { color: #d3b4ff; box-shadow: inset 0 2px 0 var(--purple); }
.pivot-table thead th.seg-2 { color: #8ee5b8; box-shadow: inset 0 2px 0 var(--green); }
.pivot-table thead th.seg-3 { color: #f7c76b; box-shadow: inset 0 2px 0 var(--amber); }
.pivot-table thead th.seg-4 { color: #7fe3e3; box-shadow: inset 0 2px 0 var(--cyan); }
.pivot-table thead th.seg-5 { color: #ff9aa4; box-shadow: inset 0 2px 0 var(--red); }
.pivot-table thead th.pivot-corner { top: 0; left: 0; z-index: 5; color: #8fa0ba; text-align: left; vertical-align: bottom; box-shadow: 8px 0 14px rgba(5,9,16,.16), inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.pivot-corner span { display: block; max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
.pivot-table tbody td { padding: 10px 14px; color: #c7d0df; font-size: 12px; text-align: right; }
.pivot-table tbody td.pivot-date, .pivot-table tfoot td.pivot-date { position: sticky; left: 0; z-index: 2; min-width: 128px; color: #eef3fa; font-weight: 700; text-align: left; background: #131e30; box-shadow: 8px 0 14px rgba(5,9,16,.16), inset -1px 0 0 var(--line); }
.pivot-sep { box-shadow: inset 1px 0 0 rgba(148,163,184,.12); }
.pivot-blank { color: #4b586e; }
.pivot-table tbody tr:hover td { background-color: rgba(72,149,255,.045); }
.pivot-table tbody tr:hover td.pivot-date { background-color: #19263b; }
.pivot-overview td { position: sticky; bottom: 0; z-index: 4; padding: 11px 14px; color: #f2f6fc; font-size: 12px; font-weight: 750; text-align: right; background: #16233a; border-top: 1px solid rgba(72,149,255,.28); border-bottom: 0; }
.pivot-overview td.pivot-date { z-index: 5; background: #16233a; }
.pivot-table .empty-cell { color: #66738a; }

/* ROAS reads as a scale rather than a number: green where the return is strong,
   through teal and amber, to red once a day is not returning its spend. The tier
   only carries the two colours; the table cell and the legend chip each decide how
   to wear them, so both stay in step from one definition. */
.roas-t6 { --roas-ink: #6ff0b4; --roas-fill: rgba(72,213,151,.16); }
.roas-t5 { --roas-ink: #8ee5b8; --roas-fill: rgba(72,213,151,.10); }
.roas-t4 { --roas-ink: #63dede; --roas-fill: rgba(35,213,213,.10); }
.roas-t3 { --roas-ink: #f7c76b; --roas-fill: rgba(247,184,75,.11); }
.roas-t2 { --roas-ink: #ffab73; --roas-fill: rgba(255,145,70,.13); }
.roas-t1 { --roas-ink: #ff8a95; --roas-fill: rgba(255,100,116,.13); }
/* Fill as an inset shadow, not a background, so the row hover highlight still reads
   through it instead of being overridden by it. */
.pivot-table td[class*="roas-t"] { color: var(--roas-ink); box-shadow: inset 0 0 0 100px var(--roas-fill); }
.pivot-table tbody td[class*="roas-t"] { font-weight: 700; }
.pivot-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 18px; color: #637087; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.pivot-legend i { padding: 4px 10px; border-radius: 999px; color: var(--roas-ink); background: var(--roas-fill); font-style: normal; font-weight: 750; letter-spacing: 0; }

dialog { width: min(480px, calc(100% - 28px)); padding: 0; color: var(--text); background: transparent; border: 0; }.settings-card { padding: 24px; background: #121b2b; border: 1px solid rgba(148,163,184,.2); border-radius: 18px; box-shadow: 0 28px 80px rgba(0,0,0,.6); }dialog::backdrop { background: rgba(1,4,10,.72); backdrop-filter: blur(5px); }.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; }.close-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; color: #9da9bb; background: transparent; font-size: 20px; }.dialog-copy { margin: 18px 0; color: #8290a5; font-size: 12px; }.dialog-field { display: block; margin-bottom: 16px; }.settings-info { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--line); color: #748197; font-size: 11px; }.settings-info strong { color: #c3cedd; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.loading-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; color: white; background: rgba(5,9,16,.84); backdrop-filter: blur(8px); transition: opacity .25s, visibility .25s; }.loading-overlay.done { opacity: 0; visibility: hidden; }.loading-overlay strong { margin-top: 20px; font-size: 16px; }.loading-overlay p { margin: 5px 0; color: #758298; font-size: 12px; }.loader-logo { display: flex; gap: 5px; align-items: end; height: 38px; }.loader-logo span { width: 7px; height: 18px; border-radius: 5px; background: var(--blue); animation: pulse 1s ease-in-out infinite; }.loader-logo span:nth-child(2) { height: 34px; background: var(--purple); animation-delay: .13s; }.loader-logo span:nth-child(3) { height: 25px; background: var(--green); animation-delay: .26s; }
.skeleton { color: transparent; width: 65%; border-radius: 7px; background: linear-gradient(90deg, #1e2a3d 25%, #2a3850 50%, #1e2a3d 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }.skeleton-block { background: linear-gradient(90deg, rgba(30,42,61,.35) 25%, rgba(42,56,80,.35) 50%, rgba(30,42,61,.35) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }@keyframes spin { to { transform: rotate(360deg); } }@keyframes pulse { 0%,100% { transform: scaleY(.55); opacity: .5; }50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 1300px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); }.filter-bar { grid-template-columns: repeat(3, 1fr); }.primary-button { width: 100%; }.search-control { grid-column: span 2; } }
@media (max-width: 980px) { .app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; left: -250px; width: 236px; transition: left .25s; box-shadow: 20px 0 50px rgba(0,0,0,.4); }.sidebar.open { left: 0; }.main-content { padding: 0 20px 26px; }.mobile-menu { display: grid; }.topbar > div:nth-child(2) { margin-right: auto; }.content-grid, .segmentation-grid, .source-grid { grid-template-columns: 1fr; }.efficiency-panel { min-height: 340px; }.date-picker-popover { width: min(660px, calc(100vw - 40px)); } }
@media (max-width: 720px) { .main-content { padding: 0 13px 24px; }.topbar { min-height: 78px; }.topbar .eyebrow, .live-pill, .account-avatar { display: none; }h1 { font-size: 18px; }.filter-bar { grid-template-columns: 1fr 1fr; }.account-control, .date-control, .search-control { grid-column: span 2; }.kpi-grid { grid-template-columns: 1fr 1fr; }.kpi-card:last-child { grid-column: span 2; }.chart-wrap { height: 230px; }.panel { padding: 16px; }.campaign-head { align-items: flex-start; flex-direction: column; }.dashboard-footer { flex-direction: column; }.date-picker-popover { position: fixed; inset: 80px 12px auto; width: auto; min-width: 0; max-height: calc(100vh - 95px); grid-template-columns: 145px minmax(0,1fr); }.date-preset-list { max-height: calc(100vh - 95px); }.date-custom-panel { padding: 16px; } }
@media (max-width: 440px) { .kpi-grid { grid-template-columns: 1fr; }.kpi-card:last-child { grid-column: auto; }.filter-bar { grid-template-columns: 1fr; }.account-control, .date-control, .search-control { grid-column: auto; }.date-picker-popover { grid-template-columns: 1fr; overflow-y: auto; }.date-preset-list { max-height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }.date-pair.expanded { grid-template-columns: 1fr; }.date-pair.expanded > i { display: none; }.topbar-actions { gap: 6px; }.table-tools { width: 100%; justify-content: space-between; } }

/* ========================================================================== */
/* 2026 soft-workspace redesign                                               */
/* ========================================================================== */
:root {
    --bg: #eef1ed;
    --sidebar: rgba(248, 249, 246, .86);
    --panel: rgba(255, 255, 255, .76);
    --panel-2: rgba(251, 252, 249, .92);
    --line: rgba(31, 45, 40, .09);
    --line-strong: rgba(31, 45, 40, .14);
    --text: #1d2a26;
    --muted: #7a8580;
    --blue: #416f65;
    --cyan: #73a99d;
    --purple: #8979a4;
    --green: #5a8f72;
    --amber: #d39a54;
    --red: #c96c68;
    --sage: #dfe9e3;
    --cream: #faf7ef;
    --radius: 22px;
    --shadow: 0 15px 35px rgba(52, 68, 60, .07), 0 2px 8px rgba(52, 68, 60, .04);
}

body {
    color: var(--text);
    background:
        radial-gradient(circle at 79% -5%, rgba(203, 222, 212, .7), transparent 28rem),
        radial-gradient(circle at 43% 106%, rgba(232, 218, 193, .45), transparent 32rem),
        #eef1ed;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}
body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .38;
    background-image: linear-gradient(rgba(65, 111, 101, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 111, 101, .025) 1px, transparent 1px);
    background-size: 28px 28px;
}
.ambient { opacity: .2; filter: blur(115px); }
.ambient-one { background: #b5d3c4; }
.ambient-two { background: #e8cda9; }
.app-shell { grid-template-columns: 252px minmax(0, 1fr); gap: 0; }

.sidebar {
    padding: 24px 17px 18px; gap: 22px; background: var(--sidebar);
    border-right: 1px solid rgba(255,255,255,.75); box-shadow: 10px 0 40px rgba(52,68,60,.04);
    backdrop-filter: blur(26px) saturate(130%); -webkit-backdrop-filter: blur(26px) saturate(130%);
}
.brand { min-height: 48px; padding: 0 10px; color: #20302a; font-size: 19px; }
.brand span:last-child { letter-spacing: -.7px; }
.brand-mark {
    width: 40px; height: 40px; border-radius: 14px; background: #315d53;
    box-shadow: 0 9px 20px rgba(49,93,83,.2), inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-mark svg { width: 27px; }
/* The list scrolls on its own so a long sidebar never pushes the connection
   status card off a short viewport; the spacer below it keeps the card pinned. */
.nav-list { display: block; gap: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.nav-group { display: grid; gap: 2px; }
.nav-group + .nav-group { margin-top: 9px; }
.nav-group-title {
    margin: 0 13px 4px; color: #a0a9a4; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
}
/* 36px rather than the old 42px: the group headings cost about two rows of
   height, and all eleven links still have to clear the status card and the
   pinned utility links on a 900px-tall screen. */
.nav-item { min-height: 36px; gap: 11px; padding: 0 12px; color: #73807a; border-radius: 12px; font-size: 12px; font-weight: 650; }
.nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: #798981; font-size: 16px; }
/* The global account switcher. It sits in the top bar rather than in the filter
   bar because it is not a filter: it decides which account every screen is
   about, so it outranks the controls that narrow one report. */
.account-switcher {
    display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 13px 7px 11px;
    background: rgba(255,255,255,.82); border: 1px solid rgba(31,45,40,.09); border-radius: 14px;
    box-shadow: 0 6px 18px rgba(52,68,60,.05);
}
.account-switcher[hidden] { display: none; }
.account-switcher-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--brand-deep, #315d53); }
.account-switcher-icon svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.account-switcher-body { display: grid; min-width: 0; }
.account-switcher-label { color: #97a29c; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.account-switcher select {
    max-width: 260px; padding: 0; color: #22332d; background: transparent; border: 0;
    font: inherit; font-size: 13px; font-weight: 680; letter-spacing: -.2px; cursor: pointer;
}
.account-switcher select:focus-visible { outline: 2px solid var(--brand, #e66624); outline-offset: 3px; border-radius: 5px; }
@media (max-width: 760px) {
    .account-switcher select { max-width: 150px; }
    .account-switcher-label { display: none; }
}

/* Pinned below the status card: settings destinations, not reports, and the one
   part of the sidebar a short viewport must never scroll away. */
.nav-utility { display: grid; gap: 2px; flex: none; padding-top: 4px; border-top: 1px solid rgba(31,45,40,.07); }
/* Who is signed in, pinned to the very bottom of the sidebar on every page —
   which is why it is here rather than in auth.css, a file only the login screen
   loads. */
.nav-account {
    display: flex; align-items: center; gap: 9px; flex: none; margin-top: 8px;
    padding: 8px 9px; border-radius: 12px; background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(31, 45, 40, .07);
}
.nav-account-avatar {
    flex: none; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px;
    color: #fff; font-size: 11px; font-weight: 750; letter-spacing: -.2px; line-height: 1;
    background: linear-gradient(145deg, var(--brand-deep, #315d53), var(--brand, #e66624));
}
/* min-width:0 is what lets a long name ellipsis instead of pushing the sign-out
   button off the edge of the sidebar. */
.nav-account-body { display: grid; min-width: 0; flex: 1 1 auto; gap: 1px; }
.nav-account-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #24332d; font-size: 12px; font-weight: 680;
}
.nav-account-role { color: #97a29c; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.nav-account form { display: flex; flex: none; }
.nav-signout {
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    color: #7d8a83; background: transparent; border: 0; border-radius: 9px; cursor: pointer;
}
.nav-signout:hover { color: #8c3a22; background: rgba(230, 102, 36, .1); }
.nav-signout svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* The only link off a destination page, so it reads as an action rather than as
   one more row in a list it is not part of. */
.nav-exit {
    margin-bottom: 16px; color: #5f6d66; background: rgba(255,255,255,.66);
    border-color: rgba(31,45,40,.09); box-shadow: 0 3px 10px rgba(52,68,60,.04);
}
.nav-exit .nav-icon { color: #7d8a83; }
/* One weight for every icon, so no row reads as louder than its neighbours. */
.nav-icon svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.nav-item:hover { color: #28443b; background: rgba(255,255,255,.72); }
.nav-item.active {
    color: #24483e; background: rgba(218,232,224,.9); border-color: rgba(65,111,101,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 5px 14px rgba(55,86,73,.07);
}
.nav-item.active .nav-icon { color: #315f54; }
.api-status-card {
    padding: 15px; color: #294239; background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.9);
    box-shadow: inset 0 0 0 1px rgba(31,45,40,.04), 0 10px 25px rgba(52,68,60,.05); border-radius: 17px;
}
.status-copy { color: #64736c; }
.status-meta { color: #9aa39f; }
.status-dot.online { background: #5b9b78; }
.status-dot.cached { background: #d39a54; box-shadow: 0 0 0 4px rgba(211,154,84,.12), 0 0 16px rgba(211,154,84,.25); }

.main-content { padding: 0 30px 36px; }
.topbar { min-height: 104px; border-bottom: 0; }
.eyebrow { color: #8d9993; font-size: 9px; letter-spacing: 1.7px; }
h1 { color: #17231f; font-size: clamp(23px, 2vw, 30px); font-weight: 740; letter-spacing: -1.1px; }
h2 { color: #21322c; font-size: 17px; font-weight: 720; letter-spacing: -.55px; }
.live-pill { color: #3d705d; background: rgba(237,247,241,.84); border-color: rgba(75,130,105,.14); box-shadow: 0 5px 15px rgba(52,68,60,.04); }
.live-pill span { background: #5b9b78; }
.icon-button, .mobile-menu {
    width: 42px; height: 42px; color: #52635c; background: rgba(255,255,255,.7); border-color: rgba(255,255,255,.9);
    box-shadow: inset 0 0 0 1px rgba(31,45,40,.06), 0 7px 16px rgba(52,68,60,.06); border-radius: 14px;
}
.account-avatar { width: 42px; height: 42px; color: #f8fbf9; background: #315d53; border-radius: 14px; box-shadow: 0 9px 20px rgba(49,93,83,.18); }

.filter-bar {
    grid-template-columns: minmax(155px, 1fr) minmax(260px, 1.4fr) minmax(145px, .78fr) minmax(145px, .78fr) minmax(170px, 1fr) auto;
    gap: 10px; margin-bottom: 8px; padding: 15px; background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.8);
    border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(31,45,40,.045), 0 10px 30px rgba(52,68,60,.04);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 40; overflow: visible;
}
.filter-bar:has(.date-range-button[aria-expanded="true"]) { z-index: 75; }
.filter-control > span, .dialog-field > span { margin-left: 2px; color: #909b96; font-size: 9px; letter-spacing: .9px; }
.filter-control select, .filter-control input, .dialog-field select, .date-range-button {
    height: 43px; color: #2f4039; background: rgba(247,248,245,.92); border-color: rgba(31,45,40,.09); border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(31,45,40,.025);
}
.filter-control input::placeholder { color: #a8b0ac; }
.filter-control select:focus, .filter-control input:focus, .dialog-field select:focus { border-color: rgba(65,111,101,.4); box-shadow: 0 0 0 3px rgba(65,111,101,.08); }
select { color-scheme: light; }
.date-range-button { color: #2f4039; }
.date-range-button:hover, .date-range-button[aria-expanded="true"] { border-color: rgba(65,111,101,.32); background: #fff; }
.date-range-button svg { stroke: #527c71; }
.date-range-button small, .date-range-button > i { color: #929d97; }
.primary-button, .secondary-button { height: 43px; border-radius: 12px; }
.primary-button { color: #fff; background: #315d53; border-color: #315d53; box-shadow: 0 8px 18px rgba(49,93,83,.17); }
.primary-button:hover { background: #284f46; filter: none; }
.secondary-button { color: #506059; background: rgba(255,255,255,.72); border-color: rgba(31,45,40,.1); }
.secondary-button:hover { background: #fff; border-color: rgba(65,111,101,.2); }
.notice { color: #9b4d49; background: rgba(255,240,238,.85); border-color: rgba(201,108,104,.18); }
.notice.info { color: #3e665c; background: rgba(231,241,235,.9); border-color: rgba(65,111,101,.14); }

.date-picker-popover {
    color: #31433c; background: rgba(250,251,248,.98); border-color: rgba(31,45,40,.11);
    box-shadow: 0 28px 70px rgba(52,68,60,.22), inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%);
    z-index: 100;
}
.date-preset-list { background: #f1f4f0; border-color: rgba(31,45,40,.08); }
.date-preset-list p, .date-pair.expanded label > span { color: #909b96; }
.date-preset-list button { color: #64736d; }
.date-preset-list button:hover { color: #25463c; background: rgba(255,255,255,.75); }
.date-preset-list button.active { color: #23473d; background: #dce9e2; }
.date-preset-list button.active i { border-color: #eff4f0; background: #416f65; box-shadow: 0 0 0 1px #416f65; }
.date-panel-head > span { color: #79867f; border-color: var(--line); }
.date-pair.expanded input { color: #30423a; background: #f5f7f4; border-color: var(--line); color-scheme: light; }
.date-preview { color: #73807a; background: #edf4f0; border-color: rgba(65,111,101,.1); }
.date-preview strong { color: #315d53; }
.timezone-note { color: #89948f; }

.kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 14px 0 12px; position: relative; z-index: 2; }
.kpi-card {
    min-height: 166px; padding: 19px; border-color: rgba(255,255,255,.82); border-radius: 21px;
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(248,251,248,.74));
    box-shadow: inset 0 0 0 1px rgba(31,45,40,.065), 0 16px 34px rgba(52,68,60,.09), 0 2px 7px rgba(52,68,60,.04);
    backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%);
}
.kpi-card::before { left: 19px; right: auto; top: 17px; width: 31px; height: 4px; border-radius: 99px; }
.kpi-card::after { width: 120px; height: 120px; top: auto; right: -55px; bottom: -65px; opacity: .08; filter: blur(25px); }
.kpi-label { color: #7f8b85; font-size: 11px; }
.metric-icon { width: 30px; height: 30px; margin-right: 2px; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, white); border-radius: 10px; }
.kpi-value { margin-top: 17px; color: #1d2a26; font-size: clamp(25px, 2vw, 32px); font-weight: 760; letter-spacing: -1.4px; }
.kpi-foot { left: 19px; right: 19px; bottom: 16px; color: #929c97; }
.source-tag { background: color-mix(in srgb, var(--accent) 7%, white); border-color: color-mix(in srgb, var(--accent) 16%, white); }
.mini-meter { background: #e5eae6; }
.app-shell .kpi-card:hover { border-color: rgba(65,111,101,.18); box-shadow: 0 20px 38px rgba(52,68,60,.1); }

.content-grid { grid-template-columns: minmax(0, 1.7fr) minmax(275px, .65fr); gap: 12px; position: relative; z-index: 1; }
.panel {
    padding: 21px; position: relative; isolation: isolate;
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(247,250,247,.72));
    border-color: rgba(255,255,255,.9); border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(31,45,40,.065), 0 16px 38px rgba(52,68,60,.075), 0 2px 7px rgba(52,68,60,.035);
    backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%);
}
.panel::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 38%);
}
.panel-head { margin-bottom: 19px; }
.legend { color: #87928d; }
.legend-spend { background: #416f65; }
.legend-revenue { background: #d39a54; }
.chart-wrap { height: 290px; position: relative; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }
.chart-empty { color: #98a19d; }
.chart-fallback { height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(42px, 1fr); align-items: end; gap: 8px; padding: 12px 8px 2px 46px; overflow-x: auto; border-bottom: 1px solid rgba(31,45,40,.08); }
.fallback-day { height: 100%; min-width: 38px; display: grid; grid-template-rows: minmax(0,1fr) 24px; gap: 7px; align-items: end; }
.fallback-bars { height: 100%; display: flex; align-items: end; justify-content: center; gap: 4px; }
.fallback-bars i { width: min(14px, 38%); height: var(--bar); min-height: 3px; border-radius: 6px 6px 2px 2px; }
.fallback-spend { background: linear-gradient(180deg, #416f65, #6f9a8f); }
.fallback-revenue { background: linear-gradient(180deg, #d39a54, #e2bd88); }
.fallback-day > span { color: #8c9792; font-size: 9px; font-weight: 650; text-align: center; white-space: nowrap; }
.efficiency-panel { background: linear-gradient(155deg, rgba(255,255,255,.8), rgba(239,244,240,.78)); }
.gauge { width: 160px; height: 160px; padding: 10px; background: conic-gradient(#416f65 var(--gauge), #e3e9e5 var(--gauge)); box-shadow: 0 12px 30px rgba(65,111,101,.12); }
.gauge::after { background: radial-gradient(circle at 30% 10%, rgba(255,255,255,.55), transparent 35%); }
.gauge-inner { color: #1d2a26; background: #f8faf7; box-shadow: inset 0 0 0 1px rgba(31,45,40,.04); }
.gauge-inner span { color: #929c97; }
.efficiency-stats { border-color: var(--line); }
.efficiency-stats div { border-color: var(--line); }
.efficiency-stats span { color: #919b96; }
.efficiency-stats strong { color: #2d4038; }

.segmentation-grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); margin-top: 12px; }
.info-chip { color: #73817a; background: #f1f5f2; border-color: rgba(31,45,40,.07); }
.table-wrap { border-radius: 14px; }
th { color: #8a9590; border-color: var(--line); }
td { color: #43534c; border-color: rgba(31,45,40,.065); }
tbody tr:hover td { background-color: rgba(223,233,227,.34); }
.empty-cell { color: #98a29d; }
.stage-dot { box-shadow: none; }
.roas-badge { color: #43785c; background: #e8f3ec; }
.roas-badge.low { color: #aa5c58; background: #faecea; }
.creative-track { background: #e5ebe7; }
.creative-track i { background: linear-gradient(90deg, #416f65, #8db1a7); }
.creative-label span, .spend-share { color: #8c9792; }
.creative-total-row td { color: #293d35; background: #edf4f0; border-color: rgba(65,111,101,.14); }

.campaign-panel, .monthly-panel, .pivot-panel { margin-top: 12px; }
.compact-select { color: #87928d; }
.compact-select select { color: #405149; background: #f4f6f3; border-color: rgba(31,45,40,.08); color-scheme: light; }
.campaign-table thead, .monthly-table thead { background: #f1f4f0; }
.campaign-name { color: #253830; }
.campaign-sub { color: #98a19d; }
.dashboard-footer { color: #909b96; }
.monthly-meta { color: #939d98; }
.monthly-meta strong { color: #53635c; }
.monthly-table-wrap { border-color: rgba(31,45,40,.07); }
.monthly-table th, .monthly-table td { border-color: rgba(31,45,40,.055); }
.monthly-table th:first-child, .monthly-table td:first-child { background: #f0f3ef; box-shadow: 8px 0 14px rgba(52,68,60,.035); }
.monthly-table td:first-child { color: #2b3f36; background: #f8faf7; }
.monthly-table tbody tr:hover td { background-color: #f2f6f3; }
.monthly-table tbody tr:hover td:first-child { background-color: #edf3ef; }
.metric-good { color: #3e7959 !important; background: #eaf4ed; }
.metric-warn { color: #ad5c58 !important; background: #faecea; }
.change-positive { color: #4e8767; }
.change-negative { color: #bd6460; }
.monthly-formulas { color: #8c9792; }
.monthly-formulas strong { color: #53665d; }

.pivot-panel { overflow: hidden; }
.pivot-head {
    padding: 15px 19px; background: linear-gradient(110deg, #355f55, #527b70 60%, #71958a); border-color: rgba(31,45,40,.08);
}
.pivot-icon { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.pivot-head h2 { color: #fff; }
.pivot-dimension { color: rgba(255,255,255,.72); }
.pivot-head .compact-select select { color: #30473e; background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.25); }
.pivot-wrap { background: #fbfcfa; }
.pivot-table th, .pivot-table td { background: #fbfcfa; border-color: rgba(31,45,40,.065); }
.pivot-table thead th { color: #75827b; background: #edf2ee; }
.pivot-dim-row th { color: #8b9691; }
.pivot-metric-row th { color: #8a9590; box-shadow: inset 0 -1px 0 var(--line); }
.pivot-metric-row th.pivot-sep { box-shadow: inset 0 -1px 0 var(--line), inset 1px 0 0 rgba(31,45,40,.08); }
.pivot-table thead th.pivot-group { color: #344c42; box-shadow: inset 0 1px 0 rgba(65,111,101,.18); }
.pivot-table thead th.seg-0 { color: #416f65; box-shadow: inset 0 2px 0 #416f65; }
.pivot-table thead th.seg-1 { color: #79678e; box-shadow: inset 0 2px 0 #8979a4; }
.pivot-table thead th.seg-2 { color: #4d7e65; box-shadow: inset 0 2px 0 #5a8f72; }
.pivot-table thead th.seg-3 { color: #a87335; box-shadow: inset 0 2px 0 #d39a54; }
.pivot-table thead th.seg-4 { color: #528c80; box-shadow: inset 0 2px 0 #73a99d; }
.pivot-table thead th.seg-5 { color: #a95855; box-shadow: inset 0 2px 0 #c96c68; }
.pivot-table thead th.pivot-corner { color: #65766e; box-shadow: 8px 0 14px rgba(52,68,60,.04), inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.pivot-table tbody td { color: #46564f; }
.pivot-table tbody td.pivot-date, .pivot-table tfoot td.pivot-date { color: #293c34; background: #f5f8f5; box-shadow: 8px 0 14px rgba(52,68,60,.04), inset -1px 0 0 var(--line); }
.pivot-sep { box-shadow: inset 1px 0 0 rgba(31,45,40,.07); }
.pivot-blank { color: #b5bdb9; }
.pivot-table tbody tr:hover td { background-color: #f0f5f1; }
.pivot-table tbody tr:hover td.pivot-date { background-color: #eaf1ec; }
.pivot-overview td { color: #2d443a; background: #e7f0ea; border-color: rgba(65,111,101,.18); }
.pivot-overview td.pivot-date { background: #e4eee8; }
.pivot-legend { color: #88938e; }
.roas-t6 { --roas-ink: #2f7552; --roas-fill: rgba(90,143,114,.17); }
.roas-t5 { --roas-ink: #4c8065; --roas-fill: rgba(90,143,114,.11); }
.roas-t4 { --roas-ink: #4f8b7e; --roas-fill: rgba(115,169,157,.13); }
.roas-t3 { --roas-ink: #9a6b32; --roas-fill: rgba(211,154,84,.14); }
.roas-t2 { --roas-ink: #aa6940; --roas-fill: rgba(214,137,88,.14); }
.roas-t1 { --roas-ink: #aa5754; --roas-fill: rgba(201,108,104,.14); }

dialog { color: var(--text); }
.settings-card { background: rgba(250,251,248,.98); border-color: rgba(31,45,40,.1); box-shadow: 0 28px 80px rgba(52,68,60,.24); }
dialog::backdrop { background: rgba(35,45,41,.34); backdrop-filter: blur(7px); }
.close-button { color: #6e7b75; border-color: var(--line); }
.dialog-copy { color: #74817a; }
.settings-info { color: #86918c; border-color: var(--line); }
.settings-info strong { color: #394c43; }
.loading-overlay { color: #20322a; background: rgba(239,242,238,.9); backdrop-filter: blur(12px); }
.loading-overlay p { color: #84908a; }
.loader-logo span { background: #416f65; }
.loader-logo span:nth-child(2) { background: #89aa9f; }
.loader-logo span:nth-child(3) { background: #d39a54; }
.skeleton { background: linear-gradient(90deg, #e7ebe8 25%, #f5f7f5 50%, #e7ebe8 75%); background-size: 200% 100%; }
.skeleton-block { background: linear-gradient(90deg, rgba(229,234,230,.6) 25%, rgba(247,249,247,.7) 50%, rgba(229,234,230,.6) 75%); background-size: 200% 100%; }

* { scrollbar-color: #bdc8c2 #edf1ee; }
::-webkit-scrollbar-track { background: #edf1ee; }
::-webkit-scrollbar-thumb { background: #bdc8c2; border-color: #edf1ee; }
::-webkit-scrollbar-thumb:hover { background: #9eada6; }

@media (max-width: 1300px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .filter-bar { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { left: -270px; width: 252px; box-shadow: 18px 0 50px rgba(52,68,60,.16); }
    .main-content { padding: 0 20px 28px; }
    .content-grid, .segmentation-grid { grid-template-columns: 1fr; }
    .date-picker-popover { left: auto; right: 0; width: min(660px, calc(100vw - 40px)); min-width: min(570px, calc(100vw - 40px)); }
}
@media (max-width: 720px) {
    .main-content { padding: 0 13px 24px; }
    .topbar { min-height: 82px; }
    .filter-bar { grid-template-columns: 1fr 1fr; padding: 13px; border-radius: 18px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .kpi-card { min-height: 154px; }
    .panel { padding: 17px; }
    .chart-wrap { height: 240px; }
    .monthly-head, .pivot-head { align-items: flex-start; }
    .monthly-tools { align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; }
    .date-picker-popover { left: 12px; right: 12px; min-width: 0; }
}
@media (max-width: 480px) {
    .topbar-actions { gap: 7px; }
    .topbar .icon-button { width: 39px; height: 39px; }
    .filter-bar, .kpi-grid { grid-template-columns: 1fr; }
    .account-control, .date-control, .search-control, .kpi-card:last-child { grid-column: auto; }
    .kpi-card { min-height: 146px; }
    .panel-head { align-items: flex-start; }
    .legend { flex-direction: column; gap: 4px; }
    .monthly-tools { width: 100%; justify-content: flex-start; }
    .monthly-meta { justify-items: start; }
    .pivot-head { flex-direction: column; }
}

/* Dashboard commerce strip: account/date Shopify totals paired with the exact
   unfiltered Meta spend for a scope-safe blended ROAS. */
.commerce-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 3px 2px 10px; }
.commerce-strip-title { display: flex; align-items: center; gap: 10px; }
.commerce-strip-title > img { width: 62px; height: 19px; object-fit: contain; }
.commerce-strip-title .eyebrow { margin: 0 0 2px; }
.commerce-strip-title h2 { margin: 0; color: #2b3e36; font-size: 15px; }
.commerce-strip-head > span { color: #89958f; font-size: 10px; }
.commerce-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 0 13px; }
.commerce-kpis .kpi-card { min-height: 166px; }
.shopify-commerce-card { --accent: #76a841; }
.shopify-commerce-card.orders { --accent: #92b94f; }
.blended-commerce-card { --accent: #e66624; }
.shopify-kpi-mark { width: 62px; height: 19px; }
.dashboard-shopify-tag { display: inline-flex; align-items: center; border-color: rgba(94,142,62,.18); background: rgba(149,191,71,.07); }
.dashboard-shopify-tag img { width: 50px; height: 14px; object-fit: contain; }
.kpi-source-pair { position: absolute; z-index: 2; top: 17px; right: 17px; display: inline-flex; align-items: center; gap: 4px; }
.kpi-source-pair .meta-mark { width: 22px; height: 14px; }
.kpi-source-pair .shopify-mark { width: 54px; height: 16px; }
.commerce-kpis .kpi-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
    .commerce-kpis { grid-template-columns: 1fr 1fr; }
    .commerce-kpis .kpi-card:last-child { grid-column: span 2; }
}
@media (max-width: 480px) {
    .commerce-strip-head { align-items: flex-start; }
    .commerce-strip-head > span { max-width: 135px; text-align: right; }
    .commerce-kpis { grid-template-columns: 1fr; }
    .commerce-kpis .kpi-card:last-child { grid-column: auto; }
}