/* Highend Analytics · representações do painel para a página de aplicação v2.
   Visual baseado no painel real, com dados, funis, criativos e pessoas ilustrativos. */

.hd-root{
  --hd-bg:#070C16;--hd-side:#08101D;--hd-card:#0C1524;--hd-card2:#0F1A2D;--hd-card3:#13213A;
  --hd-line:rgba(150,180,225,.10);--hd-line2:rgba(150,180,225,.17);
  --hd-tx:#E8ECF4;--hd-tx2:#B4C0D4;--hd-mut:#74849E;--hd-mut2:#53627A;
  --hd-blue:#3BA0FF;--hd-sky:#62C0EE;--hd-green:#58D417;--hd-red:#FC7148;--hd-amber:#FFC30F;
  --hd-purple:#A78BFA;--hd-cream:#D9C8B7;
  --hd-ui:'Plus Jakarta Sans',system-ui,sans-serif;--hd-mono:'JetBrains Mono',ui-monospace,monospace;
  --hd-disp:'Funnel Display','Plus Jakarta Sans',sans-serif;
  display:block;font-family:var(--hd-ui);color:var(--hd-tx);-webkit-font-smoothing:antialiased;text-align:left;
}
.hd-root *{box-sizing:border-box}
.hd-root svg{display:block}
.hd-ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- app desktop (viewport + câmera) ---------- */
hd-app{position:relative}
.hd-vp{position:relative;overflow:hidden;border-radius:16px;background:var(--hd-bg);border:1px solid var(--hd-line2);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 50px 140px rgba(1,34,75,.55),0 0 90px rgba(23,150,212,.12);isolation:isolate}
.hd-vp::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:6;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 18%);mix-blend-mode:screen}
.hd-cv{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;
  transition:transform 1.05s cubic-bezier(.65,0,.25,1)}
.hd-cv.hd-instant,.hd-cc.hd-instant{transition:none}
.hd-vp.is-bare{border:0;border-radius:0;box-shadow:none}
.hd-vp.is-bare::after{display:none}
.hd-body{transition:opacity .45s ease,transform .45s ease}
.hd-body.is-swap{opacity:0;transform:translateY(8px)}
.hd-ni{transition:background .6s ease,border-color .6s ease,color .6s ease}
.hd-ni .hd-ic{transition:color .6s ease}
/* moldura do hero: janela com fade na base */
.hd-win{position:relative;background:#0B1A30;border:1px solid rgba(150,180,225,.12);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -30px 120px rgba(23,150,212,.14);overflow:hidden}
.hd-win-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:#06101F;border-bottom:1px solid rgba(150,180,225,.08);flex-wrap:wrap}
.hd-win-id{display:flex;align-items:center;gap:10px;min-width:0}
.hd-win-id img{height:18px;width:auto}
.hd-win-id b{font:600 13px var(--hd-disp);color:#D9C8B7;white-space:nowrap}
.hd-win-id i{font:500 12px var(--hd-ui);font-style:normal;color:#8090AC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-win-r{display:flex;gap:6px;align-items:center;font:600 11px var(--hd-ui)}
.hd-win-r > span{color:#8090AC;padding:4px 10px;border-radius:4px;white-space:nowrap;transition:background .6s ease,color .6s ease}
.hd-win-r > span.is-on{background:rgba(150,180,225,.12);color:#D9C8B7}
.hd-win-r > .hd-wlive{display:inline-flex;align-items:center;gap:6px;background:rgba(88,212,23,.12);color:#58D417}
@media (max-width:640px){.hd-win-r > span[data-k]{display:none}.hd-win-id i{display:none}}
.hd-shell{position:relative;display:flex;width:100%;height:100%;background:
  radial-gradient(900px 420px at 62% -8%,rgba(23,150,212,.16),rgba(23,150,212,0) 70%),
  radial-gradient(700px 360px at 100% 100%,rgba(88,212,23,.05),rgba(88,212,23,0) 70%),var(--hd-bg)}
.hd-side{flex:none;width:232px;display:flex;flex-direction:column;background:linear-gradient(180deg,#09111F,#070D18);border-right:1px solid var(--hd-line)}
.hd-side.is-compact{width:62px;align-items:center}
.hd-side-hd{display:flex;align-items:center;gap:11px;padding:18px 16px 16px;border-bottom:1px solid var(--hd-line)}
.hd-side.is-compact .hd-side-hd{padding:16px 0;justify-content:center;width:100%}
.hd-av{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font:700 12px var(--hd-ui);color:var(--hd-tx2);
  background:linear-gradient(135deg,#1A2B46,#0E1828);border:1px solid var(--hd-line2)}
.hd-av img{width:18px;height:18px}
.hd-side-hd b{display:block;font:600 14px var(--hd-ui);color:var(--hd-tx)}
.hd-side-hd small{display:block;font:500 11px var(--hd-ui);color:var(--hd-mut)}
.hd-side-sec{padding:14px 12px 4px;font:700 10px var(--hd-ui);letter-spacing:.14em;color:var(--hd-mut2)}
.hd-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.hd-side.is-compact .hd-nav{padding:0 8px;gap:4px}
.hd-ni{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;font:500 12.5px var(--hd-ui);color:#93A2BA;white-space:nowrap;border:1px solid transparent}
.hd-ni .hd-ic{font-size:15px;color:#7C8CA6}
.hd-ni.is-on{background:linear-gradient(90deg,rgba(23,150,212,.16),rgba(23,150,212,.04));border-color:rgba(98,192,238,.28);color:var(--hd-tx)}
.hd-ni.is-on .hd-ic{color:var(--hd-sky)}
.hd-side.is-compact .hd-ni{width:42px;height:38px;padding:0;justify-content:center}
.hd-side.is-compact .hd-ni span{display:none}
.hd-side-ft{margin-top:auto;padding:12px 10px;border-top:1px solid var(--hd-line);display:flex;flex-direction:column;gap:10px}
.hd-ver{text-align:center;font:500 10px var(--hd-ui);color:var(--hd-mut2)}
.hd-ft-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.hd-ft-btns span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-radius:8px;border:1px solid var(--hd-line);font:500 9px var(--hd-ui);color:var(--hd-mut)}
.hd-ft-btns span .hd-ic{font-size:14px}
.hd-ft-btns span:last-child{color:var(--hd-red)}

.hd-main{flex:1;min-width:0;display:flex;flex-direction:column}
.hd-top{flex:none;display:flex;align-items:flex-end;gap:10px;padding:12px 22px 12px;border-bottom:1px solid var(--hd-line);background:rgba(7,12,22,.6)}
.hd-flt{display:flex;flex-direction:column;gap:5px}
.hd-flt label{font:700 9px var(--hd-ui);letter-spacing:.12em;color:var(--hd-mut2)}
.hd-sel{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--hd-line2);background:var(--hd-card);font:600 12.5px var(--hd-ui);color:var(--hd-tx);white-space:nowrap}
.hd-sel .hd-ic{font-size:13px;color:var(--hd-mut)}
.hd-sel.is-funil{border-color:rgba(98,192,238,.35);background:linear-gradient(180deg,rgba(23,150,212,.12),rgba(23,150,212,.04))}
.hd-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font:600 10px var(--hd-ui)}
.hd-tag.is-perp{color:#8DC9FF;background:rgba(59,160,255,.14);border:1px solid rgba(59,160,255,.3)}
.hd-tag.is-pago{color:#E6D3C0;background:rgba(217,200,183,.12);border:1px solid rgba(217,200,183,.25)}
.hd-tag.is-free{color:#9BE870;background:rgba(88,212,23,.12);border:1px solid rgba(88,212,23,.3)}
.hd-top-ic{margin-left:auto;display:flex;gap:7px}
.hd-top-ic span{position:relative;width:36px;height:36px;border-radius:9px;border:1px solid var(--hd-line2);background:var(--hd-card);display:flex;align-items:center;justify-content:center;color:var(--hd-tx2);font-size:15px}
.hd-top-ic span.has-dot::after{content:"";position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--hd-amber);box-shadow:0 0 8px var(--hd-amber)}
.hd-body{flex:1;min-height:0;padding:16px 22px 18px;display:flex;flex-direction:column;gap:12px}
.hd-h1{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hd-h1 small{display:block;font:700 9.5px var(--hd-ui);letter-spacing:.14em;color:var(--hd-mut2);margin-bottom:3px}
.hd-h1 b{display:block;font:700 19px var(--hd-ui);letter-spacing:-.01em;color:var(--hd-tx)}
.hd-h1 i{display:block;font:500 11px var(--hd-ui);font-style:normal;color:var(--hd-mut);margin-top:2px}
.hd-live{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;font:600 11px var(--hd-ui);color:#9BE870;background:rgba(88,212,23,.1);border:1px solid rgba(88,212,23,.28)}
.hd-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hd-green);box-shadow:0 0 8px var(--hd-green);animation:hdPulse 1.6s infinite}
.hd-chan{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 9px 16px;border-radius:12px;background:var(--hd-card);border:1px solid var(--hd-line)}
.hd-chan > span{font:700 10px var(--hd-ui);letter-spacing:.16em;color:var(--hd-mut)}
.hd-chips{display:flex;gap:6px;flex-wrap:nowrap}
.hd-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--hd-line);font:600 11px var(--hd-ui);color:var(--hd-tx2);background:rgba(255,255,255,.015)}
.hd-chip.is-on{background:#16233A;border-color:rgba(150,180,225,.28);color:var(--hd-tx)}
.hd-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}

/* cards e KPIs */
.hd-card{position:relative;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 46%),var(--hd-card);
  border:1px solid var(--hd-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.hd-card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 15px 4px}
.hd-card-hd b{font:700 13px var(--hd-ui);color:var(--hd-tx)}
.hd-card-hd b em{font:500 10px var(--hd-ui);font-style:normal;color:var(--hd-mut);margin-left:6px}
.hd-card-hd i{display:block;font:500 10.5px var(--hd-ui);font-style:normal;color:var(--hd-mut);margin-top:3px}
.hd-kg{display:grid;gap:8px}
.hd-k{position:relative;padding:11px 13px 12px;min-height:66px;display:flex;flex-direction:column;gap:3px}
.hd-k > span:first-child{font:600 11px var(--hd-ui);color:var(--hd-tx2);padding-right:30px}
.hd-k > span:first-child em{display:block;font:500 9.5px var(--hd-ui);font-style:normal;color:var(--hd-mut2)}
.hd-k .hd-v{font:700 19px/1.15 var(--hd-ui);letter-spacing:-.01em;color:var(--hd-tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.hd-k .hd-s{font:500 10px var(--hd-ui);color:var(--hd-mut)}
.hd-k .hd-kic{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:7px;border:1px solid var(--hd-line2);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--hd-mut);background:rgba(255,255,255,.02)}
.hd-k.is-hot{border-color:rgba(88,212,23,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 30px rgba(88,212,23,.08)}
.hd-k.is-hot .hd-v{color:#B6F28E}
.hd-flash{animation:hdFlash 1.2s ease}
.hd-up{color:var(--hd-green)!important}.hd-down{color:var(--hd-red)!important}.hd-warn{color:var(--hd-amber)!important}

/* funil de tráfego */
.hd-fun{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:6px 15px 12px;position:relative}
.hd-fs{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px;padding:0 12px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 20%,transparent),color-mix(in srgb,var(--c) 4%,transparent) 70%);overflow:hidden}
.hd-fs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,transparent),transparent);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.is-in .hd-fs::before{width:100%}
.hd-fs > span{position:relative;display:flex;flex-direction:column;gap:1px}
.hd-fs > span b{display:flex;align-items:center;gap:6px;font:600 11.5px var(--hd-ui);color:var(--hd-tx)}
.hd-fs > span b::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c);box-shadow:0 0 8px var(--c)}
.hd-fs > span i{font:500 9.5px var(--hd-ui);font-style:normal;color:var(--hd-mut);padding-left:13px}
.hd-fs > strong{position:relative;font:600 13px var(--hd-mono);color:var(--hd-tx);font-variant-numeric:tabular-nums}
.hd-fr{align-self:center;margin:3px 0;padding:2px 8px;border-radius:5px;border:1px solid var(--hd-line2);background:#0A1322;font:500 9.5px var(--hd-ui);color:var(--hd-tx2);white-space:nowrap}
.hd-fbr{position:absolute;right:46px;width:16px;border:1.5px solid rgba(88,212,23,.7);border-left:0;border-radius:0 8px 8px 0}
.hd-fbr span{position:absolute;right:-1px;top:50%;transform:translate(100%,-50%);padding:3px 5px;border-radius:5px;background:#0A1322;border:1px solid var(--hd-line2);font:700 10px var(--hd-ui);color:var(--hd-tx);text-align:center;line-height:1.15}
.hd-fbr span i{display:block;font:500 7.5px var(--hd-ui);font-style:normal;color:var(--hd-mut)}
.hd-fsum{width:100%;display:flex;flex-direction:column;gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--hd-line)}
.hd-fsum div{display:flex;justify-content:space-between;font:500 10.5px var(--hd-ui);color:var(--hd-tx2)}
.hd-fsum div b{font:600 11px var(--hd-mono);color:var(--hd-tx)}
.hd-fsum div.is-tot{font-weight:700;color:var(--hd-tx)}

/* donut */
.hd-donut{position:relative;display:flex;align-items:center;justify-content:center}
.hd-donut circle.hd-arc{transition:stroke-dasharray 1.6s cubic-bezier(.2,.8,.2,1)}
.hd-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.hd-donut-c b{font:700 20px var(--hd-ui);color:var(--hd-tx)}
.hd-donut-c i{font:500 9.5px var(--hd-ui);font-style:normal;color:var(--hd-mut)}
.hd-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:0 12px 12px;font:500 10px var(--hd-mono);color:var(--hd-tx2)}
.hd-leg span{display:inline-flex;align-items:center;gap:6px}

/* tabelas */
.hd-tb{width:100%;border-collapse:collapse;font:500 11px var(--hd-ui);color:var(--hd-tx2)}
.hd-tb th{padding:8px 10px;text-align:right;font:600 9.5px var(--hd-ui);letter-spacing:.04em;color:var(--hd-mut);border-bottom:1px solid var(--hd-line);white-space:nowrap}
.hd-tb th:first-child,.hd-tb td:first-child{text-align:left}
.hd-tb td{padding:7px 10px;text-align:right;border-bottom:1px solid rgba(150,180,225,.05);white-space:nowrap;font-variant-numeric:tabular-nums}
.hd-tb td.m{font:500 11px var(--hd-mono);color:var(--hd-tx)}
.hd-tb tr.is-tot td{font-weight:700;color:var(--hd-tx);border-top:1px solid var(--hd-line2);border-bottom:0}
.hd-tb tr.l0 td:first-child{font-weight:700;color:var(--hd-tx)}
.hd-tb tr.l1 td:first-child{padding-left:24px;font-weight:600;color:var(--hd-tx)}
.hd-tb tr.l2 td:first-child{padding-left:40px}
.hd-tb td:first-child small{color:var(--hd-mut);font-size:9.5px;margin-left:4px}
.hd-tb .hd-caret{display:inline-block;width:12px;color:var(--hd-mut);font-size:9px}
.hd-tr-in{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.is-in .hd-tr-in{opacity:1;transform:none}

/* gráficos */
.hd-chart{padding:4px 12px 10px}
.hd-chart svg text{font:500 9px var(--hd-ui);fill:var(--hd-mut)}
.hd-chart .hd-lbl{font:600 9px var(--hd-ui);fill:var(--hd-tx2)}
.hd-bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.is-in .hd-bar{transform:scaleY(1)}
.hd-line{stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 2s cubic-bezier(.3,.6,.2,1) .2s}
.is-in .hd-line{stroke-dashoffset:0}
.hd-seg{display:inline-flex;gap:3px;padding:3px;border-radius:8px;background:#0A1322;border:1px solid var(--hd-line)}
.hd-seg span{padding:4px 10px;border-radius:6px;font:600 10px var(--hd-ui);color:var(--hd-mut)}
.hd-seg span.is-on{background:#17253D;color:var(--hd-tx)}
.hd-hbar{display:grid;align-items:center;gap:8px;font:500 10.5px var(--hd-ui);color:var(--hd-tx2)}
.hd-hbar .hd-track{position:relative;height:16px;border-radius:4px;background:rgba(150,180,225,.06);overflow:hidden}
.hd-hbar .hd-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.hd-hbar .hd-fill b{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:600 9.5px var(--hd-mono);color:#06101F}
.hd-stat{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-bottom:1px solid rgba(150,180,225,.06)}
.hd-stat span{font:500 10px var(--hd-ui);color:var(--hd-mut)}
.hd-stat b{font:700 13px var(--hd-ui);color:var(--hd-tx)}
.hd-callout{border-radius:10px;padding:10px 12px;border:1px solid var(--hd-line);background:rgba(255,255,255,.015)}
.hd-callout em{display:inline-flex;align-items:center;gap:5px;font:600 10px var(--hd-ui);font-style:normal;padding:3px 8px;border-radius:999px;margin-bottom:6px}
.hd-callout b{display:block;font:700 11px var(--hd-ui);color:var(--hd-tx);margin-bottom:3px}
.hd-callout p{margin:0;font:500 10px/1.45 var(--hd-ui);color:var(--hd-tx2)}

/* foco da câmera */
.hd-cv [data-r]{transition:opacity .7s ease,box-shadow .7s ease,filter .7s ease}
.hd-cv.is-focusing [data-r]:not(.is-f){opacity:.32;filter:saturate(.6)}
.hd-cv [data-r].is-f{box-shadow:0 0 0 1.5px rgba(255,195,15,.75),0 0 0 6px rgba(255,195,15,.08),0 30px 80px rgba(0,0,0,.45);border-radius:12px}
.hd-cap{position:absolute;left:18px;bottom:16px;z-index:7;display:flex;align-items:center;gap:8px;max-width:calc(100% - 36px);padding:8px 14px 8px 10px;border-radius:999px;
  background:rgba(255,195,15,.95);color:#06101F;font:700 13px var(--hd-ui);box-shadow:0 12px 34px rgba(255,195,15,.28);opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.hd-cap::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:#06101F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC30F' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/12px no-repeat}
.hd-cap.is-on{opacity:1;transform:none}

/* ---------- moldura de celular ---------- */
.hd-phone{position:relative;width:300px;max-width:100%;aspect-ratio:300/628;border-radius:44px;padding:10px;
  background:linear-gradient(145deg,#2A3346,#0B1220 40%,#1A2234);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 100px rgba(0,0,0,.55),0 0 80px rgba(23,150,212,.14)}
.hd-phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:14px;background:#000;z-index:5}
.hd-scr{position:relative;width:100%;height:100%;border-radius:35px;overflow:hidden;background:var(--hd-bg)}
.hd-sb{position:absolute;top:0;left:0;right:0;height:40px;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0;font:600 12px var(--hd-ui);color:var(--hd-tx)}
.hd-sb i{display:flex;gap:4px;align-items:center;font-style:normal}
.hd-sb i span{position:relative;display:block;width:18px;height:9px;border-radius:2.5px;border:1.4px solid currentColor;opacity:.9;padding:1px}
.hd-sb i span::before{content:"";display:block;width:82%;height:100%;border-radius:1px;background:currentColor}
.hd-sb i span::after{content:"";position:absolute;right:-3.4px;top:50%;width:1.6px;height:3.5px;margin-top:-1.75px;border-radius:0 1px 1px 0;background:currentColor}

/* app mobile */
.hd-m{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:40px}
.hd-m-top{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--hd-line);background:rgba(7,12,22,.9);z-index:2}
.hd-m-top .hd-sel{height:30px;font-size:11px;padding:0 9px;flex:1}
.hd-m-top .hd-sel b{font-weight:500;color:var(--hd-mut)}
.hd-m-top > span{position:relative;width:30px;height:30px;border-radius:8px;border:1px solid var(--hd-line2);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--hd-tx2);background:var(--hd-card)}
.hd-m-top > span.has-dot::after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--hd-amber)}
.hd-m-scroll{flex:1;min-height:0;overflow:hidden;position:relative}
.hd-m-in{padding:10px 10px 20px;display:flex;flex-direction:column;gap:8px;transition:transform 1.6s cubic-bezier(.65,0,.3,1)}
.hd-m-in .hd-k{min-height:58px;padding:9px 10px}
.hd-m-in .hd-k .hd-v{font-size:15px}
.hd-m-in .hd-k > span:first-child{font-size:10px}
.hd-m-in .hd-chip{height:26px;font-size:10.5px;justify-content:center}
.hd-m-tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 6px 14px;border-top:1px solid var(--hd-line);background:#070C16}
.hd-m-tabs span{display:flex;flex-direction:column;align-items:center;gap:3px;font:500 8.5px var(--hd-ui);color:var(--hd-mut);white-space:nowrap}
.hd-m-tabs span .hd-ic,.hd-m-tabs span img{font-size:16px;width:30px;height:30px;padding:6px;border-radius:9px}
.hd-m-tabs span.is-on{color:var(--hd-tx)}
.hd-m-tabs span.is-on .hd-ic{background:#16233A;border:1px solid var(--hd-line2);color:var(--hd-sky)}
.hd-push{position:absolute;left:8px;right:8px;top:44px;z-index:6;display:flex;gap:9px;align-items:center;padding:10px 11px;border-radius:16px;
  background:rgba(30,42,62,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 34px rgba(0,0,0,.5);transform:translateY(-130%);opacity:0;transition:transform .55s cubic-bezier(.2,.9,.25,1.1),opacity .4s}
.hd-push.is-on{transform:none;opacity:1}
.hd-push img{width:30px;height:30px;padding:6px;border-radius:9px;background:#0B1A30;flex:none}
.hd-push b{display:block;font:700 11.5px var(--hd-ui);color:#F5F6FA}
.hd-push small{display:block;font:500 10px var(--hd-ui);color:#C3CDDD}
.hd-push em{margin-left:auto;align-self:flex-start;font:500 9px var(--hd-ui);font-style:normal;color:#8090AC}

/* ---------- raio-x ---------- */
hd-raiox{position:relative}
.hd-rx{position:relative;height:640px;border-radius:16px;overflow:hidden;background:
  radial-gradient(600px 300px at 20% 0%,rgba(252,113,72,.10),transparent 70%),radial-gradient(600px 320px at 100% 100%,rgba(88,212,23,.08),transparent 70%),#080D18;
  border:1px solid var(--hd-line2);box-shadow:0 40px 120px rgba(1,34,75,.55);display:flex;flex-direction:column}
.hd-rx-hd{flex:none;padding:16px 18px 12px;border-bottom:1px solid var(--hd-line);background:rgba(8,13,24,.92);z-index:2}
.hd-rx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hd-rx-k{display:inline-flex;align-items:center;gap:7px;font:700 10px var(--hd-ui);letter-spacing:.16em;color:var(--hd-tx2)}
.hd-rx-k .hd-ic{color:var(--hd-amber);font-size:14px}
.hd-rx-t{margin:8px 0 10px;font:700 22px/1.15 var(--hd-ui);letter-spacing:-.01em;color:var(--hd-tx)}
.hd-rx-now{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;border:1px solid rgba(88,212,23,.3);background:rgba(88,212,23,.08);font:500 11px var(--hd-ui);color:var(--hd-tx2)}
.hd-rx-now::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hd-green);animation:hdPulse 1.6s infinite}
.hd-rx-now b{color:var(--hd-tx)}
.hd-rx-by{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-rx-by > span{font:700 9.5px var(--hd-ui);letter-spacing:.14em;color:var(--hd-mut)}
.hd-rx-tabs{display:flex;gap:3px;padding:3px;border-radius:10px;background:#0A1322;border:1px solid var(--hd-line)}
.hd-rx-tabs span{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:7px;font:600 11.5px var(--hd-ui);color:var(--hd-mut);transition:background .3s,color .3s}
.hd-rx-tabs span.is-on{background:#17253D;color:var(--hd-tx);box-shadow:inset 0 0 0 1px var(--hd-line2)}
.hd-cnt{display:inline-flex;gap:5px;font:700 10px var(--hd-ui)}
.hd-cnt i{font-style:normal}
.hd-cnt i:nth-child(1){color:var(--hd-red)}.hd-cnt i:nth-child(2){color:var(--hd-amber)}.hd-cnt i:nth-child(3){color:var(--hd-green)}
.hd-cnt i::before{content:"● ";font-size:7px;vertical-align:1px}
.hd-rx-sc{flex:1;min-height:0;position:relative;overflow:hidden}
.hd-rx-in{padding:14px 18px 40px;display:flex;flex-direction:column;gap:12px;transition:transform 1.4s cubic-bezier(.65,0,.3,1)}
.hd-rx-sec{display:flex;align-items:center;gap:9px;margin-top:4px;font:500 11.5px var(--hd-ui);color:var(--hd-mut)}
.hd-rx-sec b{font:700 15px var(--hd-ui);color:var(--hd-tx)}
.hd-rx-sec::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.hd-rx-sec em{font-style:normal;padding:1px 7px;border-radius:5px;font:700 10px var(--hd-ui);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.hd-rx-sec small{margin-left:auto;font:500 10.5px var(--hd-ui);color:var(--hd-mut)}
.hd-rx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px}
.hd-rc{border-radius:12px;padding:12px 12px 8px;border:1px solid color-mix(in srgb,var(--c) 42%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 12%,transparent),color-mix(in srgb,var(--c) 3%,transparent) 60%),#0B111D;
  box-shadow:inset 3px 0 0 var(--c);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.is-in .hd-rc{opacity:1;transform:none}
.hd-rc-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hd-rc-tag{font:700 9.5px var(--hd-ui);letter-spacing:.08em;padding:3px 7px;border-radius:5px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-rc-act{font:600 10px var(--hd-ui);padding:3px 8px;border-radius:6px;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);white-space:nowrap}
.hd-rc-n{display:flex;align-items:center;gap:6px;margin:8px 0 3px;font:700 12px var(--hd-ui);color:var(--hd-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-rc-n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hd-green);flex:none}
.hd-rc p{margin:0 0 8px;font:500 10.5px/1.45 var(--hd-ui);color:var(--hd-tx2)}
.hd-rc .hd-tb th{padding:5px 4px;font-size:8px;letter-spacing:0}
.hd-rc .hd-tb td{padding:5px 4px;font-size:10.5px}
.hd-rc .hd-tb td:nth-child(2){font-weight:700;color:var(--hd-tx)}
.hd-rc .hd-tb tr.is-hl td{background:color-mix(in srgb,var(--c) 10%,transparent)}
.hd-rc .hd-tb tr.is-hl td:first-child{box-shadow:inset 2px 0 0 var(--c);font-weight:700;color:var(--hd-tx)}
.hd-var{display:inline-block;min-width:46px;padding:2px 5px;border-radius:5px;font:700 9.5px var(--hd-ui);text-align:center}
.hd-var.g{color:var(--hd-green);background:rgba(88,212,23,.1);border:1px solid rgba(88,212,23,.3)}
.hd-var.r{color:var(--hd-red);background:rgba(252,113,72,.1);border:1px solid rgba(252,113,72,.3)}
.hd-rx-scan{position:absolute;left:0;right:0;height:80px;top:-80px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(98,192,238,0),rgba(98,192,238,.07),rgba(98,192,238,0));animation:hdScan 5.5s linear infinite}

/* ---------- conversa com o Claude (celular) ---------- */
hd-claude-chat{display:block;position:relative}
.hd-cl{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:40px;background:#1F1E1C;color:#ECEAE3}
.hd-cl-top{flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;color:#B9B5AA;font-size:17px}
.hd-cl-top div{display:flex;gap:14px}
.hd-cl-sc{flex:1;min-height:0;overflow:hidden;position:relative}
.hd-cl-in{padding:6px 16px 120px;display:flex;flex-direction:column;gap:12px}
.hd-cl-u{align-self:flex-end;max-width:86%;padding:10px 13px;border-radius:16px;background:#33312D;font:500 12.5px/1.45 var(--hd-ui);color:#ECEAE3;animation:hdIn .45s ease both}
.hd-cl-u.is-cmd{font:500 12px var(--hd-mono)}
.hd-cl-tool{display:flex;align-items:center;gap:7px;font:500 11.5px var(--hd-ui);color:#A29E93;animation:hdIn .4s ease both}
.hd-cl-tool .hd-ic{font-size:13px}
.hd-cl-tool.is-run{background:linear-gradient(90deg,#A29E93 0%,#F0EEE6 50%,#A29E93 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hdShimmer 1.6s linear infinite}
.hd-cl-p{margin:0;font:400 13.5px/1.55 Georgia,'Times New Roman',serif;color:#ECEAE3}
.hd-cl-p b{font-weight:700}
.hd-w{opacity:0;animation:hdWord .35s ease forwards}
.hd-cl-perm{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;padding:16px 14px 14px;border-radius:22px;background:#2A2926;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);text-align:center;transform:translateY(115%);transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.hd-cl-perm.is-on{transform:none}
.hd-cl-perm .hd-hx{width:38px;height:38px;margin:0 auto 10px;border-radius:10px;background:#1B1A18;display:flex;align-items:center;justify-content:center;font:700 15px var(--hd-ui);color:#ECEAE3}
.hd-cl-perm p{margin:0 0 4px;font:500 13px/1.4 var(--hd-ui);color:#ECEAE3}
.hd-cl-perm small{display:block;margin-bottom:12px;font:500 11px var(--hd-ui);color:#A29E93}
.hd-cl-perm span{display:block;margin-top:7px;padding:10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font:600 11.5px var(--hd-ui);color:#ECEAE3;transition:transform .2s,background .2s}
.hd-cl-perm span:first-of-type{background:#F2F0EA;color:#1F1E1C;border-color:#F2F0EA}
.hd-cl-perm span.is-tap{transform:scale(.95);background:#D9D6CC}
.hd-cl-in2{position:absolute;left:10px;right:10px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 9px 9px 14px;border-radius:20px;background:#2A2926;border:1px solid rgba(255,255,255,.06);font:500 12px var(--hd-ui);color:#8D897F}
.hd-cl-in2 span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-cl-in2 span.is-typing{color:#ECEAE3}
.hd-cl-in2 em{width:28px;height:28px;border-radius:50%;background:#D97757;display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-size:13px}
.hd-cl-w{border-radius:14px;background:#262522;border:1px solid rgba(255,255,255,.07);overflow:hidden;animation:hdIn .5s ease both}
.hd-cl-kg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.06)}
.hd-cl-kg div{background:#262522;padding:10px 11px}
.hd-cl-kg span{display:block;font:500 9.5px var(--hd-ui);color:#A29E93}
.hd-cl-kg b{display:block;font:700 17px var(--hd-ui);color:#F2F0EA;margin:2px 0 1px}
.hd-cl-kg i{display:block;font:500 9.5px var(--hd-ui);font-style:normal;color:#8D897F}
.hd-cl-tb{padding:6px 10px 8px}
.hd-cl-th{display:grid;grid-template-columns:1fr 58px 40px 36px;gap:4px;padding:6px 0;font:500 9px var(--hd-ui);color:#8D897F;border-bottom:1px solid rgba(255,255,255,.06)}
.hd-cl-th span:not(:first-child),.hd-cl-tr span:not(:first-child){text-align:right}
.hd-cl-g{padding:8px 0 3px;font:600 10px var(--hd-ui)}
.hd-cl-tr{display:grid;grid-template-columns:1fr 58px 40px 36px;gap:4px;align-items:center;padding:5px 0;font:500 10.5px var(--hd-ui);color:#ECEAE3;animation:hdIn .35s ease both}
.hd-cl-tr small{display:block;font-size:8.5px;color:#8D897F}
.hd-cl-tr b{font:700 10.5px var(--hd-mono)}
.hd-cl-bars{padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.06)}
.hd-cl-bars > b{display:block;font:600 10px var(--hd-ui);color:#A29E93;margin-bottom:6px}
.hd-cl-br{display:grid;grid-template-columns:62px 1fr 30px;gap:6px;align-items:center;padding:2.5px 0;font:500 10px var(--hd-ui);color:#ECEAE3}
.hd-cl-br i{display:block;height:7px;border-radius:4px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.hd-cl-br span:last-child{text-align:right;font:600 10px var(--hd-mono)}
.hd-cl-note{padding:0 10px 10px;font:500 9px/1.4 var(--hd-ui);color:#8D897F}
.hd-cl-btns{display:flex;flex-wrap:wrap;gap:6px;animation:hdIn .4s ease both}
.hd-cl-btns span{padding:7px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.12);font:500 11px var(--hd-ui);color:#ECEAE3}
.hd-cl-ex{border-radius:10px;background:#2A2926;padding:10px 12px;font:500 11px/1.5 var(--hd-ui);color:#B9B5AA;animation:hdIn .4s ease both}
.hd-cl-ex div::before{content:"✓ ";color:#7FD35A}
.hd-cl-alert{display:flex;flex-direction:column;gap:6px;padding:12px}
.hd-cl-alert code{font:600 11px var(--hd-mono);color:#F2F0EA;background:#1B1A18;border-radius:6px;padding:6px 8px}
.hd-cl-alert div{display:flex;justify-content:space-between;font:500 10.5px var(--hd-ui);color:#A29E93}
.hd-cl-alert div b{color:#ECEAE3;font-weight:600}
.hd-cl-alert em{align-self:flex-start;font:700 9.5px var(--hd-ui);font-style:normal;letter-spacing:.06em;color:#7FD35A;background:rgba(127,211,90,.12);border-radius:5px;padding:3px 7px}

/* ---------- mini painéis (personas) ---------- */
hd-mini{display:block}
.hd-mini{border-radius:12px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 50%),#0A1322;border:1px solid var(--hd-line2);display:flex;flex-direction:column;gap:9px}
.hd-mini-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 10.5px var(--hd-ui);color:var(--hd-tx2)}
.hd-mini-hd span{display:flex;align-items:center;gap:7px}
.hd-mini-hd img{width:13px;height:13px}
.hd-mini-hd em{font:600 9.5px var(--hd-ui);font-style:normal;color:var(--hd-mut)}
.hd-mini-kg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hd-mini-kg div{border-radius:9px;padding:8px 9px;background:var(--hd-card);border:1px solid var(--hd-line)}
.hd-mini-kg > div > span{display:block;font:500 9.5px var(--hd-ui);color:var(--hd-mut)}
.hd-mini-kg b{display:block;font:700 13px var(--hd-ui);color:var(--hd-tx);margin-top:3px;white-space:nowrap}
.hd-mini-kg i{display:block;font:500 9px var(--hd-ui);font-style:normal;color:var(--hd-green);margin-top:1px}
.hd-mini-row{display:grid;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--hd-card);border:1px solid var(--hd-line);font:500 10.5px var(--hd-ui);color:var(--hd-tx2);
  opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .5s ease}
.is-in .hd-mini-row{opacity:1;transform:none}
.hd-mini-row b{font:600 10.5px var(--hd-mono);color:var(--hd-tx);text-align:right}
.hd-mini-row > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hd-tx)}
.hd-rel{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:6px;background:#17253D;border:1px solid var(--hd-line2);font:700 10.5px var(--hd-ui);color:var(--hd-tx)}

/* ---------- creative intelligence ---------- */
hd-ci{display:block}
.hd-ci-bar{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.hd-ci-bar span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--hd-line2);background:#0A1322;font:600 10.5px var(--hd-ui);color:var(--hd-tx2)}
.hd-ci-bar span.is-on{color:var(--hd-tx);background:#16233A}
.hd-ci-stage{position:relative;height:388px;overflow:hidden}
.hd-cc{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#0A1120;border:1px solid var(--hd-line2);display:flex;flex-direction:column;
  transition:transform .8s cubic-bezier(.65,0,.3,1),opacity .8s ease}
.hd-cc.is-next{transform:translateX(105%) rotate(2deg);opacity:0}
.hd-cc.is-prev{transform:translateX(-105%) rotate(-2deg);opacity:0}
.hd-thumb{position:relative;height:214px;flex:none;overflow:hidden}
.hd-thumb::before{content:"";position:absolute;inset:-20%;background:var(--g);filter:blur(18px) saturate(1.1);animation:hdDrift 9s ease-in-out infinite alternate}
.hd-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(5,9,18,.75))}
.hd-thumb .hd-silh{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:120px;height:140px;z-index:1;opacity:.55}
.hd-thumb .hd-sub{position:absolute;left:14px;right:14px;bottom:84px;z-index:2;text-align:center;font:800 13px var(--hd-ui);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);letter-spacing:.02em}
.hd-thumb .hd-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.hd-thumb .hd-play::after{content:"";margin-left:3px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.hd-relb{position:absolute;top:10px;right:10px;z-index:3;padding:5px 8px;border-radius:8px;background:rgba(5,9,18,.75);backdrop-filter:blur(6px);text-align:center;border:1px solid rgba(255,255,255,.1)}
.hd-relb span{display:block;font:700 7.5px var(--hd-ui);letter-spacing:.14em;color:var(--hd-tx2)}
.hd-relb b{display:block;font:800 17px/1 var(--hd-ui);color:#fff;margin-top:2px}
.hd-thumb .hd-cap2{position:absolute;left:10px;bottom:10px;right:10px;z-index:3}
.hd-thumb .hd-cap2 em{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:rgba(23,150,212,.25);border:1px solid rgba(98,192,238,.4);font:600 9.5px var(--hd-ui);font-style:normal;color:#BFE5F8}
.hd-thumb .hd-cap2 b{display:block;margin-top:5px;font:700 13px var(--hd-ui);color:#fff}
.hd-thumb .hd-cap2 small{display:block;font:600 8.5px var(--hd-ui);letter-spacing:.12em;color:rgba(255,255,255,.6)}
.hd-cc-bd{padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.hd-cc-bd > span{font:700 9px var(--hd-ui);letter-spacing:.14em;color:var(--hd-mut)}
.hd-cc-fat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-cc-fat b{font:800 20px var(--hd-ui);color:var(--hd-tx)}
.hd-cc-fat em{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;background:rgba(23,150,212,.14);border:1px solid rgba(98,192,238,.3);font:600 10px var(--hd-ui);font-style:normal;color:#8DC9FF}
.hd-cc-m{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-top:1px solid var(--hd-line);padding-top:9px}
.hd-cc-m span{display:block;font:500 9px var(--hd-ui);color:var(--hd-mut)}
.hd-cc-m b{display:block;font:700 13px var(--hd-ui);color:var(--hd-tx);margin-top:2px;white-space:nowrap}
.hd-dots{display:flex;justify-content:center;gap:5px;margin-top:10px}
.hd-dots i{width:6px;height:6px;border-radius:50%;background:rgba(150,180,225,.25);transition:all .4s}
.hd-dots i.is-on{width:18px;border-radius:3px;background:var(--hd-amber)}
.hd-ci-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:10px;background:#0A1322;border:1px solid var(--hd-line);margin-bottom:10px}
.hd-ci-tabs span{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;border-radius:7px;font:600 11px var(--hd-ui);color:var(--hd-mut);transition:background .3s,color .3s}
.hd-ci-tabs span.is-on{background:#17253D;color:var(--hd-tx)}
.hd-ci-pane{display:none;flex-direction:column;gap:9px;animation:hdIn .5s ease both}
.hd-ci-pane.is-on{display:flex}
.hd-ci-box{border-radius:10px;border:1px solid var(--hd-line);background:#0A1322;padding:11px 12px}
.hd-ci-box > span{display:block;font:700 9px var(--hd-ui);letter-spacing:.14em;color:var(--hd-mut);margin-bottom:6px}
.hd-ci-box p{margin:0;font:600 11.5px/1.55 var(--hd-ui);color:var(--hd-tx)}
.hd-ci-chips{display:flex;flex-wrap:wrap;gap:5px}
.hd-ci-chips span{padding:4px 8px;border-radius:6px;background:#0F1A2D;border:1px solid var(--hd-line2);font:500 10px var(--hd-ui);color:var(--hd-tx2)}
.hd-ci-3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hd-ci-3 div{border-radius:9px;border:1px solid var(--hd-line);background:#0A1322;padding:8px 9px}
.hd-ci-3 span{display:block;font:700 8.5px var(--hd-ui);letter-spacing:.12em;color:var(--hd-mut)}
.hd-ci-3 b{display:block;font:500 10.5px/1.4 var(--hd-ui);color:var(--hd-tx);margin-top:4px}
.hd-ci-kg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.hd-ci-kg div{border-radius:9px;border:1px solid var(--hd-line);background:#0A1322;padding:8px 10px}
.hd-ci-kg span{display:block;font:600 8.5px var(--hd-ui);letter-spacing:.1em;color:var(--hd-mut)}
.hd-ci-kg b{display:block;font:800 15px var(--hd-ui);color:var(--hd-tx);margin-top:3px}
.hd-steps{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;position:relative}
.hd-steps::before{content:"";position:absolute;left:14px;right:14px;top:13px;height:1px;background:var(--hd-line2)}
.hd-steps div{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;font:500 9px var(--hd-ui);color:var(--hd-mut);width:20%}
.hd-steps i{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0A1322;border:1px solid var(--hd-line2);font:700 10px var(--hd-ui);font-style:normal;color:var(--hd-mut);transition:all .4s}
.hd-steps div.is-done i{background:var(--hd-amber);border-color:var(--hd-amber);color:#06101F}
.hd-steps div.is-cur i{border-color:var(--hd-amber);color:var(--hd-amber);box-shadow:0 0 0 4px rgba(255,195,15,.12)}
.hd-steps div.is-done,.hd-steps div.is-cur{color:var(--hd-tx)}
.hd-plan-wait{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 0;text-align:center;font:600 12px var(--hd-ui);color:var(--hd-tx)}
.hd-plan-wait small{font:500 10.5px var(--hd-ui);color:var(--hd-mut)}
.hd-orb{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,195,15,.4);position:relative;animation:hdSpin 3s linear infinite}
.hd-orb::after{content:"✦";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--hd-amber);font-size:18px;animation:hdSpin 3s linear infinite reverse}
.hd-orb::before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--hd-amber);box-shadow:0 0 10px var(--hd-amber)}
.hd-prop{border-radius:10px;border:1px solid var(--hd-line2);background:#0A1322;padding:10px 11px;animation:hdIn .5s ease both}
.hd-prop > b{display:flex;align-items:center;gap:7px;font:700 11.5px var(--hd-ui);color:var(--hd-tx)}
.hd-prop > b i{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font:700 10px var(--hd-ui);font-style:normal;background:#17253D;color:var(--hd-tx)}
.hd-prop p{margin:6px 0 0;font:500 10.5px/1.45 var(--hd-ui);color:var(--hd-tx2)}
.hd-prop.is-fk{border-color:rgba(255,195,15,.45);background:linear-gradient(180deg,rgba(255,195,15,.08),rgba(255,195,15,0)),#0A1322}
.hd-prop.is-fk > b i{background:var(--hd-amber);color:#06101F}
.hd-fk{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;margin-top:8px;font:500 10px var(--hd-ui);color:var(--hd-tx2)}
.hd-fk span:nth-child(3n+1){font-weight:700;color:var(--hd-amber)}
.hd-fk span:nth-child(3n){font:600 10px var(--hd-mono);color:var(--hd-tx)}
.hd-dl{display:flex;gap:6px;margin-top:2px}
.hd-dl span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 9px;border-radius:7px;border:1px solid var(--hd-line2);font:600 10px var(--hd-ui);color:var(--hd-tx2)}

/* ---------- VSL ---------- */
.hd-seg-lg span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;font-size:11px}
.hd-seg-lg span .hd-ic{font-size:12px}
.hd-kc{min-height:58px}
.hd-kc > span:first-child{font:700 9px var(--hd-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--hd-tx2)}
.hd-kc .hd-v{font-size:16.5px}
.hd-kic.is-c{border:0!important;color:#fff!important;background:var(--kc)!important;box-shadow:0 0 14px color-mix(in srgb,var(--kc) 45%,transparent)}
.hd-plus{width:18px;height:18px;flex:none;border-radius:5px;border:1px solid var(--hd-line2);display:flex;align-items:center;justify-content:center;font:600 11px var(--hd-ui);color:var(--hd-mut)}
.hd-cmp-p{border-radius:11px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,transparent),color-mix(in srgb,var(--c) 3%,transparent)),var(--hd-card);display:flex;flex-direction:column;gap:7px}
.hd-cmp-p > span{display:flex;align-items:center;gap:7px;font:700 11px var(--hd-ui);color:var(--hd-tx)}
.hd-cmp-p > span em{margin-left:auto;color:var(--hd-mut);font-size:11px;font-style:normal}
.hd-cmp-p > b{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:8px;background:#0A1322;border:1px solid var(--hd-line);font:600 10.5px var(--hd-ui);color:var(--hd-tx);white-space:nowrap;overflow:hidden}
.hd-cmp-p > b .hd-ic{margin-left:auto;font-size:11px;color:var(--hd-mut)}
.hd-cm{padding:9px 11px 8px;display:flex;flex-direction:column;gap:4px}
.hd-cm-t{font:700 9px var(--hd-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--hd-tx2);margin-bottom:2px}
.hd-cm-bar{display:flex;gap:2px;height:7px;border-radius:4px;overflow:hidden;margin-bottom:3px}
.hd-cm-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.is-in .hd-cm-bar i{transform:scaleX(1)}
.hd-cm-r{display:grid;grid-template-columns:8px 1fr auto auto;gap:7px;align-items:center;font:500 10px var(--hd-ui);color:var(--hd-tx2)}
.hd-cm-r > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-cm-r em{font:500 9px var(--hd-ui);font-style:normal;color:var(--hd-mut)}
.hd-cm-r > b{font:700 11px var(--hd-mono);text-align:right}
.hd-crown{display:inline-flex;vertical-align:-1px;color:#FFC30F;font-size:11px}
.hd-crown .hd-ic{fill:rgba(255,195,15,.25)}
/* planejador de criativo */
.hd-ci-bg{position:absolute;inset:0;padding:6px 4px;filter:blur(2.5px) saturate(.7);opacity:.45;pointer-events:none}
.hd-ci-bg > b{font:800 26px var(--hd-ui);letter-spacing:-.01em}
.hd-plm{position:absolute;left:50%;top:0;transform:translateX(-50%);width:720px;height:100%;max-height:690px;display:flex;flex-direction:column;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 30%),#0D1320;border:1px solid var(--hd-line2);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 40px 120px rgba(0,0,0,.65);overflow:hidden}
.hd-plm::before{content:"";position:absolute;left:18%;right:18%;top:0;height:2px;background:linear-gradient(90deg,transparent,#E6D3C0,transparent);opacity:.7}
.hd-plm-hd{position:relative;padding:18px 22px 12px;border-bottom:1px solid var(--hd-line)}
.hd-plm-hd small{display:block;font:700 9.5px var(--hd-ui);letter-spacing:.16em;color:var(--hd-tx2)}
.hd-plm-hd b{display:block;margin:4px 0 4px;font:800 19px var(--hd-ui);color:var(--hd-tx)}
.hd-plm-hd p{margin:0;max-width:540px;font:500 11px/1.5 var(--hd-ui);color:var(--hd-tx2)}
.hd-plm-x{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:8px;border:1px solid var(--hd-line2);display:flex;align-items:center;justify-content:center;color:var(--hd-tx2);font-size:13px}
.hd-plm-steps{display:flex;justify-content:space-between;padding:12px 40px 10px;border-bottom:1px solid var(--hd-line);position:relative}
.hd-plm-steps::before{content:"";position:absolute;left:70px;right:70px;top:29px;border-top:1px dashed var(--hd-line2)}
.hd-plm-steps > div{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:90px;font:500 10px var(--hd-ui);color:var(--hd-mut)}
.hd-plm-steps i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0D1320;border:1px solid var(--hd-line2);font-size:14px;color:var(--hd-mut);transition:all .4s ease}
.hd-plm-steps > div.is-cur{color:var(--hd-tx);font-weight:700}
.hd-plm-steps > div.is-cur i{color:var(--hd-tx);border-color:#E6D3C0;box-shadow:0 0 0 4px rgba(230,211,192,.1),0 0 18px rgba(230,211,192,.2)}
.hd-plm-steps > div.is-done i{color:var(--hd-tx);border-color:rgba(150,180,225,.35)}
.hd-plm-c{flex:1;min-height:0;overflow:hidden;padding:14px 22px}
.hd-plm-pane{display:flex;flex-direction:column;gap:9px;animation:hdIn .45s ease both}
.hd-plm-ft{display:flex;justify-content:space-between;padding:12px 22px;border-top:1px solid var(--hd-line)}
.hd-plm-ft span{padding:8px 16px;border-radius:9px;border:1px solid var(--hd-line2);font:600 11.5px var(--hd-ui);color:var(--hd-tx)}
.hd-plm-ft span.is-gold{background:linear-gradient(180deg,#EADCC6,#CDB894);border-color:#EADCC6;color:#14110C}
.hd-pl-lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hd-pl-lab span{font:700 9.5px var(--hd-ui);letter-spacing:.14em;color:var(--hd-tx2)}
.hd-pl-lab em{font:500 10px var(--hd-ui);font-style:normal;color:var(--hd-mut)}
.hd-pl-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hd-pl-opt{position:relative;border-radius:12px;padding:12px 14px;border:1px solid var(--hd-line2);background:rgba(255,255,255,.015);display:flex;flex-direction:column;gap:3px;transition:border-color .35s,background .35s,box-shadow .35s}
.hd-pl-opt b{font:700 13px var(--hd-ui);color:var(--hd-tx);margin-top:6px}
.hd-pl-opt p{margin:0;font:500 10.5px var(--hd-ui);color:var(--hd-tx2)}
.hd-pl-opt small{display:flex;align-items:center;gap:6px;margin-top:4px;font:600 9px var(--hd-ui);letter-spacing:.12em;color:var(--hd-mut)}
.hd-pl-opt small i{display:inline-block;width:12px;border-top:1px solid var(--hd-mut)}
.hd-pl-ic{width:30px;height:30px;border-radius:8px;border:1px solid var(--hd-line2);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--hd-tx2)}
.hd-pl-radio{position:absolute;top:12px;right:12px;width:14px;height:14px;border-radius:50%;border:1px solid var(--hd-line2);transition:all .35s}
.hd-pl-opt.is-sel{border-color:rgba(230,211,192,.6);background:linear-gradient(180deg,rgba(230,211,192,.08),rgba(230,211,192,.02));box-shadow:0 0 24px rgba(230,211,192,.08)}
.hd-pl-opt.is-sel .hd-pl-radio{border-color:#E6D3C0;background:radial-gradient(circle,#E6D3C0 40%,transparent 45%)}
.hd-pl-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hd-pl-sum div{border-radius:10px;border:1px solid var(--hd-line2);padding:10px 12px}
.hd-pl-sum span{display:block;font:600 9.5px var(--hd-ui);color:var(--hd-mut)}
.hd-pl-sum b{display:block;margin-top:3px;font:700 13px var(--hd-ui);color:var(--hd-tx)}
.hd-pl-top{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.hd-pl-top > div{position:relative;border-radius:10px;border:1px solid var(--hd-line2);padding:6px 6px 8px;display:flex;flex-direction:column;gap:2px;animation:hdIn .45s ease both}
.hd-pl-th{position:relative;display:block;height:88px;border-radius:7px;margin-bottom:4px;overflow:hidden}
.hd-pl-th b{position:absolute;left:6px;bottom:3px;font:800 17px var(--hd-ui);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hd-pl-top strong{font:700 10px var(--hd-ui);color:var(--hd-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-pl-top small{font:600 8.5px var(--hd-ui);letter-spacing:.1em;color:var(--hd-mut);text-transform:uppercase}
.hd-pl-top em{font:700 11px var(--hd-ui);font-style:normal;color:var(--hd-tx)}
.hd-pl-note{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 9.5px var(--hd-ui);color:#fff;
  background:radial-gradient(closest-side,#0D1320 79%,transparent 80% 100%),conic-gradient(#E6D3C0 calc(var(--p) * 1%),rgba(255,255,255,.12) 0)}
.hd-pl-common{border-radius:10px;border:1px solid var(--hd-line2);padding:10px 12px;animation:hdIn .45s ease .6s both}
.hd-pl-common span{display:block;font:700 9px var(--hd-ui);letter-spacing:.14em;color:var(--hd-tx2);margin-bottom:5px}
.hd-pl-common p{margin:0;font:500 10.5px/1.5 var(--hd-ui);color:var(--hd-tx)}
.hd-fk-row{display:grid;grid-template-columns:22px 52px 1fr auto;gap:10px;align-items:start;border-radius:11px;border:1px solid rgba(230,211,192,.28);background:linear-gradient(180deg,rgba(230,211,192,.06),rgba(230,211,192,0)),#0A101C;padding:9px 11px;animation:hdIn .5s ease both}
.hd-fk-row > i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 10px var(--hd-ui);font-style:normal;background:#E6D3C0;color:#14110C}
.hd-fk-th{display:block;height:58px;border-radius:7px}
.hd-fk-row b{display:block;font:700 12px var(--hd-ui);color:var(--hd-tx)}
.hd-fk-row b small{font:500 9.5px var(--hd-ui);color:var(--hd-mut);margin-left:4px}
.hd-fk-ad{display:block;font:600 9.5px var(--hd-mono);color:#E6D3C0;margin:2px 0}
.hd-fk-row p{margin:0 0 4px;font:500 10.5px/1.4 var(--hd-ui);color:var(--hd-tx2)}
.hd-fk-m{display:flex;gap:14px}
.hd-fk-m span{display:flex;align-items:baseline;gap:5px;font:600 8.5px var(--hd-ui);letter-spacing:.06em;color:var(--hd-mut)}
.hd-fk-m span b{font:800 13px var(--hd-ui);color:var(--hd-tx);letter-spacing:0}
.hd-fk-m span em{font:500 9px var(--hd-ui);font-style:normal;color:var(--hd-mut);letter-spacing:0}
.hd-fk-n{font:700 10px var(--hd-ui);color:#E6D3C0;white-space:nowrap}
.hd-fk-how{border-radius:10px;border:1px dashed var(--hd-line2);padding:8px 12px;animation:hdIn .5s ease both}
.hd-fk-how span{display:block;font:700 9px var(--hd-ui);letter-spacing:.14em;color:var(--hd-tx2);margin-bottom:3px}
.hd-fk-how p{margin:0;font:500 10.5px/1.45 var(--hd-ui);color:var(--hd-tx)}

/* ---------- keyframes ---------- */
@keyframes hdPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hdFlash{0%{color:#B6F28E;text-shadow:0 0 14px rgba(88,212,23,.7)}100%{text-shadow:none}}
@keyframes hdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hdWord{to{opacity:1}}
@keyframes hdShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes hdScan{from{top:-80px}to{top:110%}}
@keyframes hdSpin{to{transform:rotate(360deg)}}
@keyframes hdDrift{from{transform:translate(-4%,-2%) scale(1.05)}to{transform:translate(4%,3%) scale(1.12)}}
@media (max-width:760px){.hd-cap{font-size:11.5px;padding:6px 11px 6px 8px;left:10px;bottom:10px}}
@media (prefers-reduced-motion:reduce){
  .hd-cv,.hd-m-in,.hd-rx-in{transition:none!important}
  .hd-rx-scan,.hd-thumb::before{animation:none!important}
}

/* ---------- raio-x: abre a partir do chip na tela de Análise de Tráfego e UTMs ---------- */
.hd-rxw{position:relative;height:640px;border-radius:16px;overflow:hidden;isolation:isolate;background:var(--hd-bg);
  border:1px solid var(--hd-line2);box-shadow:0 40px 120px rgba(1,34,75,.55)}
.hd-rx-utm{position:absolute;inset:0;overflow:hidden;transition:opacity .6s ease,filter .6s ease}
.hd-rx-ucv{position:absolute;left:0;top:0;width:1200px;transform-origin:0 0;will-change:transform;transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.hd-rx-ucv.hd-instant{transition:none}
.hd-rxw > .hd-rx{position:absolute;inset:0;height:auto;border:0;box-shadow:none;border-radius:16px;z-index:2;
  opacity:0;visibility:hidden;transition:clip-path .75s cubic-bezier(.7,0,.2,1),opacity .3s ease,visibility 0s .75s}
.hd-rxw.is-open > .hd-rx{opacity:1;visibility:visible;transition:clip-path .75s cubic-bezier(.7,0,.2,1),opacity .2s ease,visibility 0s}
.hd-rxw.is-open .hd-rx-utm{opacity:.35;filter:blur(2px) saturate(.6)}
/* os cards do raio-x entram de novo a cada abertura */
.hd-rxw:not(.is-open) .hd-rc{opacity:0;transform:translateY(10px);transition-delay:0s!important}
/* chip aceso antes do clique */
.hd-rx-ucv .hd-chip{transition:box-shadow .45s ease,border-color .45s ease,background .45s ease,transform .2s ease}
.hd-rx-ucv .hd-chip.is-hot{border-color:rgba(255,195,15,.85);background:rgba(255,195,15,.12);color:var(--hd-tx);
  box-shadow:0 0 0 4px rgba(255,195,15,.14),0 0 28px rgba(255,195,15,.4);animation:hdChipPulse 1.2s ease-in-out infinite}
.hd-rxw.is-press .hd-rx-ucv .hd-chip.is-hot{transform:scale(.94);animation:none}
@keyframes hdChipPulse{50%{box-shadow:0 0 0 7px rgba(255,195,15,.08),0 0 36px rgba(255,195,15,.55)}}
/* cursor */
.hd-cursor{position:absolute;left:0;top:0;z-index:3;width:26px;height:26px;margin:-3px 0 0 -4px;pointer-events:none;opacity:0;
  transition:transform .95s cubic-bezier(.55,0,.2,1),opacity .3s ease;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.hd-cursor svg{width:100%;height:100%}
.hd-cursor path{fill:#fff;stroke:#06101F;stroke-width:1.4;stroke-linejoin:round}
.hd-rxw.is-cur .hd-cursor{opacity:1}
.hd-cursor::after{content:"";position:absolute;left:4px;top:3px;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:2px solid rgba(255,195,15,.9);opacity:0;transform:scale(.3)}
.hd-rxw.is-press .hd-cursor svg{transform:scale(.82);transition:transform .12s ease}
.hd-rxw.is-press .hd-cursor::after{animation:hdTap .5s ease-out}
@keyframes hdTap{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){
  .hd-rx-ucv,.hd-cursor,.hd-rxw > .hd-rx{transition:none!important}
  .hd-rx-ucv .hd-chip.is-hot{animation:none}
}