:root{
  --bg:#0A0A0A; --s1:#121212; --s2:#1A1A1A; --s3:#232323; --line:#2A2A2A;
  --tx:#F4F4F4; --mut:#9B9B9B; --dim:#6B6B6B;
  --ac:#FF4A00; --ac-soft:rgba(255,74,0,.14); --ac-line:rgba(255,74,0,.45);
  --ok:#3DD68C; --ok-soft:rgba(61,214,140,.13); --warn:#F5B83D; --warn-soft:rgba(245,184,61,.14);
  --info:#6AA8FF; --info-soft:rgba(106,168,255,.13); --bad:#FF6B6B;
  --r:10px; --disp:'Anton',Impact,sans-serif; --ui:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 var(--ui)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

/* sidebar */
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:22px;background:var(--s1)}
.logo{font-family:var(--disp);font-size:30px;letter-spacing:.5px;line-height:1}
.logo span{color:var(--ac);margin-left:4px}
.logo small{display:block;font:500 11px var(--ui);color:var(--mut);letter-spacing:1.6px;text-transform:uppercase;margin-top:6px}
nav{display:flex;flex-direction:column;gap:2px}
.nav-i{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;color:var(--mut);cursor:pointer;border:0;background:none;text-align:left;font-weight:500}
.nav-i:hover{background:var(--s2);color:var(--tx)}
.nav-i.on{background:var(--ac-soft);color:var(--tx);box-shadow:inset 3px 0 0 var(--ac)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ac);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.side-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.side-foot{font-size:11px;color:var(--dim)}
.side-foot::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}

/* buttons */
.btn{border:1px solid var(--line);background:var(--s2);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap}
.btn:hover{border-color:#444;background:var(--s3)}
.btn.primary{background:var(--ac);border-color:#000;color:#fff;box-shadow:3px 3px 0 #000}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ok{background:var(--ok);color:#06210f;border-color:#000;box-shadow:3px 3px 0 #000}
.btn.ghost{background:none;border-color:transparent;color:var(--mut)}
.btn.ghost:hover{color:var(--tx);background:var(--s2)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* main */
main{padding:28px 32px 60px;min-width:0}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ph h1{font-family:var(--disp);font-weight:400;font-size:38px;line-height:1;margin:0;letter-spacing:.4px;text-transform:uppercase}
.ph p{margin:6px 0 0;color:var(--mut);max-width:680px}
.ph .tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
h2{font:700 12px var(--ui);text-transform:uppercase;letter-spacing:1.4px;color:var(--mut);margin:0 0 12px}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.grid{display:grid;gap:14px}
.muted{color:var(--mut)}.dim{color:var(--dim)}
.num{font-variant-numeric:tabular-nums}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .l{font-size:12px;color:var(--mut)}
.kpi .v{font-family:var(--disp);font-size:32px;line-height:1.15;margin-top:4px}
.kpi .s{font-size:11px;color:var(--dim);margin-top:2px}
.kpi.hl{border-color:var(--ac-line);background:linear-gradient(180deg,var(--ac-soft),var(--s1) 70%)}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:7px}
.f-row{display:grid;grid-template-columns:140px 1fr 44px;align-items:center;gap:12px;cursor:pointer}
.f-row:hover .f-bar{filter:brightness(1.2)}
.f-name{font-size:13px;color:var(--mut)}
.f-track{height:26px;background:var(--s2);border-radius:6px;overflow:hidden}
.f-bar{height:100%;background:var(--ac);border-radius:6px;min-width:3px;transition:width .4s}
.f-bar.lado{background:#4a4a4a}
.f-n{text-align:right;font-weight:700}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.list{display:flex;flex-direction:column}
.li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .t{flex:1;min-width:0}
.li .w{font-size:11px;color:var(--dim);white-space:nowrap}
.who{font-size:10px;font-weight:700;letter-spacing:.8px;padding:2px 6px;border-radius:4px;text-transform:uppercase;flex-shrink:0;margin-top:2px}
.who.claude{background:var(--ac-soft);color:var(--ac)}
.who.allan{background:var(--info-soft);color:var(--info)}
.who.sistema{background:var(--s3);color:var(--mut)}
.empty{color:var(--dim);padding:18px 0;text-align:center;font-size:13px}

/* fluxo */
.flow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.fl{background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:12px;position:relative}
.fl h3{margin:0 0 8px;font-size:13px}
.fl .n{font-family:var(--disp);color:var(--ac);font-size:18px;line-height:1;margin-bottom:6px}
.fl p{margin:0 0 7px;font-size:12px;color:var(--mut)}
.fl b{display:block;font-size:10px;letter-spacing:.8px;text-transform:uppercase;margin-bottom:2px}
.fl .c b{color:var(--ac)} .fl .y b{color:var(--info)}

/* kanban */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.col{flex:0 0 250px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;max-height:calc(100vh - 190px)}
.col.lado{flex-basis:210px;opacity:.85}
.col.over{border-color:var(--ac);background:var(--ac-soft)}
.col-h{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.col-h b{font-size:13px}
.col-h span{font-size:12px;color:var(--mut)}
.col-b{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:80px}
.kc{background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:10px 11px;cursor:grab}
.kc:hover{border-color:#444}
.kc.drag{opacity:.4}
.kc .m{font-weight:600;font-size:13px;display:flex;justify-content:space-between;gap:6px}
.kc .sub{font-size:12px;color:var(--mut);margin-top:2px}
.kc .ft{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;align-items:center}
.chip{font-size:11px;padding:2px 7px;border-radius:20px;background:var(--s3);color:#cfcfcf;white-space:nowrap}
.chip.ac{background:var(--ac-soft);color:var(--ac)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.info{background:var(--info-soft);color:var(--info)}
.chip.demo{background:transparent;border:1px dashed #555;color:var(--dim)}
.more{font-size:12px;color:var(--dim);text-align:center;padding:4px}

/* filtros e tabela */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.inp,select.inp,textarea.inp{background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;outline:none;min-width:0}
.inp:focus{border-color:var(--ac-line);box-shadow:0 0 0 3px var(--ac-soft)}
textarea.inp{width:100%;resize:vertical;min-height:90px;line-height:1.5}
.tbl-w{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--s1)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut);font-weight:600;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--s1);position:sticky;top:0}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--s2)}
tr.sel td{background:var(--ac-soft)}
td.ck,th.ck{width:34px;cursor:default}
input[type=checkbox]{accent-color:var(--ac);width:15px;height:15px;cursor:pointer}
.bulk{display:flex;gap:10px;align-items:center;background:var(--ac-soft);border:1px solid var(--ac-line);padding:8px 12px;border-radius:8px;margin-bottom:12px;flex-wrap:wrap}

/* sala do claude */
.room-intro{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-bottom:16px}
.cmd{font-family:ui-monospace,Menlo,monospace;background:#000;border:1px solid var(--line);padding:8px 12px;border-radius:6px;font-size:12.5px;color:var(--ac)}
.room{display:grid;grid-template-columns:1fr 1fr 2.2fr;gap:12px;align-items:start}
.lane{background:var(--s1);border:1px solid var(--line);border-radius:var(--r)}
.lane.hl{border-color:var(--ac-line)}
.lane-h{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.lane-h b{font-size:13px}
.lane-b{padding:10px;display:flex;flex-direction:column;gap:8px}
.tc{background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:11px 12px}
.tc .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.tc .lead{font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:#444;text-underline-offset:3px}
.tc .ins{font-size:12px;color:var(--mut);margin-top:6px;font-style:italic;white-space:pre-wrap}
.tc.big{padding:16px}
.tc .res{margin:10px 0;color:#ddd}
.patch{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:12.5px;margin:8px 0}
.patch div{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:2px 0}
.patch span{color:var(--mut)}
.move{font-size:12px;color:var(--mut);margin:6px 0 10px}
.move b{color:var(--ok)}
.act{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ac);display:inline-block;animation:p 1.4s infinite}
@keyframes p{0%{box-shadow:0 0 0 0 rgba(255,74,0,.6)}100%{box-shadow:0 0 0 9px rgba(255,74,0,0)}}
.done{margin-top:14px}

/* sequência */
.seq{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.step{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.step-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.step-h .d{font-family:var(--disp);font-size:20px;color:var(--ac)}
.step label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.8px;display:block;margin:8px 0 4px}
.step .inp{width:100%}
.vars{display:flex;gap:6px;flex-wrap:wrap}
.vars code{font-size:12px;background:var(--s2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ac)}
.mail{background:#fff;color:#1b1b1b;border-radius:var(--r);padding:20px 22px;font-size:14px;line-height:1.6}
.mail .subj{font-weight:700;border-bottom:1px solid #e5e5e5;padding-bottom:10px;margin-bottom:12px}
.mail .body{white-space:pre-wrap}
.mail .foot{margin-top:16px;padding-top:10px;border-top:1px solid #eee;font-size:12px;color:#777}
.mail mark{background:#ffe1d3;color:#a33000;padding:0 2px;border-radius:3px}
.sticky{position:sticky;top:20px}

/* drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(560px,100vw);background:var(--s1);border-left:1px solid var(--line);z-index:30;overflow-y:auto;box-shadow:-20px 0 60px rgba(0,0,0,.6)}
.dr-h{position:sticky;top:0;background:var(--s1);padding:20px 22px 14px;border-bottom:1px solid var(--line);z-index:2}
.dr-h h3{font-family:var(--disp);font-weight:400;font-size:28px;margin:0;line-height:1.05;text-transform:uppercase}
.dr-h .row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.dr-b{padding:18px 22px 40px;display:flex;flex-direction:column;gap:22px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.7px}
.fields .full{grid-column:1/-1}
.fields .inp{text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--tx)}
.ask{background:var(--ac-soft);border:1px solid var(--ac-line);border-radius:var(--r);padding:14px}
.ask .types{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tp{border:1px solid var(--line);background:var(--s2);border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer}
.tp.on{background:var(--ac);border-color:var(--ac);color:#fff}
.ask .hint{font-size:12px;color:var(--mut);margin-bottom:8px}
.tl{display:flex;flex-direction:column;gap:0}
.tl-i{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.tl-i:first-child{border-top:0}
.tl-i .tx{white-space:pre-wrap;font-size:13px}
.tl-i .w{font-size:11px;color:var(--dim);margin-top:2px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:29}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:40;display:grid;place-items:center;padding:16px}
.mbox{background:var(--s1);border:1px solid var(--line);border-radius:14px;width:min(640px,100%);max-height:90vh;overflow-y:auto;padding:24px}
.mbox h3{font-family:var(--disp);font-weight:400;font-size:26px;margin:0 0 6px;text-transform:uppercase}
.mbox .act{margin-top:18px}
.drop{border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--mut);cursor:pointer;margin:12px 0}
.drop:hover,.drop.over{border-color:var(--ac);color:var(--tx)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--tx);color:#000;padding:10px 18px;border-radius:8px;font-weight:600;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.5)}

@media (max-width:1280px){.kpis{grid-template-columns:repeat(3,1fr)}.flow{grid-template-columns:repeat(4,1fr)}.room{grid-template-columns:1fr 1fr}.room .lane.hl{grid-column:1/-1;order:-1}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 16px;gap:12px}
  nav{flex-direction:row;overflow-x:auto;flex:1 1 100%}
  .side-actions{flex-direction:row;margin:0}.side-foot{display:none}
  main{padding:20px 16px}
  .two,.seq,.room,.room-intro{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:repeat(2,1fr)}
  .fields{grid-template-columns:1fr}
}

[hidden]{display:none!important}

/* ---- v2: automações e integrações ---- */
.sm{font-size:12px}
.badge.soft{background:var(--s3);color:var(--mut)}
.chip.bad{background:rgba(255,107,107,.14);color:var(--bad)}
.who.bad{background:rgba(255,107,107,.14);color:var(--bad)}
.who.info{background:var(--info-soft);color:var(--info)}
.lead{cursor:pointer;font-weight:600}
.lead:hover{text-decoration:underline;text-underline-offset:3px}
code.ac{color:var(--ac)}
.modo{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--line);background:var(--s2);border-radius:8px;padding:8px 12px;font-weight:700;font-size:12px;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;color:var(--mut)}
.modo .dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.modo.warn{color:var(--warn);border-color:rgba(245,184,61,.4)}.modo.warn .dot{background:var(--warn)}
.modo.ok{color:var(--ok);border-color:rgba(61,214,140,.4)}.modo.ok .dot{background:var(--ok);animation:p 1.6s infinite}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{background:none;border:0;padding:10px 16px;color:var(--mut);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--tx)}.tab.on{color:var(--tx);border-bottom-color:var(--ac)}
.statusbar{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-bottom:14px}
.statusbar>div{display:flex;align-items:center;gap:8px}
.statusbar span:first-child{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.8px}
.two.eq{grid-template-columns:1.2fr 1fr}
.when{font-size:12px;color:var(--ac);font-weight:700;min-width:86px;padding-top:2px}
.subj1{color:#ddd;margin-top:2px}
.col-act{display:flex;flex-direction:column;gap:4px}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.warnbox{border-color:rgba(255,107,107,.4)}
details.sent{border-top:1px solid var(--line)}
details.sent:first-child{border-top:0}
details.sent summary{display:flex;gap:10px;align-items:center;padding:9px 0;cursor:pointer;list-style:none}
details.sent summary::-webkit-details-marker{display:none}
details.sent summary .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.sent .w{font-size:11px;color:var(--dim);white-space:nowrap}
.sent-b{padding:0 0 12px}
.sent-b pre{white-space:pre-wrap;font:13px/1.5 var(--ui);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:6px 0 0;color:#ddd}
.cad-wrap{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.cad-list{display:flex;flex-direction:column;gap:6px;position:sticky;top:20px}
.cad-i{text-align:left;background:var(--s1);border:1px solid var(--line);border-radius:8px;padding:11px 12px;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.cad-i span{font-size:12px;color:var(--mut)}
.cad-i.on{border-color:var(--ac-line);background:var(--ac-soft)}
.rule{font-size:12px;color:var(--mut);background:var(--bg);border:1px dashed var(--line);border-radius:6px;padding:8px 10px;margin-top:12px}
.tline{display:flex;align-items:center;margin-top:16px;overflow-x:auto;padding-bottom:4px}
.tl-step{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px}
.tl-step .dot{width:12px;height:12px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 4px var(--ac-soft)}
.tl-step b{font-family:var(--disp);font-weight:400;font-size:16px;color:var(--ac)}
.tl-step span{font-size:11px;color:var(--mut)}
.tl-bar{flex:1;min-width:24px;height:2px;background:var(--line);margin-bottom:34px}
.ckl{display:inline-flex !important;flex-direction:row !important;align-items:center;gap:6px;text-transform:none !important;letter-spacing:0 !important;font-size:13px !important;color:var(--tx) !important;cursor:pointer}
.days{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.savebar{display:flex;gap:8px;align-items:center;margin-top:12px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:18px 0 6px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mode-c{border:1px solid var(--line);background:var(--s2);border-radius:10px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.mode-c input{display:none}
.mode-c span{font-size:12px;color:var(--mut)}
.mode-c em{font-size:11px;color:var(--warn);font-style:normal}
.mode-c.on{border-color:var(--ac);background:var(--ac-soft);box-shadow:3px 3px 0 #000}
.journey{margin-bottom:16px}
.jh{display:flex;justify-content:space-between;align-items:center}
.jh b{font-family:var(--disp);font-size:24px;font-weight:400;color:var(--ac)}
.jbar{height:6px;background:var(--s3);border-radius:3px;margin:10px 0 14px;overflow:hidden}
.jbar div{height:100%;background:var(--ac);border-radius:3px;transition:width .4s}
.jsteps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.js{display:flex;gap:9px;align-items:flex-start;text-decoration:none;background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer}
.js:hover{border-color:#444}
.js .jn{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--s3);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--mut)}
.js.ok .jn{background:var(--ok);color:#06210f}
.js b{display:block;font-size:12.5px;line-height:1.3}
.js span{display:block;font-size:11px;color:var(--mut);margin-top:2px}
.js.ok b{color:var(--mut);text-decoration:line-through;text-decoration-color:#555}
.ints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.int{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:18px;scroll-margin-top:20px}
.int.plan{opacity:.75}
.int-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.int-h>div:nth-child(2){flex:1}
.int-h b{display:block;font-size:15px}
.int-h span{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.int-h .chip{flex-shrink:0}
.ico{width:38px;height:38px;border-radius:9px;background:var(--ac-soft);color:var(--ac);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.int.plan .ico{background:var(--s3);color:var(--mut)}
.guide{margin-top:12px;font-size:13px;color:#ccc}
.guide summary{cursor:pointer;color:var(--ac);font-weight:600}
.guide ol{padding-left:18px;margin:10px 0}
.guide li{margin:4px 0}
.checks{display:flex;flex-direction:column;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12.5px}
.checks div{display:grid;grid-template-columns:130px 1fr;gap:10px}
.checks span{color:var(--mut)}
.okt{color:var(--ok);font-weight:500;word-break:break-word}.badt{color:var(--bad);font-weight:500}
.cadbox{background:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.steps{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.st{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.st .sd{width:22px;height:22px;border-radius:50%;background:var(--s3);color:var(--mut);display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.st b{display:block;font-size:12.5px;font-weight:600}
.st span{display:block;font-size:11.5px;color:var(--mut)}
.st.ok .sd{background:var(--ok);color:#06210f}
.st.next .sd{background:var(--ac);color:#fff}.st.next span{color:var(--ac)}
.st.bad .sd{background:var(--bad);color:#000}.st.bad span{color:var(--bad)}
.st mark{background:transparent;color:var(--warn)}
@media (max-width:1280px){.jsteps{grid-template-columns:repeat(4,1fr)}.ints{grid-template-columns:1fr}}
@media (max-width:900px){.cad-wrap,.two.eq,.modes{grid-template-columns:1fr}.cad-list{position:static}.jsteps{grid-template-columns:1fr 1fr}}

.presets{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.guide p{margin:8px 0}

/* ---- v3: menu em grupos, perfil, visão geral, integrações por categoria ---- */
.ic{flex-shrink:0;display:block}
.side{gap:18px}
nav{gap:3px;overflow-y:auto;flex:1;min-height:0;margin:0 -4px;padding:0 4px}
.nav-i{justify-content:flex-start;gap:11px;width:100%;padding:9px 11px}
.nav-i>span:first-of-type{flex:1;text-align:left}
.nav-i .ic{color:var(--dim)}
.nav-i:hover .ic,.nav-i.on .ic,.nav-i.act .ic{color:var(--ac)}
.nav-i.act{color:var(--tx)}
.chev{display:grid;place-items:center;color:var(--dim);transition:transform .2s}
.chev .ic{color:inherit !important}
.grp.open>.nav-i .chev{transform:rotate(90deg)}
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.grp.open>.sub{grid-template-rows:1fr}
.sub-in{overflow:hidden;display:flex;flex-direction:column;gap:1px;margin-left:20px;padding-left:12px;border-left:1px solid var(--line)}
.grp.open .sub-in{padding-top:2px;padding-bottom:6px}
.nav-s{display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:0;color:var(--mut);padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13.5px;text-align:left}
.nav-s:hover{background:var(--s2);color:var(--tx)}
.nav-s.on{background:var(--ac-soft);color:var(--tx);font-weight:600}
.nav-s.mais{color:var(--dim);font-size:13px}
.nav-s.mais:hover{color:var(--ac)}
.perfil-w{position:relative;margin-top:auto}
.pf-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:9px 10px;cursor:pointer;text-align:left}
.pf-btn:hover,.pf-btn.on{border-color:var(--ac-line)}
.pf-btn>div{flex:1;min-width:0}
.pf-btn b{display:block;font-size:13.5px}
.pf-btn span{display:block;font-size:11.5px;color:var(--mut)}
.chev.up{transform:rotate(-90deg)}
.pf-btn[aria-expanded="true"] .chev.up{transform:rotate(90deg)}
.av{position:relative;width:36px;height:36px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-size:15px;letter-spacing:.5px;flex-shrink:0;box-shadow:2px 2px 0 #000}
.av i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--s2)}
.av.lg{width:44px;height:44px;font-size:18px}
.av.xl{width:64px;height:64px;font-size:26px;box-shadow:4px 4px 0 #000}
.pf-pop{position:absolute;bottom:calc(100% + 10px);left:0;right:0;min-width:250px;background:var(--s1);border:1px solid #333;border-radius:14px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.7);z-index:20;animation:pop .14s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pf-h{display:flex;gap:11px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pf-h b{display:block}
.pf-h span{display:block;font-size:11.5px;color:var(--mut)}
.pf-i{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;border-radius:9px;padding:10px;cursor:pointer;text-align:left;color:var(--tx)}
.pf-i:hover,.pf-i.on{background:var(--s2)}
.pf-i .ic{color:var(--ac)}
.pf-i>div{flex:1}
.pf-i b{display:block;font-size:13.5px}
.pf-i span{display:block;font-size:11.5px;color:var(--mut)}
.pf-f{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--dim);padding:10px 10px 4px;border-top:1px solid var(--line);margin-top:6px}
.okdot{width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* visão geral */
.hello{display:flex;gap:18px;align-items:center;margin-bottom:20px}
.hello h1{font-family:var(--disp);font-weight:400;font-size:40px;line-height:1;margin:0;text-transform:uppercase}
.hello p{margin:6px 0 0;color:var(--mut);text-transform:none}
.hello p::first-letter{text-transform:uppercase}
.today{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.td{display:flex;gap:14px;align-items:center;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer}
.td:hover{border-color:#444}
.td .ic{color:var(--mut)}
.td b{display:block;font-family:var(--disp);font-weight:400;font-size:30px;line-height:1}
.td span{display:block;font-size:12px;color:var(--mut);margin-top:3px}
.td.hot{border-color:var(--ac-line);background:linear-gradient(135deg,var(--ac-soft),var(--s1) 70%)}
.td.hot .ic{color:var(--ac)}
.secs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.sec{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:14px;transition:border-color .15s,transform .15s}
.sec:hover{border-color:#4a4a4a;transform:translateY(-1px)}
.sec.alert{border-color:var(--ac-line)}
.sec-h{display:flex;align-items:center;gap:10px}
.sec-h b{flex:1;font-size:15px}
.sec-ico{width:34px;height:34px;border-radius:9px;background:var(--ac-soft);color:var(--ac);display:grid;place-items:center}
.go{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--dim)}
.sec:hover .go{color:var(--ac)}
.sec-m{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.mt b{display:block;font-family:var(--disp);font-weight:400;font-size:26px;line-height:1.05}
.mt span{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.mt.ok b{color:var(--ok)}.mt.warn b{color:var(--warn)}.mt.bad b{color:var(--bad)}
.sec-f{font-size:12px;color:var(--mut);border-top:1px solid var(--line);padding-top:10px;margin-top:auto}

/* integrações por categoria */
.js{text-align:left;color:var(--tx);font:inherit}
.js .jn .ic{width:12px;height:12px}
.cats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-bottom:14px}
.cat{display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:14px 12px;cursor:pointer;text-align:left;color:var(--tx);transition:border-color .15s,background .15s}
.cat:hover{border-color:#4a4a4a}
.cat.on{border-color:var(--ac);background:var(--ac-soft);box-shadow:3px 3px 0 #000}
.cat b{font-size:13.5px;line-height:1.2}
.cat .chip{font-size:10.5px}
.cat-ico{width:42px;height:42px;border-radius:11px;background:var(--s3);color:var(--tx);display:grid;place-items:center}
.cat.on .cat-ico{background:var(--ac);color:#fff}
.cat-ico.lg{width:56px;height:56px;border-radius:14px;background:var(--ac);color:#fff;box-shadow:3px 3px 0 #000;flex-shrink:0}
.catd{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:20px;scroll-margin-top:16px}
.catd-h{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.h2b{font-family:var(--disp);font-weight:400;font-size:28px;color:var(--tx);text-transform:uppercase;letter-spacing:.3px;margin:0 0 10px}
.whatwhy{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.whatwhy div{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;color:#ddd}
.whatwhy span{display:block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ac);margin-bottom:4px}
.catd .int{background:var(--s2)}
.catd .ico .ic{color:inherit}

@media (max-width:1400px){.cats{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1280px){.secs{grid-template-columns:repeat(2,1fr)}.today{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .side{flex-direction:column;align-items:stretch}
  nav{flex-direction:column;overflow:visible}
  .secs,.whatwhy{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .pf-pop{position:static;margin-bottom:8px}
}

.pf-btn .av,.pf-h .av{display:grid;place-items:center;font-size:15px;color:#fff;margin:0}
.pf-h .av.lg{font-size:18px}
.pf-btn .av i{display:block}

/* ---- v4: caixa de e-mail ---- */
.empty-state{text-align:center;padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty-state h3{margin:6px 0 0;font-size:18px}
.empty-state p{max-width:520px;margin:0}
.mailbox{display:grid;grid-template-columns:380px 1fr;gap:12px;height:calc(100vh - 150px);min-height:520px}
.mb-list,.mb-read{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:0}
.mb-tools{padding:10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.segm{display:flex;background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.segm button{flex:1;background:none;border:0;color:var(--mut);padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:600}
.segm button.on{background:var(--s3);color:var(--tx)}
.mb-items{overflow-y:auto;flex:1}
.mi{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:11px 14px 11px 18px;cursor:pointer;color:var(--tx);position:relative;align-items:flex-start}
.mi:hover{background:var(--s2)}
.mi.on{background:var(--ac-soft);box-shadow:inset 3px 0 0 var(--ac)}
.mi-top{display:flex;justify-content:space-between;gap:8px;width:100%}
.mi-top b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-top span{font-size:11px;color:var(--dim);white-space:nowrap}
.mi-subj{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.mi.unread b{font-weight:700}
.mi.unread .mi-subj{color:var(--tx)}
.mi.unread::before{content:'';position:absolute;left:7px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.mi .chip{margin-top:3px;font-size:10.5px}
.mb-read{overflow:hidden}
.mb-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dim)}
.rd-h{padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.rd-subj{font:600 19px/1.3 var(--ui);color:var(--tx);text-transform:none;letter-spacing:0;margin:0 0 12px}
.rd-from{display:flex;gap:11px;align-items:center}
.av.md{width:36px;height:36px;font-size:14px;box-shadow:none;background:var(--s3);color:var(--tx)}
.rd-lead{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--ac-soft);border-bottom:1px solid var(--ac-line);flex-wrap:wrap}
.rd-lead .ic{color:var(--ac)}
.rd-lead.off{background:var(--s2);border-bottom-color:var(--line)}
.rd-lead.off .ic{color:var(--dim)}
.rd-lt{flex:1;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rd-act{display:flex;gap:6px;flex-wrap:wrap}
.rd-act .btn{display:inline-flex;align-items:center;gap:5px}
.rd-body{flex:1;min-height:0;overflow:auto;background:#fff}
.rd-frame{width:100%;height:100%;border:0;display:block;background:#fff}
.rd-text{margin:0;padding:18px 20px;white-space:pre-wrap;font:14px/1.6 var(--ui);color:#1b1b1b}
.rd-anx{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 20px;border-top:1px solid var(--line)}
.rd-anx .chip{display:inline-flex;align-items:center;gap:4px}
.rd-reply{padding:12px 20px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.rd-reply textarea{min-height:90px}
.rd-reply .act{margin-top:0}
.btn .ic{display:inline-block;vertical-align:-3px}
@media (max-width:1100px){.mailbox{grid-template-columns:1fr;height:auto}.mb-items{max-height:360px}.mb-read{min-height:520px}}

/* ---- v5: login ---- */
.login{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:16px}
.login-box{width:min(360px,100%);display:flex;flex-direction:column;gap:10px;background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:28px}
.login-box .logo{margin-bottom:14px}
.login-box .btn{margin-top:6px;padding:11px}

/* pixel art da fila de disparos */
.when .px-cell,.px-cell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:86px}
.px-sprite{image-rendering:pixelated;display:block;overflow:visible}
.px-lbl{font:700 10px/1.1 'Space Mono',ui-monospace,monospace;letter-spacing:.3px;color:var(--mut);text-transform:lowercase;white-space:nowrap}
.px-agora + .px-lbl{color:var(--ok)} .px-breve + .px-lbl{color:var(--warn)} .px-pausa + .px-lbl{color:var(--bad)} .px-ponte + .px-lbl{color:var(--warn)}
.px-agora .px-env{animation:px-voa .5s steps(2) infinite}
.px-agora .px-wing.a{animation:px-asa .3s steps(1) infinite}
.px-agora .px-wing.b{animation:px-asa2 .3s steps(1) infinite}
.px-agora .px-trail{animation:px-rastro .45s steps(3) infinite}
.px-breve .px-env{animation:px-respira 1.6s steps(2) infinite}
.px-breve .px-sand{animation:px-areia 1.2s steps(3) infinite}
.px-dorme .px-env{animation:px-respira 2.4s steps(2) infinite}
.px-dorme .px-z{animation:px-zzz 2.4s steps(4) infinite}
.px-dorme .px-z.z2{animation-delay:1.2s}
.px-blink{animation:px-pisca 1s steps(1) infinite}
@keyframes px-voa{0%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes px-asa{0%{opacity:1}50%{opacity:0}}
@keyframes px-asa2{0%{opacity:0}50%{opacity:1}}
@keyframes px-rastro{0%{transform:translateX(0);opacity:.9}100%{transform:translateX(-3px);opacity:.2}}
@keyframes px-respira{0%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes px-areia{0%{transform:translateY(-2px);opacity:1}100%{transform:translateY(1px);opacity:.4}}
@keyframes px-zzz{0%{transform:translate(0,2px);opacity:.25}35%{opacity:1}100%{transform:translate(2px,-2px);opacity:.35}}
@keyframes px-pisca{0%{opacity:1}50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.px-sprite *{animation:none!important;opacity:1!important}}

/* seletor de workspace */
.logo{position:relative}
.ws-btn{all:unset;cursor:pointer;display:block;font:inherit;color:inherit}
.ws-btn small{display:block;font:500 11px var(--ui);color:var(--mut);letter-spacing:1.6px;text-transform:uppercase;margin-top:6px}
.ws-btn:hover small{color:var(--tx)}
.ws-pop{position:absolute;left:0;right:-8px;top:calc(100% + 8px);z-index:50;background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.ws-i{all:unset;box-sizing:border-box;cursor:pointer;display:block;text-decoration:none;width:100%;padding:9px 10px;border-radius:8px;font:500 13px var(--ui);letter-spacing:0;text-transform:none}
.ws-i b{display:block;color:var(--tx);font-weight:700}
.ws-i span{display:block;color:var(--mut);font-size:11px;margin-top:2px}
.ws-i:hover{background:var(--s3)}
.ws-i.on{box-shadow:inset 3px 0 0 var(--ac);background:var(--ac-soft)}

/* splash da Youth: o ✱ gira, infla, cobre a tela e um recorte em ✱ revela a esteira */
.splash-yt{position:fixed;z-index:200;inset:0;display:grid;place-items:center;background:var(--s1)}
.splash-yt .sp-logo{font-family:var(--disp);font-size:clamp(56px,8vw,104px);line-height:1;letter-spacing:1px;color:var(--tx);display:flex;align-items:center;
  opacity:0;transform:translateY(10px);animation:sp-in .7s cubic-bezier(.2,.7,.2,1) .1s forwards}
.sp-ast{display:inline-block;width:.62em;height:.62em;margin-left:.12em;background:var(--ac);
  -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat;animation:sp-gira 1.4s cubic-bezier(.6,0,.4,1) infinite}
.splash-yt .sp-sub{display:block;text-align:center;font:500 12px var(--ui);color:var(--mut);letter-spacing:2.4px;text-transform:uppercase;margin-top:12px}
.yt-ast{position:fixed;z-index:210;background:var(--ac);transform-origin:50% 50%;will-change:transform;pointer-events:none;
  -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat}
.yt-derrete{position:fixed;z-index:210;pointer-events:none;filter:url(#yt-goo)}
@keyframes sp-in{to{opacity:1;transform:none}}
@keyframes sp-gira{to{transform:rotate(180deg)}}
[data-ws="youth"].carregando .side>*{opacity:0}
[data-ws="youth"].carregando main{opacity:0}
[data-ws="youth"] .side>*{transition:opacity .35s ease}
[data-ws="youth"] main{transition:opacity .35s ease}
@media (prefers-reduced-motion:reduce){.splash-yt,.yt-ast,.yt-derrete{display:none}}