:root{
  --bg:#0d0e10;--panel:#17181b;--panel2:#1c1d21;--text:#f4f4f5;--muted:#9fa1a8;
  --line:#2a2c31;--accent:#ff9900;--green:#2ecc71;--red:#ef5b62;--blue:#4fc3f7;
  --shadow:0 18px 60px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
body{font-size:15px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.public-bg{background:
 radial-gradient(circle at 50% -10%,rgba(255,153,0,.16),transparent 32rem),
 linear-gradient(180deg,#101114,#090a0c)}
.admin-bg{background:#0d0e10}
.brand-mark{width:62px;height:62px;border-radius:20px;background:linear-gradient(135deg,#ff9900,#ffb43b);color:#151515;display:grid;place-items:center;font-size:30px;font-weight:900;box-shadow:0 15px 40px rgba(255,153,0,.18)}
.brand-mark.small{width:42px;height:42px;border-radius:13px;font-size:21px}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:22px}
.auth-card{width:min(100%,440px);padding:28px;border:1px solid var(--line);background:rgba(23,24,27,.94);border-radius:24px;box-shadow:var(--shadow)}
.auth-card .brand-mark{margin-bottom:20px}
h1,h2,p{margin-top:0}
h1{font-size:28px;margin-bottom:5px}
h2{font-size:19px}
.muted,.auth-card p{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:7px;font-weight:700;color:#d8d8db}
label small{font-weight:500;color:var(--muted)}
input,select,textarea{
  width:100%;color:var(--text);background:#101114;border:1px solid var(--line);
  border-radius:12px;padding:12px 13px;outline:none
}
input:focus,select:focus,textarea:focus{border-color:rgba(255,153,0,.7);box-shadow:0 0 0 3px rgba(255,153,0,.08)}
textarea{resize:vertical}
.check{flex-direction:row;align-items:center}
.check input{width:auto}
.btn{
  border:1px solid var(--line);background:#22242a;color:#fff;border-radius:11px;
  min-height:42px;padding:9px 14px;font-weight:800;display:inline-flex;align-items:center;
  justify-content:center;gap:7px
}
.btn:hover{filter:brightness(1.08)}
.btn.primary{background:linear-gradient(135deg,#ff9900,#ffb23a);border-color:#ff9900;color:#171717}
.btn.danger{border-color:rgba(239,91,98,.5);background:rgba(239,91,98,.12);color:#ff8187}
.btn.ghost{background:transparent}
.btn.full{width:100%}
.btn.big{min-height:52px;font-size:16px}
.btn.small{min-height:34px;padding:6px 10px;font-size:12px}
.alert{border-radius:12px;padding:12px 14px;margin:12px 0;border:1px solid var(--line)}
.alert.success{background:rgba(46,204,113,.1);border-color:rgba(46,204,113,.3);color:#6ee7a1}
.alert.danger{background:rgba(239,91,98,.1);border-color:rgba(239,91,98,.3);color:#ff8c91}
.alert.warning{background:rgba(255,153,0,.1);border-color:rgba(255,153,0,.3);color:#ffc260}
.admin-shell{display:flex;min-height:100vh}
.sidebar{width:240px;background:#111216;border-right:1px solid var(--line);padding:22px 15px;position:fixed;inset:0 auto 0 0}
.admin-brand{display:flex;align-items:center;gap:11px;padding:0 5px 20px}
.admin-brand strong,.admin-brand span{display:block}
.admin-brand span{font-size:12px;color:var(--muted)}
.sidebar nav{display:flex;flex-direction:column;gap:4px}
.sidebar nav a{padding:11px 12px;border-radius:10px;color:#c6c7cc;font-weight:700}
.sidebar nav a:hover{background:#1d1f24;color:#fff}
.admin-main{margin-left:240px;flex:1;padding:24px;min-width:0}
.top-admin{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.top-admin h1{margin:2px 0 0}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:11px;color:var(--accent)}
.admin-user{border:1px solid var(--line);padding:9px 12px;border-radius:12px;color:var(--muted)}
.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.stat-card span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
.stat-card strong{font-size:25px}
.stat-card.accent{border-color:rgba(255,153,0,.35)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:17px;margin-bottom:16px;box-shadow:0 10px 35px rgba(0,0,0,.12)}
.card-head,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-head h2{margin:0}
.card-head a{color:var(--accent);font-size:13px;font-weight:800}
.two-col{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(400px,1.2fr);gap:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.list-stack{display:flex;flex-direction:column;gap:9px}
.entity{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#111216;border:1px solid var(--line);border-radius:12px;padding:12px}
.entity strong,.entity span{display:block}
.entity span{color:var(--muted);font-size:12px;margin-top:3px;word-break:break-all}
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.actions form{margin:0}
.toolbar-form,.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar-form input,.toolbar-form select{width:auto;min-width:180px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
td small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.badge{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800}
.badge.renewed{color:#67e99e;border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.08)}
.badge.error{color:#ff8d92;border-color:rgba(239,91,98,.35);background:rgba(239,91,98,.08)}
.badge.processing,.badge.paid{color:#ffc163;border-color:rgba(255,153,0,.35);background:rgba(255,153,0,.08)}
.error-text{color:#ff8d92!important;max-width:260px}
.code-box{background:#0b0c0e;border:1px solid var(--line);border-radius:12px;padding:14px;white-space:pre-wrap;word-break:break-all;color:#d5d6d9;margin:10px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

.renew-shell{width:min(100%,520px);margin:0 auto;padding:calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 30px)}
.renew-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.renew-header .brand-mark{width:52px;height:52px;border-radius:16px;font-size:24px}
.renew-header h1{font-size:25px;margin:2px 0 0}
.renew-card,.account-card,.mini-grid>div{
  background:rgba(23,24,27,.93);border:1px solid var(--line);box-shadow:0 12px 42px rgba(0,0,0,.2)
}
.renew-card{border-radius:20px;padding:18px;margin-bottom:14px}
.account-card{border-radius:20px;padding:15px;display:flex;align-items:center;gap:12px;margin-bottom:11px;border-color:rgba(255,153,0,.35)}
.account-card .avatar{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#ff9900,#ffbf54);display:grid;place-items:center;color:#191919;font-size:22px;font-weight:900}
.account-card h2{margin:2px 0;font-size:20px}
.account-card p,.account-card .muted{margin:0;font-size:12px;color:var(--muted)}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--green);margin-left:auto;box-shadow:0 0 14px rgba(46,204,113,.45)}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.mini-grid>div{border-radius:15px;padding:13px;text-align:center}
.mini-grid span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:800;margin-bottom:5px}
.mini-grid strong{color:var(--accent);font-size:15px}
.plans-grid{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
.plan-option{display:flex;flex-direction:row;align-items:center;gap:11px;border:1px solid var(--line);background:#111216;border-radius:14px;padding:13px;cursor:pointer}
.plan-option.selected{border-color:rgba(255,153,0,.75);background:rgba(255,153,0,.06)}
.plan-option input{width:auto}
.plan-option span{flex:1}
.plan-option span small,.plan-option span strong{display:block}
.plan-option span small{color:var(--muted);font-size:10px;text-transform:uppercase}
.plan-option b{color:var(--accent)}
.secure-note{text-align:center;color:var(--muted);font-size:11px;margin:12px 0 0}
.payment-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px}
.payment-modal[hidden]{display:none}
.payment-box{width:min(100%,440px);max-height:92vh;overflow:auto;background:#17181b;border:1px solid var(--line);border-radius:22px;padding:21px;box-shadow:var(--shadow);position:relative}
.modal-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#222;color:#fff;font-size:20px}
.pix-qr{display:block;width:220px;height:220px;object-fit:contain;background:#fff;padding:8px;border-radius:14px;margin:14px auto}
.pix-copy-wrap textarea{height:82px;font-size:11px}
.payment-state{display:flex;align-items:center;gap:12px;margin:14px 0;padding:12px;background:#111216;border:1px solid var(--line);border-radius:13px}
.payment-state strong,.payment-state small{display:block}
.payment-state small{color:var(--muted);font-size:11px;margin-top:3px}
.loader{width:26px;height:26px;border:3px solid #333;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.success-screen{text-align:center;padding:20px 0}
.success-icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.4);color:var(--green);font-size:38px;font-weight:900;margin:0 auto 16px}

@media(max-width:1050px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:760px){
  .admin-shell{display:block}
  .sidebar{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .admin-brand{padding-bottom:10px}
  .sidebar nav{flex-direction:row;overflow:auto}
  .sidebar nav a{white-space:nowrap;padding:9px}
  .admin-main{margin-left:0;padding:14px}
  .top-admin{align-items:flex-end}
  .top-admin h1{font-size:24px}
  .admin-user{display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .toolbar{align-items:stretch;flex-direction:column}
  .toolbar-form{display:grid;grid-template-columns:1fr}
  .toolbar-form input,.toolbar-form select{width:100%}
  .entity{align-items:flex-start;flex-direction:column}
}
@media(max-width:420px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-card{padding:13px}
  .stat-card strong{font-size:20px}
  .mini-grid{gap:7px}
}

.separator{border:0;border-top:1px solid var(--line);margin:3px 0}
.gateway-config{border:1px solid var(--line);background:#111216;border-radius:14px;padding:14px}
.gateway-config h3{margin:0 0 12px;color:var(--accent);font-size:15px}
.gateway-config label+label{margin-top:11px}
.gateway-choice{margin:15px 0}
.gateway-choice-title{display:block;font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:900;margin-bottom:8px}
.gateway-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gateway-option{display:flex;flex-direction:row;align-items:center;gap:9px;background:#111216;border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer}
.gateway-option.selected{border-color:rgba(255,153,0,.7);background:rgba(255,153,0,.06)}
.gateway-option input{display:none}
.gateway-option>span:last-child{min-width:0}
.gateway-option strong,.gateway-option small{display:block}
.gateway-option strong{font-size:13px}
.gateway-option small{font-size:9px;color:var(--muted);margin-top:3px}
.gateway-icon{width:38px;height:38px;min-width:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,153,0,.12);color:var(--accent);font-size:12px;font-weight:900}
@media(max-width:380px){.gateway-choice-grid{grid-template-columns:1fr}}


/* =========================================================
   V3.3 - MOSTRAR / OCULTAR CAMPOS SENSÍVEIS
   Todo input type=password recebe automaticamente um olho.
   ========================================================= */
.password-eye-wrap{
    position:relative;
    width:100%;
}

.password-eye-wrap > input{
    width:100%;
    padding-right:46px !important;
}

.password-eye-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    z-index:3;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

.password-eye-toggle:hover{
    color:var(--text-main);
    background:rgba(255,255,255,.05);
}

.password-eye-toggle:active{
    transform:translateY(-50%) scale(.94);
}

.password-eye-toggle.is-visible{
    color:var(--accent);
    background:rgba(var(--accent-rgb),.08);
}

.password-eye-toggle svg{
    width:18px;
    height:18px;
    display:block;
    pointer-events:none;
}

.password-eye-toggle:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

@media(max-width:640px){
    .password-eye-toggle{
        width:38px;
        height:38px;
        right:5px;
    }

    .password-eye-wrap > input{
        padding-right:50px !important;
    }
}


/* =========================================================
   V3.5 - STATUS DOS GATEWAYS / CERTIFICADO
   ========================================================= */
.gateway-status-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:16px;
}

.gateway-status-card{
    border:1px solid var(--border);
    background:rgba(255,255,255,.025);
    border-radius:14px;
    padding:12px;
    min-width:0;
}

.gateway-status-card .gateway-status-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
}

.gateway-status-card strong{
    color:var(--text-main);
    font-size:.82rem;
}

.gateway-status-card p{
    margin:0;
    color:var(--text-muted);
    font-size:.65rem;
    line-height:1.4;
}

.certificate-status-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 11px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.025);
    margin-top:7px;
}

.certificate-status-box > div{
    min-width:0;
}

.certificate-status-box strong,
.certificate-status-box span{
    display:block;
}

.certificate-status-box strong{
    font-size:.72rem;
    color:var(--text-main);
}

.certificate-status-box span{
    font-size:.60rem;
    color:var(--text-muted);
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.btn.danger-outline{
    border-color:rgba(255,90,96,.38);
    color:#ff777c;
    background:rgba(255,90,96,.06);
}

.btn.danger-outline:hover{
    background:rgba(255,90,96,.11);
}

@media(max-width:700px){
    .gateway-status-grid{
        grid-template-columns:1fr;
    }

    .certificate-status-box{
        align-items:flex-start;
        flex-direction:column;
    }
}

.alert.info{
    border-color:rgba(80,160,255,.28);
    background:rgba(80,160,255,.08);
    color:var(--text-main);
}


/* =========================================================
   V3.8 - CONFIGURAÇÕES SALVAS POR BLOCO
   ========================================================= */
.settings-sections{
    display:grid;
    gap:14px;
}

.settings-section{
    border:1px solid var(--border);
    background:rgba(255,255,255,.025);
    border-radius:16px;
    padding:15px;
}

.settings-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.settings-section-head h3{
    margin:0;
    color:var(--text-main);
    font-size:.95rem;
}

.settings-section-head p{
    margin:4px 0 0;
    color:var(--text-muted);
    font-size:.66rem;
    line-height:1.45;
}

.settings-section .section-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px;
}

.settings-section .section-actions .btn.primary{
    min-width:190px;
}

.settings-isolation-note{
    display:flex;
    gap:9px;
    align-items:flex-start;
    padding:10px 11px;
    border-radius:12px;
    border:1px solid rgba(var(--accent-rgb),.18);
    background:rgba(var(--accent-rgb),.055);
    color:var(--text-muted);
    font-size:.64rem;
    line-height:1.45;
    margin-bottom:14px;
}

.settings-isolation-note strong{
    color:var(--text-main);
}

.gateway-select-box{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.gateway-select-option{
    position:relative;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    cursor:pointer;
    background:rgba(255,255,255,.02);
}

.gateway-select-option:has(input:checked){
    border-color:rgba(var(--accent-rgb),.55);
    background:rgba(var(--accent-rgb),.08);
}

.gateway-select-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.gateway-select-option strong,
.gateway-select-option small{
    display:block;
}

.gateway-select-option strong{
    font-size:.72rem;
    color:var(--text-main);
}

.gateway-select-option small{
    margin-top:3px;
    color:var(--text-muted);
    font-size:.57rem;
}

@media(max-width:700px){
    .gateway-select-box{
        grid-template-columns:1fr;
    }

    .settings-section{
        padding:13px;
    }

    .settings-section-head{
        flex-direction:column;
    }

    .settings-section .section-actions .btn.primary{
        width:100%;
        min-width:0;
    }
}