@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;750;800&display=swap');
/* Studio foundations: tokens, shell and shared surfaces. */
:root {
  --bg: #f7f8fb;
  --ink: #182230;
  --muted: #667085;
  --purple: #5b46d6;
  --purple-light: #f0edff;
  --line: #e4e8ee;
  --green: #17845b;
  --font: var(--font-ui);
  --soft: #98a1af;
  --surface: #fff;
  --canvas: #f5f7fa;
  --green-light: #e7f7ef;
  --danger: #c43f58;
  --danger-light: #fff0f2;
  --shadow-sm: 0 1px 2px #1720330a,0 5px 18px #17203308;
  --shadow-md: 0 12px 32px #17203312;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --warning: #a36200;
  --warning-light: #fff7e8;
  --info: #2465ad;
  --info-light: #eaf2ff;
  --focus: #6d54df;
  --button-height: 40px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-ui: Inter,"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --brand: #5b46d6;
  --brand-soft: #f0edff;
  --shadow-card: 0 1px 2px #1720330a,0 8px 24px #1720330a;
  --sidebar-width: 240px;
  --topbar-height: 68px;
  --content-max: 1520px;
  --content-gutter: 48px;
}

html,body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas);
}

body {
  margin: 0;
  letter-spacing: -.012em;
  line-height: 1.5;
  min-width: 320px;
}

h1,h2,h3,.brand {
  font-family: var(--font-ui);
  font-weight: 650;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 12px 14px;
  display: flex;
  flex-direction: column;
  z-index: 5;
  box-shadow: 4px 0 20px #17203308;
}

.sidebar>.brand {
  font-size: 21px;
  letter-spacing: -.04em;
  margin: 0 8px;
}

.workspace {
  display: block;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 8px 15px;
  margin: 18px 0 12px;
  box-shadow: none;
  min-width: 0;
}
.workspace::before { content: 'ESPACE DE TRAVAIL'; display: block; margin-bottom: 5px; color: #8993a3; font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.workspace .workspace-icon, .workspace small, .workspace .chevron { display: none; }
.workspace strong { font-size: 15px; line-height: 1.35; color: var(--ink); }

.sidebar-bottom {
  margin-top: auto;
  padding-top: 12px;
}

.main-shell {
  margin-left: var(--sidebar-width);
  background: var(--canvas);
  min-width: 0;
}

.topbar {
  height: var(--topbar-height);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 #17203308;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: #aaa8b6;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 10px;
  min-height: 40px;
  transition: border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
  order: 2;
  flex: 0 1 300px;
  width: 300px;
  max-width: 300px;
  height: 40px;
}

.search input {
  border: 0;
  width: 100%;
  font-size: 13px;
  padding: 8px;
  color: var(--ink);
  background: transparent;
  min-width: 0;
}

main {
  padding: 40px var(--content-gutter) 52px;
  max-width: var(--content-max);
  margin: auto;
  min-height: calc(100vh - var(--topbar-height) - 54px);
}

.button {
  border: 1px solid #dce1e8;
  background: #fff;
  color: #475467;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: var(--radius-control);
  font-weight: 650;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 1px 1px #17203308;
  min-height: 40px;
  position: relative;
  overflow: hidden;
}

.button.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 5px 14px #5b46d626;
}

.button.primary:hover {
  background: #4734b5;
  border-color: #4734b5;
  color: #fff;
}

.button.danger {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.button.danger:hover {
  background: #a83249;
  border-color: #a83249;
  color: #fff;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #edf0f4;
  gap: 15px;
  flex-wrap: wrap;
}

.panel-heading h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.3;
}

[hidden]{display:none!important}
.installer-link-panel{padding:25px;margin-bottom:24px}.installer-link-panel h2{font-size:20px;margin-bottom:12px}.installer-link-panel>p{font-size:12px;color:#766981;line-height:1.8}.installer-link-panel .code{font-size:14px;padding:17px;margin:18px 0}.installer-link-panel .form-hint{margin-bottom:0}
*{box-sizing:border-box}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}button svg{pointer-events:none}h1,h2,h3,p{margin-top:0}.brand{display:flex;align-items:center;gap:11px;font-size:27px;font-weight:800;letter-spacing:-1px;line-height:1}.brand-sub{display:block;font-size:8px;letter-spacing:2px;margin-top:7px;font-weight:700;color:#8e8b9f}.workspace-icon{background:#e9e1fb;color:var(--purple);font-size:13px;font-weight:700;padding:9px 11px;border-radius:8px}.workspace strong{font-size:12px;display:block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace small{color:var(--muted);font-size:10px;display:block;margin-top:4px}.chevron{margin-left:auto;color:var(--muted)}.nav-label{font-size:9px;letter-spacing:1.7px;color:#a5a5b3;font-weight:700;margin:0 14px 13px}.secondary-label{margin-top:34px}nav a{display:flex;align-items:center;gap:13px;padding:13px 13px;margin-bottom:4px;border-radius:8px;color:#858494;font-size:12px;font-weight:550}nav a:hover{background:#f7f5fc}nav a.active{color:var(--purple);background:var(--purple-light);font-weight:700}.nav-count{margin-left:auto;background:#e4dafb;padding:1px 7px;border-radius:5px;font-size:10px}.new-badge{margin-left:auto;font-size:8px;background:#f4f4f7;padding:4px;border-radius:4px;color:#77758c}.help-card{padding:17px;background:#f8f6fe;border:1px solid #eee7fc;border-radius:10px;margin-bottom:20px;position:relative}.help-glyph{position:absolute;right:16px;top:13px;font-size:20px;color:#9678eb}.help-card strong{font-size:11px}.help-card p{font-size:10px;line-height:1.7;color:#9690ac;margin:9px 0 14px}.help-card a{font-size:10px;font-weight:700;color:var(--purple)}.help-card a span{float:right}.profile{border:0;border-top:1px solid var(--line);background:transparent;width:100%;display:flex;align-items:center;gap:10px;padding:19px 2px 0;text-align:left}.avatar{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:#f0e9dd;color:#8f7960;font-size:12px;font-weight:700}.profile strong{display:block;font-size:10px}.profile small{font-size:9px;color:var(--muted);display:block;margin-top:4px}.profile>svg{margin-left:auto;color:var(--muted);width:16px}.breadcrumb{font-size:11px;color:#9a99a7}.breadcrumb span{padding:0 13px;color:#c9c7d1}.breadcrumb strong{font-weight:500;color:#646274}.search svg{width:15px}.header-help{width:23px;height:23px;display:grid;place-items:center;border:1px solid #d8d6e0;border-radius:50%;font-size:11px;color:#9995a9}.small-avatar{width:29px;height:29px;font-size:10px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:20px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#9792a7;font-weight:650;display:block;margin-bottom:10px}.page-heading h1{font-size:27px;letter-spacing:-1px;font-weight:750;margin-bottom:8px}.page-heading p{font-size:12px;color:#93909f;margin:0;line-height:1.6}.button:hover{border-color:#c5b5f3;background:#faf9ff}.button.primary svg{width:15px;height:15px}.button.small{font-size:10px;padding:8px 11px}.actions{display:flex;align-items:center;gap:10px}.hero{display:flex;min-height:184px;border-radius:12px;background:#eee9fc;position:relative;overflow:hidden;margin-bottom:26px}.hero-copy{padding:28px 30px;z-index:1}.hero .eyebrow{color:#8e74bf;font-size:8px;margin-bottom:10px}.hero h2{font-size:23px;letter-spacing:-.6px;line-height:1.35;margin-bottom:8px}.hero p{font-size:11px;color:#8e81a6;max-width:400px;line-height:1.7;margin-bottom:17px}.hero .button{background:white;color:#7352d2;border:0;font-size:10px;padding:9px 13px}.hero-visual{position:absolute;width:42%;right:0;height:100%;display:flex;justify-content:center;align-items:center}.orb{width:220px;height:220px;position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#e3dafc,#cec0ed);right:12px;top:-5px}.mini-monitor{position:relative;transform:rotate(-7deg);border:7px solid #2a263c;border-radius:9px;width:200px;height:119px;box-shadow:14px 17px 0 #cabde544;background:#caff98;display:flex;align-items:center;justify-content:center;flex-direction:column}.mini-monitor:after{content:'';width:53px;height:5px;position:absolute;bottom:-20px;background:#494153;border-radius:5px;box-shadow:0 -7px 0 -1px #494153}.mini-monitor span{font-size:8px;letter-spacing:2px;color:#536b38}.mini-monitor strong{font-family:'Manrope',sans-serif;font-size:25px;letter-spacing:-1px;margin-top:4px}.float-tag{position:absolute;right:24px;bottom:26px;background:#fff;border-radius:7px;box-shadow:0 5px 20px #4434780d;padding:10px 14px;font-size:9px;display:flex;gap:8px;align-items:center}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b5b3c1}.dot.online{background:#3cbb8d}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:28px}.stat{background:white;border:1px solid var(--line);border-radius:10px;padding:19px 20px}.stat-top{display:flex;align-items:center;gap:8px;color:#9691a4;font-size:10px}.stat-icon{margin-left:auto;background:#f5f2fc;padding:6px;border-radius:7px;color:#9b82d3}.stat-icon svg{width:15px;height:15px}.stat-value{font-family:'Manrope',sans-serif;font-size:29px;font-weight:750;margin:9px 0 7px;letter-spacing:-1px}.stat-note{font-size:9px;color:#a8a3b3}.stat-note.green{color:#54a68c}.two-col{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(270px,1fr);gap:23px}.panel-heading a{font-size:9px;color:var(--purple);font-weight:600}.panel-heading .count{font-family:var(--font);font-weight:500;color:#a09aa9;margin-left:5px}.empty{padding:43px 24px;text-align:center;color:#a29ba9}.empty-icon{margin:0 auto 14px;border:1px solid #ece6fa;background:#faf8ff;color:#aa95d6;width:52px;height:52px;border-radius:14px;display:grid;place-items:center}.empty-icon svg{width:23px;height:23px}.empty h3{font-size:12px;color:#6f657d;margin-bottom:7px}.empty p{font-size:11px;line-height:1.8;max-width:360px;margin:0 auto 18px}.empty.large{padding:68px 20px}.onboarding{padding:22px}.step{display:flex;gap:12px;padding-bottom:22px}.step:last-child{padding-bottom:0}.step-number{width:26px;height:26px;display:grid;place-items:center;flex-shrink:0;background:#f2edfc;color:#9678d8;border-radius:50%;font-size:10px}.step.done .step-number{background:#e9f8f1;color:#35a078}.step strong{font-size:11px;font-weight:600;display:block;margin:2px 0 5px}.step p{font-size:10px;color:#a09baa;line-height:1.6;margin:0}.activity{padding:5px 23px 13px}.activity-item{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid #f5f3f8}.activity-item:last-child{border:0}.activity-item .dot{margin-top:5px;background:#b5a0e3}.activity-item p{font-size:10px;line-height:1.6;margin:0}.activity-item small{font-size:9px;color:#a5a0ad}.mt{margin-top:24px}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;color:#aaa4b2;font-size:10px}.toolbar button{border:1px solid var(--line);background:#fff;color:#8d8597;padding:8px 14px;border-radius:6px;font-size:10px}.toolbar button.active{color:var(--purple);background:#eee9fc;border-color:#ddd1f5}.toolbar .right{margin-left:auto}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.screen-card,.media-card,.playlist-card{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.screen-preview{aspect-ratio:16/9;background:#292535;display:grid;place-items:center;position:relative;color:#c0b6d4}.screen-preview .preview-logo{font-family:Manrope,sans-serif;letter-spacing:-2px;font-size:32px;color:#ddd0f4;font-weight:800}.screen-preview img,.screen-preview video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.screen-preview .status{position:absolute;top:11px;left:11px;background:#ffffffed;z-index:1}.status{display:inline-flex;align-items:center;gap:5px;color:#8a8294;background:#f5f3f7;border-radius:5px;padding:4px 7px;font-size:9px;white-space:nowrap}.status.online{color:#398e70;background:#eaf7f1}.card-body{padding:17px}.card-body h3{font-size:12px;margin:0 0 6px}.card-body p{font-size:10px;color:#aaa1b4;margin-bottom:14px}.card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f1edf6;padding-top:13px;font-size:9px;color:#9d92ab}.card-actions{display:flex;gap:5px}.icon-button{background:transparent;border:0;color:#9b90aa;padding:5px;display:inline-flex;border-radius:5px}.icon-button:hover{background:#f3effa;color:var(--purple)}.icon-button svg{width:15px;height:15px}.media-thumb{height:150px;background:#f0ecf5;display:grid;place-items:center;position:relative}.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover}.media-thumb .media-label{position:absolute;bottom:8px;left:8px;font-size:8px;padding:4px 6px;border-radius:4px;background:#fffE;color:#746980}.media-thumb>svg{width:35px;height:35px;color:#ac99c8}.upload-zone{background:#faf8ff;border:1px dashed #d4c4f1;border-radius:10px;padding:22px;display:flex;align-items:center;gap:15px;margin-bottom:24px;cursor:pointer}.upload-zone.drag{background:#eee6ff}.upload-zone .upload-icon{padding:11px;background:#eee6fc;border-radius:10px;color:#9672d0}.upload-zone strong{font-size:11px}.upload-zone p{color:#a69ab5;font-size:10px;margin:6px 0 0}.upload-zone .button{margin-left:auto}progress{width:100%;accent-color:var(--purple);height:8px}.playlist-art{height:145px;display:flex;align-items:center;justify-content:center;gap:7px;background:#f1ecfb;overflow:hidden}.playlist-art span{display:grid;place-items:center;width:84px;height:95px;background:#fff;border:1px solid #ddd1ef;border-radius:7px;transform:rotate(-9deg);color:#b69bd9;box-shadow:0 3px 8px #6c47881a}.playlist-art span+span{transform:rotate(7deg);margin-left:-18px;background:#e0d3f8}.playlist-art span img{width:100%;height:100%;object-fit:cover;border-radius:7px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:11px}th{font-size:9px;color:#aaa0b5;letter-spacing:.5px;font-weight:500;background:#fcfbfe;padding:15px 23px}td{padding:17px 23px;border-bottom:1px solid #f3eff8}td strong{display:block;font-size:11px;margin-bottom:5px}td small{color:#aba0b7;font-size:9px}.days{display:flex;gap:4px}.day{font-size:8px;border-radius:4px;background:#f3f0f8;color:#b1a6be;padding:4px}.day.selected{background:#eee7fb;color:#8761cc}.info-box{padding:17px 20px;border-radius:8px;background:#efebf9;color:#8b74ad;font-size:11px;line-height:1.8;margin-bottom:23px}.install-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}.install-grid .panel{padding:28px}.install-grid h2{font-size:18px;letter-spacing:-.5px}.install-grid h3{font-size:12px;margin-top:23px}.install-grid p,.install-grid li{font-size:11px;color:#978aa5;line-height:1.9}.install-grid ol{padding-left:17px}.install-grid li{padding-left:6px;margin:9px 0}.code{display:block;background:#f6f3fa;padding:12px 15px;border-radius:6px;font-family:Consolas,monospace;font-size:11px;overflow-wrap:anywhere;color:#8b6fad;margin:10px 0}.install-badge{display:inline-flex;background:#eee7fb;border:1px solid #e1d3f4;color:#8963bd;padding:8px 12px;border-radius:7px;font-size:11px;margin-bottom:15px}.install-screen{background:#292536;color:white;border-radius:9px;padding:32px 20px;text-align:center;margin:22px 0}.install-screen strong{font-family:Manrope,sans-serif;font-size:32px;letter-spacing:8px}.install-screen p{font-size:9px;letter-spacing:2px;margin:15px 0 0;color:#bbacd3}.form-panel{padding:25px;max-width:650px}.form-panel h2{font-size:15px}.form-panel p{font-size:11px;color:#a295af}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-grid .full{grid-column:1/-1}label{display:block;font-size:11px;color:#81738f;font-weight:500}label input,label select,label textarea{display:block;width:100%;margin-top:8px;border:1px solid #e4dcec;padding:11px 12px;border-radius:6px;background:#fff;color:#4c3f59;font-size:12px}label input[type=checkbox]{display:inline-block;width:auto;margin:0 8px 0 0;accent-color:var(--purple)}label input[type=number]{max-width:110px}label:has(input[type=checkbox]){display:flex;align-items:center}.form-hint{font-size:10px;color:#a69ab4;line-height:1.7;margin:12px 0 20px}.form-error{font-size:11px;color:#c46177;min-height:15px;line-height:1.6}.form-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:24px}.settings-row{margin:22px 0}.settings-row .button{margin-top:15px}.danger-zone{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}dialog{padding:0;border:1px solid #e7ddf2;border-radius:13px;width:min(620px,92vw);max-height:89vh;color:var(--ink);box-shadow:0 25px 100px #23163b30}dialog::backdrop{background:#24203560;backdrop-filter:blur(4px)}.modal-heading{padding:23px 27px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.modal-heading h2{font-size:17px;letter-spacing:-.4px;margin:0}.modal-content{padding:24px 27px}.modal-content>p{font-size:11px;color:#a092b0;line-height:1.8}.close{border:0;background:#f7f3fc;color:#a191b6;width:27px;height:27px;border-radius:50%;font-size:18px}.pair-code{font-size:24px!important;letter-spacing:9px;text-align:center;font-family:Consolas,monospace}.playlist-editor{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;margin-top:22px}.playlist-editor h3{font-size:11px}.library-list,.ordered-list{max-height:330px;overflow:auto;border:1px solid var(--line);border-radius:7px;padding:5px;min-height:70px}.library-item{display:flex;align-items:center;gap:8px;padding:8px;font-size:10px;border-bottom:1px solid #f4eff8}.library-item img{width:30px;height:30px;object-fit:cover;border-radius:4px}.library-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}.library-item button{border:0;background:#f2eafa;color:#9a70bd;padding:2px 7px;border-radius:4px}.ordered-row{padding:8px;border-bottom:1px solid #f2edf7;font-size:10px}.ordered-row strong{display:block;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}.ordered-controls{display:flex;align-items:center;gap:3px;color:#b1a4be}.ordered-controls input{width:52px;border:1px solid #e5dced;border-radius:4px;padding:4px;color:#776384;font-size:10px}.ordered-controls button{border:0;background:#f4eff8;border-radius:3px;color:#a18bb3;font-size:10px;padding:4px 7px}.ordered-controls .remove{margin-left:auto}.preview-stage{aspect-ratio:16/9;background:#14121b;position:relative}.preview-stage img,.preview-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.preview-caption{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;color:#ab9aba;font-size:10px}#toast{position:fixed;right:28px;bottom:26px;padding:14px 21px;background:#2c243b;color:#f0e9fa;font-size:12px;border-radius:9px;z-index:100;max-width:450px;opacity:0;transform:translateY(15px);transition:.2s;pointer-events:none;box-shadow:0 7px 25px #27173f20}#toast.show{opacity:1;transform:translateY(0)}#toast.error{background:#a74760}footer{height:54px;border-top:1px solid var(--line);padding:0 36px;display:flex;align-items:center;gap:17px;font-size:8px;color:#aaa2b6;letter-spacing:1px}footer>span:first-child{font-size:9px;letter-spacing:0;color:#b6aebd}.server-dot{margin-left:auto;font-size:9px;letter-spacing:0;display:flex;align-items:center;gap:6px}.server-dot:before{content:'';width:5px;height:5px;background:#67b79c;border-radius:50%}.auth{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;background:#fff;overflow:auto}.auth[hidden]{display:none}.auth-art{padding:45px 55px;background:#eee9f9;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh}.auth-art>.brand{margin-bottom:40px}.auth-art h1{font-size:39px;line-height:1.3;letter-spacing:-1.8px;margin:18px 0}.auth-art h1>span{color:var(--purple)}.auth-art p{font-size:12px;color:#92839e;line-height:1.8}.auth-art>small{color:#b0a0bd;font-size:10px;padding-top:25px}.art-screen{padding:9px;border-radius:12px;background:#312b3f;width:320px;max-width:90%;margin:32px auto 20px;transform:rotate(-5deg);box-shadow:20px 22px 0 #e0d7f0}.art-screen-content{background:#c6ef94;aspect-ratio:16/10;border-radius:5px;padding:21px;color:#3c512b}.art-screen-content>span{font-size:7px;letter-spacing:2px}.art-screen-content>strong{display:block;font-family:Manrope,sans-serif;line-height:1.15;font-size:39px;letter-spacing:-2px;margin:13px 0}.art-screen-content em{font-style:normal;font-weight:450}.art-screen-content>div{font-size:7px;letter-spacing:1px;display:flex;justify-content:space-between}.art-screen-content>div span{font-size:18px}.auth-form{padding:45px;display:grid;place-items:center}.auth-form>div{width:100%;max-width:330px}.pill{padding:7px 9px;border:1px solid #ede7f8;border-radius:5px;font-size:8px;letter-spacing:1px;color:#aa8fc7;background:#faf7fe}.auth-form h2{font-size:25px;letter-spacing:-1px;margin:24px 0 12px}.auth-form p{font-size:11px;line-height:1.9;color:#a193ad}.auth-form form{margin-top:29px}.auth-form form label{margin-bottom:17px}.auth-form .button{width:100%;justify-content:space-between;padding:13px 16px}.auth-note{margin-top:25px;font-size:10px!important}.mobile-title{display:none}
@media(min-width:1500px){main{padding-top:43px}.hero{min-height:205px}.hero-copy{padding:33px}.hero h2{font-size:28px}.hero p{font-size:12px}.mini-monitor{width:235px;height:139px}.orb{width:260px;height:260px}}@media(max-width:1120px){.sidebar{width:220px;padding-left:14px;padding-right:14px}.main-shell{margin-left:220px}main{padding:27px 24px}.topbar{padding:0 24px}.search input{width:140px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}.hero-visual{width:35%}.mini-monitor{width:150px;height:95px}.hero-copy{max-width:70%}.float-tag{display:none}.orb{right:-70px}.stat{padding:15px}.stat-top{font-size:9px}.stat-icon{display:none}.install-grid{grid-template-columns:1fr}.auth-art{padding:35px}.auth-art h1{font-size:33px}}@media(max-width:760px){.sidebar{position:static;width:100%;padding:16px;border-bottom:1px solid var(--line);border-right:0}.sidebar>.brand{font-size:22px}.brand-sub{font-size:6px}.sidebar>.brand img{width:30px;height:30px}.workspace,.nav-label,.sidebar-bottom{display:none}.sidebar nav{display:flex;overflow:auto;gap:5px;margin-top:12px}.sidebar nav+nav{margin-top:3px}.sidebar nav a{padding:8px 10px;white-space:nowrap;font-size:10px;gap:6px;margin-bottom:0}.sidebar nav a svg{width:15px}.main-shell{margin-left:0}.topbar{height:55px;padding:0 19px;gap:12px}.breadcrumb{font-size:9px}.search{display:none}.header-help{margin-left:auto}.topbar>.avatar{display:none}main{padding:25px 18px}.page-heading{align-items:flex-start;margin-bottom:23px}.page-heading h1{font-size:23px}.page-heading p{font-size:10px;max-width:230px}.page-heading .button{font-size:0;padding:10px}.page-heading .button svg{width:17px;height:17px}.hero{min-height:180px}.hero-copy{padding:23px;max-width:77%}.hero h2{font-size:20px}.hero p{font-size:10px}.hero-visual{right:-62px;width:40%;opacity:.45}.stats{grid-template-columns:repeat(2,1fr);gap:10px}.stat{padding:14px}.stat-value{font-size:24px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-body{padding:12px}.card-body h3{font-size:11px}.card-body p{font-size:9px}.card-bottom{font-size:8px}.panel-heading{padding:18px}.two-col{gap:17px}.install-grid .panel{padding:20px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.auth{grid-template-columns:1fr}.auth-art{display:none}.auth-form{min-height:100vh;padding:28px}.playlist-editor{grid-template-columns:1fr}.library-list{max-height:150px}.upload-zone{padding:16px;gap:10px}.upload-zone p{font-size:9px}.upload-zone .button{display:none}.upload-zone strong{font-size:10px}footer{padding:0 18px;font-size:7px}footer>span:first-child{display:none}.install-screen strong{font-size:24px}.modal-content{padding:21px}.modal-heading{padding:20px}.days{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.screen-diagnostics{border-top:1px solid var(--line);margin-top:15px;padding-top:12px}.screen-diagnostics>div{display:flex;gap:10px;justify-content:space-between;align-items:center}.screen-diagnostics strong{font-size:11px}.screen-diagnostics span{font-size:10px;color:#93879e}.screen-diagnostics p{font-size:11px;line-height:1.5;margin:7px 0;overflow-wrap:anywhere}.screen-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.update-note,.command-note{font-size:11px;color:#7753bd}.media-metadata{font-size:10px!important;margin:6px 0 11px!important}.release-pill{display:inline-block;float:right;color:#62429b;background:#f0e8fd;padding:8px 11px;border-radius:20px;font-size:11px}.update-instructions{padding:16px;background:#f6f3fa;border-radius:8px;margin-top:20px}.update-instructions strong{font-size:13px}.update-instructions p{margin-bottom:0}.studio-info{border-top:1px solid var(--line);padding-top:20px;margin-top:22px;font-size:12px}.studio-info p{line-height:1.8;color:#8a7a9d}dialog.wide{width:min(1080px,94vw)}.visual-editor{display:grid;grid-template-columns:320px minmax(0,1fr);gap:25px}.visual-editor .full{grid-column:1/-1}.visual-controls{display:flex;flex-direction:column;gap:14px}.visual-controls textarea{font:inherit;resize:vertical;width:100%;padding:10px;border:1px solid #e2d9ec;border-radius:6px}.visual-controls input[type=color]{padding:4px;height:38px;width:100%;cursor:pointer}.visual-preview{position:sticky;top:15px;align-self:start;background:#f7f4fa;border-radius:10px;padding:16px}.visual-preview canvas{display:block;max-width:100%;max-height:55vh;width:auto;height:auto;margin:auto;box-shadow:0 5px 18px #27163b26}.visual-preview p{font-size:11px;line-height:1.8;color:#8a7a9d;margin-bottom:0}.ordered-row[draggable=true]{cursor:grab}.ordered-row.dragging{opacity:.4}.ordered-row.drag-target{box-shadow:inset 0 -3px #9872d6}#upload-progress{margin:15px 0;background:#f4eefb;padding:15px;border-radius:9px}#upload-progress .button{margin-top:10px}.server-dot.unavailable{color:#c07533}.server-dot.unavailable:before{background:#d79550}
@media(max-width:760px){.visual-editor{grid-template-columns:1fr}.visual-editor .full{grid-column:auto}.visual-preview{position:static;grid-row:1}.screen-diagnostics>div{align-items:flex-start;flex-direction:column}.release-pill{float:none;margin-bottom:12px}}
.client-switcher{display:block;margin:16px 5px 19px;color:#aa9bb9;font-size:9px;letter-spacing:.35px;text-transform:uppercase}.client-switcher select{display:block;width:100%;margin-top:7px;padding:9px 8px;border:1px solid #dfd5ec;border-radius:6px;background:#fff;color:#655574;font-size:10px}.panel-toolbar{display:flex;align-items:end;gap:18px;padding:13px 16px;margin-bottom:18px}.panel-toolbar label{min-width:260px}.panel-toolbar input{margin-top:0}.row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.row-actions .button{padding:7px 9px}.samsung-install{padding:25px;margin-top:24px}.samsung-install h2{font-size:18px;margin:8px 0}.samsung-install h3{font-size:13px;margin-top:22px}.samsung-install ol{padding-left:19px}.samsung-install li{font-size:11px;color:#8c819a;line-height:1.8;margin:7px 0}.release-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.release-facts span{background:#f7f4fb;border-radius:7px;padding:12px;font-size:10px;color:#958aa2}.release-facts strong{display:block;color:#49365e;font-size:11px;margin-top:6px;overflow-wrap:anywhere}.mini-cards{grid-template-columns:repeat(4,minmax(0,1fr));padding:18px}.mini-card{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:8px;background:#faf8fd}.mini-card strong{font-size:12px}.mini-card small,.mini-card span{font-size:10px;color:#93879e}.check-list{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:7px;padding:9px}.check-list label{padding:10px;border-bottom:1px solid #f1edf6}.check-row{margin-top:18px;display:flex;gap:8px;align-items:center}.check-row input{width:auto;margin:0}.control-panel{margin:18px 0}.control-panel .panel-heading{align-items:flex-start;gap:15px}.control-panel .panel-heading .form-hint{margin:0}.support-table td{vertical-align:middle}@media(max-width:900px){.release-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.client-switcher{display:none}.panel-toolbar{display:block}.panel-toolbar label{min-width:0}.row-actions .button{font-size:9px}.samsung-install{padding:19px}.release-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-cards{grid-template-columns:1fr;padding:12px}}
.media-thumb{overflow:hidden}.media-thumb img,.media-thumb video{position:absolute;top:0;right:0;bottom:0;left:0;display:block;min-width:0;min-height:0}.playlist-art span{overflow:hidden}
.source-icon{height:100%;display:grid;place-items:center;color:#7654e8;background:linear-gradient(135deg,#f4f0ff,#e7f7f0)}.source-icon svg{width:64px;height:64px;stroke-width:1.1}.media-metadata{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-stage iframe{width:100%;height:100%;border:0;background:#fff}.rss-preview{height:100%;padding:6%;overflow:hidden;background:linear-gradient(135deg,#1b1426,#302044);color:white}.rss-preview h3{font-size:26px;margin:0 0 18px}.rss-preview p{border-top:1px solid #867394;padding:12px 0;font-size:18px}.page-heading .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.visual-controls input[type=range]{width:100%;accent-color:#7654e8}.visual-controls output{float:right;color:#7654e8}
.screen-transfer{margin:10px 0;padding:12px;border:1px solid #e3d8fb;border-radius:8px;background:#f8f5ff}.screen-transfer strong{color:#6746b6;font-size:11px}.screen-transfer p{margin:6px 0 0;font-size:10px;line-height:1.5;color:#776b8e}.screen-transfer progress{display:block;width:100%;height:10px;margin:10px 0 3px;accent-color:#7654e8}
.fleet-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}.fleet-stat{text-align:left;padding:17px;background:white;border:1px solid var(--line);border-radius:9px;color:#746b80}.fleet-stat strong{display:block;font:750 24px Manrope,sans-serif;color:#28243b}.fleet-stat span{font-size:10px}.fleet-stat.active{border-color:#9877e7;background:#f5f0ff}.fleet-toolbar,.fleet-bulk{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:14px}.fleet-toolbar{color:#827b8e;font-size:11px}.fleet-toolbar label{display:flex;align-items:center;gap:9px}.fleet-toolbar select,.fleet-bulk select{min-height:35px;padding:7px 10px;border:1px solid #ddd7e9;background:white;border-radius:6px;max-width:220px}.fleet-view{display:flex;margin-left:auto;border:1px solid var(--line);border-radius:7px;overflow:hidden}.fleet-view button{border:0;background:white;padding:9px 13px;color:#827b8e;font-size:10px}.fleet-view button.active{background:#eee8fc;color:#6c49d2}.fleet-bulk{padding:12px 15px;background:#f1ebfb;border:1px solid #e6daf9;border-radius:8px;font-size:11px}.fleet-bulk label{display:flex;align-items:center;gap:7px}.fleet-bulk strong{margin-left:auto;color:#5c477b}.fleet-table{overflow:auto}.fleet-table table{min-width:890px}.fleet-table th{white-space:nowrap}.fleet-table td{vertical-align:middle}.fleet-table td:first-child{width:38px}.fleet-table td:nth-child(2){min-width:155px}.fleet-table td:nth-child(5){min-width:180px;max-width:260px}.fleet-group td{background:#f6f4fa;color:#725d8c;font-size:10px;font-weight:700;letter-spacing:.04em;padding:10px 18px!important}.fleet-phase{display:inline-block;border-radius:20px;background:#f1f0f5;padding:6px 9px;color:#736e7c;font-size:10px;font-weight:650;white-space:nowrap}.fleet-phase.playing{background:#e3f7ee;color:#258262}.fleet-phase.downloading{background:#eee7ff;color:#6d48c7}.fleet-phase.alert{background:#fff0e7;color:#ac5b25}.fleet-phase.offline{background:#f2f1f3;color:#77737c}.fleet-transfer strong{font-size:11px;color:#6746b6}.fleet-transfer progress{display:block;width:100%;height:8px;accent-color:#7654e8;margin:5px 0}.fleet-transfer small{color:#827b8e;font-size:10px}.fleet-ready{color:#238465;font-size:10px}.fleet-warning{color:#ad542d;font-size:10px;overflow-wrap:anywhere}.fleet-cards{margin-top:15px}@media(max-width:900px){.fleet-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.fleet-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fleet-stat{padding:11px}.fleet-stat strong{font-size:19px}.fleet-bulk strong{margin-left:0}.fleet-bulk select{max-width:100%;width:100%}.fleet-bulk .button{width:100%}}
.fleet-phase.unlicensed{background:#fff0e7;color:#ac5b25}.license-table table{min-width:540px}.license-table td{vertical-align:middle}.license-table select{min-width:190px;max-width:300px;width:100%;padding:9px;border:1px solid #ddd7e9;border-radius:6px;background:white}
.control-panel{display:grid;gap:16px}.control-section{border:1px solid var(--line);border-radius:9px;padding:16px 18px}.control-section h3{margin:0 0 8px;font-size:13px}.control-section p{font-size:10px;color:#8a7a9d;line-height:1.7}.control-section form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(90px,140px);gap:12px;align-items:end;margin-top:12px}.control-section form .screen-controls{grid-column:1/-1}.control-section input[type=range]{width:100%;accent-color:var(--purple)}@media(max-width:600px){.control-section form{grid-template-columns:1fr}}
.dashboard-panel{margin-bottom:24px}.dashboard-panel .form-hint{margin:5px 0 0}.dashboard-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:#f0edf5}.dashboard-metric{background:#fff;padding:16px 18px;min-height:100px}.dashboard-metric span,.dashboard-metric small{display:block;color:#9b94a8;font-size:10px}.dashboard-metric strong{display:block;font-family:Manrope,sans-serif;font-size:23px;margin:10px 0 7px}.dashboard-metric small{font-size:9px}.proof-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--line);font-size:10px}.proof-strip strong{margin-right:auto}.proof-strip span b{font-size:16px;color:var(--purple);margin-right:3px}.proof-strip small{width:100%;color:#a29baa}.generated-nav{margin-top:0}.tree-node{padding:10px 22px;border-bottom:1px solid #f3eff8}.tree-node summary{cursor:pointer;font-size:11px;font-weight:700}.tree-node summary small{color:#aaa0b5;font-weight:400;margin-left:8px}.tree-screen{display:flex;align-items:center;gap:10px;margin:8px 0 0 18px;padding:10px 12px;background:#faf9fc;border-radius:7px;font-size:10px}.tree-screen small{color:#9992a4;margin-right:auto}.tree-screen .button{padding:5px 8px}.hierarchy-panel{overflow:hidden}.map-empty{padding:30px 24px}.map-empty h3{font-size:14px}.map-empty p{font-size:11px;color:#9e97a8;line-height:1.7;max-width:700px}.map-row{display:inline-flex;align-items:center;gap:9px;margin:7px 8px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:7px;font-size:10px}.map-row small{color:#9e97a8}.fleet-view button{font-size:9px}
.other-platforms-panel{margin-top:24px}.platform-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#f0edf5}.platform-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;background:#fff;padding:16px 20px}.platform-link strong,.platform-link small{display:block}.platform-link strong{font-size:11px}.platform-link small{font-size:10px;color:#968ca2;line-height:1.6;margin-top:5px}.platform-link code{grid-column:1/-1;padding:8px 10px;background:#f7f4fb;border-radius:5px;color:#7654e8;font-size:10px;overflow-wrap:anywhere}@media(max-width:760px){.platform-links{grid-template-columns:1fr}.platform-link{grid-template-columns:1fr}.platform-link .button{justify-self:start}}
.publication-chip{display:inline-block;margin:2px 4px 2px 0;padding:4px 7px;border-radius:999px;background:#f1f0f5;font-size:11px}.publication-chip.playback-reported{background:#dff5e7;color:#176b39}.publication-chip.playlist-received{background:#e5efff;color:#225a9e}.publication-chip.error{background:#ffe3e3;color:#9d2020}
.monitor-capture{margin:12px 0 16px;background:#17131f;border-radius:10px;overflow:hidden}.monitor-capture img{display:block;width:100%;max-height:420px;object-fit:contain;background:#17131f}.monitor-capture figcaption{padding:9px 12px;color:#d9cee9;font-size:10px}

/* Responsive and accessibility hardening */
.mobile-nav-toggle{display:none}
.skip-link{position:fixed;left:12px;top:12px;z-index:200;padding:10px 14px;border-radius:8px;background:#172230;color:#fff;transform:translateY(-180%);transition:transform .16s ease}.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid #9b7bf0;outline-offset:3px}
.table-wrap,.fleet-table{scrollbar-gutter:stable}
dialog #modal-body{max-height:89vh;overflow:auto}

@media(max-width:900px){
  .sidebar{position:sticky;inset:auto;top:0;width:100%;padding:11px 14px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;z-index:50}
  .sidebar>.brand{font-size:21px;min-width:0}
  .sidebar>.brand img{width:31px;height:31px}
  .mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#625873;font-size:11px;font-weight:700}
  .mobile-nav-toggle svg{width:17px;height:17px}
  .sidebar .workspace,.sidebar .client-switcher,.sidebar .nav-label,.sidebar nav,.sidebar .sidebar-bottom{display:none}
  .sidebar.mobile-open{max-height:100dvh;overflow-y:auto;align-items:start;box-shadow:0 12px 35px #27163b1c}
  .sidebar.mobile-open .client-switcher{display:block;grid-column:1/-1;width:100%;margin:14px 0 7px}
  .sidebar.mobile-open nav{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:5px 0;overflow:visible;width:100%}
  .sidebar.mobile-open nav+nav{margin-top:5px}
  .sidebar.mobile-open nav a{min-width:0;white-space:normal;padding:10px;line-height:1.35;margin:0;font-size:11px}
  .sidebar.mobile-open nav a svg{width:16px;flex:0 0 auto}
  .sidebar.mobile-open .nav-count,.sidebar.mobile-open .new-badge{margin-left:auto}
  .main-shell{margin-left:0}
  .topbar{height:auto;min-height:62px;padding:10px 16px;gap:8px 12px;flex-wrap:wrap}
  .breadcrumb{font-size:10px;min-width:0;flex:1}
  .breadcrumb span{padding:0 7px}
  .header-help{margin-left:auto}
  .search{display:flex;order:4;flex:1 0 100%;margin-left:0;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff}
  .search input{width:100%;min-width:0;font-size:12px}
  main{padding:22px 16px 34px;min-height:calc(100dvh - 154px)}
  .page-heading{align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:22px}
  .page-heading>div:first-child{min-width:0;flex:1 1 260px}
  .page-heading h1{font-size:23px;line-height:1.22;overflow-wrap:anywhere}
  .page-heading p{font-size:11px;max-width:none}
  .page-heading .actions{width:100%;justify-content:flex-start}
  .page-heading .button{font-size:11px;padding:10px 12px}
  .hero{min-height:170px}
  .hero-copy{padding:21px;max-width:75%}
  .hero-copy br{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-metric{min-height:92px;padding:14px}
  .cards{grid-template-columns:1fr}
  .panel-heading{align-items:flex-start;flex-wrap:wrap;padding:17px}
  .toolbar{flex-wrap:wrap}
  .toolbar .right{width:100%;margin-left:0}
  .upload-zone{align-items:flex-start;flex-wrap:wrap;padding:16px}
  .upload-zone>div:nth-child(2){min-width:0;flex:1}
  .upload-zone .button{display:inline-flex;width:100%;margin-left:0}
  .fleet-toolbar,.fleet-bulk{display:grid;grid-template-columns:1fr;width:100%;gap:10px}
  .fleet-toolbar label{display:grid;grid-template-columns:1fr;gap:6px;width:100%}
  .fleet-toolbar select,.fleet-bulk select{width:100%;max-width:none}
  .fleet-view{width:100%;margin-left:0;overflow-x:auto}
  .fleet-view button{flex:1;min-width:max-content}
  .fleet-bulk strong{margin-left:0}
  .table-wrap,.fleet-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{padding-left:16px;padding-right:16px}
  .tree-screen{margin-left:0;flex-wrap:wrap}
  .tree-screen small{width:100%;margin-right:0}
  .release-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  dialog,dialog.wide{width:calc(100vw - 24px);max-width:none;max-height:calc(100dvh - 24px);margin:auto}
  dialog #modal-body{max-height:calc(100dvh - 24px)}
  .modal-heading{position:sticky;top:0;z-index:2;background:#fff;padding:17px 18px}
  .modal-content{padding:18px}
  .form-actions{flex-wrap:wrap}
  .form-actions .button,.form-actions button[type=submit]{min-height:42px}
  .visual-preview canvas{max-height:40vh}
  #toast{left:12px;right:12px;bottom:12px;max-width:none;text-align:center}
  footer{height:auto;min-height:46px;padding:9px 16px;flex-wrap:wrap;font-size:9px}
  footer>span:first-child{display:inline}
  .server-dot{margin-left:auto}
}

@media(max-width:480px){
  .sidebar.mobile-open nav{grid-template-columns:1fr}
  .topbar{padding-inline:13px}
  main{padding-inline:13px}
  .page-heading{display:grid;grid-template-columns:1fr}
  .page-heading .actions{display:grid;grid-template-columns:1fr}
  .page-heading .button{width:100%}
  .hero-copy{max-width:100%}
  .hero-visual{display:none}
  .stats,.dashboard-metrics{grid-template-columns:1fr}
  .fleet-summary{grid-template-columns:1fr}
  .release-facts{grid-template-columns:1fr}
  .proof-strip{align-items:flex-start;gap:10px}
  .proof-strip strong,.proof-strip span{width:100%}
  .platform-link{padding:15px}
  .form-actions{flex-direction:column-reverse}
  .form-actions .button,.form-actions button[type=submit]{width:100%}
  .auth-form{padding:24px 18px;place-items:start center}
  .auth-form>div{max-width:none}
}

/* Guided visual editor */
.guided-visual-editor{padding:0!important;max-width:none}.visual-builder{background:#fbfaff}.visual-builder-top{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);background:#fff}.visual-steps{display:flex;gap:20px;color:#aaa2b2;font-size:10px}.visual-steps span{display:flex;align-items:center;gap:6px}.visual-steps span.active{color:var(--purple)}.visual-steps span b{font-weight:700}.visual-builder-actions{display:flex;gap:5px;align-items:center}.visual-builder-grid{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:570px}.visual-sidebar{background:#fff;border-right:1px solid var(--line);overflow:auto;max-height:640px}.visual-mode-switch{display:grid;grid-template-columns:1fr 1fr;padding:12px;border-bottom:1px solid var(--line);gap:6px}.visual-mode-switch button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:8px 5px;color:#8c829a;font-size:10px}.visual-mode-switch button.active{background:var(--purple-light);border-color:#d9cdf7;color:#6542ca;font-weight:700}.visual-section{padding:15px 16px;border-bottom:1px solid #f0edf5}.visual-section-title{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:11px}.visual-section-title strong{font-size:11px}.visual-section-title small{color:#aaa0b2;font-size:9px}.visual-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.visual-template{border:1px solid #e9e4f0;background:#fff;border-radius:7px;padding:6px;text-align:left;color:#6e637a}.visual-template:hover,.visual-template.active{border-color:#a889eb;background:#faf7ff}.visual-template strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}.visual-template small{display:block;color:#aaa0b2;font-size:8px;margin-top:3px}.visual-template-art{display:block;height:38px;border-radius:4px;background:linear-gradient(135deg,#302548,#7564bd);position:relative;overflow:hidden}.visual-template-art:after{content:'';position:absolute;left:15%;right:22%;bottom:12px;height:5px;border-radius:3px;background:#b9f58c;box-shadow:0 -9px 0 #ffffffcc}.visual-template-art.menu{background:linear-gradient(135deg,#16473e,#b9f58c)}.visual-template-art.news{background:linear-gradient(135deg,#20264b,#f46e87)}.visual-template-art.price{background:linear-gradient(135deg,#f8f4ea,#dd6d4b)}.visual-template-art.qr{background:repeating-linear-gradient(45deg,#eef0ff 0 3px,#6750d8 3px 6px)}.visual-template-art.weather{background:linear-gradient(135deg,#dceeff,#3478c4)}.visual-template-art.video{background:linear-gradient(135deg,#101522,#73d2c4)}.visual-add-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.visual-add-grid button{border:1px solid var(--line);background:#faf9fc;border-radius:5px;color:#776b86;padding:8px 4px;font-size:9px}.visual-add-grid button:hover{border-color:#b399ea;color:var(--purple);background:#f7f2ff}.visual-layer-list{display:flex;flex-direction:column;gap:4px;max-height:150px;overflow:auto}.visual-layer{display:flex;align-items:center;gap:7px;border:0;background:#faf9fc;padding:8px 9px;border-radius:5px;color:#81778d;text-align:left;font-size:10px}.visual-layer.active{background:#eee7fc;color:#6744c6;font-weight:700}.visual-layer .layer-type{width:18px;height:18px;border-radius:4px;background:#fff;display:grid;place-items:center;font-size:9px}.visual-layer small{margin-left:auto;color:#aaa0b2;font-size:8px}.advanced-options{display:grid;gap:9px}.visual-check{display:flex;align-items:center;gap:7px;font-size:10px;color:#82768e}.visual-check input{accent-color:var(--purple)}.visual-main{min-width:0;padding:18px;background:#f4f1f8}.visual-canvas-wrap{background:#282335;border-radius:9px;padding:20px 20px 12px;box-shadow:inset 0 0 0 1px #40364e}.visual-canvas-wrap canvas{display:block;width:100%;height:auto;max-height:400px;object-fit:contain;margin:auto;background:#211b32;box-shadow:0 7px 18px #17121e66;cursor:grab}.visual-canvas-wrap canvas:active{cursor:grabbing}.visual-canvas-note{display:flex;justify-content:space-between;gap:10px;color:#c7bbd4;font-size:9px;margin-top:12px}.visual-canvas-note i{margin-right:5px}.visual-inspector{background:#fff;border:1px solid var(--line);border-radius:8px;margin-top:14px}.visual-inspector-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #f0edf5}.visual-inspector-head strong,.visual-inspector-head small{display:block}.visual-inspector-head strong{font-size:11px}.visual-inspector-head small{font-size:9px;color:#a39aab;margin-top:3px}.visual-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding:14px}.visual-fields label{font-size:10px}.visual-fields label.wide{grid-column:1/-1}.visual-fields input,.visual-fields select,.visual-fields textarea{margin-top:6px;padding:8px;font-size:11px}.visual-fields input[type=color]{height:32px;padding:3px}.visual-selected-hint{grid-column:1/-1;padding:13px;background:#f8f5fc;border-radius:6px;color:#857895;font-size:10px;line-height:1.7}.visual-selected-hint span{color:#aba1b5}.visual-help{padding:10px 20px!important;margin:0!important;color:#9589a3!important;font-size:10px!important;background:#fff;border-top:1px solid var(--line)}.visual-focus .visual-sidebar,.visual-focus .visual-builder-top,.visual-focus .visual-inspector,.visual-focus .visual-help,.visual-focus .form-actions{display:none}.visual-focus .visual-builder-grid{display:block}.visual-focus .visual-main{padding:20px}.visual-focus .visual-canvas-wrap canvas{max-height:70vh}.visual-focus .visual-canvas-note{justify-content:center}.visual-focus .visual-builder{background:#17131f}
@media(max-width:900px){.visual-builder-grid{grid-template-columns:250px minmax(0,1fr)}.visual-template-grid{grid-template-columns:1fr}.visual-add-grid{grid-template-columns:repeat(2,1fr)}.visual-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.visual-builder-grid{display:block}.visual-sidebar{max-height:none;border-right:0;border-bottom:1px solid var(--line)}.visual-layers,.advanced-options{display:none}.visual-main{padding:12px}.visual-canvas-wrap{padding:10px}.visual-canvas-wrap canvas{max-height:48vh}.visual-builder-top{padding:11px 13px}.visual-steps{gap:8px;font-size:9px}.visual-steps span b{display:none}.visual-fields{grid-template-columns:1fr}.visual-fields label.wide{grid-column:auto}.visual-builder-actions .button{font-size:10px;padding:8px 9px}}
/* MFA: local QR, readable recovery codes and no horizontal overflow. */
.mfa-qr{display:block;width:260px;max-width:100%;height:auto;margin:12px auto;background:white}
.mfa-secret{display:block;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;padding:12px;background:#f1f3f6;color:#17212f;border-radius:8px;user-select:all}
.wall-card{margin-top:18px}.wall-preview{display:grid;gap:6px;background:#211b2c;padding:8px;border-radius:10px;max-width:680px}.wall-preview span{min-height:74px;background:#f4f0f8;border:1px solid #d8cfe2;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px}.wall-preview small{display:block;color:#756b7f}

/* HEDI visual system v2 — restrained, high-contrast B2B workspace. */

*{box-sizing:border-box}
.brand-sub{color:var(--purple);font-size:7px;letter-spacing:1.8px}.workspace strong{font-size:12px}.workspace small,.client-switcher{color:var(--muted)}.sidebar nav a{border-radius:8px;color:#667085;font-weight:560;padding:10px 11px}.sidebar nav a:hover{background:#f7f8fb;color:var(--ink)}.sidebar nav a.active{background:var(--purple-light);color:var(--purple);box-shadow:inset 3px 0 0 var(--purple)}.nav-label{color:#98a1af;font-size:9px;letter-spacing:1.2px;font-weight:750}.help-card{background:linear-gradient(145deg,#251d50,#5546a8);border:0;color:#fff;box-shadow:var(--shadow-md)}.help-card p,.help-card a{color:#d7d3f4}.profile{border-top:1px solid var(--line);padding-top:15px;color:var(--ink)}
.breadcrumb{color:#98a1af;font-size:11px}.breadcrumb strong{color:var(--ink)}.header-help{border-color:var(--line);color:var(--muted)}.page-heading{margin-bottom:28px}.eyebrow{color:var(--purple);font-size:9px;font-weight:800;letter-spacing:1.5px}.page-heading h1{font-size:30px;letter-spacing:-.045em;line-height:1.12}.page-heading p{color:var(--muted);font-size:13px}.button:hover{border-color:#b9b0f4;background:#faf9ff;color:var(--purple)}
.stats{gap:14px;margin-bottom:24px}.stat{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;box-shadow:var(--shadow-sm)}.stat-top{color:var(--muted);font-size:11px;font-weight:650}.stat-value{font-size:31px;letter-spacing:-.05em}.stat-note{color:var(--soft);font-size:10px}.stat-icon{background:var(--purple-light);color:var(--purple)}.panel-heading p,.form-hint{color:var(--muted);line-height:1.6}.table-wrap{border-radius:0 0 12px 12px}table{font-size:12px}th{background:#fafbfc;color:#8b95a5;font-size:9px;font-weight:800;letter-spacing:.8px;padding:14px 22px}td{padding:16px 22px;border-bottom:1px solid #eef1f4;color:#475467}td strong{color:var(--ink);font-size:12px}td small{color:var(--muted)}.status{border:1px solid var(--line);font-weight:650}.status.online,.fleet-phase.playing{background:var(--green-light);color:var(--green);border-color:#c5ecd9}.fleet-phase.alert{background:var(--danger-light);color:var(--danger);border-color:#ffd4da}.fleet-phase.offline{background:#fff7e8;color:#a66a00;border-color:#ffe4ad}
label{color:#475467;font-weight:650}label input,label select,label textarea{border:1px solid #dce1e8;border-radius:8px;background:#fff;color:var(--ink);padding:11px 12px}label input:focus,label select:focus,label textarea:focus,.search:focus-within{outline:3px solid #5b46d61f;border-color:#9789ed}.info-box{background:#f7f5ff;border:1px solid #e6e0ff;color:#6657a8;border-radius:10px;padding:14px 17px}.empty{color:var(--muted)}.empty-icon{background:#f7f5ff;border-color:#e6e0ff;color:var(--purple)}.card-body h3,.mini-card strong{color:var(--ink)}.screen-card,.media-card,.playlist-card,.mini-card{border-color:var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
.dashboard-panel,.support-panel,.recovery-panel{overflow:hidden}.support-panel .panel-heading,.recovery-panel .panel-heading{background:#fbfcfd}.publication-chip{border:1px solid #e5e8ee}.publication-chip.playback-reported{background:var(--green-light);color:var(--green)}#toast{background:#172230;border-radius:9px;box-shadow:var(--shadow-md)}footer{border-top:1px solid var(--line);background:#fff;color:#98a1af}
@media(max-width:760px){.topbar{padding:10px 16px}.main-shell{background:var(--canvas)}main{padding:24px 16px 34px}.page-heading h1{font-size:25px}.panel-heading{padding:17px}.stat{padding:17px}.sidebar{box-shadow:none}}

/* QA Studio: keyboard entry, long content and the TV boundary stay visible at every zoom. */
.skip-link{position:fixed;left:12px;top:10px;z-index:100;color:#fff;background:var(--ink);padding:10px 14px;border-radius:8px;transform:translateY(-180%);transition:transform .15s ease;font-weight:750;font-size:12px}.skip-link:focus{transform:translateY(0)}
.tv-limitations{padding:18px 20px;border:1px solid #ffe4ad;border-radius:10px;background:var(--warning-light);color:#75511a}.tv-limitations h2,.tv-limitations h3{margin:0 0 8px;font-size:13px;color:#724b0f}.tv-limitations ul{margin:0;padding-left:20px;line-height:1.7;font-size:11px}.tv-limitations li+li{margin-top:4px}.visual-limitations{margin:14px 20px 0;padding:12px 14px;border-radius:8px;background:var(--warning-light);color:#75511a;font-size:10px;line-height:1.6}
.screen-diagnostics{min-width:0}.screen-diagnostics p,.screen-diagnostics li,.screen-transfer{overflow-wrap:anywhere}.visual-builder,.visual-builder-grid,.visual-main,.visual-sidebar{min-width:0}.visual-canvas-wrap{overflow:hidden}.visual-canvas-wrap canvas{max-width:100%;height:auto}.visual-add-grid button:disabled{cursor:not-allowed;background:#f4f5f7;color:#98a1af}
@media (min-width:901px) and (max-width:1200px){main{padding-inline:24px}.overview-columns{grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr)}.cards{gap:14px}.install-grid{grid-template-columns:1fr}.visual-builder-grid{grid-template-columns:280px minmax(0,1fr)}}
@media (max-width:900px){.screen-diagnostics{font-size:12px}.tv-limitations{padding:15px}.tv-limitations ul{padding-left:18px}.visual-limitations{margin-inline:12px}.table-wrap{max-width:100%}}
@media (max-width:480px){.tv-limitations{font-size:11px}.tv-limitations ul{padding-left:17px}.screen-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.screen-controls .button{min-width:0;white-space:normal;min-height:40px}.visual-builder-actions{flex-wrap:wrap;justify-content:flex-end}.visual-builder-actions .icon-button{flex:0 0 auto}.visual-limitations{margin:12px 10px 0}.skip-link{left:8px;right:8px;text-align:center}}
@media (min-resolution:1.5dppx){.button,.icon-button,.mobile-nav-toggle{min-height:40px}.search input{min-height:40px}}

/* Overview v3: explicit product hierarchy and stable responsive layout. */
.overview-page{max-width:1280px;margin:0 auto}.overview-page .page-heading{align-items:flex-end;margin-bottom:30px}.overview-page .page-heading>div:first-child{min-width:0}.overview-page .page-heading h1{max-width:760px}.overview-page .page-heading .actions{flex-shrink:0}.overview-page .hero{min-height:220px;margin-bottom:22px;border:1px solid #ded8f7;background:linear-gradient(110deg,#f1eeff 0%,#ebe7ff 58%,#e3dcfb 100%);box-shadow:0 8px 24px #4b3a8a0b}.overview-page .hero-copy{padding:34px 38px;max-width:62%}.overview-page .hero h2{font-size:29px;line-height:1.18;letter-spacing:-.055em;max-width:520px}.overview-page .hero p{font-size:13px;line-height:1.65;max-width:460px}.overview-page .hero-visual{width:38%}.overview-page .mini-monitor{width:210px;height:126px}.overview-page .mini-monitor strong{font-size:26px;line-height:1.05;text-align:center}.overview-page .overview-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}.overview-page .overview-stat{min-height:132px;padding:19px 20px;box-shadow:var(--shadow-sm)}.overview-page .overview-stat .stat-value{margin-top:16px}.stat-denominator{font-size:16px;color:#98a1af;font-weight:450}.overview-columns{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);gap:22px;align-items:start}.overview-panel{margin-bottom:0}.overview-panel .panel-heading{min-height:82px}.panel-kicker{display:block;margin-bottom:7px;color:#7a6ad2;font-size:9px;font-weight:800;letter-spacing:1.2px}.overview-panel .panel-heading h2{font-size:16px}.overview-screen-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}.overview-screen-grid .screen-card{min-width:0}.overview-side{display:grid;gap:22px}.overview-onboarding{margin:0;padding:24px 25px;list-style:none}.overview-onboarding .step{padding-bottom:20px}.overview-onboarding .step:last-child{padding-bottom:0}.overview-activity .activity{padding:4px 23px 12px}.overview-empty-note{padding:25px;margin:0}.overview-page .empty{padding:56px 24px}.overview-page .empty h3{font-size:14px;color:var(--ink)}
@media(max-width:1050px){.overview-page .hero-copy{max-width:70%}.overview-columns{grid-template-columns:1fr}.overview-side{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-side .panel{min-width:0}}
@media(max-width:900px){.overview-page .page-heading{align-items:flex-start}.overview-page .page-heading .actions{justify-content:flex-start}.overview-page .hero{min-height:205px}.overview-page .hero-copy{padding:30px;max-width:62%}.overview-page .hero h2{font-size:23px;max-width:370px}.overview-page .overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-side{grid-template-columns:1fr}.overview-screen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.overview-page .page-heading{display:block}.overview-page .page-heading .actions{margin-top:16px}.overview-page .page-heading .button{flex:1}.overview-page .hero{min-height:230px}.overview-page .hero-copy{padding:25px;max-width:100%}.overview-page .hero h2{font-size:24px;max-width:290px}.overview-page .hero p{max-width:280px;font-size:12px}.overview-page .hero-visual{right:-92px;width:58%;opacity:.42}.overview-page .mini-monitor{width:174px;height:104px}.overview-page .mini-monitor strong{font-size:21px}.overview-page .overview-stats{gap:9px}.overview-page .overview-stat{min-height:116px;padding:15px}.overview-page .overview-stat .stat-value{font-size:26px;margin-top:12px}.overview-screen-grid{grid-template-columns:1fr;padding:12px}.overview-panel .panel-heading{padding:18px}.overview-onboarding{padding:20px}.overview-page .empty{padding:42px 18px}}

/* Interaction system: every action must visibly answer the user. */

.button,button,.icon-button,.toolbar button,.fleet-stat,.mobile-nav-toggle{transition:background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease),opacity .16s var(--ease)}
.button:hover{transform:translateY(-1px);box-shadow:0 5px 14px #17203312}.button:active,.button.is-pressed{transform:translateY(1px) scale(.985);box-shadow:0 1px 3px #17203318}.button:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #6d54df55;outline-offset:3px}.button:disabled,button:disabled{cursor:not-allowed;transform:none;box-shadow:none}.button.action-busy{color:transparent!important;pointer-events:none}.button.action-busy:after{content:'';position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-8px;border:2px solid var(--purple);border-right-color:transparent;border-radius:50%;animation:hedi-spin .65s linear infinite}.button.primary.action-busy:after{border-color:#fff;border-right-color:transparent}.icon-button{min-width:32px;min-height:32px;align-items:center;justify-content:center}.icon-button:active{transform:scale(.92);background:var(--purple-light)}.toolbar button:hover,.fleet-stat:hover{transform:translateY(-1px);border-color:#b8a9ef;box-shadow:0 4px 12px #17203310}.fleet-stat:active{transform:scale(.985)}
@keyframes hedi-spin{to{transform:rotate(360deg)}}
#toast{display:flex;align-items:center;gap:10px;right:24px;bottom:24px;min-height:48px;padding:13px 17px;border:1px solid #2e3b4c;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s var(--ease),transform .2s var(--ease),background-color .2s var(--ease);pointer-events:none}#toast.show{opacity:1;transform:translateY(0) scale(1)}#toast.success{background:#172a26;border-color:#2e6b57}#toast.success:before{content:'✓';display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#2f9a74;color:#fff;font-size:12px;font-weight:800}#toast.error{background:#371d26;border-color:#8c3c50}#toast.error:before{content:'!';display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#c44b68;color:#fff;font-size:12px;font-weight:800}
dialog[open]{animation:hedi-dialog-in .18s var(--ease)}@keyframes hedi-dialog-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}dialog::backdrop{animation:hedi-backdrop-in .18s ease-out}@keyframes hedi-backdrop-in{from{opacity:0}to{opacity:1}}
.panel,.stat,.screen-card,.media-card,.playlist-card{transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}.screen-card:hover,.media-card:hover,.playlist-card:hover{border-color:#d5cdf5;box-shadow:0 10px 24px #17203312;transform:translateY(-2px)}
label input,label select,label textarea{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}label input:hover,label select:hover,label textarea:hover{border-color:#c8bddf}label input:focus,label select:focus,label textarea:focus{box-shadow:0 0 0 4px #6d54df14}
@media(prefers-reduced-motion:reduce){.button,button,.icon-button,.toolbar button,.fleet-stat,.panel,.stat,.screen-card,.media-card,.playlist-card,#toast,dialog{transition:none!important;animation:none!important}}

/* Shared components, navigation, data density, forms and responsive behavior. */



.sidebar nav a{font-size:13px}
.nav-label,.eyebrow,.panel-kicker,.modal-kicker{font-size:11px;letter-spacing:.08em}
.page-heading{margin-bottom:22px}
.page-heading p,.form-hint,.panel-heading p,.empty p{font-size:13px}
.button,.toolbar button,.fleet-view button{font-size:13px}
.button.small,.icon-button{min-height:36px}
.icon-button{min-width:36px}
.stat-top,.stat-note,.card-body p,.card-bottom,.screen-card small,.media-card small,.playlist-card small{font-size:12px}

th{font-size:11px;letter-spacing:.04em}
td{font-size:13px;line-height:1.5}
label{font-size:13px}
.status,.fleet-phase,.badge{font-size:11px}
.panel,.stat,.screen-card,.media-card,.playlist-card{border-radius:var(--radius-md)}
.button,label input,label select,label textarea,.search{border-radius:var(--radius-sm)}




.form-error:not(:empty){font-size:13px}
.search:hover{background:#fff;border-color:#d4d9e2}.page-heading{padding-bottom:4px}.page-heading h1{font-weight:760}.page-heading .actions{flex-wrap:wrap}.page-heading .actions .button{min-width:fit-content}.panel-heading>div{min-width:0}.panel-heading a{display:inline-flex;align-items:center;min-height:32px;padding:6px 8px;border-radius:7px}.panel-heading a:hover{background:var(--purple-light)}
.sidebar nav a{min-height:42px;position:relative}.sidebar nav a:active{transform:scale(.985)}.sidebar nav a.active:after{content:'';position:absolute;right:10px;width:6px;height:6px;border-radius:50%;background:var(--purple)}.nav-count,.new-badge{border:1px solid #e1dcf7}.profile{border-radius:9px}.profile:hover{background:#f7f8fb}.profile:active{background:#f0edff}
.stat{overflow:hidden}.stat-top{min-height:28px}.stat-value{font-variant-numeric:tabular-nums}.status,.fleet-phase{min-height:26px;padding:5px 9px;border-radius:999px}.panel-toolbar{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)}.toolbar button{min-height:36px}.toolbar button.active,.fleet-view button.active{box-shadow:inset 0 0 0 1px #cfc4f7}.fleet-view button{min-height:38px}.fleet-bulk{border-radius:12px;box-shadow:0 5px 16px #5b46d60c}.fleet-bulk .button{min-width:190px}.fleet-table{border-radius:12px}.fleet-table tr:not(.fleet-group):hover td{background:#faf9ff}.fleet-table th{position:sticky;top:0;z-index:1}.fleet-table td{transition:background-color .14s ease}.cards{align-items:start}.card-body{min-width:0}.card-body h3{font-size:13px}.card-bottom{min-height:34px}.screen-card,.media-card,.playlist-card{isolation:isolate}.screen-preview:after,.media-thumb:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff12}
.empty{display:grid;justify-items:center}.empty-icon{box-shadow:0 8px 22px #5b46d612}.empty h3{font-size:15px}.empty p{font-size:12px;color:var(--muted)}.info-box{position:relative;padding-left:42px}.info-box:before{content:'i';position:absolute;left:16px;top:15px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#ded7ff;color:#5842c8;font-weight:800}
dialog{border:0;border-radius:16px;box-shadow:0 28px 90px #17203333}.modal-heading{min-height:78px;background:#fbfcfd}.modal-kicker{display:block;margin-bottom:5px;color:var(--purple);font-size:8px;font-weight:800;letter-spacing:1.4px}.modal-heading h2{font-size:19px}.close{width:36px;height:36px;display:grid;place-items:center;font-size:22px;transition:background-color .15s ease,color .15s ease,transform .12s ease}.close:hover{background:#eeeaff;color:var(--purple)}.close:active{transform:scale(.92)}.modal-content{padding:27px}.modal-content label+label,.modal-content .form-grid{margin-top:16px}.form-grid{gap:18px}.form-error:not(:empty){margin-top:12px;padding:10px 12px;border:1px solid #ffd0d8;border-radius:8px;background:#fff2f4;color:#a9364c}.form-actions{padding-top:18px;border-top:1px solid #edf0f4}.form-actions .button{min-width:112px}label{line-height:1.4}label input,label select,label textarea{min-height:42px}label textarea{min-height:110px;resize:vertical}select{cursor:pointer}
.confirm-dialog{width:min(440px,calc(100vw - 28px));padding:0}.confirm-dialog form{padding:28px}.confirm-dialog h2{margin:18px 0 8px;font-size:20px}.confirm-dialog p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.confirm-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff0f2;color:var(--danger);font-size:20px;font-weight:800}.confirm-dialog .form-actions{margin-top:24px}.confirm-dialog .button.danger{background:var(--danger);border-color:var(--danger);color:#fff}.confirm-dialog .button.danger:hover{background:#a83249;border-color:#a83249;color:#fff}
@media(max-width:900px){
  .topbar{height:68px;padding:0 24px}.breadcrumb{display:none}.search{margin-left:0;flex:1}.search input{width:100%}.header-help{width:34px;height:34px}.topbar>.avatar{display:inline-flex}
  main{padding:28px 28px 42px}.page-heading{align-items:flex-start;flex-direction:column;justify-content:flex-start}.page-heading>div:first-child{flex:none;width:100%}.page-heading .actions{width:100%}.page-heading .actions .button{flex:1}.page-heading h1{font-size:28px}
  .fleet-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fleet-stat{min-height:88px}.fleet-stat strong{font-size:24px}.fleet-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}.fleet-toolbar label{display:block;min-width:0}.fleet-toolbar label select{width:100%;max-width:none}.fleet-toolbar>span{align-self:end}.fleet-view{grid-column:1/-1;width:100%;margin:0}.fleet-view button{flex:1}.fleet-bulk{display:grid;grid-template-columns:1fr;padding:16px}.fleet-bulk strong{margin:0}.fleet-bulk select{width:100%;max-width:none}.fleet-bulk .button{width:100%}.overview-screen-grid{grid-template-columns:1fr}.overview-panel .screen-card{max-width:460px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.overview-page .overview-screen-grid{grid-template-columns:1fr}.panel-toolbar{padding:16px}.panel-toolbar label{min-width:0}.install-grid{grid-template-columns:1fr}.form-panel{max-width:none}
}
@media(max-width:600px){
  .sidebar{padding:10px 14px}.topbar{height:62px;padding:0 14px;gap:9px}.topbar>.avatar{display:none}.search{min-height:38px}.header-help{flex:0 0 34px}main{padding:22px 14px 36px}.page-heading{margin-bottom:22px}.page-heading h1{font-size:25px}.page-heading p{font-size:12px}.page-heading .actions{display:grid;grid-template-columns:1fr}.page-heading .actions .button{width:100%}
  .stats,.overview-page .overview-stats{grid-template-columns:1fr 1fr}.stat{min-height:112px}.stat-icon{display:none}.fleet-summary{grid-template-columns:1fr 1fr}.fleet-stat{padding:13px}.fleet-toolbar{grid-template-columns:1fr}.fleet-view{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr}.panel-heading{align-items:flex-start}.panel-heading>a{margin-left:auto}.panel{border-radius:11px}.info-box{padding:14px 14px 14px 40px}.info-box:before{left:13px;top:13px}
  dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:14px}.modal-heading{position:sticky;top:0;z-index:2;min-height:70px;padding:17px 18px}.modal-content{padding:20px 18px}.form-grid{grid-template-columns:1fr;gap:14px}.form-grid .full{grid-column:auto}.form-actions{position:sticky;bottom:0;z-index:1;margin:20px -18px -20px;padding:14px 18px;background:#fff;box-shadow:0 -8px 18px #1720330a}.form-actions .button{width:100%}
  #toast{left:12px;right:12px;bottom:12px;max-width:none}.overview-panel .screen-card{max-width:none}
}

/* Information hierarchy v5: concise surfaces, diagnostics on demand. */
.compact-overview .page-heading{margin-bottom:22px}.compact-overview .overview-stats{margin-bottom:18px}.compact-screen-card .card-body{padding:16px}.screen-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.screen-card-title h3{margin:0 0 4px;font-size:14px}.screen-card-title p{margin:0;color:var(--muted);font-size:11px}.screen-attention{flex:0 0 auto;padding:4px 8px;border:1px solid #ffd8b5;border-radius:999px;background:#fff6eb;color:#a65d18;font-size:9px;font-weight:800}.screen-card-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.screen-card-summary div{min-width:0;padding:11px;border-radius:8px;background:#f7f8fa}.screen-card-summary dt{margin-bottom:4px;color:#8b95a5;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.5px}.screen-card-summary dd{margin:0;overflow:hidden;color:#344054;font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.screen-card-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:13px;border-top:1px solid #edf0f4}.screen-card-actions .button{min-height:34px}.compact-screen-card .screen-preview{aspect-ratio:16/8}.compact-screen-card .preview-logo{font-size:27px}
@media(max-width:600px){.screen-card-summary{grid-template-columns:1fr}.screen-card-actions .button{flex:1}}

.compact-section{margin:0 0 16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}.compact-section>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:14px 18px;cursor:pointer;list-style:none;font-size:13px;font-weight:750}.compact-section>summary::-webkit-details-marker{display:none}.compact-section>summary:hover{background:#faf9ff}.compact-section>summary em{color:var(--purple);font-size:10px;font-style:normal;font-weight:750}.compact-section[open]>summary{border-bottom:1px solid var(--line);background:#fbfcfd}.compact-section>.panel,.compact-section>.install-grid{margin:0;border:0;border-radius:0;box-shadow:none}.compact-section>.install-grid{padding:18px}.compact-section .compact-section{margin:12px}
.tv-limit{margin:12px 0 0;padding:12px 14px;border:1px solid #f0dfb6;border-radius:9px;background:#fff9ec;color:#765315;font-size:12px;line-height:1.55}.tv-limit strong{color:#9a6500}.preview-limit{color:#a66a00!important;font-weight:700}.visual-limitations{margin:14px 0 0;padding:12px 14px;border-left:3px solid #d5a33a;background:#fff9ec;color:#765315;font-size:12px;line-height:1.55}
@media(min-width:1500px){main{max-width:1660px}.visual-builder-grid{grid-template-columns:340px minmax(0,1fr)}.visual-canvas-wrap canvas{max-height:560px}}
@media(max-width:1050px){main{max-width:none}.visual-builder-grid{grid-template-columns:280px minmax(0,1fr)}.cards{gap:14px}.panel-heading,.card-body{min-width:0}}
@media(max-width:760px){.skip-link{left:8px;top:8px}.tv-limit,.visual-limitations{font-size:11px}.visual-builder-grid{display:block}.visual-sidebar{max-height:none}.visual-builder-actions{flex-wrap:wrap;justify-content:flex-end}.visual-builder-actions .button{min-width:0}.visual-canvas-wrap{overflow:hidden}.visual-canvas-wrap canvas{max-width:100%;height:auto}.visual-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){body{overflow-x:hidden}.main-shell,main,.panel,.stat,.screen-card,.media-card,.playlist-card,dialog{min-width:0;max-width:100%}.topbar,.page-heading,.panel-heading,.form-actions{min-width:0}.page-heading .actions,.actions,.screen-card-actions{width:100%;display:grid;grid-template-columns:1fr}.page-heading .actions .button,.screen-card-actions .button{width:100%}.panel-heading a{max-width:100%;overflow-wrap:anywhere}.visual-builder-top{display:block}.visual-builder-actions{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.visual-builder-actions .icon-button,.visual-builder-actions .button{width:100%}.visual-steps{justify-content:space-between}.visual-canvas-note{display:block}.visual-canvas-note span{display:block;margin-top:5px;overflow-wrap:anywhere}.preview-caption{display:block}.preview-caption>*{display:block;margin-top:5px}.form-actions{gap:8px}.form-actions .button{width:100%}}
.loading-state,.load-error{min-width:0}.loading-state .empty,.load-error .empty{padding:clamp(32px,8vw,72px) 20px}.loading-state h1,.load-error h1{font-size:clamp(18px,3vw,24px);overflow-wrap:anywhere}.load-error .button{margin-top:10px}.load-error p{max-width:54ch;overflow-wrap:anywhere}
@media (min-width:1500px){.loading-state .empty,.load-error .empty{padding-block:84px}}
.screen-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:4px 0 20px;border-bottom:1px solid var(--line)}.screen-detail-header h3{font-size:20px;margin:0 0 7px}.screen-detail-header p{margin:0;color:var(--muted);font-size:11px}.screen-detail-section{padding:20px 0;border-bottom:1px solid #f0eff5}.screen-detail-section>h3{font-size:13px;margin:0 0 12px}.screen-detail-section .screen-diagnostics{border:0;padding:0}.screen-detail-section .screen-controls{margin-top:14px}.screen-detail .info-box{margin-top:14px}.screen-detail .form-actions{margin-top:20px}.screen-detail .eyebrow{margin-bottom:6px}
@media(max-width:600px){.screen-detail-header{display:block}.screen-detail-header .status{margin-top:12px}.screen-detail .form-actions{display:grid;grid-template-columns:1fr}.screen-detail .form-actions .button{width:100%}}
.visual-layout-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0;padding:11px;border:1px solid #e6e0f3;border-radius:7px}.visual-layout-controls legend{padding:0 4px;color:#74658c;font-size:10px;font-weight:800}.visual-layout-controls label{min-width:0}.visual-layout-controls .visual-check{grid-column:span 2;align-self:end}.visual-layer-actions{display:flex;gap:6px;grid-column:span 2;align-items:end}.visual-layer-actions button{min-height:33px;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:#fff;color:#685a7c;font-size:10px}.visual-layer-actions button:hover{border-color:#aa8ce8;color:var(--purple)}
@media(max-width:700px){.visual-layout-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-layout-controls .visual-check,.visual-layer-actions{grid-column:span 1}}
@media(max-width:700px){.sidebar .nav-label{display:block;margin-top:18px;margin-bottom:8px;font-size:8px}.sidebar nav[hidden],.sidebar .nav-label[hidden]{display:none!important}}
@media(max-width:760px){.sidebar.mobile-open .sidebar-bottom{display:block;padding-top:16px}.sidebar.mobile-open .help-card{display:none}.sidebar.mobile-open .profile{padding-top:12px}}
@media(max-width:760px){.sidebar.mobile-open nav{display:flex;flex-wrap:wrap;overflow:visible;margin-top:6px}.sidebar.mobile-open .nav-label{display:block;width:100%;margin:14px 0 4px}.sidebar.mobile-open nav a{flex:1 1 45%;min-width:145px}.sidebar.mobile-open .workspace,.sidebar.mobile-open .client-switcher{display:flex}.sidebar.mobile-open .client-switcher{margin:0 0 10px}}
@media(max-width:900px){.sidebar.mobile-open{position:fixed;inset:0 auto 0 0;width:min(360px,88vw);height:100dvh;max-height:none;display:flex;grid-template-columns:none;align-items:stretch;padding:64px 16px 20px;transform:translateX(0);overflow-y:auto;box-shadow:18px 0 50px #1720332b}.sidebar:not(.mobile-open){transform:none}.sidebar.mobile-open .workspace{display:flex;flex:none;margin:18px 0 14px}.sidebar.mobile-open .client-switcher{display:block;flex:none;margin:0 0 12px}.sidebar.mobile-open .nav-label{display:block;flex:none;width:auto;margin:16px 2px 6px}.sidebar.mobile-open nav{display:block;flex:none;width:100%;margin:0;overflow:visible}.sidebar.mobile-open nav+nav{margin-top:0}.sidebar.mobile-open nav a{display:flex;min-width:0;width:100%;padding:11px 12px;margin:2px 0;white-space:normal}.sidebar.mobile-open .sidebar-bottom{display:block;margin-top:auto;padding-top:18px}.sidebar.mobile-open .help-card{display:none}}
.nav-label-button{display:flex;width:100%;align-items:center;justify-content:space-between;border:0;background:transparent;padding:7px 12px;color:#98a1af;text-align:left;cursor:pointer}.nav-label-button::after{content:'⌄';font-size:13px;transition:transform .16s ease}.nav-label-button[aria-expanded="false"]::after{transform:rotate(-90deg)}body.nav-locked{overflow:hidden}.nav-backdrop{display:none}
@media(max-width:900px){.nav-backdrop{display:block;position:fixed;inset:0;background:#17203366;z-index:40;backdrop-filter:blur(2px)}.nav-backdrop[hidden]{display:none}.sidebar{z-index:50}.sidebar.mobile-open .nav-label-button{padding:8px 4px}.sidebar.mobile-open .nav-label-button::after{margin-left:auto}}

/* HEDI Studio design direction — compact premium SaaS workspace. */







.client-switcher{margin:0 4px 12px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.client-switcher select{margin-top:7px}
.nav-label-button{margin:14px 2px 5px;padding:5px 8px;color:#8b95a5;font-size:11px;letter-spacing:.02em;text-transform:none;font-weight:650}
.nav-label-button::after{color:#aab2bf;font-size:12px}
.sidebar nav a{min-height:40px;margin:2px 0;padding:9px 10px;gap:11px;border-radius:var(--radius-control);font-size:13px;font-weight:550;color:#667085}
.sidebar nav a svg{width:17px;height:17px}
.sidebar nav a.active{background:var(--brand-soft);color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.sidebar nav a.active svg{stroke-width:2}

.help-card{padding:16px;border-radius:var(--radius-card);margin-bottom:16px}
.profile{padding-top:14px}


.breadcrumb{font-size:12px;color:var(--muted)}



.page-heading{margin-bottom:28px}
.page-heading h1{font-size:30px;line-height:1.15;letter-spacing:-.045em;margin-bottom:8px}
.page-heading p{font-size:14px;color:var(--muted);line-height:1.55}
.eyebrow{font-size:11px;letter-spacing:.08em;color:var(--brand);font-weight:700}


.panel,.stat,.screen-card,.media-card,.playlist-card,.mini-card{border-radius:var(--radius-card);border-color:var(--line);box-shadow:var(--shadow-card)}


.panel-heading p,.form-hint{font-size:13px;color:var(--muted)}
.stats{gap:16px;margin-bottom:24px}
.stat{padding:20px}
.stat-value{font-size:32px;font-weight:650}
.overview-page{max-width:1280px}
.overview-page .hero{min-height:190px;border-radius:var(--radius-panel);margin-bottom:20px}
.overview-page .hero-copy{padding:30px 34px}
.overview-page .hero h2{font-size:28px}
.overview-page .overview-stats{gap:12px;margin-bottom:20px}
.overview-page .overview-stat{min-height:120px;padding:18px}
.overview-columns{gap:20px}
dialog{border-radius:var(--radius-panel)}
label input,label select,label textarea{border-radius:var(--radius-control);font-size:14px}
footer{padding:0 40px}
@media(max-width:1200px){main{padding-inline:32px}.topbar{padding-inline:32px}}
@media(max-width:900px){
  .sidebar:not(.mobile-open){position:fixed;transform:translateX(-105%);width:min(360px,88vw);padding:20px 16px;box-shadow:18px 0 50px #1720332b}
  .mobile-nav-toggle{position:fixed;left:14px;top:14px;z-index:60;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--radius-control);background:#fff;color:var(--ink);box-shadow:0 4px 14px #17203318;font-size:11px;font-weight:700}
  .main-shell{margin-left:0}.topbar{padding-inline:24px}.search input{width:100%}main{padding:32px 28px 44px}
  .sidebar.mobile-open .nav-label-button{text-transform:none}.sidebar.mobile-open nav a{font-size:14px}
}
@media (min-width:601px) and (max-width:900px){.sidebar.mobile-open{width:320px}}
@media(max-width:600px){.topbar{padding-inline:14px}main{padding:24px 16px 36px}.page-heading h1{font-size:26px}.page-heading p{font-size:13px}.overview-page .hero-copy{padding:24px}.overview-page .hero h2{font-size:24px}}

/* Responsive header refinement: the menu must never cover the workspace context. */
@media(max-width:900px){
  .topbar{padding-left:72px;padding-right:16px;gap:12px}
  .mobile-nav-toggle{width:40px;height:40px;padding:8px}
  .mobile-nav-toggle span{display:none}
  .mobile-nav-toggle svg{width:19px;height:19px}
  .search{flex:0 1 280px;max-width:280px;height:40px;min-height:40px;margin-left:0;padding:0 10px}
  .search input{width:170px;min-height:0;height:28px;padding-block:4px}
  .topbar>.avatar{display:inline-flex;flex:0 0 auto}
}
@media(max-width:600px){
  .topbar{padding-left:68px;gap:8px}
  .search{flex:0 0 40px;width:40px;max-width:40px;padding:2px 9px}
  .search input{display:none}
  .header-help{flex:0 0 34px}
}
@media (min-width:601px) and (max-width:900px){
  .breadcrumb{display:flex;align-items:center;min-width:0;max-width:190px;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-help{display:none}
  .account-label{display:inline;color:var(--muted);font-size:12px;white-space:nowrap}
  .page-heading .actions{justify-content:flex-start}
  .page-heading .actions .button{flex:0 0 auto}
}
@media (max-width:600px){.breadcrumb,.header-help,.account-label{display:none}}

/* Topbar direction: context left, scoped search center, named utilities right. */

.breadcrumb{display:flex;align-items:center;min-width:0;color:var(--muted);font-size:12px;white-space:nowrap}
.breadcrumb>span{padding:0 10px;color:#c3c9d2}.breadcrumb strong{overflow:hidden;color:var(--ink);font-weight:650;text-overflow:ellipsis}

.header-help{order:3;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:52px;height:36px;padding:0 10px;border-radius:8px;border-color:var(--line);font-size:12px;font-weight:650;color:var(--muted)}
.header-help:hover{background:var(--brand-soft);border-color:#d9d1ff;color:var(--brand)}.small-avatar{order:4}.account-label{order:5;display:inline;color:var(--muted);font-size:12px;white-space:nowrap}
.topbar>.avatar{margin-left:2px}
.account-control{order:4;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;border-radius:10px;padding:4px 8px 4px 4px;color:var(--ink);cursor:pointer}.account-control:hover,.account-control[aria-expanded="true"]{background:#f8fafc;border-color:var(--line)}.account-control:focus-visible{outline:3px solid #5b46d633;outline-offset:2px}.account-control .small-avatar{order:0}.account-control .account-label{order:0}.account-menu{position:absolute;right:32px;top:58px;z-index:70;width:248px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-md)}.account-menu[hidden]{display:none}.account-menu-summary{padding:10px 11px 12px;border-bottom:1px solid #edf0f4}.account-menu-summary strong,.account-menu-summary small{display:block}.account-menu-summary strong{font-size:13px}.account-menu-summary small{margin-top:4px;color:var(--muted);font-size:11px}.account-menu a,.account-menu button{display:block;width:100%;padding:10px 11px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:12px;text-align:left}.account-menu a:hover,.account-menu button:hover{background:var(--brand-soft);color:var(--brand)}
@media(max-width:900px){.topbar{height:68px;padding-left:72px;padding-right:16px;gap:12px}.breadcrumb{order:1;flex:1;max-width:none;margin-right:0}.search{order:2;flex:0 1 240px;width:240px;max-width:240px}.header-help{order:3;display:none}.small-avatar{order:4}.account-label{order:5}}
@media(max-width:900px){.account-menu{right:16px;top:58px}}
@media(max-width:600px){.topbar{position:relative;height:62px;padding-left:68px;gap:8px}.breadcrumb{display:none}.search{flex:0 0 40px;width:40px;max-width:40px;padding-inline:9px}.search input{display:none}.search.search-open{position:absolute;left:68px;right:58px;top:11px;width:auto;max-width:none;z-index:65;display:flex}.search.search-open input{display:block;flex:1}.account-control{padding:4px}.account-label{display:none}.account-menu{right:10px;top:54px;width:min(248px,calc(100vw - 20px))}}

/* Navigation composition: five destinations first, context-specific subpages only when active. */
.workspace-icon{display:grid;place-items:center;width:28px;height:28px;padding:0;flex:none}.workspace .chevron{display:none}.workspace small{font-size:10px}.client-switcher{margin:0 8px 14px;font-size:10px;letter-spacing:0;text-transform:none}.client-switcher select{margin-top:6px;min-height:38px;padding:8px 10px;font-size:12px;border-radius:8px}.sidebar nav{margin:0 0 4px}.sidebar nav a{min-height:40px;padding:9px 10px;margin:1px 0;font-size:13px}.sidebar nav a.nav-primary{font-weight:600}.sidebar nav a.nav-secondary{min-height:34px;margin-left:18px;padding:7px 10px;border-left:2px solid #ece9f8;border-radius:0 8px 8px 0;font-size:12px;color:#7b8492}.sidebar nav a.nav-secondary.active{border-left-color:var(--brand);background:var(--brand-soft)}.help-card{display:none}.profile{padding-top:12px}
@media(max-width:900px){.main-shell{margin-left:0}.sidebar,.sidebar:not(.mobile-open){width:min(320px,88vw)}}

/* First-run state: guide an empty account instead of presenting meaningless zeros. */
.first-run-overview{max-width:1080px}.first-run-panel{overflow:hidden}.first-run-panel .panel-heading{align-items:flex-start}.first-run-panel .panel-heading p{margin:7px 0 0}.first-run-list{list-style:none;margin:0;padding:8px 24px 18px}.first-run-step{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid #edf0f4}.first-run-step:last-child{border-bottom:0}.first-run-step>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f0edff;color:var(--brand);font-weight:750}.first-run-step.current{background:#fbfaff;margin-inline:-12px;padding-inline:12px;border-radius:10px}.first-run-step.current>span{background:var(--brand);color:#fff}.first-run-step strong{display:block;font-size:14px}.first-run-step p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.first-run-step .button{min-width:150px}.first-run-panel .status{margin-top:2px}@media(max-width:600px){.first-run-list{padding:6px 16px 14px}.first-run-step{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:16px 0}.first-run-step .button{grid-column:2;width:100%}.first-run-step p{font-size:12px}.first-run-panel .panel-heading{display:block}.first-run-panel .panel-heading .status{display:inline-flex;margin-top:12px}}
.sidebar.mobile-open{scrollbar-width:thin}.sidebar.mobile-open::-webkit-scrollbar{width:6px}
@media(max-width:600px){.topbar .breadcrumb{display:flex;position:static;flex:1;min-width:0;max-width:none;margin:0;order:1}.topbar .breadcrumb>span{display:none}.topbar .breadcrumb strong{display:block;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.sidebar.mobile-open{padding:56px 12px 12px}.sidebar.mobile-open>.brand{margin-inline:6px;font-size:19px}.sidebar.mobile-open .workspace{margin:12px 0 6px;padding:7px 9px}.sidebar.mobile-open .client-switcher{margin:0 2px 6px}.sidebar.mobile-open nav a{min-height:36px;padding:7px 9px}.sidebar.mobile-open nav a.nav-secondary{min-height:32px;padding-block:6px}}

/* UX states for screen cards and workspace context. */
.screen-preview { overflow: hidden; }
.screen-preview img { z-index: 0; }
.screen-preview.preview-missing::before {
  content: 'Aperçu indisponible';
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  color: #d7d1e6;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
  background: linear-gradient(145deg, #292536, #332d42);
}
.screen-preview .preview-logo { position: relative; z-index: 1; }
.screen-preview .status { z-index: 2; }
.screen-card-title > div { min-width: 0; }
.screen-card-title h3, .screen-card-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-card-summary dd { min-width: 0; }
.screen-card-actions { align-items: center; }

.sidebar .workspace, .sidebar.mobile-open .workspace { display: block; }
.sidebar .workspace .workspace-icon, .sidebar .workspace small, .sidebar .workspace .chevron { display: none; }
.workspace > div { min-width: 0; }
.workspace strong { max-width: 100%; font-size: 15px; }
.client-switcher select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .screen-card-title h3, .screen-card-title p { white-space: normal; }
  .screen-card-title h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .screen-card-actions { justify-content: stretch; }
  .screen-card-actions .button { flex: 1 1 0; }
}

/* Screen workspace: one calm context for live state, planning and support. */
.diffusion-wizard { max-width: 720px; }
.diffusion-target { padding: 12px 14px; border-radius: 10px; background: #f7f8fb; color: var(--ink); }
.diffusion-wizard h3 { margin: 22px 0 12px; font-size: 16px; }
.diffusion-choices { max-height: 220px; overflow: auto; margin: 12px 0; }
.diffusion-step-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.diffusion-step-heading h3 { margin: 0; }
.diffusion-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; margin: 8px 0; color: var(--ink); cursor: pointer; }
.diffusion-choice:has(input:checked) { border-color: var(--purple); background: var(--purple-light); }
.diffusion-choice input { flex: none; width: auto; min-height: 0; margin: 0; accent-color: var(--purple); }
.diffusion-choice span { display: grid; gap: 3px; min-width: 0; }
.diffusion-choice .diffusion-thumb { display: grid; place-items: center; width: 52px; height: 38px; flex: 0 0 52px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.diffusion-choice .diffusion-thumb img, .diffusion-choice .diffusion-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.diffusion-choice small { color: var(--muted); }
.diffusion-choice[hidden], .diffusion-schedule[hidden] { display: none; }
#confirm-message { white-space: pre-line; }
.diffusion-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.diffusion-days label { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }
.diffusion-days input { width: auto; min-height: 0; margin: 0; }
.screen-live-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 0 16px; color: var(--muted); font-size: 12px; }
.screen-live-facts strong { flex-basis: 100%; color: var(--ink); font-size: 15px; }
.screen-publication-history { margin-top: 4px; }
.screen-publications { list-style: none; padding: 0; margin: 12px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.screen-publications li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.screen-publications li:last-child { border-bottom: 0; }
.screen-publications li > div { display: grid; min-width: 0; gap: 4px; }
.screen-publications strong { overflow-wrap: anywhere; }
.screen-publications time, .screen-publications small { color: var(--muted); font-size: 11px; }
.publication-status { flex: 0 0 auto; max-width: 46%; padding: 6px 9px; border-radius: 999px; background: #f1f0f5; color: #736e7c; font-size: 10px; font-weight: 700; line-height: 1.3; text-align: center; }
.publication-status.received { background: #eee7ff; color: #6d48c7; }
.publication-status.applied { background: #e8f3ff; color: #24699b; }
.publication-status.played { background: #e3f7ee; color: #258262; }
.publication-status.error, .publication-error { background: #fff0e7; color: #a64f27; }
.publication-error { padding: 5px 7px; border-radius: 6px; overflow-wrap: anywhere; }
.screen-detail { padding: 0; }
.screen-detail-header { padding: 24px 27px 20px; }
.screen-detail-header h3 { font-size: 22px; letter-spacing: -.03em; }
.screen-detail-tabs { display: flex; gap: 4px; padding: 0 27px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.screen-detail-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 13px 12px 11px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.screen-detail-tabs button:hover { color: var(--ink); background: #fafbfc; }
.screen-detail-tabs button.active { color: var(--purple); border-bottom-color: var(--purple); }
.screen-detail-panels { min-width: 0; }
.screen-tab-panel { display: none; padding: 24px 27px 4px; }
.screen-tab-panel.active { display: block; }
.screen-focus-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: 20px; }
.screen-live-preview { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #292536; }
.screen-live-preview .screen-preview { aspect-ratio: 16/9; border-radius: 0; }
.screen-live-caption { display: grid; gap: 4px; padding: 14px 16px 16px; color: #fff; }
.screen-live-caption span, .screen-live-caption small { color: #c5bdd4; font-size: 11px; }
.screen-live-caption strong { font-size: 14px; }
.screen-focus-summary { display: grid; align-content: start; gap: 12px; }
.screen-metric { display: grid; gap: 5px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.screen-metric span, .screen-metric small { color: var(--muted); font-size: 11px; }
.screen-metric strong { font-size: 14px; overflow-wrap: anywhere; }
.screen-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.screen-primary-actions .button { flex: 1 1 120px; }
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-title-row > div { min-width: 0; }
.section-title-row h3 { margin-bottom: 5px; }
.screen-playlist-items, .screen-schedule-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.screen-playlist-items li, .screen-schedule-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-bottom: 1px solid #edf0f4; }
.screen-playlist-items li:last-child, .screen-schedule-item:last-child { border-bottom: 0; }
.screen-playlist-items li > span { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; background: var(--purple-light); color: var(--purple); font-size: 11px; font-weight: 750; }
.screen-playlist-items strong, .screen-schedule-item strong { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 12px; }
.screen-playlist-items small, .screen-schedule-item small, .screen-schedule-item span { color: var(--muted); font-size: 11px; }
.screen-schedule-item > div { display: grid; min-width: 0; flex: 1; gap: 3px; }
.screen-empty-state { padding: 22px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; font-size: 12px; }
.screen-maintenance-actions { margin-top: 14px; }
.screen-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; }
.screen-info-grid div { min-width: 0; padding: 12px; border-radius: 9px; background: #fafbfc; }
.screen-info-grid dt { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.screen-info-grid dd { margin: 5px 0 0; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.screen-detail > .form-actions { margin: 20px 27px 0; }
@media (max-width: 700px) {
  .screen-detail-header { padding: 20px 18px 16px; }
  .screen-detail-tabs { padding-inline: 18px; }
  .screen-tab-panel { padding: 20px 18px 2px; }
  .screen-focus-grid { grid-template-columns: 1fr; }
  .screen-info-grid { grid-template-columns: 1fr; }
  .section-title-row { display: block; }
  .section-title-row .button { width: 100%; margin-top: 12px; }
  .screen-schedule-item { align-items: flex-start; }
  .screen-schedule-item .button { flex: 0 0 auto; }
  .screen-detail > .form-actions { margin-inline: 18px; }
  .screen-publications li { align-items: flex-start; flex-direction: column; gap: 8px; }
  .publication-status { max-width: 100%; text-align: left; }
}

/* Final layout guardrails: keep every content block inside its panel at all widths. */
main, main > *, .main-shell, .panel, .panel-heading, .panel-heading > div,
.form-panel, .settings-row, .form-grid, .form-grid > *, .organization-access-body,
.fleet-csv-panel, #fleet-csv-form, .panel-toolbar, .toolbar, .fleet-toolbar,
.fleet-bulk, .screen-controls, .row-actions, .cards, .stats, .overview-columns,
.install-grid, .release-facts, .mini-cards { min-width: 0; }


.panel-heading > div { flex: 1 1 280px; }
.panel-heading h2, .panel-heading p, .panel > h2, .panel > h3, .panel > p,
.panel li, .settings-row, .form-hint, .info-box { overflow-wrap: anywhere; }
.panel-heading p { max-width: 760px; margin-bottom: 0; }
.panel-heading .actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.panel-heading .actions .button { flex: 0 1 auto; }
.panel > h2, .panel > h3, .panel > p, .panel > .form-actions { margin-inline: 24px; }
.panel > ul { margin: 0 24px 24px; padding-left: 20px; }
.organization-access-body { padding: 0 24px 24px; }
.organization-access-body .form-actions { margin-inline: 0; }
.organization-access-body h3 { margin: 22px 0 12px; }
.organization-access-body ul { margin: 0; padding-left: 20px; }
.form-panel { max-width: 100%; }
.settings-row > label, .settings-row > .form-hint, .settings-row > p { min-width: 0; max-width: 100%; }
label input, label select, label textarea { min-width: 0; max-width: 100%; }
.form-actions, .row-actions, .screen-controls { flex-wrap: wrap; }
.form-actions .button, .row-actions .button, .screen-controls .button { max-width: 100%; white-space: normal; }
.table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
.table-wrap th, .table-wrap td { overflow-wrap: normal; word-break: normal; }
.panel-toolbar label { width: min(100%, 380px); }
.panel-toolbar label input { width: 100%; }
.license-table td:last-child small { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.license-table td:last-child .button { white-space: normal; }
#fleet-csv-form { padding: 0 24px 24px; }
#fleet-csv-form label { min-width: 0; }
#fleet-csv-form input[type=file] { width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  main { width: 100%; max-width: none; }
  .panel-heading > div { flex-basis: 240px; }
  .panel-heading .actions { justify-content: flex-start; }
  .install-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .table-wrap:has(th:nth-child(3))::before { content: 'Faire défiler le tableau vers la droite →'; display: block; padding: 9px 16px; color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
  .table-wrap table:has(th:nth-child(3)) { min-width: 760px; }
  .table-wrap th { white-space: nowrap; }
  .panel-heading { padding: 17px 16px; }
  .panel > h2, .panel > h3, .panel > p, .panel > .form-actions { margin-inline: 16px; }
  .organization-access-body { padding: 0 16px 18px; }
  .panel-heading > div { flex-basis: 100%; }
  .panel-heading .actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-heading .actions .button { width: 100%; }
  #fleet-csv-form { padding-inline: 16px; }
  .form-actions .button, .row-actions .button { width: 100%; }
  .license-table td:last-child small { align-items: stretch; }
}