/* MARKSMAN · acabamento metálico do site público (aço escovado, chanfros, rebites, verde aceso) */
:root{
  --m-black:#0b0e10;--m-gun:#13181b;--m-steel-d:#1b2125;--m-steel:#2a3238;--m-steel-l:#3a444b;
  --m-edge:#59646c;--m-chrome:#e6ebef;--m-chrome-d:#9aa5ad;--m-text:#e9eef1;--m-muted:#a4afb6;
  --bg:#0b0e10;--card:#1b2125;--card2:#232a2f;--line:#3a444b;--silver:#c9d1d7;--muted:#a4afb6;--text:#e9eef1;
  --brush:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,0) 1px 3px);
  --plate:linear-gradient(180deg,#2e363c 0%,#222a2f 45%,#1a2024 100%);
  --bevel:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.55);
  --drop:0 10px 26px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.6);
}
html{background:var(--m-black)}
body{
  background:
    radial-gradient(900px 420px at 80% -8%,rgba(57,255,90,.10),transparent 62%),
    var(--brush),
    linear-gradient(180deg,#171c20 0,#0f1315 38%,#0b0e10 100%)!important;
  color:var(--m-text)}
::selection{background:#39ff5a;color:#04130a}

/* títulos em cromo */
h1,h2,.legal h2,.workspace-head h1,.login-copy h1{
  background:linear-gradient(180deg,#ffffff 0%,#dfe5e9 38%,#9aa5ad 62%,#e4e9ec 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.65));letter-spacing:-.4px}
h1 span,.hero h1 span{-webkit-text-fill-color:#39ff5a;color:#39ff5a;text-shadow:0 0 22px rgba(57,255,90,.45)}
h3{color:#f3f6f8}
.kicker,.login-copy span,.workspace-head small{color:#39ff5a!important;text-shadow:0 0 12px rgba(57,255,90,.35)}
.lead,.login-copy p{color:#c3ccd2}
a{color:#58f27a}

/* ---------- cabeçalho: barra de aço ---------- */
header.top{
  background:var(--brush),linear-gradient(180deg,#38424a 0%,#272f35 46%,#1b2125 100%)!important;
  border-bottom:1px solid #07090a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.55)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:linear-gradient(90deg,transparent,#39ff5a 20%,#39ff5a 80%,transparent);opacity:.55;filter:blur(.4px);pointer-events:none}
header.top .brand img{filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(57,255,90,.35))}
header.top .menu-btn{background:linear-gradient(180deg,#4a555d,#2a3238)!important;border:1px solid #11161a!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 rgba(0,0,0,.5)!important}
header.top .main-nav{background:linear-gradient(180deg,#252d33,#161b1f)!important;border-bottom:1px solid #000!important}
header.top .main-nav a{color:#dbe2e7;border:1px solid transparent;text-shadow:0 1px 0 rgba(0,0,0,.7)}
header.top .main-nav a:hover{color:#fff;border-color:#6b777f;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02))}
header.top .main-nav a.on{color:#fff;border-color:#0a0d0f;
  background:linear-gradient(180deg,#0d1f14,#14301d);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7),inset 0 -1px 0 rgba(57,255,90,.55),0 0 14px rgba(57,255,90,.18)}
.nav-areas{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
header.top .main-nav .nav-areas a{font-weight:800;color:#fff;border:1px solid #0a0d0f;
  background:linear-gradient(180deg,#59646c 0%,#3a444b 48%,#2a3238 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.55)}
header.top .main-nav .nav-areas a:hover{background:linear-gradient(180deg,#6d7a83,#46515a);border-color:#0a0d0f}
header.top .main-nav .nav-areas a.on{background:linear-gradient(180deg,#1f6b36,#124a24);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(57,255,90,.3)}

/* ---------- botões ---------- */
.btn,.tabs button,.form-card button,.price-card .btn{
  background:linear-gradient(180deg,#5a656d 0%,#3b454c 48%,#2a3238 52%,#333d44 100%);
  border:1px solid #0a0d0f;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.4),0 3px 0 #080a0b,0 6px 12px rgba(0,0,0,.4);
  transition:transform .08s,box-shadow .08s,filter .15s}
.btn:hover,.tabs button:hover{filter:brightness(1.15);border-color:#0a0d0f}
.btn:active,.tabs button:active,.form-card button:active{transform:translateY(2px);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 1px 0 #080a0b}
.btn.primary,.form-card button,.price-card .btn.primary{
  background:linear-gradient(180deg,#6dff8a 0%,#27d452 46%,#12852f 54%,#19a63c 100%);
  color:#021208;text-shadow:0 1px 0 rgba(255,255,255,.35);border-color:#06210f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.35),0 3px 0 #06210f,0 8px 22px rgba(57,255,90,.28)}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 0 #06210f,0 0 30px rgba(57,255,90,.55)}
.tabs button.on{background:linear-gradient(180deg,#0d1f14,#14301d);color:#7dff98;box-shadow:inset 0 2px 5px rgba(0,0,0,.7),inset 0 -1px 0 rgba(57,255,90,.6)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #39ff5a;outline-offset:2px}

/* ---------- placas (cartões) ---------- */
.card,.price-card,.form-card,.strip figure,.phones figure,.faq details,.legal .toc,.dlcard,.login-card,.editor-card,.playlist-panel,.device-panel,.account-slot{
  background:
    radial-gradient(circle at 10px 10px,#aab4bb 0 1.5px,#1b2125 2px 3.5px,transparent 4px),
    radial-gradient(circle at calc(100% - 10px) 10px,#aab4bb 0 1.5px,#1b2125 2px 3.5px,transparent 4px),
    radial-gradient(circle at 10px calc(100% - 10px),#aab4bb 0 1.5px,#1b2125 2px 3.5px,transparent 4px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#aab4bb 0 1.5px,#1b2125 2px 3.5px,transparent 4px),
    var(--brush),var(--plate)!important;
  border:1px solid #0a0d0f!important;border-radius:14px!important;
  box-shadow:var(--bevel),0 0 0 1px #46515a,var(--drop)!important}
.faq details{background:var(--brush),var(--plate)!important;border-radius:12px!important}
.faq summary{color:#f1f5f7}
.faq details[open]{box-shadow:var(--bevel),0 0 0 1px #39ff5a55,var(--drop)!important}
.card .ico{background:linear-gradient(180deg,#0d1f14,#14301d);border:1px solid #000;color:#39ff5a;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7),inset 0 -1px 0 rgba(57,255,90,.5);border-radius:12px}
.steps .card::before{color:#39ff5a;text-shadow:0 0 10px rgba(57,255,90,.5)}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--bevel),0 0 0 1px #39ff5a88,var(--drop),0 0 28px rgba(57,255,90,.18)!important}
.price-value{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.7)}
.price-credits{color:#39ff5a}
.disclaimer{background:var(--brush),linear-gradient(180deg,#2a2518,#1c1910)!important;border:1px solid #0a0d0f!important;border-left:4px solid #d9a93a!important;border-radius:10px!important;box-shadow:var(--bevel),var(--drop)}
.disclaimer b{color:#f0c55e}

/* TV com moldura metálica */
.tv{border:0!important;border-radius:14px!important;background:#000;
  box-shadow:0 0 0 3px #0a0d0f,0 0 0 8px #3a444b,0 0 0 9px #7b8790,0 0 0 11px #0a0d0f,0 22px 50px rgba(0,0,0,.7),0 0 60px rgba(57,255,90,.10)!important}
.phone{border:0!important;box-shadow:0 0 0 3px #0a0d0f,0 0 0 6px #4d5860,0 0 0 7px #8b96a0,0 18px 40px rgba(0,0,0,.65)!important}
.strip img{border-radius:8px}

/* lojas */
.stores .st{background:var(--brush),linear-gradient(180deg,#2d353b,#161b1f)!important;border:1px solid #000!important;border-radius:12px!important;
  box-shadow:var(--bevel),0 0 0 1px #46515a,0 4px 10px rgba(0,0,0,.5)}
.stores a.st:hover{box-shadow:var(--bevel),0 0 0 1px #39ff5a,0 0 18px rgba(57,255,90,.3);background:var(--brush),linear-gradient(180deg,#36404a,#1c2227)!important}
.platforms span{background:linear-gradient(180deg,#2d353b,#1a2024);border:1px solid #000;color:#cdd5db;box-shadow:var(--bevel),0 0 0 1px #3a444b}
.avail-t{color:#b8c2c9}

/* campos rebaixados */
input,select,textarea{background:linear-gradient(180deg,#0a0d0f,#12171a)!important;border:1px solid #000!important;color:#f1f5f7!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.12)!important;border-radius:10px!important}
input:focus,select:focus,textarea:focus{border-color:#39ff5a!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 3px rgba(57,255,90,.28)!important}
label{color:#d3dbe0}

/* textos legais */
.legal{background:none}
.legal h2{border-bottom:1px solid #3a444b;padding-bottom:.35em}
.legal .toc a{color:#58f27a}

/* ---------- rodapé ---------- */
.foot{background:var(--brush),linear-gradient(180deg,#242b30 0%,#14191c 100%)!important;border-top:1px solid #000!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 -6px 18px rgba(0,0,0,.5);position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-3px;height:2px;background:linear-gradient(90deg,transparent,#39ff5a 20%,#39ff5a 80%,transparent);opacity:.5}
.foot-grid b{color:#fff;text-shadow:0 1px 0 #000}
.foot-grid a{color:#c4ced4}
.foot-grid a:hover{color:#39ff5a}
.foot .areas a{display:inline-block;margin:4px 6px 0 0;padding:6px 12px;border-radius:8px;font-weight:800;color:#fff;border:1px solid #000;
  background:linear-gradient(180deg,#59646c,#2a3238);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #000;text-decoration:none}

/* ---------- Ativar dispositivo (portal) ---------- */
body.login-page,body.dashboard-page{background:radial-gradient(900px 420px at 80% -8%,rgba(57,255,90,.10),transparent 62%),var(--brush),linear-gradient(180deg,#171c20,#0b0e10)!important}
.sidebar{background:var(--brush),linear-gradient(180deg,#2a3238,#171c20)!important;border-right:1px solid #000!important;box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
.sidebar a{color:#d3dbe0;border:1px solid transparent;border-radius:10px}
.sidebar a:hover,.sidebar a.selected{background:linear-gradient(180deg,#0d1f14,#14301d)!important;color:#fff!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.7),inset 0 -1px 0 rgba(57,255,90,.55)!important}
.mac-chip{background:linear-gradient(180deg,#0a0d0f,#12171a);border:1px solid #000;color:#7dff98;box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
button:not(.secondary):not(.delete):not(.mobile-menu):not(.modal-close):not(.menu-btn):not(.tabs button){
  background:linear-gradient(180deg,#6dff8a 0%,#27d452 46%,#12852f 54%,#19a63c 100%)!important;color:#021208!important;border:1px solid #06210f!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 0 #06210f,0 8px 22px rgba(57,255,90,.22)!important;border-radius:10px;font-weight:800}
button.secondary{background:linear-gradient(180deg,#5a656d,#2a3238)!important;color:#fff!important;border:1px solid #000!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 #000}
table{border-color:#3a444b}
th{background:linear-gradient(180deg,#3a444b,#252d33)!important;color:#fff!important}

/* ---------- Ativação rápida (QR) ---------- */
.shell>.card{background:var(--brush),var(--plate)!important}
.secure{background:linear-gradient(180deg,#0d1f14,#14301d)!important;border:1px solid #000!important;color:#7dff98!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.device{background:linear-gradient(180deg,#0a0d0f,#12171a)!important;border:1px solid #000!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.step{background:var(--brush),linear-gradient(180deg,#2d353b,#1a2024)!important;border:1px solid #000!important;box-shadow:var(--bevel),0 0 0 1px #3a444b}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (max-width:520px){.tv{box-shadow:0 0 0 2px #0a0d0f,0 0 0 5px #3a444b,0 0 0 6px #7b8790,0 14px 30px rgba(0,0,0,.7)!important}}

/* listas suspensas (select) */
select{color-scheme:dark;cursor:pointer}
select option,select optgroup{background-color:#14191c!important;color:#f1f5f7!important}
select option:checked,select option:hover{background:linear-gradient(#1f6b36,#1f6b36)!important;color:#fff!important}

/* ---------- planos de provedores ---------- */
.notice{padding:14px 16px;border-radius:10px;font-weight:700;border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 10px rgba(0,0,0,.5)}
.notice.error{background:linear-gradient(180deg,#5a1d24,#3a1217);color:#ffd2d8}
.notice.success{background:linear-gradient(180deg,#14532d,#0c331c);color:#c9ffd8}
.plan-feats{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:7px;color:#dfe7ea;font-size:14.5px;text-align:left}
.plan-feats li{position:relative;padding-left:24px}
.plan-feats li::before{content:"";position:absolute;left:2px;top:.35em;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b6ffc4,#27d452 55%,#0b6b24);box-shadow:0 0 6px rgba(57,255,90,.5)}
.form-card .plan-feats{padding:12px 14px;border-radius:10px;background:linear-gradient(180deg,#0a0d0f,#12171a);box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.form-card label.check{flex-direction:row;align-items:center;gap:10px;font-weight:600}
.form-card label.check input{width:auto;flex:none;accent-color:#27d452}
.form-card button:disabled{opacity:.5;cursor:not-allowed}
.form-card small{font-weight:500;color:#9aa7ad}
.pix-box{max-width:460px;margin:0 auto;text-align:center;display:grid;gap:14px}
.pix-box img.pix-qr{width:230px;height:230px;margin:0 auto;background:#fff;border-radius:12px;padding:10px;box-shadow:0 0 0 2px #000,0 0 0 4px #3a444b}
.pix-box code{display:block;word-break:break-all;text-align:left;font-size:12px;line-height:1.4;padding:12px;border-radius:10px;background:linear-gradient(180deg,#0a0d0f,#12171a);box-shadow:inset 0 2px 6px rgba(0,0,0,.8);max-height:110px;overflow:auto;color:#cfe3d6}
.price-grid.plans{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.price-grid.plans .price-credits{font-size:38px;white-space:nowrap}
.price-grid.plans .price-credits small{font-size:15px}
.price-grid.plans .price-value small{display:inline-block;white-space:nowrap}
.price-grid.plans .price-card .btn{text-align:center}