/* Painel yHost — identidade v2 "Clean Confiança" */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --bg:#f7f8fc; --bg-alt:#eef1f8; --card:#fff; --border:#e7eaf3; --border-strong:#d9deec;
  --navy:#171c36; --red:#e8432a; --red-dark:#d63a22; --red-soft:#fdeeec;
  --green:#16a34a; --green-soft:#e9f9f0; --amber:#d97706; --amber-soft:#fff3ea;
  --blue:#2563eb; --blue-soft:#eef4ff; --grey:#64748b; --grey-soft:#eef1f6;
  --text:#313952; --text-mid:#5b6478; --text-dim:#8a91a5;
  --display:'Plus Jakarta Sans','Inter',sans-serif; --font:'Inter',-apple-system,sans-serif;
  --shadow-sm:0 2px 10px rgba(23,28,54,.05); --shadow:0 10px 34px rgba(23,28,54,.08);
  /* escala de cantos — SEMPRE arredondado, NUNCA pílula/oval.
     Única exceção legítima: controles que só existem em formato de cápsula
     (o interruptor .tgl-s) e círculos de avatar/spinner. */
  --r:16px;        /* card / seção            */
  --r-sm:12px;     /* bloco interno           */
  --r-ctl:10px;    /* input, select, textarea — mesmo raio do botão, pra ficarem irmãos lado a lado */
  --r-btn:10px;    /* botão                   */
  --r-chip:8px;    /* chip, badge, tag        */
  --sidebar-w:250px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}   /* app fixo: a JANELA nunca rola (iframes antifraude da Efí estouram o documento) */
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);color:var(--navy);line-height:1.2}
.hidden{display:none!important}
.spin{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:sp .7s linear infinite;margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===== APP: grid de altura total, nada rola na janela ===== */
#app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;overflow:hidden}
.sidebar{background:var(--navy);color:#fff;padding:24px 16px;display:flex;flex-direction:column;height:100vh;overflow-y:auto}
.sidebar .logo{padding:8px 12px 28px}
.sidebar .logo img{height:34px;width:auto;display:block}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);
  color:#b9bfd4;font-weight:600;font-size:14.5px;margin-bottom:3px;cursor:pointer;transition:.15s}
.nav a svg{width:19px;height:19px;flex:0 0 19px}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{background:var(--red);color:#fff}
.sidebar .spacer{flex:1}
.side-logout{display:flex;align-items:center;gap:12px;padding:12px 14px;color:#b9bfd4;font-weight:600;
  font-size:14.5px;cursor:pointer;border-radius:var(--r-sm)}
.side-logout:hover{background:rgba(255,255,255,.06);color:#fff}
.side-logout.on{background:rgba(255,255,255,.08);color:#fff}

/* ===== MAIN: coluna flex de altura total ===== */
.main{display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}
.topbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  padding:16px 40px;border-bottom:1px solid var(--border);background:var(--card)}
.userchip{display:flex;align-items:center;gap:10px;margin-left:auto}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700}
.userchip .n{font-weight:600;font-size:14px}
.userchip .e{font-size:12.5px;color:var(--text-dim)}
.pagehead{flex:0 0 auto;padding:24px 40px 14px}
.pagehead h1{font-size:24px}
.pagehead .pd{color:var(--text-mid);font-size:14px;margin-top:5px;max-width:760px}

/* área de conteúdo: por padrão preenche e a TABELA rola (não a página) */
.views{flex:1;min-height:0;padding:0 40px 28px;display:flex;flex-direction:column;overflow:hidden}
/* páginas de conteúdo variado (dashboard/conta/detalhe) rolam livremente aqui dentro */
.views.flow{display:block;overflow-y:auto;overflow-x:hidden}

/* ===== SEÇÕES / TABELAS ===== */
.section{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);margin-bottom:22px;overflow:hidden}
.section:last-child{margin-bottom:0}
.section>h2{font-size:16px;padding:18px 22px;border-bottom:1px solid var(--border)}
/* ---- ANATOMIA PADRÃO DE SEÇÃO (uma só no painel inteiro) ----
   .section  →  [ .sec-h cabeçalho ]  +  [ .sec-b corpo ]
   `.lt-head` (tabelas) e `.dm-sec-h` (domínio) são apelidos do MESMO cabeçalho.
   Cuidado: `.section>h2` tem especificidade (0,1,1) e vence classe solta como
   `.dom-h` (0,1,0) — era o que dava borda e recuo que ninguém pediu no título.
   Por isso o título mora DENTRO do .sec-h, nunca solto na seção. */
.sec-h,.lt-head,.dm-sec-h{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--border)}
.sec-h>h2,.sec-h>h3,.lt-head>h2,.lt-head>h3,.dm-sec-h>h2,.dm-sec-h>h3{flex:1;min-width:0;margin:0;padding:0;border:none;font-size:16px}
.sec-h>h3,.lt-head>h3,.dm-sec-h>h3{font-size:15px;font-weight:700;color:var(--text)}
.sec-b,.dm-sec-b{padding:18px 22px 22px}
.sec-b>:first-child,.dm-sec-b>:first-child{margin-top:0}
/* seção que preenche a altura restante e rola por dentro */
.section.fill{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
.tscroll{flex:1;min-height:0;overflow:auto}
.section.fill .tbl thead th{position:sticky;top:0;z-index:2}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-weight:600;padding:13px 22px;background:#fafbfe}
.tbl td{padding:14px 22px;border-top:1px solid var(--border);font-size:14px;vertical-align:middle}
.tbl tbody tr:hover td{background:#fafbff}
.tbl .strong{font-weight:600;color:var(--navy)}
.tbl .dim{color:var(--text-dim);font-size:13px}
.tbl tfoot td{padding:11px 22px;border-top:1px solid var(--border);font-size:14px}
.empty{padding:44px 22px;text-align:center;color:var(--text-dim);font-size:14px}

/* ===== BADGES (status traduzidos) ===== */
.badge{display:inline-block;padding:4px 11px;border-radius:var(--r-chip);font-size:12px;font-weight:600;white-space:nowrap}
.b-active,.b-paid,.b-completed,.b-answered{background:var(--green-soft);color:var(--green)}
.b-pending,.b-unpaid,.b-open,.b-customerreply,.b-grace,.b-inprogress,.b-onhold,.b-paymentpending,.b-pendingregistration,.b-pendingtransfer,.b-draft,.b-collections,.b-redemption{background:var(--amber-soft);color:var(--amber)}
.b-suspended,.b-terminated,.b-cancelled,.b-fraud,.b-expired,.b-transferredaway{background:var(--red-soft);color:var(--red-dark)}
.b-closed,.b-refunded{background:var(--grey-soft);color:var(--grey)}
.b-def{background:var(--bg-alt);color:var(--text-mid)}

/* ===== BOTÕES ===== */
.btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 15px;background:var(--red);color:#fff;border-radius:var(--r-btn);font-size:13px;font-weight:600;font-family:var(--display);border:none;cursor:pointer;transition:.12s;white-space:nowrap}
.btn-sm:hover{background:var(--red-dark)}
.btn-sm.ghost{background:var(--bg-alt);color:var(--navy)}
.btn-sm.ghost:hover{background:var(--border-strong)}
.btn-sm.out{background:transparent;border:1px solid var(--border-strong);color:var(--text-mid)}
.btn-sm.out:hover{border-color:var(--red);color:var(--red);background:transparent}
.btn-sm:disabled{opacity:.5;cursor:default}

/* ===== STATS (cards clicáveis) ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.15s;text-align:left;font:inherit}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.stat .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.stat .ico svg{width:20px;height:20px}
.stat .v{font-family:var(--display);font-weight:800;font-size:26px;color:var(--navy)}
.stat .l{font-size:13px;color:var(--text-dim);margin-top:2px}
.ic-red{background:var(--red-soft);color:var(--red)} .ic-amber{background:var(--amber-soft);color:var(--amber)}
.ic-green{background:var(--green-soft);color:var(--green)} .ic-blue{background:var(--blue-soft);color:var(--blue)}

/* ===== ATALHOS na dashboard ===== */
.shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.short{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:15px 16px;cursor:pointer;transition:.15s}
.short:hover{border-color:var(--red);background:var(--red-soft)}
.short .si{width:36px;height:36px;border-radius:var(--r-btn);background:var(--bg-alt);display:grid;place-items:center;flex:0 0 36px}
.short:hover .si{background:#fff}
.short .si svg{width:18px;height:18px;color:var(--red)}
.short .st{font-weight:600;font-size:14px;color:var(--navy)}
.short .ss{font-size:12px;color:var(--text-dim)}

/* ===== PAGINAÇÃO ===== */
.pager{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:13px 22px;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-mid);background:var(--card)}
.pager .pg{display:flex;gap:6px;align-items:center}
.pager button{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--border-strong);background:#fff;border-radius:var(--r-btn);font-weight:600;font-size:13.5px;color:var(--text-mid);cursor:pointer;transition:.12s}
.pager button:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.pager button.on{background:var(--red);border-color:var(--red);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}
.pager .pg-gap{padding:0 4px;color:var(--text-dim)}
.pager .pg-of{color:var(--text-dim)}

/* ===== TABELA PADRÃO (dataTable): cabeçalho, toolbar, chips, ordenação =====
   A toolbar é IRMÃ de .lt-body dentro da .section.fill e não rola:
   dentro do .tscroll ela sumiria ao rolar; fora da .section quebra o min-height:0. */
.lt-toolbar{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:13px 22px;border-bottom:1px solid var(--border);background:var(--card)}
.lt-q{flex:1;min-width:210px}
/* filtro = <select> comum, na mesma linha da busca */
.lt-sel{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.lt-sel[hidden]{display:none}
.lt-sel>span{font-size:12px;font-weight:600;color:var(--text-dim);white-space:nowrap}
.lt-sel select{width:auto;min-width:170px;padding:9px 32px 9px 12px;font-size:13.5px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a91a5' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.lt-body{background:var(--card)}
/* ordenação: serve pro <th> das tabelas e pro cabeçalho em grid do DNS */
.sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s}
.sortable:hover{color:var(--red)}
.sortable:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:4px}
.sorted{color:var(--red)}
.sarr{display:inline-block;width:11px;margin-left:5px;font-size:9px;vertical-align:1px;opacity:.35;font-style:normal}
.sortable:hover .sarr,.sorted .sarr{opacity:1}
.tbl td.num,.tbl th.num{text-align:right;white-space:nowrap}
.tbl tfoot td.dim{color:var(--text-dim)}
.tbl tfoot tr.tot td{font-weight:700;color:var(--navy)}
.tbl td.act,.tbl th.act{text-align:right;white-space:nowrap}
/* ações de linha: TODOS do mesmo tamanho. Os rótulos são curtos de propósito
   ("Site ↗", "Painel ↗", "DNS", "Gerenciar") pra caberem todos no mesmo min-width. */
.tbl td.act .btn-sm{min-width:104px;height:34px;padding:0 14px;margin-left:8px;vertical-align:middle}
.tbl td.act .btn-sm:first-child{margin-left:0}
.tbl td.act .btn-sm.err{border-color:var(--red);color:var(--red)}
@media(max-width:640px){
  .lt-toolbar{padding:12px 16px}
  .lt-q{min-width:100%}
  .lt-sel{width:100%}
  .lt-sel select{flex:1;min-width:0}
}

/* voltar — botão chip, mesmo visual e espaçamento em TODAS as páginas */
.backlink{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-ctl);
  padding:10px 16px;margin:16px 0 14px;align-self:flex-start;flex:0 0 auto;
  color:var(--text-mid);font-family:var(--font);font-weight:600;font-size:13.5px;cursor:pointer;transition:.12s;box-shadow:0 1px 2px rgba(19,25,58,.05)}
.backlink:hover{color:var(--red);border-color:var(--red)}
.backlink svg{transition:transform .12s}
.backlink:hover svg{transform:translateX(-2px)}

/* ===== DETALHE (serviço/fatura/domínio) ===== */
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 34px}
.drow{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--border)}
.dl{color:var(--text-dim);font-size:13.5px}
.dv{font-weight:600;color:var(--navy);font-size:14px;text-align:right;word-break:break-word}

/* ===== HERO do serviço ===== */
.svc-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px;
  background:linear-gradient(120deg,var(--navy),#232a52);color:#fff}
.svc-hero-l{display:flex;align-items:center;gap:16px;min-width:0}
.svc-ico{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.13);display:grid;place-items:center;flex:0 0 54px}
.svc-ico svg{width:27px;height:27px;color:#fff}
.svc-hero-name{font-family:var(--display);font-weight:800;font-size:21px;color:#fff;line-height:1.2;word-break:break-word}
.svc-hero-sub{font-size:13.5px;color:rgba(255,255,255,.72);margin-top:3px;word-break:break-all}
.svc-hero-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto}
.ipcopy{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:var(--r-btn);padding:6px 11px;font-size:13px;font-family:var(--font);cursor:pointer;font-weight:600;white-space:nowrap}
.ipcopy:hover{background:rgba(255,255,255,.22)}
@media(max-width:600px){.svc-hero{flex-direction:column;align-items:flex-start}.svc-hero-r{align-items:flex-start}}

/* ===== LAYOUT DUAS COLUNAS (menu lateral + conteúdo), estilo gerência WHMCS ===== */
/* o card ocupa a altura disponível; só a coluna de conteúdo rola por dentro */
.svc-card{flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:0}
.svc-card .svc-hero{flex:0 0 auto}
.svc-card .svc-layout{flex:1;min-height:0}
.svc-layout{display:grid;grid-template-columns:236px 1fr;grid-template-rows:minmax(0,1fr);align-items:stretch}
.svc-menu{display:flex;flex-direction:column;gap:2px;padding:16px 12px;background:var(--bg-alt);border-right:1px solid var(--border);overflow-y:auto;min-height:0}
.smi{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;
  color:var(--text-mid);font-family:var(--font);font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;transition:.12s}
.smi svg{width:17px;height:17px;flex:0 0 17px;color:var(--text-dim)}
.smi:hover{background:rgba(19,25,58,.05);color:var(--navy)}
.smi:hover svg{color:var(--navy)}
.smi.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(19,25,58,.09)}
.smi.on svg{color:var(--red)}
.smi.danger{color:var(--text-mid)}
.smi.danger svg{color:var(--red)}
.smi.danger:hover{background:var(--red-soft);color:var(--red)}
.smi.danger.on{color:var(--red)}
.svc-content{padding:24px;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto}
.panel-t{font-family:var(--display);font-weight:800;font-size:18px;color:var(--navy);margin:0 0 16px;padding:0;border:0}
.panel-sub{font-family:var(--display);font-weight:700;font-size:14px;color:var(--navy);margin:22px 0 10px;padding:0;border:0}
.renewbox{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 18px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--r-sm)}
.renewbox .un{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
.renewbox .ubig{font-family:var(--display);font-weight:800;font-size:20px;color:var(--navy);margin-top:2px}
.renewbox .uv{font-size:12.5px;color:var(--text-mid);margin-top:2px}
/* Pix Automático (recorrência) */
.pixauto{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:15px 17px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-alt)}
.pixauto.on{border-color:rgba(22,163,74,.35);background:var(--green-soft,#f0fdf4)}
.pixauto.wait{border-color:rgba(217,119,6,.35);background:#fffbeb}
.pixauto .pa-ic{width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:0 0 38px;color:var(--navy);box-shadow:0 1px 3px rgba(19,25,58,.08)}
.pixauto.on .pa-ic{color:var(--green,#16a34a)}
.pixauto .pa-ic svg{width:19px;height:19px}
.pixauto .pa-main{flex:1;min-width:180px}
.pixauto .pa-t{font-weight:700;color:var(--navy);font-size:13.5px}
.pixauto.on .pa-t{color:var(--green,#16a34a)}
.pixauto .pa-d{font-size:12.5px;color:var(--text-mid);margin-top:2px}
.pixauto .pa-act{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:760px){.svc-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .svc-menu{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--border);padding:10px}
  .smi{white-space:nowrap;width:auto}.smi span{white-space:nowrap}
  .svc-content{padding:18px}}

/* ===== PAINEL DE MÓDULO (Virtualizor / cPanel) ===== */
.modpanel{margin-top:20px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.modpanel .mph{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.modpanel .mph .mt{font-family:var(--display);font-weight:700;color:var(--navy);font-size:15px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.modpanel .mpb{padding:20px}
.iconbtn{width:32px;height:32px;border:1px solid var(--border-strong);border-radius:var(--r-btn);background:#fff;color:var(--text-mid);display:grid;place-items:center;cursor:pointer;transition:.12s}
.iconbtn svg{width:16px;height:16px}
.iconbtn:hover{border-color:var(--red);color:var(--red)}

/* abas */
.vtabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px}
.vtab{border:none;background:transparent;color:var(--text-mid);font-family:var(--font);font-weight:600;font-size:13px;padding:7px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.12s}
.vtab:hover{color:var(--navy)}
.vtab.on{background:#fff;color:var(--red);box-shadow:var(--shadow-sm)}

/* estado + pílula */
.vps-state{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.vpspill{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;padding:6px 13px;border-radius:var(--r-btn);font-family:var(--display)}
.vpspill.on{background:var(--green-soft);color:var(--green)}
.vpspill.off{background:var(--grey-soft);color:var(--grey)}
.vps-state .dim{margin-right:auto}
.vpsdot{width:8px;height:8px;border-radius:50%;display:inline-block}
.vps-on{background:var(--green)} .vps-off{background:var(--grey)}

/* ações em ícones */
.vps-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
.vact{display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 6px;border:1px solid var(--border);border-radius:14px;background:#fff;
  cursor:pointer;font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--navy);transition:.14s;text-align:center}
.vact:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.vact:disabled{opacity:.4;cursor:default}
.vact .vic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center}
.vact .vic svg{width:21px;height:21px}
.vact.green .vic{background:var(--green-soft);color:var(--green)}
.vact.blue .vic{background:var(--blue-soft);color:var(--blue)}
.vact.red .vic{background:var(--red-soft);color:var(--red-dark)}
.vact.navy .vic{background:var(--navy);color:#fff}
.vact.slate .vic{background:var(--grey-soft);color:var(--grey)}

/* gráficos (gauge donut) + cards */
.charts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gauge{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.gauge svg{width:96px;height:96px}
.gauge .g-bg{fill:none;stroke:var(--bg-alt);stroke-width:9}
.gauge .g-fg{fill:none;stroke-width:9;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .5s}
.gauge .g-val{font-family:var(--display);font-weight:800;font-size:20px;fill:var(--navy);text-anchor:middle;dominant-baseline:central}
.gauge .g-cap{text-align:center}
.gauge .g-lbl{font-weight:700;font-size:13px;color:var(--navy)}
.gauge .g-sub{font-size:11.5px;color:var(--text-dim)}

/* seletor de período */
.vg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;flex-wrap:wrap;gap:10px}
.vg-title{font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy)}
.vg-periods{display:flex;gap:3px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-btn);padding:3px}
.vg-periods button{border:none;background:transparent;color:var(--text-mid);font-family:var(--font);font-weight:600;font-size:12.5px;padding:6px 13px;border-radius:7px;cursor:pointer;transition:.12s}
.vg-periods button:hover{color:var(--navy)}
.vg-periods button.on{background:#fff;color:var(--red);box-shadow:var(--shadow-sm)}

/* gráficos de área (CPU/memória — maiores, com grade + eixo + ponto) */
.vgraphs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.chart{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px 14px;min-height:212px}
.chart .ch-load{display:grid;place-items:center;height:172px}
.ch-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.ch-lbl{font-size:13px;color:var(--text-dim);font-weight:600}
.ch-big{font-family:var(--display);font-weight:800;font-size:28px;color:var(--navy);line-height:1.05;margin-top:3px}
.ch-sub{font-size:12px;color:var(--text-dim);text-align:right;max-width:52%;padding-top:4px}
.ch-plot{display:flex;gap:9px}
.ch-yax{display:flex;flex-direction:column;justify-content:space-between;height:120px;font-size:10px;color:var(--text-dim);text-align:right;flex:0 0 auto}
.ch-area{position:relative;flex:1;height:120px}
.ch-svg{width:100%;height:120px;display:block}
.ch-grid{stroke:var(--border);stroke-width:.5;vector-effect:non-scaling-stroke;stroke-dasharray:2 2}
.ch-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--c);border:2px solid var(--card);box-shadow:0 0 0 1.5px var(--c);transform:translate(-50%,-50%)}
.ch-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-top:10px;padding-left:32px}
@media(max-width:820px){.vgraphs{grid-template-columns:1fr}}

/* cards de uso */
.usage{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ucard{display:flex;gap:13px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:15px}
.ucard .uic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--bg-alt);color:var(--navy);display:grid;place-items:center}
.ucard .uic svg{width:19px;height:19px}
.ucard .ubody{flex:1;min-width:0}
.ucard .un{font-size:12px;color:var(--text-dim);margin-bottom:7px}
.ucard .ubig{font-family:var(--display);font-weight:800;font-size:19px;color:var(--navy);line-height:1.1;margin-bottom:3px}
.ucard .ut{height:7px;border-radius:6px;background:var(--bg-alt);overflow:hidden;margin-bottom:7px}
.ucard .uf{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--red),var(--red-dark))}
.ucard .uv{font-size:12px;color:var(--text-mid)}
.netrow{font-size:14px;color:var(--navy);font-weight:600;margin-top:5px;display:flex;align-items:center;gap:6px}
.netrow b{font-size:12px}
.netrow .dn{color:var(--green)} .netrow .up{color:var(--blue)}
.netrow .dim{font-weight:400}

/* mensagem de feedback */
.vmsg{display:block;font-size:13px;margin-top:10px;min-height:16px}

/* aviso destrutivo */
.warn{display:flex;gap:9px;align-items:flex-start;background:var(--amber-soft);border:1px solid #f6d9b8;color:#9a5a12;border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;line-height:1.5}
.warn svg{color:#c2410c}

/* botão perigoso */
.btn-sm.danger{background:var(--red-dark)}
.btn-sm.danger:hover{background:#b93016}
.btn-sm svg{width:15px;height:15px}

/* formulário vertical do painel */
.vform{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.ffield label{display:block;font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:7px}
.finput,.ac-input{width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);
  font-family:var(--font);font-size:14.5px;background:#fbfcff;color:var(--text);transition:.15s}
.finput:focus,.ac-input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-soft)}

/* autocomplete */
.ac{position:relative}
.ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#fff;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);box-shadow:var(--shadow);max-height:230px;overflow-y:auto;padding:5px}
.ac-item{padding:10px 12px;border-radius:8px;font-size:14px;color:var(--text);cursor:pointer}
.ac-item:hover{background:var(--red-soft);color:var(--red-dark)}
.ac-empty{padding:12px;font-size:13px;color:var(--text-dim);text-align:center}

/* cards de configuração */
.cfg{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.cfg:last-child{border-bottom:none;padding-bottom:2px}
.cfg-ico{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--bg-alt);color:var(--navy);display:grid;place-items:center}
.cfg-ico svg{width:20px;height:20px}
.cfg-main{flex:1;min-width:0}
.cfg-t{font-family:var(--display);font-weight:700;color:var(--navy);font-size:14.5px}
.cfg-d{font-size:12.5px;color:var(--text-dim);margin:2px 0 10px}
.cfg-row{display:flex;gap:10px;align-items:center}
.cfg-row .finput{flex:1}

/* modal */
.modal-ov{position:fixed;inset:0;z-index:100;background:rgba(23,28,54,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px 18px;overflow:hidden;animation:mfade .15s ease}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:520px;max-height:100%;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);box-shadow:0 24px 70px rgba(23,28,54,.35);overflow:hidden;animation:mslide .18s ease}
.modal-h{flex:0 0 auto}
.modal-b{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}  /* modal alto rola POR DENTRO — overlay/janela nunca mostram barra */
@keyframes mslide{from{transform:translateY(-12px);opacity:.6}to{transform:none;opacity:1}}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-h h3{font-size:17px}
.modal-x{width:32px;height:32px;border:none;background:var(--bg-alt);border-radius:var(--r-btn);color:var(--text-mid);font-size:15px;cursor:pointer;transition:.12s}
.modal-x:hover{background:var(--red-soft);color:var(--red)}
.modal-b{padding:22px}
/* modal de confirmação */
.modal-sm{max-width:430px}
.cf{text-align:center;padding:28px 26px 24px}
.cf-ico{width:54px;height:54px;border-radius:15px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;margin:0 auto 16px}
.cf-ico svg{width:26px;height:26px}
.cf-ico.danger{background:var(--red-soft);color:var(--red-dark)}
.cf-t{font-family:var(--display);font-weight:800;font-size:18px;color:var(--navy);margin-bottom:9px}
.cf-m{font-size:14px;color:var(--text-mid);line-height:1.55;margin-bottom:22px}
.cf-act{display:flex;gap:10px;justify-content:center}
.cf-act .btn-sm{padding:11px 22px}

/* contrato / faturamento — inline com os dados da VPS */
.bill-alert{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  background:var(--amber-soft);border:1px solid #f6d9b8;color:#9a5a12;border-radius:var(--r-sm);padding:11px 15px;font-size:13.5px}
.bill-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.btn-sm.danger-txt{color:var(--red-dark);border:1px solid var(--red-soft);background:transparent}
.btn-sm.danger-txt:hover{background:var(--red-soft);border-color:var(--red)}
/* mudar de plano */
.planlist{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}
.plan{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer;transition:.12s}
.plan:hover{border-color:var(--red)}
.plan:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.plan input{accent-color:var(--red)}
.pl-name{font-weight:600;color:var(--navy);flex:1}
.pl-price{font-family:var(--display);font-weight:700;color:var(--navy);white-space:nowrap}
.pl-price small{font-weight:400;color:var(--text-dim);font-size:11px}
.pl-tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:12px;white-space:nowrap}
.pl-tag.upgrade{background:var(--green-soft);color:var(--green)}
.pl-tag.downgrade{background:var(--amber-soft);color:var(--amber)}
.upcalc-box{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;background:var(--green-soft);border-radius:var(--r-sm);font-size:13px;color:var(--text-mid)}
.upcalc-box strong{font-family:var(--display);font-size:19px;color:var(--navy)}
/* radio (cancelar) */
.radio{display:flex;align-items:center;gap:9px;padding:7px 0;font-weight:500;color:var(--text);cursor:pointer;font-size:14px}
.radio input{accent-color:var(--red)}

@media(max-width:820px){.charts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .mph{flex-wrap:wrap}
  .vps-actions{grid-template-columns:repeat(3,1fr)}
  .charts{grid-template-columns:1fr}
  .usage{grid-template-columns:1fr}
  .cfg-row{flex-wrap:wrap}
}

/* ===== FORMULÁRIOS ===== */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:6px}
.field input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-family:var(--font);font-size:14.5px;background:#fbfcff;color:var(--text);transition:.15s}
.field input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-soft)}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}

/* ===== THREAD DE TICKETS ===== */
/* ===== CHAT DO SUPORTE ===== */
.chat-card{display:flex;flex-direction:column;overflow:hidden}
.chat-head{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--border);background:var(--bg-alt)}
.chat-t{font-family:var(--display);font-weight:800;font-size:16px;color:var(--navy);line-height:1.25}
.chat-sub{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.chat-head-r{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 22px;display:flex;flex-direction:column;gap:10px;background:#fff}
.chat-day{display:flex;align-items:center;gap:12px;margin:8px 0 2px;color:var(--text-dim);font-size:11.5px}
.chat-day::before,.chat-day::after{content:"";flex:1;height:1px;background:var(--border)}
.chat-row{display:flex}
.chat-row.me{justify-content:flex-end}
.chat-row.sup{justify-content:flex-start}
.chat-b{width:min(620px,86%);padding:16px 19px;border-radius:15px;font-size:15px;line-height:1.55;position:relative}
.chat-row.me .chat-b{background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.chat-row.sup .chat-b{background:var(--bg-alt);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px}
.chat-de{font-size:11.5px;font-weight:700;color:var(--red);margin-bottom:3px}
.chat-txt{word-wrap:break-word;white-space:pre-line}
.chat-h{font-size:10.5px;opacity:.65;margin-top:5px;text-align:right}
.chat-b.sending{opacity:.65}
.chat-b.error{background:var(--red-soft)!important;color:var(--red-dark)!important;border:1px solid var(--red)!important;cursor:pointer}
.chat-b.error .chat-h{color:var(--red-dark);opacity:1}
.chat-composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--border);background:var(--bg-alt)}
.chat-composer textarea{flex:1;min-width:0;resize:none;border:1px solid var(--border-strong);border-radius:12px;padding:13px 16px;font-size:14.5px;font-family:var(--font);line-height:1.45;max-height:132px;background:#fff}
.chat-composer textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.chat-send{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:none;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.12s}
.chat-send:hover{background:var(--red-dark)}
.chat-send svg{width:19px;height:19px;margin-left:-2px}
@media(max-width:600px){.chat-b{max-width:88%}.chat-scroll{padding:14px}}
/* layout chat + painel de informações */
.chat-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:stretch}
.tk-info{padding:20px;overflow-y:auto;min-height:0;margin-bottom:0}
.tki-t{font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--navy);padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.tki-row{padding:11px 0;border-bottom:1px solid var(--border)}
.tki-row:last-child{border-bottom:none}
.tki-l{display:block;font-size:11.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.tki-v{font-size:13.5px;color:var(--text);font-weight:600}
.tki-tag{display:inline-block;background:var(--green-soft,#f0fdf4);color:var(--green,#16a34a);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;margin-left:6px;vertical-align:1px}
/* ferramentas do composer (anexo + formatação) */
.chat-tools{display:flex;gap:6px;align-self:flex-end;padding-bottom:2px}
.ct-btn{width:38px;height:38px;border:1px solid var(--border-strong);border-radius:10px;background:#fff;color:var(--text-mid);display:grid;place-items:center;cursor:pointer;transition:.12s;font-family:var(--display);font-size:14px}
.ct-btn:hover{border-color:var(--red);color:var(--red)}
.ct-btn svg{width:17px;height:17px}
.ct-b{font-weight:800}
.ct-i{font-style:italic;font-weight:600}
.chat-inputwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.chat-files{display:flex;flex-wrap:wrap;gap:6px}
.chat-files:empty{display:none}
.chat-fchip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-btn);padding:5px 9px;font-size:12px;color:var(--text-mid);max-width:240px}
.chat-fchip svg{width:13px;height:13px;flex:0 0 13px;color:var(--red)}
.chat-fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-fchip button{border:none;background:none;color:var(--text-dim);cursor:pointer;font-size:12px;padding:0 2px}
.chat-fchip button:hover{color:var(--red)}
/* anexos dentro da bolha */
.chat-atts{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.chat-att{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:6px 10px;font-size:12.5px;color:inherit;text-decoration:none;max-width:100%}
.chat-row.sup .chat-att{background:#fff;border-color:var(--border-strong);color:var(--text)}
.chat-att svg{width:14px;height:14px;flex:0 0 14px}
.chat-att span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-att:hover{border-color:var(--red)}
.chat-b code{background:rgba(0,0,0,.14);border-radius:5px;padding:1px 6px;font-family:var(--mono,monospace);font-size:12.5px}
.chat-row.sup .chat-b code{background:rgba(19,25,58,.08)}
.chat-b a{color:inherit;text-decoration:underline}
/* ===== AUTH EM MODAL (carrinho) ===== */
.modal-auth .modal-h{border-bottom:none;padding:10px 14px 0;position:relative;z-index:2}
.modal-auth .modal-h h3{display:none}
.modal-auth .modal-x{margin-left:auto}
.modal-auth .modal-b{padding-top:0}
.auth-hero{text-align:center;padding:2px 10px 18px}
.auth-ico{width:58px;height:58px;border-radius:16px;background:var(--red-soft);color:var(--red);display:inline-grid;place-items:center;margin-bottom:12px;animation:wizin .3s ease}
.auth-ico svg{width:27px;height:27px}
.auth-t{font-family:var(--display);font-weight:800;font-size:21px;color:var(--navy)}
.auth-sub{font-size:13px;color:var(--text-mid);margin-top:6px;line-height:1.55}
.auth-sub strong{color:var(--navy)}
.auth-tabs{display:flex;gap:5px;padding:5px;background:var(--bg-alt);border-radius:12px}
.auth-tab{flex:1;padding:12px;border:1px solid transparent;border-radius:var(--r-btn);background:transparent;color:var(--text-mid);
  font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;transition:.12s;text-align:center}
.auth-tab.on{background:#fff;color:var(--navy);border-color:var(--border);box-shadow:0 1px 3px rgba(19,25,58,.08)}

/* ===== CARRINHO ===== */
.cart-badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;padding:0 6px}
.nav a.on .cart-badge{background:#fff;color:var(--red)}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.cart-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.cart-item:last-of-type{border-bottom:none}
.ci-ic{width:44px;height:44px;border-radius:12px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex:0 0 44px}
.ci-ic svg{width:20px;height:20px}
.ci-main{flex:1;min-width:0}
.ci-name{font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--navy);display:flex;align-items:center;gap:7px}
.ci-sub{font-size:12px;color:var(--text-mid);margin-top:2px}
.ci-qty{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy)}
.ci-qbtn{width:26px;height:26px;border:1px solid var(--border-strong);border-radius:8px;background:#fff;color:var(--text-mid);cursor:pointer;font-size:14px;line-height:1}
.ci-qbtn:hover{border-color:var(--red);color:var(--red)}
.ci-price{font-family:var(--display);font-weight:800;font-size:15px;color:var(--navy);min-width:90px;text-align:right}
.ci-del{border:none;background:none;color:var(--text-dim);cursor:pointer;font-size:14px;padding:4px}
.ci-del:hover{color:var(--red)}
@media(max-width:860px){.cart-layout{grid-template-columns:1fr}}
/* modo convidado: só Contratar/Carrinho na navegação */
body.guest .nav a:not([data-view="order"]):not([data-view="cart"]){display:none}
body.guest .side-logout{display:none}

/* ===== CONTRATAR: wizard ===== */
.wiz{padding:30px 34px;max-width:1020px;margin:0 auto}
.wiz-steps{display:flex;align-items:center;gap:0;margin-bottom:28px;max-width:640px;margin-left:auto;margin-right:auto}
.wiz-step{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:default;font-family:var(--font);padding:0}
.wiz-step.done{cursor:pointer}
.wiz-dot{width:32px;height:32px;border-radius:50%;background:var(--bg-alt);border:2px solid var(--border-strong);color:var(--text-dim);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;transition:.25s}
.wiz-step.on .wiz-dot{background:var(--red);border-color:var(--red);color:#fff;animation:wizpulse 1.8s ease-out infinite}
.wiz-step.done .wiz-dot{background:var(--green);border-color:var(--green);color:#fff}
@keyframes wizpulse{0%{box-shadow:0 0 0 0 rgba(232,67,42,.35)}70%{box-shadow:0 0 0 9px rgba(232,67,42,0)}100%{box-shadow:0 0 0 0 rgba(232,67,42,0)}}
.wiz-lbl{font-size:12.5px;font-weight:600;color:var(--text-dim);white-space:nowrap}
.wiz-step.on .wiz-lbl{color:var(--navy)}
.wiz-step.done .wiz-lbl{color:var(--green)}
.wiz-line{flex:1;height:2px;background:var(--border);margin:0 10px;min-width:22px;position:relative;overflow:hidden}
.wiz-line.fill::after{content:"";position:absolute;inset:0;background:var(--green);animation:wizfill .4s ease}
@keyframes wizfill{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}
.wiz-title{font-family:var(--display);font-weight:800;font-size:20px;color:var(--navy);margin-bottom:22px;text-align:center}
.wiz-body{min-height:460px;animation:wizin .32s ease;display:flex;flex-direction:column}
.wiz-body>.wiz-title{flex:0 0 auto}
@keyframes wizin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--border)}
.wiz-nav .btn-sm{padding:12px 24px}
/* bandeiras */
.flag{width:22px;height:16px;border-radius:3px;display:inline-block;vertical-align:-3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
/* passo 1: tipos */
.wiz-types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.wiz-types{grid-template-columns:repeat(2,1fr)}}
.wiz-type{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:24px 18px;border:1.5px solid var(--border-strong);border-radius:16px;
  background:#fff;cursor:pointer;font-family:var(--font);transition:.18s;animation:wizin .32s ease backwards}
.wiz-type:nth-child(2){animation-delay:.06s}.wiz-type:nth-child(3){animation-delay:.12s}.wiz-type:nth-child(4){animation-delay:.18s}
.wiz-type:hover{border-color:var(--red);transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow)}
.wt-ic{width:52px;height:52px;border-radius:14px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;transition:.18s}
.wiz-type:hover .wt-ic{background:var(--red);color:#fff;transform:scale(1.08)}
.wt-ic svg{width:24px;height:24px}
.wt-t{font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--navy)}
.wt-d{font-size:12.5px;color:var(--text-mid);line-height:1.45;min-height:36px}
.wt-p{font-size:12px;color:var(--text-dim);margin-top:2px}
.wt-p strong{color:var(--red)}
/* passo 2: localização + planos */
.wiz-locs{display:flex;gap:10px;margin-bottom:18px;justify-content:center}
.wloc{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border:1.5px solid var(--border-strong);border-radius:12px;background:#fff;font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--text-mid);cursor:pointer;transition:.15s}
.wloc:hover{border-color:var(--red)}
.wloc.on{border-color:var(--navy);background:var(--navy);color:#fff;transform:scale(1.03)}
.wloc.on .dim{color:rgba(255,255,255,.7)}
.wiz-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.wplan{display:flex;flex-direction:column;gap:6px;padding:17px 18px;border:1.5px solid var(--border-strong);border-radius:14px;background:#fff;
  cursor:pointer;font-family:var(--font);text-align:left;transition:.15s;animation:wizin .3s ease backwards}
.wplan:nth-child(2){animation-delay:.04s}.wplan:nth-child(3){animation-delay:.08s}.wplan:nth-child(4){animation-delay:.12s}
.wplan:nth-child(5){animation-delay:.16s}.wplan:nth-child(6){animation-delay:.2s}
.wplan:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.wplan.on{border-color:var(--red);background:var(--red-soft);transform:scale(1.02)}
.wp-name{font-family:var(--display);font-weight:800;font-size:18px;color:var(--navy)}
.wp-specs{font-size:11.5px;color:var(--text-mid);line-height:1.45}
.wp-price{font-family:var(--display);font-weight:800;font-size:17px;color:var(--red);margin-top:4px}
.wp-price small{font-size:11px;color:var(--text-dim);font-weight:600}
/* passo 3: ciclos */
.wiz-cfg{max-width:620px;margin:0 auto}
.wiz-cycles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.wcycle{display:flex;flex-direction:column;gap:3px;padding:15px 17px;border:1.5px solid var(--border-strong);border-radius:13px;background:#fff;
  cursor:pointer;font-family:var(--font);text-align:left;transition:.14s}
.wcycle:hover{border-color:var(--red);transform:translateY(-2px)}
.wcycle.on{border-color:var(--red);background:var(--red-soft);transform:scale(1.02)}
.wc-n{font-size:12.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:6px}
.wc-v{font-family:var(--display);font-weight:800;font-size:17px;color:var(--navy)}
.wc-per{font-size:11px;color:var(--text-dim)}
/* passo 4: revisão (recibo) */
.wiz-rev{max-width:620px;margin:0 auto;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.wr-head{display:flex;align-items:center;gap:14px;padding:20px 22px;background:linear-gradient(120deg,var(--navy),#232a52);color:#fff}
.wr-head .wt-ic{background:rgba(255,255,255,.14);color:#fff;flex:0 0 52px}
.wr-hmain{flex:1;min-width:0}
.wr-name{font-family:var(--display);font-weight:800;font-size:17px;color:#fff}
.wr-specs{font-size:12px;color:rgba(255,255,255,.75);margin-top:3px;line-height:1.4}
.wr-flag{display:flex;flex-direction:column;align-items:center;gap:3px}
.wr-flag .flag{width:30px;height:21px}
.wr-flag small{font-size:10.5px;color:rgba(255,255,255,.7)}
.wr-rows{padding:6px 22px;background:#fff}
.wr-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-mid);animation:wizin .3s ease backwards}
.wr-row:nth-child(2){animation-delay:.07s}.wr-row:nth-child(3){animation-delay:.14s}.wr-row:nth-child(4){animation-delay:.21s}
.wr-row:last-child{border-bottom:none}
.wr-row strong{color:var(--navy);text-align:right}
.wr-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;background:var(--red-soft);border-top:1px solid var(--border)}
.wr-tl{display:block;font-size:12px;color:var(--text-mid);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.wr-eq{display:block;font-size:11.5px;color:var(--text-dim);margin-top:2px}
.wr-total>strong{font-family:var(--display);font-weight:800;font-size:28px;color:var(--navy)}
.wiz-pay-hint{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;color:var(--text-dim);font-size:12.5px}
.wiz-pay-hint svg{width:17px;height:17px;color:var(--text-mid)}
#wGo{padding:13px 30px;font-size:14px}
@media(max-width:700px){.wiz{padding:18px}.wiz-lbl{display:none}.wiz-body{min-height:320px}.wiz-types{grid-template-columns:1fr 1fr}}

/* ===== CONTRATAR: vitrine + configuração ===== */
.otabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.otab{padding:10px 18px;border:1px solid var(--border-strong);border-radius:22px;background:#fff;color:var(--text-mid);
  font-family:var(--font);font-size:13.5px;font-weight:600;cursor:pointer;transition:.12s}
.otab:hover{border-color:var(--red);color:var(--red)}
.otab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ocard{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.15s}
.ocard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.oc-name{font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--navy)}
.oc-price{font-family:var(--display);font-weight:800;font-size:28px;color:var(--navy);margin:10px 0 14px}
.oc-cur{font-size:14px;font-weight:700;vertical-align:14px;margin-right:2px;color:var(--text-mid)}
.oc-per{font-size:12.5px;font-weight:600;color:var(--text-dim);margin-left:3px}
.oc-specs{list-style:none;margin:0 0 18px;padding:0;flex:1}
.oc-specs li{font-size:12.5px;color:var(--text-mid);padding:4px 0 4px 20px;position:relative}
.oc-specs li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.oc-go{width:100%;justify-content:center;padding:11px}
.ocfg{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.ocfg-specs{columns:2;margin-bottom:6px}
.ocfg-resume{position:sticky;top:0}
.orow{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-mid)}
.orow strong{color:var(--navy)}
.orow.ototal{border-bottom:none;padding:14px 0;font-size:15px}
.orow.ototal strong{font-family:var(--display);font-size:22px}
.odom .radio{display:block;padding:6px 0}
.pl-tag{display:inline-block;background:var(--green-soft);color:var(--green);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;margin-left:6px}
#oGo{justify-content:center;margin-top:8px}
@media(max-width:860px){.ocfg{grid-template-columns:1fr}.ocfg-resume{position:static}.ocfg-specs{columns:1}}

/* preview de anexo (imagem) em modal — grande, quase tela cheia */
.modal-att{max-width:min(1240px,94vw)}
.att-prev{background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.att-prev img{max-width:100%;max-height:80vh;border-radius:8px;display:inline-block}
@media(max-width:900px){.chat-layout{display:flex;flex-direction:column}.tk-info{order:-1;flex:0 0 auto;max-height:180px}.chat-card{min-height:420px}}

/* ===== SKELETON (mock enquanto carrega) ===== */
.sk{position:relative;overflow:hidden;background:var(--bg-alt);border-radius:7px;display:block}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shine 1.25s infinite}
@keyframes shine{100%{transform:translateX(100%)}}
.sk-line{height:12px;margin:7px 0}
.sk-h{height:20px;width:180px;margin-bottom:14px}
.sk-cell{height:13px}
.sk-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-sm)}
.sk-chip{height:38px;width:38px;border-radius:10px;margin-bottom:12px}

/* ===== RESPONSIVO ===== */
.menu-btn{display:none;place-items:center;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
@media(max-width:900px){
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-100%;z-index:50;transition:.2s;width:var(--sidebar-w)}
  .sidebar.open{left:0}
  .topbar{padding:14px 20px}
  .pagehead{padding:18px 20px 12px}
  .views{padding:0 20px 20px}
  .menu-btn{display:grid}
  .stats,.shortcuts{grid-template-columns:repeat(2,1fr)}
  .usage{grid-template-columns:1fr}
}
@media(max-width:600px){.dgrid,.grid2{grid-template-columns:1fr}.stats,.shortcuts{grid-template-columns:1fr}}

/* ===== CHECKOUT TRANSPARENTE (Pix / Cartão / Boleto) — em modal ===== */
.modal-pay{max-width:500px}                 /* tamanho fixo do modal de pagamento */
.cko-amt{text-align:center;color:var(--text-mid);font-size:13px;margin-bottom:16px}
.cko-amt strong{display:block;font-family:var(--display);font-weight:800;font-size:26px;color:var(--navy);margin-top:3px}
.cko-tabs{display:flex;gap:5px;padding:6px;background:var(--bg-alt);border-radius:13px}
.cko-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--text-mid);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:.12s}
.cko-tab svg{width:24px;height:24px;color:var(--text-dim)}
.cko-tab:hover{color:var(--navy)}
.cko-tab.on{background:#fff;color:var(--navy);border-color:var(--border);box-shadow:0 1px 4px rgba(19,25,58,.1)}
.cko-tab.on svg{color:var(--red)}
.cko-body{padding:20px 0 2px;min-height:352px;display:flex;flex-direction:column;justify-content:center}
/* botões do checkout: mesmo padrão/estilo do painel, só mais altos */
.cko-body .btn-sm{padding:15px 18px}
.cko-body .pix-cc .btn-sm{padding:12px 16px}
.cko-load{display:grid;place-items:center;min-height:180px}
/* processando (anima o ícone do método) */
.cko-proc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:300px;text-align:center;padding:20px}
.cko-proc-ov{position:absolute;inset:0;background:rgba(255,255,255,.96);z-index:6;border-radius:12px;animation:ckofade .2s ease}
.cko-proc-ring{width:92px;height:92px;position:relative;display:grid;place-items:center}
.cko-proc-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid var(--red-soft);border-top-color:var(--red);animation:ckospin .85s linear infinite}
.cko-proc-ring::after{content:"";position:absolute;inset:9px;border-radius:50%;border:3px solid transparent;border-bottom-color:var(--navy);opacity:.5;animation:ckospin 1.3s linear infinite reverse}
.cko-proc-ring svg{width:34px;height:34px;color:var(--navy);animation:ckopulse 1.4s ease-in-out infinite}
.cko-proc-ring svg rect,.cko-proc-ring svg path{fill:currentColor}
.cko-proc-t{font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy)}
.cko-proc-sub{font-size:12.5px;color:var(--text-dim)}
@keyframes ckospin{to{transform:rotate(360deg)}}
@keyframes ckopulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.14);opacity:1}}
@keyframes ckofade{from{opacity:0}to{opacity:1}}
.cko-err{padding:16px;background:var(--red-soft);color:var(--red);border-radius:var(--r-sm);font-size:13.5px;text-align:center}
.spin.sm{width:15px;height:15px;border-width:2px;display:inline-block;vertical-align:middle}

/* Pix Automático no checkout (Jornada 3: paga + autoriza no mesmo QR) */
.pxa-opt{display:flex;align-items:flex-start;gap:12px;text-align:left;margin:0 0 16px;padding:13px 15px;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer;transition:.12s;background:var(--bg-alt)}
.pxa-opt:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.pxa-opt input{position:absolute;opacity:0;pointer-events:none}
.pxa-sw{flex:0 0 40px;width:40px;height:22px;border-radius:22px;background:var(--border-strong);position:relative;transition:.15s;margin-top:2px}
.pxa-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pxa-opt input:checked+.pxa-sw{background:var(--red)}
.pxa-opt input:checked+.pxa-sw::after{left:20px}
.pxa-txt{font-size:13px;color:var(--navy);line-height:1.35}
.pxa-txt small{display:block;color:var(--text-mid);font-size:12px;margin-top:2px}
.pxa-badge{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:10px;background:var(--red-soft);
  color:var(--navy);font-size:12.5px;text-align:left}
.pxa-badge svg{width:16px;height:16px;flex:0 0 16px;color:var(--red)}
.pxa-ok{display:flex;align-items:center;gap:9px;margin-top:6px;padding:10px 14px;border-radius:10px;
  background:var(--green-soft,#f0fdf4);color:var(--navy);font-size:12.5px}
.pxa-ok svg{width:16px;height:16px;flex:0 0 16px;color:var(--green,#16a34a)}

/* Pix */
.cko-pix-start{text-align:center;padding:14px 0}
.cko-pix-start .btn-sm{display:inline-flex;width:100%;justify-content:center;align-items:center;gap:8px}
.cko-pix-start .btn-sm svg{width:17px;height:17px}
.cko-pix{display:flex;flex-direction:column;align-items:center;gap:12px}
.pix-qr{width:220px;height:220px;border:1px solid var(--border);border-radius:12px;padding:8px;background:#fff}
.pix-amt{font-family:var(--display);font-weight:800;font-size:22px;color:var(--navy)}
.pix-cc{display:flex;gap:8px;width:100%;max-width:420px}
.pix-cc input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r-sm);font-size:12.5px;color:var(--text-mid);background:var(--bg-alt);font-family:var(--mono,monospace)}
.pix-wait{display:flex;align-items:center;gap:8px;color:var(--text-mid);font-size:13px}

/* Formulários (cartão/boleto) */
.cko-form{display:flex;flex-direction:column;gap:13px}
.cko-form .ff{display:flex;flex-direction:column;gap:5px;min-width:0}
.cko-form .ff-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cko-form label{font-size:12px;font-weight:600;color:var(--text-mid)}
.cko-form input,.cko-form select{width:100%;min-width:0;padding:12px 13px;border:1px solid var(--border-strong);border-radius:var(--r-sm);font-size:14px;font-family:var(--font);color:var(--text);transition:.12s;background:#fff}
.cko-form input:focus,.cko-form select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.cko-lock{font-size:11.5px;color:var(--text-dim);text-align:center}

/* Sucesso / boleto gerado */
.cko-paid,.cko-done{text-align:center;padding:20px 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.cko-check{width:56px;height:56px;border-radius:50%;background:var(--green,#16a34a);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:800}
.cko-paid-t,.cko-done-t{font-family:var(--display);font-weight:800;font-size:18px;color:var(--navy)}
.cko-done .pix-cc{width:100%;max-width:420px}
.cko-done>.btn-sm{width:100%;max-width:420px}   /* só o botão do PDF, não o "Copiar" da linha */
.cko-field{width:100%;max-width:420px;display:flex;flex-direction:column;gap:6px}
.cko-field-l{font-size:12px;font-weight:600;color:var(--text-mid);text-align:left}
.boleto-bcwrap{width:100%;max-width:420px;background:#fff;padding:14px 12px;border:1px solid var(--border);border-radius:10px}
.boleto-bc{width:100%;height:64px;display:block}
@media(max-width:600px){.cko-form .ff-row{grid-template-columns:1fr}.pix-qr{width:190px;height:190px}}

/* ---- busca de domínio ---- */
.dom-sub{margin:0 0 16px;font-size:13.5px}
.dom-bar{display:flex;gap:10px;max-width:560px}
.dom-bar .finput{flex:1;height:46px;font-size:15px}
.dom-btn{padding:0 26px;height:46px;flex-shrink:0}
.dom-res{margin-top:18px}
.dom-msg{margin-top:12px;font-size:13px}
.dom-load{padding:14px 2px;font-size:14px}
.dr-list{display:flex;flex-direction:column;gap:8px;max-width:640px}
.dr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.dr-nm{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:9px;min-width:0;word-break:break-all}
.dr-tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--r-chip);white-space:nowrap}
.dr-tag.ok{background:var(--green-soft);color:var(--green)}
.dr-tag.no{background:var(--bg-alt);color:var(--text-dim)}
.dr-rt{display:flex;align-items:center;gap:14px;flex-shrink:0}
.dr-price{font-weight:700;font-size:14.5px;white-space:nowrap}
.dr-price small{font-weight:500;font-size:11px;color:var(--text-dim);margin-left:2px}
.dr-taken{color:var(--text-dim);font-size:13px}
.dr-incart{color:var(--green);font-weight:600;font-size:13px;white-space:nowrap}
.dom-note{margin-top:16px;font-size:12.5px}
@media(max-width:600px){.dr-row{flex-direction:column;align-items:flex-start;gap:8px}.dr-rt{width:100%;justify-content:space-between}}

/* ---- status de verificação de domínio ---- */
.dchk{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:10px;margin-top:8px}
.dchk svg{width:19px;height:19px;flex-shrink:0;margin-top:1px}
.dchk-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.dchk-t{font-size:13.5px;font-weight:700;line-height:1.25;word-break:break-word}
.dchk-sub{font-size:12px;font-weight:500;line-height:1.3;opacity:.85}
.dchk.ok{background:var(--green-soft);color:var(--green)}
.dchk.no{background:var(--red-soft);color:var(--red-dark)}
.dchk.info,.dchk.load{background:var(--bg-alt);color:var(--text-mid)}
.dchk-sp{width:16px;height:16px;border:2.5px solid var(--border-strong);border-top-color:var(--text-mid);border-radius:50%;flex-shrink:0;margin-top:1px;animation:dchk-spin .7s linear infinite}
@keyframes dchk-spin{to{transform:rotate(360deg)}}

/* ---- CTA "só um domínio" no wizard ---- */
.wiz-domcta{display:flex;align-items:center;gap:14px;width:100%;margin-top:20px;padding:15px 20px;border:1px dashed var(--border-strong);border-radius:14px;background:var(--bg-alt);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.wiz-domcta:hover{border-color:var(--red);background:var(--red-soft)}
.wdc-ic{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:10px;background:var(--card);color:var(--red)}
.wdc-ic svg{width:22px;height:22px}
.wdc-tx{flex:1;font-size:13.5px;color:var(--text-mid);line-height:1.35}
.wdc-tx strong{color:var(--text)}
.wdc-go{font-weight:700;font-size:13.5px;color:var(--red);white-space:nowrap;flex-shrink:0}
@media(max-width:600px){.wiz-domcta{flex-direction:column;align-items:flex-start;gap:10px}}

/* ---- gerenciamento de domínio ---- */
.dns-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px}
.tgl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.tgl-row:last-of-type{border-bottom:none}
.tgl-tx{min-width:0}
.tgl-t{font-weight:600;font-size:13.5px}
.tgl-d{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.tgl{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;cursor:pointer}
.tgl input{opacity:0;width:0;height:0}
.tgl-s{position:absolute;inset:0;background:var(--border-strong);border-radius:20px;transition:.2s}
.tgl-s::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgl input:checked+.tgl-s{background:var(--green)}
.tgl input:checked+.tgl-s::before{transform:translateX(18px)}
.tgl input:disabled+.tgl-s{opacity:.5}
.epp-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:700;letter-spacing:.5px;background:var(--bg-alt);border:1px dashed var(--border-strong);border-radius:8px;padding:12px 14px;max-width:440px;word-break:break-all;user-select:all}
@media(max-width:600px){.dns-grid{grid-template-columns:1fr}}
.dom-tf{display:flex;gap:10px;flex-wrap:wrap;max-width:700px}
.dom-tf .finput{flex:1;min-width:190px;height:46px;font-size:15px}   /* mesma altura da busca acima */
.dns-head,.dns-row{display:grid;grid-template-columns:1.2fr 92px 2fr 66px 30px;gap:8px;align-items:center}
.dns-head{font-size:10.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;padding:0 2px}
.dns-row{margin-bottom:8px}
.dns-row .finput{padding:9px 10px;font-size:13px}
.dns-del{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;line-height:1;padding:4px}
.dns-del:hover{color:var(--red)}
@media(max-width:640px){.dom-tf{flex-direction:column}.dns-head,.dns-row{grid-template-columns:1fr 72px 1.4fr 46px 26px;gap:5px}}

/* ---- animação de entrada (padrão do painel) ---- */
.anim-in{opacity:0;transform:translateY(10px);animation:animIn .4s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes animIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.anim-in{animation:none;opacity:1;transform:none}}

/* ---- hero do domínio ---- */
.dm-hero{padding:24px}
.dm-htop{display:flex;align-items:center;gap:14px}
.dm-ico{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;border-radius:13px;background:var(--red-soft);color:var(--red)}
.dm-ico svg{width:24px;height:24px}
.dm-ico.sm{width:40px;height:40px;border-radius:11px}.dm-ico.sm svg{width:20px;height:20px}
.dm-htx{flex:1;min-width:0}
.dm-htx h2{padding:0;border:none;margin:0;font-size:20px;font-weight:800;word-break:break-all}
.dm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.dm-stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--bg-alt);border-radius:11px}
.dm-stat>span{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em}
.dm-stat>strong{font-size:15px;font-weight:700}
.dm-stat>small{font-size:11.5px;color:var(--text-dim)}
.dm-stat>small.urg{color:var(--red);font-weight:700}
.dm-bar{height:5px;border-radius:6px;background:var(--bg-alt);margin-top:16px;overflow:hidden}
.dm-bar i{display:block;height:100%;border-radius:6px;background:var(--green);transition:width .8s cubic-bezier(.2,.7,.3,1)}
.dm-bar i.urg{background:var(--red)}
/* cabeçalho + corpo das seções do domínio: mesma anatomia do `.section>h2` do resto do painel */
.dm-sec-b .tgl-row:first-of-type{padding-top:0}
.dm-sub{margin:0 0 14px;font-size:13px}
.dm-msg{font-size:12.5px}
.dm-msg .ok{color:var(--green);font-weight:600}
.dm-msg .bad{color:var(--red);font-weight:600}
/* placeholder borrado: mesma silhueta do campo real, conteúdo ilegível de propósito.
   Preenche o vazio dos ~3s de consulta ao registrador sem parecer tela quebrada. */
.ghost-inp{height:46px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--border);
  border-radius:var(--r-ctl);background:#fbfcff;color:var(--text-dim);font-size:14.5px;
  white-space:nowrap;overflow:hidden;filter:blur(3.5px);user-select:none;pointer-events:none;
  animation:ghostPulse 1.5s ease-in-out infinite}
.ghost-inp.sm{height:38px;font-size:13px;filter:blur(3px)}
.dns-row.ghost{margin-bottom:8px}
@keyframes ghostPulse{0%,100%{opacity:.5}50%{opacity:.8}}
@media(prefers-reduced-motion:reduce){.ghost-inp{animation:none;opacity:.6}}
@keyframes skShine{0%{background-position:100% 50%}100%{background-position:0 50%}}
.tgl-row.loading{opacity:.55}
.dm-epp{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.dm-dns-cta{display:flex;align-items:center;gap:14px;width:100%;margin-top:16px;padding:18px 22px;border:none;cursor:pointer;text-align:left;transition:transform .15s,box-shadow .15s}
.dm-dns-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,28,54,.09)}
.dm-dns-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.dm-dns-tx strong{font-size:14px;color:var(--text)}
.dm-dns-tx span{font-size:12.5px;color:var(--text-dim)}
.dm-dns-go{font-weight:700;font-size:13.5px;color:var(--red);white-space:nowrap}

/* ---- página de DNS (toolbar/chips/paginação usam o padrão .lt-* e .pager) ---- */
.dns-nozone{display:flex;gap:14px;align-items:flex-start;padding:22px;background:var(--bg-alt);border-radius:13px}
.dns-nz-tx{flex:1;min-width:0}
.dns-nz-tx strong{display:block;font-size:14.5px;margin-bottom:6px}
.dns-nz-tx p{margin:0 0 8px;font-size:13px;color:var(--text-mid);line-height:1.45}
.dns-nz-tx code{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:1px 7px;font-size:12.5px;font-family:ui-monospace,Menlo,monospace}
@media(max-width:640px){.dm-stats{grid-template-columns:1fr}.dm-dns-cta{flex-wrap:wrap}.dns-nozone{flex-direction:column}}

/* páginas de detalhe (domínio/DNS): não esticar em telas largas */
/* corpo do editor de DNS: rola por dentro do card, cabeçalho fica grudado no topo */
.dns-body{padding:0 22px 16px}
.dns-body .dns-head{position:sticky;top:0;z-index:2;background:var(--card);padding:14px 2px 9px;margin:0}
.dns-body .dns-head,.dns-body .dns-row{grid-template-columns:1.1fr 104px 1.8fr 78px 34px}
.lt-acts{display:flex;gap:8px;flex:0 0 auto}
a.btn-sm{text-decoration:none}

/* cabeçalho de seção com atalho pra lista completa */
.sec-more{background:none;border:none;color:var(--red);font-weight:700;font-size:13px;cursor:pointer;
 padding:6px 10px;border-radius:8px;white-space:nowrap;transition:background .15s}
.sec-more:hover{background:var(--red-soft)}

/* ===== MÓDULO cPANEL — panorama da conta (paridade com o que o WHMCS mostra) ===== */
.modpanel .mpf{padding:12px 20px;border-top:1px solid var(--border);background:var(--bg-alt);min-height:42px;display:flex;align-items:center;font-size:13px}
.cp-susp{background:var(--red-soft);color:var(--red-dark);border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;font-weight:600;margin-bottom:16px}

.cpbars{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.cpm{background:var(--bg-alt);border-radius:var(--r-sm);padding:13px 15px;min-width:0}
.cpm.off{opacity:.45}                                  /* limite 0 no plano: existe, mas não interessa */
.cpm-t{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpm-v{font-family:var(--display);font-weight:800;font-size:17px;color:var(--navy);margin-top:6px;line-height:1.2}
.cpm-v span{font-family:var(--font);font-weight:500;font-size:12.5px;color:var(--text-mid)}
.cpm-n{font-family:var(--display);font-weight:800;font-size:19px;color:var(--navy);margin-top:5px;line-height:1.2}
.cpm-n span{font-family:var(--font);font-weight:500;font-size:12px;color:var(--text-dim)}
.cpm-p{font-size:11.5px;color:var(--text-dim);margin-top:6px}
.cpbar{height:6px;border-radius:6px;background:var(--border-strong);margin-top:9px;overflow:hidden}
.cpbar i{display:block;height:100%;border-radius:6px;background:var(--green);transition:width .7s cubic-bezier(.2,.7,.3,1)}
.cpbar i.warn{background:var(--amber)}
.cpbar i.urg{background:var(--red)}

.cpsec{font-size:11.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;
  margin:24px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.cpsec:first-child{margin-top:0}
.cpgrp{margin-bottom:14px}
.cpgrp-t{font-size:12.5px;font-weight:700;color:var(--text-mid);margin-bottom:8px}
.cpapps{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px}
.cpapp{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--card);border:1px solid var(--border-strong);
  border-radius:var(--r-ctl);color:var(--text);font-size:13.5px;font-weight:600;font-family:var(--font);
  cursor:pointer;text-align:left;transition:.14s;min-width:0}
.cpapp svg{width:19px;height:19px;flex:0 0 19px;color:var(--red)}
.cpapp span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpapp:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.cpapp:disabled{opacity:.55;cursor:default;transform:none}

.cpinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 32px}
.cpi{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--border);font-size:13.5px;min-width:0}
.cpi>span{color:var(--text-dim);white-space:nowrap}
.cpi>strong{font-weight:600;color:var(--navy);text-align:right;min-width:0;word-break:break-word}
@media(max-width:760px){.cpbars{grid-template-columns:1fr}.cpinfo{grid-template-columns:1fr}}

/* ===== yPanel — GERENCIADOR DE ARQUIVOS ===== */
.fm-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.fm-disco{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:12.5px;color:var(--text-mid);flex-wrap:wrap}
.fm-dbar{display:block;width:150px;height:5px;border-radius:5px;background:var(--border-strong);overflow:hidden}
.fm-dbar i{display:block;height:100%;border-radius:5px;background:var(--green);transition:width .6s}
.fm-dbar i.warn{background:var(--amber)}.fm-dbar i.urg{background:var(--red)}

.fm-tools{display:flex;gap:7px;flex-wrap:wrap}
.fm-tb{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:70px;padding:9px 11px;
  border:1px solid var(--border-strong);background:var(--card);border-radius:var(--r-ctl);
  color:var(--text-mid);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:.14s}
.fm-tb svg{width:19px;height:19px}
.fm-tb:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.fm-tb.on{background:var(--red);border-color:var(--red);color:#fff}

.fm-layout{display:grid;grid-template-columns:216px minmax(0,1fr);gap:16px;align-items:start}
.fm-side{background:var(--bg-alt);border-radius:var(--r-sm);padding:14px 12px;position:sticky;top:0}
.fm-side-t{font-size:10.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px 6px}
.fm-atalho,.fm-ap{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:none;background:none;
  border-radius:var(--r-btn);color:var(--text-mid);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  text-align:left;transition:.12s;margin-bottom:2px}
.fm-atalho svg,.fm-ap svg{width:16px;height:16px;flex:0 0 16px;color:var(--text-dim)}
.fm-atalho span,.fm-ap span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-atalho:hover,.fm-ap:hover{background:#fff;color:var(--red)}
.fm-atalho:hover svg,.fm-ap:hover svg{color:var(--red)}
.fm-atalho.on{background:var(--card);color:var(--navy);box-shadow:var(--shadow-sm)}
.fm-arvore{max-height:280px;overflow-y:auto}

.fm-main{position:relative;min-width:0}
.fm-main.drop::after{content:"Solte para enviar para esta pasta";position:absolute;inset:0;z-index:5;
  display:grid;place-items:center;background:rgba(232,67,42,.07);border:2px dashed var(--red);
  border-radius:var(--r-sm);color:var(--red);font-weight:700;font-size:15px;pointer-events:none}

.fm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.fm-up{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--border-strong);background:#fff;
  border-radius:var(--r-btn);color:var(--text-mid);cursor:pointer;font-size:15px;transition:.12s}
.fm-up:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.fm-up:disabled{opacity:.4;cursor:default}
.fm-crumb{display:flex;align-items:center;gap:1px;flex:1;min-width:120px;flex-wrap:wrap;font-size:13.5px}
.fm-cb{border:none;background:none;color:var(--text-mid);font:inherit;font-weight:600;cursor:pointer;
  padding:5px 8px;border-radius:var(--r-btn);transition:.12s;white-space:nowrap}
.fm-cb:hover{background:var(--bg-alt);color:var(--red)}
.fm-cb.volta{color:var(--red)}
.fm-sep{color:var(--text-dim)}
.fm-achou{font-size:12.5px;color:var(--text-dim)}
.fm-busca{display:flex;gap:7px;align-items:center;flex:0 0 auto}
.fm-busca .finput{width:230px;padding:9px 12px;font-size:13.5px}

.fm-selbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--red-soft);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:10px;font-size:13.5px}
.fm-selacts{display:flex;gap:7px;flex-wrap:wrap}

.fm-wrap{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.fm-head,.fm-row{display:grid;grid-template-columns:36px minmax(0,1fr) 92px 78px 130px 84px 186px;align-items:center;gap:6px}
.fm-head{background:#fafbfe;border-bottom:1px solid var(--border);padding:0 12px 0 4px;
  font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);font-weight:700}
.fm-th{border:none;background:none;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;padding:11px 2px;text-align:left}
.fm-th.r{text-align:right}
.fm-row{padding:0 12px 0 4px;border-bottom:1px solid var(--border);transition:background .12s}
.fm-row:last-child{border-bottom:none}
.fm-row:hover{background:#fafbff}
.fm-row.on{background:var(--red-soft)}
.fm-chk{display:grid;place-items:center;padding:9px 0;cursor:pointer}
.fm-chk input{width:15px;height:15px;accent-color:var(--red);cursor:pointer}
.fm-nome{display:flex;align-items:center;gap:9px;border:none;background:none;font:inherit;color:var(--text);
  cursor:pointer;padding:10px 2px;text-align:left;min-width:0;width:100%}
.fm-nome svg{width:18px;height:18px;flex:0 0 18px;color:var(--text-dim)}
.fm-nome.dir svg{color:var(--red)}
.fm-nome span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.fm-nome:hover span{color:var(--red);text-decoration:underline}
.fm-nome.dir span{font-weight:600}
.fm-emp{font-size:11.5px;color:var(--text-dim);font-style:normal;white-space:nowrap;flex:0 0 auto}
.fm-c{font-size:12.5px;min-width:0}
.fm-c.r{text-align:right}
.fm-modo{border:1px solid transparent;background:none;font:inherit;font-size:12px;color:var(--text-dim);
  font-family:ui-monospace,Menlo,monospace;cursor:pointer;padding:3px 6px;border-radius:6px;transition:.12s}
.fm-modo:hover{border-color:var(--border-strong);color:var(--red)}
.fm-rowacts{display:flex;gap:3px;justify-content:flex-end;opacity:0;transition:opacity .12s}
.fm-row:hover .fm-rowacts,.fm-row.on .fm-rowacts{opacity:1}
.fm-mini{width:29px;height:29px;border:1px solid var(--border-strong);background:#fff;border-radius:var(--r-btn);
  color:var(--text-mid);font-size:12px;cursor:pointer;transition:.12s;display:grid;place-items:center;flex:0 0 29px}
.fm-mini:hover{border-color:var(--red);color:var(--red)}
.fm-mini.danger:hover{border-color:var(--red);background:var(--red);color:#fff}
.fm-load{padding:10px 12px}
.fm-msg{min-height:20px;margin-top:10px;font-size:13px;color:var(--text-mid)}
.fm-msg.ok{color:var(--green);font-weight:600}
.fm-msg.bad{color:var(--red);font-weight:600}

.fm-upbar{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--card);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:12px 14px;box-shadow:var(--shadow)}
.fm-up-t{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:8px}
.fm-up-b{height:6px;border-radius:6px;background:var(--bg-alt);overflow:hidden}
.fm-up-b i{display:block;height:100%;border-radius:6px;background:var(--red);transition:width .2s}

/* visualizador */
.fm-ver{width:min(1000px,94vw);max-height:92vh;display:flex;flex-direction:column}
.fm-ver-b{flex:1;min-height:0;overflow:auto;padding:0 22px;display:grid;place-items:center;background:var(--bg-alt)}
.fm-ver-b img{max-width:100%;max-height:70vh;object-fit:contain}
.fm-ver-b iframe{width:100%;height:70vh;border:none;background:#fff}

/* editor */
.fm-edit{width:min(1000px,95vw);max-height:93vh;display:flex;flex-direction:column}
.fm-edit-path{padding:0 22px 10px;font-size:12px;color:var(--text-dim);font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.fm-edit-area{flex:1;min-height:46vh;margin:0 22px;padding:14px;border:1px solid var(--border-strong);
  border-radius:var(--r-ctl);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  line-height:1.55;resize:vertical;background:#fbfcff;color:var(--text);tab-size:2}
.fm-edit-area:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-soft)}
.fm-edit-msg{flex:1;font-size:12.5px;color:var(--text-dim)}
.fm-edit-msg.ok{color:var(--green);font-weight:600}
.fm-edit-msg.bad{color:var(--red);font-weight:600}

/* prompt / escolha */
.pm-l{display:block;font-size:12.5px;font-weight:600;color:var(--text-mid);margin:14px 0 6px;text-align:left}
.pm-d{font-size:12px;color:var(--text-dim);margin-top:7px;text-align:left;line-height:1.4}
.esc-l{display:flex;flex-direction:column;gap:2px;text-align:left}
.esc-i{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-btn);cursor:pointer;font-size:13.5px;transition:.12s}
.esc-i:hover{background:var(--bg-alt)}
.esc-i input{accent-color:var(--red);width:15px;height:15px}

/* atalho nosso x cPanel, na visão geral */
.cpapp.nosso{border-color:var(--red);color:var(--red);font-weight:700}
.cpapp.nosso svg{color:var(--red)}
.cpgrp-t em{font-style:normal;font-weight:500;color:var(--text-dim);font-size:11.5px}

@media(max-width:1100px){
  .fm-layout{grid-template-columns:1fr}
  .fm-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .fm-arvore{max-height:150px}
}
@media(max-width:860px){
  .fm-head,.fm-row{grid-template-columns:32px minmax(0,1fr) 82px 110px}
  .fm-head>:nth-child(4),.fm-head>:nth-child(6),.fm-head>:nth-child(7),
  .fm-row>:nth-child(4),.fm-row>:nth-child(6){display:none}
  .fm-rowacts{opacity:1;grid-column:1/-1;justify-content:flex-start;padding:0 0 9px 32px}
  .fm-busca{width:100%}.fm-busca .finput{flex:1;width:auto}
  .fm-side{grid-template-columns:1fr}
}