:root{
  --bg:#14141f; --bg2:#1b1b29; --card:#1c1c2b; --card2:#24243a; --line:#2e2e46;
  --txt:#e7eaf5; --mut:#9aa0bd; --acc:#7c4dff; --acc2:#b69bff; --gold:#ffcc33;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1100px 560px at 50% -12%, #241a4a 0%, var(--bg) 58%);
  color:var(--txt); font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 18px; background:rgba(16,16,26,.82); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.nav-brand img{height:34px; display:block}
.nav-links{display:flex; gap:6px; flex-wrap:wrap}
.nav-links a{
  color:var(--mut); text-decoration:none; font-size:14px; font-weight:600;
  padding:8px 12px; border-radius:9px;
}
.nav-links a:hover{color:var(--txt); background:var(--card2)}
.nav-links a.on{color:#fff; background:linear-gradient(180deg,#8a5bff,#6a3df0)}

.wrap{max-width:820px; margin:0 auto; padding:24px 16px 40px}

/* ---------- HERO ---------- */
.hero{text-align:center; padding:26px 8px 20px}
.hero.small{padding:16px 8px 6px}
.hero-logo{width:180px; max-width:64%; margin:0 auto 14px; display:block}
.hero-title{font-size:32px; line-height:1.15; margin:0 0 10px; font-weight:800}
.hero-title span{background:linear-gradient(90deg,#4aa3ff,#7c4dff,#e0407f); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{color:var(--mut); font-size:15.5px; line-height:1.55; max-width:560px; margin:0 auto}
.hero-sub b{color:var(--txt)}
.hero-cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px}
.hero-cta .btn{width:auto; padding:13px 22px; margin:0}

/* ---------- CARDS / TEXTO ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px; box-shadow:0 8px 28px rgba(0,0,0,.28)}
.card-narrow{max-width:460px; margin-left:auto; margin-right:auto}
h1{font-size:24px; margin:0 0 8px}
h2{font-size:19px; margin:0 0 12px; text-align:center}
.sub{color:var(--mut); font-size:14px; line-height:1.55; margin:0 0 14px}
.sub.small{font-size:12.5px}
.ilink,.sub a{color:var(--acc2)}
code{background:var(--card2); padding:2px 6px; border-radius:6px; font-size:12px; color:#cdbcff}

/* ---------- INFO GRID (home / revenda) ---------- */
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 24px}
.info{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px}
.info-ic{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:linear-gradient(180deg,#2a2350,#1e1a3c); border:1px solid #3a3466; margin-bottom:10px; color:var(--acc2)}
.info b{font-size:15px}
.info p{margin:5px 0 0; color:var(--mut); font-size:13px; line-height:1.5}

/* ---------- PLATAFORMAS ---------- */
.plats{margin:8px 0 22px}
.plat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.plat{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; color:var(--acc2); font-size:13px; font-weight:600; text-align:center}
.plat span{color:var(--txt)}

/* ---------- FORM / BOTÕES ---------- */
.form{display:flex; flex-direction:column; gap:6px}
.form label{font-size:12.5px; color:var(--mut); margin-top:8px}
.form input{background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:13px 14px; font-size:15px; outline:none; width:100%}
.form input:focus{border-color:var(--acc)}
.btn{display:inline-block; text-align:center; text-decoration:none; margin-top:14px;
  background:linear-gradient(180deg,#8a5bff,#6a3df0); color:#fff; border:none; border-radius:10px;
  padding:14px; font-size:15.5px; font-weight:700; cursor:pointer; width:100%}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent; border:1px solid var(--acc); color:var(--acc2)}
.btn-tg{background:linear-gradient(180deg,#2aa3e0,#1c7fc0)}
.link{background:none; border:none; color:var(--mut); cursor:pointer; font-size:13px; text-decoration:underline; padding:6px 0}
.link.danger{color:#ff8a9a}
.form-inline{margin:10px 0 0}

/* opção manual da lista (Servidor/Usuário/Senha) */
.manual{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:0 14px 8px; margin-top:12px}
.manual summary{cursor:pointer; font-size:13px; color:var(--acc2); font-weight:600; padding:12px 0; list-style:none}
.manual summary::-webkit-details-marker{display:none}
.manual summary::after{content:"+"; float:right; color:var(--acc2); font-weight:800}
.manual[open] summary::after{content:"\2013"}
.manual input{margin-bottom:2px}

/* ---------- CONTA ---------- */
.acc-head{display:flex; align-items:center; justify-content:space-between}
.acc-head h1{margin:0}
.logout-f{margin:0}
.ids{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:12.5px; color:var(--mut)}
.chip b{color:var(--txt); font-weight:700; letter-spacing:.4px}
.chip i{font-style:normal}
.lic{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0 4px}
.lic-date{color:var(--mut); font-size:13px}
.badge{display:inline-block; padding:8px 14px; border-radius:999px; font-weight:700; font-size:14px}
.badge-gray{background:#2a2a40; color:#c7ccdd}
.badge-blue{background:#1c2f52; color:#9cc4ff}
.badge-green{background:#173a2a; color:#77e0a6}
.badge-red{background:#3f1a2a; color:#ff9ab0}

/* ---------- PLANO ---------- */
.renew{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.plan{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.plan-name{font-weight:600}
.plan-price{font-weight:800; font-size:22px; color:var(--gold)}
.plan-card{text-align:center}
.plan-big{padding:8px 0 4px}
.plan-price-big{font-weight:800; font-size:40px; color:var(--gold); line-height:1.1; margin:6px 0 2px}

/* ---------- MENSAGENS ---------- */
.msg{border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:14px; line-height:1.45}
.msg.err{background:#3a1420; border:1px solid #5e1f33; color:#ffb3c4}
.msg.ok{background:#123321; border:1px solid #1d5e39; color:#8fe7b3}

h2.left{text-align:left}
.center{text-align:center}

/* ---------- RECURSOS ---------- */
.feat{margin:8px 0 22px}
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.feat-i{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 15px; font-size:13.5px; color:var(--txt)}

/* ---------- COMO COMEÇAR (revenda) ---------- */
.howto{margin:0; padding-left:20px; counter-reset:none}
.howto li{color:var(--mut); font-size:14px; line-height:1.6; margin-bottom:10px}
.howto li b{color:var(--txt)}
.howto li::marker{color:var(--acc2); font-weight:800}

/* ---------- FAQ ---------- */
.faq{margin:8px 0 10px}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:2px 16px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:600; font-size:14.5px; padding:13px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--acc2); font-weight:800}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 14px; color:var(--mut); font-size:13.5px; line-height:1.55}

/* ---------- PÁGINAS LEGAIS ---------- */
.disclaimer{color:var(--mut); font-size:12.5px; line-height:1.55; text-align:center; max-width:640px; margin:8px auto 0}
.legal{max-width:720px; margin:0 auto; padding:8px 2px 10px}
.legal h1{font-size:26px; margin-bottom:4px}
.legal-upd{color:var(--mut); font-size:13px; margin:0 0 18px}
.legal h2{font-size:17px; text-align:left; margin:22px 0 8px; color:var(--acc2)}
.legal p, .legal li{color:#c7ccdd; font-size:14px; line-height:1.65}
.legal ul{margin:6px 0 6px 18px; padding:0}
.legal li{margin-bottom:4px}
.legal-back{margin-top:26px}
.legal-back a{color:var(--acc2)}

/* ---------- RODAPÉ ---------- */
.foot{display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--mut);
  font-size:12.5px; padding:26px 16px 34px; border-top:1px solid var(--line); margin-top:24px; text-align:center}
.foot-brand{display:flex; align-items:center; gap:8px; color:var(--txt); font-weight:700}
.foot-ic{width:22px; height:22px; border-radius:6px; display:block}
.foot-links{display:flex; gap:18px}
.foot-links a{color:var(--acc2); text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-note{max-width:520px; line-height:1.5}

/* ---------- RESPONSIVO ---------- */
@media (max-width:640px){
  .info-grid{grid-template-columns:1fr}
  .plat-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:1fr}
  .hero-title{font-size:26px}
}