body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

        /* Nav active (JS toggles .active class) */
        .nav-item.active { background: #ede9fe; color: #6d28d9; font-weight: 600; }
        .nav-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#6d28d9; border-radius:0 2px 2px 0; }

        /* Section visibility (JS toggles) */
        .section { display: none; }
        .section.active { display: block; }

        /* Inner tabs active (JS toggles) */
        .inner-tab.active { background:#fff; color:#6d28d9; font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.1); }

        /* Toggle switch */
        .switch { position:relative; display:inline-block; width:36px; height:20px; }
        .switch input { opacity:0; width:0; height:0; }
        .slider { position:absolute; cursor:pointer; inset:0; background:#d1d5db; transition:.3s; border-radius:20px; }
        .slider:before { position:absolute; content:''; height:14px; width:14px; left:3px; bottom:3px; background:#fff; transition:.3s; border-radius:50%; }
        input:checked + .slider { background:#6d28d9; }
        input:checked + .slider:before { transform:translateX(16px); }

        /* Toast animation */
        .toast { transform:translateY(80px); opacity:0; transition:all .25s; }
        .toast.show { transform:translateY(0); opacity:1; }
        .toast-success { background:#111; color:#fff; }
        .toast-error { background:#b91c1c; color:#fff; }

        /* ── Classes dùng trong JS-generated HTML ─────────────── */

        /* Buttons (dùng trong renderUsers, loadModels) */
        .btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:none; transition:all .15s; }
        .btn-primary  { background:#6d28d9; color:#fff; }          .btn-primary:hover  { background:#5b21b6; }
        .btn-secondary{ background:#f4f0fe; color:#6d28d9; border:1px solid #ede9fe; } .btn-secondary:hover { background:#ede9fe; }
        .btn-danger   { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; } .btn-danger:hover   { background:#fee2e2; }
        .btn-success  { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; } .btn-success:hover  { background:#dcfce7; }
        .btn-sm { padding:5px 10px; font-size:12px; }
        .btn:disabled { opacity:.5; cursor:not-allowed; }

        /* Badges (dùng trong renderUsers) */
        .badge         { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
        .badge-pending { background:#fef3c7; color:#92400e; }
        .badge-active  { background:#d1fae5; color:#065f46; }
        .badge-inactive{ background:#f3f4f6; color:#6b7280; }
        .badge-admin   { background:#ede9fe; color:#6d28d9; }
        .badge-manager { background:#dbeafe; color:#1e40af; }

        /* Form (dùng trong loadConfigSection) */
        .form-grid     { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        .form-grid.col1{ grid-template-columns:1fr; }
        .form-group    { display:flex; flex-direction:column; gap:5px; }
        .form-label    { font-size:12px; font-weight:600; color:#374151; }
        .form-input, .form-select, .form-textarea { width:100%; padding:9px 12px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:13px; color:#111; outline:none; transition:border-color .2s; font-family:inherit; background:#faf8ff; }
        .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.08); background:#fff; }
        .form-textarea { resize:vertical; min-height:80px; }
        .form-hint     { font-size:11px; color:#9ca3af; }
        .form-actions  { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid #f3f4f6; }

        /* Permission table (dùng trong renderPermissions) */
        .perm-yes { color:#16a34a; font-size:16px; }
        .perm-no  { color:#d1d5db; font-size:16px; }
        .perm-section-row td { background:#f9f7ff !important; font-weight:700; color:#6d28d9; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }

        /* Empty state (dùng trong render functions) */
        .empty-state { text-align:center; padding:40px; color:#9ca3af; font-size:13px; }