/* Shared readable, compact interface chrome. Does not style rendered artwork. */
body[data-ui-shell]{--ui-text:#26334b;--ui-muted:#59677e;--ui-border:#cbd3df;--ui-positive:#13733b;--ui-positive-bg:#e9f7ef;--ui-negative:#b42332;--ui-negative-bg:#fff0f2;--ui-warning:#825600;--ui-warning-bg:#fff7df;--muted:var(--ui-muted);font-size:14px;line-height:1.5}
html[data-color-mode=dark] body[data-ui-shell]{--ui-text:#e5e9f2;--ui-muted:#b4bfd2;--ui-border:#4b5870;--ui-positive:#8ce0b0;--ui-positive-bg:#143629;--ui-negative:#ffb1bb;--ui-negative-bg:#40232c;--ui-warning:#f2d28a;--ui-warning-bg:#3c321b}
@media(prefers-color-scheme:dark){body[data-ui-shell=admin]{--ui-text:#edf3ff;--ui-muted:#b4bfd2;--ui-border:#4b5870;--ui-positive:#8ce0b0;--ui-positive-bg:#143629;--ui-negative:#ffb1bb;--ui-negative-bg:#40232c;--ui-warning:#f2d28a;--ui-warning-bg:#3c321b}}
body[data-ui-shell] :is(.hint,.eyebrow,.menu-label,.account small,.stat-card small,.screen-detail-metric>span,.site-detail-stats span,.table-filter-footer,.notification-item small,.live-search-result small){color:var(--ui-muted);font-size:12px;line-height:1.5}
body[data-ui-shell] :is(main p,main small,dialog p,dialog small,[popover] p,[popover] small):not(:where(.promotion-stage *,.promotion-template-preview *,.preview-stage *,.media-lightbox-stage *,.auth-showcase *)){color:var(--ui-muted);font-size:13px;line-height:1.55}
body[data-ui-shell] :is(label,legend,th){font-size:13px;font-weight:600}
body[data-ui-shell] :is(h1,h2,h3){line-height:1.35;overflow-wrap:anywhere}
body[data-ui-shell] h1{font-size:24px}body[data-ui-shell] h2{font-size:17px}body[data-ui-shell] h3{font-size:15px}
body[data-ui-shell=portal] #sidebar{padding-block:18px 14px}
body[data-ui-shell=portal] #sidebar .menu-label{margin-block:16px 5px;font-size:11px}
body[data-ui-shell=portal] #sidebar nav a{min-height:38px;padding-block:8px;font-size:13px}
body[data-ui-shell=portal] #sidebar nav a .icon{color:var(--ui-muted)}
body[data-ui-shell=portal] .page-header{min-height:68px;height:auto;padding-block:10px}
body[data-ui-shell=portal] main:not(.standalone){padding:20px 24px;gap:14px;min-width:0}
body[data-ui-shell=admin] main.authenticated{padding:20px 24px;min-width:0}
body[data-ui-shell] :is(.top,.page-heading){gap:12px;flex-wrap:wrap;align-items:center;margin-block:0 14px}
body[data-ui-shell] .top>.actions{margin:0}
body[data-ui-shell] :is(.card,.settings-card){min-width:0}
body[data-ui-shell=portal] main:not(.standalone) .card:not(:where(.promotion-workspace,.promotion-side-panel,.promotion-template-card,.content-asset-card,.profile-card)){padding:16px}
body[data-ui-shell=admin] .card{padding:18px;margin-bottom:16px}
body[data-ui-shell] :is(.grid,.form-grid,.columns,.settings-grid,.stat-grid,.metrics){gap:14px;min-width:0}
body[data-ui-shell] :is(.grid,.form-grid,.columns,.settings-grid,.stat-grid,.metrics)>*{min-width:0}
body[data-ui-shell] :is(.button,button){font-size:13px;line-height:1.35;min-height:36px;padding:8px 12px;max-width:100%;white-space:normal;text-align:center;gap:7px}
body[data-ui-shell] :is(.actions,.screen-header-actions,.screen-device-actions){display:flex;flex-wrap:wrap;align-items:center;gap:10px}
body[data-ui-shell] .actions{margin-block-start:16px}
body[data-ui-shell] .action-icon{min-width:36px;width:36px;height:36px;padding:0;flex-shrink:0}
body[data-ui-shell] :is(.column-sort,.table-column-sort){min-height:32px;padding:4px 0;background:transparent;color:inherit;font-size:inherit;font-weight:700;text-align:start}
body[data-ui-shell] :is(input,select,textarea){font-size:14px}
body[data-ui-shell] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]):not([type=file]),select,textarea){border-color:var(--ui-border)}
body[data-ui-shell] input::placeholder,body[data-ui-shell] textarea::placeholder{color:var(--ui-muted);opacity:1}
body[data-ui-shell] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]),select:not([multiple])){min-height:40px;padding-block:8px}
body[data-ui-shell] :is(.theme-select-options,.theme-select-panel,.table-filter-options,.notification-panel){scrollbar-width:thin;overscroll-behavior:contain}
body[data-ui-shell] .theme-select{min-width:0;max-width:100%}
body[data-ui-shell] :is(.theme-select:has(select[name=per_page]),.theme-select:has(select[name=rows])){width:112px;flex:0 0 112px}
body[data-ui-shell=portal] main:not(.standalone) form.form{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:12px 16px;max-width:1140px}
body[data-ui-shell=portal] main:not(.standalone) form.form>:is(.site-area-field,.ui-field){grid-column:auto}
body[data-ui-shell] .ui-field{min-width:0}.ui-field>label{margin-bottom:6px}.ui-field>.hint{margin-top:6px}
body[data-ui-shell] :is(form.form .grid,.form-grid){grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px 16px}
body[data-ui-shell] :is(form.form>label:has(textarea),.form-grid>label:has(textarea)){grid-column:1/-1}
body[data-ui-shell] :is(input[inputmode=numeric][maxlength="6"],input[name=pairing_code]){max-width:16ch;letter-spacing:.12em;font-variant-numeric:tabular-nums}
body[data-ui-shell] :is(input[type=number],input[type=time]){max-width:24ch;font-variant-numeric:tabular-nums}
body[data-ui-shell] :is(form.form .actions,.form-grid~.actions){grid-column:1/-1;gap:10px;padding-top:8px}
body[data-ui-shell] :is(.table-wrap,.fault-alert-table-wrap,.analytics-table-wrap){max-width:100%;min-width:0;overflow:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
body[data-ui-shell] table{font-size:14px}
body[data-ui-shell] :is(td,th){padding:10px 12px;line-height:1.45;vertical-align:middle}
body[data-ui-shell] th{font-weight:700;color:var(--ui-muted);text-align:start}
body[data-ui-shell] td{color:var(--ui-text)}
body[data-ui-shell] :is(.badge,.screen-list-status,.screen-grid-status,.screen-connection){font-size:12px;font-weight:600;line-height:1.4}
body[data-ui-shell] :is(.badge.success,.screen-connection--online,.screen-grid-status--online,[data-ui-tone=positive]){color:var(--ui-positive);background:var(--ui-positive-bg)}
body[data-ui-shell] :is(.badge.danger,.badge.error,.screen-connection--offline,.screen-grid-status--offline,[data-ui-tone=negative]){color:var(--ui-negative);background:var(--ui-negative-bg)}
body[data-ui-shell] :is(.badge.warning,[data-ui-tone=warning]){color:var(--ui-warning);background:var(--ui-warning-bg)}
body[data-ui-shell] :is(.metric-value--positive,.screen-detail-metric .screen-connection--online,.site-detail-stats .metric-value--positive){color:var(--ui-positive)}
body[data-ui-shell] :is(.metric-value--negative,.screen-detail-metric .screen-connection--offline){color:var(--ui-negative)}
body[data-ui-shell] :is(.stat-card strong,.screen-detail-metric strong,.site-detail-stats strong,.metrics strong){font-variant-numeric:tabular-nums;line-height:1.25;letter-spacing:-.4px}
body[data-ui-shell] .metric-insight{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;margin-block:6px;font-size:13px;color:var(--ui-muted)}
body[data-ui-shell] .metric-insight b{font-size:15px;color:var(--ui-text)}
body[data-ui-shell] .stat-card span{color:var(--ui-muted);font-size:13px}
body[data-ui-shell] .stat-card strong{font-size:28px;margin-block:6px}
body[data-ui-shell] .stat-card strong.metric-value--positive{color:var(--ui-positive)}
body[data-ui-shell] .stat-card strong.metric-value--negative{color:var(--ui-negative)}
body[data-ui-shell] .stat-icon .icon{color:var(--ui-muted)}
body[data-ui-shell] .settings-grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
body[data-ui-shell] .settings-card .square-icon{margin-bottom:10px;padding:8px}
body[data-ui-shell] :is(.site-detail-preview,.screen-playlist-preview-list){max-height:min(620px,75dvh);overflow:auto;scrollbar-width:thin}
body[data-ui-shell] :is(dialog,.promotion-crop-dialog,.promotion-trim-dialog){max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
body[data-ui-shell] .delete-lightbox iframe{min-height:220px}
body[data-ui-shell] :is(.settings-tabs,.playlist-orientation-tabs,.campaign-steps){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;flex-wrap:nowrap}
body[data-ui-shell] .settings-tabs a{font-size:13px;flex-shrink:0;padding:10px 6px}
body[data-ui-shell] .pagination{gap:8px;flex-wrap:wrap;font-size:13px}
body[data-ui-shell] .pagination :is(button,.button,a){min-height:36px}
body[data-ui-shell=auth] :is(.auth-form-note,.auth-security-note,.auth-account-link,.auth-footer,.auth-trial-summary p){font-size:13px}
body[data-ui-shell=auth] :is(.auth-description,.auth-field){font-size:15px}
body[data-ui-shell=auth] .auth-field input{font-size:16px}
body[data-ui-shell=report] .campaign-report-filters{gap:12px}
@media(min-width:1200px){body[data-ui-shell=portal] .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}body[data-ui-shell=admin] .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){body[data-ui-shell] :is(.site-detail-top,.screen-detail-grid){grid-template-columns:minmax(0,1fr)}body[data-ui-shell] .site-detail-preview{max-height:none}}
@media(max-width:800px){body[data-ui-shell=portal] main:not(.standalone),body[data-ui-shell=admin] main{padding:16px}body[data-ui-shell=portal] .page-header{min-height:76px}body[data-ui-shell] .top{align-items:flex-start}body[data-ui-shell=portal] main:not(.standalone) form.form{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}}
@media(max-width:550px){body[data-ui-shell] :is(h1){font-size:22px}body[data-ui-shell] :is(form.form .grid,.form-grid,.columns){grid-template-columns:minmax(0,1fr)}body[data-ui-shell] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.theme-select-trigger){font-size:16px}body[data-ui-shell] :is(.button,button,.action-icon){min-height:44px}body[data-ui-shell] .action-icon{width:44px;height:44px;min-width:44px}body[data-ui-shell] .site-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-ui-shell] .screen-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-ui-shell] .actions{gap:8px}body[data-ui-shell] .stat-card strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){body[data-ui-shell] :is(button,a,input,select,dialog){transition:none;scroll-behavior:auto}}
body[data-ui-shell] .ui-uptime-chart{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;height:200px;margin-block:16px 8px}
body[data-ui-shell] .ui-uptime-chart svg{width:100%;height:200px;border-bottom:1px solid var(--ui-border);border-radius:4px}
body[data-ui-shell] .ui-chart-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:12px;color:var(--ui-muted);text-align:end}
body[data-ui-shell] .ui-chart-range{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ui-muted);margin-inline-start:50px}
body[data-ui-shell] .ui-chart-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;margin-block:12px}
body[data-ui-shell] .ui-chart-legend span{display:inline-flex;align-items:center;gap:6px}
body[data-ui-shell] .ui-chart-legend i{width:10px;height:10px;border-radius:3px}
.ui-uptime-online{fill:#16834b;background:#16834b}.ui-uptime-offline{fill:#c84957;background:#c84957}.ui-uptime-unknown{fill:#ced5e0;background:#ced5e0}
body[data-ui-shell] .report-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));align-items:end;gap:12px}
body[data-ui-shell] .report-filters>label{min-width:0;margin:0}
body[data-ui-shell] .report-filters>button{justify-self:start}
/* Accessible text/primary colours on both light and dark surfaces. */
body[data-ui-shell]{--ui-link:#1162b5;--button-bg:#0965d4;--button-hover:#0755b4}
html[data-color-mode=dark] body[data-ui-shell]{--ui-link:#9acaff}
@media(prefers-color-scheme:dark){body[data-ui-shell=admin]{--ui-link:#9acaff}}
body[data-ui-shell] #sidebar .menu-label{color:var(--ui-muted);font-size:12px}
body[data-ui-shell] #sidebar nav a.active,body[data-ui-shell] #sidebar nav a:hover{color:var(--ui-link)}
body[data-ui-shell] :is(.avatar,.settings-link){color:var(--ui-link)}
body[data-ui-shell] .badge:not(.success):not(.warning):not(.danger):not(.error){color:var(--ui-link)}
body[data-ui-shell] a:not(.button):not(:where(#sidebar *,.auth-showcase *,.settings-card,.stat-card)){color:var(--ui-link)}
body[data-ui-shell] :is(.settings-tabs a:not([aria-current=page]),.profile-dropdown small,.setup-step>b,.library-assignment-link,.library-section-heading h2>span,.builder-view-toolbar span){color:var(--ui-muted)}
body[data-ui-shell=admin]{--blue:#0965d4}
body[data-ui-shell=admin] :is(button,.button):not(:where(.secondary,.column-sort,.action-icon,.danger,.theme-select-trigger,.theme-select-panel *,.theme-date-panel *)){background:#0965d4;color:#fff}
body[data-ui-shell=auth] .auth-submit{background:#0965d4;color:#fff}
body[data-ui-shell] .playlist-orientation-tabs button{color:var(--ui-muted)}
body[data-ui-shell] .playlist-orientation-tabs button[aria-selected=true]{color:var(--ui-link)}
body[data-ui-shell] .success-notice{font-size:14px}
body[data-ui-shell] :is(.bot-check-close,.form-error-heading button,.delete-lightbox-header button,.media-lightbox-close){font-size:22px;min-width:36px}
body[data-ui-shell=auth] .auth-content h1{font-size:30px}
body[data-ui-shell=auth] .auth-showcase h2{font-size:clamp(32px,4vw,54px);line-height:1.12;color:#fff}
body[data-ui-shell=auth] .auth-submit{min-height:46px}
body[data-ui-shell] .column-filter>summary{min-width:32px;min-height:32px;display:inline-flex;align-items:center}
@media(pointer:coarse){body[data-ui-shell] .column-filter>summary{min-width:44px;min-height:44px}}
body[data-ui-shell] .dashboard-lower{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.5fr);gap:14px;align-items:start}
body[data-ui-shell] .dashboard-lower>.card{margin:0}
body[data-ui-shell] .profile-card{min-height:104px;padding-block:18px}
body[data-ui-shell] main form.form.ui-site-form>.grid{display:contents}
body[data-ui-shell] .phone-input{grid-template-columns:minmax(110px,.75fr) minmax(0,1fr)}
@media(max-width:1000px){body[data-ui-shell] .dashboard-lower{grid-template-columns:minmax(0,1fr)}}
@media(max-width:550px){body[data-ui-shell] .phone-input{grid-template-columns:minmax(0,1fr)}}
body[data-ui-shell] .timeline-ruler{color:var(--ui-muted)}
body[data-ui-shell] .promotion-layout .number-stepper button{color:var(--ui-link)}
body[data-ui-shell=auth] .auth-browser-bar{color:#59677e}
body[data-ui-shell=auth] .auth-art-note small{color:#526449}
body[data-ui-shell] .ui-negative-text{color:var(--ui-negative)}
body[data-ui-shell] .library-search .theme-select{width:180px;min-width:140px;flex:0 1 180px;margin:0}
@media(max-width:700px){body[data-ui-shell] .library-search .theme-select{width:auto;flex:1 1 140px}}
@media(max-width:550px){body[data-ui-shell] :is(.notification-panel,.profile-dropdown){position:fixed;inset-inline:12px;top:112px;width:auto;max-width:calc(100vw - 24px);max-height:calc(100dvh - 124px);overflow:auto}}