:root{
  --bg:#202b36;
  --bg-deep:#17212a;
  --panel:#33414f;
  --panel2:#2b3845;
  --panel3:#40505f;
  --line:#506070;
  --line-soft:rgba(255,255,255,.10);
  --text:#edf3f8;
  --muted:#a8b4c0;
  --blue:#1f83c5;
  --green:#0b8d08;
  --green2:#18c818;
  --gold:#c6a037;
  --red:#cc3340;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
.spx-body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 12% -15%,rgba(255,255,255,.075),transparent 28%),linear-gradient(135deg,#263543,#18222c 62%,#111820);pointer-events:none}
button,a,input,textarea,select{font-family:inherit}
button{border:0;border-radius:4px;cursor:pointer}
.panel{background:var(--panel);border:1px solid #4e5d6d;box-shadow:0 0 14px rgba(0,0,0,.24);min-height:0;min-width:0;overflow:hidden}

.spx-topbar{position:relative;z-index:5;height:46px;margin:6px 6px 0;display:flex;align-items:center;gap:10px;padding:5px 7px;background:#425160;border:1px solid #536272;box-shadow:0 0 18px rgba(0,0,0,.35);overflow:hidden}
.spx-mark{width:35px;height:35px;border-radius:6px;background:#1b2733;color:#fff;display:grid;place-items:center;font-weight:1000;letter-spacing:-.08em;font-size:16px;border-bottom:4px solid #6bc249;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.breadcrumb{display:flex;align-items:center;gap:9px;min-width:0;flex:1;white-space:nowrap;overflow:hidden}
.breadcrumb span{font-size:14px;letter-spacing:.02em;color:#f2f6fa;text-transform:uppercase;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.breadcrumb span:last-of-type{color:#a9b4c1}
.breadcrumb i{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:11px solid var(--blue);display:inline-block;flex:0 0 auto}
.breadcrumb em{font-style:normal;color:#9faab5;font-size:15px}
.top-status{display:flex;align-items:center;gap:7px}
.status-pill{display:inline-flex;align-items:center;gap:7px;background:#303d4b;border:1px solid #617081;border-radius:4px;padding:6px 8px;color:#c4ccd5;font-size:11px;font-weight:850;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:#a6acb4;box-shadow:0 0 8px rgba(255,255,255,.25)}
.dot.live{background:#19d86c;box-shadow:0 0 10px rgba(25,216,108,.95)}
.dot.warn{background:#ffbd3c;box-shadow:0 0 10px rgba(255,189,60,.95)}
.toolbar-btn,.url-btn,.brand-actions button,.play-main,.secondary,.toggle-chip{border:0;border-radius:3px;background:#596b7d;color:#fff;min-height:28px;padding:7px 10px;font-size:10px;font-weight:1000;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.toolbar-btn:hover,.url-btn:hover,.brand-actions button:hover,.play-main:hover,.secondary:hover,.toggle-chip:hover{filter:brightness(1.12)}
.toolbar-btn.danger{background:var(--red)}
.secondary{background:#536272!important;color:#e7edf3!important}
.play-main,.brand-actions button:first-child{background:var(--green);color:#fff}

.spx-console{position:relative;z-index:2;height:calc(100dvh - 64px);display:grid;grid-template-columns:clamp(330px,27vw,500px) minmax(560px,1fr) clamp(280px,22vw,370px);gap:6px;margin:6px;overflow:hidden}
.rundown-column{display:flex;flex-direction:column;overflow:hidden;border-top:0}
.monitor-column{display:grid;grid-template-rows:minmax(0,1fr) 88px;gap:6px;min-height:0;overflow:hidden}
.editor-panel{display:grid;grid-template-rows:54px minmax(0,1fr) 32px;overflow:hidden;border-top:0;background:#2e3b49}

.column-head,.monitor-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;background:#303d4b;border-bottom:1px solid #526170;min-height:50px}
.column-head h1,.monitor-topline h2,.output-head h2{margin:0;font-size:14px;font-weight:1000;text-transform:uppercase;line-height:1}
.column-head p,.monitor-topline p{margin:3px 0 0;color:#aeb8c3;font-size:10px;line-height:1.15}
.quick-search{width:136px;background:#24313e;border:1px solid #5b6a79;color:#f5f8fb;border-radius:3px;padding:6px 8px;outline:none;font-size:11px}

.rundown-list{padding:5px;overflow:hidden;display:grid;grid-template-rows:repeat(9,minmax(46px,1fr));gap:4px;min-height:0}
.rundown-card{position:relative;min-height:0;display:grid;grid-template-columns:7px minmax(0,1fr) 42px 18px;align-items:center;background:#344351;border:1px solid #3d4c5b;border-radius:4px;overflow:hidden;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.rundown-card.active{border-color:#d3c33b;box-shadow:inset 0 0 0 1px rgba(201,184,38,.35),0 0 18px rgba(210,190,52,.14)}
.rundown-card:hover{background:#394958;transform:translateX(2px)}
.card-rail{height:100%;background:#278d2c}
.card-copy{padding:5px 8px;min-width:0}
.card-title{display:flex;align-items:center;gap:6px;margin-bottom:3px;color:#cad3dc;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-title b{font-size:11px}.card-title span{font-size:9px;color:#95a1ad;font-weight:850}.card-title b:after{content:"";display:inline-block;width:2px;height:9px;margin-left:6px;background:#2b83b8;vertical-align:-1px}
.card-main{font-size:14px;font-weight:380;color:#dce5ed;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{display:flex;gap:7px;margin-top:3px;color:#aab5bf;font-size:9px;white-space:nowrap;overflow:hidden}.card-meta span{overflow:hidden;text-overflow:ellipsis}
.play-triangle{border:0;background:transparent;width:42px;height:42px;display:grid;place-items:center;cursor:pointer}.play-triangle span{display:block;width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:22px solid var(--green);filter:drop-shadow(0 0 7px rgba(23,196,24,.28));transition:transform .16s ease,border-left-color .16s ease,filter .16s ease}.play-triangle:hover span{border-left-color:var(--green2);transform:scale(1.12);filter:drop-shadow(0 0 13px rgba(23,196,24,.55))}.row-out{align-self:start;margin-top:4px;margin-right:3px;border:0;background:transparent;color:#b9c0c8;font-size:17px;font-weight:900;cursor:pointer;line-height:1}.row-out:hover{color:#fff}

.monitor-panel{display:flex;flex-direction:column;min-height:0;border-top:0}.monitor-topline{min-height:50px}.monitor-buttons{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.program-monitor-wrap{position:relative;flex:1;min-height:0;background-color:#141a20;background-image:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.035) 75%);background-size:56px 56px;background-position:0 0,0 28px,28px -28px,-28px 0;display:grid;place-items:center;overflow:hidden}.program-monitor-wrap.hidden-monitor{display:none}.monitor-meta{position:absolute;top:7px;left:9px;right:9px;display:flex;justify-content:space-between;z-index:2;color:#8995a2;text-transform:uppercase;font-size:9px;font-weight:1000;letter-spacing:.08em;pointer-events:none}.monitor-stage{width:100%;height:auto;aspect-ratio:16/9;max-width:100%;max-height:100%;background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 70px rgba(0,0,0,.26);overflow:hidden;transition:width .12s ease,height .12s ease}#previewFrame{width:100%;height:100%;border:0;background:transparent;display:block}#previewFrame.disabled-renderer{visibility:hidden}

.output-panel{background:#344351;border-left:0;padding:6px 8px;display:grid;grid-template-rows:22px minmax(0,1fr);gap:5px;overflow:hidden}.output-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.mini-toggles{display:flex;gap:5px;justify-content:flex-end}.toggle-chip{min-width:78px;min-height:24px;padding:5px 7px;background:#536575}.toggle-chip.on{background:#2372a6}.output-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-height:0}.output-row{display:grid;grid-template-columns:32px minmax(0,1fr) 48px 48px;gap:4px;align-items:center;background:#293744;border:1px solid #4f5f6f;border-radius:4px;padding:4px}.output-row strong{font-size:10px;color:#dbe4ec;letter-spacing:.04em;text-transform:uppercase}.output-row code{display:block;padding:5px 6px;background:#1f2a35;border:1px solid #4e5d6d;color:#dce5ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}.url-btn{background:#536f91;padding-left:6px;padding-right:6px;min-height:24px;font-size:9px}

.inspector-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;background:#263442;border-bottom:1px solid #526170;padding:7px}.inspector-head span{display:block;font-size:8px;color:#98a5b1;font-weight:1000;letter-spacing:.08em}.inspector-head strong{display:block;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;margin-top:2px}.inspector-actions{display:flex;gap:5px}.inspector-actions button{min-width:58px;min-height:26px;padding:6px 8px}.editor-pages{min-height:0;overflow:hidden;padding:8px}.tab-page{display:none;min-height:0;height:100%;animation:inspectorIn .18s ease both}.tab-page.active{display:block}.tab-page h3{margin:0 0 7px;font-size:13px;text-transform:uppercase;color:#eef4f9;letter-spacing:.04em}label{display:block;color:#b4bec8;text-transform:uppercase;font-size:8px;font-weight:1000;letter-spacing:.06em}input,textarea,select{width:100%;margin-top:3px;background:#1f2a35;border:1px solid #536273;color:#eef3f8;border-radius:3px;padding:5px 7px;outline:none;font-size:11px}input:focus,textarea:focus,select:focus{border-color:#6da1c8;box-shadow:0 0 0 1px rgba(109,161,200,.25)}textarea{height:48px;resize:none}.field-grid{display:grid;gap:7px;margin-bottom:7px}.field-grid.one{grid-template-columns:1fr}.field-grid.two{grid-template-columns:1fr 1fr}.field-grid.compact input,.field-grid.compact select{padding:4px 5px}.upload-form{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:5px;margin-top:7px}.upload-form input{min-width:0}.upload-form span{grid-column:1/3;font-size:9px;color:#c2cbd3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hint-line{margin:5px 0 0;color:#aeb9c4;font-size:9px}.brand-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px}.layers-layout{display:grid;grid-template-columns:1fr;gap:6px}.layer-list{display:grid;gap:4px;max-height:105px;overflow:hidden}.layer-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;background:#344250;border:1px solid #4c5b6b;border-radius:4px;padding:5px 6px}.layer-item.visible-layer{border-left:4px solid #18b74c}.layer-name{font-size:10px;font-weight:1000}.layer-meta{font-size:8px;color:#aeb8c2;margin-top:2px}.mini-actions{display:flex;gap:4px}.mini-actions button{min-height:22px;padding:4px 6px;border:0;border-radius:3px;background:#67788a;color:#fff;font-size:9px;font-weight:850}.layer-editor{background:#303d4b;border:1px solid #536273;border-radius:4px;padding:6px}.inspector-footer{display:flex;align-items:center;gap:5px;padding:5px 7px;background:#263442;border-top:1px solid #526170}.small{min-height:23px;padding:5px 7px;font-size:9px}.toast{position:fixed;right:16px;bottom:16px;background:#18222c;border:1px solid #738292;color:#f3f6fa;border-radius:5px;padding:9px 12px;box-shadow:0 14px 38px rgba(0,0,0,.45);z-index:99;font-weight:850}.toast.error{border-color:#f45a69;color:#fff;background:#3a1f26}

@keyframes inspectorIn{from{opacity:0;transform:translate3d(8px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}

@media(max-height:850px){
  .spx-topbar{height:40px;margin:4px 4px 0;padding:4px 6px}.spx-mark{width:31px;height:31px;font-size:14px}.breadcrumb span{font-size:12px}.status-pill{padding:5px 7px}.spx-console{height:calc(100dvh - 52px);margin:4px;gap:4px}.monitor-column{grid-template-rows:minmax(0,1fr) 74px;gap:4px}.column-head,.monitor-topline{min-height:42px;padding:5px 7px}.column-head p,.monitor-topline p{display:none}.rundown-list{padding:4px;gap:3px;grid-template-rows:repeat(9,minmax(38px,1fr))}.rundown-card{grid-template-columns:6px minmax(0,1fr) 36px 16px}.card-title{margin-bottom:2px}.card-title b{font-size:10px}.card-title span,.card-meta{font-size:8px}.card-main{font-size:12px}.play-triangle{width:36px;height:36px}.play-triangle span{border-top-width:11px;border-bottom-width:11px;border-left-width:18px}.output-panel{padding:5px;grid-template-rows:18px minmax(0,1fr);gap:4px}.output-grid{gap:4px}.output-row{grid-template-columns:26px minmax(0,1fr) 38px 38px;padding:3px}.output-row code{padding:4px 5px;font-size:8px}.url-btn,.toggle-chip{min-height:20px;font-size:8px;padding:4px 5px}.editor-panel{grid-template-rows:46px minmax(0,1fr) 28px}.editor-pages{padding:6px}.tab-page h3{font-size:12px;margin-bottom:5px}.field-grid{gap:5px;margin-bottom:5px}input,textarea,select{padding:4px 6px;font-size:10px}textarea{height:40px}.inspector-footer{padding:4px 6px}.small{min-height:20px}
}

@media(max-width:1500px){
  .spx-console{grid-template-columns:clamp(300px,26vw,420px) minmax(520px,1fr) clamp(260px,23vw,340px)}
  .breadcrumb span{font-size:12px}.card-main{font-size:12px}.monitor-topline p,.column-head p{display:none}.output-row{grid-template-columns:28px minmax(0,1fr) 42px 42px}.toolbar-btn,.url-btn,.toggle-chip{font-size:9px;padding:5px 6px}.field-grid.two{grid-template-columns:1fr}
}

@media(max-width:1180px){
  .spx-console{grid-template-columns:minmax(270px,29%) minmax(420px,48%) minmax(220px,23%);gap:4px;margin:4px;height:calc(100dvh - 52px)}
  .spx-topbar{height:40px;margin:4px 4px 0}.card-title span,.card-meta,.monitor-topline p,.column-head p{display:none}.card-main{font-size:11px}.output-panel{display:none}.inspector-actions button{min-width:50px}
}

body.utility-mode .inspector-actions{display:none}


/* v9 monitor-linked compact no-overlap polish */
:root{--topbar-h:42px;--panel-gap:5px}
html,body{overflow:hidden;height:100svh}
.spx-topbar{height:var(--topbar-h);margin:4px 4px 0;padding:4px 8px}
.spx-console{height:calc(100svh - 54px);margin:4px;gap:var(--panel-gap);grid-template-columns:clamp(300px,25vw,405px) minmax(560px,1fr) clamp(290px,23vw,360px);align-items:stretch;overflow:hidden}
.panel,.monitor-column,.rundown-column,.editor-panel{min-height:0;overflow:hidden}
.rundown-column{display:grid;grid-template-rows:50px minmax(0,1fr)}
.column-head,.monitor-topline{min-height:50px;padding:6px 8px}
.column-head h1,.monitor-topline h2,.output-head h2{font-size:13px}
.monitor-column{display:grid;grid-template-rows:minmax(0,1fr) 84px;gap:var(--panel-gap);min-height:0}
.monitor-panel{display:grid;grid-template-rows:50px minmax(0,1fr);min-height:0}
.program-monitor-wrap{padding:8px 10px 10px}
.monitor-stage{margin:auto;border-radius:4px}
.output-panel{padding:6px 8px;grid-template-rows:20px minmax(0,1fr);gap:5px}
.output-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.monitor-sync-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid #506174;border-radius:999px;background:#24313d;color:#d9e3ec;font-size:10px;font-weight:900;white-space:nowrap}
.mini-dot{width:8px;height:8px;border-radius:50%;background:#f0b54c;box-shadow:0 0 10px rgba(240,181,76,.45)}
.mini-dot.live{background:#21d05c;box-shadow:0 0 12px rgba(33,208,92,.55)}
.mini-dot.warn{background:#f0b54c;box-shadow:0 0 10px rgba(240,181,76,.45)}
.output-grid{grid-template-columns:1fr;gap:4px}
.output-row{grid-template-columns:30px minmax(0,1fr) 44px 44px;padding:4px 5px;min-height:0}
.editor-panel{display:grid;grid-template-rows:48px minmax(0,1fr) 30px;min-height:0}
.inspector-head{padding:6px 7px}
.editor-pages{padding:7px;min-height:0;overflow:hidden}
.tab-page{overflow:hidden}
.tab-page h3{font-size:12px;margin-bottom:6px}
.field-grid{gap:6px;margin-bottom:6px}
input,textarea,select{padding:5px 6px;font-size:10px}
textarea{height:44px}
.rundown-list{padding:4px;gap:4px;grid-template-rows:repeat(9,minmax(0,1fr))}
.rundown-card{grid-template-columns:6px minmax(0,1fr) 38px 16px}
.card-copy{padding:4px 8px}
.card-title{margin-bottom:2px}.card-title b{font-size:10px}.card-title span,.card-meta{font-size:8px}.card-main{font-size:12px}
.play-triangle{width:38px;height:38px}.play-triangle span{border-top-width:11px;border-bottom-width:11px;border-left-width:19px}
.row-out{margin-top:2px}
.monitor-topline p,.column-head p{display:none}
@media(max-width:1500px){
 .spx-console{grid-template-columns:clamp(280px,25vw,380px) minmax(500px,1fr) clamp(270px,24vw,330px)}
 .output-panel{padding:5px 7px}
}
@media(max-width:1280px){
 .spx-console{grid-template-columns:minmax(260px,28%) minmax(440px,48%) minmax(220px,24%)}
 .output-row code{font-size:8px}
}


/* v10: compact output routing dock, no URL-row overlap. */
.monitor-column{
  grid-template-rows:minmax(0,1fr) 54px !important;
  gap:5px !important;
}
.output-panel.route-dock{
  display:grid !important;
  grid-template-columns:180px minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  gap:8px !important;
  min-height:0 !important;
  height:54px !important;
  padding:6px 8px !important;
  overflow:hidden !important;
  background:#344351 !important;
  border-left:0 !important;
}
.route-dock .output-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:4px !important;
  min-width:0 !important;
  height:100% !important;
}
.route-dock .output-head h2{
  margin:0 !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.monitor-sync-pill{
  max-width:170px !important;
  padding:2px 7px !important;
  font-size:9px !important;
  line-height:1.1 !important;
}
.route-actions{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
  min-width:0 !important;
  height:100% !important;
}
.route-chip{
  display:grid !important;
  grid-template-columns:38px minmax(42px,1fr) minmax(42px,1fr) !important;
  gap:4px !important;
  align-items:center !important;
  min-width:0 !important;
  height:100% !important;
  padding:5px !important;
  background:#293744 !important;
  border:1px solid #4e5d6b !important;
  border-radius:5px !important;
  overflow:hidden !important;
}
.route-chip strong{
  font-size:10px !important;
  color:#dfe7ef !important;
  letter-spacing:.04em !important;
}
.route-chip .url-btn{
  min-width:0 !important;
  width:100% !important;
  min-height:25px !important;
  padding:4px 5px !important;
  font-size:9px !important;
  line-height:1 !important;
}
.output-grid,.output-row{display:none !important;}
.program-monitor-wrap{padding-bottom:8px !important;}
@media(max-width:1500px){
  .output-panel.route-dock{grid-template-columns:150px minmax(0,1fr) !important;}
  .route-actions{gap:4px !important;}
  .route-chip{grid-template-columns:32px minmax(36px,1fr) minmax(36px,1fr) !important;padding:4px !important;}
  .route-chip strong{font-size:9px !important;}
  .route-chip .url-btn{font-size:8px !important;min-height:23px !important;}
}
@media(max-width:1180px){
  .monitor-column{grid-template-rows:minmax(0,1fr) 48px !important;}
  .output-panel.route-dock{height:48px !important;grid-template-columns:110px minmax(0,1fr) !important;padding:5px !important;}
  .monitor-sync-pill{display:none !important;}
  .route-chip{grid-template-columns:28px minmax(32px,1fr) minmax(32px,1fr) !important;}
}


/* v12: more rundown players, monitor/output sync, no overlap. */
.rundown-list{
  display:block !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:5px !important;
  scrollbar-width:thin;
}
.rundown-card{
  min-height:54px !important;
  margin-bottom:4px !important;
}
.rundown-list::-webkit-scrollbar{width:8px}
.rundown-list::-webkit-scrollbar-thumb{background:#586b7f;border-radius:999px}
.rundown-list::-webkit-scrollbar-track{background:#263442}
@media(max-height:850px){
  .rundown-card{min-height:44px !important;margin-bottom:3px !important}
}
.monitor-sync-pill{
  border-color:#2e8f56 !important;
}
.mini-dot.live{background:#25e073 !important}