/* Canonical dashboard tokens + CRM fields / Commerce selects. Page-specific layouts stay local. */
:root{--bg:#090c12;--bg-2:#0b0f17;--surface:#11161f;--surface-2:#141a25;--surface-hi:#19212e;--border:#212a39;--border-2:#283346;--border-hi:#3a4a63;--text:#e8eef6;--text-dim:#93a0b2;--text-faint:#93a0b2;--game:#e7479c;--mkt:#57d96a;--fin:#ff9f1c;--bd:#20c6d6;--bd-2:#149aa8;--up:#45d6a3;--down:#f2706f;--ff-ui:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;--ff-data:'Chakra Petch','DM Mono',ui-monospace,monospace;--rr-accent:#6c8cff;--rr-field-radius:10px;--rr-panel-radius:14px}
:root[data-rr-module="sales-bd"]{--rr-accent:var(--bd)}
:root[data-rr-module="marketing"]{--rr-accent:var(--mkt)}
:root[data-rr-module="racing-game"],:root[data-rr-module="game-admin"]{--rr-accent:var(--game)}
html body{color:var(--text);font-family:var(--ff-ui)}
html:not([data-rr-module="dashboard"]) body{background:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--rr-accent) 10%,transparent),transparent 65%),linear-gradient(180deg,var(--bg-2),var(--bg));background-attachment:fixed}
html [hidden]{display:none!important}
html .main,html .workspace,html main.content{min-width:0}
html .page-head,html .b2b-page-head{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px}
html .page-head>:first-child{min-width:0;flex:1}
html .page-head>.btn{flex:none;align-self:flex-start;margin-left:auto}
html .page-head__actions,html .head-actions{display:flex;align-items:flex-start;justify-content:flex-end;align-self:flex-start;margin-left:auto;gap:8px;flex-wrap:wrap}
html[data-rr-module] .page-head h1,html[data-rr-module] .page-head__title{font:600 28px/1.2 var(--ff-data);margin-top:0;overflow-wrap:anywhere}
html .page-head .eyebrow,html .page-head__eyebrow,html .crm-dialog__eyebrow,html .b2b-dialog__head .eyebrow,html .page-header .eyebrow,html .studio-header .eyebrow{display:none}
html[data-rr-module] .panel{border-radius:var(--rr-panel-radius);padding:16px;border-color:var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
html[data-rr-module="dashboard"] .panel{padding:12px}
html .panel__title,html .panel-head h2{font:600 14px/1.2 var(--ff-data)}
html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]),textarea){box-sizing:border-box;min-width:0;min-height:40px;border:1px solid var(--border);border-radius:var(--rr-field-radius);padding:10px 12px;background:var(--bg-2);color:var(--text);font:400 13px/1.4 var(--ff-ui);letter-spacing:normal;text-transform:none}
html textarea{resize:vertical}
html select{box-sizing:border-box;min-width:0;min-height:36px;padding:9px 28px 9px 10px;border:1px solid var(--border);border-radius:9px;background-color:var(--bg-2);color:var(--text);font:400 11.5px/1.45 var(--ff-ui);text-transform:none;letter-spacing:normal;color-scheme:dark}
html select[multiple]{padding:9px 10px}
html input:is([type="checkbox"],[type="radio"]){width:16px;height:16px;min-width:16px;accent-color:var(--rr-accent)}
html :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--rr-accent);outline-offset:3px}
html :is(.field,.b2b-field){gap:6px;min-width:0}
html .btn{box-sizing:border-box;min-height:36px;border-radius:9px;padding:9px 15px;font:600 12px/1.4 var(--ff-ui)}
html .btn--sm,html .btn.sm{padding:7px 11px;font-size:11px}
html .btn:is(.primary,.btn--primary){background:var(--rr-accent);border-color:var(--rr-accent);color:#090c12}
html .btn--danger{color:var(--down);border-color:var(--down);background:color-mix(in srgb,var(--down) 8%,var(--bg-2))}
html .btn:disabled{cursor:not-allowed}
html .btn.is-saved{color:var(--up);border-color:var(--up);background:color-mix(in srgb,var(--up) 12%,var(--bg-2))}
html :is(.filterbar,.crm-filterbar,.b2b-toolbar__filters,.filter-row,.filters,.toolbar-filters){display:flex;flex-wrap:nowrap;align-items:flex-end;gap:10px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:5px}
html :is(.filterbar,.crm-filterbar,.b2b-toolbar__filters,.filter-row,.filters,.toolbar-filters)>*{flex:0 0 auto;min-width:0}
html .crm-filterbar .crm-filter-search{flex:1 0 220px}
html .crm-filterbar .crm-filter-compact{flex:0 0 140px}
html .b2b-toolbar__filters input[type="search"]{flex:1 0 210px}
html .b2b-toolbar__filters select{max-width:220px}
html .panel__head:has(>.b2b-toolbar__filters){flex-wrap:wrap}
html .panel__head>.b2b-toolbar__filters{flex:1 0 100%;flex-wrap:nowrap;align-items:flex-end;width:100%;margin-top:8px}
html .rr-action-feedback{display:inline-block;margin:0 8px;max-width:48ch;color:var(--up);font:400 11px/1.45 var(--ff-ui);vertical-align:middle;white-space:normal;text-transform:none;letter-spacing:normal}
html .rr-action-feedback:empty{display:none}
html .rr-action-feedback.is-error{color:var(--down)}
html .rr-inline-confirm{flex:1 0 100%;box-sizing:border-box;width:100%;max-width:640px;margin:10px 0;padding:14px;border:1px solid var(--rr-accent);border-radius:10px;background:var(--surface-2);color:var(--text);white-space:normal;font:400 12px/1.5 var(--ff-ui)}
html .rr-inline-confirm.is-danger{border-color:var(--down)}
html .rr-inline-confirm p{margin:6px 0 12px}
html .rr-inline-actions{display:flex;gap:8px;justify-content:flex-end}
html .rr-loading{padding:22px 16px;color:var(--text-dim);font:400 12px/1.5 var(--ff-ui)}
html .rr-loading::before{content:'';display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid var(--border-hi);border-top-color:var(--rr-accent);border-radius:50%;animation:rr-spin .8s linear infinite}
@keyframes rr-spin{to{transform:rotate(360deg)}}
html rr-sidebar .nav__item.is-active,html rr-sidebar .nav__item.active{color:var(--rr-accent);border-color:color-mix(in srgb,var(--rr-accent) 40%,transparent);background:color-mix(in srgb,var(--rr-accent) 10%,transparent)}
html rr-sidebar .nav__item.is-active::before,html rr-sidebar .nav__item.active::before{background:var(--rr-accent);box-shadow:0 0 12px var(--rr-accent)}
@media(max-width:860px){html .main{padding:20px 16px 32px}html .page-head{gap:12px}html[data-rr-module] .page-head h1{font-size:24px}html .page-head__actions,html .head-actions{max-width:55%}}
@media(pointer:coarse){html .btn,html button[aria-label],html select,html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]){min-height:44px}}
@media(prefers-reduced-motion:reduce){html *,html *::before,html *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Content is visible immediately; loading is component-scoped, not a fade-in gate. */
html[data-rr-module] .panel{opacity:1;transform:none;animation:none}

html main.rr-detail-mode > :not(.rr-detail-page){display:none!important}
html .rr-detail-page[open]{position:static!important;inset:auto!important;display:block!important;box-sizing:border-box;width:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:none!important;overflow:visible!important}
html .rr-detail-page:not([open]){display:none!important}
html .rr-detail-page :is(.crm-dialog__surface,.crm-dialog__body,.b2b-dialog__body,.rr-modal__card,.drawer-body){max-height:none!important;overflow:visible!important;width:auto;box-shadow:none}
html .rr-detail-page h2{font:600 28px/1.2 var(--ff-data)}
html .rr-detail-page .eyebrow{display:none}

html .rr-inline-review{position:static;inset:auto;box-sizing:border-box;width:100%;max-width:700px;max-height:none;flex:1 0 100%;margin:12px 0;background:var(--surface-2);border:1px solid var(--rr-accent);border-radius:14px;box-shadow:none;z-index:auto}
html .rr-inline-review .drawer-body{max-height:none;overflow:visible}
html .rr-marketing-detail .drawer-head,html .rr-inline-review .drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:16px}

html .statcard{opacity:1;transform:none;animation:none}
html .rr-placeholder{color:var(--text-dim);font-size:inherit}
html body.is-live-loading :is(.metric__value,.datarow__val,.delta,.statlist__val,.rank__num){visibility:visible}
html .rr-loading{min-height:40px}
html[data-rr-module] select{border-radius:9px;padding:9px 28px 9px 10px;font:400 11.5px/1.45 var(--ff-ui);background-color:var(--bg-2);color:var(--text);min-height:36px}
html :is(.watch-filters,.queue-filters,.portfolio-filters,.loc-filters){display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:10px;align-items:flex-end}
html :is(.watch-filters,.queue-filters,.portfolio-filters,.loc-filters)>*{flex:0 0 auto;min-width:140px}

html :is(.lv-library-filters,.lv-render-filters,.outreach-filters,.b2b-proposal-filters){display:flex;flex-wrap:nowrap;align-items:flex-end;gap:10px;max-width:100%;overflow-x:auto}
html :is(.lv-library-filters,.lv-render-filters,.outreach-filters,.b2b-proposal-filters)>*{flex:0 0 auto;min-width:120px}

html:not([data-rr-module="dashboard"]) body::before{background:radial-gradient(900px 520px at 12% -6%,color-mix(in srgb,var(--rr-accent) 10%,transparent),transparent 60%),linear-gradient(180deg,var(--bg-2),var(--bg))}
html rr-sidebar .nav__item.is-active .ic{color:var(--rr-accent)}
html :is(.inbox-filters,.publishing-filters,.asset-filters,.asset-sponsor-filters,.report-filters,.outreach-template-filters,.crm-history-filters){display:flex;flex-wrap:nowrap;align-items:flex-end;gap:10px;max-width:100%;overflow-x:auto;padding-bottom:5px}
html :is(.inbox-filters,.publishing-filters,.asset-filters,.asset-sponsor-filters,.report-filters,.outreach-template-filters,.crm-history-filters)>*{flex:0 0 auto;min-width:130px}
html .inbox-filters>*,html .publishing-filters>*{flex:1 0 130px}

html .lv-head-actions,html .page-head>.loc-actions{align-self:flex-start;align-items:flex-start;justify-content:flex-end;margin-left:auto}
html[data-rr-module] .location-picker .rr-country-picker{--bg-2:#0b0f17;--surface-2:#141a25;--text:#e8eef6;--text-dim:#93a0b2;--ff-ui:'IBM Plex Sans','Segoe UI',system-ui,sans-serif}

/* Never gate the whole B2B document behind its first data response. */
html body:not(.bd-data-ready):not(.bd-data-error) .main{visibility:visible}
html[data-rr-module] .diag-panel{padding:16px;border-radius:14px;border-color:var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
html[data-rr-module] #campaign-navigation .tabs a.active,html[data-rr-module] .results-sections a.active{color:var(--rr-accent);background:color-mix(in srgb,var(--rr-accent) 12%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rr-accent) 40%,transparent)}
html[data-rr-module] .results-sections{border-left-color:var(--rr-accent)}

html :is(.lv-head-actions,.actionrow,.row,.head-actions,.page-head__actions):has(>.rr-inline-confirm){flex-wrap:wrap;min-width:0;max-width:100%}
html .rr-inline-confirm{grid-column:1/-1;min-width:0}

/* Solid canvas also covers overscroll and full-page captures behind fixed washes. */
html{background:var(--bg)}
html body{background-color:var(--bg)}

/* Card groups never touch. Keep existing nonzero grid gaps; repair unspaced groups. */
:root{--rr-panel-gap:16px;--rr-card-gap:12px}
:root[data-rr-module="dashboard"]{--rr-panel-gap:10px;--rr-card-gap:10px}
html [data-rr-card-layout="grid"]{gap:var(--rr-card-gap)}
html [data-rr-card-layout="stack"]>:is(.panel,.statcard,.kpi,.summary-card,.overview-panel,.diag-panel,.diag-card,.report-kpi)~:is(.panel,.statcard,.kpi,.summary-card,.overview-panel,.diag-panel,.diag-card,.report-kpi){margin-block-start:var(--rr-panel-gap)}
html [data-settings-form]>fieldset{display:grid;gap:var(--rr-panel-gap)}
