/* ============================================================
   FamAPI User App Theme — Canva-inspired with #a370fc purple
   ============================================================ */
[data-theme="dark"] {
    --canvas: #0a0a0a;
    --ink: #ffffff;
    --body: #e5e7eb;
    --muted: #9ca3af;
    --muted-soft: #6b7280;
    --hairline: #1f2937;
    --hairline-soft: #111827;
    --surface-soft: #111827;
    --surface-strong: #1f2937;
    --surface-dark: #0a0a0a;
    --surface-dark-elevated: #1a1a1a;
    --surface-hover: rgba(163,112,252,.1);
    --primary: #a370fc;
    --primary-active: #8b5cf6;
    --primary-disabled: #4b5563;
    --border: #1f2937;
}

[data-theme="dark"] body {
    background:
        radial-gradient(900px 400px at 85% -10%, rgba(139,92,246,.10), transparent 60%),
        radial-gradient(800px 380px at 0% -20%, rgba(47,107,255,.12), transparent 60%),
        var(--canvas);
}

/* ---------- sidebar ---------- */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(10,10,10,.98));
    border-right: 1px solid var(--hairline);
}
[data-theme="dark"] .side-logo a {
    font-weight: 800;
    font-size: 18px;
    color: var(--ink);
}
[data-theme="dark"] .side-logo .nav-logo-accent {
    color: var(--primary);
}
[data-theme="dark"] .side-section {
    color: var(--muted-soft);
    letter-spacing: 1.2px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
}
[data-theme="dark"] .side-link {
    color: var(--body);
    border-radius: 10px;
    transition: all .2s ease;
}
[data-theme="dark"] .side-link:hover { background: var(--surface-strong); color: var(--ink); transform: translateX(2px); }
[data-theme="dark"] .side-link.active {
    background: rgba(163,112,252,.15);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(163,112,252,.3);
}
[data-theme="dark"] .side-link.active svg { color: var(--primary); }
[data-theme="dark"] .side-user {
    background: var(--surface-strong);
    border: 1px solid var(--hairline);
    border-radius: 12px;
}
[data-theme="dark"] .side-user-name { color: var(--ink); }
[data-theme="dark"] .side-user-email { color: var(--muted); }
[data-theme="dark"] .side-avatar {
    background: var(--primary);
    color: #fff;
    font-weight: 800;
}
[data-theme="dark"] .side-signout { color: var(--down); }

/* ---------- topbar ---------- */
[data-theme="dark"] .app-topbar {
    background: rgba(9,14,26,.78);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
}
[data-theme="dark"] .app-topbar-title { color: var(--ink); }
[data-theme="dark"] .hamburger { color: var(--body); }
[data-theme="dark"] .theme-toggle {
    background: var(--surface-strong);
    border: 1px solid var(--hairline);
    color: #f4b000;
}
[data-theme="dark"] .user-menu-trigger { background: var(--surface-strong); border: 1px solid var(--hairline); }
[data-theme="dark"] .user-menu-avatar-text {
    background: linear-gradient(135deg,#2f6bff,#8b5cf6);
    color: #fff;
    font-weight: 800;
}
[data-theme="dark"] .user-menu-dropdown {
    background: var(--surface-dark-elevated);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-md);
}
[data-theme="dark"] .user-menu-name { color: var(--ink); }
[data-theme="dark"] .user-menu-email { color: var(--muted); }
[data-theme="dark"] .user-menu-item { color: var(--body); }
[data-theme="dark"] .user-menu-item:hover { background: var(--surface-strong); color: var(--ink); }
[data-theme="dark"] .user-menu-item-danger { color: var(--down) !important; }

/* ---------- cards & stat cards ---------- */
[data-theme="dark"] .card {
    background: linear-gradient(170deg, rgba(20,28,50,.92), rgba(10,16,30,.92));
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
[data-theme="dark"] .card-title { color: var(--ink); letter-spacing: -.2px; }
[data-theme="dark"] .card-sub { color: var(--muted); }

[data-theme="dark"] .stat-card {
    background: linear-gradient(165deg, rgba(24,34,58,.9), rgba(12,18,34,.9));
    border: 1px solid var(--hairline);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
[data-theme="dark"] .stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(240px 90px at 90% -10%, rgba(47,107,255,.14), transparent 70%);
    pointer-events: none;
}
[data-theme="dark"] .stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(110,162,255,.5);
    box-shadow: 0 14px 34px rgba(10,20,45,.6);
}
[data-theme="dark"] .stat-card.primary {
    border-color: rgba(110,162,255,.45);
    box-shadow: inset 0 0 0 1px rgba(110,162,255,.12), 0 10px 30px rgba(10,20,45,.5);
}
[data-theme="dark"] .stat-label { color: var(--muted); }
[data-theme="dark"] .stat-value { color: var(--ink); }
[data-theme="dark"] .stat-value.up { color: #10c46f; }
[data-theme="dark"] .stat-value.down { color: #ff5c6c; }
[data-theme="dark"] .stat-desc { color: var(--muted-soft); }

/* ---------- page head ---------- */
[data-theme="dark"] .page-title { color: var(--ink); letter-spacing: -.02em; }
[data-theme="dark"] .page-sub { color: var(--muted); }

/* ---------- tables ---------- */
[data-theme="dark"] .table-wrap, [data-theme="dark"] .data-table { border-color: var(--hairline); }
[data-theme="dark"] .data-table th {
    color: var(--muted-soft);
    border-bottom-color: var(--hairline);
    letter-spacing: 1px;
    font-size: 10.5px;
    text-transform: uppercase;
}
[data-theme="dark"] .data-table td { border-bottom-color: var(--hairline); color: var(--body); }
[data-theme="dark"] .data-table tr:hover td { background: rgba(47,107,255,.07); }
[data-theme="dark"] .data-table td b, [data-theme="dark"] .data-table strong { color: var(--ink); }

/* ---------- buttons ---------- */
[data-theme="dark"] .btn-primary {
    background: linear-gradient(90deg,#2f6bff,#8b5cf6);
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(80,90,255,.5);
}
[data-theme="dark"] .btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); color: #fff; }
[data-theme="dark"] .btn-secondary {
    background: var(--surface-strong);
    color: var(--ink);
    border: 1px solid var(--hairline);
}
[data-theme="dark"] .btn-outline {
    box-shadow: inset 0 0 0 1px var(--hairline);
    color: var(--body);
}
[data-theme="dark"] .btn-outline:hover { box-shadow: inset 0 0 0 1px rgba(110,162,255,.6); color: var(--ink); }

/* ---------- forms ---------- */
[data-theme="dark"] .label { color: var(--muted); font-weight: 700; letter-spacing: .4px; font-size: 12px; }
[data-theme="dark"] .input {
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    color: var(--ink);
    border-radius: 10px;
}
[data-theme="dark"] .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,107,255,.18); outline: none; }
[data-theme="dark"] .input::placeholder { color: var(--muted-soft); }
[data-theme="dark"] select.input option { background: var(--surface-dark-elevated); color: var(--ink); }
[data-theme="dark"] .key-row {
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
}
[data-theme="dark"] .key-label { color: var(--muted-soft); }
[data-theme="dark"] .key-text { color: var(--ink); }

/* ---------- badges & alerts ---------- */
[data-theme="dark"] .badge { background: var(--surface-strong); color: var(--muted); }
[data-theme="dark"] .badge-green { background: rgba(16,196,111,.12); color: #2fe08a; }
[data-theme="dark"] .badge-red { background: rgba(255,92,108,.12); color: #ff8290; }
[data-theme="dark"] .badge-gray { background: var(--surface-strong); color: var(--muted); }
[data-theme="dark"] .badge-blue { background: rgba(47,107,255,.14); color: #7ea6ff; }
[data-theme="dark"] .badge-amber { background: rgba(244,176,0,.13); color: #ffcf5c; }
[data-theme="dark"] .alert {
    background: var(--surface-strong);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    color: var(--body);
}
[data-theme="dark"] .alert-ok, [data-theme="dark"] .alert.success {
    background: rgba(16,196,111,.08);
    border-color: rgba(16,196,111,.35);
    color: #2fe08a;
}
[data-theme="dark"] .alert-warn {
    background: rgba(244,176,0,.08);
    border-color: rgba(244,176,0,.35);
    color: #ffcf5c;
}

/* ---------- QR & modal ---------- */
[data-theme="dark"] .qr-frame {
    background: #fff;
    border: 1.5px dashed var(--hairline);
    border-radius: 16px;
}
[data-theme="dark"] .qr-hint { color: var(--muted); }
[data-theme="dark"] .modal-overlay { background: rgba(3,6,12,.7); backdrop-filter: blur(6px); }
[data-theme="dark"] .modal {
    background: var(--surface-dark-elevated);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
}
[data-theme="dark"] .modal-title { color: var(--ink); }
[data-theme="dark"] .modal-sub { color: var(--muted); }
[data-theme="dark"] .modal-price { color: var(--ink); }
[data-theme="dark"] .modal-status { color: var(--muted); }
[data-theme="dark"] .modal-close { color: var(--muted); background: var(--surface-strong); border-radius: 50%; }

/* ---------- pricing & misc ---------- */
[data-theme="dark"] .pricing-card {
    background: linear-gradient(170deg, rgba(20,28,50,.92), rgba(10,16,30,.92));
    border: 1px solid var(--hairline);
    border-radius: 16px;
}
[data-theme="dark"] .pricing-card.featured {
    border-color: rgba(110,162,255,.5);
    box-shadow: 0 0 0 1px rgba(110,162,255,.15), 0 16px 40px rgba(10,20,45,.6);
}
[data-theme="dark"] .price-label { color: var(--muted); }
[data-theme="dark"] .price { color: var(--ink); }
[data-theme="dark"] .price-strike { color: var(--muted-soft); }
[data-theme="dark"] .divider { border-color: var(--hairline); }
[data-theme="dark"] .timer { color: var(--muted); }
[data-theme="dark"] .timer.expired { color: var(--down); }

@media (max-width: 760px) {
    [data-theme="dark"] .app-content { padding: 20px 16px 80px; }
}