:root {
            --navy:          #0B1220;
            --navy-mid:      #111928;
            --navy-card:     #16202E;
            --navy-card-alt: #1A2840;
            --navy-light:    #1E3050;
            --navy-border:   rgba(255,255,255,0.06);
            --navy-border-md:rgba(255,255,255,0.10);

            --gold:       #C4933F;
            --gold-light: #E8C97A;
            --gold-pale:  #F5EDD8;
            --gold-dim:   rgba(196,147,63,0.14);
            --gold-foil:  linear-gradient(135deg, #a67828 0%, #e8c97a 40%, #c4933f 65%, #f0d485 100%);
            --gold-shine: linear-gradient(90deg, #7a5610 0%, #C4933F 25%, #F0D078 50%, #C4933F 75%, #7a5610 100%);

            --text-primary:   #EDE8DF;
            --text-secondary: rgba(237,232,223,0.65);
            --text-muted:     rgba(237,232,223,0.38);

            --success: rgba(39,174,96,1);
            --success-dim: rgba(39,174,96,0.12);
            --error:   rgba(192,57,43,1);
            --error-dim: rgba(192,57,43,0.12);
            --warn:    rgba(230,126,34,1);
            --warn-dim:rgba(230,126,34,0.12);

            --font-display: 'Cormorant Garamond', serif;
            --font-body:    'Jost', sans-serif;
            --font-brand:   'Righteous', sans-serif;
            --font-mono:    'Courier New', monospace;

            --sidebar-w: 260px;
            --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { -webkit-font-smoothing: antialiased; }

        body {
            font-family: var(--font-body);
            background: var(--navy);
            color: var(--text-primary);
            min-height: 100vh;
            display: flex;
            overflow-x: hidden;
        }

        /* Grain */
        body::after {
            content: '';
            position: fixed; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            opacity: 0.018;
            pointer-events: none;
            z-index: 9999;
        }

        /* ============================================================
           AUTH GATE
           ============================================================ */
        #authGate {
            position: fixed; inset: 0;
            background: var(--navy);
            display: flex; align-items: center; justify-content: center;
            z-index: 9000;
            flex-direction: column;
            gap: 1.5rem;
        }
        #authGate .logo {
            font-family: var(--font-brand);
            font-size: 1.4rem;
            background: var(--gold-foil);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }
        #authGate .auth-card {
            background: var(--navy-card);
            border: 1px solid var(--navy-border-md);
            border-radius: 18px;
            padding: 2.5rem 2rem;
            width: 100%;
            max-width: 360px;
            position: relative;
            overflow: hidden;
        }
        #authGate .auth-card::before {
            content:'';
            position:absolute; top:0; left:0; right:0; height:2px;
            background: var(--gold-shine);
            background-size: 200% 100%;
            animation: shimmer 4s linear infinite;
        }
        #authGate h2 {
            font-family: var(--font-display);
            font-size: 1.5rem; font-weight: 400;
            margin-bottom: 0.35rem;
        }
        #authGate p { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 1.5rem; }
        #authGate input {
            width: 100%;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--navy-border-md);
            border-radius: 8px;
            padding: 0.8rem 1rem;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.92rem;
            outline: none;
            margin-bottom: 0.85rem;
            transition: border-color .25s, box-shadow .25s;
        }
        #authGate input:focus {
            border-color: rgba(196,147,63,0.4);
            box-shadow: 0 0 0 3px rgba(196,147,63,0.08);
        }
        #authGate button {
            width: 100%;
            padding: 0.85rem;
            border-radius: 8px;
            border: 1px solid rgba(196,147,63,0.3);
            background: rgba(196,147,63,0.12);
            color: var(--gold-light);
            font-family: var(--font-body);
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background .25s, border-color .25s;
        }
        #authGate button:hover { background: rgba(196,147,63,0.22); border-color: rgba(196,147,63,0.5); }
        #authGate .auth-error {
            color: #E57373;
            font-size: 0.78rem;
            margin-top: 0.75rem;
            text-align: center;
            min-height: 1.1rem;
        }

        /* ============================================================
           SIDEBAR
           ============================================================ */
        .sidebar {
            width: var(--sidebar-w);
            min-height: 100vh;
            background: var(--navy-mid);
            border-right: 1px solid var(--navy-border);
            display: flex;
            flex-direction: column;
            position: fixed;
            left: 0; top: 0; bottom: 0;
            z-index: 100;
            transition: transform .3s var(--ease-out);
        }
        .sidebar::after {
            content: '';
            position: absolute; top: 0; right: 0; bottom: 0;
            width: 1px;
            background: linear-gradient(to bottom, transparent, rgba(196,147,63,0.15) 20%, rgba(196,147,63,0.15) 80%, transparent);
            pointer-events: none;
        }

        .sidebar-logo {
            padding: 1.5rem 1.5rem 1.25rem;
            border-bottom: 1px solid var(--navy-border);
        }
        .sidebar-logo a {
            font-family: var(--font-brand);
            font-size: 1.15rem;
            color: var(--text-primary);
            text-decoration: none;
            letter-spacing: 0.04em;
            display: block;
        }
        .sidebar-logo span {
            display: block;
            font-size: 0.62rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--gold);
            opacity: 0.8;
            margin-top: 0.15rem;
        }

        .sidebar-nav {
            flex: 1;
            padding: 1rem 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .nav-section-label {
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--text-muted);
            padding: 0.9rem 0.75rem 0.4rem;
        }
        .nav-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.7rem 0.9rem;
            border-radius: 8px;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 0.86rem;
            font-weight: 400;
            border: 1px solid transparent;
            transition: all .2s var(--ease-out);
            text-decoration: none;
        }
        .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
        .nav-item:hover {
            background: rgba(255,255,255,0.03);
            color: var(--text-primary);
            border-color: var(--navy-border);
        }
        .nav-item.active {
            background: rgba(196,147,63,0.08);
            border-color: rgba(196,147,63,0.18);
            color: var(--gold-light);
        }
        .nav-item.active svg { color: var(--gold); }

        .sidebar-footer {
            padding: 1rem 0.75rem;
            border-top: 1px solid var(--navy-border);
        }
        .admin-pill {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.65rem 0.85rem;
            background: rgba(196,147,63,0.06);
            border: 1px solid rgba(196,147,63,0.14);
            border-radius: 8px;
        }
        .admin-avatar {
            width: 30px; height: 30px;
            border-radius: 50%;
            background: rgba(196,147,63,0.2);
            border: 1px solid rgba(196,147,63,0.3);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.7rem;
            color: var(--gold-light);
            font-weight: 700;
            flex-shrink: 0;
        }
        .admin-info { flex: 1; min-width: 0; }
        .admin-info b { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
        .admin-info span { font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.05em; }
        .btn-logout {
            background: none; border: none; cursor: pointer;
            color: var(--text-muted); padding: 0.2rem;
            transition: color .2s; display: flex; align-items: center;
        }
        .btn-logout:hover { color: #E57373; }
        .btn-logout svg { width: 15px; height: 15px; }

        /* ============================================================
           MAIN CONTENT
           ============================================================ */
        .main {
            margin-left: var(--sidebar-w);
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Topbar */
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.1rem 2rem;
            border-bottom: 1px solid var(--navy-border);
            background: rgba(11,18,32,0.8);
            backdrop-filter: blur(12px);
            position: sticky;
            top: 0; z-index: 50;
            gap: 1rem;
        }
        .topbar-left { display: flex; align-items: center; gap: 1rem; }
        .page-title {
            font-family: var(--font-display);
            font-size: 1.35rem;
            font-weight: 400;
        }
        .topbar-actions { display: flex; align-items: center; gap: 0.75rem; }

        /* Botões */
        .btn {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0.6rem 1.1rem;
            border-radius: 8px;
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all .22s var(--ease-out);
            letter-spacing: 0.04em;
            border: 1px solid var(--navy-border-md);
            background: rgba(255,255,255,0.03);
            color: var(--text-secondary);
            text-decoration: none;
        }
        .btn svg { width: 14px; height: 14px; }
        .btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
        .btn.gold {
            border-color: rgba(196,147,63,0.35);
            background: rgba(196,147,63,0.12);
            color: var(--gold-light);
        }
        .btn.gold:hover { background: rgba(196,147,63,0.22); border-color: rgba(196,147,63,0.5); }
        .btn.danger {
            border-color: rgba(192,57,43,0.3);
            background: rgba(192,57,43,0.08);
            color: #E57373;
        }
        .btn.danger:hover { background: rgba(192,57,43,0.16); }
        .btn.sm { padding: 0.4rem 0.75rem; font-size: 0.75rem; }

        /* Content area */
        .content {
            padding: 2rem;
            flex: 1;
        }

        /* ============================================================
           STATS ROW
           ============================================================ */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        .stat-card {
            background: var(--navy-card);
            border: 1px solid var(--navy-border);
            border-radius: 14px;
            padding: 1.2rem 1.35rem;
            position: relative;
            overflow: hidden;
        }
        .stat-card::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: var(--gold-shine);
            background-size: 200% 100%;
            opacity: 0.3;
            animation: shimmer 5s linear infinite;
        }
        @keyframes shimmer {
            from { background-position: 200% center; }
            to   { background-position: -200% center; }
        }
        .stat-card .label {
            font-size: 0.65rem; font-weight: 600;
            letter-spacing: 0.16em; text-transform: uppercase;
            color: var(--text-muted); margin-bottom: 0.4rem;
        }
        .stat-card .value {
            font-family: var(--font-display);
            font-size: 2rem; font-weight: 600;
            background: var(--gold-foil);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
        }
        .stat-card .sub {
            font-size: 0.72rem; color: var(--text-muted);
            margin-top: 0.35rem; font-weight: 300;
        }

        /* ============================================================
           SECTION HEADER
           ============================================================ */
        .section-hd {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.15rem;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .section-hd h2 {
            font-family: var(--font-display);
            font-size: 1.25rem;
            font-weight: 400;
        }
        .section-hd .sub {
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 300;
            margin-top: 0.1rem;
        }

        /* ============================================================
           TABLE
           ============================================================ */
        .table-wrap {
            background: var(--navy-card);
            border: 1px solid var(--navy-border);
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 2.5rem;
        }
        .table-toolbar {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--navy-border);
            flex-wrap: wrap;
        }
        .search-input {
            flex: 1; min-width: 180px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--navy-border-md);
            border-radius: 8px;
            padding: 0.55rem 0.9rem;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.85rem;
            outline: none;
            transition: border-color .25s;
        }
        .search-input:focus { border-color: rgba(196,147,63,0.35); }
        .search-input::placeholder { color: var(--text-muted); }

        .filter-select {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--navy-border-md);
            border-radius: 8px;
            padding: 0.55rem 0.85rem;
            color: var(--text-secondary);
            font-family: var(--font-body);
            font-size: 0.82rem;
            outline: none;
            cursor: pointer;
        }
        .filter-select option { background: var(--navy-card); }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
        thead th {
            padding: 0.75rem 1.25rem;
            text-align: left;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-muted);
            border-bottom: 1px solid var(--navy-border);
            white-space: nowrap;
        }
        tbody tr {
            border-bottom: 1px solid var(--navy-border);
            transition: background .18s;
        }
        tbody tr:last-child { border-bottom: none; }
        tbody tr:hover { background: rgba(255,255,255,0.02); }
        tbody td {
            padding: 0.9rem 1.25rem;
            color: var(--text-secondary);
            vertical-align: middle;
        }
        tbody td.primary { color: var(--text-primary); font-weight: 500; }
        .token-cell {
            font-family: var(--font-mono);
            font-size: 0.78rem;
            color: var(--gold);
            letter-spacing: 0.05em;
        }

        /* Badges de plano */
        .badge {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.25rem 0.65rem;
            border-radius: 999px;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .badge.piloto  { background: rgba(100,120,160,0.15); border: 1px solid rgba(100,120,160,0.25); color: #8aa0c8; }
        .badge.prata   { background: rgba(160,170,185,0.15); border: 1px solid rgba(160,170,185,0.25); color: #c0c8d8; }
        .badge.ouro    { background: var(--gold-dim); border: 1px solid rgba(196,147,63,0.28); color: var(--gold-light); }
        .badge.diamante{ background: rgba(155,89,182,0.12); border: 1px solid rgba(155,89,182,0.28); color: #c39bd3; }

        /* Status ativo/inativo */
        .status-dot {
            display: inline-flex; align-items: center; gap: 0.4rem;
            font-size: 0.75rem;
        }
        .status-dot::before {
            content: '';
            display: block;
            width: 7px; height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .status-dot.ativo::before   { background: var(--success); box-shadow: 0 0 6px rgba(39,174,96,0.5); }
        .status-dot.inativo::before { background: var(--error); }

        .actions-cell { display: flex; gap: 0.4rem; align-items: center; }

        /* Empty state */
        .empty-state {
            padding: 3rem 1.5rem;
            text-align: center;
            color: var(--text-muted);
        }
        .empty-state svg { width: 40px; height: 40px; opacity: 0.3; margin-bottom: 0.75rem; }
        .empty-state p { font-size: 0.88rem; font-weight: 300; }

        /* ============================================================
           MODAL
           ============================================================ */
        .modal-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(6,10,18,0.75);
            backdrop-filter: blur(6px);
            z-index: 500;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            animation: fadeIn .25s var(--ease-out);
        }
        .modal-overlay.open { display: flex; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .modal {
            background: var(--navy-card);
            border: 1px solid var(--navy-border-md);
            border-radius: 20px;
            width: 100%;
            max-width: 520px;
            position: relative;
            overflow: hidden;
            animation: modalIn .3s var(--ease-out);
        }
        @keyframes modalIn {
            from { opacity: 0; transform: translateY(20px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .modal::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: var(--gold-shine);
            background-size: 200% 100%;
            animation: shimmer 4s linear infinite;
        }
        .modal-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 1.5rem 1.75rem 1.25rem;
            border-bottom: 1px solid var(--navy-border);
        }
        .modal-header h3 {
            font-family: var(--font-display);
            font-size: 1.35rem; font-weight: 400;
        }
        .modal-close {
            background: none; border: none; cursor: pointer;
            color: var(--text-muted); padding: 0.25rem;
            transition: color .2s; display: flex;
        }
        .modal-close:hover { color: var(--text-primary); }
        .modal-close svg { width: 20px; height: 20px; }

        .modal-body { padding: 1.5rem 1.75rem; }

        /* Form fields no modal */
        .field { margin-bottom: 1.1rem; }
        .field label {
            display: block;
            font-size: 0.68rem; font-weight: 600;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--text-muted); margin-bottom: 0.45rem;
        }
        .field input, .field select {
            width: 100%;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--navy-border-md);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.9rem;
            outline: none;
            transition: border-color .25s, box-shadow .25s;
        }
        .field select { cursor: pointer; }
        .field select option { background: var(--navy-card); }
        .field input:focus, .field select:focus {
            border-color: rgba(196,147,63,0.4);
            box-shadow: 0 0 0 3px rgba(196,147,63,0.08);
        }
        .field .hint {
            font-size: 0.72rem; color: var(--text-muted);
            margin-top: 0.35rem; font-weight: 300; line-height: 1.5;
        }
        .field .hint b { color: var(--gold); font-weight: 600; }

        .field-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.85rem;
        }

        /* Token gerado */
        .token-preview {
            background: rgba(196,147,63,0.06);
            border: 1px solid rgba(196,147,63,0.2);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-family: var(--font-mono);
            font-size: 0.88rem;
            color: var(--gold-light);
            letter-spacing: 0.05em;
            display: flex; align-items: center; justify-content: space-between;
            gap: 0.5rem;
        }
        .btn-copy {
            background: none; border: none; cursor: pointer;
            color: var(--text-muted); transition: color .2s;
            display: flex; align-items: center; padding: 0.15rem;
        }
        .btn-copy:hover { color: var(--gold-light); }
        .btn-copy svg { width: 14px; height: 14px; }

        .modal-footer {
            padding: 1.1rem 1.75rem 1.5rem;
            display: flex; gap: 0.75rem; justify-content: flex-end;
            border-top: 1px solid var(--navy-border);
        }

        /* Feedback toast */
        .toast {
            position: fixed; bottom: 2rem; right: 2rem;
            padding: 0.85rem 1.25rem;
            border-radius: 10px;
            font-size: 0.82rem;
            font-weight: 500;
            display: flex; align-items: center; gap: 0.6rem;
            z-index: 9000;
            animation: toastIn .3s var(--ease-out);
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
            max-width: 340px;
        }
        .toast svg { width: 16px; height: 16px; flex-shrink: 0; }
        .toast.success { background: #1a3828; border: 1px solid rgba(39,174,96,0.35); color: #81C784; }
        .toast.error   { background: #2c1818; border: 1px solid rgba(192,57,43,0.35); color: #E57373; }
        @keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

        /* Confirm overlay simples */
        .confirm-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(6,10,18,0.8);
            backdrop-filter: blur(6px);
            z-index: 600;
            align-items: center; justify-content: center;
        }
        .confirm-overlay.open { display: flex; }
        .confirm-box {
            background: var(--navy-card);
            border: 1px solid var(--navy-border-md);
            border-radius: 16px;
            padding: 2rem 1.75rem;
            max-width: 380px; width: 100%; margin: 1rem;
            text-align: center;
        }
        .confirm-box h4 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.65rem; }
        .confirm-box p  { color: var(--text-muted); font-size: 0.85rem; font-weight: 300; margin-bottom: 1.5rem; }
        .confirm-box .actions { display: flex; gap: 0.75rem; justify-content: center; }

        /* Mobile */
        .menu-toggle {
            display: none;
            background: none; border: none; cursor: pointer;
            color: var(--text-primary);
        }
        .menu-toggle svg { width: 22px; height: 22px; }

        @media (max-width: 900px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .main { margin-left: 0; }
            .menu-toggle { display: flex; }
            .content { padding: 1.25rem; }
            .topbar { padding: 1rem 1.25rem; }
            .stats-row { grid-template-columns: 1fr 1fr; }
            .field-row { grid-template-columns: 1fr; }
            table { display: block; overflow-x: auto; }
        }

        @media (max-width: 540px) {
            .stats-row { grid-template-columns: 1fr; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
        }