:root {
    --primary: #0e6dce;
    --primary-container: #2b8ef0;
    --primary-rgb: 14, 109, 206;
    --on-primary: #ffffff;
    --on-primary-fixed: #ffffff;
    --background: #f4f7fb;
    --surface: #ffffff;
    --on-surface: #0f172a;
    --on-surface-variant: #64748b;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f8fbff;
    --surface-container: #eef4fb;
    --surface-container-high: #e4edf8;
    --surface-container-highest: #d4e1f0;
    --outline-variant: #d6e1ee;
    --surface-container-rgb: 238, 244, 251;
    --accent-amber: #f59e0b;
    --accent-green: #10b981;
    --accent-red: #f43f5e;
    --accent-indigo: #2563eb;
    --tertiary-rgb: 244, 63, 94;
    --arctic-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --arctic-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.08);
    --arctic-shadow-lg: 0 28px 72px rgba(15, 23, 42, 0.12);
    --shell-glow: radial-gradient(circle at top right, rgba(43, 142, 240, 0.12), transparent 26%);
}

.dark {
    --primary: #6ebcff;
    --primary-container: #2b8ef0;
    --primary-rgb: 110, 188, 255;
    --on-primary: #ffffff;
    --on-primary-fixed: #ffffff;
    --background: #0c1219;
    --surface: #111925;
    --on-surface: #edf2f7;
    --on-surface-variant: #99a8bb;
    --surface-container-lowest: #0f1722;
    --surface-container-low: #141f2b;
    --surface-container: #1b2837;
    --surface-container-high: #243446;
    --surface-container-highest: #31455c;
    --outline-variant: #2d4155;
    --surface-container-rgb: 27, 40, 55;
    --tertiary-rgb: 244, 63, 94;
    --arctic-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --arctic-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.34);
    --arctic-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.48);
    --shell-glow: radial-gradient(circle at top right, rgba(110, 188, 255, 0.12), transparent 28%);
}

html {
    background: var(--background);
}

body {
    background:
        var(--shell-glow),
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.05), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(244, 247, 251, 0.98) 280px),
        var(--background) !important;
    color: var(--on-surface);
    letter-spacing: 0;
}

.dark body {
    background:
        var(--shell-glow),
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.05), transparent 24%),
        linear-gradient(180deg, rgba(17, 25, 37, 0.9), rgba(12, 18, 25, 0.98) 280px),
        var(--background) !important;
}

#main-content {
    background: transparent !important;
}

.app-main-shell {
    width: 100%;
    max-width: 1520px;
    margin-inline: auto;
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
}

#sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98)) !important;
    border-right: 1px solid var(--outline-variant) !important;
    box-shadow: none !important;
}

.dark #sidebar {
    background: linear-gradient(180deg, rgba(15, 23, 34, 0.98), rgba(20, 31, 43, 0.98)) !important;
    box-shadow: none !important;
}

#sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(14, 109, 206, 0.12), transparent);
    pointer-events: none;
}

#sidebar .section-label {
    color: #94a3b8;
    font-size: 9px;
    letter-spacing: 0.08em;
}

.sidebar-link {
    height: 2.45rem !important;
    border-radius: 0.75rem !important;
    color: #667085;
    margin-bottom: 0.12rem;
    box-shadow: none !important;
    font-weight: 650;
}

.sidebar-link:hover {
    background: rgba(43, 142, 240, 0.08) !important;
    color: var(--primary) !important;
}

.sidebar-link.active {
    background: linear-gradient(180deg, rgba(14, 109, 206, 0.12), rgba(43, 142, 240, 0.08)) !important;
    color: var(--primary) !important;
    box-shadow: inset 3px 0 0 var(--primary) !important;
}

.dark .sidebar-link:hover {
    background: rgba(102, 184, 255, 0.1) !important;
}

.dark .sidebar-link.active {
    background: rgba(102, 184, 255, 0.14) !important;
}

.premium-card,
.card,
.widget-card,
.glass-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.94)) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 12px !important;
    box-shadow: var(--arctic-shadow-md) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
}

/* Apply clipping only to cards that genuinely need it (e.g. sparkline backgrounds).
   Dropdowns and popovers inside cards require the parent to NOT have overflow:hidden. */
.card-clip {
    overflow: hidden;
}

.dark .premium-card,
.dark .card,
.dark .widget-card,
.dark .glass-card {
    background: linear-gradient(180deg, rgba(20, 31, 43, 0.96), rgba(17, 25, 37, 0.92)) !important;
    border-color: var(--outline-variant) !important;
}

.premium-card::before,
.card::before,
.widget-card::before,
.glass-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    pointer-events: none;
}

.premium-card:hover,
.card:hover,
.widget-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--arctic-shadow-lg) !important;
    border-color: #c7d6e8 !important;
}

.rounded-3xl.premium-card,
.rounded-3xl.card,
.rounded-3xl.widget-card,
.rounded-3xl.glass-card {
    border-radius: 12px !important;
}

.rounded-2xl {
    border-radius: 12px !important;
}

.section-label {
    color: #71839b !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
}

h1,
.font-headline {
    letter-spacing: 0 !important;
}

header h1 {
    color: var(--on-surface) !important;
    font-weight: 800 !important;
    text-wrap: balance;
}

.btn-primary {
    background: linear-gradient(180deg, #2b8ef0 0%, #0e6dce 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 24px rgba(14, 109, 206, 0.22) !important;
}

.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 30px rgba(14, 109, 206, 0.28) !important;
}

button,
a {
    transition-duration: 160ms !important;
}

input,
select,
textarea,
.j-field,
.j-search-input,
.dj-textarea {
    background: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 0 rgba(16, 24, 40, 0.02);
}

input:focus,
select:focus,
textarea:focus,
.j-field:focus,
.j-search-input:focus,
.dj-textarea:focus {
    border-color: rgba(11, 110, 203, 0.48) !important;
    box-shadow: 0 0 0 4px rgba(11, 110, 203, 0.08) !important;
}

table th {
    color: #71839b !important;
    background: var(--surface-container-low) !important;
}

table td,
.pivot-table td {
    border-color: #e7edf4 !important;
}

.dark table td,
.dark .pivot-table td {
    border-color: var(--outline-variant) !important;
}

.j-stat-chip,
.pivot-group-btn,
.view-tab,
.lab-tab,
.cmp-btn,
.dj-mood-chip,
.tag-chip,
.wif-chip {
    border-radius: 10px !important;
    border-color: var(--outline-variant) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 254, 0.96)) !important;
    box-shadow: var(--arctic-shadow-sm);
}

.j-stat-chip-active,
.pivot-group-btn.active,
.view-tab.active,
.lab-tab.active,
.cmp-btn.active,
.dj-mood-chip.active,
.tf-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 18px rgba(11, 110, 203, 0.18) !important;
}

.glow-card-green,
.glow-card-red,
.glow-card-blue,
.premium-card.glow-green,
.premium-card.glow-red,
.premium-card.glow-blue,
.premium-card.glow-yellow {
    border-top-width: 1px !important;
}

#dropZone,
#screenshotUpload,
.upload-zone {
    background: linear-gradient(180deg, #ffffff, #f7faff) !important;
    border-color: #c8d4e2 !important;
}

.dark #dropZone,
.dark #screenshotUpload,
.dark .upload-zone {
    background: linear-gradient(180deg, #121a24, #10161f) !important;
}

#notificationDropdown,
#viewMenu,
#restoreDropdown {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid var(--outline-variant) !important;
    box-shadow: var(--arctic-shadow-lg) !important;
}

.dark #notificationDropdown,
.dark #viewMenu,
.dark #restoreDropdown {
    background: rgba(17, 25, 37, 0.96) !important;
}

.auth-card,
.pricing-card,
.feature-card,
.testimonial-card,
.plan-card,
.highlight-box,
.modal-box,
.stat-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.94)) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 12px !important;
    box-shadow: var(--arctic-shadow-md) !important;
}

.dark .auth-card,
.dark .pricing-card,
.dark .feature-card,
.dark .testimonial-card,
.dark .plan-card,
.dark .highlight-box,
.dark .modal-box,
.dark .stat-card {
    background: rgba(17, 24, 33, 0.92) !important;
}

.auth-card {
    max-width: 420px;
}

.input-field,
.select-styled {
    background: var(--surface-container-lowest) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 10px !important;
}

.input-label {
    color: #71839b !important;
    letter-spacing: 0.08em !important;
}

header[style*="background"],
nav[style*="background"] {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: var(--outline-variant) !important;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03), 0 14px 28px rgba(15, 23, 42, 0.04);
}

.dark header[style*="background"],
.dark nav[style*="background"] {
    background: rgba(16, 22, 31, 0.92) !important;
}

.nav-link {
    color: var(--on-surface-variant) !important;
}

.nav-link:hover {
    color: var(--primary) !important;
}

#admin-sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)) !important;
    border-right: 1px solid var(--outline-variant) !important;
    box-shadow: none !important;
}

.dark #admin-sidebar {
    background: linear-gradient(180deg, rgba(15, 23, 34, 0.98), rgba(20, 31, 43, 0.98)) !important;
}

.admin-nav-link {
    color: #667085 !important;
    border-radius: 0.65rem !important;
}

.admin-nav-link:hover {
    background: #f1f5f9 !important;
    color: var(--primary) !important;
}

.admin-nav-link.active {
    background: linear-gradient(180deg, rgba(14, 109, 206, 0.12), rgba(43, 142, 240, 0.08)) !important;
    color: var(--primary) !important;
    box-shadow: inset 3px 0 0 var(--primary) !important;
}

.dark .admin-nav-link:hover {
    background: rgba(102, 184, 255, 0.1) !important;
}

.dark .admin-nav-link.active {
    background: rgba(102, 184, 255, 0.14) !important;
}

.admin-section-label {
    color: #94a3b8 !important;
    letter-spacing: 0.08em !important;
}

.top-bar {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid var(--outline-variant) !important;
}

.dark .top-bar {
    background: rgba(16, 22, 31, 0.92) !important;
}

.btn-admin {
    border-radius: 10px !important;
}

.btn-primary-admin {
    background: linear-gradient(180deg, #2b8ef0 0%, #0e6dce 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(14, 109, 206, 0.22) !important;
}

.admin-table th {
    background: var(--surface-container-low) !important;
    color: #71839b !important;
}

.status-dot {
    outline: 3px solid rgba(255, 255, 255, 0.9);
}

.dark .status-dot {
    outline-color: rgba(16, 22, 31, 0.9);
}