@charset "UTF-8";
:root {
  color-scheme: light;
  --canvas: #f6f6f2;
  --surface: #fff;
  --surface-muted: #f0f1ed;
  --ink: #202723;
  --ink-soft: #48534d;
  --muted: #77817a;
  --line: #e2e5df;
  --line-strong: #d2d7d0;
  --brand: #d8533f;
  --brand-soft: #fbefeb;
  --green: #247d55;
  --green-soft: #eaf5ee;
  --amber: #9b6715;
  --amber-soft: #fbf3e3;
  --red: #b84a42;
  --red-soft: #f9ecea;
  --sidebar-width: 244px;
  --radius: 13px;
  --radius-sm: 9px;
  --shadow: 0 1px 3px rgb(33 42 36 / 4%), 0 5px 20px rgb(33 42 36 / 2%);
  font-family: "SF Pro Text", "Aptos", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); font-size: 14px; line-height: 1.45; }
body.drawer-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgb(216 83 63 / 48%); outline-offset: 3px; }
.skip-link { position: fixed; left: 12px; top: 8px; z-index: 100; padding: 10px 14px; transform: translateY(-140%); color: white; background: var(--ink); border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.app-frame { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: var(--sidebar-width); flex-direction: column; padding: 22px 14px 14px; border-right: 1px solid var(--line); background: #fbfbf9; }
.brand { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 9px 24px; }
.brand-mark { position: relative; display: flex; width: 34px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 3px; border: 1px solid #f0c7be; border-radius: 10px; background: #fff7f4; }
.brand-mark span { display: block; width: 4px; border-radius: 4px; background: var(--brand); }
.brand-mark span:nth-child(1) { height: 10px; }
.brand-mark span:nth-child(2) { height: 16px; }
.brand-mark span:nth-child(3) { height: 12px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong, .mobile-brand strong { font-size: 15px; font-weight: 760; letter-spacing: -.45px; }
.brand-copy strong span, .mobile-brand strong span { color: var(--brand); }
.brand-copy small { margin-top: 4px; color: #858e87; font-size: 9px; font-weight: 700; letter-spacing: 1.35px; }
.desktop-nav { flex: 1; overflow-y: auto; padding: 0 1px 12px; scrollbar-width: thin; }
.nav-group { margin: 0 0 19px; }
.nav-group-label { padding: 0 10px 7px; color: #929b94; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.nav-item { display: flex; width: 100%; min-height: 39px; align-items: center; gap: 11px; padding: 8px 10px; border: 0; border-radius: 8px; color: #647068; background: transparent; text-align: left; cursor: pointer; transition: color .15s ease, background .15s ease; }
.nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; color: #8a938d; }
.nav-item span:not(.nav-live-dot) { flex: 1; font-size: 13px; }
.nav-item:hover { color: var(--ink); background: #f1f2ee; }
.nav-item.is-active { color: #a93f30; background: var(--brand-soft); font-weight: 680; }
.nav-item.is-active svg { color: var(--brand); }
.nav-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #55a875; box-shadow: 0 0 0 3px #e1f1e5; }
.sidebar-footer { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 13px 8px 3px; border-top: 1px solid var(--line); }
.privacy-lock { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 18px; }
.sidebar-footer div { display: flex; flex-direction: column; gap: 2px; }
.sidebar-footer strong { color: var(--ink-soft); font-size: 11px; font-weight: 650; }
.sidebar-footer small { color: var(--muted); font-size: 10px; }
.main-area { min-height: 100vh; margin-left: var(--sidebar-width); padding: 0 38px 20px; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 18px; margin: 0 -38px 0; padding: 0 38px; border-bottom: 1px solid rgb(226 229 223 / 82%); background: rgb(246 246 242 / 94%); backdrop-filter: blur(12px); }
.topbar-left, .topbar-actions, .breadcrumb { display: flex; align-items: center; }
.topbar-left { min-width: 0; }
.breadcrumb { gap: 10px; color: var(--muted); font-size: 12px; }
.crumb-sep { color: #bcc2bc; }
.breadcrumb strong { color: var(--ink-soft); font-weight: 630; }
.topbar-actions { position: relative; gap: 8px; }
.filter-button, .round-button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.filter-button:hover, .round-button:hover, .compare-select:hover { border-color: var(--line-strong); background: #fcfcfa; }
.filter-button { min-width: 0; color: var(--ink-soft); font-size: 12px; font-weight: 610; }
.filter-dates { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-button > svg:first-child { width: 16px; height: 16px; color: #7c8780; }
.filter-chip { padding: 2px 6px; border-radius: 5px; color: #707b73; background: var(--surface-muted); font-size: 10px; font-weight: 650; }
.filter-button .chevron { width: 13px; height: 13px; color: #8c958e; }
.round-button { width: 36px; min-width: 36px; padding: 0; color: #748078; }
.round-button svg { width: 17px; height: 17px; }
.info-button { display: none; }
.period-menu { position: absolute; top: 45px; right: 52px; z-index: 30; display: flex; width: min(410px, calc(100vw - 30px)); max-height: min(76vh, 620px); flex-direction: column; gap: 12px; overflow-y: auto; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 35px rgb(28 37 31 / 15%); overscroll-behavior: contain; }
.period-menu[hidden] { display: none; }
.period-menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.period-menu-head strong { display: block; margin-top: 3px; color: var(--ink); font-size: 14px; font-weight: 680; }
.period-menu-title { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .7px; text-transform: uppercase; }
.period-menu-close { width: 36px; min-width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 20px; cursor: pointer; }
.period-menu-section { display: flex; flex-direction: column; gap: 8px; }
.quick-period-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.quick-period { min-height: 42px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft); font-size: 11px; font-weight: 570; text-align: left; cursor: pointer; }
.quick-period:hover, .quick-period:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.quick-period.is-active { border-color: #e7b7ad; color: #9e3d30; background: var(--brand-soft); }
.range-inputs, .period-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.period-control { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 650; }
.period-control input, .period-control select, .compare-select { min-width: 0; min-height: 40px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 12px; }
.period-control input:focus-visible, .period-control select:focus-visible, .compare-select:focus-visible, .quick-period:focus-visible, .period-menu-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.period-selects { grid-template-columns: 1fr 1fr; }
.period-form-error { min-height: 15px; margin: -4px 0 0; color: #b33b2e; font-size: 10px; }
.period-menu-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.period-menu-note { color: var(--muted); font-size: 9px; line-height: 1.45; }
.period-apply { min-height: 44px; padding: 0 15px; border: 0; border-radius: 9px; background: var(--green); color: white; font-size: 11px; font-weight: 680; cursor: pointer; }
.compare-select-wrap { display: inline-flex; }
.compare-select { min-height: 37px; padding: 0 26px 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: 610; cursor: pointer; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.mobile-brand { display: none; }
.page-root { width: 100%; max-width: 1510px; margin: 0 auto; padding: 27px 0 0; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.eyebrow, .panel-kicker { display: flex; align-items: center; gap: 7px; color: #78847b; font-size: 9px; font-weight: 750; letter-spacing: 1px; }
.eyebrow { margin-bottom: 7px; }
.eyebrow-mark { display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--brand); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(25px, 2.3vw, 31px); font-weight: 690; letter-spacing: -1.05px; line-height: 1.2; }
.page-subtitle { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.subtitle-dot { padding: 0 3px; color: #bdc3bd; }
.snapshot-badge { display: inline-flex; min-height: 49px; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: var(--surface); text-align: left; cursor: pointer; }
.snapshot-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: var(--amber); background: var(--amber-soft); font-size: 17px; }
.snapshot-badge > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.snapshot-badge strong { font-size: 11px; font-weight: 660; }
.snapshot-badge small { color: var(--muted); font-size: 9px; }
.insight-strip { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 13px; margin: 0 0 23px; padding: 15px 17px; border: 1px solid #eee4d2; border-radius: var(--radius); background: #faf6ee; }
.insight-symbol { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #e8d8b9; border-radius: 9px; background: #fffaf0; }
.insight-symbol span { display: block; width: 10px; height: 10px; border: 2px solid var(--amber); border-radius: 50%; box-shadow: 0 0 0 3px #f5e8cb; }
.insight-copy { min-width: 0; }
.insight-overline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 3px; color: #917244; font-size: 9px; font-weight: 750; letter-spacing: .8px; }
.insight-source { color: #a99b83; font-size: 8px; }
.insight-copy h2 { margin: 0 0 3px; color: #3c3b31; font-size: 14px; font-weight: 690; letter-spacing: -.18px; }
.insight-copy p { margin: 0; color: #716b5c; font-size: 11px; line-height: 1.55; }
.insight-copy .delta { display: inline-flex; padding: 0; color: #4d765d; background: transparent; font-size: inherit; font-weight: 700; }
.insight-link, .text-action, .action-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 3px 7px 10px; border: 0; color: #7e653d; background: transparent; font-size: 11px; font-weight: 640; white-space: nowrap; cursor: pointer; }
.insight-link svg, .text-action svg, .action-link svg { width: 14px; height: 14px; }
.section-block { margin-bottom: 20px; }
.section-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.section-heading { margin-bottom: 10px; }
.section-heading h2, .panel-heading h2 { margin: 0; font-size: 14px; font-weight: 680; letter-spacing: -.25px; }
.section-heading p, .panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.section-status { display: inline-flex; align-items: center; gap: 6px; color: #718077; font-size: 10px; white-space: nowrap; }
.section-status i { width: 6px; height: 6px; border-radius: 50%; background: #58a675; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.availability-strip { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 2.2fr); align-items: center; gap: 14px; margin: 0 0 13px; padding: 12px 14px; border: 1px solid #e7e9e4; border-radius: 11px; background: #f1f3ef; }
.availability-intro h2 { margin: 3px 0 2px; color: #435047; font-size: 11px; font-weight: 670; }
.availability-intro p { margin: 0; color: #879189; font-size: 9px; line-height: 1.4; }
.availability-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.availability-item { display: flex; min-width: 0; min-height: 45px; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; border: 1px solid #e5e8e2; border-radius: 8px; background: #fafbf9; text-align: left; cursor: pointer; }
.availability-item > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.availability-item strong { overflow: hidden; color: #626e65; font-size: 9px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.availability-item small { color: #939c95; font-size: 8px; line-height: 1.3; }
.availability-item svg { width: 13px; height: 13px; flex: 0 0 auto; color: #9aa39c; }
.availability-item:hover { border-color: #d7ddd6; background: #fff; }
.metric-card { min-width: 0; min-height: 140px; padding: 14px 15px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.metric-head { display: flex; min-height: 20px; align-items: center; justify-content: space-between; gap: 8px; }
.metric-label { overflow: hidden; color: #67736b; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.source-tag { flex: 0 0 auto; color: #939b95; font-size: 8px; font-weight: 730; letter-spacing: .6px; }
.metric-number-button { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: space-between; gap: 5px; margin: 4px 0 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.metric-value { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: clamp(24px, 2vw, 30px); font-weight: 675; font-variant-numeric: tabular-nums; letter-spacing: -1.1px; line-height: 1.15; }
.metric-arrow { width: 15px; height: 15px; flex: 0 0 auto; color: #adb5ae; opacity: 0; transition: opacity .14s ease, transform .14s ease; }
.metric-number-button:hover .metric-arrow, .metric-number-button:focus-visible .metric-arrow { opacity: 1; transform: translateX(2px); }
.metric-bottom { display: flex; min-height: 22px; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 5px; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 680; line-height: 1.3; white-space: nowrap; }
.delta-positive { color: var(--green); background: var(--green-soft); }
.delta-caution { color: var(--amber); background: var(--amber-soft); }
.delta-neutral, .comparison-neutral { color: #747e76; }
.comparison-neutral { font-size: 10px; }
.metric-compare-text { color: #929a94; font-size: 9px; }
.metric-caption { min-height: 16px; margin: 4px 0 0; color: #909992; font-size: 9px; line-height: 1.4; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: 12px; margin-bottom: 13px; }
.lower-grid { grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); }
.panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { align-items: flex-start; margin-bottom: 15px; }
.panel-heading > div { min-width: 0; }
.panel-heading h2 { margin-top: 3px; font-size: 14px; }
.panel-heading p { margin-top: 4px; line-height: 1.35; }
.plain-icon-button { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: #7b867e; background: #fff; cursor: pointer; }
.plain-icon-button svg { width: 15px; height: 15px; }
.status-all { padding: 4px 7px; border: 0; border-radius: 6px; color: #6e7b72; background: var(--surface-muted); font-size: 9px; cursor: pointer; }
.compare-row { padding: 0 0 14px; }
.compare-row + .compare-row { padding-top: 11px; border-top: 1px solid #eff0ec; }
.compare-row-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.compare-row-title strong { font-size: 11px; font-weight: 650; }
.compare-row-title > span { color: #929a94; font-size: 9px; }
.bar-pair { display: grid; grid-template-columns: 1fr 1.45fr; align-items: center; gap: 4px 11px; }
.bar-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #89928b; font-size: 9px; }
.bar-label strong { color: #57625a; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 630; white-space: nowrap; }
.bar-track { height: 6px; overflow: hidden; border-radius: 8px; background: #f0f1ed; }
.bar-fill { display: block; height: 100%; border-radius: inherit; }
.current-fill { background: var(--brand); }
.previous-fill { background: #c9d0ca; }
.chart-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 11px; border-top: 1px solid #eff0ec; color: #879089; font-size: 9px; }
.legend-dot { width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; }
.current-legend { background: var(--brand); }
.previous-legend { background: #c9d0ca; }
.chart-note-tail { margin-left: auto; color: #a0a7a1; }
.source-list { display: flex; flex-direction: column; }
.source-row { display: flex; min-height: 40px; align-items: center; gap: 8px; padding: 7px 1px; border: 0; border-top: 1px solid #eff0ec; background: transparent; text-align: left; cursor: pointer; }
.source-row:first-child { border-top: 0; }
.source-status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
.dot-good { background: #56a373; box-shadow: 0 0 0 3px #edf6ef; }
.dot-warn { background: #d09a3e; box-shadow: 0 0 0 3px #faf2e3; }
.dot-bad { background: #ca6256; box-shadow: 0 0 0 3px #faeeec; }
.source-row-label { flex: 0 0 auto; color: #58645b; font-size: 10px; font-weight: 610; }
.source-row-value { overflow: hidden; margin-left: auto; color: #778279; font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.source-arrow { width: 13px; height: 13px; flex: 0 0 auto; color: #a2aaa3; }
.source-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 9px; padding: 9px 10px; border: 1px solid #f0e6d1; border-radius: 8px; color: #746443; background: #fbf7ef; }
.source-warning > span { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #9a6b1c; background: #f3e6c9; font-size: 10px; font-weight: 750; }
.source-warning p { margin: 0; font-size: 10px; line-height: 1.5; }
.ga4-panel .panel-heading { margin-bottom: 8px; }
.channel-columns-head { display: grid; grid-template-columns: minmax(155px, 1.05fr) minmax(100px, .8fr) minmax(88px, auto); align-items: center; gap: 10px; padding: 2px 1px 6px; border-bottom: 1px solid #eff0ec; color: #78847b; font-size: 8px; font-weight: 720; letter-spacing: .55px; text-transform: uppercase; }
.channel-columns-head span:nth-child(2), .channel-columns-head span:nth-child(3) { text-align: right; }
.channel-list { display: flex; flex-direction: column; }
.channel-row { display: grid; grid-template-columns: minmax(155px, 1.05fr) minmax(100px, .8fr) minmax(88px, auto); min-height: 45px; align-items: center; gap: 10px; padding: 5px 1px; border: 0; border-top: 1px solid #eff0ec; background: transparent; text-align: left; cursor: pointer; }
.channel-row:hover, .source-row:hover { background: #fafbf8; }
.channel-main { display: flex; min-width: 0; align-items: center; gap: 8px; }
.channel-rank { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #8a938d; background: #f1f2ee; font-size: 8px; font-variant-numeric: tabular-nums; font-weight: 700; }
.channel-main > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.channel-main strong { overflow: hidden; color: #59645c; font-size: 10px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.channel-main small { color: #9ba29c; font-size: 8px; }
.channel-bar-wrap { display: flex; align-items: center; gap: 7px; }
.channel-bar { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 7px; background: #eef0ec; }
.channel-bar > span { display: block; height: 100%; border-radius: inherit; background: #849d85; }
.channel-bar-wrap strong { min-width: 13px; color: #5f6962; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.channel-revenue { color: #626d64; font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.panel-footnote { margin-top: 9px; padding-top: 9px; border-top: 1px solid #eff0ec; color: #89928b; font-size: 9px; line-height: 1.4; }
.ga4-stamp { display: grid; width: 32px; height: 25px; place-items: center; border: 1px solid #e6e8e3; border-radius: 6px; color: #667267; background: #f6f7f4; font-size: 9px; font-weight: 750; letter-spacing: .4px; }
.digital-revenue { padding: 0 0 13px; border-bottom: 1px solid #eff0ec; }
.digital-revenue > span { display: block; margin-bottom: 3px; color: #7a857d; font-size: 10px; }
.digital-revenue > strong { display: block; margin-bottom: 5px; font-size: 25px; font-variant-numeric: tabular-nums; font-weight: 675; letter-spacing: -.8px; }
.digital-revenue > div { display: flex; align-items: center; gap: 4px; }
.digital-revenue small { color: #929b94; font-size: 9px; }
.digital-revenue .currency-note { display: block; margin-top: 6px; color: #727f75; font-size: 10px; line-height: 1.45; }
.digital-stats { display: grid; grid-template-columns: 1fr 1fr; }
.digital-stats > div { display: flex; min-height: 66px; flex-direction: column; gap: 2px; padding: 11px 4px 7px 0; border-bottom: 1px solid #eff0ec; }
.digital-stats > div:nth-child(odd) { padding-right: 12px; }
.digital-stats > div:nth-child(even) { padding-left: 11px; border-left: 1px solid #eff0ec; }
.digital-stats > div:nth-last-child(-n+2) { border-bottom: 0; }
.digital-stats > div > span { color: #87918a; font-size: 9px; }
.digital-stats strong { font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 650; }
.digital-stats small .delta { width: fit-content; padding: 1px 0; background: transparent; font-size: 9px; }
.text-action { margin-top: 2px; padding: 6px 0 0; color: #65746a; font-size: 10px; }
.action-row { display: flex; align-items: flex-start; gap: 12px; margin: 15px 0 5px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fbfbf9; }
.action-mark { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #8a6e41; background: #f5f0e5; font-size: 17px; }
.action-row > div:nth-child(2) { min-width: 0; flex: 1; }
.action-row .panel-kicker { margin-bottom: 3px; font-size: 8px; }
.action-row strong { display: block; color: #444f47; font-size: 11px; font-weight: 650; }
.action-row p { margin: 3px 0 0; color: #87918a; font-size: 9px; line-height: 1.45; }
.action-link { align-self: center; color: #65756a; font-size: 10px; }
.page-footer { display: flex; max-width: 1510px; justify-content: space-between; gap: 12px; margin: 20px auto 0; padding: 12px 0 2px; border-top: 1px solid #e6e8e3; color: #9aa19b; font-size: 9px; }
.page-footer a { color: #76837a; text-decoration: underline; text-underline-offset: 2px; }
.bottom-nav { display: none; }
.mobile-more-sheet { position: fixed; inset: 0; z-index: 55; }
.sheet-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgb(26 33 29 / 34%); }
.sheet-panel { position: absolute; inset: auto 0 0; max-height: min(78dvh, 690px); overflow-y: auto; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: #fbfbf9; box-shadow: 0 -12px 40px rgb(20 29 23 / 12%); }
.sheet-handle { width: 35px; height: 4px; margin: 0 auto 11px; border-radius: 5px; background: #d9ddd7; }
.sheet-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 16px; }
.sheet-heading .round-button { width: 34px; height: 34px; border: 0; font-size: 22px; }
.more-group { margin-bottom: 15px; }
.more-nav .nav-group-label { padding-left: 0; }
.more-item { display: inline-flex; width: calc(50% - 5px); min-height: 44px; align-items: center; gap: 9px; margin: 2px 2px 2px 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; color: #526057; background: transparent; text-align: left; cursor: pointer; }
.more-item > svg:first-child { width: 17px; height: 17px; color: #78847b; }
.more-item span { flex: 1; font-size: 12px; }
.more-item.is-active { border-color: #f0d7d1; color: #a34536; background: var(--brand-soft); }
.more-item.is-active > svg:first-child { color: var(--brand); }
.more-arrow { width: 13px; height: 13px; color: #a8b0a9; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; background: rgb(22 31 25 / 31%); }
.detail-drawer { position: relative; width: min(450px, 100%); height: 100%; overflow-y: auto; padding: 64px 30px 30px; border-left: 1px solid var(--line); background: #fcfcfa; box-shadow: -15px 0 45px rgb(22 31 25 / 9%); }
.drawer-close { position: absolute; top: 17px; right: 18px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: #626e65; background: white; font-size: 23px; line-height: 1; cursor: pointer; }
.drawer-eyebrow { margin-bottom: 8px; color: #849087; font-size: 9px; font-weight: 730; letter-spacing: 1px; }
.detail-drawer h2 { max-width: 350px; margin: 0 0 7px; font-size: 23px; font-weight: 680; letter-spacing: -.55px; line-height: 1.2; }
.drawer-period { margin: 0 0 20px; color: #8b958e; font-size: 11px; }
.drawer-body { color: #58645c; font-size: 13px; line-height: 1.75; }
.drawer-source-note { display: flex; align-items: center; gap: 9px; margin-top: 23px; padding-top: 14px; border-top: 1px solid var(--line); color: #8a948c; font-size: 10px; }
.toast { position: fixed; z-index: 90; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid #e5d7bd; border-radius: 9px; color: #675735; background: #fff9ec; box-shadow: 0 9px 32px rgb(30 36 31 / 12%); font-size: 12px; }
.loading-state { padding: 13px 0 30px; }
.period-loading-note { margin: 15px 0 0; color: var(--muted); font-size: 11px; }
.skeleton { position: relative; overflow: hidden; border-radius: 8px; background: #eaede8; }
.skeleton::after { position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 68%), transparent); animation: skeleton-shine 1.5s infinite; content: ""; }
.skeleton-title { width: min(390px, 75%); height: 32px; margin: 10px 0; }
.skeleton-subtitle { width: 250px; height: 14px; margin: 12px 0 22px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.skeleton-card { height: 135px; }
.skeleton-wide { height: 220px; margin-top: 13px; }
@keyframes skeleton-shine { to { transform: translateX(100%); } }
.error-state, .empty-state { display: flex; max-width: 760px; flex-direction: column; align-items: flex-start; margin: 24px 0; padding: 25px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: #fcfcfa; }
.error-state { border-color: #ebd1cd; background: #fcf7f6; }
.error-mark, .empty-symbol { display: grid; width: 34px; height: 34px; margin-bottom: 13px; place-items: center; border-radius: 10px; color: #94713a; background: #f4efdf; font-size: 18px; }
.error-mark { color: var(--red); background: var(--red-soft); font-weight: 750; }
.error-state h1, .empty-state h2 { margin: 0 0 7px; font-size: 17px; font-weight: 680; letter-spacing: -.3px; }
.error-state p, .empty-state p { max-width: 580px; margin: 0; color: #758078; font-size: 12px; line-height: 1.65; }
.empty-state { border-style: solid; border-color: var(--line); background: var(--surface); }
.empty-symbol { color: #728779; background: #eef3ef; }
.secondary-button { min-height: 39px; margin-top: 17px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: #58655c; background: #fff; font-size: 11px; font-weight: 620; cursor: pointer; }
.secondary-button:hover { border-color: var(--line-strong); background: #fafbf8; }
.client-metrics { margin-bottom: 12px; }
.unavailable-card { background: #fbfbf9; box-shadow: none; }
.unavailable-card .metric-value { margin-top: 10px; font-size: 20px; letter-spacing: -.5px; }
.unavailable-card .metric-caption { margin-top: 7px; line-height: 1.5; }
.section-empty { margin-top: 18px; }
.sales-metrics { margin-bottom: 14px; }
.wide-panel { margin-bottom: 13px; }
.sales-insight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 2px 0 15px; }
.sales-insight-grid > div { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid #edf0eb; border-radius: 9px; background: #fbfcfa; }
.sales-insight-grid > div > strong { font-size: 15px; }
.sales-insight-grid > div > span { color: #778179; font-size: 10px; }
.method-note { margin: 0; padding-top: 12px; border-top: 1px solid #eff0ec; color: #818b83; font-size: 10px; line-height: 1.55; }
.compact-empty { padding: 20px; }
.compact-empty .empty-symbol { display: none; }
.compact-empty h2 { font-size: 13px; }
.compact-empty p { font-size: 10px; }
.ga4-metrics { margin-bottom: 14px; }
.ga4-source-list { display: flex; flex-direction: column; }
.ga4-source-card { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 4px; border-top: 1px solid #eff0ec; }
.ga4-source-card > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ga4-source-card > div:last-child { flex: 0 0 auto; align-items: flex-end; }
.ga4-source-card strong { overflow: hidden; font-size: 11px; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }
.ga4-source-card small { color: #89928b; font-size: 9px; }
.roomy-warning { max-width: 900px; margin-top: 12px; }
.retention-intro { max-width: 790px; margin: 0 0 12px; background: #fbfbf9; box-shadow: none; }
.retention-intro h2 { margin: 7px 0; font-size: 16px; }
.retention-intro p { max-width: 660px; margin: 0; color: #7e8880; font-size: 11px; line-height: 1.6; }
.source-detail-panel { max-width: 940px; margin-bottom: 12px; box-shadow: none; }
.source-detail-panel > p { max-width: 780px; margin: -4px 0 15px; color: #6e7971; font-size: 11px; line-height: 1.6; }
.status-pill { padding: 4px 8px; border-radius: 7px; font-size: 9px; font-weight: 650; white-space: nowrap; }
.status-good { color: var(--green); background: var(--green-soft); }
.status-warn { color: var(--amber); background: var(--amber-soft); }
.source-facts { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 11px; border-top: 1px solid #eff0ec; }
.source-facts span { display: flex; min-width: 130px; flex-direction: column; gap: 3px; color: #8a948c; font-size: 9px; }
.source-facts strong { color: #4c5950; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 650; }
.architecture-note { max-width: 940px; margin-top: 17px; padding: 16px; border: 1px solid #e5e8e2; border-radius: var(--radius); background: #f1f3ee; }
.architecture-note > p { margin: 8px 0 0; color: #68746c; font-size: 10px; line-height: 1.65; }
.architecture-note strong { color: #3d4b42; font-weight: 650; }
@media (min-width: 1500px) {
  .main-area { padding-right: 48px; padding-left: 48px; }
  .topbar { margin-right: -48px; margin-left: -48px; padding-right: 48px; padding-left: 48px; }
  .metric-card { min-height: 150px; padding: 16px 17px 14px; }
  .page-root { padding-top: 32px; }
}
@media (max-width: 1120px) {
  :root { --sidebar-width: 220px; }
  .main-area { padding-right: 25px; padding-left: 25px; }
  .topbar { margin-right: -25px; margin-left: -25px; padding-right: 25px; padding-left: 25px; }
  .dashboard-grid, .lower-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); }
  .metric-grid { gap: 8px; }
  .metric-card { padding-right: 12px; padding-left: 12px; }
  .channel-columns-head, .channel-row { grid-template-columns: minmax(125px, 1fr) minmax(82px, .75fr) minmax(78px, auto); gap: 7px; }
}
@media (max-width: 900px) {
  :root { --sidebar-width: 206px; }
  .availability-strip { grid-template-columns: 1fr; gap: 8px; }
  .availability-items { grid-template-columns: 1fr; }
  .main-area { padding-right: 20px; padding-left: 20px; }
  .topbar { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr; }
  .source-health { order: 0; }
  .metric-value { font-size: 25px; }
  .metric-card { min-height: 135px; }
  .info-button { display: inline-flex; }
}
@media (max-width: 680px) {
  html { scroll-behavior: auto; }
  body { padding-bottom: calc(69px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .main-area { margin-left: 0; padding: 0 16px 12px; }
  .topbar { position: sticky; top: 0; z-index: 15; display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 9px; margin: 0 -16px; padding: 9px 14px 10px; border-color: #e3e6df; background: rgb(246 246 242 / 96%); }
  body.period-open { overflow: hidden; }
  body.period-open::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgb(20 28 23 / 32%); }
  body.period-open .topbar { z-index: 60; }
  body.period-open .bottom-nav { z-index: 30; }
  .topbar-left { min-height: 29px; justify-content: space-between; }
  .mobile-brand { display: inline-flex; align-items: center; gap: 7px; }
  .mobile-brand .brand-mark { width: 27px; height: 27px; border-radius: 8px; }
  .mobile-brand .brand-mark span:nth-child(1) { height: 8px; }
  .mobile-brand .brand-mark span:nth-child(2) { height: 13px; }
  .mobile-brand .brand-mark span:nth-child(3) { height: 10px; }
  .mobile-brand strong { font-size: 13px; }
  .breadcrumb { display: none; }
  .topbar-actions { gap: 7px; }
  .filter-button { min-height: 44px; flex: 1; justify-content: flex-start; gap: 6px; padding: 0 9px; font-size: 11px; }
  .availability-strip { grid-template-columns: 1fr; gap: 8px; padding: 11px; }
  .availability-items { grid-template-columns: 1fr; gap: 5px; }
  .availability-item { min-height: 44px; padding: 7px 9px; }
  .availability-item strong { font-size: 10px; }
  .availability-item small { font-size: 8px; }
  .filter-button > svg:first-child { width: 15px; height: 15px; }
  .filter-chip { margin-left: auto; }
  .filter-button .chevron { margin-left: 0; }
  .round-button { width: 44px; min-width: 44px; min-height: 44px; }
  .info-button { display: inline-flex; }
  .compare-select-wrap { display: none; }
  .period-menu { position: fixed; top: auto; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); left: 12px; z-index: 40; width: auto; max-height: min(78dvh, 680px); padding: 17px 14px max(16px, env(safe-area-inset-bottom)); border-radius: 18px 18px 14px 14px; box-shadow: 0 18px 45px rgb(28 37 31 / 24%); }
  .period-menu::before { content: ""; position: sticky; top: -10px; align-self: center; width: 34px; height: 4px; margin: -9px 0 1px; border-radius: 4px; background: #d7dbd4; }
  .quick-period { min-height: 44px; }
  .period-menu-close { min-width: 44px; width: 44px; height: 44px; }
  .page-root { padding-top: 18px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 15px; }
  h1 { font-size: 26px; letter-spacing: -.9px; }
  .page-subtitle { font-size: 11px; }
  .snapshot-badge { min-height: 42px; padding: 5px 8px; }
  .snapshot-icon { width: 24px; height: 24px; }
  .insight-strip { grid-template-columns: 29px minmax(0, 1fr); gap: 10px; margin-bottom: 19px; padding: 12px; }
  .insight-symbol { width: 27px; height: 27px; }
  .insight-copy h2 { font-size: 13px; }
  .insight-copy p { font-size: 10px; }
  .insight-link { grid-column: 2; justify-self: start; margin: -4px 0 0 -9px; padding: 3px 8px 1px; font-size: 10px; }
  .insight-overline { gap: 6px; font-size: 8px; }
  .insight-source { font-size: 7px; }
  .section-block { margin-bottom: 16px; }
  .section-heading { align-items: flex-start; }
  .section-heading h2 { font-size: 13px; }
  .section-heading p { font-size: 9px; }
  .section-status { font-size: 9px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-card { min-height: 129px; padding: 11px 10px 9px; border-radius: 10px; }
  .metric-label { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 9px; line-height: 1.25; white-space: normal; }
  .source-tag { font-size: 7px; }
  .metric-number-button { min-height: 38px; margin-top: 4px; }
  .metric-value { font-size: clamp(21px, 6.1vw, 25px); letter-spacing: -.9px; }
  .metric-bottom { min-height: 20px; gap: 4px; margin-top: 3px; }
  .delta { padding: 2px 5px; font-size: 9px; }
  .metric-compare-text { font-size: 8px; }
  .metric-caption { min-height: 24px; margin-top: 3px; font-size: 9px; line-height: 1.35; }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr; gap: 9px; margin-bottom: 9px; }
  .panel { padding: 13px 12px; border-radius: 11px; }
  .panel-heading { margin-bottom: 12px; }
  .panel-heading h2 { font-size: 13px; }
  .panel-heading p { font-size: 9px; }
  .bar-pair { grid-template-columns: minmax(112px, .9fr) minmax(90px, 1fr); gap: 4px 9px; }
  .bar-label { font-size: 8px; }
  .bar-label strong { font-size: 9px; }
  .chart-note { gap: 5px; font-size: 8px; }
  .chart-note-tail { width: 100%; margin-left: 0; padding-top: 3px; }
  .source-row { min-height: 40px; }
  .source-row-label { font-size: 9px; }
  .source-row-value { max-width: 53%; font-size: 9px; }
  .source-warning { margin-top: 6px; padding: 8px; }
  .source-warning p { font-size: 9px; }
  .channel-columns-head, .channel-row { grid-template-columns: minmax(0, 1fr) minmax(65px, .72fr) minmax(74px, auto); gap: 5px; }
  .channel-columns-head { padding-bottom: 6px; font-size: 7px; letter-spacing: .3px; }
  .channel-row { min-height: 47px; padding: 6px 0; }
  .channel-main strong { font-size: 9px; }
  .channel-main small { font-size: 8px; }
  .channel-rank { width: 22px; height: 22px; }
  .channel-bar-wrap strong { font-size: 9px; }
  .channel-revenue { grid-column: auto; justify-self: end; margin-top: 0; font-size: 9px; }
  .panel-footnote { font-size: 9px; }
  .digital-revenue > strong { font-size: 23px; }
  .digital-stats > div { min-height: 62px; }
  .digital-stats strong { font-size: 16px; }
  .action-row { gap: 8px; margin-top: 10px; padding: 11px; }
  .action-mark { width: 24px; height: 24px; }
  .action-row strong { font-size: 10px; }
  .action-row p { font-size: 9px; }
  .action-link { gap: 3px; padding: 5px 0 0; font-size: 9px; }
  .page-footer { flex-direction: column; gap: 3px; margin-top: 15px; padding-top: 9px; font-size: 8px; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 40; display: flex; min-height: 63px; align-items: stretch; justify-content: space-around; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #e2e5df; background: rgb(251 251 249 / 97%); box-shadow: 0 -4px 18px rgb(34 44 37 / 4%); backdrop-filter: blur(14px); }
  .bottom-item { display: flex; min-width: 53px; min-height: 47px; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px 4px; border: 0; border-radius: 9px; color: #808a82; background: transparent; cursor: pointer; }
  .bottom-item svg { width: 18px; height: 18px; }
  .bottom-item span { font-size: 8px; font-weight: 590; }
  .bottom-item.is-active { color: #a74435; background: #fbefeb; }
  .bottom-item.is-active span { font-weight: 700; }
  .bottom-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .detail-drawer { height: auto; max-height: 84dvh; padding: 48px 19px calc(22px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; }
  .drawer-backdrop { align-items: flex-end; }
  .drawer-close { top: 10px; right: 13px; width: 34px; height: 34px; }
  .detail-drawer h2 { font-size: 20px; }
  .drawer-period { margin-bottom: 14px; }
  .drawer-body { font-size: 12px; }
  .toast { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 12px; max-width: none; font-size: 11px; }
  .skeleton-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .skeleton-card { height: 125px; }
  .skeleton-wide { height: 180px; }
  .error-state, .empty-state { margin-top: 14px; padding: 17px; }
  .error-state h1 { font-size: 20px; }
  .empty-state h2 { font-size: 15px; }
  .empty-state p, .error-state p { font-size: 11px; }
  .sales-insight-grid { gap: 6px; }
  .sales-insight-grid > div { padding: 8px 7px; }
  .sales-insight-grid > div > strong { font-size: 12px; }
  .sales-insight-grid > div > span { font-size: 8px; }
  .source-detail-panel { padding: 13px 12px; }
  .source-detail-panel > p { font-size: 10px; }
  .source-facts { gap: 9px; }
  .source-facts span { min-width: calc(50% - 5px); }
  .architecture-note { padding: 13px; }
  .architecture-note > p { font-size: 9px; }
  .ga4-source-card { gap: 7px; }
  .ga4-source-card strong { font-size: 10px; }
  .ga4-source-card small { font-size: 8px; }
}
@media (max-width: 380px) {
  .main-area { padding-right: 12px; padding-left: 12px; }
  .topbar { margin-right: -12px; margin-left: -12px; padding-right: 10px; padding-left: 10px; }
  .metric-card { padding-right: 8px; padding-left: 8px; }
  .metric-value { font-size: 20px; }
  .metric-label { font-size: 8px; }
  .source-row-value { max-width: 48%; }
  .page-heading { gap: 8px; }
  .snapshot-badge small { font-size: 8px; }
  .bar-pair { grid-template-columns: minmax(104px, .9fr) minmax(75px, 1fr); }
  .filter-dates { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
  .filter-chip { display: none; }
  .round-button { width: 44px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}