/* ─── Reset & Variáveis ────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }

:root {
    --bg      : #0f0f1a;
    --surface : #16162a;
    --border  : #2a2a45;
    --text    : #dde1f0;
    --muted   : #888;
    --primary : #e94560;
    --primary2: #c73652;
    --info    : #7ab8f5;
    --success : #4ecb71;
    --warn    : #f0a500;
    --radius  : 10px;
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    min-height: 100vh;
}

a { color: var(--primary); text-decoration: none }
a:hover { opacity: .8 }

/* ─── Layout ───────────────────────────────────────────────────────────────── */
.wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px;
}

.wrapper-sm {
    max-width: 460px;
    margin: 0 auto;
    padding: 60px 16px;
}

/* ─── Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
}
.navbar .brand { font-size:17px; font-weight:700; color:#fff }
.navbar .brand span { color: var(--primary) }
.navbar .nav-links { display:flex; gap:18px; align-items:center; font-size:13px }

/* ─── Card ─────────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin-bottom: 18px;
}
.card h2 {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 16px;
}
.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

/* ─── Formulários ──────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px }
.form-group label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px }
.form-group input,
.form-group select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    padding: 9px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--primary) }

/* ─── Botões ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 10px 22px;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
    text-decoration: none;
}
.btn:hover { opacity: .85 }
.btn-primary  { background: var(--primary);  color: #fff }
.btn-info     { background: #1e3a5f;          color: var(--info) }
.btn-success  { background: #163325;          color: var(--success) }
.btn-danger   { background: #2e1a1a;          color: var(--primary) }
.btn-muted    { background: #2a2a45;          color: var(--text) }
.btn-block    { width: 100%; text-align: center }

/* ─── Alertas ──────────────────────────────────────────────────────────────── */
.alert {
    padding: 11px 15px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
}
.alert-err  { background: #2e1a1a; border: 1px solid #e94560; color: #f5a0af }
.alert-ok   { background: #163325; border: 1px solid #4ecb71; color: #4ecb71 }
.alert-warn { background: #2e2200; border: 1px solid var(--warn); color: var(--warn) }
.alert-info { background: #102040; border: 1px solid var(--info);color: var(--info) }

/* ─── Badge plano ──────────────────────────────────────────────────────────── */
.badge-plan {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.badge-active  { background:#163325; color:var(--success) }
.badge-expired { background:#2e1a1a; color:var(--primary) }
.badge-pending { background:#2e2200; color:var(--warn) }

/* ─── Tabela ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto }
table { width:100%; border-collapse:collapse; font-size:13px }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px;
     padding:8px 10px; text-align:left; border-bottom:1px solid var(--border) }
td { padding:9px 10px; border-bottom:1px solid #1c1c30; vertical-align:middle }
tr:last-child td { border-bottom:none }
tr:hover td { background:#1a1a2e }

/* ─── Stats cards ──────────────────────────────────────────────────────────── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
             padding:16px 20px }
.stat-card .val { font-size:28px; font-weight:700; color:#fff }
.stat-card .lbl { font-size:11px; color:var(--muted); margin-top:3px }

/* ─── QR Code area ─────────────────────────────────────────────────────────── */
.qr-area { text-align:center; padding:20px 0 }
.qr-area img { border-radius:8px; border:3px solid var(--border); max-width:200px }
.copypaste {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:7px;
    padding:10px;
    word-break:break-all;
    font-size:12px;
    font-family:monospace;
    color:var(--info);
    margin-top:12px;
    cursor:pointer;
}

/* ─── Plan cards ───────────────────────────────────────────────────────────── */
.plan-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.plan-card {
    background:var(--bg);
    border:2px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    cursor:pointer;
    transition:border-color .2s;
    text-align:center;
}
.plan-card:hover, .plan-card.selected { border-color:var(--primary) }
.plan-card .price { font-size:26px; font-weight:700; color:#fff; margin:8px 0 4px }
.plan-card .period{ font-size:12px; color:var(--muted) }
.plan-card .desc  { font-size:12px; color:var(--info); margin-top:6px }

/* ─── Tabs (admin) ─────────────────────────────────────────────────────────── */
.tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--border); padding-bottom:0 }
.tab-btn {
    background:none; border:none; color:var(--muted); font-size:13px;
    padding:9px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:color .2s;
}
.tab-btn:hover { color:var(--text) }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary) }

/* ─── Misc ─────────────────────────────────────────────────────────────────── */
.text-muted  { color:var(--muted); font-size:12px }
.text-right  { text-align:right }
.mt-8  { margin-top:8px }
.mt-16 { margin-top:16px }
.flex  { display:flex; align-items:center; gap:10px }
.flex-between { display:flex; align-items:center; justify-content:space-between }
hr { border:none; border-top:1px solid var(--border); margin:18px 0 }