:root {
    --ss-primary: #6C4CF1;
    --ss-primary-dark: #4B2FD1;
    --ss-sidebar: #15122B;
    --ss-bg: #F5F6FB;
}
body { font-family: 'Inter', system-ui, sans-serif; background: var(--ss-bg); color: #1d1b2f; }
.sidebar {
    --bs-offcanvas-bg: var(--ss-sidebar); --bs-offcanvas-color: #fff; --bs-offcanvas-width: 250px;
    width: 250px; min-height: 100vh; color: #fff;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
/* Bootstrap's .offcanvas-lg forces a transparent background on desktop, which hid the white menu text */
.sidebar, .sidebar.offcanvas-lg { background-color: var(--ss-sidebar) !important; }
@media (max-width: 991.98px) { .sidebar { position: fixed; height: 100vh; } }
.sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1.25rem 1.25rem; font-weight: 700; font-size: 1.15rem; color: #fff; }
.brand-logo {
    width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #8B5CF6, #EC4899); font-size: 1.2rem;
}
.sidebar .nav { padding: 0 .75rem; flex: 1; overflow-y: auto; }
.sidebar .nav-link {
    color: #E4E1F7 !important; border-radius: 10px; padding: .6rem .85rem; margin-bottom: 2px;
    display: flex; align-items: center; gap: .75rem; font-weight: 500; font-size: .93rem;
}
.sidebar .nav-link i { color: #A99CF7; font-size: 1.05rem; }
.sidebar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.08); }
.sidebar .nav-link:hover i, .sidebar .nav-link.active i { color: #fff; }
.sidebar .nav-link.active { color: #fff !important; background: linear-gradient(135deg, var(--ss-primary), #8B5CF6); box-shadow: 0 6px 18px rgba(108,76,241,.35); }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.75rem; background: #fff; border-bottom: 1px solid #ECEBF5; position: sticky; top: 0; z-index: 10; }
.content { padding: 1.75rem; }
@media (max-width: 575.98px) { .content { padding: 1rem; } .topbar { padding: .75rem 1rem; } }
.card { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(20,18,43,.04), 0 4px 16px rgba(20,18,43,.04); }
.card-header { background: transparent; border-bottom: 1px solid #F0EFF7; font-weight: 600; padding: 1rem 1.25rem; }
.stat-card { padding: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: #6B6987; font-size: .85rem; }
.bg-soft-primary { background: #EEEAFE; color: var(--ss-primary); }
.bg-soft-success { background: #E3F8EE; color: #16A34A; }
.bg-soft-warning { background: #FEF3DC; color: #D97706; }
.bg-soft-danger  { background: #FDE6EA; color: #E11D48; }
.bg-soft-info    { background: #E0F2FE; color: #0284C7; }
.bg-soft-pink    { background: #FCE7F3; color: #DB2777; }
.btn-primary { --bs-btn-bg: var(--ss-primary); --bs-btn-border-color: var(--ss-primary); --bs-btn-hover-bg: var(--ss-primary-dark); --bs-btn-hover-border-color: var(--ss-primary-dark); }
.table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6B6987; font-weight: 600; background: #FAFAFD; }
.avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: linear-gradient(135deg, #8B5CF6, #EC4899); color: #fff; font-weight: 600; flex-shrink: 0;
}
.post-text { white-space: pre-wrap; word-break: break-word; max-width: 560px; }
.yt-frame { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.score-ring { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 20% 20%, #2A1F66, #15122B 60%); }
.login-card { width: 100%; max-width: 410px; }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; }
.thumb { width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }