:root {
    --bg: #f6f7fb;
    --card-bg: #ffffff;
    --border: #e5e7eb;
    --foreground: #1e293b;
    --muted-foreground: #64748b;
    --primary: #0f9d6a;
    --primary-dark: #0b7a53;
    --gold: #c9a227;
    --ok: #0f9d6a;
    --pending: #b8860b;
    --rejected: #dc2626;
    --dark: #111827;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--foreground); }

.gold-shimmer { color: var(--gold); }

/* ---------- Auth pages ---------- */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.auth-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; width: 100%; max-width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.auth-card h1 { margin-top: 0; font-size: 1.4rem; }
.auth-card form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.auth-card label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--muted-foreground); }
.auth-card input, .auth-card select, .auth-card textarea {
    padding: .65rem .75rem; border-radius: 8px; border: 1px solid var(--border); font-size: 1rem; font-family: inherit;
}
.auth-alt { margin-top: 1.25rem; font-size: .85rem; color: var(--muted-foreground); text-align: center; }
.optional { font-weight: 400; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; padding: .65rem 1.1rem; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-sm { padding: .45rem .8rem; font-size: .85rem; }

/* ---------- Alerts ---------- */
.alert { padding: .8rem 1rem; border-radius: 10px; font-size: .9rem; margin-bottom: 1rem; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ---------- Layout ---------- */
.dash-body { display: flex; min-height: 100vh; }
.sidebar {
    width: 260px; background: #fff; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; padding: 1.25rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.logo { display: flex; align-items: center; gap: .6rem; }
.logo-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #fff; }
.logo-text .name { font-weight: 700; line-height: 1.1; }
.logo-text .sub { font-size: .8rem; font-weight: 600; }
.sidebar-close { display: none; background: none; border: none; cursor: pointer; color: var(--muted-foreground); }
.sidebar-nav { display: flex; flex-direction: column; gap: .25rem; }
.nav-item {
    display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 10px;
    border: none; background: none; color: var(--muted-foreground); font-size: .92rem; font-weight: 500;
    cursor: pointer; text-align: left; text-decoration: none;
}
.nav-item:hover { background: #f1f5f9; color: var(--foreground); }
.nav-item.active { background: #ecfdf5; color: var(--primary-dark); font-weight: 700; }
.nav-item .icon { flex-shrink: 0; }

.sidebar-overlay { display: none; }

.dash-main { flex: 1; min-width: 0; }
.dash-header {
    display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem;
    background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5;
}
.dash-header .left { display: flex; align-items: center; gap: .9rem; }
.dash-header h1 { margin: 0; font-size: 1.25rem; }
.dash-header .welcome { margin: 0; color: var(--muted-foreground); font-size: .85rem; }
.dash-header .right { display: flex; align-items: center; gap: .6rem; }
.sidebar-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--foreground); }
.icon-btn { position: relative; background: #f1f5f9; border: none; border-radius: 10px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--foreground); cursor: pointer; text-decoration: none; }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--rejected); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

.dash-content { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

/* ---------- Grid / cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-3 [style*="span 2"] { grid-column: span 1 !important; } }

.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem; }
.card.accent { border-top: 3px solid var(--gold); }
.card.tinted { background: linear-gradient(135deg, #0f9d6a 0%, #0b7a53 100%); color: #fff; }
.card.tinted .eyebrow-label { color: rgba(255,255,255,.8); }
.card.side-accent { border-left: 3px solid var(--primary); }

.eyebrow-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); margin-bottom: .5rem; }
.big-figure { font-size: 1.9rem; font-weight: 800; }
.mini-figure { font-size: 1.4rem; font-weight: 800; margin-bottom: .6rem; }
.unit { font-size: 1rem; font-weight: 600; opacity: .7; }

.balance-actions { display: flex; gap: .6rem; margin-top: 1rem; }

.stat-triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; }
.stat-triple .label { font-size: .75rem; color: var(--muted-foreground); }
.stat-triple .value { font-weight: 700; }
.text-ok { color: var(--ok); }
.text-pending { color: var(--pending); }
.text-rejected { color: var(--rejected); }

.referral-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; }
.r-label { font-size: .8rem; color: var(--muted-foreground); }
.r-value { font-weight: 700; }

/* ---------- Virtual card ---------- */
.vcard { border-radius: 16px; padding: 1.25rem; background: linear-gradient(135deg, #111827 0%, #1f2937 100%); color: #fff; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; }
.vcard .top { display: flex; justify-content: space-between; align-items: center; }
.vcard .chip { width: 32px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #c9a227, #e8d27a); }
.vcard .number { font-size: 1.15rem; letter-spacing: .08em; font-weight: 600; margin: 1rem 0; }
.vcard .details { display: flex; justify-content: space-between; font-size: .8rem; }
.vcard .label { opacity: .65; margin-bottom: .15rem; }
.vcard .value { font-weight: 600; }

/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.data-table th, .data-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--border); font-size: .88rem; }
.data-table th { color: var(--muted-foreground); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }

.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge-ok { background: #ecfdf5; color: var(--ok); }
.badge-pending { background: #fffbeb; color: var(--pending); }
.badge-rejected { background: #fef2f2; color: var(--rejected); }

/* ---------- Forms ---------- */
.stacked-form { display: flex; flex-direction: column; gap: 1rem; max-width: 420px; }
.stacked-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--muted-foreground); }
.stacked-form input, .stacked-form select, .stacked-form textarea {
    padding: .65rem .75rem; border-radius: 8px; border: 1px solid var(--border); font-size: .95rem; font-family: inherit;
}

/* ---------- Tree ---------- */
.tree-list { list-style: none; padding-left: 1.25rem; border-left: 1px dashed var(--border); margin: .5rem 0; }
.tree-list > li { margin: .5rem 0; }
.tree-node { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; max-width: 420px; }
.tree-name { font-weight: 600; font-size: .9rem; }
.tree-meta { font-size: .78rem; color: var(--muted-foreground); }

/* ---------- Support tickets ---------- */
.ticket-block { border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.ticket-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.ticket-message { font-size: .9rem; color: var(--foreground); }
.ticket-reply { font-size: .85rem; padding: .5rem .7rem; border-radius: 8px; margin-top: .4rem; }
.ticket-reply.staff { background: #ecfdf5; }
.ticket-reply.member { background: #f1f5f9; }

.animate-rise { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Responsive sidebar (mobile) ---------- */
@media (max-width: 860px) {
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%);
        transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.15);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: block; }
    .sidebar-toggle { display: block; }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
    .sidebar-overlay.open { display: block; }
}