/* ===== Mockup da plataforma Academia do Cliente (fiel ao app real; dados fictícios) ===== */
.acx{
  --bg:#0a0c15;--card:hsl(227 32% 9%);--fg:hsl(227 15% 95%);--muted:hsl(227 20% 14%);--mfg:hsl(227 12% 72%);
  --border:hsl(227 20% 16%);--side:hsl(227 34% 9%);--sacc:hsl(227 25% 12%);
  --pink:#C52368;--pink-soft:#E4568F;--orange:#F88527;--ok:hsl(152 55% 42%);--amber:#C78500;
  --c1:hsl(213 77% 56%);--c2:hsl(17 70% 50%);
  font-family:'Geist Variable','Geist',system-ui,sans-serif;color:var(--fg);background:var(--bg);text-align:left;line-height:1.4;-webkit-font-smoothing:antialiased;
  position:relative;overflow:hidden}
.acx *{box-sizing:border-box}
.acx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.acx .ico{width:1.43em;height:1.43em;flex:0 0 auto}
.acx .ico.sm{width:1.15em;height:1.15em}
.acx .tnum{font-variant-numeric:tabular-nums}
.acx .mfg{color:var(--mfg)}

/* superfície dos cards (igual ao .dash-surface do app) */
.acx .surf{position:relative;border-radius:.75rem;background:linear-gradient(180deg,rgb(255 255 255/.03),transparent 45%),hsl(227 32% 9%/.8);
  box-shadow:inset 0 0 0 1px hsl(227 15% 95%/.06),inset 0 1px 0 0 rgb(255 255 255/.05);transition:background .15s}
.acx .surf:hover::after,.acx .surf.acx-hl::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,#0182C7,#723A7E,#F88527);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.acx .surf.acx-hl{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,#0182C7 14%,transparent),transparent 55%),hsl(227 32% 9%/.8)}
.acx .sec-t{font-size:1em;font-weight:600}
.acx .sec-d{font-size:.857em;color:var(--mfg)}
.acx .card-h{padding:0 .3em;margin-bottom:.6em}
.acx .card-h h3{font-size:1em;font-weight:500}
.acx .card-h p{font-size:.857em;color:var(--mfg)}
.acx .rise{animation:acxRise .55s cubic-bezier(.2,0,0,1) backwards;animation-delay:var(--d,0ms)}
@keyframes acxRise{from{opacity:0;transform:translateY(10px)}}

/* ---------- layout do app ---------- */
.acx--full{width:100%;height:100%;display:flex;border-radius:16px;font-size:14px}
.acx-side{width:256px;flex:0 0 256px;background:var(--side);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:30;transition:transform .25s ease}
.acx-brand{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 20px}
.acx-brand>span{display:flex;align-items:center;gap:12px;min-width:0}
.acx-brand img{width:32px;height:32px}
.acx-brand b{font-weight:500;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.acx-brand .collapse{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:hsl(227 15% 90%/.7)}
.acx-nav{flex:1;overflow:auto;padding:8px 12px}
.acx-grp{padding:0 12px 8px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:hsl(227 15% 90%/.4)}
.acx-grp+*{margin-bottom:20px}
.acx-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:500;color:hsl(227 15% 90%/.65);transition:background .15s,color .15s}
.acx-row:hover{background:rgb(255 255 255/.04);color:hsl(227 15% 90%)}
.acx-row.on{background:linear-gradient(90deg,rgba(197,35,104,.18),rgba(197,35,104,.02));color:hsl(227 15% 90%)}
.acx-row.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 9px 9px 0;background:var(--pink)}
.acx-row.on .ico,.acx-row.has .ico:first-child{color:var(--pink-soft)}
.acx-row.has{color:hsl(227 15% 90%)}
.acx-row .chev{margin-left:auto;width:16px;height:16px;color:hsl(227 15% 90%/.4)}
.acx-row.static{cursor:default}
.acx-sub{margin:4px 0 4px 22px;padding-left:12px;border-left:1px solid rgb(255 255 255/.08);display:grid;gap:2px}
.acx-sub .acx-row{height:36px;font-size:13px;color:hsl(227 15% 90%/.6)}
.acx-sub .acx-row.on{color:hsl(227 15% 90%)}
.acx-sub .acx-row.on::before{left:-13px;top:6px;bottom:6px;border-radius:9px}
.acx-user{border-top:1px solid rgb(255 255 255/.06);padding:12px}
.acx-user>div{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px}
.acx-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 auto;background:rgb(255 255 255/.08)}
.acx-av.grad{background:linear-gradient(135deg,#723A7E,#C52368 60%,#F88527);color:#fff}
.acx-user b{display:block;font-size:14px;font-weight:500}
.acx-user small{display:block;font-size:12px;color:hsl(227 15% 90%/.55)}
.acx-user .ico{margin-left:auto;width:16px;height:16px;color:hsl(227 15% 90%/.4)}

.acx-main{flex:1;min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;background:var(--bg)}
.acx-head{height:64px;flex:0 0 64px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--border)}
.acx-head h1{font-size:16px;font-weight:500}
.acx-head .menu{display:none;width:36px;height:36px;border-radius:8px;place-items:center}
.acx-head .tag{margin-left:auto;font-size:12px;color:var(--mfg);border:1px solid var(--border);border-radius:99px;padding:4px 10px;white-space:nowrap}
.acx-head .cta{background:var(--pink);color:#fff;font-weight:500;font-size:13px;border-radius:8px;padding:8px 14px;white-space:nowrap;text-decoration:none;transition:filter .2s}
.acx-head .cta:hover{filter:brightness(1.1)}
.acx-head .x{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--mfg);transition:background .2s,color .2s}
.acx-head .x:hover{background:rgb(255 255 255/.08);color:var(--fg)}
.acx-body{flex:1;min-height:0;overflow-y:auto;padding:24px;scrollbar-width:thin;scrollbar-color:rgb(255 255 255/.16) transparent}
.acx-view{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.acx-view[hidden]{display:none}
.acx-hello{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:-20px}

/* ---------- ao vivo ---------- */
.acx-live{padding:20px;display:flex;flex-direction:column;gap:16px}
.acx-counters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 40px}
.acx-counters>div{display:flex;align-items:flex-end;gap:24px}
.acx-lbl{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--mfg)}
.acx-lbl small{display:block;font-size:11px;font-weight:400;text-transform:none;letter-spacing:0}
.acx-cnt span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mfg)}
.acx-cnt i{width:8px;height:8px;border-radius:50%}
.acx-cnt b{display:block;font-size:30px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.acx-cnt b.bump{animation:acxBump .5s ease}
@keyframes acxBump{40%{color:var(--pink-soft)}}
.acx-status{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mfg)}
.acx-ping{position:relative;display:inline-block;width:8px;height:8px}
.acx-ping::before,.acx-ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok)}
.acx-ping::before{animation:acxPing 1.2s cubic-bezier(0,0,.2,1) infinite;opacity:.6}
@keyframes acxPing{75%,100%{transform:scale(2.2);opacity:0}}
.acx-chart{position:relative;height:250px;padding-left:28px;padding-bottom:20px}
.acx-chart svg{display:block;width:100%;height:100%;overflow:visible}
.acx-chart .yt{position:absolute;left:0;font-size:11px;color:var(--mfg);transform:translateY(-50%)}
.acx-chart .xt{position:absolute;bottom:0;font-size:11px;color:var(--mfg);transform:translateX(-50%);white-space:nowrap}
.acx-chart path{vector-effect:non-scaling-stroke}

/* ---------- conversas de hoje ---------- */
.acx-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;margin-bottom:12px}
.acx-pick{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--border);background:rgb(255 255 255/.02);font-size:13px;font-weight:500}
.acx-pick .ico{width:16px;height:16px}
.acx-chip{border:1px solid var(--border);border-radius:99px;padding:4px 12px;color:var(--mfg);transition:color .2s,background .2s,border-color .2s}
.acx-chip:hover{color:var(--fg)}
.acx-chip.on{border-color:rgb(197 35 104/.6);background:rgb(197 35 104/.15);color:var(--fg)}
.acx-convs{display:grid;gap:6px;max-height:448px;overflow:auto;scrollbar-width:none;padding-bottom:12px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent)}
.acx-conv{position:relative;display:flex;align-items:center;gap:12px;padding:10px 8px 10px 16px;border-radius:12px;border:1px solid transparent;background:hsl(227 20% 14%/.35);cursor:pointer;transition:border-color .15s;animation:acxRise .4s ease backwards}
.acx-conv:hover{border-color:rgb(255 255 255/.1)}
.acx-conv::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 9px 9px 0;background:var(--bar,transparent)}
.acx-conv .n{flex:1;min-width:0}
.acx-conv .n b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acx-conv .n small{display:block;font-size:12px;color:var(--mfg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acx-conv .w{font-size:14px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.acx-conv .more{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--mfg)}
.acx-conv .more .ico{width:16px;height:16px}
.acx-conv.new{animation:acxRise .4s ease backwards,acxFlash 1.6s ease}
@keyframes acxFlash{0%,30%{border-color:rgb(197 35 104/.6)}}

/* ---------- instâncias ---------- */
.acx-inst{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.acx-inst .surf{padding:16px;display:flex;flex-direction:column;gap:12px}
.acx-inst b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acx-inst small{display:block;font-size:12px;color:var(--mfg)}
.acx-inst .st{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
.acx-inst .st i{width:8px;height:8px;border-radius:50%;background:currentColor}
.acx-inst .st.open{color:var(--ok)}
.acx-inst .st.connecting{color:var(--amber)}

/* ---------- histórico ---------- */
.acx-filters{position:sticky;top:-24px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-8px -24px -16px;padding:8px 24px;background:rgb(10 12 21/.85);backdrop-filter:blur(4px)}
.acx-range{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--border);font-size:13px;font-weight:500}
.acx-range .ico{width:16px;height:16px;color:var(--mfg)}
.acx-preset{height:32px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:500;transition:background .15s}
.acx-preset:hover{background:rgb(255 255 255/.05)}
.acx-preset.on{background:var(--muted)}
.acx-hero{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:16px}
.acx-hero .surf{padding:20px;display:flex;flex-direction:column}
.acx-hero .tall{min-height:352px;justify-content:space-between}
.acx-hero .stack{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.acx-k{font-size:14px;color:var(--mfg)}
.acx-big{font-size:60px;font-weight:600;letter-spacing:-.03em;line-height:1}
.acx-mid{font-size:36px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.acx-delta{display:inline-flex;align-items:center;gap:2px;border-radius:6px;padding:2px 6px;font-size:12px;font-weight:500}
.acx-delta .ico{width:12px;height:12px}
.acx-delta.good{background:hsl(152 55% 42%/.1);color:var(--ok)}
.acx-delta.bad{background:hsl(334 70% 45%/.1);color:hsl(334 70% 55%)}
.acx-split{height:10px;border-radius:99px;overflow:hidden;display:flex;background:hsl(227 20% 14%/.6);margin-top:14px}
.acx-split i{display:block;height:100%}
.acx-trio{display:flex;gap:32px}
.acx-trio p{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.acx-trio span{font-size:14px;color:var(--mfg)}
.acx-trio span i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.acx-insight{border-top:1px solid hsl(227 20% 16%/.6);padding-top:12px;font-size:14px;color:var(--mfg)}
.acx-foot{font-size:12px;color:var(--mfg)}
.acx-spark{width:100%;flex:1;min-height:90px;margin:4px 0}
.acx-spark path{vector-effect:non-scaling-stroke}
.acx-trend{padding:20px}
.acx-trend .acx-chart{height:300px}
.acx-legend{display:flex;justify-content:center;gap:16px;font-size:13px;margin-top:6px}
.acx-legend span{display:flex;align-items:center;gap:6px}
.acx-legend i{width:12px;height:2px;border-radius:2px}
.acx-heat{padding:20px;display:flex;flex-direction:column;gap:8px}
.acx-heat .hx,.acx-heat .hr{display:flex;gap:8px}
.acx-heat .hx span,.acx-heat .hr>b{width:36px;flex:0 0 36px}
.acx-heat .hx div{flex:1;display:flex;font-size:11px;color:var(--mfg)}
.acx-heat .hx div span{flex:1;text-align:center;width:auto}
.acx-heat .hr>b{font-size:12px;font-weight:400;color:var(--mfg);display:flex;align-items:center}
.acx-heat .cells{flex:1;display:flex;gap:4px}
.acx-heat .cells span{flex:1;height:30px;border-radius:4px;transition:transform .15s;animation:acxRise .5s ease backwards}
.acx-heat .cells span:hover{transform:scale(1.12);position:relative;z-index:2}
.acx-heat .hl{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:20px;font-size:13px;color:var(--mfg)}
.acx-heat .hl div{display:flex;align-items:center;gap:8px;font-size:11px}
.acx-heat .hl div i{width:112px;height:8px;border-radius:99px}
.acx-tbl{padding:20px}
.acx-tbl table{width:100%;border-collapse:collapse;font-size:14px}
.acx-tbl th{text-align:right;padding:0 8px 10px;font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--mfg);white-space:nowrap}
.acx-tbl th:first-child{text-align:left}
.acx-tbl th button{display:inline-flex;align-items:center;gap:4px;flex-direction:row-reverse;text-transform:inherit;letter-spacing:inherit;font-size:inherit;font-weight:inherit;color:inherit}
.acx-tbl th button.on{color:var(--fg)}
.acx-tbl th .ico{width:12px;height:12px}
.acx-tbl td{padding:9px 8px;border-top:1px solid var(--border);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mfg)}
.acx-tbl td:first-child{text-align:left;color:var(--fg);font-weight:500}
.acx-tbl tr{transition:background .15s}
.acx-tbl tbody tr:hover{background:hsl(227 20% 14%/.5)}
.acx-2{display:grid;grid-template-columns:1fr;gap:32px}
.acx--full .acx-body{container-type:inline-size}
@container (min-width:1150px){.acx-2{grid-template-columns:1fr 1.2fr;gap:16px}}
.acx-2 .acx-cloud{min-height:260px}
.acx-cloud{padding:20px;min-height:320px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:4px 14px}
.acx-cloud span{font-weight:600;line-height:1;transition:transform .26s cubic-bezier(.34,1.56,.64,1),opacity .2s;cursor:default}
.acx-cloud span.v{writing-mode:vertical-rl}
.acx-cloud:hover span{opacity:.35}
.acx-cloud span:hover{opacity:1;transform:scale(1.18)}
.acx-mot{padding:20px}
.acx-mot .ctl{display:flex;gap:6px;margin-bottom:12px}
.acx-mot .ctl button{height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--border);font-size:12.5px;font-weight:500}
.acx-mot .ctl button.on{background:var(--muted);border-color:transparent}
.acx-mot .g{display:grid;grid-template-columns:84px 52px 108px 128px minmax(0,1fr);gap:12px;padding:8px;border-radius:8px;font-size:13px}
.acx-mot .g.h{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--mfg)}
.acx-mot .g+.g:not(.h){border-top:1px solid hsl(227 20% 16%/.5)}
.acx-mot .g:not(.h){cursor:pointer;transition:background .15s}
.acx-mot .g:not(.h):hover{background:hsl(227 20% 14%/.4)}
.acx-mot .g small{display:block;font-size:12px;opacity:.7}
.acx-mot .pill{display:inline-block;border-radius:99px;background:rgb(197 35 104/.15);color:var(--pink-soft);font-size:12px;font-weight:500;padding:2px 10px}
.acx-mot .rs{color:hsl(227 15% 95%/.9);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acx-top{padding:20px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.acx-top .c{border-radius:12px;padding:14px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--ring)}
.acx-top .c header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.acx-top .c header i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;font-style:normal;font-size:12px}
.acx-top .c header em{font-style:normal;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--acc);color:#fff}
.acx-top .c b{display:block;font-size:14px;font-weight:600}
.acx-top .c strong{display:block;font-size:28px;font-weight:600;margin:4px 0 6px}
.acx-top .c small{display:block;font-size:11.5px;color:var(--mfg)}

/* ---------- auditoria ---------- */
.acx-aud{display:flex;gap:16px;height:calc(100% + 0px);min-height:520px}
.acx-view[data-view=auditoria]{height:100%}
.acx-list{width:340px;flex:0 0 340px;display:flex;flex-direction:column;min-height:0}
.acx-list .tg{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:12px;background:rgb(255 255 255/.05);padding:4px;margin:12px 12px 8px}
.acx-list .tg button{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:500;color:var(--mfg)}
.acx-list .tg button.on{background:rgb(197 35 104/.2);color:var(--fg)}
.acx-list .tg .ico{width:16px;height:16px}
.acx-search{position:relative;margin:0 12px 8px}
.acx-search .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mfg)}
.acx-search input{width:100%;height:36px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--fg);font:inherit;font-size:14px;padding:0 12px 0 32px;outline:none}
.acx-search input:focus{border-color:hsl(334 70% 45%/.6)}
.acx-list .acx-pick{margin:0 12px 8px;align-self:flex-start}
.acx-list .cnt{display:flex;justify-content:space-between;padding:0 16px 4px;font-size:12px;color:var(--mfg)}
.acx-cl{flex:1;overflow:auto;padding:0 8px 8px;scrollbar-width:none;min-height:0}
.acx-ci{display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 12px;border-radius:12px;text-align:left;transition:background .15s}
.acx-ci:hover{background:rgb(255 255 255/.05)}
.acx-ci.on{background:rgb(197 35 104/.15)}
.acx-ci .acx-av{margin-top:2px}
.acx-ci .t{flex:1;min-width:0}
.acx-ci .t span{display:flex;justify-content:space-between;gap:8px}
.acx-ci .t b{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acx-ci .t time{font-size:12px;color:var(--mfg);font-variant-numeric:tabular-nums}
.acx-ci .t small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--mfg)}
.acx-ci .t small em{font-style:normal;color:hsl(227 15% 95%/.7)}
.acx-chat{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.acx-chat .ch{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.acx-chat .ch .acx-av{width:40px;height:40px;font-size:14px}
.acx-chat .ch div{flex:1;min-width:0}
.acx-chat .ch b{display:block;font-size:16px;font-weight:500}
.acx-chat .ch small{font-size:12px;color:var(--mfg)}
.acx-chat .ch button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--mfg)}
.acx-chat .ch button .ico{width:18px;height:18px}
.acx-msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none;min-height:0}
.acx-day{align-self:center;border-radius:99px;background:rgb(255 255 255/.06);padding:2px 12px;font-size:12px;color:var(--mfg);margin:8px 0}
.acx-b{max-width:78%;padding:8px 14px;border-radius:16px;font-size:14px;white-space:pre-wrap;word-break:break-word;align-self:flex-start;background:var(--muted);border-bottom-left-radius:6px;animation:acxRise .35s ease backwards}
.acx-b.me{align-self:flex-end;background:var(--pink);color:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:6px}
.acx-b time{display:block;text-align:right;font-size:11px;margin-top:2px;color:var(--mfg);font-variant-numeric:tabular-nums}
.acx-b.me time{color:rgb(255 255 255/.7)}
.acx-ro{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);padding:10px 16px;font-size:12px;color:var(--mfg)}
.acx-ro .ico{width:14px;height:14px}

/* ---------- tela pequena dentro do tablet ---------- */
.screen{cursor:pointer;container-type:size;outline:none;background:#0a0c15;transition:box-shadow .3s}
.screen:focus-visible{box-shadow:0 0 0 3px var(--peach)}
.acx--mini{position:absolute;inset:0;font-size:3.05cqw;display:flex;flex-direction:column}
.acx--mini .acx-head{height:12cqw;flex-basis:12cqw;padding:0 4.5cqw;gap:3cqw}
.acx--mini .acx-head img{width:7cqw;height:7cqw}
.acx--mini .acx-head h1{font-size:1.1em}
.acx--mini .acx-body{padding:4.5cqw;overflow:hidden}
.acx--mini .acx-view{gap:5cqw}
.acx--mini .acx-hello{font-size:1.6em;margin-bottom:-3cqw}
.acx--mini .acx-live{padding:3.5cqw;gap:3cqw}
.acx--mini .acx-counters{gap:2cqw 6cqw}
.acx--mini .acx-counters>div{gap:3.5cqw}
.acx--mini .acx-lbl{font-size:.8em}.acx--mini .acx-lbl small{font-size:.75em}
.acx--mini .acx-cnt span{font-size:.8em;gap:1.2cqw}
.acx--mini .acx-cnt i{width:1.8cqw;height:1.8cqw}
.acx--mini .acx-cnt b{font-size:1.9em}
.acx--mini .acx-status{display:none}
.acx--mini .acx-chart{height:38cqw;padding-left:5cqw;padding-bottom:4cqw}
.acx--mini .acx-chart .yt,.acx--mini .acx-chart .xt{font-size:.7em}
.acx--mini .card-h{margin-bottom:2cqw}
.acx--mini .acx-chips,.acx--mini .card-h p{display:none}
.acx--mini .acx-convs{gap:1.6cqw;max-height:none;-webkit-mask-image:none;mask-image:none}
.acx--mini .acx-conv{padding:2.2cqw 2cqw 2.2cqw 3.5cqw;gap:2.6cqw;border-radius:2.6cqw}
.acx--mini .acx-conv .acx-av{width:8cqw;height:8cqw;font-size:.8em}
.acx--mini .acx-conv .n b{font-size:.95em}.acx--mini .acx-conv .n small{font-size:.78em}
.acx--mini .acx-conv .w{font-size:.82em}
.acx--mini .acx-conv .more{display:none}
.screen__hint{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:3;font:600 12px 'Outfit',sans-serif;color:#fff;background:rgba(197,35,104,.92);padding:.6em 1.2em;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.screen:hover .screen__hint,.screen:focus-visible .screen__hint{opacity:1;transform:translate(-50%,-4px)}
@media (hover:none){.screen__hint{opacity:1}}
.screen::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 40%);pointer-events:none}

/* ---------- modal ---------- */
.demo{border:0;padding:0;background:transparent;width:min(1320px,96vw);height:min(840px,92vh);max-width:none;max-height:none;margin:auto;overflow:visible}
.demo::backdrop{background:rgba(5,6,12,.78);backdrop-filter:blur(5px)}
.demo[open]{animation:demoPop .4s cubic-bezier(.2,.8,.2,1)}
@keyframes demoPop{from{opacity:0;transform:translateY(18px) scale(.97)}}
.demo .acx--full{box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgb(255 255 255/.06)}
.acx-scrim{display:none}

@media (max-width:1100px){.acx-hero{grid-template-columns:1fr 1fr}.acx-hero .stack{grid-column:span 2;grid-template-rows:none;grid-template-columns:1fr 1fr}.acx-inst,.acx-top{grid-template-columns:repeat(2,minmax(0,1fr))}.acx-2{grid-template-columns:1fr}}
@media (max-width:860px){
  .demo{width:100%;height:100%;max-width:100%;max-height:100%;margin:0;inset:0}
  .acx--full{border-radius:0}
  .acx-side{position:absolute;left:0;top:0;bottom:0;transform:translateX(-100%)}
  .acx-side.open{transform:none;box-shadow:20px 0 40px rgba(0,0,0,.5)}
  .acx-scrim.open{display:block;position:absolute;inset:0;z-index:25;background:rgba(0,0,0,.5)}
  .acx-head{padding:0 12px}
  .acx-head .menu{display:grid}
  .acx-head .tag{display:none}
  .acx-head .cta{margin-left:auto;padding:7px 10px;font-size:12px}
  .acx-body{padding:16px}
  .acx-filters{margin:-8px -16px -16px;padding:8px 16px;top:-16px}
  .acx-hero,.acx-hero .stack{grid-template-columns:1fr}.acx-hero .stack{grid-column:auto}
  .acx-big{font-size:44px}
  .acx-inst,.acx-top{grid-template-columns:1fr}
  .acx-tbl{overflow-x:auto}
  .acx-mot .g{grid-template-columns:52px 108px minmax(0,1fr)}.acx-mot .g>:nth-child(1),.acx-mot .g>:nth-child(4){display:none}
  .acx-list{width:100%;flex-basis:auto}
  .acx-aud{flex-direction:column;height:auto}
  .acx-list{max-height:320px}
  .acx-chat{min-height:460px}
  .acx-counters>div{gap:16px}
  .acx-cnt b{font-size:24px}
  .acx-conv .w{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.acx *{animation:none!important}}

/* ---------- tour guiado ---------- */
.acx-head .tourbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--border);font-size:13px;font-weight:500;white-space:nowrap;transition:background .2s}
.acx-head .tourbtn:hover{background:rgb(255 255 255/.06)}
.acx-head .tourbtn .ico{width:16px;height:16px;color:var(--pink-soft)}
.acx-tour{position:absolute;inset:0;z-index:40}
.acx-tour[hidden]{display:none}
.acx-spot{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(5,6,12,.72),0 0 0 2px #E4568F,0 0 30px 4px rgba(228,86,143,.35);transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.acx-tip{position:absolute;width:min(360px,calc(100% - 32px));background:#141727;border:1px solid hsl(227 20% 22%);border-radius:14px;padding:16px 16px 14px;box-shadow:0 24px 60px -12px rgba(0,0,0,.8);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s,left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
.acx-tip.in{opacity:1;transform:none}
.acx-tip small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-soft);margin-bottom:6px}
.acx-tip h4{font-size:17px;font-weight:600;margin-bottom:6px}
.acx-tip p{font-size:14px;color:var(--mfg);line-height:1.45}
.acx-tip .acts{display:flex;align-items:center;gap:8px;margin-top:14px}
.acx-tip .dots{display:flex;gap:5px;margin-right:auto}
.acx-tip .dots i{width:6px;height:6px;border-radius:99px;background:rgb(255 255 255/.2);transition:width .3s,background .3s}
.acx-tip .dots i.on{width:18px;background:var(--pink)}
.acx-tip .skip{font-size:13px;color:var(--mfg);padding:8px 6px}
.acx-tip .skip:hover{color:var(--fg)}
.acx-tip .next{background:var(--pink);color:#fff;font-size:13px;font-weight:500;border-radius:8px;padding:8px 14px;transition:filter .2s}
.acx-tip .next:hover{filter:brightness(1.1)}
@media (max-width:860px){.acx-head .tourbtn{display:none}}
.acx-convs{grid-template-columns:minmax(0,1fr)}