/* ========================================================================== */
/*  BANNERS | HEROES                                                          */
/* ========================================================================== */

body[data-theme-mode="dark"] .admin-banner { background: radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 24%, transparent 76%) 0%, transparent 40%), linear-gradient(135deg, #050505 0%, #0a0a0a 100%); border-color: var(--gsw-dark-border); box-shadow: none; }
body[data-theme-mode="dark"] .admin-banner-title { color: #f8fafc; }
body[data-theme-mode="dark"] .admin-banner-text { color: #93a6c0; }
body[data-theme-mode="dark"] .admin-banner-stat { background: var(--gsw-dark-bg); border-color: var(--gsw-dark-border); box-shadow: none; }
body[data-theme-mode="dark"] .admin-banner-stat-label { color: var(--gsw-dark-text); }
body[data-theme-mode="dark"] .admin-banner-stat-value { color: #ffffff; }
body[data-theme-mode="dark"] .admin-banner-decor::before,
body[data-theme-mode="dark"] .admin-banner-decor::after { opacity: .72; }
body[data-theme-mode="dark"] .admin-banner-decor::before { background: radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--primary) 28%, transparent 72%) 0 2px, transparent 3px), radial-gradient(circle at 42% 12%, color-mix(in srgb, var(--primary) 22%, transparent 78%) 0 1.5px, transparent 2.5px), radial-gradient(circle at 70% 32%, color-mix(in srgb, var(--primary) 26%, transparent 74%) 0 2px, transparent 3px), radial-gradient(circle at 84% 68%, color-mix(in srgb, var(--primary) 20%, transparent 80%) 0 1.5px, transparent 2.5px), radial-gradient(circle at 28% 78%, color-mix(in srgb, var(--primary) 24%, transparent 76%) 0 2px, transparent 3px); }
body[data-theme-mode="dark"] .admin-banner-decor::after { background: radial-gradient(circle at 12% 62%, rgba(203, 213, 225, .28) 0 1.5px, transparent 2.5px), radial-gradient(circle at 58% 56%, color-mix(in srgb, var(--primary) 22%, transparent 78%) 0 2px, transparent 3px), radial-gradient(circle at 76% 18%, rgba(203, 213, 225, .24) 0 1.5px, transparent 2.5px), radial-gradient(circle at 92% 44%, color-mix(in srgb, var(--primary) 24%, transparent 76%) 0 1.5px, transparent 2.5px); }
body[data-theme-mode="dark"] .admin-banner-decor-icon { background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(241, 245, 249, .92) 100%); border-color: rgba(148, 163, 184, .34); box-shadow: 0 12px 22px rgba(2, 6, 23, .42); color: color-mix(in srgb, var(--primary) 58%, #64748b 42%); }

body[data-theme-mode="dark"] #adminSectionBanner.admin-banner { background: radial-gradient(70% 110% at 94% 8%, color-mix(in srgb, var(--primary) 30%, transparent 70%) 0%, transparent 72%), linear-gradient(270deg, #111827 0%, #0b1220 56%, #05070d 100%) !important; border-color: var(--gsw-dark-border) !important; box-shadow: 0 22px 34px -24px rgba(2, 6, 23, .62) !important; }
body[data-theme-mode="dark"] #adminSectionBanner.admin-banner::after { background: linear-gradient(110deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 52%) !important; opacity: .34 !important; }
body[data-theme-mode="dark"] #adminSectionBanner .admin-banner-decor::before,
body[data-theme-mode="dark"] #adminSectionBanner .admin-banner-decor::after { opacity: 1 !important; }
body[data-theme-mode="dark"] #adminSectionBanner .admin-banner-decor::before { background: radial-gradient(66% 108% at 96% 10%, color-mix(in srgb, var(--primary) 28%, transparent 72%) 0%, transparent 72%), radial-gradient(58% 96% at 10% 92%, color-mix(in srgb, var(--primary) 16%, transparent 84%) 0%, transparent 76%) !important; }
body[data-theme-mode="dark"] #adminSectionBanner .admin-banner-decor::after { background: radial-gradient(circle at 88% 18%, rgba(148, 163, 184, .32) 0 2px, transparent 2.6px), radial-gradient(circle at 82% 56%, rgba(148, 163, 184, .28) 0 2px, transparent 2.6px), radial-gradient(circle at 72% 30%, rgba(148, 163, 184, .25) 0 1.8px, transparent 2.4px), radial-gradient(circle at 64% 72%, rgba(148, 163, 184, .22) 0 1.8px, transparent 2.4px), radial-gradient(circle at 54% 22%, rgba(148, 163, 184, .20) 0 1.8px, transparent 2.4px), radial-gradient(circle at 46% 66%, rgba(148, 163, 184, .18) 0 1.7px, transparent 2.3px), radial-gradient(circle at 36% 34%, rgba(148, 163, 184, .16) 0 1.6px, transparent 2.2px), radial-gradient(circle at 26% 78%, rgba(148, 163, 184, .14) 0 1.5px, transparent 2.1px), radial-gradient(circle at 16% 40%, rgba(148, 163, 184, .12) 0 1.4px, transparent 2px) !important; opacity: .5 !important; }
body[data-theme-mode="dark"] #adminSectionBanner .admin-banner-decor-icon { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: color-mix(in srgb, var(--primary) 38%, #f8fafc 62%) !important; filter: none !important; mix-blend-mode: normal !important; opacity: .52 !important; }
body[data-theme-mode="dark"] .modal-header-decor::before { background: radial-gradient(56% 118% at 100% 10%, color-mix(in srgb, var(--primary) 24%, transparent 76%) 0%, transparent 68%), radial-gradient(30% 86% at 86% 100%, color-mix(in srgb, var(--primary) 12%, transparent 88%) 0%, transparent 78%) !important; opacity: .86 !important; }
body[data-theme-mode="dark"] .modal-header-decor::after { background: radial-gradient(circle at 88% 18%, rgba(148,163,184,.28) 0 2px, transparent 2.6px), radial-gradient(circle at 82% 56%, rgba(148,163,184,.24) 0 2px, transparent 2.6px), radial-gradient(circle at 72% 32%, rgba(148,163,184,.2) 0 1.8px, transparent 2.4px), radial-gradient(circle at 62% 74%, rgba(148,163,184,.16) 0 1.6px, transparent 2.2px) !important; opacity: .46 !important; }
body[data-theme-mode="dark"] .modal-header-decor-icon { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: color-mix(in srgb, var(--primary) 38%, #f8fafc 62%) !important; filter: none !important; mix-blend-mode: normal !important; }

body[data-theme-mode="dark"] #app .welcome-surface { background: linear-gradient(134deg, #163f9b 0%, color-mix(in srgb, var(--primary) 74%, #000000 26%) 45%, #0d4fa7 100%) !important; box-shadow: 0 24px 40px -28px rgba(2, 6, 23, .78) !important; }
body[data-theme-mode="dark"] #app .welcome-surface::before { background: linear-gradient(110deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 48%) !important; }
body[data-theme-mode="dark"] #app .welcome-surface::after { background: rgba(255, 255, 255, .18) !important; opacity: 1 !important; }
body[data-theme-mode="dark"] #app :is(.welcome-copy, .welcome-title, .welcome-text, .welcome-orb) { background: transparent !important; border-color: transparent !important; }
body[data-theme-mode="dark"] #app .welcome-title { color: #ffffff !important; }
body[data-theme-mode="dark"] #app .welcome-text { color: var(--gsw-dark-text) !important; opacity: 1 !important; }
body[data-theme-mode="dark"] #app .welcome-orb { background: rgba(255, 255, 255, .15) !important; }

body[data-theme-mode="dark"] .app-update-banner { background: var(--gsw-dark-surface) !important; border-color: var(--gsw-dark-border) !important; }
body[data-theme-mode="dark"] .app-update-banner .upd-title { color: #f8fafc; }
body[data-theme-mode="dark"] .app-update-banner .upd-desc { color: #e5e7eb; }

/* ========================================================================== */
/*  TABLES | DATA STATES                                                      */
/* ========================================================================== */

body[data-theme-mode="dark"] .content #app table,
body[data-theme-mode="dark"] .content #app table :is(th, td, tr, thead, tbody, tfoot) { background: var(--gsw-dark-surface) !important; background-image: none !important; }

body[data-theme-mode="dark"] .content #app table { border-color: var(--gsw-dark-border) !important; }
body[data-theme-mode="dark"] .content #app table thead th { background: var(--gsw-dark-surface) !important; color: #ffffff !important; border-bottom-color: var(--gsw-dark-border) !important; }
body[data-theme-mode="dark"] .content #app table td { border-bottom-color: var(--gsw-dark-border) !important; color: var(--gsw-dark-text) !important; }
body[data-theme-mode="dark"] .content #app table tbody tr:hover { background: var(--gsw-dark-surface-soft) !important; }
body[data-theme-mode="dark"] #app .l-label { color: #e5e7eb !important; }
body[data-theme-mode="dark"] #app .l-time { color: var(--gsw-dark-muted) !important; }
body[data-theme-mode="dark"] #app :is(.player-wrapper, .video-stage, .playlist-sidebar, .pl-header, .lesson-list, .l-item, .l-item.active, .l-item.locked, .l-item:hover) { background: var(--gsw-dark-surface) !important; background-image: none !important; border-color: var(--gsw-dark-border) !important; color: var(--gsw-dark-text) !important; }