/* Approved white-first dashboard. Deliberately scoped: no shared shell changes. */
html body #app main.cross-page .xl-account-overview {
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:10px 12px; border:1px solid #e3e8ef; border-radius:10px;
  background:#fff; color:#25374d;
}
html body #app main.cross-page .xl-account-overview-label {flex:0 0 auto; display:grid; gap:5px;}
html body #app main.cross-page .xl-account-overview-label b {font-size:13px;}
html body #app main.cross-page .xl-account-overview-label small {font-size:11px;color:#64748b;}
html body #app main.cross-page .xl-account-overview-scroll {
  display:flex; flex:1; min-width:0; gap:10px; overflow-x:auto;
  scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; padding:2px;
}
html body #app main.cross-page button.xl-account-overview-card {
  display:flex; flex:0 0 auto; align-items:center; gap:14px; min-height:48px;
  padding:8px 13px 8px 9px; margin:0; border:1px solid #dbe3ec; border-radius:8px;
  background:#fbfcfe; color:#24364d; box-shadow:none; text-align:left;
  cursor:pointer; font:inherit; white-space:nowrap;
}
html body #app main.cross-page button.xl-account-overview-card:hover {background:#fffaf2;border-color:#dcb876;}
html body #app main.cross-page .xl-overview-index {
  flex:none; padding:6px 7px; border-radius:5px; background:#edf1f6;
  color:#526278; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
html body #app main.cross-page .xl-overview-account {display:grid;gap:3px;min-width:104px;max-width:176px;}
html body #app main.cross-page .xl-overview-account strong {font-size:13px;overflow:hidden;text-overflow:ellipsis;color:#25374d;}
html body #app main.cross-page .xl-overview-metric {display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums;}
html body #app main.cross-page .xl-overview-metric small {color:#64748b;font-size:11px;}
html body #app main.cross-page .xl-overview-metric b {color:#22364e;font-size:13px;}
html body #app main.cross-page .xl-overview-toggle {flex:none;padding:8px 10px;white-space:nowrap;background:#fff;border:1px solid #dbe3ec;border-radius:7px;color:#53647d;font:inherit;font-size:12px;cursor:pointer;}
html body #app main.cross-page .xl-overview-stale {color:#946114;font-size:10px;}
html body #app main.cross-page button.xl-account-overview-card.is-stale {border-color:#e4c98c;background:#fffcf5;}
html body #app main.cross-page .xl-overview-empty {font-size:12px;color:#64748b;padding:12px;}
html body #app main.cross-page .xl-account-overview :focus-visible {outline:2px solid #b18a45;outline-offset:2px;}

/* Order + ROI emphasis is on the real <b> values, not just <strong>. */
html body #app main.cross-page > .summary-grid > article:nth-child(2) {order:-2!important;}
html body #app main.cross-page > .summary-grid > article:nth-child(4) {order:-1!important;}
html body[data-xl-route="cross-account-operations"] #app main.cross-page > section.summary-grid > article:nth-child(2) > b,
html body[data-xl-route="cross-account-operations"] #app main.cross-page > section.summary-grid > article:nth-child(4) > b {color:#b57a20!important;}

html body #app main.cross-page .toolbar .long-search {
  flex:1 1 190px!important; width:auto!important; min-width:180px!important; max-width:320px!important;
}
html body #app main.cross-page .toolbar > .el-select {width:126px!important;flex:0 0 126px!important;}
html body #app main.cross-page .toolbar > .el-select.source {width:96px!important;flex-basis:96px!important;}

/* Color semantics survive column reordering: selectors use data-column. */
html body #app main.cross-page .table-wrap tbody tr {--xl-tone:#94a3b8;--xl-tone-ink:#526278;--xl-tone-fill:#f5f7fa;}
html body #app main.cross-page .table-wrap tbody tr.tone-green {--xl-tone:#3b9c72;--xl-tone-ink:#236746;--xl-tone-fill:#eef8f2;}
html body #app main.cross-page .table-wrap tbody tr.tone-blue {--xl-tone:#5a88bf;--xl-tone-ink:#386394;--xl-tone-fill:#f0f5fb;}
html body #app main.cross-page .table-wrap tbody tr.tone-orange {--xl-tone:#c1974e;--xl-tone-ink:#88621e;--xl-tone-fill:#fff8eb;}
html body #app main.cross-page .table-wrap tbody tr.tone-red {--xl-tone:#cd7d83;--xl-tone-ink:#a3444d;--xl-tone-fill:#fdf1f2;}
html body #app main.cross-page .table-wrap tbody tr,
html body #app main.cross-page .table-wrap tbody tr > td {
  background:#fff!important; color:#283a52!important; background-image:none!important;
}
html body #app main.cross-page .table-wrap tbody tr > td {border-bottom:1px solid #edf0f4!important;}
html body #app main.cross-page .table-wrap tbody tr > td b,
html body #app main.cross-page .table-wrap tbody tr > td strong {color:inherit!important;}
html body #app main.cross-page .table-wrap tbody tr > td small {color:#6b7d94!important;}
html body #app main.cross-page .table-wrap tbody tr.smart-tone:not(.tone-none) > td:first-child {box-shadow:inset 3px 0 var(--xl-tone)!important;}
/* Keep the approved subtle palette continuous across every cell, including
   pinned columns. Metric emphasis remains text-only, with no darker blocks. */
html body #app main.cross-page .table-wrap tbody tr.smart-tone:not(.tone-none),
html body #app main.cross-page .table-wrap tbody tr.smart-tone:not(.tone-none) > td {
  background:var(--xl-tone-fill)!important;
}
html body #app main.cross-page .table-wrap tbody tr.smart-tone:not(.tone-none) > td[data-column="cpa"],
html body #app main.cross-page .table-wrap tbody tr.smart-tone:not(.tone-none) > td[data-column="roi"] {
  color:var(--xl-tone-ink)!important; background:var(--xl-tone-fill)!important;
}
html body #app main.cross-page .table-wrap tbody tr:hover > td {background:#f8fafc!important;}
html body #app main.cross-page .table-wrap tbody tr.smart-tone:not(.tone-none):hover > td {background:var(--xl-tone-fill)!important;}
html body #app main.cross-page .table-wrap tbody tr .metric-stack b {color:inherit!important;}
html body #app main.cross-page .table-wrap tbody tr .bid-value-box.editable,
html body #app main.cross-page .table-wrap tbody tr .budget-open,
html body #app main.cross-page .table-wrap tbody tr .history-button {
  color:#334a68!important;background:#fff!important;border-color:#d8e1ec!important;
}
html body #app main.cross-page .table-wrap tbody tr .bid-strategy-pill {background:#f3eefb!important;color:#755496!important;}
html body #app main.cross-page .table-wrap tbody tr .delivery-status.closed {color:#697586!important;}
html body #app main.cross-page .table-wrap tbody tr .row-switch {background:#c6ced8!important;}
html body #app main.cross-page .table-wrap tbody tr .row-switch.active {background:#1677ff!important;}
html body #app main.cross-page .intelligence-bar button.tone-filter {box-shadow:none!important;font-weight:600;}
html body #app main.cross-page .intelligence-bar button.tone-filter.green {background:#f3faf6!important;color:#236746!important;border-color:#c9e4d6!important;}
html body #app main.cross-page .intelligence-bar button.tone-filter.blue {background:#f3f7fc!important;color:#386394!important;border-color:#d2e0f2!important;}
html body #app main.cross-page .intelligence-bar button.tone-filter.orange {background:#fff9ee!important;color:#88621e!important;border-color:#efddb6!important;}
html body #app main.cross-page .intelligence-bar button.tone-filter.red {background:#fdf3f4!important;color:#a3444d!important;border-color:#edced2!important;}
html body #app main.cross-page .intelligence-bar button.tone-filter.black,
html body #app main.cross-page .intelligence-bar button.tone-filter.none {background:#f5f7fa!important;color:#526278!important;border-color:#dbe2eb!important;}
html body #app main.cross-page .intelligence-bar button.tone-filter.active {outline:2px solid currentColor!important;outline-offset:1px;}
@media(max-width:1100px) {
  html body #app main.cross-page .xl-account-overview {gap:8px;padding:8px;}
  html body #app main.cross-page .xl-account-overview-label small {display:none;}
  html body #app main.cross-page button.xl-account-overview-card {gap:9px;}
  html body #app main.cross-page .xl-overview-account {min-width:90px;max-width:120px;}
}
@media(max-width:650px) {
  html body #app main.cross-page .xl-account-overview {flex-wrap:wrap;}
  html body #app main.cross-page .xl-account-overview-label {order:0;}
  html body #app main.cross-page .xl-overview-toggle {order:1;margin-left:auto;}
  html body #app main.cross-page .xl-account-overview-scroll {order:2;flex-basis:100%;}
}