/* Layout: painel de controle — trilho lateral fixo com o menu, área de trabalho em blocos de borda dura sobre grid técnico */
:root{
  --bg:#0A1626; --bg-2:#0E1D31; --panel:#11253D; --panel-2:#0C1C30;
  --line:#2A4766; --line-soft:rgba(42,71,102,.55); --grid:rgba(120,170,210,.06);
  --fg:#E6F1F4; --muted:#9AB0C2;
  --accent:#3DD9C5; --accent-ink:#03211D; --accent-soft:rgba(61,217,197,.14);
  --warn:#F2B84B; --warn-soft:rgba(242,184,75,.14);
  --err:#FF9A90; --err-soft:rgba(255,154,144,.14);
  --c3:#7FB2FF;
  --shadow:#02080F; --scrim:rgba(3,10,20,.62);
  --f-display:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --b:1.5px solid var(--line);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#E8F0F3; --bg-2:#DCE7ED; --panel:#FFFFFF; --panel-2:#F2F7F9;
    --line:#8FA7BA; --line-soft:rgba(143,167,186,.5); --grid:rgba(11,29,51,.06);
    --fg:#0B1D33; --muted:#43607A;
    --accent:#0B7A6E; --accent-ink:#FFFFFF; --accent-soft:rgba(11,122,110,.12);
    --warn:#8A5A00; --warn-soft:rgba(138,90,0,.12);
    --err:#B3261E; --err-soft:rgba(179,38,30,.1);
    --c3:#2A5DB0;
    --shadow:#0B1D33; --scrim:rgba(11,29,51,.45);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#E8F0F3; --bg-2:#DCE7ED; --panel:#FFFFFF; --panel-2:#F2F7F9;
  --line:#8FA7BA; --line-soft:rgba(143,167,186,.5); --grid:rgba(11,29,51,.06);
  --fg:#0B1D33; --muted:#43607A;
  --accent:#0B7A6E; --accent-ink:#FFFFFF; --accent-soft:rgba(11,122,110,.12);
  --warn:#8A5A00; --warn-soft:rgba(138,90,0,.12);
  --err:#B3261E; --err-soft:rgba(179,38,30,.1);
  --c3:#2A5DB0;
  --shadow:#0B1D33; --scrim:rgba(11,29,51,.45);
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
body{
  background-color:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display); font-weight:700; line-height:1.15; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.label{font-family:var(--f-display); font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.muted{color:var(--muted)}
.tag-draft{display:inline-block; font-family:var(--f-display); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--warn); border:1px dashed var(--warn); padding:1px 7px; white-space:nowrap}
svg.i{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:square}

/* Buttons & controls */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 16px; border:var(--b); background:var(--panel); color:var(--fg); font-family:var(--f-display); font-weight:600; font-size:.92rem; letter-spacing:.02em; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:3px 3px 0 var(--shadow); transition:transform .15s, box-shadow .15s}
.btn-primary:hover:not([disabled]){transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--shadow)}
.btn-ghost{background:transparent}
.btn-danger{color:var(--err); background:transparent}
.btn-danger:hover{border-color:var(--err)}
.btn-sm{min-height:34px; padding:6px 12px; font-size:.85rem}
.spin{width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.field{display:grid; gap:6px; min-width:0}
.field label{font-weight:500; font-size:.9rem}
.ctl{width:100%; min-height:42px; padding:9px 12px; border:var(--b); background:var(--panel-2); color:var(--fg); border-radius:0}
.ctl:focus{outline:none; border-color:var(--accent); box-shadow:3px 3px 0 var(--accent-soft)}
textarea.ctl{min-height:120px; resize:vertical}
.field.bad .ctl{border-color:var(--err)}
.err{color:var(--err); font-size:.82rem; min-height:1.15em}
.ok-msg{color:var(--accent); font-size:.9rem; min-height:1.3em}
.seg{display:inline-flex; border:var(--b); background:var(--panel-2); flex-wrap:wrap}
.seg button{border:0; background:transparent; padding:8px 14px; cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:.85rem; color:var(--muted); display:inline-flex; align-items:center; gap:8px}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-display); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border:1px solid currentColor; white-space:nowrap}
.pill.ok{color:var(--accent); background:var(--accent-soft)}
.pill.warn{color:var(--warn); background:var(--warn-soft)}
.pill.err{color:var(--err); background:var(--err-soft)}
.pill.off{color:var(--muted)}
.switch{position:relative; width:52px; height:28px; border:var(--b); background:var(--panel-2); cursor:pointer; padding:0; flex:none}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:var(--muted); transition:transform .18s, background .18s}
.switch[aria-checked="true"]{border-color:var(--accent); background:var(--accent-soft)}
.switch[aria-checked="true"]::after{transform:translateX(24px); background:var(--accent)}
.meter{height:10px; border:1px solid var(--line); background:var(--panel-2)}
.meter i{display:block; height:100%; background:var(--accent); transition:width .3s}

/* Shell */
.app{display:grid; grid-template-columns:minmax(0,1fr); min-height:100vh}
@media (min-width:1024px){ .app{grid-template-columns:260px minmax(0,1fr)} .app-col{grid-column:2; grid-row:1} .side{grid-column:1; grid-row:1} }
.side{
  position:fixed; top:0; bottom:0; left:0; width:280px; z-index:60;
  background:var(--bg-2); border-right:var(--b);
  display:flex; flex-direction:column; gap:8px;
  padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px)) max(14px, env(safe-area-inset-left,0px));
  transform:translateX(-100%); transition:transform .25s ease;
}
.side.open{transform:none}
@media (min-width:1024px){ .side{position:sticky; top:0; height:100vh; width:auto; transform:none; transition:none} }
.logo{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:1.2rem; letter-spacing:.02em; text-decoration:none; padding:4px 8px 18px}
.logo svg{width:28px; height:28px}
.nav{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.nav a,.profile-link,.plan-chip,.side .logo{-webkit-tap-highlight-color:transparent; -webkit-user-drag:none; user-select:none}
.nav a:focus:not(:focus-visible),.profile-link:focus:not(:focus-visible){outline:none}
.nav a{display:flex; align-items:center; gap:12px; padding:10px 12px; text-decoration:none; color:var(--muted); font-weight:500; border:1.5px solid transparent}
.nav a:hover{color:var(--fg); background:var(--panel)}
.nav a[aria-current="page"]{color:var(--fg); background:var(--panel); border-color:var(--line); box-shadow:inset 3px 0 0 var(--accent)}
.nav a[aria-current="page"] svg{color:var(--accent)}
.side-foot{margin-top:auto; display:grid; gap:10px}
.logout{justify-self:start; background:none; border:0; padding:4px 2px; font:inherit; font-size:.88rem; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.logout:hover{color:var(--fg)}
.logout:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.plan-chip{border:1px dashed var(--line); padding:10px 12px; display:grid; gap:6px; font-size:.85rem}
.plan-chip b{font-family:var(--f-display)}
.profile-link{display:flex; align-items:center; gap:10px; padding:10px; border:var(--b); background:var(--panel); text-decoration:none}
.profile-link:hover,.profile-link[aria-current="page"]{border-color:var(--accent)}
.av{width:38px; height:38px; flex:none; display:grid; place-items:center; background:var(--accent-soft); border:1.5px solid var(--accent); color:var(--accent); font-family:var(--f-display); font-weight:700}
.profile-link span{min-width:0; display:grid}
.profile-link b{font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.profile-link small{color:var(--muted); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.scrim{position:fixed; inset:0; background:var(--scrim); z-index:55}
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; min-height:60px; border-bottom:var(--b); background:var(--bg-2); padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.topbar .logo{padding:0}
.topbar .av{margin-left:auto; text-decoration:none}
@media (min-width:1024px){ .topbar{display:none} }
.icon-btn{width:42px; height:42px; display:grid; place-items:center; border:var(--b); background:transparent; cursor:pointer; color:var(--fg)}
.icon-btn:hover{border-color:var(--accent)}

.main{min-width:0; padding-block:28px 56px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
@media (min-width:768px){ .main{padding-left:max(28px, env(safe-area-inset-left,0px)); padding-right:max(28px, env(safe-area-inset-right,0px))} }
@media (min-width:1280px){ .main{padding-left:40px; padding-right:max(40px, env(safe-area-inset-right,0px))} }
.view{max-width:1240px; display:grid; gap:20px}
.vhead{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.vhead .tile{width:46px; height:46px; display:grid; place-items:center; background:var(--accent-soft); border:1.5px solid var(--accent); color:var(--accent)}
.vhead .tile svg{width:24px; height:24px}
.vhead h1{font-size:1.75rem}
.vhead p{color:var(--muted)}
.vhead .tools{margin-left:auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.card{background:var(--panel); border:var(--b); padding:20px; min-width:0}
.card-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-bottom:16px}
.card-h h2{font-size:1.15rem}
.card-h p{color:var(--muted); font-size:.9rem}
.card.key{box-shadow:6px 6px 0 var(--shadow)}

/* Dashboard */
.kpis{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .kpi.peak{grid-column:1/-1} }
.kpi{border:var(--b); background:var(--panel-2); padding:16px; display:grid; gap:6px}
.kpi.peak{border-color:var(--accent)}
.kpi .v{font-family:var(--f-display); font-size:2.1rem; font-weight:700; line-height:1}
.kpi.peak .v{color:var(--accent)}
.kpi .v small{font-family:var(--f-body); font-size:.85rem; font-weight:400; color:var(--muted); margin-left:6px}
.done-head{display:flex; justify-content:space-between; align-items:center; margin:22px 0 10px}
.done-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); column-gap:40px}
@media (min-width:768px){ .done-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.done-list li{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft)}
.done-list li::before{content:""; width:9px; height:9px; background:var(--accent); flex:none}
.done-list .n{margin-left:auto; font-family:var(--f-display); font-weight:700; color:var(--accent)}
.done-list .bar{flex:0 0 70px; height:6px; background:var(--panel-2); border:1px solid var(--line-soft)}
.done-list .bar i{display:block; height:100%; background:var(--accent); opacity:.7}
.foot-note{margin-top:12px; font-size:.8rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; align-items:center}

.filters{display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:14px}
@media (min-width:768px){ .filters{grid-template-columns:2fr 1fr 1fr 1fr} }
.filters .field label{font-size:.8rem; color:var(--muted)}
.filters .search{grid-column:1/-1}
@media (min-width:768px){ .filters .search{grid-column:auto} }
.tbl-wrap{overflow-x:auto; border:var(--b)}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th{text-align:left; font-family:var(--f-display); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:10px 12px; background:var(--panel-2); border-bottom:var(--b); white-space:nowrap}
td{padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.t{white-space:nowrap; font-variant-numeric:tabular-nums}
td.t small{display:block; color:var(--muted); font-size:.75rem}
.log-foot{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-top:12px; font-size:.88rem; color:var(--muted)}

/* Accounts */
.slots{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .slots{grid-template-columns:minmax(0,1fr) auto; align-items:center} }
.slots .big{font-family:var(--f-display); font-size:2.4rem; font-weight:700; line-height:1}
.slots .big span{color:var(--muted); font-size:1.2rem}
.slots-info{display:grid; gap:10px}
.acc-list{display:grid; gap:12px}
.acc{border:var(--b); background:var(--panel); display:grid; gap:14px; padding:16px; grid-template-columns:minmax(0,1fr) auto; align-items:center}
.acc.offline{opacity:.72}
@media (min-width:1024px){ .acc{grid-template-columns:minmax(200px,1.4fr) repeat(4,minmax(0,1fr)) auto} }
.acc-id{display:flex; gap:12px; align-items:center; min-width:0}
.acc-id div{min-width:0}
.acc-id .name-btn{display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (min-width:1024px){ .acc-id{padding-right:12px} }
.acc-id b{display:block; font-family:var(--f-display); font-size:1.05rem}
.acc-id small{color:var(--muted); font-size:.84rem; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-stats{grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; border-top:1px dashed var(--line); padding-top:12px}
@media (min-width:768px){ .acc-stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1024px){ .acc-stats{display:contents} .acc-stats > div{border:0} .acc-ctl{order:9} }
.stat{display:grid; gap:2px; min-width:0}
.stat .label{font-size:.66rem}
.stat b{font-family:var(--f-display); font-size:1.02rem; font-weight:600}
.acc-ctl{display:flex; align-items:center; gap:10px; justify-self:end}
.acc-ctl .st{font-size:.78rem}
.acc-err{grid-column:1/-1; order:10; color:var(--err); font-size:.85rem}
.empty{border:1.5px dashed var(--line); padding:28px; text-align:center; color:var(--muted)}

/* Map */
.map-grid{display:grid; gap:20px; grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){ .map-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start} }
.scan-top{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-start}
.quota{border:var(--b); background:var(--panel-2); padding:10px 14px; text-align:right}
.quota b{font-family:var(--f-display); font-size:1.15rem}
.quota small{display:block; color:var(--muted); font-size:.78rem}
.scan-form{display:grid; gap:16px}
.finds{font-size:.85rem; color:var(--muted)}
.finds b{color:var(--fg)}
.progress{display:grid; gap:6px}
.canvas-wrap{position:relative; border:var(--b); background:var(--panel-2); aspect-ratio:1/1; max-width:100%}
canvas{display:block; width:100%; height:100%}
.readout{min-height:2.6em; font-size:.88rem; color:var(--muted); margin-top:10px}
.readout b{color:var(--fg)}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:.84rem; color:var(--muted); margin-top:10px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; display:inline-block}
.res-sum{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px}
.res-sum div{border:var(--b); background:var(--panel-2); padding:12px; display:grid; gap:2px}
.res-sum b{font-family:var(--f-display); font-size:1.5rem}
.res-body{display:grid; gap:20px; grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .res-body{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
.recent{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.recent button{width:100%; text-align:left; border:var(--b); background:var(--panel-2); padding:10px 12px; cursor:pointer; display:grid; gap:2px}
.recent button:hover,.recent button[aria-current="true"]{border-color:var(--accent)}
.recent b{font-family:var(--f-display)}
.recent small{color:var(--muted)}

/* Plans */
.sub-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; border:var(--b); background:var(--panel-2); padding:14px 16px}
.sub-row b{font-family:var(--f-display); font-size:1.05rem}
.plans{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .plans{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1280px){ .plans{grid-template-columns:repeat(4,minmax(0,1fr))} }
.plan{position:relative; border:var(--b); background:var(--panel-2); padding:20px; display:flex; flex-direction:column; gap:12px}
.plan.popular{border-color:var(--warn)}
.plan.current{border-color:var(--accent)}
.plan .badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--warn); color:#1B1300; font-family:var(--f-display); font-size:.68rem; font-weight:700; letter-spacing:.1em; padding:2px 10px; white-space:nowrap}
.plan h3{font-size:1.25rem}
.plan .desc{color:var(--muted); font-size:.9rem; min-height:2.8em}
.price{font-family:var(--f-display); font-size:2.2rem; font-weight:700; line-height:1}
.price small{font-family:var(--f-body); font-size:.9rem; color:var(--muted); font-weight:400}
.price s{font-size:1rem; color:var(--muted); font-weight:500; margin-left:6px}
.billed{font-size:.82rem; color:var(--muted)}
.billed em{font-style:normal; color:var(--accent)}
.plan ul{list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:.9rem}
.plan li{display:flex; gap:8px}
.plan li svg{width:16px; height:16px; color:var(--accent); margin-top:3px}
.plan .act{margin-top:auto; display:grid; gap:8px}
.plan .confirm{border:1px dashed var(--accent); padding:10px; font-size:.85rem; display:grid; gap:8px}
.plan .confirm div{display:flex; gap:8px; flex-wrap:wrap}

/* Support */
.sup{display:grid; gap:20px; grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){ .sup{grid-template-columns:minmax(280px,1fr) minmax(0,2fr); align-items:start} }
.tickets{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.tickets button{width:100%; text-align:left; border:var(--b); background:var(--panel-2); padding:12px; cursor:pointer; display:grid; gap:6px}
.tickets button:hover,.tickets button[aria-current="true"]{border-color:var(--accent)}
.tickets .top{display:flex; justify-content:space-between; gap:8px; align-items:center}
.tickets .id{font-family:var(--f-display); font-size:.8rem; color:var(--muted)}
.tickets b{font-weight:600}
.tickets small{color:var(--muted); font-size:.8rem}
.thread{display:grid; gap:12px; margin:16px 0}
.msg{border:var(--b); padding:12px 14px; display:grid; gap:6px; max-width:88%}
.msg.me{justify-self:end; background:var(--accent-soft); border-color:var(--accent)}
.msg.staff{background:var(--panel-2)}
.msg .who{font-size:.8rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.msg .who b{color:var(--fg)}
.msg p{white-space:pre-wrap; overflow-wrap:anywhere}
.form-grid{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .form-grid .full{grid-column:1/-1} }
.form-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* Profile */
.prof{display:grid; gap:20px; grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){ .prof{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} }
.pref{display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.pref:last-child{border-bottom:0}
.pref small{display:block; color:var(--muted); font-size:.82rem}

/* Account detail */
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:.9rem; width:max-content}
.back-link:hover{color:var(--fg)}
.av.lg{width:56px; height:56px; font-size:1.2rem}
.dstats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:var(--b); background:var(--panel)}
@media (min-width:768px){ .dstats{grid-template-columns:repeat(5,minmax(0,1fr))} }
.dstats > div{padding:16px; display:grid; gap:4px; border-right:var(--b); border-bottom:var(--b); min-width:0}
.dstats > div:nth-child(2n){border-right:0}
.dstats > div:last-child{border-bottom:0}
.dstats > .d-shield{grid-column:1/-1}
.dstats small{font-size:.8rem; line-height:1.3}
@media (min-width:768px){ .dstats > .d-shield{grid-column:auto} }
@media (min-width:768px){ .dstats > div{border-bottom:0; border-right:var(--b)} .dstats > div:nth-child(2n){border-right:var(--b)} .dstats > div:last-child{border-right:0} }
.dstats b{font-family:var(--f-display); font-size:1.5rem; line-height:1.1}
.tabs{display:flex; border-bottom:var(--b); gap:4px; overflow-x:auto}
.tabs button{border:1.5px solid transparent; border-bottom:0; background:transparent; padding:10px 18px; cursor:pointer; font-family:var(--f-display); font-weight:600; color:var(--muted); margin-bottom:-1.5px; white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--fg); border-color:var(--line); background:var(--panel); box-shadow:inset 0 3px 0 var(--accent)}
.tgroup{display:grid; gap:0; border:var(--b); background:var(--panel-2)}
.tgroup + .tgroup{margin-top:16px}
.tgroup-h{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; border-bottom:var(--b); background:var(--panel)}
.tgroup-h h3{font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.task{display:grid; gap:12px; padding:14px; border-bottom:1px solid var(--line-soft)}
.task:last-child{border-bottom:0}
.task-top{display:flex; gap:14px; align-items:flex-start; justify-content:space-between}
.task-top b{font-weight:600}
.task-top small{display:block; color:var(--muted); font-size:.84rem}
.task-fields{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .task-fields{grid-template-columns:repeat(2,minmax(0,1fr))} }
.task.off .task-fields{opacity:.45}
.task-fields .field label{font-size:.82rem; color:var(--muted); font-weight:500}
.task-fields .ckrow{display:flex; gap:10px; align-items:center; font-size:.9rem; cursor:pointer; align-self:end; min-height:42px}
.task-fields .ckrow input{width:18px; height:18px; accent-color:var(--accent)}
.savebar{position:sticky; bottom:0; z-index:20; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; border:1.5px solid var(--accent); background:var(--bg-2); padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 0 var(--bg)}
.savebar .acts{display:flex; gap:10px; flex-wrap:wrap}
.chart{width:100%; height:auto; display:block}
.chart .grid line{stroke:var(--line-soft); stroke-width:1}
.chart .axis text{fill:var(--muted); font-family:var(--f-body); font-size:12px}
.chart .area{fill:var(--accent-soft)}
.chart .ln{fill:none; stroke:var(--accent); stroke-width:2.5}
.chart .pt{fill:var(--panel); stroke:var(--accent); stroke-width:2}
.chart .end{fill:var(--accent)}
.chart .end-l{fill:var(--fg); font-family:var(--f-display); font-weight:700; font-size:14px}
.chart-cap{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; font-size:.88rem; color:var(--muted)}
.chart-cap b{color:var(--fg); font-family:var(--f-display)}
.acc-id .name-btn{display:inline-block; color:var(--fg); font-family:var(--f-display); font-size:1.05rem; font-weight:700; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px}
.acc-id .name-btn:hover{text-decoration-color:var(--accent)}

/* Modal */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px}
.modal .scrim{z-index:0}
.dialog{position:relative; z-index:1; width:min(520px,100%); max-height:100%; overflow:auto; background:var(--bg); border:var(--b); box-shadow:8px 8px 0 var(--shadow); padding:24px; display:grid; gap:16px}
@media (max-width:767px){ .modal{padding:0} .dialog{width:100%; height:100%; padding:calc(20px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); box-shadow:none; border:0} }
.dialog-h{display:flex; justify-content:space-between; align-items:center; gap:12px}
.dialog-h h2{font-size:1.35rem}
.note{font-size:.84rem; color:var(--muted); border-left:3px solid var(--accent); padding-left:10px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important}
  .spin{animation-duration:1.4s}
}

/* Conectar base: passos, escolha da base e espera */
.steps-mini{list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap; counter-reset:st}
.steps-mini li{counter-increment:st; font-family:var(--f-display); font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:3px 10px; border:1px solid var(--line)}
.steps-mini li::before{content:counter(st) ". "}
.steps-mini li[aria-current="step"]{color:var(--accent-ink); background:var(--accent); border-color:var(--accent)}
.steps-mini li.done{color:var(--accent); border-color:var(--accent)}
.base-pick{display:grid; gap:8px}
.base-opt{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border:var(--b); background:var(--panel); cursor:pointer; font:inherit; color:inherit}
.base-opt:hover,.base-opt:focus-visible{border-color:var(--accent); outline:none}
.base-opt b{font-family:var(--f-display)}
.base-opt small{color:var(--muted); display:block}
.base-opt .num{white-space:nowrap}
.base-opt[disabled]{opacity:.55; cursor:not-allowed}
.wait-line{display:flex; align-items:center; gap:10px; margin:0}
.acc .relogin{justify-self:start}

/* Página da base: automações validadas */
.live-task{border:var(--b); background:var(--panel); padding:16px; display:grid; gap:12px}
.live-task.blocked{border-color:var(--err)}
.live-task .task-top small{display:block; color:var(--muted); font-size:.86rem; margin-top:2px}
.live-meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.88rem; color:var(--muted)}
.live-meta b{color:var(--fg); font-weight:600}
.rules{margin:0; padding-left:18px; color:var(--muted); font-size:.84rem; display:grid; gap:3px}
.block-box{border:1px solid var(--err); background:var(--err-soft); padding:12px; display:grid; gap:8px; justify-items:start; font-size:.9rem}
.bld-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px}
.bld{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line-soft); background:var(--panel-2); font-size:.9rem}
.bld small{color:var(--muted); display:block}
.soon{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line-soft); font-size:.9rem}
.soon:last-child{border-bottom:0}
.soon small{display:block; color:var(--muted)}
.danger-zone{border-style:dashed}

/* Ícone de informação com observação (passar o mouse ou tocar) */
.tt-title{display:flex; align-items:center; gap:8px; min-width:0}
.info{position:relative; display:inline-flex}
.info-btn{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--muted); background:transparent; color:var(--muted); font:600 .72rem/1 var(--f-display); font-style:italic; cursor:pointer; display:grid; place-items:center; padding:0}
.info-btn:hover,.info-btn:focus-visible,.info.open .info-btn{border-color:var(--accent); color:var(--accent); outline:none}
.info-tip{position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); width:max-content; max-width:min(320px, calc(100vw - 32px)); padding:10px 12px; background:var(--panel); border:var(--b); box-shadow:4px 4px 0 var(--shadow); color:var(--fg); font-size:.84rem; font-weight:400; line-height:1.45; z-index:30; visibility:hidden; opacity:0; transition:opacity .12s}
.info:hover .info-tip,.info-btn:focus-visible + .info-tip,.info.open .info-tip{visibility:visible; opacity:1}
@media (max-width:600px){ .info-tip{left:0; transform:none} }

.live-task .err:empty{display:none}

/* Escudo automático: ordem de uso */
.tt-title .pill{margin-left:4px}
.sh-h{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin:12px 0 6px}
.sh-list{list-style:none; margin:0; padding:0; display:grid; gap:4px; max-width:480px}
.sh-list li{display:grid; grid-template-columns:24px minmax(0,1fr) auto auto auto; align-items:center; gap:8px; padding:4px 0; border-bottom:var(--b)}
.sh-list li:last-child{border-bottom:0}
.sh-n{color:var(--muted, #6b7a8c); font-size:.85rem}
.sh-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sh-stock{min-width:32px; text-align:right; font-size:.9rem}
.sh-mv{min-width:34px; padding-left:0; padding-right:0}
.tt-title{flex-wrap:wrap; row-gap:6px}
.tt-title > b{white-space:nowrap}
.paused-box{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; font-size:.86rem; color:var(--muted)}
.tf-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px}
.tf-row label{display:grid; gap:4px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.tf-row select{min-width:180px; text-transform:none; letter-spacing:0}
.tf-row select{padding:6px 8px; background:var(--panel); border:var(--b)}
.tf-row input{width:180px; padding:6px 8px; background:var(--panel); border:var(--b); color:var(--fg); font:inherit; text-transform:none; letter-spacing:0}
.tt-tools{display:flex; align-items:center; gap:10px; flex:none}
.exp-btn{display:inline-grid; place-items:center; width:34px; height:34px; border:var(--b); background:transparent; color:var(--muted); cursor:pointer}
.exp-btn:hover,.exp-btn:focus-visible{color:var(--fg)}
.exp-btn svg{transition:transform .15s}
.exp-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.cfg-box[hidden]{display:none}
.q-row{display:flex; flex-wrap:wrap; gap:16px}
.q-opt{display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.q-opt input{width:16px; height:16px; accent-color:var(--accent)}

/* Resumo das últimas 24 h (Accounts e página da conta) */
.acc-sum{margin-top:12px; padding-top:12px; border-top:var(--b)}
.card .acc-sum{margin-top:0; padding-top:0; border-top:0}
.acc-sum-h{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.86rem; color:var(--muted)}
.acc-sum-h b{color:var(--fg)}
.acc-sum-h .up{color:var(--accent)}
.sum-chips{list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px}
.sum-chips[hidden]{display:none}
.sum-chip{padding:7px 10px; border:var(--b); background:var(--panel); font-size:.86rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sum-chip b{color:var(--fg); margin-right:2px}
.acc > .acc-sum{grid-column:1/-1; order:10}

/* Marca LastBotfire */
.lg-a{color:var(--accent)}

/* Celular: cartão da base com nome visível e controles na linha de baixo */
.acc-id .av{flex-shrink:0}
@media (max-width:639px){
  .acc{grid-template-columns:minmax(0,1fr)}
  .acc-ctl{justify-self:stretch; flex-wrap:wrap}
  .acc-ctl .switch{margin-left:auto}
  /* Dicas (i) viram um quadro fixo embaixo da tela, sem criar rolagem lateral */
  .info{position:static}
  .info-tip{position:fixed; left:16px; right:16px; top:auto; bottom:16px; width:auto; max-width:none; transform:none}
  /* Log de automações em cartões */
  #log-body tr{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"t r" "a a" "c c" "d d"; gap:2px 12px; padding:10px 12px; border-bottom:var(--b)}
  #log-body td{padding:0; border:0}
  #log-body td:nth-child(1){grid-area:t} #log-body td:nth-child(2){grid-area:c; color:var(--muted); font-size:.85rem}
  #log-body td:nth-child(3){grid-area:a; font-weight:600} #log-body td:nth-child(4){grid-area:r; justify-self:end}
  #log-body td:nth-child(5){grid-area:d; color:var(--muted); font-size:.85rem}
  #log-body td[colspan]{grid-column:1/-1; grid-area:auto}
  .tbl-wrap thead{display:none}
  .tbl-wrap table{min-width:0; width:100%}
}

/* Planos: pagamento */
.plan .acts{display:grid; gap:8px; margin-top:auto}
.pix-qr{display:grid; place-items:center; background:#fff; padding:12px; border:var(--b)}
.pix-qr img{width:220px; height:220px; image-rendering:pixelated}
.pix-copy{display:flex; gap:8px} .pix-copy .ctl{flex:1; min-width:0; font-size:.8rem}
.pay-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mp-field{height:44px; padding:8px 12px}
.notice{border:1px dashed var(--warn); background:var(--warn-soft); padding:12px 14px; font-size:.9rem; margin-bottom:16px}