:root{--bg:#EEF1F5;--panel:#FFFFFF;--ink:#13203A;--muted:#56627A;--line:#D6DCE6;--soft:#F5F7FA;--live:#D61F55;--interno:#3446C8;--montra:#0B7580;--bezel:#1A1F2B;--danger:#B42318;--warn:#9A5B00;--ok:#157347}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1420;--panel:#171F2E;--ink:#E7ECF4;--muted:#9CA8BD;--line:#2A3446;--soft:#1D2638;--live:#FF5A8A;--interno:#8C9BFF;--montra:#46BEC8;--bezel:#04060A;--danger:#FF8A80;--warn:#F5B94A;--ok:#5FD39A}}
:root[data-theme="dark"]{--bg:#0E1420;--panel:#171F2E;--ink:#E7ECF4;--muted:#9CA8BD;--line:#2A3446;--soft:#1D2638;--live:#FF5A8A;--interno:#8C9BFF;--montra:#46BEC8;--bezel:#04060A;--danger:#FF8A80;--warn:#F5B94A;--ok:#5FD39A}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.55 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:750;letter-spacing:-.015em;margin:0;line-height:1.15}
button,input,select,textarea{font:inherit;color:inherit}
img,video{max-width:100%}
:focus-visible{outline:2px solid var(--interno);outline-offset:2px}

/* entrada */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:24px}
.entrar form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,5vw,40px);width:min(100%,400px);display:grid;gap:16px}
.entrar h1{font-size:1.8rem}
.entrar p{margin:0;color:var(--muted)}

/* cabecalho */
.top{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,40px);background:var(--panel);border-bottom:1px solid var(--line)}
.brand h1{font-size:1.7rem}
.brand p{margin:2px 0 0;color:var(--muted);font-size:.92rem}
nav{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:10px;overflow-x:auto}
nav button{border:0;background:none;padding:8px 16px;border-radius:7px;cursor:pointer;color:var(--muted);white-space:nowrap}
nav button[aria-current="page"]{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
main{padding:28px clamp(16px,4vw,40px) 60px;max-width:1280px;margin:0 auto}

.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between;margin-bottom:22px}
.bar h2{font-size:1.5rem}
.bar p{margin:4px 0 0;color:var(--muted);max-width:62ch}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:0;border-radius:8px;padding:10px 16px;cursor:pointer;background:var(--ink);color:var(--panel);font-weight:700}
.btn.sm{padding:6px 12px;font-size:.9rem}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.danger{background:none;color:var(--danger);box-shadow:inset 0 0 0 1px var(--line)}
.btn.danger.armed{background:var(--danger);color:var(--panel)}
.btn:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;padding:0;color:var(--interno);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.9rem}
.alert{background:var(--soft);border:1px solid var(--danger);color:var(--danger);padding:10px 14px;border-radius:8px;margin:0 0 18px}
.meta{color:var(--muted);font-size:.88rem}
.warn{color:var(--warn);font-size:.86rem;font-weight:700;margin:0}
.err{color:var(--danger);font-weight:700;margin:0}

/* agencias e ecras */
.agencies{display:grid;gap:22px}
.agency{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px 20px}
.agency-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.agency-name{flex:1;min-width:200px;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:750;font-size:1.3rem;border:1px solid transparent;background:none;padding:2px 6px;margin-left:-7px;border-radius:6px}
.agency-name:hover,.agency-name:focus{border-color:var(--line)}
.devices{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;margin-top:16px}
.device{width:clamp(200px,26vw,250px)}
.device.v{width:clamp(104px,12vw,124px)}
.bezel{background:var(--bezel);padding:7px;border-radius:8px}
.device.montra .bezel{box-shadow:inset 0 5px 0 var(--montra);padding-top:11px}
.device.v .bezel{padding:5px;border-radius:5px}
.device.v.montra .bezel{padding-top:10px}
.stand{width:26%;height:12px;margin:0 auto;background:var(--bezel);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.screen{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;border-radius:2px}
.v .screen{aspect-ratio:9/16}
.screen>.item{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s}
.screen>.item.on{opacity:1}
.idle{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#7C8699;font-size:.76rem;padding:8px}
.dname{font-weight:700;margin-top:10px;line-height:1.25;overflow-wrap:anywhere}
.kind{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);margin-top:2px}
.kind i{flex:none;width:9px;height:9px;border-radius:2px;background:var(--interno)}
.montra .kind i{background:var(--montra)}
.device .meta{margin:2px 0 4px;font-size:.82rem}
.device .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.addcard{display:grid;place-items:center;width:clamp(150px,18vw,180px);aspect-ratio:16/10;border:2px dashed var(--line);border-radius:10px;background:none;cursor:pointer;color:var(--muted);font-weight:700;align-self:center}
.addcard:hover{border-color:var(--interno);color:var(--ink)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;margin-top:4px}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.state.on{color:var(--ok)}
.state.on::before{background:var(--ok)}
.state.off{color:var(--danger)}
.state.off::before{background:var(--danger)}
.state.none{color:var(--muted)}

.sform{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--soft);display:grid;gap:14px}
.sform h3{font-size:1.1rem}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--soft);color:var(--muted);white-space:nowrap}
.pill.live{color:var(--live)}
.pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live)}
@media (prefers-reduced-motion:no-preference){.pill.live::before{animation:pulse 1.8s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.25}}

.list{display:grid;gap:12px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.row h3{font-size:1.1rem;margin:4px 0 2px}
.thumbs{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap;align-items:flex-end}
.thumbs>*{height:34px;width:54px;object-fit:cover;border-radius:3px;background:#000}
.thumbs>.v{width:20px}
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:14px;padding:36px;text-align:center}
.empty h2{font-size:1.25rem;margin-bottom:6px}
.empty p{color:var(--muted);margin:0 auto 16px;max-width:52ch}

/* biblioteca */
.drop{display:block;border:2px dashed var(--line);border-radius:14px;padding:26px;text-align:center;background:var(--panel);cursor:pointer;margin-bottom:18px;position:relative}
.drop.over{border-color:var(--interno);background:var(--soft)}
.drop strong{display:block;font-size:1.1rem}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.specs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:10px;font-size:.88rem;color:var(--muted)}
.specs b{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card .th{aspect-ratio:16/10;background:#000;position:relative}
.card .th>img,.card .th>video{width:100%;height:100%;object-fit:contain;display:block}
.badge{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.72);color:#fff;font-size:.72rem;padding:1px 7px;border-radius:4px}
.card .bd{padding:10px 12px 12px;display:grid;gap:8px;flex:1;align-content:start}
.card .nm{font-weight:700;overflow-wrap:anywhere;line-height:1.3}
.card .ft{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dur{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.dur input{width:58px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.card select{padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-size:.85rem}
.progress{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.progress i{display:block;height:100%;background:var(--interno);transition:width .2s}

/* editor */
.editor{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,3vw,28px);display:grid;gap:26px}
.editor h2{font-size:1.5rem}
fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
legend{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:750;font-size:1.1rem;margin-bottom:8px;padding:0}
label.f{display:grid;gap:4px;font-weight:700;font-size:.92rem}
.inp{padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:6px 14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.mounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.mount{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:10px;cursor:pointer;display:grid;justify-items:center;gap:8px;text-align:center;font-size:.86rem}
.mount[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mount .ic{width:46px;height:30px;border:3px solid var(--ink);border-radius:3px;position:relative}
.mount .ic.v{width:24px;height:40px}
.mount .ic::after{content:"";position:absolute;background:var(--live);border-radius:1px}
.mount .ic.m-h::after{left:20%;right:20%;top:2px;height:3px}
.mount .ic.m-h180::after{left:20%;right:20%;bottom:2px;height:3px}
.mount .ic.m-vr::after{top:20%;bottom:20%;right:2px;width:3px}
.mount .ic.m-vl::after{top:20%;bottom:20%;left:2px;width:3px}
.mount .ic.m-v0::after{left:20%;right:20%;top:2px;height:3px}
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pick .ag{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pick .ag b{display:block;margin-bottom:4px}
.pick label{display:flex;gap:8px;align-items:baseline;padding:3px 0}
.pick small{color:var(--muted)}
.seq{display:grid;gap:6px;padding:0;margin:0;counter-reset:s}
.seq li{list-style:none;display:grid;grid-template-columns:auto 72px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.seq li::before{counter-increment:s;content:counter(s);font-weight:700;color:var(--muted);width:1.4em;text-align:right}
.seq .t{width:72px;height:44px;object-fit:contain;border-radius:4px;background:#000}
.seq .acts{display:flex;gap:2px}
.icon{border:0;background:none;cursor:pointer;width:32px;height:32px;border-radius:6px;color:var(--muted);font-size:1rem}
.icon:hover{background:var(--soft);color:var(--ink)}
.icon:disabled{opacity:.3;cursor:default}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.lib button{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:0;overflow:hidden;cursor:pointer;text-align:left;position:relative}
.lib button:hover{border-color:var(--interno)}
.lib .t{width:100%;aspect-ratio:16/10;object-fit:contain;display:block;background:#000}
.lib span.n{display:block;padding:4px 7px;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coverage{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--soft);display:grid;gap:4px}
.foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700}
.toggle input{width:20px;height:20px;accent-color:var(--ok)}

/* pre-visualizacao em ecra inteiro */
#preview{position:fixed;inset:0;background:#000;z-index:10;overflow:hidden}
#preview .screen{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
#preview .screen.r180{transform:rotate(180deg)}
#preview .screen.r90,#preview .screen.r-90{inset:auto;left:50%;top:50%;width:100vh;height:100vw}
#preview .screen.r90{transform:translate(-50%,-50%) rotate(90deg)}
#preview .screen.r-90{transform:translate(-50%,-50%) rotate(-90deg)}
#preview .screen.upright-v{inset:0;margin:auto;height:100vh;width:calc(100vh * 9 / 16);max-width:100vw}
#preview .idle{font-size:1.1rem}
#preview .tag{position:absolute;left:14px;top:14px;right:14px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:rgba(0,0,0,.78);color:#fff;padding:8px 14px;border-radius:8px;opacity:0;transition:opacity .3s;z-index:2;font-size:.92rem;max-width:760px}
#preview .tag a,#preview .tag button{color:#fff;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;font-size:.92rem}
#preview .tag span{color:#C9D1DE}
#preview.awake .tag{opacity:1}
#preview:not(.awake){cursor:none}

@media (max-width:560px){
  .row{grid-template-columns:1fr}
  .seq li{grid-template-columns:auto 56px minmax(0,1fr)}
  .seq .t{width:56px;height:36px}
  .seq .acts{grid-column:1/-1;justify-content:flex-end}
  .device{width:calc(60% - 13px)}
  .device.v{width:calc(34% - 13px)}
}