/* ===== NoProblem Software Theme - Dark Mode ===== */
/* Tech-focused theme with cyan and indigo accents */

/* Theme Toggle Icon Animations */
.dark-icon,
.light-icon {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme-aware utility classes for both dark and light modes */
html[data-theme="noproblemsoftware-com"],
html[data-theme="noproblemsoftware-com-light"] {
    /* Text color utilities */
    .text-theme-strong { color: rgb(var(--color-text-strong)); }
    .text-theme-muted { color: rgb(var(--color-text-muted)); }
    .text-theme-subtle { color: rgb(var(--color-text-subtle)); }

    /* Background utilities — very transparent so circuit SVG shows through.
       Section-specific rules below override with higher opacity for page sections.
       Card-level blur is applied via separate :not() selectors below. */
    .bg-theme-surface-0 { background-color: rgb(var(--color-surface-0) / 0.55); }
    .bg-theme-surface-1 { background-color: rgb(var(--color-surface-1) / 0.15); }
    .bg-theme-surface-2 { background-color: rgb(var(--color-surface-2) / 0.15); }

    /* Border utilities — semi-transparent for glass effect */
    .border-theme { border-color: rgb(var(--color-surface-border) / 0.3); }

    /* Hover states */
    .hover\:text-theme-strong:hover { color: rgb(var(--color-text-strong)); }
    .hover\:bg-theme-surface-1:hover { background-color: rgb(var(--color-surface-1) / 0.25); }
    .hover\:bg-theme-surface-2:hover { background-color: rgb(var(--color-surface-2) / 0.25); }
    .hover\:border-accent:hover { border-color: rgb(var(--color-accent)); }

    /* Card utilities */
    .border-surface-border { border-color: rgb(var(--color-surface-border)); }
    .bg-gradient-panel { 
        background-color: rgba(var(--color-accent), 0.08);
    }

    /* Component utilities - work with both themes */
    .bg-accent { background-color: rgb(var(--color-accent)); }
    .bg-accent-strong { background-color: rgb(var(--color-accent-strong)); }
    .text-accent { color: rgb(var(--color-accent)); }
    .border-accent { border-color: rgb(var(--color-accent)); }
    .hover\:bg-accent:hover { background-color: rgb(var(--color-accent)); }
    .hover\:bg-accent-strong:hover { background-color: rgb(var(--color-accent-strong)); }
    .hover\:text-accent:hover { color: rgb(var(--color-accent)); }
    .hover\:border-accent:hover { border-color: rgb(var(--color-accent)); }
    
    /* Surface colors for text on buttons */
    .text-surface-0 { color: rgb(var(--color-surface-0)); }
    .bg-surface-1 { background-color: rgb(var(--color-surface-1) / 0.15); }
    .bg-surface-2 { background-color: rgb(var(--color-surface-2) / 0.15); }
    .hover\:bg-surface-2:hover { background-color: rgb(var(--color-surface-2) / 0.25); }
    
    /* Rounded corners */
    .rounded-card { border-radius: var(--radius-card); }
    .rounded-panel { border-radius: var(--radius-panel); }
    
    /* Shadows */
    .shadow-glow { box-shadow: var(--shadow-glow); }
    .shadow-glow-strong { box-shadow: var(--shadow-glow-strong); }
    
    /* Animation durations */
    .duration-fast { transition-duration: var(--duration-fast); }
    .duration-normal { transition-duration: var(--duration-normal); }
    .duration-slow { transition-duration: var(--duration-slow); }
}

/* Theme CSS Variables */
html[data-theme="noproblemsoftware-com"] {
    /* ===========================
       COLOR SYSTEM — DARK MODE
       =========================== */

    /* Surfaces */
    --color-surface-0: 5 8 22;          /* Deep charcoal - base background */
    --color-surface-1: 11 16 32;        /* Panels, cards */
    --color-surface-2: 17 24 39;        /* Elevated surfaces */
    --color-surface-border: 31 41 55;   /* Border color */

    /* Text */
    --color-text-strong: 249 250 251;   /* Primary text - white */
    --color-text-muted: 156 163 175;    /* Secondary text - gray */
    --color-text-subtle: 107 114 128;   /* Tertiary text - subtle gray */

    /* Accents */
    --color-accent: 34 211 238;         /* Cyan - primary accent */
    --color-accent-strong: 6 182 212;   /* Cyan - darker */
    --color-accent-indigo: 99 102 241;  /* Indigo - secondary accent */

    /* Legacy aliases for backwards compatibility */
    --color-primary: 34 211 238;        /* Maps to accent */
    --color-primary-dark: 6 182 212;    /* Maps to accent-strong */
    --color-primary-light: 103 232 249; /* Cyan-300 */
    --color-accent-light: 129 140 248;  /* Indigo-400 */
    --color-dark: 11 16 32;             /* Maps to surface-1 */
    --color-dark-lighter: 31 41 55;     /* Maps to surface-border */
    --color-background: 5 8 22;         /* Maps to surface-0 */
    --color-text-primary: 249 250 251;  /* Maps to text-strong */
    --color-text-secondary: 156 163 175; /* Maps to text-muted */

    /* Glows (using rgba for compatibility) */
    --color-glow-cyan: rgba(34, 211, 238, 0.2);
    --color-glow-indigo: rgba(99, 102, 241, 0.2);

    /* Shadows */
    --shadow-glow: 0 0 35px var(--color-glow-cyan);
    --shadow-glow-strong: 0 0 45px var(--color-glow-cyan);

    /* Radii */
    --radius-card: 0.75rem;
    --radius-panel: 1rem;

    /* Typography */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Motion */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* Scrollbar Colors */
    scrollbar-color: rgb(var(--color-accent)) rgb(var(--color-surface-1));
}

/* NoProblem Software theme scrollbar - WebKit */
html[data-theme="noproblemsoftware-com"] ::-webkit-scrollbar-track {
    background: rgb(var(--color-surface-1));
    border-radius: 5px;
}

html[data-theme="noproblemsoftware-com"] ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-accent));
    border-radius: 5px;
    border: 2px solid rgb(var(--color-surface-1));
}

html[data-theme="noproblemsoftware-com"] ::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-accent-strong));
}

/* NoProblem Software background with cyan and indigo glow effects */
html[data-theme="noproblemsoftware-com"] body {
    background-color: rgb(var(--color-surface-0));
}

@media (max-width: 768px) {
    html[data-theme="noproblemsoftware-com"] body {
        background-color: rgb(var(--color-surface-0));
    }
}

/* ===== NoProblem Software Theme - Light Mode ===== */
/* Tech-focused theme with cyan and indigo accents on light background */

html[data-theme="noproblemsoftware-com-light"] {
    /* ===========================
       COLOR SYSTEM — LIGHT MODE
       =========================== */

    /* Surfaces */
    --color-surface-0: 249 250 251;     /* Light background - gray-50 */
    --color-surface-1: 255 255 255;     /* Panels - white */
    --color-surface-2: 243 244 246;     /* Subtle grey - gray-100 */
    --color-surface-border: 209 213 219; /* Border - gray-300 */

    /* Text */
    --color-text-strong: 15 23 42;      /* Primary text - slate-900 */
    --color-text-muted: 71 85 105;      /* Secondary text - slate-600 */
    --color-text-subtle: 100 116 139;   /* Tertiary text - slate-500 */

    /* Accents */
    --color-accent: 6 182 212;          /* Cyan-500 - softer primary accent */
    --color-accent-strong: 8 145 178;   /* Cyan-600 - darker */
    --color-accent-indigo: 79 70 229;   /* Indigo-600 - secondary accent */

    /* Legacy aliases for backwards compatibility */
    --color-primary: 6 182 212;         /* Maps to accent */
    --color-primary-dark: 8 145 178;    /* Maps to accent-strong */
    --color-primary-light: 34 211 238;  /* Cyan-400 - lighter */
    --color-accent-light: 99 102 241;   /* Indigo-500 */
    --color-dark: 255 255 255;          /* Maps to surface-1 (inverted) */
    --color-dark-lighter: 243 244 246;  /* Maps to surface-2 */
    --color-background: 249 250 251;    /* Maps to surface-0 */
    --color-text-primary: 15 23 42;     /* Maps to text-strong */
    --color-text-secondary: 71 85 105;  /* Maps to text-muted */

    /* Glows (softer for light mode) */
    --color-glow-cyan: rgba(6, 182, 212, 0.15);
    --color-glow-indigo: rgba(79, 70, 229, 0.15);

    /* Shadows */
    --shadow-glow: 0 0 25px var(--color-glow-cyan);
    --shadow-glow-strong: 0 0 35px var(--color-glow-cyan);

    /* Radii */
    --radius-card: 0.75rem;
    --radius-panel: 1rem;

    /* Typography */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Motion */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* Scrollbar Colors */
    scrollbar-color: rgb(var(--color-accent)) rgb(var(--color-surface-2));
}

/* Light mode scrollbar - WebKit */
html[data-theme="noproblemsoftware-com-light"] ::-webkit-scrollbar-track {
    background: rgb(var(--color-surface-2));
    border-radius: 5px;
}

html[data-theme="noproblemsoftware-com-light"] ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-accent));
    border-radius: 5px;
    border: 2px solid rgb(var(--color-surface-2));
}

html[data-theme="noproblemsoftware-com-light"] ::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-accent-strong));
}

/* Light mode background with subtle cyan and indigo glow effects */
html[data-theme="noproblemsoftware-com-light"] body {
    background-color: rgb(var(--color-surface-0));
}

@media (max-width: 768px) {
    html[data-theme="noproblemsoftware-com-light"] body {
        background-color: rgb(var(--color-surface-0));
    }
}

/* ===== Card-Button Styling for PrimaryButton & SecondaryButton ===== */
/* Glass card-button aesthetic matching CTA link-buttons — no chevron, slightly smaller text */

/* --- Primary Button --- */
html[data-theme="noproblemsoftware-com"] button.shadow-glow,
html[data-theme="noproblemsoftware-com-light"] button.shadow-glow {
    background: rgb(var(--color-accent) / 0.1) !important;
    color: rgb(var(--color-accent)) !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: rgb(var(--color-accent) / 0.3) !important;
    border-radius: 1rem !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: none !important;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.375rem 0.875rem !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="noproblemsoftware-com"] button.shadow-glow:hover,
html[data-theme="noproblemsoftware-com-light"] button.shadow-glow:hover {
    transform: scale(1.02) translateY(-2px) !important;
    box-shadow: 0 0 20px rgb(var(--color-accent) / 0.3) !important;
    background: rgb(var(--color-accent) / 0.15) !important;
    border-color: rgb(var(--color-accent) / 0.5) !important;
}

html[data-theme="noproblemsoftware-com"] button.shadow-glow:active,
html[data-theme="noproblemsoftware-com-light"] button.shadow-glow:active {
    transform: scale(0.95) !important;
}

/* Shimmer sweep */
html[data-theme="noproblemsoftware-com"] button.shadow-glow::before,
html[data-theme="noproblemsoftware-com-light"] button.shadow-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(var(--color-accent) / 0.15), transparent) !important;
    transform: translateX(-100%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

html[data-theme="noproblemsoftware-com"] button.shadow-glow:hover::before,
html[data-theme="noproblemsoftware-com-light"] button.shadow-glow:hover::before {
    transform: translateX(100%);
}

/* Disabled primary */
html[data-theme="noproblemsoftware-com"] button.shadow-glow:disabled,
html[data-theme="noproblemsoftware-com-light"] button.shadow-glow:disabled {
    opacity: 0.5;
}

html[data-theme="noproblemsoftware-com"] button.shadow-glow:disabled:hover,
html[data-theme="noproblemsoftware-com-light"] button.shadow-glow:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    background: rgb(var(--color-accent) / 0.1) !important;
    border-color: rgb(var(--color-accent) / 0.3) !important;
}

html[data-theme="noproblemsoftware-com"] button.shadow-glow:disabled::before,
html[data-theme="noproblemsoftware-com-light"] button.shadow-glow:disabled::before {
    display: none;
}

/* --- Secondary Button --- */
html[data-theme="noproblemsoftware-com"] button.bg-theme-surface-1,
html[data-theme="noproblemsoftware-com-light"] button.bg-theme-surface-1 {
    background: rgb(var(--color-surface-2) / 0.5) !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: rgb(var(--color-surface-border) / 0.5) !important;
    border-radius: 1rem !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    font-size: 0.875rem;
    padding: 0.375rem 0.875rem !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="noproblemsoftware-com"] button.bg-theme-surface-1:hover,
html[data-theme="noproblemsoftware-com-light"] button.bg-theme-surface-1:hover {
    transform: scale(1.02) translateY(-2px) !important;
    background: rgb(var(--color-surface-2) / 0.7) !important;
    border-color: rgb(var(--color-surface-border) / 0.8) !important;
}

html[data-theme="noproblemsoftware-com"] button.bg-theme-surface-1:active,
html[data-theme="noproblemsoftware-com-light"] button.bg-theme-surface-1:active {
    transform: scale(0.95) !important;
}

/* ===== Site-wide Circuit Background ===== */
html[data-theme="noproblemsoftware-com"] .site-circuit-bg {
    opacity: 0.8;
}

html[data-theme="noproblemsoftware-com-light"] .site-circuit-bg {
    opacity: 0.3;
    filter: invert(1) hue-rotate(180deg);
}

/* --- Circuit visibility: semi-transparent page sections --- */
html[data-theme="noproblemsoftware-com"] .snap-section.bg-theme-surface-0,
html[data-theme="noproblemsoftware-com"] section.min-h-screen.bg-theme-surface-0 {
    background-color: rgb(var(--color-surface-0) / 0.55) !important;
}
html[data-theme="noproblemsoftware-com"] .snap-section.bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-theme="noproblemsoftware-com"] .snap-section.bg-theme-surface-2 {
    background-color: rgb(var(--color-surface-2) / 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Header: frosted glass so circuit peeks through */
html[data-theme="noproblemsoftware-com"] header.bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Footer: frosted glass matching header */
html[data-theme="noproblemsoftware-com"] .site-footer.bg-theme-surface-1,
html[data-theme="noproblemsoftware-com"] footer.snap-section.bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Light mode: slightly less transparent (circuit is fainter) */
html[data-theme="noproblemsoftware-com-light"] .snap-section.bg-theme-surface-0,
html[data-theme="noproblemsoftware-com-light"] section.min-h-screen.bg-theme-surface-0 {
    background-color: rgb(var(--color-surface-0) / 0.65) !important;
}
html[data-theme="noproblemsoftware-com-light"] .snap-section.bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.7) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-theme="noproblemsoftware-com-light"] .snap-section.bg-theme-surface-2 {
    background-color: rgb(var(--color-surface-2) / 0.7) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-theme="noproblemsoftware-com-light"] header.bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
html[data-theme="noproblemsoftware-com-light"] .site-footer.bg-theme-surface-1,
html[data-theme="noproblemsoftware-com-light"] footer.snap-section.bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ===== Glassmorphic Surface Overrides (flat selectors — no CSS nesting) =====
   Semi-transparent backgrounds so circuit SVG shows through.
   Blur is ONLY applied to non-section elements (cards, panels, small widgets)
   via :not() selectors — page-level sections must NOT blur the circuit. */

/* --- Dark mode: card-level glass (very transparent so circuit shows through) ---
   Section-specific rules above override these with higher opacity via specificity. */
html[data-theme="noproblemsoftware-com"] .bg-theme-surface-0 {
    background-color: rgb(var(--color-surface-0) / 0.55) !important;
}
html[data-theme="noproblemsoftware-com"] .bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.15) !important;
}
html[data-theme="noproblemsoftware-com"] .bg-theme-surface-2 {
    background-color: rgb(var(--color-surface-2) / 0.15) !important;
}
html[data-theme="noproblemsoftware-com"] .border-theme {
    border-color: rgb(var(--color-surface-border) / 0.3) !important;
}

/* --- Dark mode: frosted glass blur on cards/panels only (not sections) --- */
html[data-theme="noproblemsoftware-com"] .bg-theme-surface-1:not(section):not(header):not(footer):not(.snap-section):not(.site-footer) {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
html[data-theme="noproblemsoftware-com"] .bg-theme-surface-2:not(section):not(header):not(footer):not(.snap-section):not(.site-footer) {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* --- Light mode: card-level glass --- */
html[data-theme="noproblemsoftware-com-light"] .bg-theme-surface-0 {
    background-color: rgb(var(--color-surface-0) / 0.65) !important;
}
html[data-theme="noproblemsoftware-com-light"] .bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.3) !important;
}
html[data-theme="noproblemsoftware-com-light"] .bg-theme-surface-2 {
    background-color: rgb(var(--color-surface-2) / 0.3) !important;
}

/* --- Light mode: frosted glass blur on cards/panels only (not sections) --- */
html[data-theme="noproblemsoftware-com-light"] .bg-theme-surface-1:not(section):not(header):not(footer):not(.snap-section):not(.site-footer) {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
html[data-theme="noproblemsoftware-com-light"] .bg-theme-surface-2:not(section):not(header):not(footer):not(.snap-section):not(.site-footer) {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ===== .glass utility — lighter blur so circuit SVG stays visible =====
   Elements with the .glass class get a subtle 3px blur instead of the default
   20px, keeping the background pattern readable through glass surfaces. */

/* --- Dark mode glass --- */
html[data-theme="noproblemsoftware-com"] .glass {
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}
html[data-theme="noproblemsoftware-com"] .glass.bg-theme-surface-0 {
    background-color: rgb(var(--color-surface-0) / 0.5) !important;
}
html[data-theme="noproblemsoftware-com"] .glass.bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.3) !important;
}
html[data-theme="noproblemsoftware-com"] .glass.bg-theme-surface-2 {
    background-color: rgb(var(--color-surface-2) / 0.3) !important;
}
html[data-theme="noproblemsoftware-com"] .glass.border-theme {
    border-color: rgb(var(--color-surface-border) / 0.45) !important;
}

/* --- Light mode glass --- */
html[data-theme="noproblemsoftware-com-light"] .glass {
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}
html[data-theme="noproblemsoftware-com-light"] .glass.bg-theme-surface-0 {
    background-color: rgb(var(--color-surface-0) / 0.6) !important;
}
html[data-theme="noproblemsoftware-com-light"] .glass.bg-theme-surface-1 {
    background-color: rgb(var(--color-surface-1) / 0.4) !important;
}
html[data-theme="noproblemsoftware-com-light"] .glass.bg-theme-surface-2 {
    background-color: rgb(var(--color-surface-2) / 0.4) !important;
}
html[data-theme="noproblemsoftware-com-light"] .glass.border-theme {
    border-color: rgb(var(--color-surface-border) / 0.35) !important;
}

/* ===== Native <select>/<option> need opaque backgrounds =====
   Browser-rendered <option> dropdowns inherit the <select>'s transparent
   background, making text unreadable. CSS variables don't work on native
   <option> elements in most browsers — hardcode the surface colors. */
html[data-theme="noproblemsoftware-com"] select.bg-theme-surface-1 {
    background-color: rgb(11 16 32) !important;
    color: rgb(249 250 251);
}
html[data-theme="noproblemsoftware-com"] select option {
    background-color: #0b1020;
    color: #f9fafb;
}
html[data-theme="noproblemsoftware-com-light"] select.bg-theme-surface-1 {
    background-color: rgb(255 255 255) !important;
    color: rgb(15 23 42);
}
html[data-theme="noproblemsoftware-com-light"] select option {
    background-color: #ffffff;
    color: #0f172a;
}