@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Vitrine e compra de domínios — mesma identidade do hub (styles.css/dashboard.css). O CSP do hub
   não permite estilo inline: tudo que muda de aparência é classe daqui. */
:root{
  --bg:#151515;--panel:#1c1c1c;--panel-2:#232322;--text:#f3f3ee;--muted:#aeaeaa;--line:#373735;
  --orange:#ff6335;--orange-deep:#c8431f;--ok:#4fbf7f;--warn:#e7b74a;--err:#ff6b6b;
  --heading:'Space Grotesk',Arial,sans-serif;--body:'DM Sans',Arial,sans-serif;color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:inherit}
a,button,input,select{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
[hidden]{display:none!important}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(16px,4vw,48px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:26px;display:block}
.brand-name{font-family:var(--heading);font-weight:700;font-size:16px;letter-spacing:-.3px}
.brand-name span{color:var(--orange)}
.top-link{color:var(--muted);text-decoration:none;font-size:14px}
.top-link:hover{color:var(--text)}

.wrap{max-width:880px;margin:0 auto;padding:48px 16px 80px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:600;margin:0 0 10px}
h1{font-family:var(--heading);font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.lead{color:var(--muted);margin:0 0 28px;max-width:60ch}

.search{display:flex;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px}
.search input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);padding:10px 12px;font-size:17px}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--orange)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:11px 20px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--orange);color:#1a0d08}
.btn-primary:hover{background:#ff7a52}
.btn:disabled,.btn-primary:disabled{opacity:.55;cursor:default}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--muted)}
.perks{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14px}
.perks li::before{content:"✓";color:var(--ok);margin-right:6px}

.results{margin-top:32px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.result{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid var(--line);background:var(--panel)}
.result:first-child{border-top:0}
.result.best{background:var(--panel-2)}
.result-name{font-family:var(--heading);font-size:18px;font-weight:600;word-break:break-all}
.result-name small{display:block;font-family:var(--body);font-size:13px;font-weight:500;color:var(--muted);margin-top:2px}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 8px;margin-left:8px;vertical-align:middle}
.tag-ok{background:rgba(79,191,127,.14);color:var(--ok)}
.tag-no{background:rgba(174,174,170,.14);color:var(--muted)}
.price{text-align:right;font-variant-numeric:tabular-nums}
.price strong{display:block;font-size:18px}
.price span{font-size:12px;color:var(--muted)}
.result.unavailable .result-name{color:var(--muted)}
@media (max-width:600px){
  .result{grid-template-columns:1fr auto;gap:10px 12px}
  .result .btn{grid-column:1/-1}
  .price{text-align:right}
}
.state{padding:24px 20px;color:var(--muted);background:var(--panel)}
.note{font-size:13px;color:var(--muted);margin-top:14px}

/* ── Checkout ─────────────────────────────────────────────────────────── */
.checkout{display:grid;gap:28px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.card h2{font-family:var(--heading);font-size:20px;margin:0 0 4px}
.card .hint{color:var(--muted);font-size:14px;margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.f{display:flex;flex-direction:column;gap:6px}
.grid > .f{grid-column:span 6}
.f.half{grid-column:span 3}
.f.third{grid-column:span 2}
.f.two-thirds{grid-column:span 4}
@media (max-width:560px){.f.half,.f.third,.f.two-thirds{grid-column:span 6}}
.f label{font-size:13px;color:var(--muted);font-weight:500}
.f label .opt{color:#7d7d79;font-weight:400}
.f input,.f select{background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px 12px;width:100%}
.f input:focus,.f select:focus{outline:none;border-color:var(--orange)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin-top:18px}
.check input{margin-top:3px;accent-color:var(--orange)}
.summary{position:sticky;top:20px}
.summary .domain{font-family:var(--heading);font-size:22px;font-weight:700;word-break:break-all;margin:0 0 16px}
.years{display:flex;gap:8px;margin-bottom:18px}
.years button{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:9px 0;cursor:pointer;font-weight:600}
.years button[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}
.line{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);padding:6px 0;font-variant-numeric:tabular-nums}
.line.total{color:var(--text);font-size:18px;font-weight:700;border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.summary .btn{width:100%;margin-top:18px}
.msg{border-radius:10px;padding:12px 14px;font-size:14px;margin:0 0 18px}
.msg.error{background:rgba(255,107,107,.1);color:#ffb3b3;border:1px solid rgba(255,107,107,.3)}
.msg.info{background:rgba(231,183,74,.08);color:#f0d494;border:1px solid rgba(231,183,74,.25)}

/* ── Pedido ───────────────────────────────────────────────────────────── */
.status{text-align:center;padding:40px 24px}
.status .icon{width:56px;height:56px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:26px;font-weight:700}
.status .icon.wait{border:3px solid var(--line);border-top-color:var(--orange);animation:spin 1s linear infinite}
.status .icon.ok{background:rgba(79,191,127,.15);color:var(--ok)}
.status .icon.warn{background:rgba(231,183,74,.15);color:var(--warn)}
.status .icon.err{background:rgba(255,107,107,.15);color:var(--err)}
.status h1{font-size:28px}
.status p{color:var(--muted);max-width:52ch;margin:0 auto 10px}
.status .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.status .icon.wait{animation:none}}

/* Pagamento na coluna da direita (Stripe Payment Element, tema escuro via Appearance API). */
.checkout{grid-template-columns:minmax(0,1fr) 440px;gap:32px}
@media (max-width:900px){.checkout{grid-template-columns:1fr}}
.pay-block{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.pay-title{font-family:var(--heading);font-weight:600;font-size:16px;margin:0 0 12px}
.payment-element{min-height:120px}
.summary .secure{text-align:center;margin-top:10px}
.summary{position:static}
.wrap:has(.checkout){max-width:1320px;padding-inline:clamp(16px,3vw,40px)}
.checkout .card{padding:28px 32px}
.checkout .f input,.checkout .f select{padding:12px 14px}

/* Preloader da busca — mesma linguagem do preloader do preview do Multicode (grade 3x3, bloco
   central laranja, pulsos em onda) e textos de etapa que se revezam. */
.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 20px;background:var(--panel);text-align:center}
.loader-grid{display:grid;grid-template-columns:repeat(3,18px);gap:5px;margin-bottom:8px}
.loader-grid i{width:18px;height:18px;border-radius:3px;background:#3d3d3b;animation:fdpulse 1.8s infinite ease-in-out}
.loader-grid i:nth-child(5){background:var(--orange)}
.loader-grid i:nth-child(2){animation-delay:.1s}.loader-grid i:nth-child(3){animation-delay:.2s}
.loader-grid i:nth-child(4){animation-delay:.3s}.loader-grid i:nth-child(5){animation-delay:.4s}
.loader-grid i:nth-child(6){animation-delay:.5s}.loader-grid i:nth-child(7){animation-delay:.6s}
.loader-grid i:nth-child(8){animation-delay:.7s}.loader-grid i:nth-child(9){animation-delay:.8s}
@keyframes fdpulse{0%,60%,100%{transform:scale(1);opacity:1}30%{transform:scale(.55);opacity:.35}}
.loader-title{margin:0;font-weight:600;font-size:15px}
.loader-step{margin:-8px 0 0;font-size:14px;color:var(--muted);min-height:1.5em;transition:opacity .3s}
.loader-step.fade{opacity:0}
.years button:disabled{opacity:.35;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.loader-grid i{animation:none}.loader-step{transition:none}}

.test-banner{background:#e7b74a;color:#1d1605;font-size:14px;font-weight:600;text-align:center;padding:10px 16px}
.status .icon .lc{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── Meus domínios e Gerenciar domínio (painel, estrutura inspirada no hPanel) ───────────── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lc{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.top-nav{display:flex;gap:20px;flex-wrap:wrap}
.wrap-wide{max-width:1100px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.page-head h1{margin:0 0 6px}
.page-head .lead{margin:0}
.panel-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:18px}
.panel-card h2{font-family:var(--heading);font-size:19px;margin:0 0 6px}
.panel-card .hint{color:var(--muted);font-size:14px;margin:0 0 16px;max-width:70ch}
.empty{text-align:center;padding:40px 16px}
.empty h2{font-family:var(--heading);font-size:22px;margin:0 0 6px}
.empty p{color:var(--muted);margin:0 0 20px}
.btn-sm{padding:7px 14px;font-size:14px}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.pill-ok{background:rgba(79,191,127,.15);color:var(--ok)}
.pill-warn{background:rgba(231,183,74,.15);color:var(--warn)}
.pill-err{background:rgba(255,107,107,.15);color:var(--err)}
.table-wrap{overflow-x:auto}
.dom-table,.rec-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.dom-table th,.rec-table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
.dom-table td,.rec-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.dom-table tr:last-child td,.rec-table tr:last-child td{border-bottom:0}
.dom-name{font-family:var(--heading);font-weight:600;font-size:16px}
.right{text-align:right}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px}
.break{word-break:break-all;max-width:420px}

.manage{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 67px)}
@media (max-width:820px){.manage{grid-template-columns:1fr}}
.manage-side{border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;gap:10px;background:#181817}
@media (max-width:820px){.manage-side{border-right:0;border-bottom:1px solid var(--line)}}
.side-label{font-size:12px;color:var(--muted);font-weight:600}
.manage-side select{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:10px 12px;margin-bottom:10px}
.side-nav{display:grid;gap:4px}
.side-nav a{display:block;padding:10px 12px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:15px}
.side-nav a:hover{color:var(--text);background:#232322}
.side-nav a.on{background:#262422;color:var(--text);font-weight:600}
.side-back{margin-top:auto;color:var(--muted);font-size:14px}
.manage-main{padding:32px clamp(16px,3vw,40px) 80px;max-width:1100px;width:100%}
.manage-main h1{font-size:clamp(26px,3vw,34px);margin:0 0 22px}

.ov-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
@media (max-width:980px){.ov-grid{grid-template-columns:1fr}}
.next-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:18px;counter-reset:ns}
.next-steps li{counter-increment:ns;position:relative;padding-left:44px;display:grid;gap:4px;justify-items:start}
.next-steps li::before{content:counter(ns);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.next-steps li.done::before{content:"";border-color:var(--ok);background:var(--ok)}
.next-steps span{color:var(--muted);font-size:14px}
.next-steps .btn{margin-top:6px}
.ov-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.ov-head strong{font-family:var(--heading);font-size:18px;word-break:break-all}
.kv{margin:0;display:grid;gap:10px}
.kv div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
.ov-ns{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.ov-ns-head{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:8px}
.ov-ns-head a{color:var(--orange)}
.ov-ns ul,.ns-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px}
.ns-list li{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.ns-form{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;display:grid;gap:12px}
.radio{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.radio strong{color:var(--text)}
.radio input{margin-top:3px;accent-color:var(--orange)}
.ns-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.ns-inputs{grid-template-columns:1fr}}
.ns-inputs input,.rec-add input,.rec-add select,.rec-tools input,.editing input{background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px 12px;width:100%}
.ns-inputs input:focus,.rec-add input:focus,.rec-add select:focus,.rec-tools input:focus,.editing input:focus{outline:none;border-color:var(--orange)}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}
.rec-add{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px}
.rec-add label{display:grid;gap:6px;font-size:12px;color:var(--muted);font-weight:600;flex:1 1 130px}
.rec-add label.grow{flex:3 1 260px}
.rec-add label.short{flex:0 1 110px}
.rec-add .btn{flex:0 0 auto}
.rec-tools{margin:14px 0 6px;max-width:320px}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;width:34px;height:34px;display:inline-grid;place-items:center;cursor:pointer;margin-left:6px}
.icon-btn:hover{color:var(--text);border-color:#57554f}
.icon-btn.danger:hover,.icon-btn.confirm{color:var(--err);border-color:var(--err)}
.icon-btn.confirm{background:rgba(255,107,107,.1)}
.icon-btn.ok{color:var(--ok)}
.icon-btn:disabled{opacity:.5;cursor:default}
.actions{white-space:nowrap}
.editing td{background:#1f1f1e}

/* Propriedade do domínio */
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-head h2{margin:0}
.kv-tight{gap:10px}
.kv-tight div{display:grid;gap:2px}
.kv-tight dd{font-weight:500;overflow-wrap:anywhere}
.holder-grid{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;border:1px solid var(--line);border-radius:12px;padding:18px}
.holder-grid div{min-width:0}
.holder-grid .wide{grid-column:1 / -1}
.holder-grid dt{font-size:12px;color:var(--muted);margin-bottom:3px}
.holder-grid dd{margin:0;font-size:15px;overflow-wrap:anywhere}
@media (max-width:560px){.holder-grid{grid-template-columns:1fr}}
.owner-form{display:grid;gap:14px;margin-top:4px}
.owner-form .note{margin-top:0}
.msg.ok{background:rgba(79,191,127,.1);color:#9fe0bb;border:1px solid rgba(79,191,127,.3);margin:14px 0 0}
.choice-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.choice-cards{grid-template-columns:1fr}}
.choice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;transition:border-color .15s}
.choice:hover{border-color:#55554f}
.choice:has(input:checked){border-color:var(--orange);background:rgba(255,99,53,.06)}
.choice:has(input:disabled){cursor:default;opacity:.7}
.choice input{margin-top:3px;accent-color:var(--orange)}
.choice-body{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.choice-body strong{color:var(--text);font-size:15px}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.switch-row > span{display:grid;gap:2px;font-size:15px}
.switch-row .note{margin:0}
.switch{appearance:none;flex:none;width:44px;height:24px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#f3f3ee;transition:transform .15s}
.switch:checked{background:var(--orange)}
.switch:checked::after{transform:translateX(20px)}
.switch:disabled{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}}
.history{list-style:none;margin:0;padding:0;display:grid}
.history li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.history li:first-child{border-top:0}
.history .h-text{display:grid;gap:3px;min-width:0}
.history .h-what{overflow-wrap:anywhere}
.history .h-when{font-size:12px;color:var(--muted)}
.history .h-tag{font-size:12px;color:var(--muted);white-space:nowrap}
.history .mono{font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:13px}
.brand-box{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.brand-list{list-style:none;margin:0 0 12px;padding:0;display:grid}
.brand-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.brand-list li:first-child{border-top:0}
.brand-list .b-name{font-weight:600;overflow-wrap:anywhere}
.brand-list .b-name span{color:var(--orange)}
.brand-list .b-buy{display:flex;align-items:center;gap:12px;flex:none}
.brand-list .b-price{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.brand-list .b-price small{color:var(--muted);font-size:12px}
.more-link{color:var(--orange);font-size:14px}
.fwd-form{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}

.fwd-form .note{margin:0}
.fwd-form .check{margin:0}

/* Checkout em modo renovação / só cartão: sem o formulário do titular, resumo centralizado */
.checkout.single{grid-template-columns:minmax(0,520px);justify-content:center}
.transfer-box{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px;display:grid;gap:10px}
.transfer-box h2{margin:0}
.transfer-box .hint{margin:0}
.save-card{margin:14px 0 0}
.switch-tight{border-top:0;padding:4px 0 0}
.switch-tight > span{font-size:14px}
#pageOk{margin:0 0 18px}
.dom-table td.muted{color:var(--muted)}

/* Site no Multicode (visão geral) */
.mc-box{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;display:grid;gap:12px}
.mc-box h2{margin:0}
.mc-box .note{margin:0}
.mc-connected{display:grid;gap:8px}
.mc-line{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.mc-line > span:first-child{color:var(--muted)}
.mc-form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.mc-form .check{margin:0}
.mc-host{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.mc-host:focus-within{border-color:var(--orange)}
.mc-host input{border:0!important;background:transparent!important;width:7ch;flex:none;text-align:right;padding-right:2px!important}
.mc-host span{color:var(--muted);padding:10px 12px 10px 0;overflow-wrap:anywhere}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}