:root{--bg:#edf1f7;--panel:#fff;--ink:#101828;--muted:#667085;--line:#d8dee9;--soft:#f7f9fc;--primary:#0057ff;--danger:#d92d20}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,.button-link{border:0;background:var(--primary);color:#fff;font-weight:900;border-radius:8px;padding:10px 12px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:40px}
button.secondary,.button-link.secondary{background:#fff;color:#25344d;border:1px solid #b9c2d3}
button.danger{background:var(--danger)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 10px;font:inherit;background:#fff;color:var(--ink);min-width:0}
textarea{resize:vertical}
label{display:grid;gap:6px;font-size:12px;font-weight:900;color:#344054}
.app-topbar{min-height:78px;background:#101828;color:#fff;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:12px 18px;gap:16px}
.app-topbar strong{display:block;font-size:22px}
.app-topbar span{color:#aeb8c9;font-weight:800}
.main-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.main-tabs button{width:auto;margin:0;background:#26344d;color:#dce6f8;border:1px solid #34445f}
.main-tabs button.is-active{background:#fff;color:#101828}
.top-actions{display:flex;gap:10px;align-items:center}
.state-pill{background:#fff;color:#344054;border-radius:8px;padding:9px 12px;font-size:13px;font-weight:900}
.state-pill.ok{background:#ecfdf3;color:#067647}
.state-pill.error{background:#fef3f2;color:#b42318}
main{padding:14px}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.data-grid.two-col{grid-template-columns:360px minmax(0,1fr)}
.wide-panel{grid-column:1/-1}
.form-grid{display:grid;gap:12px}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.button-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.button-row button,.button-row .button-link{width:auto;margin:0}
.selected-box{display:grid;gap:4px;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px;margin:10px 0}
.selected-box span{font-size:12px;color:var(--muted);font-weight:900}
.search-results{display:grid;gap:8px;margin:10px 0}
.search-results button{background:#fff;color:#25344d;border:1px solid var(--line);justify-content:flex-start;margin:0}
.message-list{display:grid;gap:8px;margin:10px 0}
.list-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px auto;gap:8px;align-items:center}
.list-row.stacked{grid-template-columns:1fr 1fr 1fr auto}
.list-row button{margin:0;width:auto;justify-content:center}
details{margin-top:10px;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px}
summary{font-weight:900;cursor:pointer}
.editor-shell{height:calc(100vh - 106px);display:grid;grid-template-columns:270px minmax(0,1fr) 330px;gap:12px}
.left-panel,.right-panel,.canvas-panel{min-height:0}
.left-panel,.right-panel{display:grid;align-content:start;gap:12px;overflow:auto}
.panel-block{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;box-shadow:0 8px 20px rgba(31,42,68,.06)}
.panel-block h2{font-size:16px;margin:0 0 12px}
.panel-block button{width:100%;margin-bottom:8px;justify-content:flex-start}
.template-button{background:#eef4ff;color:#103d9a;border:1px solid #c7d7fe}
.check-line{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:9px;margin-bottom:8px}
.check-line input{width:auto}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool-grid button{margin:0;font-size:12px;justify-content:center}
.canvas-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);gap:12px}
.canvas-toolbar strong{display:block}
.canvas-toolbar span{font-size:12px;color:var(--muted);font-weight:800}
.canvas-toolbar label{width:110px}
.canvas-scroll{overflow:auto;background:#dfe5ef;padding:24px;display:grid;place-items:start center}
.design-canvas{position:relative;width:1920px;height:1080px;background:transparent;transform:scale(var(--zoom,.45));transform-origin:top center;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 18px 50px rgba(0,0,0,.24);margin-bottom:calc(1080px * (var(--zoom,.45) - 1))}
.design-canvas.grid-on{background-image:linear-gradient(rgba(0,87,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,87,255,.16) 1px,transparent 1px);background-size:20px 20px}
.design-canvas.safe-on:after{content:"";position:absolute;left:90px;top:60px;right:90px;bottom:60px;border:2px dashed rgba(255,212,0,.8);pointer-events:none}
.canvas-component{position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 25px rgba(0,0,0,.25);cursor:move;user-select:none}
.canvas-component.is-selected{outline:4px solid #00c2ff;outline-offset:2px}
.canvas-component.is-locked{cursor:not-allowed;opacity:.82}
.component-inner{width:100%;height:100%;display:flex;align-items:center;gap:14px;padding:var(--pad,14px);color:inherit}
.comp-brand{background:linear-gradient(120deg,var(--bgc,#0057ff),#16223d);color:var(--color,#fff);border-bottom:8px solid var(--accent,#ffd400);clip-path:polygon(0 0,94% 0,100% 100%,0 100%)}
.comp-brand .mark{width:70px;height:70px;background:#fff;color:#111;display:grid;place-items:center;font-weight:900}
.comp-brand .mark img{width:100%;height:100%;object-fit:contain}
.comp-brand strong,.comp-program strong{display:block;font-size:34px;line-height:1;text-transform:uppercase}
.comp-brand span,.comp-program span{font-weight:800;opacity:.9}
.comp-live{background:var(--bgc,#ff1744);color:var(--color,#fff);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);justify-content:center;line-height:1;text-align:center;white-space:nowrap}
.comp-live strong{line-height:1}
.comp-live .dot{width:18px;height:18px;border-radius:50%;background:currentColor;animation:pulse 1.2s infinite;flex:0 0 18px}
@keyframes pulse{to{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
.comp-clock,.comp-weather,.comp-text,.comp-shape{background:var(--bgc,#101828);color:var(--color,#fff)}
.comp-clock strong{font-size:38px}
.comp-weather{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:12px;line-height:1;background:linear-gradient(125deg,var(--bgc,#ff2f6d),#0057ff)}
.weather-icon-preview{height:42px;min-width:64px;padding:0 9px;display:grid;place-items:center;background:var(--accent,#ffd400);color:#101828;font-size:14px;font-weight:900;text-transform:uppercase;transform:skewX(-10deg)}
.weather-temp-preview{font-size:42px;font-weight:900;line-height:.9}
.weather-meta-preview{display:grid;gap:4px;min-width:0}
.weather-meta-preview strong{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.weather-meta-preview span{font-size:15px;font-weight:800;opacity:.9}
.comp-program{background:linear-gradient(115deg,var(--bgc,#ff2f6d),#16223d);color:var(--color,#fff);border-bottom:8px solid var(--accent,#ffd400)}
.comp-qr{background:var(--bgc,#fff);color:var(--color,#101828)}
.comp-qr img{width:110px;height:110px;background:#fff;margin-right:12px}
.qr-preview-box{width:108px;height:108px;background:#fff;color:#111;display:grid;place-items:center;font-weight:900;border:8px solid #e4e7ec;flex:0 0 108px}
.comp-ticker{background:var(--bgc,#fff);color:var(--color,#101828);display:flex;align-items:stretch}
.ticker-label-preview{display:grid;place-items:center;background:var(--labelbg,#0057ff);color:#fff;font-weight:900;width:210px;text-transform:uppercase}
.ticker-window-preview{position:relative;overflow:hidden;flex:1;display:flex;align-items:center}
.ticker-track-preview{white-space:nowrap;font-size:28px;font-weight:800;line-height:1}
.props-form{display:grid;gap:10px}
.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.props-form h3{margin:10px 0 0;font-size:13px;text-transform:uppercase;color:#475467}
.empty-state{padding:18px;background:var(--soft);border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-weight:800}
.layers-list,.templates-list{display:grid;gap:8px}
.layer-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(6,auto);gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff}
.layer-row.is-selected{outline:2px solid #00a3ff}
.layer-row input{padding:7px;font-size:12px}
.layer-row button{width:auto;margin:0;font-size:11px;min-height:32px;padding:6px 8px;justify-content:center}
.template-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px}
.template-row span{display:block;color:var(--muted);font-weight:700;margin-top:3px}
.template-row button{width:auto;margin:0;justify-content:center}
.mini-preview{aspect-ratio:16/9;background:#202a3b;border-radius:8px;overflow:hidden;margin-top:10px}
.mini-preview.large{height:min(58vh,620px);aspect-ratio:auto}
.mini-preview iframe{width:100%;height:100%;border:0}
@media(max-width:1200px){.data-grid,.data-grid.two-col{grid-template-columns:1fr}.form-grid.two{grid-template-columns:1fr}.editor-shell{grid-template-columns:1fr;height:auto}.app-topbar{grid-template-columns:1fr;padding:14px}.main-tabs{justify-content:flex-start}.top-actions{flex-wrap:wrap}.canvas-scroll{min-height:520px}.left-panel,.right-panel{overflow:visible}.layer-row,.template-row,.list-row,.list-row.stacked{grid-template-columns:1fr}.layer-row button,.template-row button,.list-row button{width:100%}}