/* Hub de Operação. Mesma gramática do Collateral Growth Console (creme, linhas finas, cantos de 2px,
   Gambetta nos títulos, General Sans no corpo, Supreme nos rótulos), com roxo escuro no lugar do verde. */
:root{
  --p9:#120a1f; --p8:#1a0f2e; --p7:#2b1748; --p6:#3b2163; --p5:#56368a; --psoft:#efe9f6; --psoft2:#e2d7f0;
  --gold:#b7903b; --gold2:#cda748; --goldt:#8a6a22; --btn:#8f6e27; --btnh:#7d5f20; --goldsoft:#f7f1e2;
  --cream:#f7f6f2; --sand:#f0ede4; --sand2:#e8e3d6; --lt:#fffdfc;
  --ink:#2e2e29; --ink2:#121210; --muted:#5f5e57; --muted2:#8a887f;
  --line:rgba(46,46,41,.14); --line2:rgba(46,46,41,.08); --hover:#faf8f3;
  --red:#a33b2e; --redsoft:#f6e4e0; --amber:#7d5a12; --ambersoft:#f8eed6; --green:#2f6b4f; --greensoft:#e6f0eb;
  --sans:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --label:"Supreme","General Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:"Gambetta",Georgia,"Times New Roman",serif;
  --r:2px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--cream);color:var(--ink);font:400 14.5px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--goldt);text-decoration:none} a:hover{text-decoration:underline}
b,strong{font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::selection{background:#ecdfbf}
code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--sand);padding:1px 5px;border-radius:var(--r)}
.muted{color:var(--muted)} .small{font-size:12.5px} .num{font-variant-numeric:tabular-nums}
.label{font:500 10.5px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Shell */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh;background:linear-gradient(90deg,var(--p9) 236px,var(--cream) 236px)}
.side{background:var(--p9);color:#e6e0ef;padding:26px 14px 20px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px}
.brand-mark{flex:none;width:30px;height:30px;background:url("/icon.svg") center/contain no-repeat}
.brand b{display:block;font:400 19px/1.1 var(--serif);color:var(--lt)}
.brand small{display:block;font:400 10px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:#a99cc0;margin-top:4px}
.nav{display:flex;flex-direction:column;gap:1px}
.nav-group{font:400 10.5px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:#9283ab;padding:16px 12px 8px}
.nav button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:0;background:none;border-radius:var(--r);border-left:2px solid transparent;color:#d8d0e6;font-size:14px;text-align:left}
.nav button:hover{background:rgba(255,253,252,.05);color:var(--lt)}
.nav button.on{background:var(--p7);border-left-color:var(--gold);color:#fff}
.pill{font:500 11px/1.6 var(--sans);font-variant-numeric:tabular-nums;background:rgba(255,253,252,.08);color:var(--gold2);border-radius:var(--r);padding:0 7px}
.pill.red{background:#5b1f2a;color:#ffd9d2}
.side-foot{margin-top:auto;font-size:11.5px;color:#9a8db2;padding:14px 8px 0;line-height:1.55;border-top:1px solid rgba(255,253,252,.08)}
.side-foot b{color:#ddd4ea;font-weight:500}
.side-foot button{background:none;border:1px solid rgba(255,253,252,.18);color:#e6e0ef;border-radius:var(--r);padding:6px 10px;margin-top:10px;font-size:12px;width:100%}
.side-foot button:hover{border-color:var(--gold);color:var(--gold2)}
.side-foot .prog{color:var(--gold2)}

.main{padding:34px 40px 110px;max-width:1440px;width:100%;min-width:0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.kicker{font:400 12px/1.3 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--goldt);margin-bottom:10px}
h1{font:400 38px/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink2)}
h2{font:400 22px/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink2);margin:30px 0 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
h2 .muted{font:400 13.5px/1.4 var(--sans)}
h3{font:500 11.5px/1.35 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:22px 0 10px}
.sub{color:var(--muted);font-size:14.5px;max-width:80ch}

/* botões e chips */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--r);padding:10px 16px;font:500 13.5px/1 var(--sans);background:var(--btn);color:#fff;white-space:nowrap}
.btn:hover{background:var(--btnh)}
.btn.dark{background:var(--p7)} .btn.dark:hover{background:var(--p6)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--goldt);color:var(--goldt);background:var(--goldsoft)}
.btn.danger{background:var(--red)} .btn.sm{padding:6px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:default}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.fchip{border:1px solid var(--line);background:var(--lt);border-radius:var(--r);padding:6px 12px;font-size:13px;color:var(--muted)}
.fchip.on{background:var(--p7);border-color:var(--p7);color:#fff}
.tag{display:inline-block;font:500 11.5px/1.45 var(--sans);border-radius:var(--r);padding:1px 7px;background:var(--sand);color:var(--muted);white-space:nowrap}
.tag.red{background:var(--redsoft);color:var(--red)} .tag.amber{background:var(--ambersoft);color:var(--amber)} .tag.green{background:var(--greensoft);color:var(--green)}
.tag.purple{background:var(--psoft);color:var(--p6)} .tag.gold{background:var(--goldsoft);color:var(--goldt)}

/* KPIs e cards */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);background:var(--lt);border-radius:var(--r)}
.kpi{padding:18px 20px;border-right:1px solid var(--line2)} .kpi:last-child{border-right:0}
.kpi .v{font:400 30px/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink2);margin-top:6px}
.kpi .s{color:var(--muted2);font-size:12px;margin-top:4px}
.kpi.bad .v{color:var(--red)}
.card{background:var(--lt);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}

/* fila de alertas */
.queue{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--lt)}
.alert{display:grid;grid-template-columns:3px 1fr auto;gap:14px;align-items:center;padding:12px 16px 12px 0;border-bottom:1px solid var(--line2)}
.alert:last-child{border-bottom:0}
.alert .bar-l{align-self:stretch;margin:-12px 0}
.alert .t{font-weight:500;color:var(--ink2)} .alert .d{color:var(--muted);font-size:13px}
.alert .who{font:500 10.5px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--goldt);cursor:pointer;margin-bottom:2px}
.alert .acts{display:flex;gap:6px}
.lv-critico{background:var(--red)} .lv-alto{background:#c57b1b} .lv-atencao{background:var(--gold2)} .lv-info{background:var(--sand2)}

/* grade de clientes */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.ccard{background:var(--lt);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s}
.ccard:hover{border-color:var(--goldt);background:var(--hover)}
.ccard .hd{display:flex;align-items:center;gap:8px}
.ccard .nm{font:400 18px/1.2 var(--serif);color:var(--ink2)}
.health{width:8px;height:8px;border-radius:50%;flex:none}
.h-vermelho{background:var(--red)} .h-amarelo{background:#c57b1b} .h-verde{background:var(--green)} .h-cinza{background:var(--sand2)}
.ccard .row{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;gap:8px}
.ccard .big{font:400 24px/1.1 var(--serif);color:var(--ink2)}
.bar{height:4px;background:var(--sand);overflow:hidden;margin-top:10px;position:relative}
.bar>i{position:absolute;left:0;top:0;bottom:0;background:var(--p6)}
.bar>b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--gold)}
.bar.over>i{background:var(--red)} .bar.under>i{background:#c57b1b}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.spark{display:block;margin-top:8px}
.up-bad{color:var(--red)} .up-good{color:var(--green)} .flat{color:var(--muted2)}

/* tabelas */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--lt)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font:500 10.5px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--lt);position:sticky;top:0;z-index:1}
td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
td.r,th.r{text-align:right}
tr.click{cursor:pointer} tr.click:hover td{background:var(--hover)}
.ell{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
input.inline,select.inline{border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;width:120px;background:#fff}
input.inline:focus,select.inline:focus{border-color:var(--gold);outline:0}

/* Gerenciador */
.mgr-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mgr-bar select{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:#fff;min-width:240px}
.acc-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:4px 0 12px}
.acc-tabs button{border:0;background:none;padding:10px 14px;color:var(--muted);border-bottom:2px solid transparent;font-size:13.5px}
.acc-tabs button.on{color:var(--ink2);border-color:var(--gold);font-weight:500}
.mgr td{padding:7px 10px}
.mgr tr.lvl-1 td{background:#fcfbf8} .mgr tr.lvl-2 td{background:#faf8f3}
.mgr tr.pend td{background:var(--goldsoft)!important}
.mgr .nmcell{display:flex;align-items:center;gap:6px;min-width:0}
.mgr .chev{border:0;background:none;width:20px;height:20px;color:var(--muted);flex:none;font-size:11px;transition:transform .15s}
.mgr .chev.open{transform:rotate(90deg)}
.mgr .chev.vazio{visibility:hidden}
.mgr .nm{cursor:pointer;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.mgr .nm:hover{color:var(--goldt);text-decoration:underline}
.mgr .ind1{padding-left:22px} .mgr .ind2{padding-left:44px}
.sw{position:relative;width:34px;height:19px;border-radius:19px;background:var(--sand2);border:0;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.sw.on{background:var(--p6)} .sw.on::after{left:17px}
.sw.ro{opacity:.45;cursor:not-allowed}
.budget{display:inline-flex;align-items:center;gap:4px}
.budget button{border:0;background:none;color:var(--goldt);font-size:12px;padding:0 2px}
.budget input{width:90px;border:1px solid var(--gold);border-radius:var(--r);padding:3px 6px}
.st{font-size:12px} .st-ACTIVE{color:var(--green)} .st-PAUSED,.st-CAMPAIGN_PAUSED,.st-ADSET_PAUSED{color:var(--muted2)} .st-DISAPPROVED,.st-WITH_ISSUES{color:var(--red)}
.draftbar{position:fixed;left:236px;right:0;bottom:0;z-index:25;background:var(--p9);color:#efe9f6;display:flex;align-items:center;gap:14px;padding:14px 40px;border-top:2px solid var(--gold)}
.draftbar b{color:var(--gold2);font-weight:500}
.draftbar .btn.ghost{color:#efe9f6;border-color:rgba(255,253,252,.25)} .draftbar .btn.ghost:hover{background:transparent;color:var(--gold2);border-color:var(--gold)}

/* painéis */
.scrim{position:fixed;inset:0;background:rgba(18,10,31,.28);z-index:30}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(1060px,94vw);background:var(--cream);z-index:40;border-left:1px solid var(--line);overflow-y:auto}
.drawer.narrow{width:min(620px,94vw)}
.drawer-inner{padding:26px 30px 90px}
.dhead{display:flex;align-items:center;gap:12px}
.dhead .nm{font:400 28px/1.15 var(--serif);color:var(--ink2)}
.close{margin-left:auto;border:1px solid var(--line);background:var(--lt);width:32px;height:32px;border-radius:var(--r);font-size:18px;color:var(--muted)}
.subtabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin:16px 0 16px}
.subtabs button{border:0;background:none;padding:9px 0;color:var(--muted);border-bottom:2px solid transparent}
.subtabs button.on{color:var(--ink2);border-color:var(--gold);font-weight:500}
.setline{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:10px;color:var(--muted);font-size:13px}
.contas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.conta{background:var(--lt);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.mets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;margin-top:10px}
.mets .l{font:500 10px/1.3 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)} .mets .v{font-weight:500;color:var(--ink2)}
.kv{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{color:var(--ink2);overflow-wrap:anywhere}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,94vw);max-height:86vh;overflow:auto;background:var(--cream);border:1px solid var(--line);border-top:3px solid var(--gold);z-index:50;padding:24px 26px}
.modal h2{margin-top:0}

/* comandos */
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.cmdbox{display:flex;gap:8px;align-items:flex-end}
.cmdbox textarea{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-height:64px;resize:vertical;background:#fff}
.cmdbox textarea:focus{border-color:var(--gold);outline:0}
.job{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:12px;background:var(--lt)}
.job .jh{display:flex;gap:10px;align-items:center;font-size:13px;flex-wrap:wrap}
.jst{font-size:11.5px;padding:1px 8px;border-radius:var(--r);background:var(--sand)}
.jst-rodando,.jst-publicando,.jst-validado{background:var(--psoft);color:var(--p6)} .jst-ok,.jst-aplicado{background:var(--greensoft);color:var(--green)}
.jst-erro,.jst-interrompido,.jst-cancelado,.jst-falhou{background:var(--redsoft);color:var(--red)} .jst-parcial,.jst-manual{background:var(--ambersoft);color:var(--amber)}
.events{margin-top:8px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);max-height:140px;overflow-y:auto}
.md{margin-top:12px}
.md h3{font:400 18px/1.3 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink2);margin:16px 0 6px}
.md p{margin:6px 0} .md table{margin:8px 0;font-size:13px} .md td,.md th{border:1px solid var(--line2);padding:5px 8px;position:static}
.md pre{background:var(--sand);padding:10px 12px;border-radius:var(--r);overflow-x:auto;white-space:pre-wrap}
.md ul,.md ol{padding-left:22px;margin:6px 0}
.approve{margin-top:14px;padding:14px 16px;background:var(--goldsoft);border:1px solid #e5d3a6;border-radius:var(--r)}
.empty{color:var(--muted);padding:28px;text-align:center;background:var(--lt);border:1px dashed var(--line);border-radius:var(--r)}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--p9);color:#fff;padding:10px 18px;border-radius:var(--r);border-left:3px solid var(--gold);z-index:60;font-size:13px}

/* login */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--cream)}
.login-art{background:var(--p9);color:#efe9f6;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
.login-art h1{color:var(--lt);font-size:44px;max-width:12ch}
.login-art p{color:#b7aacd;max-width:36ch}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px}
.login-form form{width:min(360px,100%);display:flex;flex-direction:column;gap:14px}
.login-form label{display:flex;flex-direction:column;gap:6px}
.login-form input{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff;font-size:15px}
.login-form input:focus{border-color:var(--gold);outline:0}
.login-err{color:var(--red);font-size:13px;min-height:18px}

/* período */
.perbar{display:flex;flex-direction:column;gap:8px;margin:-8px 0 20px}
.perbar .fchip{padding:5px 11px;font-size:12.5px}
.perdatas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.perdatas input{width:150px}
.perinfo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink);min-height:28px}
.perinfo .prog{color:var(--goldt)}
.drawer .perbar{margin:14px 0 0}
.mgr td.r{white-space:nowrap}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .shell{grid-template-columns:1fr;background:var(--cream)}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 14px}
  .nav{flex-direction:row;flex-wrap:wrap}.nav-group,.side-foot{display:none}
  .main{padding:20px 16px 110px}.draftbar{left:0;padding:12px 16px}
  .login-wrap{grid-template-columns:1fr}.login-art{display:none}
}