*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#13213a;background:#f5f8fd}a{text-decoration:none;color:inherit}.page{max-width:1180px;margin:auto;padding:34px 22px 60px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.header h1{margin:4px 0 0;font-size:30px}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;color:#1677ff}.link{color:#1677ff;font-weight:700}.admin-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.panel,.vps-card,.auth-card{background:#fff;border:1px solid #e3eaf5;border-radius:22px;box-shadow:0 14px 40px rgba(30,73,130,.08)}.panel{padding:26px}.panel h2{margin:0 0 6px;font-size:21px}.sub{color:#718096;margin:0 0 20px}.stack{display:grid;gap:15px}.stack label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#44546a}.input,.mini,select{width:100%;border:1px solid #d7e0ec;background:#fff;border-radius:12px;padding:13px 14px;font:inherit;color:#13213a;outline:none;transition:.2s}.input:focus,.mini:focus,select:focus{border-color:#1677ff;box-shadow:0 0 0 4px rgba(22,119,255,.09)}.btn{border:0;border-radius:12px;background:#1677ff;color:white;font-weight:800;padding:13px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn:hover{filter:brightness(.97)}.btn.secondary{background:#eaf3ff;color:#1268d8}.btn.small{padding:10px 13px}.btn.full{width:100%;font-size:16px}.alert{padding:14px 16px;border-radius:13px;margin:0 0 18px}.alert.success{background:#eafaf1;color:#18794e;border:1px solid #c9efd9}.alert.danger{background:#fff0f0;color:#c83232;border:1px solid #ffd1d1}.clients{margin-top:18px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.pill{background:#eaf3ff;color:#1268d8;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800}.table-wrap{overflow:auto;margin-top:14px}table{width:100%;border-collapse:collapse;min-width:820px}th,td{text-align:left;padding:15px 10px;border-bottom:1px solid #edf1f7;font-size:14px}th{color:#718096;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.status{display:inline-flex;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800}.status.active{background:#e8f8ef;color:#16834f}.status.expired{background:#fff0f0;color:#cf3333}.inline-edit{display:flex;gap:7px;align-items:center}.mini{padding:9px 10px;min-width:92px}.inline-edit .mini:nth-of-type(2){min-width:125px}.empty{text-align:center;color:#8a98aa;padding:30px}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#f8fbff,#eef5ff)}.auth-card{width:min(460px,100%);padding:34px}.auth-card h1{margin:10px 0 5px}.logo-mark{width:48px;height:48px;border-radius:14px;background:#1677ff;color:white;display:grid;place-items:center;font-size:25px;font-weight:900;margin-bottom:20px}.client-page{max-width:900px}.vps-card{padding:30px}.vps-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.vps-top h2{font-size:28px;margin:13px 0}.price{font-size:32px;font-weight:900;color:#1677ff}.price small{font-size:13px;color:#8a98aa;font-weight:600}.due-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.due-grid>div{background:#f7faff;border:1px solid #e4edf8;border-radius:16px;padding:18px}.due-grid span{display:block;color:#7b899b;font-size:12px;margin-bottom:7px}.due-grid strong{font-size:20px}.countdown{color:#16834f}.countdown.red{color:#cf3333}.pending-link{display:block;text-align:center;color:#1677ff;font-weight:700;margin-top:16px}@media(max-width:760px){.page{padding:22px 14px 40px}.admin-grid,.due-grid{grid-template-columns:1fr}.header h1{font-size:24px}.panel,.vps-card{padding:20px}.vps-top{display:block}.price{margin-top:12px}.auth-card{padding:25px}.inline-edit{min-width:520px}}
/* PIX ROXO CENTRALIZADO V6 */
.pix-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at top,rgba(126,34,206,.13),transparent 38%),#f8f6fc}
.pix-card{width:min(500px,100%);background:#fff;border:1px solid #eadcff;border-radius:28px;padding:28px;box-shadow:0 25px 70px rgba(88,28,135,.16);text-align:center}
.pix-card h1{margin:0;color:#181026;font-size:30px;font-weight:900;letter-spacing:-1px}
.pix-amount{font-size:38px;font-weight:950;color:#7e22ce;margin:14px 0 8px}
.pix-badge{display:inline-block;background:#fff4c7;color:#8a6500;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:800;margin-bottom:18px}
.pix-qr{width:min(290px,78vw);height:min(290px,78vw);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;padding:12px;border:1px solid #eadcff;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(126,34,206,.10)}
.pix-qr img,.pix-qr canvas{width:100%!important;height:100%!important;object-fit:contain}
.pix-code{box-sizing:border-box;width:100%;min-height:100px;padding:13px;border:1px solid #e1d5f3;border-radius:15px;background:#faf8ff;color:#302641;resize:none;font-size:12px;line-height:1.45}
.pix-copy{width:100%;margin-top:12px;padding:16px;border:0;border-radius:15px;background:linear-gradient(135deg,#7e22ce,#9333ea);color:#fff;font-size:15px;font-weight:900;cursor:pointer;box-shadow:0 12px 28px rgba(126,34,206,.25)}
.pix-back{display:inline-block;margin-top:18px;color:#7e22ce;font-weight:800;text-decoration:none}
.pix-note{font-size:13px;color:#756a84;line-height:1.5}
@media(max-width:520px){.pix-card{padding:22px 16px;border-radius:23px}.pix-card h1{font-size:27px}.pix-amount{font-size:34px}}

/* =========================================================
   PAGAR VPS - TEMA ROXO ADMIN / LOGIN
   ========================================================= */

:root{
    --purple:#7e22ce;
    --purple-2:#9333ea;
    --purple-dark:#581c87;
    --purple-soft:#f5edff;
    --purple-border:#e4d3fa;
}

/* LINKS / MARCA */
.eyebrow,
.link{
    color:var(--purple) !important;
}

.link:hover{
    color:var(--purple-dark) !important;
}

/* BOTÕES */
.btn{
    background:linear-gradient(135deg,var(--purple),var(--purple-2)) !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(126,34,206,.18);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(126,34,206,.25);
    filter:brightness(1.03);
}

.btn:active{
    transform:translateY(0);
}

.btn.secondary{
    background:#f2e8ff !important;
    color:var(--purple) !important;
    box-shadow:none;
}

.btn.secondary:hover{
    background:#e9d7ff !important;
}

/* INPUTS */
.input:focus,
.mini:focus,
select:focus{
    border-color:var(--purple) !important;
    box-shadow:0 0 0 4px rgba(126,34,206,.10) !important;
}

/* LOGIN */
.auth-shell{
    background:
        radial-gradient(circle at 50% 10%,rgba(147,51,234,.12),transparent 32%),
        linear-gradient(180deg,#fbf8ff 0%,#f5efff 100%) !important;
}

.auth-card{
    border-color:var(--purple-border) !important;
    box-shadow:0 24px 65px rgba(88,28,135,.12) !important;
}

.logo-mark{
    background:linear-gradient(135deg,var(--purple),var(--purple-2)) !important;
    box-shadow:0 10px 25px rgba(126,34,206,.25);
}

/* ADMIN */
body{
    background:
        radial-gradient(circle at 50% 0,rgba(147,51,234,.07),transparent 34%),
        #f8f5fc;
}

.panel{
    border-color:#eadffc !important;
    box-shadow:0 14px 40px rgba(88,28,135,.07) !important;
}

.pill{
    background:#f1e7ff !important;
    color:var(--purple) !important;
}

th{
    color:#766686 !important;
}

.sub{
    color:#766c83 !important;
}

table td{
    border-bottom-color:#eee5f7 !important;
}

/* mantém status semântico */
.status.active{
    background:#e8f8ef !important;
    color:#16834f !important;
}

.status.expired{
    background:#fff0f0 !important;
    color:#cf3333 !important;
}

/* mensagem de sucesso continua verde */
.alert.success{
    background:#eafaf1 !important;
    color:#18794e !important;
    border-color:#c9efd9 !important;
}

/* erro continua vermelho */
.alert.danger{
    background:#fff0f0 !important;
    color:#c83232 !important;
    border-color:#ffd1d1 !important;
}

/* seleção */
::selection{
    background:#d8b4fe;
    color:#3b0764;
}