:root {
    --primary: #0c0c1d;
    --secondary: #1a1a3e;
    --accent: #6c63ff;
    --accent-hover: #5a52e0;
    --accent-light: rgba(108, 99, 255, 0.1);
    --sidebar-width: 250px;
    --header-height: 60px;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: var(--primary); color: #fff; overflow-x: hidden; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--primary); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.text-accent { color: var(--accent) !important; }
.bg-accent { background: var(--accent) !important; }
.btn-accent { background: var(--accent); color: #fff; border: none; padding: 10px 25px; border-radius: 50px; font-weight: 600; transition: all 0.3s; }
.btn-accent:hover { background: var(--accent-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 5px 20px rgba(108,99,255,0.3); }
.btn-outline-accent { background: transparent; color: var(--accent); border: 2px solid var(--accent); border-radius: 50px; font-weight: 600; }
.btn-outline-accent:hover { background: var(--accent); color: #fff; }
.glass-card { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 15px; box-shadow: var(--glass-shadow); transition: all 0.4s; }
.glass-card:hover { border-color: rgba(108,99,255,0.3); }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #0c0c1d, #1a1a3e); }
.login-container { width: 100%; max-width: 420px; padding: 20px; }
.login-page .form-control { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; }
.login-page .form-control:focus { box-shadow: 0 0 0 3px rgba(108,99,255,0.3); border-color: var(--accent) !important; }
.login-page .form-floating > label { color: rgba(255,255,255,0.5) !important; }

.admin-wrapper { display: flex; min-height: 100vh; }
.admin-sidebar { width: var(--sidebar-width); background: rgba(12,12,29,0.98); backdrop-filter: blur(20px); border-right: 1px solid rgba(255,255,255,0.05); position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; transition: all 0.3s; overflow-y: auto; }
.sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sidebar-brand { font-size: 1.3rem; font-weight: 800; color: var(--accent); text-decoration: none; }
.sidebar-brand i { margin-right: 10px; }
.sidebar-nav { list-style: none; padding: 15px 0; }
.sidebar-nav li a { display: flex; align-items: center; padding: 12px 25px; color: rgba(255,255,255,0.7); text-decoration: none; transition: all 0.3s; font-size: 0.95rem; }
.sidebar-nav li a i { width: 25px; margin-right: 10px; font-size: 1.1rem; }
.sidebar-nav li a:hover, .sidebar-nav li a.active { background: var(--accent-light); color: var(--accent); border-right: 3px solid var(--accent); }
.admin-main { margin-left: var(--sidebar-width); flex: 1; min-height: 100vh; display: flex; flex-direction: column; }
.admin-topbar { background: rgba(12,12,29,0.95); backdrop-filter: blur(20px); padding: 10px 25px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 999; }
.admin-content { flex: 1; padding: 25px; }
.admin-footer { border-top: 1px solid rgba(255,255,255,0.05); }

.stat-card { position: relative; overflow: hidden; }
.stat-card h6 { color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.stat-card h2 { font-weight: 800; font-size: 2rem; }
.stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; flex-shrink: 0; }

.table-dark { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,0.03); color: #fff; }
.table-dark thead th { border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.table-dark td { border-color: rgba(255,255,255,0.05); vertical-align: middle; }
.badge { font-weight: 500; padding: 5px 12px; border-radius: 50px; font-size: 0.8rem; }

.form-control, .form-select { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; border-radius: 10px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(108,99,255,0.3); border-color: var(--accent) !important; }
.form-select option { background: #1a1a3e; color: #fff; }
.form-floating > label { color: rgba(255,255,255,0.5) !important; }

.modal-content { background: #1a1a3e; border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; color: #fff; }
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.1); }
.modal-footer { border-top: 1px solid rgba(255,255,255,0.1); }
.btn-close { filter: invert(1); }

.pagination .page-link { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.pagination .page-item.active .page-link { background: var(--accent); border-color: var(--accent); }
.pagination .page-link:hover { background: var(--accent-light); color: var(--accent); }

.ql-editor { min-height: 200px; color: #fff; }
.ql-toolbar { background: rgba(255,255,255,0.05); border-radius: 10px 10px 0 0; border-color: rgba(255,255,255,0.1) !important; }
.ql-container { border-radius: 0 0 10px 10px; border-color: rgba(255,255,255,0.1) !important; }

@media (max-width: 768px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0; }
    .admin-content { padding: 15px; }
}