/* Painel do cliente TotalHost. Identidade igual a totalhost.com.br e ao painel de hospedagem:
   faixa escura com a marca no topo e no rodapé, corpo claro fixo (sem modo escuro automático), índigo de destaque.
   Celular primeiro. Contraste AA conferido nas combinações de texto. */
:root{
  color-scheme: light;
  --ink:#07060f; --ink-2:#0b0918; --navy:#0d0064; --indigo:#5b4bff; --indigo-600:#4436e6; --indigo-700:#3a2ed0; --indigo-300:#b8b1ff; --indigo-50:#eeecff;
  --paper:#f5f5fa; --papel:#fff; --tinta:#14122a; --fraco:#545454; --linha:#e2e1ee; --linha-2:#cfcde0;
  --ok:#12a150; --ok-txt:#0b6b35; --ok-fundo:#e3f6ea;
  --ruim:#d93a35; --ruim-txt:#b3261e; --ruim-fundo:#fdecea;
  --aviso:#e8930c; --aviso-txt:#8a4b00; --aviso-fundo:#fff4e0;
  --laranja-txt:#9a4a00; --laranja-fundo:#fff0e2;
  --nulo:#e4e3ee; --nulo-txt:#4a4860;
  --wa:#25d366; --wa-600:#1ab551;
  --sombra:0 10px 30px -20px rgb(20 18 42 / 40%);
  --raio:14px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--tinta);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--indigo-700)}
a:hover{color:var(--navy)}
img{max-width:100%}
code{font-family:var(--mono);font-size:.88em;word-break:break-all}
.wrap{width:min(100% - 32px, 1040px);margin-inline:auto}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
.pular{position:absolute;left:-9999px}
.pular:focus{left:16px;top:8px;background:#fff;padding:8px 12px;z-index:10}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* topo */
.topo{background:radial-gradient(120% 140% at 85% -20%, rgb(91 75 255 / 34%), transparent 55%), var(--ink);color:#eae9f6}
.barra-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.marca img{width:112px;height:auto;display:block}
.marca span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--indigo-300);white-space:nowrap}
.usuario{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#c9c7de}
.quem{display:none}
.lnk-claro{background:none;border:0;color:#fff;font:inherit;font-weight:600;cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px}
.menu ul{list-style:none;margin:0;padding:0 0 2px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.menu ul::-webkit-scrollbar{display:none}
.menu a{display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:10px 10px 0 0;color:#c9c7de;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.menu a:hover{color:#fff;background:rgb(255 255 255 / 6%)}
.menu a[aria-current="page"]{background:var(--paper);color:var(--navy)}
@media (min-width:720px){ .quem{display:inline} .marca img{width:128px} }

.faixa-como{background:var(--aviso-fundo);border-bottom:1px solid #f1d8a8;color:var(--aviso-txt);font-size:14px}
.faixa-como .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 0}

/* conteúdo */
main.wrap{padding:22px 0 40px}
h1{font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:4px 0 6px;color:var(--ink)}
h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo-600);margin:30px 0 10px;font-weight:700;display:flex;align-items:center;gap:8px}
h2::before{content:"";width:18px;height:2px;background:var(--indigo);border-radius:2px;flex:none}
.bloco h2{margin-top:0}
.sub{color:var(--fraco);margin:0 0 14px}
.topo-sub{margin-top:-2px}
.nota{font-size:13px;color:var(--fraco);margin:10px 0 0;overflow-wrap:anywhere}
.nota-curta{margin-top:4px}
.notas{font-size:12.5px;color:var(--fraco);margin:22px 0 0;line-height:1.6}
.voltar{font-size:13.5px;color:var(--fraco);margin:0 0 6px}
.txt-ruim{color:var(--ruim-txt)!important}
.txt-aviso{color:var(--aviso-txt)!important}
.txt-fraco{color:var(--fraco)}
.direita{display:flex;justify-content:flex-end;margin:-6px 0 8px}

.bloco{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:16px;box-shadow:var(--sombra);margin:14px 0}
.vazio{background:var(--papel);border:1px dashed var(--linha-2);border-radius:var(--raio);padding:20px;color:var(--fraco);text-align:center;margin:10px 0}
.lista{display:grid;gap:10px}
.lista-simples{list-style:none;margin:0;padding:0;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra)}
.lista-simples li{padding:11px 16px;border-top:1px solid var(--linha);display:flex;flex-direction:column;gap:2px}
.lista-simples li:first-child{border-top:0}
.lista-simples small{color:var(--fraco)}

/* estado geral e resumo */
.geral{display:flex;align-items:center;gap:12px;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 18px;box-shadow:var(--sombra);margin:6px 0 0}
.geral .bolha{width:12px;height:12px;border-radius:50%;flex:none;background:#9a98ad}
.geral.ok .bolha{background:var(--ok);box-shadow:0 0 0 5px var(--ok-fundo)}
.geral.ruim .bolha{background:var(--ruim);box-shadow:0 0 0 5px var(--ruim-fundo)}
.geral strong{display:block;font-size:15.5px}
.geral .sub{display:block;font-size:13px;margin:0}
.resumo{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.stat{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;box-shadow:var(--sombra)}
.stat b{display:block;font-size:clamp(1.45rem,1.2rem + 1vw,1.85rem);line-height:1.1;letter-spacing:-.02em;font-weight:800;color:var(--navy)}
.stat span{display:block;font-size:12.5px;color:var(--fraco);margin-top:4px}
.duplo{display:grid;gap:0 12px}
.grande{font-size:1.35rem;font-weight:800;color:var(--navy);margin:0 0 2px;letter-spacing:-.01em}
@media (min-width:720px){ .resumo{grid-template-columns:repeat(4,1fr)} .duplo{grid-template-columns:1fr 1fr} }

.atalhos-inicio,.atalhos{display:grid;gap:10px;margin-top:14px}
@media (min-width:720px){ .atalhos-inicio{grid-template-columns:repeat(3,1fr)} .atalhos{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .atalhos{grid-template-columns:repeat(4,1fr)} }
.card-link{display:flex;flex-direction:column;gap:4px;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;text-decoration:none;color:var(--tinta);box-shadow:var(--sombra)}
.card-link b{color:var(--navy);font-size:15px}
.card-link span{font-size:13px;color:var(--fraco)}
.card-link:hover{border-color:var(--indigo-300)}

/* cartão de site/domínio */
.site{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:16px;box-shadow:var(--sombra)}
.site .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.site .cab > div{min-width:0}
.site .nome{overflow-wrap:anywhere}
.site .nome{font-weight:700;font-size:15.5px;line-height:1.3}
.site .dom{font-size:13px;color:var(--fraco);word-break:break-all;display:inline-block;margin-top:2px;text-decoration:none}
.site .dom:hover{text-decoration:underline;color:var(--indigo-700)}
.pilula{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;background:var(--nulo);color:var(--nulo-txt);line-height:1.5}
.pilula .ic{width:13px;height:13px}
.pilula.ok{background:var(--ok-fundo);color:var(--ok-txt)}
.pilula.ruim{background:var(--ruim-fundo);color:var(--ruim-txt)}
.pilula.aviso{background:var(--aviso-fundo);color:var(--aviso-txt)}
.pilula.neutro{background:var(--indigo-50);color:var(--indigo-700)}
.pilula.laranja{background:var(--laranja-fundo);color:var(--laranja-txt)}
.metricas,.dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--linha)}
.metricas div,.dados div{min-width:0}
.metricas .largo{grid-column:1/-1}
dt{font-size:11.5px;color:var(--fraco);margin:0}
dd{margin:2px 0 0;font-size:14px;font-weight:650;overflow-wrap:anywhere}
.dados{border-top:0;padding-top:0;margin-top:0;grid-template-columns:1fr}
@media (min-width:720px){ .metricas{grid-template-columns:repeat(4,minmax(0,1fr))} .dados{grid-template-columns:repeat(2,minmax(0,1fr))} .dados-4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.faixa-dominio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:10px}
@media (min-width:720px){ .faixa-dominio{grid-template-columns:repeat(3,minmax(0,1fr))} }

.barra-dias{display:flex;gap:2px;margin:14px 0 6px;height:26px}
.barra-dias i{flex:1;border-radius:2px;background:var(--nulo);min-width:2px}
.barra-dias i.ok{background:var(--ok)}
.barra-dias i.parcial{background:var(--aviso)}
.barra-dias i.fora{background:var(--ruim)}
.legenda{display:flex;justify-content:space-between;font-size:11.5px;color:var(--fraco)}
@media (max-width:520px){ .barra-dias{height:22px;gap:1px} }

/* avisos */
.alerta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-radius:12px;padding:12px 14px;margin:12px 0;font-size:14px;border:1px solid transparent}
.alerta.ok{background:var(--ok-fundo);color:var(--ok-txt);border-color:#bfe6cd}
.alerta.ruim{background:var(--ruim-fundo);color:var(--ruim-txt);border-color:#f5c6c2}
.alerta.aviso{background:var(--aviso-fundo);color:var(--aviso-txt);border-color:#f1d8a8}
.alerta a{color:inherit;font-weight:700}
.alerta > div{flex:1 1 260px;min-width:0}
.codigos{columns:2;margin:10px 0 0;padding-left:18px}
.senha-unica{display:inline-block;background:#fff;color:var(--tinta);border:1px solid var(--linha-2);border-radius:8px;padding:3px 8px;font-size:15px;user-select:all;margin-top:4px}

/* botões e formulários */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:14.5px;border-radius:10px;padding:10px 16px;cursor:pointer;
     border:1px solid var(--indigo-600);background:#fff;color:var(--indigo-700);text-decoration:none;min-height:42px}
.btn:hover{background:var(--indigo-50);color:var(--navy)}
.btn-cheio{background:var(--indigo-600);color:#fff}
.btn-cheio:hover{background:var(--indigo-700);color:#fff}
.btn-sec{border-color:var(--linha-2);color:var(--tinta)}
.btn-perigo{border-color:var(--ruim-txt);background:var(--ruim-txt);color:#fff}
.btn-perigo:hover{background:#8f1d17;color:#fff}
.btn-claro{background:#fff;border-color:#fff;color:var(--aviso-txt)}
.btn-p{padding:6px 12px;min-height:36px;font-size:13.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.botoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.botoes form{margin:0}
.form{display:grid;gap:12px;margin-top:10px}
.grade-form{display:grid;gap:12px}
@media (min-width:720px){ .grade-form{grid-template-columns:repeat(2,minmax(0,1fr))} .grade-form .largo{grid-column:1/-1} }
.campo{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--tinta)}
.campo small{font-weight:400;color:var(--fraco)}
input,select{font:inherit;font-size:16px;color:var(--tinta);background:#fff;border:1px solid var(--linha-2);border-radius:10px;padding:10px 12px;width:100%;min-height:44px}
input:focus,select:focus{border-color:var(--indigo);outline:2px solid var(--indigo-300);outline-offset:0}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:20px;height:20px;min-height:0;flex:none}
.com-sufixo{display:flex;align-items:stretch}
.com-sufixo input{border-radius:10px 0 0 10px;min-width:0}
.com-sufixo em{font-style:normal;font-weight:600;display:flex;align-items:center;padding:0 10px;background:var(--paper);border:1px solid var(--linha-2);border-left:0;border-radius:0 10px 10px 0;color:var(--fraco);white-space:nowrap;font-size:14px}
.confirma span b{font-family:var(--mono);color:var(--ruim-txt)}
.confirma-email{border-left:3px solid var(--aviso);padding-left:12px}
[hidden]{display:none!important}

details > summary{cursor:pointer;list-style:none}
details > summary::-webkit-details-marker{display:none}
details.novo-registro{margin:14px 0}
details.novo-registro[open] > summary{margin-bottom:6px}
.acao-perigo summary{color:var(--ruim-txt);font-weight:700;margin-top:10px}

/* registros de DNS, caixas, usuários */
.registros{display:grid;gap:8px}
.reg{background:var(--papel);border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
.reg-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.tipo{font-family:var(--mono);font-size:12px;font-weight:700;background:var(--ink);color:#fff;border-radius:6px;padding:2px 7px}
.reg-nome{font-size:14.5px;overflow-wrap:anywhere}
.reg-valor{display:block;margin-top:6px;color:#2b2944;font-size:13px;background:var(--paper);border-radius:8px;padding:6px 8px}
.reg-pe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px}
.reg-pe small{color:var(--fraco);margin-right:auto}
.reg-acao{width:auto}
.reg-acao > summary{font-size:13.5px;font-weight:700;color:var(--indigo-700);padding:4px 0}
.reg-acao[open]{width:100%;border-top:1px solid var(--linha);padding-top:6px}
.lnk-p{font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;margin-left:6px}

/* prévia */
.ops{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.op{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:14px;overflow-wrap:anywhere}
.op-rot{flex:none;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:6px;padding:2px 8px;min-width:58px;text-align:center}
.op-sai{background:var(--ruim-fundo)} .op-sai .op-rot{background:var(--ruim-txt);color:#fff}
.op-entra{background:var(--ok-fundo)} .op-entra .op-rot{background:var(--ok-txt);color:#fff}
.op-muda{background:var(--aviso-fundo)} .op-muda .op-rot{background:var(--aviso-txt);color:#fff}
.op small{color:var(--fraco)}
.previa .alerta{display:block}

/* histórico */
.historico{display:grid;gap:8px}
.evento{background:var(--papel);border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
.ev-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.ev-cab small{color:var(--fraco)}
.ev-alvo{color:var(--fraco);overflow-wrap:anywhere}
.ev-quem{font-size:12.5px;color:var(--fraco);margin:4px 0 0}
.ev-dif{display:grid;gap:8px;margin:8px 0 0;font-size:13px}
.ev-dif dd{font-weight:400;font-size:13px}
.evento form{margin-top:8px}
@media (min-width:720px){ .ev-dif{grid-template-columns:1fr 1fr} }

/* login */
body.sem-menu .topo .barra-topo{padding:22px 0 26px}
.caixa-login{max-width:420px;margin:12px auto 0;background:var(--papel);border:1px solid var(--linha);border-radius:18px;padding:24px 20px;box-shadow:var(--sombra)}
.caixa-login h1{margin-top:0}
.caixa-login .btn{width:100%}
.esqueci{margin-top:16px;font-size:14px}
.esqueci summary{color:var(--indigo-700);font-weight:600}
.passos{padding-left:20px}
.chave{font-size:15px;letter-spacing:.04em;background:var(--paper);padding:2px 6px;border-radius:6px}
.qr{margin:12px 0}
.qr img{width:200px;height:200px;image-rendering:pixelated;border:8px solid #fff;outline:1px solid var(--linha)}

/* rodapé */
.rodape{background:var(--ink-2);color:#c9c7de;padding:26px 0 28px;font-size:13.5px}
.linha-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.rodape img{width:110px;height:auto;display:block;margin-bottom:8px}
.rodape p{margin:0}
.btn-wa{display:inline-flex;align-items:center;gap:9px;background:var(--wa);color:#05230f;text-decoration:none;font-weight:700;font-size:15px;padding:11px 18px;border-radius:999px}
.btn-wa:hover{background:var(--wa-600);color:#05230f}
.btn-wa .wa{width:20px;height:20px;flex:none}
.rodape small{display:block;margin-top:16px;color:#9e9cbb;font-size:12px}

/* ---------- Início: relação de domínios (tabela dinâmica; vira cartões no celular) ---------- */
main.wrap.largo{width:min(100% - 32px, 1240px)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pagina-inicio{font-size:16px}
.pagina-inicio h2{font-size:13px}
.geral-grande{padding:18px 20px}
.geral-grande strong{font-size:18px;line-height:1.35}
.geral-grande .sub{font-size:14.5px;margin-top:2px}
.resumo-inicio{margin-top:6px}
.resumo-inicio .bloco{margin:12px 0 0}
.resumo-inicio .grande{font-size:1.7rem}
.resumo-inicio .sub{margin:0;font-size:15px}
.relacao{margin-top:28px}
.rel-filtros{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.rel-filtros label{flex:0 1 230px}
.rel-filtros .rel-busca{flex:1 1 320px}
.rel-filtros input,.rel-filtros select{min-height:44px}
.so-celular{display:none}
.tabela-rel{width:100%;border-collapse:separate;border-spacing:0;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);font-size:15px}
.tabela-rel th,.tabela-rel td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid var(--linha)}
.tabela-rel thead th{border-top:0;font-size:13px;font-weight:700;color:var(--fraco);padding-top:14px;padding-bottom:10px;vertical-align:bottom}
.tabela-rel thead th button{font:inherit;color:inherit;background:none;border:0;padding:4px 0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-align:left}
.tabela-rel thead th button:hover{color:var(--navy)}
.tabela-rel thead th button::after{content:"\2195";font-size:12px;opacity:.45}
.tabela-rel thead th[aria-sort="ascending"] button::after{content:"\25B2";opacity:1;font-size:10px}
.tabela-rel thead th[aria-sort="descending"] button::after{content:"\25BC";opacity:1;font-size:10px}
.tabela-rel thead th[aria-sort="ascending"],.tabela-rel thead th[aria-sort="descending"]{color:var(--navy)}
.tabela-rel .grupo-cab th{background:var(--paper);font-size:15px;font-weight:800;color:var(--ink);padding:12px 14px}
.tabela-rel .grupo-cab .conta{font-weight:600;color:var(--fraco);font-size:14px;margin-left:6px}
.tabela-rel .col-dom{font-weight:700;color:var(--ink)}
.tabela-rel .col-dom a{color:var(--ink);text-decoration:none}
.tabela-rel .col-dom a:hover{text-decoration:underline;color:var(--indigo-700)}
.tabela-rel td.num{white-space:nowrap}
.tabela-rel .caixas{display:flex;flex-direction:column;gap:1px}
.tabela-rel .caixas span{overflow-wrap:normal}
.email-plano{display:block;margin-top:2px;font-size:13px;color:var(--fraco)}
.email-plano:first-of-type{margin-top:6px}
.marca-venc{font-weight:700;border-radius:6px;padding:1px 6px;white-space:nowrap}
.marca-venc.aviso{background:var(--aviso-fundo);color:var(--aviso-txt)}
.marca-venc.ruim{background:var(--ruim-fundo);color:var(--ruim-txt)}
.marca-nv{display:inline-block;font-size:12px;font-weight:700;color:var(--nulo-txt);background:var(--nulo);border-radius:6px;padding:0 6px;margin-left:2px;white-space:nowrap}
.tabela-rel tbody tr.linha:hover td{background:#fafaff}
.tabela-email{margin-top:4px}
@media (max-width:899px){
  .so-celular{display:block}
  .rel-filtros label,.rel-filtros .rel-busca{flex:1 1 100%}
  .tabela-rel,.tabela-rel tbody,.tabela-rel tr,.tabela-rel td,.tabela-rel th{display:block;width:100%}
  .tabela-rel{background:none;border:0;box-shadow:none}
  .tabela-rel thead{display:none}
  .tabela-rel .grupo-cab th{background:none;border:0;padding:18px 2px 8px;font-size:16px}
  .tabela-rel tr.linha{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:12px 14px;margin:0 0 10px}
  .tabela-rel tr.linha td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border:0;padding:6px 0;text-align:right;min-width:0}
  .tabela-rel tr.linha td::before{content:attr(data-rotulo);flex:none;max-width:45%;text-align:left;color:var(--fraco);font-size:14px}
  .tabela-rel tr.linha td.col-dom{display:block;text-align:left;font-size:17px;padding:0 0 8px;margin-bottom:4px;border-bottom:1px solid var(--linha)}
  .tabela-rel tr.linha td.col-dom::before{display:none}
  .tabela-rel tr.linha td > .v{min-width:0;overflow-wrap:break-word}
  .tabela-rel .caixas{align-items:flex-end}
  .tabela-rel tbody tr.linha:hover td{background:none}
  .tabela-rel tr.linha td.so-largo{display:none}
}