:root {
            --red: #CE1126; --red-dark: #A50D1E; --red-light: rgba(206,17,38,.1);
            --bg: #0F0F13; --surface: #1A1A24; --surface2: #22222E; --border: rgba(255,255,255,.08);
            --text: #F1F5F9; --muted: rgba(255,255,255,.4);
            --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --blue: #3B82F6;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

        /* ── TOPBAR ─────────────────────────────────────────── */
        .topbar {
            position: sticky; top: 0; z-index: 20;
            background: var(--surface); border-bottom: 1px solid var(--border);
            display: flex; align-items: center; gap: 12px;
            padding: 12px 20px;
        }
        .topbar-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .topbar-brand .logo {
            width: 32px; height: 32px; background: linear-gradient(135deg, var(--red), #FF2040);
            border-radius: 9px; display: flex; align-items: center; justify-content: center;
        }
        .topbar-brand .logo i { color: white; font-size: 14px; }
        .topbar-brand span { font-size: 14px; font-weight: 700; }
        .topbar-brand small { display: none; }
        .nav-select {
            flex: 1; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border);
            border-radius: 8px; color: white; font-family: 'Inter', sans-serif; font-size: 13px;
            font-weight: 500; cursor: pointer; outline: none; max-width: 220px;
        }
        .nav-select option { background: var(--surface2); }
        .topbar-user {
            display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
            gap: 2px;
        }
        .topbar-user span { font-size: 11px; color: var(--muted); }
        .topbar-user a { font-size: 11px; color: var(--muted); text-decoration: none; }
        .topbar-user a:hover { color: white; }

        /* ── MAIN HEADER ────────────────────────────────────── */
        .main { flex:1; overflow-y:auto; }
        .page-header {
            padding:24px 32px; border-bottom:1px solid var(--border);
            display:flex; align-items:center; justify-content:space-between;
            background:var(--bg); z-index:10;
        }
        .page-header h1 { font-size:20px; font-weight:700; }
        .page-header p  { font-size:13px; color:var(--muted); margin-top:2px; }

        /* ── CONTENT ────────────────────────────────────────── */
        .content { padding:32px; }
        @media(max-width:600px) { .content { padding:16px; } }

        /* Stat cards */
        .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
        .stat-card {
            background:var(--surface); border:1px solid var(--border); border-radius:16px;
            padding:20px; display:flex; flex-direction:column; gap:8px;
        }
        .stat-card .icon {
            width:36px; height:36px; border-radius:10px;
            display:flex; align-items:center; justify-content:center; font-size:15px;
        }
        .stat-card .value { font-size:28px; font-weight:800; }
        .stat-card .label { font-size:12px; color:var(--muted); font-weight:500; }

        /* Section */
        .section { background:var(--surface); border:1px solid var(--border); border-radius:16px; margin-bottom:24px; overflow:hidden; }
        .section-header {
            padding:18px 24px; border-bottom:1px solid var(--border);
            display:flex; align-items:center; justify-content:space-between;
        }
        .section-header h3 { font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; }
        .section-body { padding:20px 24px; }

        /* Card list */
        .card-list { display: flex; flex-direction: column; gap: 10px; }
        .data-card {
            background: var(--surface2); border: 1px solid var(--border);
            border-radius: 14px; padding: 16px;
        }
        .data-card-top {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 8px; gap: 10px; flex-wrap: wrap;
        }
        .data-card-id { font-family: monospace; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
        .data-card-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .data-card-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.6; }
        .data-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

        /* Badges status */
        .badge-status {
            display:inline-flex; align-items:center; gap:5px;
            padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600;
        }
        .badge-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; }
        .badge-status.active   { background:rgba(16,185,129,.15); color:var(--success); }
        .badge-status.inactive { background:rgba(239,68,68,.15);  color:var(--danger); }
        .badge-status.pending  { background:rgba(245,158,11,.15); color:var(--warning); }
        .badge-status.approved { background:rgba(59,130,246,.15); color:var(--blue); }

        /* Buttons */
        .btn {
            padding:7px 14px; border-radius:8px; font-size:12px; font-weight:600;
            cursor:pointer; border:none; font-family:'Inter',sans-serif; transition:all .2s;
            display:inline-flex; align-items:center; gap:6px;
        }
        .btn-primary  { background:var(--red); color:white; }
        .btn-primary:hover  { background:var(--red-dark); }
        .btn-ghost { background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--border); }
        .btn-ghost:hover { background:rgba(255,255,255,.12); }
        .btn-danger { background:rgba(239,68,68,.15); color:var(--danger); }
        .btn-danger:hover { background:rgba(239,68,68,.25); }
        .btn-success { background:rgba(16,185,129,.15); color:var(--success); }
        .btn-success:hover { background:rgba(16,185,129,.25); }

        /* Generate code form */
        .gen-form {
            display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
        }
        .gen-form .field { display:flex; flex-direction:column; gap:6px; }
        .gen-form label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
        .gen-form input, .gen-form select {
            padding:9px 12px; background:rgba(255,255,255,.06); border:1px solid var(--border);
            border-radius:8px; color:white; font-family:'Inter',sans-serif; font-size:13px; outline:none;
            transition:border-color .2s;
        }
        .gen-form input:focus, .gen-form select:focus { border-color:var(--red); }
        .gen-form input::placeholder { color:var(--muted); }

        /* Code pill */
        .code-pill {
            display:inline-flex; align-items:center; gap:8px;
            font-family:monospace; font-size:14px; font-weight:700; letter-spacing:2px;
            background:rgba(255,255,255,.07); padding:6px 14px; border-radius:8px;
            border:1px solid var(--border);
        }
        .code-pill .copy-btn {
            cursor:pointer; color:var(--muted); font-size:11px; background:none; border:none;
            color:var(--muted); transition:color .2s; font-family:'Inter',sans-serif; padding:0;
        }
        .code-pill .copy-btn:hover { color:white; }

        /* Alert box */
        .alert-box {
            padding:14px 18px; border-radius:12px; font-size:13px; margin-bottom:16px;
            display:flex; align-items:flex-start; gap:12px; line-height:1.5;
        }
        .alert-box.info { background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.25); color:#93C5FD; }
        .alert-box.success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.25); color:#6EE7B7; }
        .alert-box.warning { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); color:#FCD34D; }
        .alert-box i { margin-top:2px; flex-shrink:0; }

        /* Modal overlay */
        .modal-overlay {
            display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
            backdrop-filter:blur(4px); z-index:1000; align-items:center; justify-content:center;
        }
        .modal-overlay.open { display:flex; }
        .modal-box {
            background:var(--surface2); border:1px solid var(--border); border-radius:20px;
            padding:28px; max-width:420px; width:calc(100% - 40px);
            box-shadow:0 20px 60px rgba(0,0,0,.5);
        }
        .modal-box h3 { font-size:16px; font-weight:700; margin-bottom:8px; }
        .modal-box p  { font-size:13px; color:var(--muted); margin-bottom:20px; line-height:1.6; }
        .modal-box .modal-actions { display:flex; gap:10px; margin-top:20px; }
        .modal-box .modal-result {
            background:rgba(255,255,255,.05); border-radius:12px; padding:16px;
            margin-bottom:16px; text-align:center;
        }
        .modal-box .modal-result .code-big {
            font-family:monospace; font-size:26px; font-weight:800; letter-spacing:4px;
            color:white; margin:8px 0;
        }
        .modal-box .modal-result p { color:var(--muted); font-size:12px; margin:0; }

        /* Login screen */
        #admin-login {
            position:fixed; inset:0; background:var(--bg);
            display:flex; align-items:center; justify-content:center; z-index:999;
        }
        .login-box {
            background:var(--surface); border:1px solid var(--border); border-radius:20px;
            padding:32px; width:360px; text-align:center;
        }
        .login-box .admin-icon {
            width:60px; height:60px; background:linear-gradient(135deg,var(--red),#FF2040);
            border-radius:16px; display:inline-flex; align-items:center; justify-content:center;
            font-size:24px; margin-bottom:16px;
        }
        .login-box h2 { font-size:20px; font-weight:800; margin-bottom:6px; }
        .login-box p  { font-size:13px; color:var(--muted); margin-bottom:24px; }
        .login-box input {
            width:100%; padding:13px 16px; background:rgba(255,255,255,.07);
            border:1px solid var(--border); border-radius:10px; color:white;
            font-family:'Inter',sans-serif; font-size:14px; outline:none; margin-bottom:12px;
            transition:border-color .2s;
        }
        .login-box input:focus { border-color:var(--red); }
        .login-box input::placeholder { color:var(--muted); }
        .login-box .btn-login {
            width:100%; padding:14px; background:linear-gradient(135deg,var(--red),#FF2040);
            border:none; border-radius:12px; color:white; font-family:'Inter',sans-serif;
            font-size:15px; font-weight:700; cursor:pointer; margin-top:4px;
            transition:opacity .2s;
        }
        .login-box .btn-login:hover { opacity:.9; }
        .login-box .error-msg { color:#FCA5A5; font-size:12px; margin-top:8px; display:none; }

        /* Responsive stats */
        @media(max-width:900px) {
            .stats-grid { grid-template-columns:1fr 1fr; }
        }
        @media(max-width:600px) {
            .stats-grid { grid-template-columns:1fr; }
        }

        /* Empty state */
        .empty-state {
            text-align:center; padding:40px 20px; color:var(--muted);
        }
        .empty-state i { font-size:32px; opacity:.3; margin-bottom:12px; display:block; }
        .empty-state p { font-size:13px; }