:root[data-theme="dark"] {
    color-scheme: dark;
    --navy-900: #050506;
    --navy-800: #0a0a0c;
    --navy-700: #16171a;
    --green-600: #f4f4f5;
    --green-500: #ffffff;
    --green-300: #ccccd1;
    --gold-500: #d7d7dc;
    --gold-300: #898993;
    --red-500: #d0d0d4;
    --blue-200: #202126;
    --ink-900: #fafafb;
    --ink-700: #d3d3d8;
    --ink-500: #90909a;
    --white: #101114;
    --surface: #060607;
    --surface-strong: #0c0d10;
    --border: rgba(255, 255, 255, 0.12);
    --shadow-soft: 0 28px 72px rgba(0, 0, 0, 0.42);
    --shadow-hard: 0 42px 110px rgba(0, 0, 0, 0.62);
    --teal-700: #f4f4f5;
    --teal-600: #ececef;
    --teal-500: #ffffff;
    --teal-100: rgba(255, 255, 255, 0.08);
    --ui-bg: #060607;
    --ui-surface: rgba(18, 19, 22, 0.82);
    --ui-border: rgba(255, 255, 255, 0.14);
    --ui-text: #f7f7f8;
    --ui-muted: #9b9ba4;
    --app-red-soft: rgba(255, 255, 255, 0.06);
}

@keyframes fm-dark-grid-shift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 24px, 0);
    }
}

@keyframes fm-dark-orb-drift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-2.5rem, 1.8rem, 0) scale(1.06);
    }

    100% {
        transform: translate3d(1.4rem, -1.2rem, 0) scale(0.96);
    }
}

:root[data-theme="dark"],
:root[data-theme="dark"] body {
    background-color: #050506;
}

:root[data-theme="dark"] body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.08), transparent 24%),
        radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.06), transparent 20%),
        linear-gradient(180deg, #050506 0%, #09090b 42%, #050506 100%);
}

:root[data-theme="dark"] body::before,
:root[data-theme="dark"] body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    inset: 0;
}

:root[data-theme="dark"] body::before {
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 82%);
    opacity: 0.28;
    animation: fm-dark-grid-shift 18s linear infinite alternate;
}

:root[data-theme="dark"] body::after {
    inset: auto -10rem -8rem auto;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 36%, transparent 72%);
    filter: blur(18px);
    opacity: 0.88;
    animation: fm-dark-orb-drift 18s ease-in-out infinite;
}

:root[data-theme="dark"] main {
    position: relative;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] .section-subtitle,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .small,
:root[data-theme="dark"] .brand-tag,
:root[data-theme="dark"] .kpi-label,
:root[data-theme="dark"] label {
    color: var(--ink-500);
}

:root[data-theme="dark"] .surface,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .player-modal,
:root[data-theme="dark"] .player-modal-card,
:root[data-theme="dark"] .auth-shell,
:root[data-theme="dark"] .settings-theme-option,
:root[data-theme="dark"] .app-picker-sheet,
:root[data-theme="dark"] .app-picker-option,
:root[data-theme="dark"] .live-card,
:root[data-theme="dark"] .fixture-item,
:root[data-theme="dark"] .home-top-strip,
:root[data-theme="dark"] .home-spotlight-card,
:root[data-theme="dark"] .home-action-board,
:root[data-theme="dark"] .home-action-card,
:root[data-theme="dark"] .home-pulse-card,
:root[data-theme="dark"] .home-check-item,
:root[data-theme="dark"] .match-discovery-surface,
:root[data-theme="dark"] .match-panel,
:root[data-theme="dark"] .match-card,
:root[data-theme="dark"] .match-kpi,
:root[data-theme="dark"] .match-advanced,
:root[data-theme="dark"] .team-list-item,
:root[data-theme="dark"] .team-ready-helper,
:root[data-theme="dark"] .profile-summary,
:root[data-theme="dark"] .snapshot-item,
:root[data-theme="dark"] .profile-summary-contact-item,
:root[data-theme="dark"] .profile-snapshot-hero,
:root[data-theme="dark"] .player-modal > .card-title-row,
:root[data-theme="dark"] .app-picker-head,
:root[data-theme="dark"] .settings-hero-surface,
:root[data-theme="dark"] .profile-cover-surface,
:root[data-theme="dark"] .profile-hub-surface {
    border-color: var(--ui-border);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(24, 25, 29, 0.84), rgba(10, 10, 12, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 28px 72px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    border-color: var(--ui-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--ink-900);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 4px rgba(255, 255, 255, 0.08),
        0 0 26px rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] select {
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.46) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.46) 50%, transparent 50%);
}

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .site-nav,
:root[data-theme="dark"] .mobile-bottom-nav {
    border-color: var(--ui-border);
    background:
        linear-gradient(180deg, rgba(18, 19, 22, 0.84), rgba(8, 8, 10, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 26px 64px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

:root[data-theme="dark"] .site-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 36%),
        linear-gradient(180deg, rgba(14, 15, 18, 0.88), rgba(8, 8, 10, 0.94));
}

:root[data-theme="dark"] .brand-logo {
    border-color: rgba(255, 255, 255, 0.26);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .brand-name,
:root[data-theme="dark"] .page-title,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .team-list-name,
:root[data-theme="dark"] .team-name-hero,
:root[data-theme="dark"] .match-card h3,
:root[data-theme="dark"] .profile-summary-name,
:root[data-theme="dark"] .selected-team-label {
    color: var(--ink-900);
}

:root[data-theme="dark"] .menu-toggle,
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .nav-btn,
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .mobile-nav-link,
:root[data-theme="dark"] .team-mobile-switch-btn,
:root[data-theme="dark"] .profile-primary-tab,
:root[data-theme="dark"] .btn-outline,
:root[data-theme="dark"] .password-toggle {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-700);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .menu-toggle span,
:root[data-theme="dark"] .menu-toggle span::before,
:root[data-theme="dark"] .menu-toggle span::after {
    background: currentColor;
    stroke: currentColor;
}

:root[data-theme="dark"] .footer-social-icon {
    background: transparent;
    fill: currentColor;
    stroke: none;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.28));
}

:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .nav-btn:hover,
:root[data-theme="dark"] .theme-toggle:hover,
:root[data-theme="dark"] .btn-outline:hover,
:root[data-theme="dark"] .team-mobile-switch-btn:hover,
:root[data-theme="dark"] .profile-primary-tab:hover,
:root[data-theme="dark"] .settings-theme-option:hover,
:root[data-theme="dark"] .app-picker-option:hover,
:root[data-theme="dark"] .team-list-item:hover,
:root[data-theme="dark"] .home-action-card:hover,
:root[data-theme="dark"] .match-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--ink-900);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 58px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .nav-link.active,
:root[data-theme="dark"] .mobile-nav-link.active,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .team-mobile-switch-btn.active,
:root[data-theme="dark"] .profile-primary-tab.active,
:root[data-theme="dark"] .settings-theme-option.is-active,
:root[data-theme="dark"] .app-picker-option.is-selected,
:root[data-theme="dark"] .team-list-item.is-active {
    border-color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(220, 220, 224, 0.92));
    color: #060607;
    box-shadow:
        0 0 30px rgba(255, 255, 255, 0.12),
        0 18px 42px rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .mobile-nav-link.active .dot,
:root[data-theme="dark"] .app-picker-option.is-selected .app-picker-option-mark {
    background: #060607;
    color: #060607;
}

:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-secondary {
    min-height: 2.4rem;
}

:root[data-theme="dark"] .btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink-900);
}

:root[data-theme="dark"] .btn-warning,
:root[data-theme="dark"] .btn-danger {
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

:root[data-theme="dark"] .btn-warning {
    background: linear-gradient(180deg, #2a2a2e, #16161a);
    color: #f5f5f5;
}

:root[data-theme="dark"] .btn-danger {
    background: linear-gradient(180deg, #332126, #1a1215);
    color: #ffe4e7;
}

:root[data-theme="dark"] .btn-link,
:root[data-theme="dark"] .player-name-link:hover,
:root[data-theme="dark"] .team-list-name:hover,
:root[data-theme="dark"] .home-section-kicker,
:root[data-theme="dark"] .home-spotlight-kicker,
:root[data-theme="dark"] .team-page-kicker,
:root[data-theme="dark"] .settings-kicker,
:root[data-theme="dark"] .app-confirm-kicker,
:root[data-theme="dark"] .app-picker-kicker {
    color: rgba(255, 255, 255, 0.78);
}

:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .home-spotlight-stat,
:root[data-theme="dark"] .readonly-chip {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.045);
    color: var(--ink-700);
}

:root[data-theme="dark"] .chip.live,
:root[data-theme="dark"] .chip.ready,
:root[data-theme="dark"] .chip.pending,
:root[data-theme="dark"] .chip.accepted,
:root[data-theme="dark"] .chip.rejected {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink-900);
}

:root[data-theme="dark"] .notice,
:root[data-theme="dark"] .toast {
    background: linear-gradient(180deg, rgba(18, 19, 22, 0.94), rgba(8, 8, 10, 0.98));
    border-color: var(--ui-border);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] .notice.info,
:root[data-theme="dark"] .toast.info {
    color: #dbe4f7;
    background: linear-gradient(180deg, rgba(23, 27, 35, 0.96), rgba(11, 13, 18, 0.98));
    border-color: rgba(128, 145, 193, 0.28);
}

:root[data-theme="dark"] .notice.success,
:root[data-theme="dark"] .toast.success {
    color: #d8efe0;
    background: linear-gradient(180deg, rgba(19, 28, 23, 0.96), rgba(9, 14, 11, 0.98));
    border-color: rgba(96, 153, 119, 0.28);
}

:root[data-theme="dark"] .notice.error,
:root[data-theme="dark"] .toast.error {
    color: #f3d7d9;
    background: linear-gradient(180deg, rgba(34, 22, 25, 0.96), rgba(16, 10, 12, 0.98));
    border-color: rgba(180, 104, 113, 0.3);
}

:root[data-theme="dark"] .notification-toggle {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(24, 25, 29, 0.88), rgba(9, 9, 11, 0.96));
    color: var(--ink-900);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .notification-toggle:hover,
:root[data-theme="dark"] .notification-toggle[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(31, 32, 37, 0.96), rgba(13, 13, 16, 0.98));
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

:root[data-theme="dark"] .notification-toggle-count {
    background: #d85f66;
    color: #fff7f7;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .notification-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(18, 19, 22, 0.94), rgba(6, 6, 8, 0.98));
    box-shadow: 0 38px 72px rgba(0, 0, 0, 0.48);
}

:root[data-theme="dark"] .notification-backdrop {
    background: rgba(2, 4, 8, 0.34);
}

:root[data-theme="dark"] .notification-panel-head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(28, 29, 34, 0.94), rgba(10, 10, 12, 0.98));
}

:root[data-theme="dark"] .notification-panel-kicker {
    color: var(--ink-700);
}

:root[data-theme="dark"] .notification-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(24, 25, 29, 0.9), rgba(12, 12, 15, 0.96));
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .notification-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .notification-card.is-unread {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(34, 36, 42, 0.94), rgba(14, 14, 17, 0.98));
}

:root[data-theme="dark"] .notification-type-pill {
    background: rgba(255, 255, 255, 0.07);
    color: var(--ink-900);
}

:root[data-theme="dark"] .notification-time,
:root[data-theme="dark"] .notification-card p,
:root[data-theme="dark"] .notification-empty {
    color: var(--ink-700);
}

:root[data-theme="dark"] .notification-empty {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .player-modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .player-modal-overlay.player-modal-overlay-centered {
    background: rgba(0, 0, 0, 0.48);
}

:root[data-theme="dark"] .app-picker-overlay {
    background: rgba(2, 4, 8, 0.5);
}

:root[data-theme="dark"] .player-modal > .card-title-row,
:root[data-theme="dark"] .app-picker-head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 38%),
        linear-gradient(180deg, rgba(23, 24, 28, 0.94), rgba(10, 10, 12, 0.96));
}

:root[data-theme="dark"] .skeleton {
    background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .live-ticker,
:root[data-theme="dark"] .team-ready-helper,
:root[data-theme="dark"] .profile-image-square,
:root[data-theme="dark"] .profile-summary-contact-item,
:root[data-theme="dark"] .snapshot-item,
:root[data-theme="dark"] .player-modal-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.045);
    color: var(--ink-700);
}

:root[data-theme="dark"] .team-ready-helper-warning,
:root[data-theme="dark"] .team-ready-helper-ok {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .ticker-dot {
    background: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
}

:root[data-theme="dark"] .footer {
    border-top-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 28%),
        linear-gradient(180deg, rgba(10, 10, 12, 0.92), rgba(4, 4, 5, 0.98));
}

:root[data-theme="dark"] .footer::before {
    background:
        linear-gradient(90deg, rgba(4, 4, 5, 0.82), rgba(4, 4, 5, 0.58)),
        url("../assets/images/footer-cricket-celebration.png") center center / 100% 100% no-repeat;
    opacity: 0.48;
    filter: saturate(0.9) brightness(0.82);
}

:root[data-theme="dark"] .page-register .footer::before {
    background: none;
    opacity: 0;
}

@media (max-width: 767px) {
    :root[data-theme="dark"] .footer::before {
        background:
            linear-gradient(180deg, rgba(4, 4, 5, 0.66), rgba(4, 4, 5, 0.5)),
            url("../assets/images/footer-cricket-celebration.png") center center / 100% 100% no-repeat;
        opacity: 0.62;
    }

    :root[data-theme="dark"] .page-register .footer::before {
        background: none;
        opacity: 0;
    }
}

:root[data-theme="dark"] .footer-tagline,
:root[data-theme="dark"] .footer-subtagline,
:root[data-theme="dark"] .footer-subtagline-flag,
:root[data-theme="dark"] .footer-subtagline-heart {
    color: var(--ink-700);
}

:root[data-theme="dark"] .footer-social-link {
    --footer-social-accent: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

:root[data-theme="dark"] .footer-social-link[aria-label="Instagram"] {
    --footer-social-accent: #f58529;
    border-color: rgba(245, 133, 41, 0.46);
    background: linear-gradient(135deg, #515bd4 0%, #8134af 32%, #dd2a7b 64%, #f58529 100%);
}

:root[data-theme="dark"] .footer-social-link[aria-label="YouTube"] {
    --footer-social-accent: #ff0033;
    border-color: rgba(255, 61, 61, 0.52);
    background: linear-gradient(135deg, #ff4b4b 0%, #d40022 100%);
}

:root[data-theme="dark"] .footer-social-link[aria-label="X"] {
    --footer-social-accent: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    background: linear-gradient(135deg, #1e2026 0%, #050506 100%);
}

:root[data-theme="dark"] .footer-social-link:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: color-mix(in srgb, var(--footer-social-accent) 70%, #ffffff);
    color: #ffffff;
    box-shadow: 0 18px 34px color-mix(in srgb, var(--footer-social-accent) 24%, rgba(0, 0, 0, 0.42));
    filter: saturate(1.08) brightness(1.06);
}

:root[data-theme="dark"] .footer-social-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--footer-social-accent) 58%, #ffffff);
    outline-offset: 3px;
}

:root[data-theme="dark"] .footer-flag-badge {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .page-register .auth-shell,
:root[data-theme="dark"] .page-login .auth-shell {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(18, 19, 23, 0.94), rgba(8, 8, 10, 0.98));
}

:root[data-theme="dark"] .auth-hero,
:root[data-theme="dark"] .page-register .auth-hero {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(28, 29, 34, 0.98), rgba(8, 8, 10, 0.98));
    color: var(--ink-900);
}

:root[data-theme="dark"] .auth-hero p,
:root[data-theme="dark"] .auth-hero-badges .chip {
    color: var(--ink-700);
}

:root[data-theme="dark"] .auth-optional-card,
:root[data-theme="dark"] .password-guidance {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.045);
}

:root[data-theme="dark"] .password-rule.is-met {
    color: var(--ink-900);
}

:root[data-theme="dark"] .password-rule.is-met::before {
    border-color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.86);
}

:root[data-theme="dark"] .settings-back-button {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(35, 36, 41, 0.92), rgba(11, 11, 13, 0.96));
    color: var(--ink-900);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .settings-back-button:hover {
    border-color: rgba(255, 255, 255, 0.24);
    background: linear-gradient(180deg, rgba(44, 45, 51, 0.94), rgba(15, 15, 18, 0.98));
}

:root[data-theme="dark"] .profile-logout-btn {
    border-color: rgba(224, 106, 114, 0.32);
    background: linear-gradient(180deg, rgba(55, 31, 36, 0.94), rgba(24, 12, 15, 0.98));
    color: #ffd7db;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .profile-logout-btn:hover {
    border-color: rgba(224, 106, 114, 0.48);
    background: linear-gradient(180deg, rgba(71, 40, 46, 0.96), rgba(31, 16, 19, 0.98));
}

:root[data-theme="dark"] .profile-summary-location,
:root[data-theme="dark"] .profile-summary-identity,
:root[data-theme="dark"] .profile-summary-contact-item,
:root[data-theme="dark"] .snapshot-item .label,
:root[data-theme="dark"] .settings-theme-option-desc,
:root[data-theme="dark"] .field-note,
:root[data-theme="dark"] .home-spotlight-copy,
:root[data-theme="dark"] .home-action-card p,
:root[data-theme="dark"] .home-action-label,
:root[data-theme="dark"] .home-check-item,
:root[data-theme="dark"] .match-search-form label,
:root[data-theme="dark"] .selected-team-label,
:root[data-theme="dark"] .team-list-kicker,
:root[data-theme="dark"] .app-picker-current {
    color: var(--ink-500);
}

:root[data-theme="dark"] .settings-theme-option.is-active .settings-theme-option-title,
:root[data-theme="dark"] .settings-theme-option.is-active .settings-theme-option-desc,
:root[data-theme="dark"] .settings-theme-option.is-active .settings-theme-option-state,
:root[data-theme="dark"] .team-mobile-switch-btn.active,
:root[data-theme="dark"] .profile-primary-tab.active,
:root[data-theme="dark"] .app-picker-option.is-selected {
    color: #060607;
}

:root[data-theme="dark"] .settings-theme-option-state {
    color: rgba(255, 255, 255, 0.74);
}

:root[data-theme="dark"] .match-search-form input,
:root[data-theme="dark"] .match-search-form select,
:root[data-theme="dark"] .team-create-form input,
:root[data-theme="dark"] .team-create-form select,
:root[data-theme="dark"] .team-create-form textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .home-top-strip,
:root[data-theme="dark"] .home-spotlight-card,
:root[data-theme="dark"] .home-action-board,
:root[data-theme="dark"] .settings-hero-surface,
:root[data-theme="dark"] .profile-cover-surface,
:root[data-theme="dark"] .match-discovery-surface {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(20, 21, 25, 0.9), rgba(8, 8, 10, 0.98));
}

:root[data-theme="dark"] .home-action-card strong,
:root[data-theme="dark"] .home-pulse-card strong,
:root[data-theme="dark"] .live-scoreline,
:root[data-theme="dark"] .match-kpi-value,
:root[data-theme="dark"] .snapshot-item .value {
    color: var(--ink-900);
}

:root[data-theme="dark"] .kpi-card,
:root[data-theme="dark"] .home-pulse-card,
:root[data-theme="dark"] .match-kpi {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .admin-hero,
:root[data-theme="dark"] .admin-card,
:root[data-theme="dark"] .admin-password-card,
:root[data-theme="dark"] .admin-results-card {
    border-color: rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(20, 21, 25, 0.9), rgba(8, 8, 10, 0.98));
    color: var(--ink-900);
}

:root[data-theme="dark"] .team-list-item.is-active,
:root[data-theme="dark"] .request-segment-btn.active,
:root[data-theme="dark"] .request-overview-card,
:root[data-theme="dark"] .request-column,
:root[data-theme="dark"] .request-card,
:root[data-theme="dark"] .team-code-chip,
:root[data-theme="dark"] .team-join-strip,
:root[data-theme="dark"] .team-pending-panel,
:root[data-theme="dark"] .team-roster-section,
:root[data-theme="dark"] .team-add-player-panel,
:root[data-theme="dark"] .team-add-option,
:root[data-theme="dark"] .team-detail-item,
:root[data-theme="dark"] .team-detail-note,
:root[data-theme="dark"] .team-add-player-panel .inline-add-member,
:root[data-theme="dark"] .team-add-modal .inline-add-member,
:root[data-theme="dark"] .team-invite-box,
:root[data-theme="dark"] .team-join-requests-box,
:root[data-theme="dark"] .team-join-request-item,
:root[data-theme="dark"] .team-share-modal-card,
:root[data-theme="dark"] .team-share-modal-option {
    border-color: rgba(255, 255, 255, 0.18);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 38%),
        linear-gradient(180deg, rgba(27, 28, 33, 0.94), rgba(11, 11, 13, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 52px rgba(0, 0, 0, 0.34);
    color: var(--ink-900);
}

:root[data-theme="dark"] .team-list-item.is-active .team-list-name,
:root[data-theme="dark"] .team-list-item.is-active .team-list-kicker,
:root[data-theme="dark"] .team-list-item.is-active .team-list-cta,
:root[data-theme="dark"] .request-column h3,
:root[data-theme="dark"] .request-card h3,
:root[data-theme="dark"] .request-overview-value,
:root[data-theme="dark"] .team-code-chip strong,
:root[data-theme="dark"] .selected-team-panel .team-name-hero,
:root[data-theme="dark"] .selected-team-panel .ops-title,
:root[data-theme="dark"] .selected-team-panel .team-section-head h4,
:root[data-theme="dark"] .team-add-option h4,
:root[data-theme="dark"] .team-add-option-button,
:root[data-theme="dark"] .team-add-option-button strong,
:root[data-theme="dark"] .team-details-identity h3,
:root[data-theme="dark"] .team-detail-item strong,
:root[data-theme="dark"] .team-invite-head h4,
:root[data-theme="dark"] .team-join-request-copy strong,
:root[data-theme="dark"] .team-share-head-copy h4,
:root[data-theme="dark"] .team-qr-team-name,
:root[data-theme="dark"] .team-share-message strong,
:root[data-theme="dark"] .team-share-modal-label {
    color: var(--ink-900);
}

:root[data-theme="dark"] .request-overview-label,
:root[data-theme="dark"] .request-card-kicker,
:root[data-theme="dark"] .request-versus,
:root[data-theme="dark"] .request-column-subtitle,
:root[data-theme="dark"] .team-list-item.is-active .team-list-kicker,
:root[data-theme="dark"] .team-list-item.is-active .team-list-cta,
:root[data-theme="dark"] .team-detail-description,
:root[data-theme="dark"] .team-qr-location,
:root[data-theme="dark"] .team-detail-note p,
:root[data-theme="dark"] .team-join-request-copy span,
:root[data-theme="dark"] .team-join-request-copy p,
:root[data-theme="dark"] .team-share-message {
    color: var(--ink-500);
}

:root[data-theme="dark"] .pending-requests-btn.has-pending,
:root[data-theme="dark"] .pending-count-chip {
    border-color: rgba(250, 204, 21, 0.34);
    background: rgba(250, 204, 21, 0.12);
    color: #fde68a;
}

:root[data-theme="dark"] .pending-request-badge {
    border-color: #111113;
}

:root[data-theme="dark"] .team-add-option-icon {
    border-color: rgba(68, 214, 171, 0.28);
    background: rgba(35, 157, 128, 0.16);
    color: #d6fff2;
}

:root[data-theme="dark"] .team-share-link-highlight {
    border-color: rgba(68, 214, 171, 0.34);
    background: rgba(35, 157, 128, 0.16);
    color: #d6fff2;
}

:root[data-theme="dark"] .request-segment-btn.active .request-segment-unread,
:root[data-theme="dark"] .request-column-head .chip,
:root[data-theme="dark"] .selected-team-panel .chip,
:root[data-theme="dark"] .team-list-item.is-active .chip {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink-900);
}

:root[data-theme="dark"] .request-segment-unread {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-700);
}

:root[data-theme="dark"] .request-segment-unread.is-zero {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-500);
}

:root[data-theme="dark"] .request-team-field select,
:root[data-theme="dark"] #request-team-select {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 36%),
        linear-gradient(180deg, rgba(24, 25, 29, 0.92), rgba(11, 11, 13, 0.98));
    color: var(--ink-900);
}

:root[data-theme="dark"] .selected-team-panel,
:root[data-theme="dark"] .team-panel,
:root[data-theme="dark"] .request-center-shell {
    border-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .match-room-panel,
:root[data-theme="dark"] .match-room-details-form,
:root[data-theme="dark"] .match-room-chat,
:root[data-theme="dark"] .match-room-result,
:root[data-theme="dark"] .match-room-rating {
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .app-loader-overlay {
    background: rgba(2, 4, 8, 0.4);
}

:root[data-theme="dark"] .app-loader-shell {
    border-color: rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(18, 19, 23, 0.96), rgba(8, 8, 10, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 28px 62px rgba(0, 0, 0, 0.54);
}

:root[data-theme="dark"] .app-loader-pitch {
    background: linear-gradient(90deg, rgba(79, 155, 122, 0.26), rgba(105, 196, 156, 0.48), rgba(79, 155, 122, 0.26));
}

:root[data-theme="dark"] .app-loader-ball-shadow {
    background: rgba(0, 0, 0, 0.38);
}

:root[data-theme="dark"] .app-loader-title {
    color: var(--ink-900);
}

:root[data-theme="dark"] .app-loader-copy,
:root[data-theme="dark"] .auth-location-note {
    color: var(--ink-500);
}

:root[data-theme="dark"] .match-room-message,
:root[data-theme="dark"] .match-room-tag {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.045);
}

:root[data-theme="dark"] .match-room-message.is-own {
    background: rgba(43, 160, 143, 0.2);
}

:root[data-theme="dark"] .page-match-room .match-room-hero,
:root[data-theme="dark"] .page-match-room .match-room-card,
:root[data-theme="dark"] .page-match-room .match-room-mobile-tabs,
:root[data-theme="dark"] .home-history-item {
    border-color: rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 38%),
        linear-gradient(180deg, rgba(27, 28, 33, 0.94), rgba(11, 11, 13, 0.98));
}

:root[data-theme="dark"] .page-match-room .match-room-message,
:root[data-theme="dark"] .page-match-room .match-room-tag,
:root[data-theme="dark"] .page-match-room .match-room-scoreline {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.045);
}

:root[data-theme="dark"] .page-match-room .match-room-message.is-own {
    background: rgba(43, 160, 143, 0.2);
}

:root[data-theme="dark"] #update-profile-modal select,
:root[data-theme="dark"] .team-create-form select {
    background-color: #131519;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

:root[data-theme="dark"] #update-profile-modal select:focus,
:root[data-theme="dark"] .team-create-form select:focus {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] #update-profile-modal select option,
:root[data-theme="dark"] .team-create-form select option {
    background: #14161a;
    color: var(--ink-900);
}

:root[data-theme="dark"] .app-picker-sheet {
    background: linear-gradient(180deg, rgba(18, 19, 23, 0.98), rgba(8, 8, 10, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 28px 64px rgba(0, 0, 0, 0.52);
}

:root[data-theme="dark"] .app-picker-option {
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(22, 23, 27, 0.78), rgba(11, 12, 15, 0.92));
    box-shadow: none;
    color: var(--ink-900);
}

:root[data-theme="dark"] .app-picker-option:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(28, 29, 34, 0.82), rgba(13, 14, 17, 0.94));
    box-shadow: none;
}

:root[data-theme="dark"] .app-picker-option.is-selected {
    border-color: rgba(255, 255, 255, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--ink-900);
}

:root[data-theme="dark"] .app-picker-option.is-selected .app-picker-option-mark {
    background: transparent;
    color: var(--ink-900);
}

@media (max-width: 767px) {
    :root[data-theme="dark"] body::before {
        background-size: 52px 52px;
        opacity: 0.22;
    }

    :root[data-theme="dark"] body::after {
        width: 20rem;
        height: 20rem;
        right: -6rem;
        bottom: -5rem;
    }
}