/* MAX reference design. These selectors intentionally outrank retired home styles.
   Colors are presentation only: account, branch, permissions and data stay unchanged. */
@media screen {
  :root[data-appearance=default] {
    --ui-bg:#faf3e8;--ui-panel:#fffcf6;--ui-raised:#fffdfa;--ui-soft:#f4e8d9;
    --ui-ink:#252835;--ui-muted:#757582;--ui-line:#e6d6c3;--ui-accent:#a87131;
    --ui-accent-ink:#fff;--ui-tint:#f8e9d4;--ui-shadow:0 8px 24px #9d6c2710;
    --hub-surface:#fffdfa;--hub-color-strength:26%;--hub-edge-strength:62%;--hub-shadow-strength:13%;
    --ui-icon-filter:brightness(0) saturate(100%) invert(44%) sepia(35%) saturate(850%) hue-rotate(356deg);
  }
  :root[data-appearance=light] {
    --hub-surface:#fff;--hub-color-strength:14%;--hub-edge-strength:42%;--hub-shadow-strength:8%;
  }
  :root[data-appearance=dark] {
    --ui-bg:#080d17;--ui-panel:#111722;--ui-raised:#171f2d;--ui-soft:#1a2432;
    --ui-ink:#f0f2f7;--ui-muted:#a2a9b8;--ui-line:#2b3342;--ui-accent:#ffb43b;
    --ui-accent-ink:#13100a;--ui-tint:#30271b;--ui-shadow:0 8px 24px #0003;
    --hub-surface:#0c111a;--hub-color-strength:14%;--hub-edge-strength:56%;--hub-shadow-strength:32%;
  }
  html[data-appearance] body {
    background-image:radial-gradient(ellipse at 100% 0%,#4a9bff08,transparent 55%),radial-gradient(ellipse at 0% 100%,#f5ae3509,transparent 55%)!important;
    background-attachment:fixed!important;
  }
  /* Each tone has a luminous dark version and an ink version for ivory. */
  [data-visual-tone="1"],.ref-metric:nth-child(1){--tone:#64d743;--tone-wash:#22b696;--tone-ink:#08775f}
  [data-visual-tone="2"],.ref-metric:nth-child(2){--tone:#ff9d1e;--tone-ink:#a05a0a}
  [data-visual-tone="3"]{--tone:#388fff;--tone-ink:#2164ac}
  [data-visual-tone="4"],.ref-metric:nth-child(4){--tone:#a669f4;--tone-ink:#7839b4}
  [data-visual-tone="5"]{--tone:#0fc5cf;--tone-ink:#087185}
  [data-visual-tone="6"],.ref-metric:nth-child(3){--tone:#ff386e;--tone-ink:#b62b66}
  html[data-appearance] body :is([data-visual-tone],.ref-metric) {
    --card-accent:var(--tone-ink,#a87131);
    --card-glow:var(--tone-wash,var(--tone,#a87131));
    --hub-background:radial-gradient(ellipse at 45% 0%,color-mix(in srgb,var(--card-glow) var(--hub-color-strength),transparent),transparent 88%),linear-gradient(155deg,var(--ui-panel),var(--hub-surface) 90%);
    --hub-border:color-mix(in srgb,var(--card-glow) var(--hub-edge-strength),var(--ui-line));
    --hub-shadow:0 6px 22px color-mix(in srgb,var(--card-glow) var(--hub-shadow-strength),transparent),inset 0 1px 0 #ffffff80;
  }
  html[data-appearance=dark] body :is([data-visual-tone],.ref-metric) {
    --card-accent:var(--tone,#ffb43b);--card-glow:var(--tone,#ffb43b);
    --hub-shadow:0 0 24px -5px color-mix(in srgb,var(--card-glow) var(--hub-shadow-strength),transparent),inset 0 1px 0 #ffffff0b;
  }
  /* High specificity is necessary: legacy primary/compact card classes use !important. */
  html[data-appearance] body :is(.reference-home .ref-card-rows .ref-tile,.mw-nav-grid.mw-candidate .mw-nav-card,.op-hub .op-card,.mg-hub .mg-card,.commerce-cards .commerce-card,.workspace-card-grid .workspace-info-card,.inventory-section-cards .inventory-section-card,.ix-family-grid .ix-family-card,.p-cards .p-card,.reference-home .ref-metrics .ref-metric) {
    background:var(--hub-background,var(--ui-panel))!important;
    border:1px solid var(--hub-border,var(--ui-line))!important;
    box-shadow:var(--hub-shadow,var(--ui-shadow))!important;
    border-radius:22px!important;color:var(--ui-ink)!important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
  html[data-appearance] body [data-visual-tone]:hover {
    border-color:var(--card-accent)!important;transform:translateY(-3px);
  }
  html[data-appearance] body :is([data-visual-tone],.ref-metric):focus-visible {
    outline:3px solid var(--card-accent,var(--ui-accent))!important;outline-offset:4px;
  }
  /* Hub anatomy: number, icon, title, description, fixed bottom action. */
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile {
    display:flex!important;flex-direction:column!important;align-items:center!important;
    text-align:center!important;position:relative!important;min-height:264px!important;height:auto!important;
    padding:48px 20px 16px!important;gap:14px!important;overflow:hidden;
  }
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile::before {
    content:none!important;display:none!important;place-items:center;
    position:absolute;top:16px;inset-inline-start:16px;width:28px;height:28px;
    border:0;border-radius:50%;transform:none;background:var(--card-accent);color:var(--ui-accent-ink);
    font-size:12px;font-weight:700;box-shadow:0 3px 14px color-mix(in srgb,var(--card-accent) 16%,transparent);pointer-events:none;
  }
  html[data-appearance=default] body .reference-home .ref-card-rows .ref-tile::before {color:#fff}
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile::after{content:none!important}
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-copy {
    display:flex!important;flex-direction:column!important;align-items:center!important;
    gap:8px!important;flex:1;min-width:0;width:100%;padding:0!important;
  }
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-copy b {
    font-size:18px!important;font-weight:700!important;line-height:1.55!important;
    color:var(--ui-ink)!important;margin:0!important;overflow-wrap:anywhere;
  }
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-copy small {
    font-size:13px!important;line-height:1.8!important;color:var(--ui-muted)!important;
    max-width:32ch!important;margin:0!important;white-space:normal;
  }
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-footer {
    position:static!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:8px;align-self:stretch!important;width:100%!important;min-height:38px;box-sizing:border-box;
    border:1px solid color-mix(in srgb,var(--card-accent) 43%,transparent)!important;border-radius:99px!important;
    background:color-mix(in srgb,var(--card-accent) 11%,transparent)!important;color:var(--card-accent)!important;
    padding:8px 12px!important;font-size:12px!important;font-weight:600;text-align:start!important;margin-top:auto!important;
  }
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-footer>span:first-child {
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  }
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-arrow {
    position:static!important;display:grid!important;place-items:center;flex:0 0 16px;
    width:16px!important;height:16px!important;padding:0!important;background:transparent!important;border:0!important;
    transform:none!important;opacity:.9;
  }
  html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-arrow img {width:14px!important;height:14px!important;filter:var(--ui-icon-filter)!important}
  /* Exact palette coloring from the existing SVG silhouette. */
  html[data-appearance] body :is(.ref-tile-icon,.mw-card-icon,.op-symbol,.mg-symbol,.ix-family-symbol,.inventory-card-icon).max-hub-icon {
    position:relative!important;display:grid!important;place-items:center!important;flex:none;
    width:64px!important;height:64px!important;padding:12px!important;box-sizing:border-box!important;
    border:1px solid color-mix(in srgb,var(--card-accent,var(--ui-accent)) 48%,transparent)!important;
    border-radius:20px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--card-accent,var(--ui-accent)) 10%,transparent),color-mix(in srgb,var(--card-accent,var(--ui-accent)) 26%,transparent))!important;
    box-shadow:inset 0 1px 0 #ffffff59,0 4px 16px color-mix(in srgb,var(--card-accent,var(--ui-accent)) 10%,transparent)!important;
    margin:0!important;align-self:center!important;
  }
  html[data-appearance=dark] body :is(.ref-tile-icon,.mw-card-icon,.op-symbol,.mg-symbol,.ix-family-symbol,.inventory-card-icon).max-hub-icon {
    border-color:transparent!important;box-shadow:none!important;background:transparent!important;
  }
  html[data-appearance] body .max-hub-icon::after {
    content:"";position:absolute;inset:12px;background:var(--card-accent,var(--ui-accent));
    -webkit-mask:var(--hub-icon) center/contain no-repeat;mask:var(--hub-icon) center/contain no-repeat;
    pointer-events:none;
  }
  html[data-appearance=dark] body .max-hub-icon::after {filter:drop-shadow(0 0 10px color-mix(in srgb,var(--card-accent) 65%,transparent))}
  @supports (mask-image:url("")) {
    html[data-appearance] body .max-hub-icon>img{opacity:0!important}
  }
  @supports not (mask-image:url("")) {
    html[data-appearance] body .max-hub-icon::after{display:none}
    html[data-appearance] body .max-hub-icon>img{filter:var(--ui-icon-filter)!important}
  }
  html[data-appearance] body :is(.mw-card-open,.op-card-bottom,.mg-card-bottom){color:var(--card-accent,var(--ui-accent))!important}
  /* Metrics keep their entire label and note; no fixed-height overflow on phones. */
  html[data-appearance] body .reference-home .ref-metrics {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:24px 0 16px!important}
  html[data-appearance] body .reference-home .ref-metrics .ref-metric {
    display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;grid-template-rows:auto 1fr!important;
    gap:12px!important;min-height:160px!important;height:auto!important;padding:20px!important;text-align:start;
  }
  html[data-appearance] body .reference-home .ref-metrics .ref-metric-icon {
    grid-column:1;grid-row:1;position:relative!important;float:none!important;display:grid;place-items:center;
    width:40px!important;height:40px!important;box-sizing:border-box;padding:10px!important;margin:0!important;
    border:1px solid color-mix(in srgb,var(--card-accent) 42%,transparent)!important;border-radius:50%!important;
    background:color-mix(in srgb,var(--card-accent) 13%,transparent)!important;
  }
  html[data-appearance] body .reference-home .ref-metrics .ref-metric-icon img {filter:var(--ui-icon-filter)!important;width:20px;height:20px}
  html[data-appearance] body .reference-home .ref-metrics .ref-metric-copy {display:contents!important}
  html[data-appearance] body .reference-home .ref-metrics .ref-metric-label {grid-column:2;grid-row:1;align-self:center;font-size:15px!important;line-height:1.55!important;margin:0!important;color:var(--ui-ink)!important;white-space:normal}
  html[data-appearance] body .reference-home .ref-metrics .ref-metric strong {grid-column:1/-1;grid-row:2;align-self:end;color:var(--card-accent)!important;font-size:28px!important;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
  html[data-appearance] body .reference-home .ref-metrics .ref-metric small {grid-column:1/-1;grid-row:3;font-size:12px!important;line-height:1.7!important;white-space:normal!important;color:var(--ui-muted)!important;margin:0!important}
  html[data-appearance] body .reference-home .ref-metric-arrow {display:none!important}
  html[data-appearance=dark] body .reference-home .ref-metrics .ref-metric strong{text-shadow:0 0 16px color-mix(in srgb,var(--card-accent) 20%,transparent)}
  /* Welcome and date labels use the same type hierarchy in both modes. */
  html[data-appearance] body .reference-home .ref-welcome {margin:0 0 24px!important}
  html[data-appearance] body .reference-home .ref-welcome h1 {font-size:clamp(30px,3vw,42px)!important;line-height:1.5!important;margin:8px 0!important;font-weight:700!important}
  html[data-appearance] body .reference-home .ref-welcome p {font-size:16px!important;line-height:1.8!important;max-width:none!important;color:var(--ui-muted)!important}
  html[data-appearance] body .reference-home .ref-welcome .metric-period {font-size:13px!important;margin-top:8px!important;color:var(--ui-accent)!important}
  html[data-appearance] body .reference-home .ref-eyebrow {font-size:13px!important;line-height:1.6!important;letter-spacing:.04em!important}
  html[data-appearance] body .reference-home .owner-trial-link {background:var(--ui-tint)!important;border:1px solid var(--ui-line)!important;color:var(--ui-accent)!important;border-radius:99px!important;padding:8px 14px!important;display:inline-flex;margin-bottom:18px!important;font-size:13px!important}
  html[data-appearance] body .reference-home .ux-source-note {font-size:12px!important;line-height:1.8!important;margin:0 0 24px!important;color:var(--ui-muted)!important}
  /* Header: original MAX mark, working account, search, date and appearance controls. */
  html[data-appearance] body .maxdash-header {position:relative!important;height:auto!important;min-height:76px!important;box-sizing:border-box;padding:16px clamp(16px,2.3vw,36px)!important;background:var(--ui-panel)!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:0 3px 18px #00000005!important}
  html[data-appearance] body .maxdash-header>.topbar-first {display:grid!important;grid-template-columns:auto minmax(160px,1fr) auto!important;align-items:center!important;gap:24px!important;height:auto!important;min-height:44px!important;direction:inherit!important}
  html[data-appearance] body .maxdash-header>.topbar-first>.maxdash-brand {grid-column:1!important;grid-row:1!important;min-width:0!important;gap:10px!important}
  html[data-appearance] body .maxdash-header .brand-name {font-size:23px!important;line-height:1.2!important}
  html[data-appearance] body .maxdash-header .brand-name b {color:var(--ui-ink)!important}
  html[data-appearance] body .maxdash-header .brand-name strong {color:var(--ui-accent)!important}
  html[data-appearance] body .maxdash-header .brand-subtitle {font-size:8px!important;color:var(--ui-muted)!important;margin-top:4px!important;letter-spacing:.07em!important}
  html[data-appearance] body .maxdash-header>.topbar-first>.toolbar {display:flex!important;flex-direction:row!important;align-items:center!important;grid-column:3!important;grid-row:1!important;direction:inherit!important;gap:8px!important;min-width:0!important}
  html[data-appearance] body .maxdash-header .ref-global-search {grid-column:2!important;grid-row:1!important;width:100%!important;max-width:none!important;min-width:0!important;height:44px!important;box-sizing:border-box;padding:0 14px!important;border:1px solid var(--ui-line)!important;border-radius:99px!important;background:var(--ui-raised)!important;direction:inherit!important;gap:10px}
  html[data-appearance] body .maxdash-header .ref-global-search input {border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;padding:0!important;font-size:14px!important;color:var(--ui-ink)!important}
  html[data-appearance] body .maxdash-header .ref-global-search img {width:20px;height:20px;filter:var(--ui-icon-filter)}
  html[data-appearance] body .maxdash-header .toolbar :is(button,#dateSelect,#languageToggle,#notifications,#profile) {position:static!important;flex:none!important;height:42px!important;min-height:42px!important;border:1px solid var(--ui-line)!important;border-radius:99px!important;background:var(--ui-raised)!important;color:var(--ui-ink)!important;padding:0 12px!important;font-size:13px!important;box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;gap:8px}
  html[data-appearance] body .maxdash-header .toolbar #profile {order:0!important;width:42px!important;padding:0!important;background:var(--ui-tint)!important;border-color:var(--ui-accent)!important;color:var(--ui-accent)!important;font-weight:700!important}
  html[data-appearance] body .maxdash-header .toolbar #dateSelect {order:1!important;width:auto!important;min-width:0!important}
  html[data-appearance] body .maxdash-header .toolbar .theme-shortcut {order:2!important;width:42px!important;padding:0!important}
  html[data-appearance] body .maxdash-header .toolbar #notifications {order:3!important;width:42px!important;padding:0!important}
  html[data-appearance] body .maxdash-header .toolbar #languageToggle {order:4!important;min-width:54px!important}
  html[data-appearance] body .maxdash-header .toolbar :is(.ref-header-icon,.theme-shortcut img) {width:20px!important;height:20px!important;filter:var(--ui-icon-filter)!important}
  html[data-appearance] body .maxdash-header #activeBranchLabel {display:none!important}
  /* Date picker surfaces and selected states: the existing confirm/cancel flow is retained. */
  html[data-appearance] body .filter-pop.date-pop {background:var(--ui-panel)!important;border:1px solid var(--ui-line)!important;box-shadow:0 20px 70px #0003!important;border-radius:24px!important;color:var(--ui-ink)!important;z-index:1001}
  html[data-appearance] body .filter-pop.date-pop :is(.date-mode-tabs,.date-stepper,.date-focus-card,.date-custom-calendar,.date-range-summary) {background:var(--ui-soft)!important;border-color:var(--ui-line)!important;color:var(--ui-ink)!important}
  html[data-appearance] body .filter-pop.date-pop :is(.date-mode-tab,.date-today,.date-stepper-btn,.date-preset,.date-cancel,.calendar-head button) {background:var(--ui-raised)!important;border:1px solid var(--ui-line)!important;color:var(--ui-muted)!important;border-radius:12px}
  html[data-appearance] body .filter-pop.date-pop :is(.date-mode-tab.active,.date-preset.selected,.date-apply,.calendar-day.range-start,.calendar-day.range-end) {background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:var(--ui-accent-ink)!important;box-shadow:none!important}
  html[data-appearance] body .filter-pop.date-pop .calendar-day.in-range:not(.range-start):not(.range-end) {background:var(--ui-tint)!important;color:var(--ui-accent)!important}
  html[data-appearance] body .filter-pop.date-pop :is(.date-focus-number,.date-focus-month,.date-focus-weekday,.date-heading h3,.calendar-day,.calendar-head) {color:var(--ui-ink)!important}
  html[data-appearance] body .filter-pop.date-pop .date-focus-card {background:linear-gradient(145deg,var(--ui-soft),var(--ui-panel))!important;border-radius:18px!important;box-shadow:none!important}
  html[data-appearance] body .filter-pop.date-pop img {filter:var(--ui-icon-filter)!important}
  html[data-appearance] body .filter-pop.date-pop .date-actions {border-color:var(--ui-line)!important}
  html[data-appearance] body .appearance-mini {--sample-bg:#faf3e8;--sample-card:#f1e3cf;--sample-mark:#a87131}
  html[data-appearance] body .appearance-option[data-sample=dark] .appearance-mini {--sample-bg:#080d17;--sample-card:#16232a;--sample-mark:#64d743}
  html[data-appearance] body .appearance-option[data-sample=light] .appearance-mini {--sample-bg:#f3f5f8;--sample-card:#fff;--sample-mark:#2875c5}
  @media(max-width:1100px) {
    html[data-appearance] body .maxdash-header>.topbar-first {gap:16px!important;grid-template-columns:auto minmax(100px,1fr) auto!important}
    html[data-appearance] body .maxdash-header .brand-subtitle {display:none!important}
    html[data-appearance] body .maxdash-header .toolbar #dateSelect>span {max-width:150px}
  }
  @media(max-width:760px) {
    html[data-appearance] body .maxdash-header>.topbar-first {display:flex!important;flex-wrap:wrap!important;gap:12px 8px!important}
    html[data-appearance] body .maxdash-header>.topbar-first>.maxdash-brand {order:0!important;flex:1 1 100px!important}
    html[data-appearance] body .maxdash-header>.topbar-first>.toolbar {display:contents!important}
    html[data-appearance] body .maxdash-header .toolbar #profile {order:1!important}
    html[data-appearance] body .maxdash-header .toolbar .theme-shortcut {order:2!important}
    html[data-appearance] body .maxdash-header .toolbar #notifications {order:3!important}
    html[data-appearance] body .maxdash-header .toolbar #languageToggle {order:4!important}
    html[data-appearance] body .maxdash-header .ref-global-search {order:5!important;flex:1 1 calc(100% - 68px)!important;width:auto!important}
    html[data-appearance] body .maxdash-header .toolbar #dateSelect {order:6!important;flex:0 0 52px!important;width:52px!important;padding:0 12px!important}
    html[data-appearance] body .maxdash-header .toolbar #dateSelect>span,html[data-appearance] body .maxdash-header #dateSelect>img:last-child {display:none!important}
    html[data-appearance] body .maxdash-header .toolbar :is(#profile,#notifications,.theme-shortcut) {width:36px!important;height:36px!important;min-height:36px!important}
    html[data-appearance] body .maxdash-header .toolbar #languageToggle {height:36px!important;min-height:36px!important;min-width:42px!important;font-size:11px!important;padding:0 8px!important}
    html[data-appearance] body .maxdash-header .brand-name {font-size:19px!important}
    html[data-appearance] body .maxdash-header .brand-mark {width:36px!important;height:35px!important}
    html[data-appearance] body .maxdash-header .brand-mark img {width:153px!important;left:-1.7px!important;top:-2.5px!important}
    html[data-appearance] body .reference-home .ref-metrics {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  }
  @media(max-width:600px) {
    html[data-appearance] body .reference-home .ref-card-rows .ref-tile {min-height:266px!important;padding:48px 12px 14px!important;gap:12px!important}
    html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-copy b {font-size:17px!important;line-height:1.6!important}
    html[data-appearance] body .reference-home .ref-card-rows .ref-tile .ref-tile-copy small {font-size:12px!important;line-height:1.85!important}
    html[data-appearance] body .reference-home .ref-metrics .ref-metric {grid-template-columns:34px minmax(0,1fr)!important;gap:10px!important;padding:16px 12px!important;min-height:168px!important}
    html[data-appearance] body .reference-home .ref-metrics .ref-metric-icon {width:34px!important;height:34px!important;padding:8px!important}
    html[data-appearance] body .reference-home .ref-metrics .ref-metric-label {font-size:14px!important}
    html[data-appearance] body .reference-home .ref-metrics .ref-metric strong {font-size:25px!important}
    html[data-appearance] body .reference-home .ref-metrics .ref-metric small {font-size:11px!important}
    html[data-appearance] body .reference-home .ref-welcome p {font-size:14px!important}
  }
  @media(max-width:360px) {
    html[data-appearance] body .maxdash-header .brand-name {font-size:17px!important}
    html[data-appearance] body .maxdash-header>.topbar-first>.maxdash-brand {gap:6px!important;flex-basis:90px!important}
    html[data-appearance] body .maxdash-header .toolbar .theme-shortcut {display:none!important}
  }
  @media(prefers-reduced-motion:reduce) {
    html[data-appearance] body [data-visual-tone] {transition:none!important;transform:none!important}
  }
}
/* Always last: permission and search visibility must win over display:flex/grid. */
html[data-appearance] body .reference-home .ref-card-rows .ref-tile[hidden],html[data-appearance] body [data-visual-tone][hidden] {display:none!important}
@media screen {
  html[data-appearance] body .reference-home .ref-metrics .ref-metric-icon.max-hub-icon::after {inset:8px}
  @media(max-width:600px) {
    html[data-appearance] body .reference-home .ref-card-rows .ref-tile {padding-top:44px!important}
    html[data-appearance] body .reference-home .ref-tile-icon.max-hub-icon {width:56px!important;height:56px!important}
  }
}