/* Presentation only. The production HTML owns section order and all data. */
:root {
  color-scheme:dark;
  --bg:#14221e;--bg1:#192c25;--bg2:#1d3029;--bg3:#263d33;--bg4:#334c41;
  --text:#edf3ed;--text2:#b6c6bc;--text3:#a0b4a8;--white:#f2f5ee;
  --border:#ffffff0d;--border2:#ffffff20;
  --blue:#7bcab0;--blueD:#60af95;--blueBg:#7bcab015;--blueBd:#7bcab035;--blueTxt:#a2dfc8;
  --green:#6dcc9f;--greenD:#399770;--greenTxt:#9fe3bf;--greenBg:#6dcc9f12;--greenBd:#6dcc9f35;
  --red:#ec9b88;--redD:#d67b67;--redTxt:#f0aa99;--redBg:#ec9b8812;--redBd:#ec9b8835;
  --amber:#dfbc70;--amberD:#bc933b;--amberTxt:#ead095;--amberBg:#dfbc7012;--amberBd:#dfbc7035;
  --r:18px;--rs:10px;
  --shadow:0 3px 12px #0000000a;--shadow-md:0 12px 30px #00000018;--shadow-lg:0 24px 80px #00000040;
}
html[data-theme=light] {
  color-scheme:light;
  --bg:#f5f5ef;--bg1:#fffefa;--bg2:#fffefa;--bg3:#f0f2eb;--bg4:#e5e9df;
  --text:#203a30;--text2:#596e60;--text3:#66766a;--white:#17382b;
  --border:#243e3010;--border2:#243e301c;
  --green:#218060;--greenD:#17694b;--greenTxt:#218060;--greenBg:#2180600d;--greenBd:#21806025;
  --red:#b95440;--redD:#a84532;--redTxt:#b95440;--redBg:#c76b550d;--redBd:#c76b5525;
  --amber:#946e20;--amberD:#805c16;--amberTxt:#946e20;--amberBg:#b58b320d;--amberBd:#b58b3235;
  --blue:#28775e;--blueD:#1b6049;--blueBg:#28775e0d;--blueBd:#28775e35;--blueTxt:#28775e;
  --shadow:0 3px 12px #203a3003;--shadow-md:0 12px 30px #203a3009;--shadow-lg:0 24px 80px #203a3020;
}
body{font-size:13px;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit;}
button,[role=button]{touch-action:manipulation;}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
button{cursor:pointer;}
button:disabled{cursor:wait;opacity:.65;}
.studio-icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle;pointer-events:none;}
.studio-mark{display:inline-block;width:26px;height:26px;flex-shrink:0;border:1px solid #c6dcb3;transform:rotate(-22deg);border-radius:8px;box-shadow:inset 7px 0 0 #c6dcb3;}
.studio-eyebrow{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--text3);font-weight:500;margin-bottom:12px;}
.studio-chip{font-size:10px;border:1px solid var(--border2);border-radius:30px;padding:9px 13px;color:var(--text2);white-space:nowrap;}
.studio-chip:empty{display:none;}
/* Navigation uses the existing destinations and handlers. */
.sb{width:232px;min-width:232px;background:#173a2d!important;border:0;padding:0 12px;color:#eaf1e6;}
.logo{padding:28px 15px 29px;border-bottom:1px solid #ffffff14;}
.logo-name{color:#edf1df!important;letter-spacing:2px;font-size:18px;display:flex;align-items:center;gap:10px;}
.logo-tag{font:9px Inter,sans-serif;letter-spacing:1.8px;color:#a3b5a7!important;margin-top:12px;}
.nav{padding:17px 0;}
.ns{color:#a2baa9!important;font-size:9px;letter-spacing:1.8px;padding:22px 14px 10px;}
.sb .ni{width:100%;color:#c6d6c9!important;padding:12px 14px;margin:3px 0;border:0;border-radius:9px;background:transparent;font:inherit;font-size:12px;text-align:left;gap:12px;min-height:44px;border-left:0;appearance:none;user-select:none;-webkit-user-select:none;transition:background .18s,color .18s,transform .1s;}
.sb .ni:hover{background:#ffffff0c!important;color:#fff!important;}
.sb .ni:active{background:#ffffff16!important;transform:translateY(1px);}
.sb .ni.active{background:#d9e6be!important;color:#1c3c2b!important;font-weight:600;border-left:0;padding-left:14px;box-shadow:0 4px 14px #00000008;}
.sb .ni.active:active{background:#cfdeb1!important;}
.sb .ni .studio-icon{width:17px;height:17px;opacity:.85;}
.sbf{color:#a6bcae!important;border-color:#ffffff15!important;font-size:10px;background:transparent;}
.sbf .bst{color:#a6bcae;}
.sbf .bbtn{color:#d9e6be;background:#ffffff09;border-color:#ffffff20;}
.owner-dashboard .topbar{left:232px;height:72px;background:var(--bg)!important;border-bottom:1px solid var(--border);padding:0 32px;gap:12px;box-shadow:none;}
.topbar-right{gap:10px;min-width:0;}
.sb-store{padding:14px 3px 0;}
.store-switcher{background:#ffffff0c;border:1px solid #ffffff1a!important;border-radius:9px;padding:10px 12px;gap:9px;min-width:0;width:100%;}
.store-switcher:hover{background:#ffffff14;}
.sw-name{font-size:13px;font-weight:600;color:#edf1df;overflow-wrap:anywhere;}
.sw-arrow{margin-left:auto;color:#a3b5a7;}
.sw-dropdown{left:3px;right:3px;min-width:0;padding:9px;border-radius:14px;box-shadow:var(--shadow-lg);}
.sw-item{border-radius:8px;padding:12px;gap:8px;}
.force-btn,.refresh-btn,.logout-btn,.theme-toggle{font-family:inherit;border:1px solid var(--border2);background:var(--bg2);border-radius:10px;min-height:36px;flex-shrink:0;}
.force-btn,.refresh-btn,.logout-btn{padding:8px 11px;font-size:11px;}
.force-btn:hover,.refresh-btn:hover,.logout-btn:hover,.theme-toggle:hover{background:var(--bg3);border-color:var(--blueBd);}
.refresh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.theme-toggle{width:36px;color:var(--text2);}
.main{padding:105px 34px 44px;min-width:0;container-type:inline-size;}
.ph{margin-bottom:27px;gap:16px;}
.pt{font-size:30px;letter-spacing:-1.2px;font-weight:600;line-height:1.25;}
.ps{font-family:inherit;font-size:12px;margin-top:8px;color:var(--text3);line-height:1.6;}
/* The owner header is title-block | scope-chip. Centred only while it is a
   row: index.html turns it into a column under 768px, where the cross axis
   is horizontal and `center` would centre the whole title block. */
#owner-view .ph{align-items:center;}
@media(max-width:768px){#owner-view .ph{align-items:flex-start;}}
.pbar{padding:13px 15px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;gap:9px;margin-bottom:23px;box-shadow:none;max-width:100%;}
.pbar label{font-size:9px;letter-spacing:1px;margin-right:4px;}
.pbar input{background:var(--bg2);font-size:11px;border-radius:7px;min-height:34px;}
.pill-btns{background:var(--bg3);padding:3px;border-radius:9px;gap:2px;max-width:100%;flex-wrap:wrap;}
.pill{font-family:inherit;border:0;padding:9px 11px;border-radius:7px;font-size:11px;color:var(--text2);min-height:34px;}
.pill.active{background:var(--bg2);color:var(--white);box-shadow:0 2px 5px #203a3010;}
.pill:hover{background:var(--bg4);color:var(--text);}
.btn{border-radius:8px;font-family:inherit;font-size:11px;font-weight:500;padding:9px 14px;min-height:34px;}
.btn-p{background:var(--blueD);color:#fff;border-color:var(--blueD);box-shadow:var(--shadow);}
.btn-p:hover{background:var(--blue);}
input,select,textarea{min-width:0;max-width:100%;border-radius:8px;border-color:var(--border2);padding:8px 10px;}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blueBg);}
.metrics{gap:18px;margin-bottom:24px;}
.metrics,.g2,.margin-grid,.sup-row,.metrics>*,.g2>*,.margin-grid>*,.sup-row>*{min-width:0;}
.metric,.metric-group{padding:22px;border-radius:16px;border:1px solid var(--border2);box-shadow:var(--shadow);min-width:0;max-width:100%;}
.metric{container-type:inline-size;transition:transform .18s,box-shadow .18s,border-color .18s;}
.metric:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--blueBd);}
.ml{font-size:11px;font-weight:500;letter-spacing:.2px;color:var(--text2);text-transform:none;margin-bottom:16px;line-height:1.5;}
.mv,.metric .mv:not(.sm):not(.dim){font-family:Inter,sans-serif;font-weight:600;font-size:clamp(22px,11cqi,32px);letter-spacing:-1px;line-height:1.2;overflow-wrap:anywhere;}
.mv.sm{font-family:Inter,sans-serif;letter-spacing:-.5px;font-size:clamp(18px,9cqi,26px);line-height:1.3;}
.md{font-family:inherit;font-size:11px;margin-top:10px;color:var(--text3);line-height:1.6;}
.metric>div[style*="justify-content:space-between"]{flex-wrap:wrap;gap:6px 12px;align-items:baseline!important;}
.metric>div[style*="justify-content:space-between"]>.ml{margin-bottom:0;}
.compare-block{margin-top:19px;padding-top:13px;}
.cmp{font-family:inherit;font-size:11px;flex-wrap:wrap;gap:5px 12px;line-height:1.6;}
.cmp-val{font-family:inherit;font-weight:500;margin-left:auto;}
.card{border-radius:18px;padding:24px;border-color:var(--border2);box-shadow:var(--shadow);margin-bottom:24px;}
.ch{margin-bottom:22px;flex-wrap:wrap;gap:8px 12px;align-items:baseline;}
.ct{font-family:Inter,sans-serif;font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--text);line-height:1.5;}
.card-source{white-space:normal;line-height:1.6;}
.g2{gap:22px;}
.cwrap{margin-top:8px;}
.cwrap,canvas{max-width:100%;}
.donut-wrap{height:290px;}
.chan-row{gap:8px;line-height:1.6;flex-wrap:wrap;}
.chan-val{margin-left:auto;}
.margin-line,.margin-total,.commission-row{gap:8px 14px;flex-wrap:wrap;line-height:1.6;}
.margin-line span:last-child,.margin-total span:last-child{margin-left:auto;}
.infobox,.status-banner{line-height:1.7;}
.status-banner{padding:10px 12px;border:1px solid var(--border2);border-radius:10px;background:var(--bg2);align-items:flex-start;}
.status-banner .badge{margin-top:1px;}
.status-banner .mini-spin{margin-top:4px;}
.data-error,.error-box,.loading,.no-data{border-radius:18px;line-height:1.7;}
.vtabs{gap:8px;}
.vtab{padding:12px 16px;color:var(--text2);}
.tbl-wrap{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;}
table{font-size:12px;}
thead th{font-family:Inter,sans-serif;font-size:10px;letter-spacing:.5px;color:var(--text2);padding:13px 12px;background:var(--bg3);}
tbody td{padding:14px 12px;border-color:var(--border);}
/* Same store information, now in a grid; no demo trends or fake totals. */
/* Was `.card:has(#owner-store-list)`. :has() lands a year later than the
   container queries below on every engine, and this one rule is the
   difference between the store grid sitting on the page and sitting in a
   stray card, so it is driven by a class on the element instead. */
.card.card-bare{background:transparent;border:0;box-shadow:none;padding:7px 0 0;}
.card.card-bare>.ch{margin-bottom:18px;}
.card.card-bare .ct{font-size:17px;letter-spacing:-.3px;}
#owner-store-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.owner-store-card{display:flex;flex-direction:column;min-width:0;position:relative;padding:24px;text-align:left;font-family:inherit;background:var(--bg2);border:1px solid var(--border2);border-radius:18px;box-shadow:var(--shadow);color:var(--text);transition:transform .18s,box-shadow .18s,border-color .18s;}
.owner-store-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--blueBd);border-color:color-mix(in srgb,var(--store-color,var(--blue)) 45%,var(--border2));}
.store-row-left{gap:12px;align-items:center;margin-bottom:26px;min-width:0;}
.store-row-name{font-size:15px;letter-spacing:-.3px;overflow-wrap:anywhere;}
.store-row-niche{font-size:11px;color:var(--text3);margin-top:5px;}
/* Each store keeps its own accent (the same colour the sidebar and the
   Revenue-by-store bars already use for it), so a card, its emblem and its
   sparkline read as one store rather than six identical green tiles.
   --store-color is set inline per card; --blue is the fallback for anything
   rendered without one. */
.store-emblem{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex-shrink:0;color:var(--store-color,var(--blue));background:var(--blueBg);background:color-mix(in srgb,var(--store-color,var(--blue)) 14%,transparent);}
.store-emblem .studio-icon{width:23px;height:23px;}
.store-row-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;width:100%;margin-top:auto;}
.owner-store-card .store-kpi{display:flex;flex-direction:column;gap:7px;min-width:0;}
.owner-store-card .store-kpi:first-child{grid-column:1/-1;padding-bottom:18px;border-bottom:1px solid var(--border);}
.owner-store-card .store-kpi-val{font-family:Inter,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.5px;overflow-wrap:anywhere;}
.owner-store-card .store-kpi:first-child .store-kpi-val{font-size:30px;letter-spacing:-1px;}
.owner-store-card .store-kpi-lbl{font-size:10px;font-family:inherit;color:var(--text3);text-transform:none;}
.store-card-arrow{margin-left:auto;width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--border2);border-radius:50%;color:var(--text3);}
/* Revenue trend for the selected period, drawn under the KPI row. Inline
   SVG, no library: it takes the card's --store-color through currentColor. */
.store-spark{display:block;width:100%;height:44px;margin:20px 0 0;
  /* The store accents are the original vivid set; at full chroma a solid
     2px stroke of one is the loudest thing on an otherwise muted page.
     Pulling each toward the body text colour keeps the six distinguishable
     while letting the figure above stay the loudest element on the card. */
  color:var(--store-color,var(--blue));
  color:color-mix(in srgb,var(--store-color,var(--blue)) 78%,var(--text3));}
.osc-footer{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:10px;color:var(--text3);}
.osc-footer>span:last-child{color:var(--text2);font-weight:500;}
.owner-store-card:hover .osc-footer>span:last-child{color:var(--store-color,var(--blue));}
.owner-store-card.disconnected{min-height:230px;}
.owner-store-card.disconnected .store-row-right{display:flex;}
.owner-store-card.disconnected .store-kpi:first-child{border:0;padding:0;}
#owner-view>.metrics>.metric:first-child{background:#214936;border-color:#214936;}
#owner-view>.metrics>.metric:first-child .ml,#owner-view>.metrics>.metric:first-child .md,#owner-view>.metrics>.metric:first-child .cmp-lbl{color:#b9cebe;}
#owner-view>.metrics>.metric:first-child .mv.green{color:#edf4dc;}
#owner-view>.metrics>.metric:first-child .mv.red,#owner-view>.metrics>.metric:first-child .dn{color:#ffb4a2;}
#owner-view>.metrics>.metric:first-child .up{color:#cbe3b7;}
#owner-view>.metrics>.metric:first-child .compare-block{border-color:#ffffff20;}
/* Actual password/PIN screens, styled as the reference's workspace entrance. */
#pw-gate,#login-screen,html[data-theme=light] #pw-gate,html[data-theme=light] #login-screen{background:var(--bg)!important;padding:32px;overflow-y:auto;}
.studio-welcome{width:min(1050px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:600px;background:var(--bg2);border:1px solid var(--border2);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);margin:auto;}
.studio-hero{background:#173a2d;color:#edf2df;padding:45px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0;text-align:left;}
.studio-wordmark{font-size:18px;letter-spacing:3px;display:flex;align-items:center;gap:12px;font-weight:600;}
.studio-hero h1{font-size:48px;line-height:1.1;letter-spacing:-2px;font-weight:500;margin:80px 0 20px;max-width:380px;}
.studio-hero p{font-size:13px;line-height:1.9;color:#b5cbb9;max-width:315px;}
/* Hero artwork, as in the reference: a rising bar figure sitting inside a
   faint orbit ring. Decorative only (aria-hidden) — the heights are fixed,
   not data. */
.studio-orbit{position:relative;height:170px;margin-top:26px;display:flex;align-items:flex-end;gap:13px;padding:20px 15px;border-bottom:1px solid #ffffff1a;}
.studio-orbit::before{content:'';position:absolute;width:225px;height:225px;border:1px solid #d8e6b81a;border-radius:50%;left:73px;top:-45px;}
.studio-orbit i{display:block;flex:1;min-width:0;background:linear-gradient(0deg,#b7d39722,#c7dca3);border-radius:6px 6px 0 0;position:relative;}
.studio-hero-footer{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#b5cbb9;margin-top:auto;padding-top:24px;line-height:1.8;}
.studio-access,.pw-wrap,.login-wrap{padding:45px 38px;width:100%;max-width:none;display:flex;flex-direction:column;justify-content:center;text-align:left;min-width:0;}
.pw-logo,.login-logo{font-size:26px;font-weight:600;letter-spacing:-.8px;color:var(--text)!important;text-align:left;margin-bottom:12px;}
.pw-wrap .studio-access-note{color:var(--text3);font-size:12px;line-height:1.8;margin-bottom:26px;}
.pw-wrap input[type=password],html[data-theme=light] .pw-wrap input[type=password],.gate input[type=password]{background:var(--bg3);color:var(--text);border:1px solid var(--border2);border-radius:10px;padding:14px;text-align:left;letter-spacing:1px;min-height:46px;}
.pw-wrap button,.gate button{background:var(--blueD);color:#fff;border-radius:10px;min-height:44px;}
.login-sub,.owner-role,.store-niche,.login-footer{font-family:inherit;color:var(--text3)!important;line-height:1.7;}
.login-sub{text-align:left;margin-bottom:28px;}
.section-label{font-size:9px;letter-spacing:1.5px;color:var(--text3)!important;}
.owner-card{border:1px solid var(--blueBd);background:var(--blueBg);border-radius:14px;padding:20px;color:var(--text);}
.owner-card:hover{background:var(--bg3);}
.owner-avatar{background:var(--blueD);color:#eaf1dc;border-radius:12px;}
.owner-name,.store-name{color:var(--text)!important;}
.store-card{display:flex;align-items:center;gap:12px;min-width:0;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:15px 14px;}
.store-card:hover{border-color:var(--blue);border-color:color-mix(in srgb,var(--store-color,var(--blue)) 45%,var(--border2));background:var(--bg3);}
.store-card>div:last-child{min-width:0;}
.store-card .store-emblem{width:34px;height:34px;border-radius:10px;}
.store-card .store-emblem .studio-icon{width:18px;height:18px;}
.store-card .store-niche{margin-top:3px;}
.store-card-note{font-size:9px;letter-spacing:.4px;color:var(--text3);margin-top:6px;}
.gate{max-width:1050px;width:calc(100% - 48px);margin:8vh auto;text-align:left;}
.gate h2{font-size:27px;font-weight:600;letter-spacing:-1px;margin-bottom:12px;}
.gate .studio-access>p{font-size:12px;color:var(--text3);line-height:1.8;margin-bottom:24px;}
/* Switching page is a swap of .active, with no motion of its own — the
   reference's short fade makes it read as a transition instead of a flash.
   Opted out wholesale by the reduced-motion block at the bottom. */
#main-content .pg.active,#owner-view.active{animation:studio-in .3s ease both;}
@keyframes studio-in{from{opacity:.35;transform:translateY(7px);}to{opacity:1;transform:none;}}
/* The owner view hides the sidebar footer by emptying it; without this the
   emptied box still reserves its padding and border. */
.sbf:empty{display:none!important;}
@container(min-width:860px){.m4 .metric{padding:18px;}}
/* Ad-team remains a single, ordered, role-scoped page. */
.adteam-dashboard .wrap{max-width:1200px;padding:105px 30px 60px;container-type:inline-size;}
.adteam-dashboard .topbar{position:fixed;top:0;left:0;right:0;height:72px;margin:0;padding:0 32px;background:var(--bg)!important;border-bottom:1px solid var(--border);z-index:100;box-shadow:none;}
.adteam-dashboard .ph{display:flex;align-items:center;justify-content:space-between;}
.team-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.team-tag{font-family:inherit;line-height:1.6;margin-top:0;}
.team-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-left:auto;}
.adteam-dashboard #period-bar{display:flex;align-items:center;flex-wrap:wrap;margin:0;}
.adteam-dashboard #period-bar[hidden]{display:none;}
.adteam-dashboard #period-bar .pill-btns{margin-bottom:0;}
.adteam-dashboard .status-banner{margin:0 0 10px;}
.adteam-dashboard .status-banner>span:last-child{min-width:0;}
.store-chip{border-radius:10px;max-width:100%;}
.metric-group .group-title{font-size:11px;font-weight:500;letter-spacing:.4px;text-transform:none;line-height:1.6;}
.metric.own{box-shadow:var(--shadow-md);border-color:var(--blueBd);}
.metric.own::before{font-size:9px;letter-spacing:1px;}
.commission-card{background:var(--bg2);border-color:var(--greenBd);}
.commission-total{font-size:34px;letter-spacing:-1px;font-weight:600;}
.commission-badge{font-size:9px;letter-spacing:.3px;line-height:1.6;}
/* Quick search: modal semantics, native focus containment and touch targets. */
.studio-search{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 11px;border:1px solid var(--border2);border-radius:10px;background:var(--bg2);color:var(--text3);font-size:11px;min-height:36px;flex-shrink:0;}
.studio-search:hover{background:var(--bg3);border-color:var(--blueBd);}
.studio-search svg{width:16px;height:16px;}
.studio-search kbd{font:10px Inter,sans-serif;border:1px solid var(--border2);border-radius:4px;padding:2px 4px;margin-left:14px;}
.studio-dialog{margin:12vh auto auto;width:min(560px,calc(100% - 28px));max-height:76vh;max-height:76dvh;padding:0;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:18px;box-shadow:var(--shadow-lg);}
.studio-dialog::backdrop{background:#10281f77;backdrop-filter:blur(6px);}
.studio-command-head{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--border);}
.studio-command-head input{background:transparent;flex:1;min-width:0;font-size:16px;border:0;padding:8px;}
.studio-command-head button{border:1px solid var(--border2);background:var(--bg3);color:var(--text2);border-radius:7px;padding:8px;font-size:11px;min-width:44px;min-height:44px;}
.studio-results{padding:9px;overflow-y:auto;max-height:48vh;max-height:48dvh;overscroll-behavior:contain;}
.studio-result{width:100%;display:flex;gap:14px;align-items:center;padding:14px;text-align:left;background:transparent;color:var(--text);border-radius:9px;cursor:pointer;font-size:13px;min-height:54px;}
.studio-result:hover,.studio-result[aria-selected=true]{background:var(--bg3);box-shadow:inset 3px 0 var(--blue);}
.studio-result span{flex:1;min-width:0;overflow-wrap:anywhere;}
.studio-result small{display:block;color:var(--text3);font-size:11px;margin-top:5px;}
.studio-result b{font-weight:400;color:var(--text3);}
.studio-command-foot{padding:13px 20px;border-top:1px solid var(--border);color:var(--text3);font-size:11px;line-height:1.6;}
.studio-empty{padding:30px;color:var(--text3);text-align:center;font-size:13px;}
.studio-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
/* Container breakpoints retain shrinkable Chart.js tracks on resize. */
@container(max-width:1050px){.m5{grid-template-columns:repeat(3,minmax(0,1fr));}}
@container(max-width:900px){#owner-store-list{grid-template-columns:repeat(2,minmax(0,1fr));}.m4{grid-template-columns:repeat(2,minmax(0,1fr));}.margin-grid{grid-template-columns:minmax(0,1fr);}}
@container(max-width:700px){.g2{grid-template-columns:minmax(0,1fr);}.m3,.m5{grid-template-columns:repeat(2,minmax(0,1fr));}.ph .pbar{width:100%;}.ph{align-items:stretch;}}
@container(max-width:540px){.m2,.m3,.m4,.m5{grid-template-columns:minmax(0,1fr);}#owner-store-list{grid-template-columns:minmax(0,1fr);}#acc-totals-bar,#fc-totals-bar{grid-template-columns:minmax(0,1fr)!important;}.owner-store-card.disconnected{min-height:185px;}}
@media(min-width:1600px){.main{padding-left:50px;padding-right:50px;}.owner-dashboard .topbar{padding-left:50px;padding-right:50px;}}
@media(max-width:1150px){.studio-search span,.studio-search kbd{display:none;}.owner-dashboard .topbar,.adteam-dashboard .topbar{padding:0 22px;}.main{padding:99px 23px 32px;}.adteam-dashboard .wrap{padding-top:99px;}.studio-hero{padding:35px;}.studio-hero h1{font-size:42px;}.studio-access,.pw-wrap,.login-wrap{padding:35px 26px;}}
@media(max-width:768px){
  #sidebar{width:232px;min-width:232px;transform:translateX(-250px);}#sidebar.open{transform:translateX(0);}
  .owner-dashboard .topbar,.adteam-dashboard .topbar{left:0;height:auto;min-height:72px;padding:10px 14px;gap:8px;flex-wrap:wrap;}
  .topbar-right{gap:6px;}
  .main{padding:100px 18px 28px;}
  .studio-search{padding:8px;}
  .force-btn,.refresh-btn,.logout-btn{padding:8px;font-size:10px;}
  .pt{font-size:27px;}.metric,.card{padding:20px;}.ph{margin-bottom:22px;}
  .pbar{padding:10px;flex-wrap:wrap;overflow:visible;}
  .pill-btns{flex-wrap:wrap;flex-shrink:1;}.pill{padding:9px 10px;}
  #custom-dates,#mkt-custom-dates,.custom-dates{flex-wrap:wrap;max-width:100%;}
  .donut-wrap{height:280px;}
  .studio-welcome{grid-template-columns:minmax(0,1fr);min-height:0;max-width:560px;}
  .studio-hero{padding:28px;}.studio-hero h1{font-size:34px;margin:36px 0 14px;max-width:330px;}
  .studio-orbit{display:none;}.studio-hero-footer{padding-top:22px;}
  .studio-access,.pw-wrap,.login-wrap{padding:30px 25px;}
  #pw-gate,#login-screen,html[data-theme=light] #pw-gate,html[data-theme=light] #login-screen{padding:16px;align-items:flex-start;}
  .studio-wordmark{font-size:15px;}.studio-hero p{font-size:12px;}
  .gate{margin:16px auto;width:calc(100% - 32px);}.adteam-dashboard .wrap{padding:100px 18px 45px;}
  .adteam-dashboard .ph{flex-direction:column;align-items:stretch;}
  .adteam-dashboard #period-bar{width:100%;}
  .studio-dialog{margin-top:6vh;}
}
@media(max-width:480px){
  .owner-dashboard .topbar{flex-wrap:nowrap;}
  .owner-dashboard .topbar .topbar-right{width:auto;justify-content:flex-end;}
  .adteam-dashboard .topbar{flex-wrap:nowrap;}
  .adteam-dashboard .team-actions{width:auto;justify-content:flex-end;margin-left:auto;}
  .theme-toggle,.studio-search,.ham-btn,.force-btn,.refresh-btn,.logout-btn{min-height:40px;}
  .theme-toggle,.studio-search,.ham-btn{min-width:40px;}
  .adteam-dashboard .metrics{grid-template-columns:minmax(0,1fr);}
  .store-grid{grid-template-columns:minmax(0,1fr);}
  input[type=date]{min-height:38px;}
}
@media(max-width:349px){
  .owner-dashboard .topbar{min-height:104px;flex-wrap:wrap;}
  .owner-dashboard .topbar .topbar-right{width:100%;}
  .owner-dashboard .main{padding-top:128px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .metric:hover,.owner-store-card:hover,.store-card:hover{transform:none;}
}

.store-row-left{display:flex;width:100%;}
.store-row-left>span:nth-child(2){min-width:0;}
.adteam-dashboard .metric-group .sub{container-type:inline-size;}
.adteam-dashboard #custom-dates button{color:#fff!important;background:var(--blueD)!important;}
.owner-store-card .store-kpi{text-align:left;}
.owner-store-card .store-kpi:last-child:not(:first-child){text-align:right;}
#owner-view>.metrics>.metric:first-child .mv{color:#edf4dc;}
#owner-view>.metrics>.metric:first-child .mv.red{color:#ffb4a2;}

.sb .ni>span[style*="font-size:8px"]{color:#a2baa9!important;}
/* The ROAS ladder's colours are literals in both HTML files (kept in sync
   there on purpose) and land as inline styles. They were remapped onto the
   skin's tokens in light mode only, which left dark mode still showing the
   previous theme's electric emerald and marigold. Both themes now. */
[style*="color:#fbbf24"]{color:var(--amber)!important;}
[style*="color:#fb923c"]{color:var(--amberD)!important;}
html[data-theme=light] [style*="color:#fb923c"]{color:#a95b24!important;}
[style*="color:#f87171"]{color:var(--red)!important;}
[style*="color:#10b981"],[style*="color:#34d399"]{color:var(--green)!important;}
@media(max-width:768px){#sidebar:not(.open){visibility:hidden;}#sidebar.open{visibility:visible;}}


/* ── TYPOGRAPHY PASS ──────────────────────────────────────────────────
   Two things the reskin left half-done.

   1. Figures. Inter's default digits are proportional, so a column of
      amounts on a finance dashboard never lines up: "€1 363 455" over
      "€664 168" puts the thousands separators in different places, and a
      figure that ticks over on refresh visibly shifts. Every element whose
      job is to state a number gets tabular digits and a slashed zero.
      Prose is left alone — proportional digits are correct in a sentence.
   2. The micro-labels beside card titles are still set in Roboto Mono
      inline, left over from the previous skin. They are prose, not
      figures; at 9px, mono reads as a second typeface dropped into the
      page. Table cells (.num/.mono) keep mono — there it IS the figure. */
.mv,.md,.cmp-val,.cmp-lbl,.store-kpi-val,.osc-footer,.mkt-bar-label,
.margin-line,.margin-total,.chan-row,.commission-total,.commission-row,
.badge,.sw-name,table,.studio-chip,.gate .num,
#acc-totals-bar,#fc-totals-bar,.metric-group{
  font-variant-numeric:tabular-nums slashed-zero;
}
.ch div[style*="Roboto Mono"],td[style*="Roboto Mono"],#funnel-period-note,
.card-source,.store-niche,.owner-role,.login-footer,.mkt-legend,.chn{
  font-family:Inter,sans-serif!important;letter-spacing:0!important;
}
.ch div[style*="Roboto Mono"],.card-source{font-size:11px!important;color:var(--text3)!important;}
.chn{font-variant-numeric:tabular-nums slashed-zero;}
/* The channel and margin rows are label/figure pairs sitting next to a
   .margin-total that the skin already sets in Inter; keeping only the rows
   in mono made one card carry two typefaces. */
.margin-line,.chan-row,.chan-val{font-family:inherit;}
.margin-line span:last-child,.chan-val{font-weight:500;color:var(--text);}

/* ── CARD AND CHART SURFACES ──────────────────────────────────────────
   The portfolio's anchor metric was a flat block of one green, the same
   weight as the two ordinary cards beside it. A soft vertical wash and a
   slightly deeper shadow give it the hierarchy it is meant to have,
   without changing its size or position in the row. */
#owner-view>.metrics>.metric:first-child{
  background:linear-gradient(160deg,#265440 0%,#1e4232 60%,#1b3c2d 100%);
  border-color:#2b5a45;box-shadow:0 10px 28px #0b241a1f;
}
#owner-view>.metrics>.metric:first-child:hover{
  border-color:#37705580;box-shadow:0 16px 38px #0b241a2b;
}
/* A doughnut's right-hand legend sat hard against the ring. */
.donut-wrap{padding:4px 0;}
/* Card titles get a touch more air from the content below them. */
.card>.ch{padding-bottom:2px;}
.ct{letter-spacing:-.1px;}
/* Badges were pill-shaped at a radius that no longer matches anything else
   on the page; bring them onto the skin's small radius and give the text
   room to breathe. */
.badge{border-radius:7px;padding:4px 9px;font-weight:500;letter-spacing:.1px;}
/* A quieter row hover than the previous skin's flat !important fill. */
tbody tr:hover td{background:var(--bg3)!important;}
/* Scrollbars still carried the previous theme's slate. */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--text3);background-clip:content-box;}
*{scrollbar-color:var(--border2) transparent;scrollbar-width:thin;}


/* ── SINGLE-DAY READOUT AND EMPTY CHARTS ──────────────────────────────
   Both sit inside a .cwrap, which is a fixed-height box the canvas used to
   fill, so both are absolutely positioned to fill it in the canvas's place. */
.cwrap{position:relative;}
.day-readout,.chart-empty{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:6px;padding:8px 12px;
}
.day-readout-val{
  font-size:clamp(26px,7cqi,34px);font-weight:600;letter-spacing:-1px;line-height:1.1;
  color:var(--white);font-variant-numeric:tabular-nums slashed-zero;
}
.day-readout-sub{font-size:11px;color:var(--text3);letter-spacing:.2px;}
.day-readout-cmp{
  font-size:11px;color:var(--text3);line-height:1.6;margin-top:6px;
  padding-top:10px;border-top:1px solid var(--border);
  font-variant-numeric:tabular-nums slashed-zero;
}
.day-readout-cmp .up{color:var(--green);font-weight:500;}
.day-readout-cmp .dn{color:var(--red);font-weight:500;}
.day-readout-cmp .flat{color:var(--text3);}
/* Deliberately quiet: an empty period is an ordinary state, not a failure,
   so this must not read like the red data-error box. */
.chart-empty{color:var(--text3);font-size:11px;line-height:1.6;gap:10px;}
.chart-empty svg{width:26px;height:26px;opacity:.45;}
.chart-empty span{max-width:26ch;}


/* ── REVENUE BREAKDOWN CARD ───────────────────────────────────────────
   Ring + legend table + summary strip. Mobile-first: one column, ring on top.
   It reflows on the width of the CARD (not the viewport), because the sidebar
   and the page padding decide how much room a card really gets. Where
   container queries are missing it simply stays stacked, which is always
   safe. Colours reach it only through --bd-c, set inline per row from
   CHART_THEME.breakdown, so the swatch, the tint and the slice cannot differ. */
.bd-card{container-type:inline-size;}
.bd-head{display:block;margin-bottom:22px;}
.bd-title{font-size:20px;font-weight:600;letter-spacing:-.5px;line-height:1.25;color:var(--white);}
.bd-sub{font-size:12px;line-height:1.5;color:var(--text3);margin-top:6px;}
.bd-body{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center;}
/* Square, sized by width alone: Chart.js fills whatever box it is given, so
   the ring scales with the card and never fights its own canvas for height. */
.cwrap.bd-ring{height:auto;aspect-ratio:1/1;width:min(100%,400px);margin:0 auto;}
.bd-table{display:flex;flex-direction:column;gap:2px;min-width:0;}
.bd-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto 3.6em;align-items:center;column-gap:12px;
  padding:11px 12px;border-radius:12px;transition:background .15s;outline-offset:-2px;}
.bd-row.on,.bd-row:focus-visible{background:var(--bg3);}
.bd-net{background:var(--bg3);}
.bd-net{background:color-mix(in srgb,var(--bd-c) 12%,transparent);}
.bd-net.on{background:color-mix(in srgb,var(--bd-c) 20%,transparent);}
.bd-dot{width:14px;height:14px;border-radius:50%;background:var(--bd-c);}
.bd-name{font-size:13px;font-weight:500;color:var(--text);line-height:1.35;overflow-wrap:anywhere;}
.bd-name small{display:block;font-size:11px;font-weight:400;color:var(--text3);margin-top:2px;}
.bd-amt,.bd-pct{font-variant-numeric:tabular-nums slashed-zero;text-align:right;white-space:nowrap;}
.bd-amt{font-size:14px;font-weight:600;color:var(--white);}
.bd-pct{font-size:13px;color:var(--text3);}
.bd-foot{display:flex;flex-direction:column;margin-top:24px;background:var(--bg3);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.bd-foot-main,.bd-foot-trend{display:flex;align-items:center;gap:14px;padding:16px 18px;min-width:0;}
.bd-foot-main{flex:1 1 auto;}
.bd-foot-trend{border-top:1px solid var(--border2);}
.bd-foot-main>div,.bd-foot-trend>div{min-width:0;}
.bd-foot b{display:block;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--white);line-height:1.3;}
.bd-foot b.bd-loss{color:var(--red);}
.bd-foot span{display:block;font-size:12px;line-height:1.55;color:var(--text3);margin-top:2px;}
.bd-foot-ico{flex:0 0 auto;display:grid!important;place-items:center;width:42px;height:42px;margin:0!important;border-radius:50%;
  background:var(--bg2);border:1px solid var(--border2);color:var(--text2)!important;}
.bd-foot-ico svg{width:19px;height:19px;}
/* Same 42px column as the icon above it, so the two texts line up when stacked. */
.bd-foot-trend svg{flex:0 0 auto;box-sizing:border-box;width:42px;height:42px;padding:6px;color:var(--bd-t);}
.bd-foot-trend b{font-size:20px;color:var(--bd-t);font-variant-numeric:tabular-nums slashed-zero;}
.bd-foot-trend[data-dir=up]{--bd-t:var(--green);}
.bd-foot-trend[data-dir=dn]{--bd-t:var(--red);}
.bd-foot-trend[data-dir=flat]{--bd-t:var(--text3);}
.bd-empty .bd-table,.bd-empty .bd-foot{display:none;}
.bd-empty .cwrap.bd-ring{aspect-ratio:auto;height:190px;width:100%;}
@container (min-width:440px){
  .bd-row{column-gap:16px;padding:12px 16px;}
}
@container (min-width:560px){
  .bd-foot{flex-direction:row;}
  .bd-foot-main{padding:18px 24px;}
  .bd-foot-trend{padding:18px 28px;border-top:0;border-left:1px solid var(--border2);}
}
/* Wide card: everything about 20% smaller than the phone sizing, so the ring
   and legend sit comfortably in the box instead of filling it. */
@container (min-width:660px){
  .bd-body{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;}
  .cwrap.bd-ring{width:min(100%,320px);}
  .bd-head{margin-bottom:18px;}
  .bd-row{padding:9px 14px;}
  .bd-name{font-size:12.5px;}
  .bd-name small{font-size:10.5px;}
  .bd-amt{font-size:13px;}
  .bd-pct{font-size:12px;}
  .bd-foot{margin-top:20px;}
  .bd-foot-main,.bd-foot-trend{padding-top:14px;padding-bottom:14px;}
  .bd-foot b{font-size:15px;}
  .bd-foot-trend b{font-size:18px;}
  .bd-empty .bd-body{grid-template-columns:minmax(0,1fr);}
}
/* Refunds & Chargebacks: three stats side by side, stacked when narrow. */
.refund-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.refund-row>div{min-width:0;border-left:1px solid var(--border);padding-left:16px;}
.refund-row>div:first-child{border-left:0;padding-left:0;}
@container(max-width:620px){
  .refund-row{grid-template-columns:minmax(0,1fr);gap:0;}
  .refund-row>div{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:14px;margin-top:14px;}
  .refund-row>div:first-child{border-top:0;padding-top:0;margin-top:0;}
}

/* ── FALLBACK FOR BROWSERS WITHOUT CONTAINER QUERIES ──────────────────
   The layout above reflows on the width of .main, which is correct: the
   pane is the viewport minus a 232px sidebar, and on the owner view it can
   also be narrower still. Container queries reached Chrome/Edge 105,
   Safari 16 and Firefox 110 — anything older keeps desktop column counts
   everywhere down to index.html's own 768px media query, which leaves a
   tablet or a small laptop badly cramped.

   These mirror the container rules at viewport widths 232px larger, and
   apply ONLY where container queries are missing, so they can never
   double up with the rules above. */
@supports not (container-type: inline-size){
  @media(max-width:1290px){.m5{grid-template-columns:repeat(3,minmax(0,1fr));}}
  @media(max-width:1140px){
    #owner-store-list{grid-template-columns:repeat(2,minmax(0,1fr));}
    .m4{grid-template-columns:repeat(2,minmax(0,1fr));}
    .margin-grid{grid-template-columns:minmax(0,1fr);}
  }
  @media(max-width:940px){
    .g2{grid-template-columns:minmax(0,1fr);}
    .m3,.m5{grid-template-columns:repeat(2,minmax(0,1fr));}
    .ph{align-items:stretch;}
    .ph .pbar{width:100%;}
  }
  @media(max-width:780px){
    .m2,.m3,.m4,.m5{grid-template-columns:minmax(0,1fr);}
    #owner-store-list{grid-template-columns:minmax(0,1fr);}
    #acc-totals-bar,#fc-totals-bar{grid-template-columns:minmax(0,1fr)!important;}
  }
  /* .metric sizes its figure in cqi units, which resolve to 0 without a
     container. Give those two a plain fallback size first. */
  .mv,.metric .mv:not(.sm):not(.dim){font-size:28px;}
  .mv.sm{font-size:22px;}
  .day-readout-val{font-size:30px;}
}