/* ═══════════════════════════════════════════════════════════════
   PurpleGateway — Premium Financial Platform Design System
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ────────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --bg:           #08080F;
    --bg-card:      #111118;
    --bg-surface:   #16161F;
    --bg-elevated:  #1C1C28;
    --bg-hover:     rgba(255,255,255,0.04);
    --bg-glass:     rgba(17,17,24,0.7);

    /* Brand */
    --purple:       #7C3AED;
    --purple-2:     #9333EA;
    --purple-dark:  #3B0764;
    --purple-mid:   #5B21B6;
    --purple-light: #A78BFA;
    --purple-dim:   rgba(124,58,237,0.12);
    --purple-glow:  rgba(124,58,237,0.35);
    --gold:         #C8A45D;
    --gold-light:   #D4B87A;
    --gold-dim:     rgba(200,164,93,0.12);

    /* Semantic */
    --green:        #10B981;
    --green-dim:    rgba(16,185,129,0.1);
    --red:          #EF4444;
    --red-dim:      rgba(239,68,68,0.1);
    --amber:        #F59E0B;
    --amber-dim:    rgba(245,158,11,0.1);
    --blue:         #3B82F6;
    --blue-dim:     rgba(59,130,246,0.1);

    /* Borders */
    --border:       rgba(255,255,255,0.07);
    --border-soft:  rgba(255,255,255,0.04);
    --border-focus: rgba(124,58,237,0.55);
    --border-purple:rgba(124,58,237,0.2);

    /* Text */
    --text-primary:   #F4F0FF;
    --text-secondary: #9490B0;
    --text-muted:     #5A5478;
    --text-disabled:  #3A364E;

    /* Layout */
    --sidebar-w:    248px;
    --topbar-h:     60px;
    --radius:       10px;
    --radius-sm:    7px;
    --radius-lg:    14px;
    --radius-xl:    20px;
    --radius-2xl:   28px;

    /* Shadows */
    --shadow-sm:    0 1px 3px rgba(0,0,0,.5);
    --shadow:       0 4px 20px rgba(0,0,0,.6);
    --shadow-lg:    0 16px 48px rgba(0,0,0,.7);
    --shadow-purple:0 8px 32px rgba(124,58,237,.35);
    --shadow-glow:  0 0 60px rgba(124,58,237,.15);
}

/* ─── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ─── Typography ──────────────────────────────────────────────── */
.text-xs    { font-size: .75rem; }
.text-sm    { font-size: .8125rem; }
.text-base  { font-size: .9375rem; }
.text-lg    { font-size: 1.125rem; }
.text-xl    { font-size: 1.25rem; }
.text-2xl   { font-size: 1.5rem; }
.text-3xl   { font-size: 1.875rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 900; }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-green     { color: var(--green); }
.text-red       { color: var(--red); }
.text-amber     { color: var(--amber); }
.text-gold      { color: var(--gold); }
.text-purple    { color: var(--purple-light); }
.mono      { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.truncate  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uppercase { text-transform: uppercase; }
.label-caps { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.gradient-text {
    background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #9333EA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Layout ──────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-1 { gap:.25rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:.75rem; }
.gap-4 { gap:1rem; }   .gap-5 { gap:1.25rem; }.gap-6 { gap:1.5rem; }
.flex-1 { flex:1; } .flex-shrink-0 { flex-shrink:0; } .flex-wrap { flex-wrap:wrap; }
.w-full { width:100%; } .h-full { height:100%; }
.relative { position:relative; } .absolute { position:absolute; }
.overflow-hidden { overflow:hidden; } .overflow-x-auto { overflow-x:auto; }
.grid { display:grid; }
.col-2 { grid-template-columns:repeat(2,1fr); }
.col-3 { grid-template-columns:repeat(3,1fr); }
.col-4 { grid-template-columns:repeat(4,1fr); }
.col-5 { grid-template-columns:repeat(5,1fr); }

/* ─── Spacing ─────────────────────────────────────────────────── */
.p-2{padding:.5rem;} .p-3{padding:.75rem;} .p-4{padding:1rem;}
.p-5{padding:1.25rem;} .p-6{padding:1.5rem;}
.px-3{padding-left:.75rem;padding-right:.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-3{padding-top:.75rem;padding-bottom:.75rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;} .mt-5{margin-top:1.25rem;} .mt-6{margin-top:1.5rem;}
.mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;}
.mb-4{margin-bottom:1rem;} .mb-5{margin-bottom:1.25rem;} .mb-6{margin-bottom:1.5rem;}

/* ─── Cards ───────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s;
}
.card-glass {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
}
.card-surface {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.card-elevated {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.card-glow {
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 30px rgba(124,58,237,.1);
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: space-between;
}
.card-body { padding: 20px; }

/* ─── Stat Cards ──────────────────────────────────────────────── */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.stat-card:hover { border-color: var(--border-purple); transform: translateY(-1px); }
.stat-card::after {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at top right, rgba(124,58,237,.04), transparent 60%);
    pointer-events:none;
}
.stat-card-gold { border-color: rgba(200,164,93,.2); }
.stat-card-gold::after { background: radial-gradient(circle at top right, rgba(200,164,93,.06), transparent 60%); }
.stat-card-green { border-color: rgba(16,185,129,.15); }
.stat-card-green::after { background: radial-gradient(circle at top right, rgba(16,185,129,.05), transparent 60%); }
.stat-label {
    font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.stat-value {
    font-size: 1.65rem; font-weight: 800; color: var(--text-primary);
    letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-value.gold  { color: var(--gold); }
.stat-value.green { color: var(--green); }
.stat-value.purple { color: var(--purple-light); }
.stat-change {
    font-size: .75rem; font-weight: 600; margin-top: 6px;
    display: flex; align-items: center; gap: 4px;
}
.stat-change.up   { color: var(--green); }
.stat-change.down { color: var(--red); }
.stat-change.flat { color: var(--text-muted); }
.stat-icon {
    width:36px; height:36px; border-radius:9px; display:flex;
    align-items:center; justify-content:center; margin-bottom:14px;
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    position: fixed; top:0; left:0;
    width: var(--sidebar-w); height: 100vh;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    z-index: 50; overflow-y: auto; overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 2px; }

.sidebar-logo {
    padding: 20px 18px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.sidebar-logo-mark {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.sidebar-logo-text  { line-height: 1.2; }
.sidebar-logo-title { font-size: .9375rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
.sidebar-logo-sub   { font-size: .6875rem; color: var(--text-muted); font-weight: 500; }

.sidebar-nav { padding: 12px 0; flex: 1; }
.nav-section { padding: 16px 18px 6px; }
.nav-section-label { font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-disabled); }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8.5px 18px; color: var(--text-secondary);
    font-size: .84rem; font-weight: 500;
    cursor: pointer; transition: all .15s;
    position: relative; text-decoration: none;
}
.nav-item:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-item.active { color: var(--text-primary); background: var(--purple-dim); font-weight: 600; }
.nav-item.active::before {
    content:''; position:absolute; left:0; top:5px; bottom:5px;
    width:3px; background:linear-gradient(180deg,var(--purple),var(--purple-2));
    border-radius:0 3px 3px 0;
}
.nav-item svg { flex-shrink:0; color:inherit; opacity:.65; }
.nav-item.active svg { opacity:1; }
.nav-badge {
    margin-left:auto; padding:2px 7px; border-radius:99px;
    font-size:.62rem; font-weight:700; background:var(--purple);
    color:#fff; letter-spacing:.02em;
}

.sidebar-footer { padding: 12px 14px; border-top: 1px solid var(--border-soft); }
.sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px; border-radius: var(--radius-sm);
    cursor: pointer; transition: background .15s;
}
.sidebar-user:hover { background: var(--bg-hover); }

/* ─── Topbar ──────────────────────────────────────────────────── */
.topbar {
    position: fixed; top:0; left:var(--sidebar-w); right:0;
    height: var(--topbar-h);
    background: rgba(17,17,24,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 24px; gap: 12px; z-index: 40;
}

/* ─── Main Content ────────────────────────────────────────────── */
.page-content { margin-left: var(--sidebar-w); padding-top: var(--topbar-h); min-height: 100vh; }
.page-inner { padding: 24px 28px; }
.page-title { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; }
.page-subtitle { font-size: .84rem; color: var(--text-secondary); margin-top: 2px; }

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding: 9px 18px; border-radius: var(--radius-sm);
    font-size: .84rem; font-weight: 600; cursor: pointer;
    transition: all .18s; border: none; text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity:.45; cursor:not-allowed; }

.btn-primary {
    background: linear-gradient(135deg, var(--purple), var(--purple-2));
    color: #fff;
    box-shadow: 0 4px 15px rgba(124,58,237,.35);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    box-shadow: 0 6px 20px rgba(124,58,237,.5);
    transform: translateY(-1px);
}
.btn-secondary {
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,.07); border-color: var(--border-purple); }
.btn-gold {
    background: linear-gradient(135deg, var(--gold), #a07828);
    color: #1a120a; font-weight: 700;
    box-shadow: 0 4px 15px rgba(200,164,93,.3);
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.btn-danger {
    background: rgba(239,68,68,.15); color: #FCA5A5;
    border: 1px solid rgba(239,68,68,.25);
}
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.25); }
.btn-success {
    background: rgba(16,185,129,.15); color: #6EE7B7;
    border: 1px solid rgba(16,185,129,.25);
}
.btn-success:hover:not(:disabled) { background: rgba(16,185,129,.25); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.btn-outline {
    background: transparent; color: var(--purple-light);
    border: 1px solid var(--border-purple);
}
.btn-outline:hover:not(:disabled) { background: var(--purple-dim); }

.btn-sm  { padding:6px 13px; font-size:.75rem; }
.btn-lg  { padding:12px 24px; font-size:.9375rem; }
.btn-xl  { padding:14px 32px; font-size:1rem; font-weight:700; border-radius:var(--radius); }
.btn-full { width:100%; }
.btn-icon { width:34px; height:34px; padding:0; border-radius:var(--radius-sm); }

/* ─── Inputs ──────────────────────────────────────────────────── */
.input-group { margin-bottom: 16px; }
.input-label {
    display:block; font-size:.78rem; font-weight:600;
    color:var(--text-secondary); margin-bottom:6px;
}
.input {
    width:100%; padding:10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: .875rem;
    transition: border-color .15s, box-shadow .15s; outline:none;
}
.input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
    background: var(--bg-elevated);
}
.input::placeholder { color:var(--text-disabled); }
.input-err { border-color: rgba(239,68,68,.5) !important; }
.input-prefix { position:relative; }
.input-prefix .input { padding-left:38px; }
.input-prefix .prefix-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.input-hint  { font-size:.72rem; color:var(--text-muted); margin-top:4px; }
.input-error { font-size:.72rem; color:var(--red); margin-top:4px; }
select.input { cursor:pointer; }
textarea.input { resize:vertical; min-height:90px; }

/* ─── Search ──────────────────────────────────────────────────── */
.search-wrap { position:relative; flex:1; max-width:300px; }
.search-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.search-input {
    width:100%; padding:8px 12px 8px 34px;
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text-primary);
    font-size:.8125rem; outline:none; transition:border-color .15s;
}
.search-input:focus { border-color:var(--border-focus); }
.search-input::placeholder { color:var(--text-muted); }

/* ─── Tables ──────────────────────────────────────────────────── */
.table { width:100%; border-collapse:collapse; font-size:.84rem; }
.table thead th {
    padding:10px 16px; text-align:left;
    font-size:.66rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-muted);
    border-bottom:1px solid var(--border-soft); white-space:nowrap;
    background: rgba(0,0,0,.2);
}
.table tbody tr { border-bottom:1px solid var(--border-soft); transition:background .1s; }
.table tbody tr:hover { background:var(--bg-hover); }
.table tbody tr:last-child { border-bottom:none; }
.table tbody td { padding:12px 16px; color:var(--text-secondary); vertical-align:middle; }
.table tbody td .primary { color:var(--text-primary); font-weight:500; }
.table tbody td.amount-pos { color:var(--green); font-weight:700; font-variant-numeric:tabular-nums; }
.table tbody td.amount-neg { color:var(--red); font-weight:700; font-variant-numeric:tabular-nums; }
.table-empty { text-align:center; padding:56px 20px !important; color:var(--text-muted) !important; }

/* ─── Badges ──────────────────────────────────────────────────── */
.badge {
    display:inline-flex; align-items:center;
    padding:3px 9px; border-radius:99px;
    font-size:.69rem; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
.badge-success { background:var(--green-dim);  color:#6EE7B7; border:1px solid rgba(16,185,129,.2); }
.badge-warning { background:var(--amber-dim);  color:#FCD34D; border:1px solid rgba(245,158,11,.2); }
.badge-danger  { background:var(--red-dim);    color:#FCA5A5; border:1px solid rgba(239,68,68,.2); }
.badge-info    { background:var(--blue-dim);   color:#93C5FD; border:1px solid rgba(59,130,246,.2); }
.badge-neutral { background:rgba(255,255,255,.05); color:var(--text-muted); border:1px solid var(--border); }
.badge-gold    { background:var(--gold-dim);   color:var(--gold); border:1px solid rgba(200,164,93,.2); }
.badge-purple  { background:var(--purple-dim); color:var(--purple-light); border:1px solid var(--border-purple); }

/* ─── Indicators ──────────────────────────────────────────────── */
.indicator { display:inline-flex; align-items:center; gap:6px; }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot-green { background:var(--green); box-shadow:0 0 6px var(--green); }
.dot-amber { background:var(--amber); }
.dot-red   { background:var(--red); }
.dot-gray  { background:var(--text-muted); }
.dot-pulse { animation:pulse 2s infinite; }

/* ─── Progress ────────────────────────────────────────────────── */
.progress { width:100%; height:5px; background:var(--bg-elevated); border-radius:99px; overflow:hidden; }
.progress-bar { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--purple),var(--purple-2)); transition:width .5s ease; }
.progress-green .progress-bar { background:var(--green); }

/* ─── Dropdown ────────────────────────────────────────────────── */
.dropdown {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg); overflow:hidden;
}
.dropdown-item {
    display:block; padding:9px 14px; font-size:.8125rem;
    color:var(--text-secondary); cursor:pointer;
    transition:all .12s; text-decoration:none;
    border-radius:var(--radius-sm); margin:2px;
}
.dropdown-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.dropdown-item.danger { color:#FCA5A5; }
.dropdown-item.danger:hover { background:var(--red-dim); }

/* ─── Alerts ──────────────────────────────────────────────────── */
.alert {
    padding:12px 16px; border-radius:var(--radius-sm);
    font-size:.84rem; display:flex; align-items:flex-start; gap:10px;
}
.alert-error   { background:var(--red-dim);   border:1px solid rgba(239,68,68,.2);   color:#FCA5A5; }
.alert-success { background:var(--green-dim); border:1px solid rgba(16,185,129,.2);  color:#6EE7B7; }
.alert-warning { background:var(--amber-dim); border:1px solid rgba(245,158,11,.2);  color:#FCD34D; }
.alert-info    { background:var(--blue-dim);  border:1px solid rgba(59,130,246,.2);  color:#93C5FD; }

/* ─── Modal ───────────────────────────────────────────────────── */
.modal-backdrop {
    position:fixed; inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-xl); width:100%; max-width:520px;
    box-shadow:var(--shadow-lg); overflow:hidden;
}
.modal-header { padding:20px 24px 16px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; }
.modal-body   { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border-soft); display:flex; gap:10px; justify-content:flex-end; }

/* ─── Auth Pages ──────────────────────────────────────────────── */
.auth-bg {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(124,58,237,.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(147,51,234,.08) 0%, transparent 45%);
    padding: 20px;
}
.auth-card {
    width:100%; max-width:420px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:40px 36px;
    box-shadow:var(--shadow-lg);
}
.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.auth-logo-mark {
    width:42px; height:42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.auth-title    { font-size:1.4rem; font-weight:800; color:var(--text-primary); letter-spacing:-.02em; margin-bottom:6px; }
.auth-subtitle { font-size:.84rem; color:var(--text-secondary); line-height:1.55; margin-bottom:28px; }

/* ─── PIX Box ─────────────────────────────────────────────────── */
.pix-box {
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:24px; text-align:center;
}
.pix-amount {
    font-size:2rem; font-weight:900; color:var(--green);
    letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-bottom:16px;
}
.pix-code-wrap {
    background:var(--bg); border:1.5px dashed rgba(124,58,237,.3);
    border-radius:var(--radius-sm); padding:13px 16px;
    font-size:.72rem; color:var(--purple-light); word-break:break-all;
    text-align:left; line-height:1.7; cursor:pointer; margin-bottom:12px;
    transition:border-color .2s;
}
.pix-code-wrap:hover { border-color:var(--purple); }

/* ─── Code Block ──────────────────────────────────────────────── */
.code-block {
    background:var(--bg); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:12px 14px;
    font-family:'JetBrains Mono','Fira Code',monospace;
    font-size:.78rem; color:#9AFBCA; overflow-x:auto; white-space:pre;
}

/* ─── Pagination ──────────────────────────────────────────────── */
.pagination { display:flex; align-items:center; gap:4px; padding:16px 20px 12px; }
.page-btn {
    min-width:32px; height:32px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:6px; font-size:.78rem; font-weight:600;
    color:var(--text-secondary); background:var(--bg-surface);
    border:1px solid var(--border); cursor:pointer;
    text-decoration:none; transition:all .12s; padding:0 10px;
}
.page-btn:hover { background:var(--bg-elevated); color:var(--text-primary); }
.page-btn.active { background:var(--purple); border-color:var(--purple); color:#fff; }
.page-btn.disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }

/* ─── Toasts ──────────────────────────────────────────────────── */
.toast-wrap {
    position:fixed; bottom:24px; right:24px; z-index:200;
    display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
    padding:12px 16px; border-radius:var(--radius); font-size:.84rem; font-weight:500;
    color:var(--text-primary); box-shadow:var(--shadow-lg);
    animation:slideIn .3s ease; pointer-events:all;
    border:1px solid var(--border); display:flex; align-items:center;
    gap:8px; min-width:260px;
}
.toast-success { background:#052e16; border-color:rgba(16,185,129,.3); color:#6EE7B7; }
.toast-error   { background:#2d1b1b; border-color:rgba(239,68,68,.3);  color:#FCA5A5; }
.toast-info    { background:#1e2d3b; border-color:rgba(59,130,246,.3); color:#93C5FD; }

/* ─── Account Card ────────────────────────────────────────────── */
.account-card {
    background:linear-gradient(135deg, #1a0534 0%, #2d0a5e 40%, #1a0a40 80%, #0d051f 100%);
    border:1px solid rgba(124,58,237,.35);
    border-radius:18px; padding:28px; position:relative; overflow:hidden;
    box-shadow:0 8px 40px rgba(124,58,237,.2);
}
.account-card::before {
    content:''; position:absolute; top:-40%; right:-20%;
    width:300px; height:300px;
    background:radial-gradient(circle,rgba(167,139,250,.12),transparent 70%);
    pointer-events:none;
}


/* ─── Skeleton Loading ────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-surface) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Animations ──────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn   { from{opacity:0;}to{opacity:1;} }
@keyframes pulse    { 0%,100%{opacity:1;}50%{opacity:.4;} }
@keyframes slideIn  { from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);} }
@keyframes spin     { to{transform:rotate(360deg);} }
@keyframes float    { 0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 20px rgba(124,58,237,.3);}50%{box-shadow:0 0 40px rgba(124,58,237,.6);} }

.animate-fade-up { animation:fadeUp .5s ease both; }
.animate-fade    { animation:fadeIn .3s ease both; }
.animate-float   { animation:float 4s ease-in-out infinite; }
.animate-glow    { animation:glow-pulse 3s ease-in-out infinite; }
.delay-1 { animation-delay:.08s; }
.delay-2 { animation-delay:.16s; }
.delay-3 { animation-delay:.24s; }
.delay-4 { animation-delay:.32s; }
.delay-5 { animation-delay:.4s; }
.spin    { animation:spin 1s linear infinite; }

/* ─── Dividers ────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border-soft); margin:16px 0; }

/* ─── Misc ────────────────────────────────────────────────────── */
.avatar {
    border-radius:var(--radius-sm); background:var(--purple-mid);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; color:#fff; flex-shrink:0;
}
.avatar-sm { width:28px; height:28px; font-size:.75rem; border-radius:6px; }
.avatar-md { width:36px; height:36px; font-size:.875rem; }
.avatar-lg { width:44px; height:44px; font-size:1rem; }
.avatar-xl { width:56px; height:56px; font-size:1.25rem; border-radius:12px; }

.tag {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; background:var(--bg-elevated);
    border:1px solid var(--border); border-radius:99px;
    font-size:.72rem; font-weight:600; color:var(--text-secondary);
}
.empty-state { text-align:center; padding:56px 20px; color:var(--text-muted); }
.empty-state-icon {
    width:52px; height:52px; background:var(--bg-elevated);
    border:1px solid var(--border); border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px;
}
.empty-state p { font-size:.84rem; margin-top:6px; }

/* ─── Glassmorphism ───────────────────────────────────────────── */
.glass {
    background: rgba(17,17,24,0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
}
.glass-purple {
    background: rgba(124,58,237,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124,58,237,0.2);
}

/* ─── Landing Page ────────────────────────────────────────────── */

/* Nav */
.land-nav {
    position: fixed; top:0; left:0; right:0; z-index:90;
    padding: 0 5%;
    height: 68px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(8,8,15,0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: all .3s;
}
.land-nav-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--text-primary);
}
.land-nav-logo-mark {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.land-nav-links { display: flex; align-items: center; gap: 32px; }
.land-nav-link {
    font-size: .875rem; font-weight: 500;
    color: var(--text-secondary); transition: color .15s;
}
.land-nav-link:hover { color: var(--text-primary); }
.land-nav-actions { display: flex; align-items: center; gap: 10px; }

/* Hero */
.land-hero {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 100px 5% 60px;
    position: relative; overflow: hidden;
    text-align: center;
}
.land-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(147,51,234,.1) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(124,58,237,.08) 0%, transparent 50%);
    pointer-events: none;
}
#particles-canvas {
    position: absolute; inset: 0; pointer-events: none; opacity: .6;
}
.land-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 8px; border-radius: 99px;
    background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.25);
    font-size: .78rem; font-weight: 600; color: var(--purple-light);
    margin-bottom: 28px; cursor: default;
}
.land-hero-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 8px var(--green);
    animation: pulse 2s infinite;
}
.land-hero-title {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 900; letter-spacing: -.04em;
    color: var(--text-primary); line-height: 1.05; margin-bottom: 22px;
}
.land-hero-subtitle {
    font-size: clamp(.95rem, 2vw, 1.15rem);
    color: var(--text-secondary); max-width: 580px;
    margin: 0 auto 40px; line-height: 1.7;
}
.land-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; }
.land-hero-trust {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; flex-wrap: wrap;
    font-size: .78rem; color: var(--text-muted); font-weight: 500;
}
.land-hero-trust-item { display: flex; align-items: center; gap: 6px; }

/* Dashboard Mockup */
.land-dash-mockup {
    margin: 0 auto;
    max-width: 960px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0,0,0,.8), 0 0 80px rgba(124,58,237,.15);
    position: relative;
    animation: float 6s ease-in-out infinite;
}
.land-dash-bar {
    background: var(--bg-surface);
    padding: 12px 16px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border-soft);
}
.land-dash-dot { width:11px; height:11px; border-radius:50%; }
.land-dash-dot-r { background:#EF4444; } .land-dash-dot-y { background:#F59E0B; } .land-dash-dot-g { background:#10B981; }
.land-dash-url { margin-left:8px; flex:1; background:var(--bg-elevated); border-radius:6px; padding:5px 12px; font-size:.72rem; color:var(--text-muted); font-family:monospace; }
.land-dash-body { padding: 20px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.land-dash-stat { background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:10px; padding:14px; }
.land-dash-stat-label { font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.land-dash-stat-value { font-size:1.15rem; font-weight:800; }
.land-dash-chart { grid-column:1/-1; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:10px; padding:14px; height:140px; position:relative; overflow:hidden; }
.land-dash-chart-bars { display:flex; align-items:flex-end; gap:8px; height:100px; padding-top:10px; }
.land-dash-bar-item { flex:1; border-radius:4px 4px 0 0; transition:height .5s ease; }

/* Stats Section */
.land-stats { padding: 80px 5%; text-align: center; }
.land-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; max-width:900px; margin:0 auto; background:var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.land-stat-item { background:var(--bg-card); padding:40px 20px; }
.land-stat-value { font-size:2.5rem; font-weight:900; letter-spacing:-.04em; margin-bottom:6px; background:linear-gradient(135deg,var(--purple-light),var(--purple-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.land-stat-label { font-size:.8rem; color:var(--text-muted); font-weight:500; }

/* Features */
.land-features { padding:80px 5%; max-width:1200px; margin:0 auto; }
.land-section-label { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--purple-light); margin-bottom:14px; }
.land-section-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; letter-spacing:-.03em; margin-bottom:16px; }
.land-section-subtitle { font-size:1rem; color:var(--text-secondary); max-width:520px; line-height:1.7; margin-bottom:56px; }
.land-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.land-feat-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:28px;
    transition:all .3s; position:relative; overflow:hidden;
}
.land-feat-card:hover { border-color:var(--border-purple); transform:translateY(-3px); box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 30px rgba(124,58,237,.08); }
.land-feat-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at top left,rgba(124,58,237,.04),transparent 60%);
    opacity:0; transition:opacity .3s; pointer-events:none;
}
.land-feat-card:hover::before { opacity:1; }
.land-feat-icon {
    width:48px; height:48px; border-radius:13px;
    background:var(--purple-dim); border:1px solid var(--border-purple);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.land-feat-title { font-size:1rem; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.land-feat-desc  { font-size:.84rem; color:var(--text-secondary); line-height:1.65; }

/* Pricing */
.land-pricing { padding:80px 5%; max-width:1100px; margin:0 auto; }
.land-plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.land-plan {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:32px;
    position:relative; transition:all .3s;
}
.land-plan:hover { transform:translateY(-4px); }
.land-plan-featured {
    background:linear-gradient(160deg,#1a0534,#2d0a5e 60%,#1a0a40);
    border:1px solid rgba(124,58,237,.5);
    box-shadow:0 0 50px rgba(124,58,237,.2);
}
.land-plan-featured-badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,var(--purple),var(--purple-2));
    color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; padding:4px 14px; border-radius:99px;
    box-shadow:0 4px 12px rgba(124,58,237,.4);
}
.land-plan-name   { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
.land-plan-price  { font-size:2.8rem; font-weight:900; letter-spacing:-.04em; color:var(--text-primary); line-height:1; }
.land-plan-price span { font-size:1rem; font-weight:500; color:var(--text-muted); }
.land-plan-rate   { font-size:.84rem; color:var(--purple-light); font-weight:600; margin:10px 0 24px; }
.land-plan-divider { height:1px; background:var(--border-soft); margin:20px 0; }
.land-plan-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.land-plan-features li { display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--text-secondary); }
.land-plan-features li svg { color:var(--green); flex-shrink:0; }

/* CTA Section */
.land-cta-section {
    margin:0 5% 80px;
    background:linear-gradient(135deg,#1a0534 0%,#2d0a5e 50%,#1a0a40 100%);
    border:1px solid rgba(124,58,237,.35);
    border-radius:var(--radius-2xl); padding:72px 60px;
    text-align:center; position:relative; overflow:hidden;
}
.land-cta-section::before {
    content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%);
    width:600px; height:600px;
    background:radial-gradient(circle,rgba(124,58,237,.15),transparent 70%);
    pointer-events:none;
}

/* Footer */
.land-footer {
    border-top:1px solid var(--border-soft);
    padding:40px 5%;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px;
}
.land-footer-copy { font-size:.78rem; color:var(--text-muted); }
.land-footer-links { display:flex; gap:20px; }
.land-footer-link { font-size:.78rem; color:var(--text-muted); transition:color .15s; }
.land-footer-link:hover { color:var(--text-primary); }

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width:1024px) {
    .land-feat-grid  { grid-template-columns:repeat(2,1fr); }
    .land-plan-grid  { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
    .land-stats-grid { grid-template-columns:repeat(2,1fr); }
    .land-dash-body  { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    .land-nav-links  { display:none; }
    .land-feat-grid  { grid-template-columns:1fr; }
    .land-stats-grid { grid-template-columns:repeat(2,1fr); }
    .land-cta-section { padding:48px 28px; }
    .page-content { margin-left:0; }
    .sidebar { transform:translateX(-100%); }
}
@media (max-width:640px) {
    .land-stats-grid { grid-template-columns:1fr 1fr; }
    .land-dash-body  { grid-template-columns:1fr 1fr; }
    .col-2,.col-3,.col-4 { grid-template-columns:1fr; }
}