:root {
            /* Legacy aliases */
            --primary-color: var(--fursvp-primary);
            --secondary-color: var(--fursvp-header);
            --background-color: var(--fursvp-bg);

            /* Brand */
            --fursvp-primary: #2a3faa;
            --fursvp-primary-hover: #1a2f9a;
            --fursvp-accent: #2563eb;
            --fursvp-accent-hover: #1d4ed8;
            --fursvp-accent-light: #b3d1f7;

            /* Surfaces */
            --fursvp-bg: #f8f9fa;
            --fursvp-surface: #ffffff;
            --fursvp-surface-muted: #eef2ff;
            --fursvp-surface-input: #f8fafc;
            --fursvp-surface-elevated: #ffffff;
            --fursvp-header: #b3d1f7;
            --fursvp-table-stripe: #f1f5f9;

            /* Text */
            --fursvp-text: #1e293b;
            --fursvp-text-secondary: #334155;
            --fursvp-text-muted: #64748b;
            --fursvp-text-placeholder: #94a3b8;
            --fursvp-text-on-header: #223b7b;
            --fursvp-text-on-primary: #ffffff;

            /* Borders & shadows */
            --fursvp-border: #e2e8f0;
            --fursvp-border-subtle: #e8eef5;
            --fursvp-shadow: rgba(37, 99, 235, 0.08);
            --fursvp-shadow-strong: rgba(31, 38, 135, 0.10);

            /* Interactive */
            --fursvp-link: #2563eb;
            --fursvp-link-hover: #1d4ed8;
            --fursvp-danger: #dc3545;
            --fursvp-danger-hover: #dc2626;

            /* Footer */
            --fursvp-footer-text: #29486d;
            --fursvp-footer-text-muted: #355b8c;
            --fursvp-footer-btn-bg: #e0edff;
            --fursvp-icon-btn-bg: #eef2ff;
            --fursvp-icon-btn-border: #e0e7ef;
        }

        [data-bs-theme="dark"],
        .dark-mode {
            --fursvp-bg: #0f1117;
            --fursvp-surface: #1a1d24;
            --fursvp-surface-muted: #252a33;
            --fursvp-surface-input: #1a1d24;
            --fursvp-surface-elevated: #252a33;
            --fursvp-header: #1e293b;
            --fursvp-table-stripe: #222b3a;
            --fursvp-text: #e8eaed;
            --fursvp-text-secondary: #cbd5e1;
            --fursvp-text-muted: #9aa0a6;
            --fursvp-text-placeholder: #6b7280;
            --fursvp-text-on-header: #e8eaed;
            --fursvp-border: #3c4043;
            --fursvp-border-subtle: #2d3238;
            --fursvp-shadow: rgba(0, 0, 0, 0.3);
            --fursvp-shadow-strong: rgba(0, 0, 0, 0.45);
            --fursvp-link: #93c5fd;
            --fursvp-link-hover: #bfdbfe;
            --fursvp-accent-light: #1e3a5f;
            --fursvp-footer-text: #e8eaed;
            --fursvp-footer-text-muted: #9aa0a6;
            --fursvp-footer-btn-bg: rgba(255, 255, 255, 0.1);
            --fursvp-icon-btn-bg: #252a33;
            --fursvp-icon-btn-border: #3c4043;

            color-scheme: dark;

            /* Bootstrap 5.3 bridge */
            --bs-body-bg: var(--fursvp-bg);
            --bs-body-color: var(--fursvp-text);
            --bs-border-color: var(--fursvp-border);
            --bs-secondary-color: var(--fursvp-text-muted);
            --bs-tertiary-color: var(--fursvp-text-muted);
            --bs-tertiary-bg: var(--fursvp-surface-muted);
            --bs-emphasis-color: var(--fursvp-text);
            --bs-secondary-bg: var(--fursvp-surface);
            --bs-link-color: var(--fursvp-link);
            --bs-link-hover-color: var(--fursvp-link-hover);
            --bs-primary: var(--fursvp-primary);
            --bs-primary-rgb: 42, 63, 170;
            --bs-card-bg: var(--fursvp-surface);
            --bs-card-border-color: var(--fursvp-border-subtle);
            --bs-dropdown-bg: var(--fursvp-surface-elevated);
            --bs-dropdown-color: var(--fursvp-text);
            --bs-dropdown-border-color: var(--fursvp-border);
            --bs-modal-bg: var(--fursvp-surface);
            --bs-input-bg: var(--fursvp-surface);
            --bs-input-color: var(--fursvp-text);
            --bs-input-border-color: var(--fursvp-border);
            --bs-input-placeholder-color: var(--fursvp-text-placeholder);
            --bs-table-bg: var(--fursvp-surface);
            --bs-table-striped-bg: var(--fursvp-table-stripe);
            --bs-table-hover-bg: var(--fursvp-primary);
            --bs-table-color: var(--fursvp-text);
            --bs-list-group-bg: var(--fursvp-surface);
            --bs-list-group-color: var(--fursvp-text);
            --bs-list-group-border-color: var(--fursvp-border-subtle);
        }

        body {
            background-color: var(--fursvp-bg);
            font-family: 'Roboto', sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Add margin when banner is present */
        body.has-banner {
            margin-top: 4rem;
        }

        .top-bar {
            background: var(--fursvp-header);
            padding: 0.5rem 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            margin-right: 0.5rem;
            text-decoration: none;
        }

        .navbar-brand img {
            height: 52px;
            width: auto;
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }

        .site-wordmark {
            font-family: 'Baloo 2', sans-serif;
            font-weight: 800;
            font-size: 2.65rem;
            line-height: 1;
            letter-spacing: -0.03em;
            color: var(--fursvp-text-on-header);
            display: inline-block;
        }

        .navbar-brand:hover .site-wordmark,
        .navbar-brand:focus-visible .site-wordmark {
            color: var(--fursvp-link);
        }

        .gradient-footer .site-wordmark-link {
            display: block;
            text-align: center;
            margin-bottom: 0.6rem;
        }

        .gradient-footer .site-wordmark-link img {
            height: 48px;
            width: auto;
            display: inline-block;
        }

        .gradient-footer .site-wordmark {
            font-size: 2.35rem;
            margin-bottom: 0.35rem;
        }

        .nav-link {
            color: var(--fursvp-primary) !important;
            font-weight: 500;
            transition: all 0.3s ease;
            font-size: 1.1rem;
            padding: 0.3rem 0.8rem !important;
        }

        .nav-link:hover {
            color: #1a2f9a !important;
            transform: translateY(-1px);
        }

        .nav-link i.material-icons {
            font-size: 24px !important;
            vertical-align: middle;
            line-height: 1;
        }

        .main-content {
            flex: 1;
            padding: 2rem 0;
        }

        .turnstile-wrap {
            width: 100%;
            border: 1.5px solid var(--fursvp-icon-btn-border);
            border-radius: 0.7rem;
            background: var(--fursvp-surface-input);
            box-sizing: border-box;
            overflow: hidden;
        }

        .turnstile-wrap .cf-turnstile {
            width: 100%;
            min-height: 65px;
        }

        .turnstile-wrap .cf-turnstile iframe {
            width: 100% !important;
        }

        /* Shared auth & profile form cards */
        .auth-glass-card {
            background: var(--fursvp-surface);
            border-radius: 1.25rem;
            box-shadow:
                0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 24px rgba(37, 99, 235, 0.08),
                0 20px 40px rgba(37, 99, 235, 0.05);
            border: 1px solid var(--fursvp-border-subtle);
            padding: 2rem 2rem 1.75rem;
            margin-bottom: 2.5rem;
        }

        .auth-page-header {
            text-align: center;
            margin-bottom: 1.75rem;
        }

        .auth-page-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: #2563eb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.85rem;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
        }

        .auth-page-icon .material-icons {
            color: #fff;
            font-size: 1.6rem;
        }

        .auth-page-title {
            font-size: 1.65rem;
            font-weight: 800;
            color: var(--fursvp-text);
            letter-spacing: -0.02em;
            margin: 0;
        }

        .auth-page-subtitle {
            color: var(--fursvp-text-muted);
            font-size: 0.92rem;
            margin: 0.35rem 0 0;
        }

        .auth-field {
            margin-bottom: 1rem;
        }

        .auth-field--turnstile {
            margin-bottom: 1.25rem;
        }

        .auth-field--turnstile .turnstile-wrap {
            border: none;
            background: transparent;
            padding: 0;
            overflow: visible;
        }

        .auth-form-label {
            display: block;
            font-weight: 600;
            color: var(--fursvp-text-secondary);
            margin-bottom: 0.4rem;
            font-size: 0.875rem;
            letter-spacing: 0.01em;
        }

        .auth-input-group {
            display: flex;
            align-items: stretch;
            border: 1.5px solid var(--fursvp-border);
            border-radius: 0.75rem;
            overflow: hidden;
            background: var(--fursvp-surface-input);
            transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
        }

        .auth-input-group:focus-within {
            border-color: var(--fursvp-accent);
            background: var(--fursvp-surface);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
        }

        .auth-input-group .input-group-text {
            background: transparent;
            border: none;
            color: var(--fursvp-accent);
            height: 48px;
            width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            flex-shrink: 0;
        }

        .auth-input-group .input-group-text--action {
            cursor: pointer;
            color: #64748b;
            transition: color 0.15s;
        }

        .auth-input-group .input-group-text--action:hover {
            color: #2563eb;
        }

        .auth-input-group .input-group-text .material-icons {
            font-size: 1.2rem;
        }

        .auth-input-group .form-control {
            background: transparent;
            border: none;
            border-radius: 0 !important;
            height: 48px;
            font-size: 1rem;
            font-weight: 500;
            color: var(--fursvp-text);
            padding-left: 0;
            box-shadow: none !important;
        }

        .auth-input-group .form-control:focus {
            background: transparent;
            box-shadow: none !important;
        }

        /* Time pickers stay attached to the field instead of floating on the page. */
        .auth-input-group:has(.flatpickr-wrapper) {
            overflow: visible;
        }

        .auth-input-group .flatpickr-wrapper {
            position: relative;
            display: flex;
            flex: 1 1 auto;
            min-width: 0;
            align-items: stretch;
        }

        .auth-input-group .flatpickr-wrapper > .form-control {
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
        }

        .auth-input-group .flatpickr-calendar.static {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: auto;
            display: inline-block;
            width: 11.25rem;
            padding: 0.2rem 0.35rem;
            border: 1.5px solid var(--fursvp-border);
            border-radius: 0.75rem;
            background: var(--fursvp-surface);
            box-shadow: 0 12px 32px var(--fursvp-shadow-strong);
        }

        .auth-input-group .flatpickr-calendar.static.open {
            display: inline-block;
            z-index: 40;
        }

        .auth-input-group .flatpickr-calendar.static .flatpickr-time {
            border-top: 0;
            height: 2.75rem;
            max-height: 2.75rem;
            line-height: 2.75rem;
        }

        .auth-input-group .flatpickr-calendar.static .flatpickr-time .numInputWrapper {
            height: 2.75rem;
        }

        .auth-input-group .flatpickr-calendar.static .flatpickr-time input,
        .auth-input-group .flatpickr-calendar.static .flatpickr-time .flatpickr-am-pm,
        .auth-input-group .flatpickr-calendar.static .flatpickr-time .flatpickr-time-separator {
            color: var(--fursvp-text);
            font-size: 1rem;
        }

        .auth-input-group .flatpickr-calendar.static .flatpickr-time .flatpickr-time-separator,
        .auth-input-group .flatpickr-calendar.static .flatpickr-time .flatpickr-am-pm {
            width: auto;
            flex: 0 0 auto;
            padding: 0 0.2rem;
        }

        .auth-input-group .flatpickr-calendar.static .flatpickr-time .flatpickr-am-pm {
            border-radius: 0.5rem;
            font-weight: 700;
        }

        .auth-input-group .flatpickr-calendar.static .flatpickr-time input:hover,
        .auth-input-group .flatpickr-calendar.static .flatpickr-time input:focus,
        .auth-input-group .flatpickr-calendar.static .flatpickr-time .flatpickr-am-pm:hover,
        .auth-input-group .flatpickr-calendar.static .flatpickr-time .flatpickr-am-pm:focus {
            background: var(--fursvp-surface-muted);
        }

        .auth-input-group .flatpickr-calendar.static .numInputWrapper span {
            opacity: 1;
            border-color: transparent;
        }

        .auth-input-group .flatpickr-calendar.static .numInputWrapper:hover {
            background: transparent;
        }

        .auth-input-group .form-control::placeholder {
            color: var(--fursvp-text-placeholder);
        }

        .auth-input-group--search .form-control {
            flex: 1;
            min-width: 0;
        }

        .admin-search-submit {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            height: 48px;
            padding: 0 1.15rem;
            border: none;
            background: #2563eb;
            color: #fff !important;
            font-weight: 600;
            font-size: 0.875rem;
            transition: background 0.18s;
        }

        .admin-search-submit:hover,
        .admin-search-submit:focus {
            background: #1d4ed8;
            color: #fff !important;
        }

        .admin-search-submit .material-icons {
            font-size: 1.1rem !important;
        }

        .admin-search-clear {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 48px;
            color: #94a3b8 !important;
            text-decoration: none;
            transition: color 0.15s, background 0.15s;
        }

        .admin-search-clear:hover {
            color: #64748b !important;
            background: rgba(15, 23, 42, 0.04);
        }

        .admin-search-clear .material-icons {
            font-size: 1.1rem !important;
        }

        .admin-search-toolbar {
            margin-bottom: 1.25rem;
        }

        .admin-search-toolbar .auth-form-label {
            margin-bottom: 0.5rem;
        }

        .admin-search-meta {
            margin-top: 0.5rem;
            font-size: 0.8125rem;
            color: #64748b;
        }

        .admin-search-meta strong {
            color: var(--fursvp-text-secondary);
            font-weight: 600;
        }

        @media (max-width: 576px) {
            .admin-search-submit span {
                display: none;
            }

            .admin-search-submit {
                padding: 0 0.85rem;
            }
        }

        .profile-section-card {
            background: #f8fafc;
            border-radius: 1.25rem;
            border: 1.5px solid #e0e7ef;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
            padding: 2rem;
        }

        .profile-field-card {
            background: #fff;
            border: 1.5px solid #e0e7ef;
            border-radius: 0.85rem;
            padding: 1rem 1.15rem 1.15rem;
            margin-bottom: 1rem;
            transition: border-color 0.18s, box-shadow 0.18s;
        }

        .profile-field-card:focus-within {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
        }

        .profile-field-card--check {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 1rem 1.15rem;
        }

        .profile-field-card--check .form-check-input {
            margin-top: 0.2rem;
            flex-shrink: 0;
        }

        .profile-field-card--check .form-check-label {
            font-size: 0.98rem;
            line-height: 1.5;
            color: var(--fursvp-text-secondary);
            margin: 0;
        }

        .profile-field-card--check .form-check-label a {
            color: #2563eb;
            font-weight: 600;
        }

        .profile-form-label {
            font-weight: 700;
            color: #223b7b;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .profile-input-group .input-group-text {
            background: #f0f9ff;
            border: 1.5px solid #e0e7ef;
            border-right: 0;
            border-radius: 0.7rem 0 0 0.7rem !important;
            color: var(--fursvp-accent);
            height: 48px;
            width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            flex-shrink: 0;
        }

        .profile-input-group .input-group-text--action {
            border-right: 1.5px solid #e0e7ef;
            border-left: 0;
            border-radius: 0 0.7rem 0.7rem 0 !important;
            cursor: pointer;
            width: 48px;
        }

        .profile-input-group .input-group-text .material-icons {
            font-size: 1.25rem;
        }

        .profile-input-group .form-control {
            background: #f8fafc;
            border: 1.5px solid #e0e7ef;
            border-radius: 0 0.7rem 0.7rem 0 !important;
            height: 48px;
            font-size: 1.08rem;
            font-weight: 500;
            color: #223b7b;
            transition: background 0.18s;
        }

        .profile-input-group .form-control--middle {
            border-radius: 0 !important;
            border-left: 0;
            border-right: 0;
        }

        .profile-input-group .form-control:focus {
            box-shadow: none;
            border-color: #e0e7ef;
            background: #fff;
        }

        .profile-btn-primary {
            width: 100%;
            background: #2563eb;
            color: #fff !important;
            font-weight: 700;
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.20);
            padding: 0.85em 0;
            font-size: 1rem;
            transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.45em;
        }

        .profile-btn-primary:hover,
        .profile-btn-primary:focus {
            background: #1d4ed8;
            color: #fff !important;
            box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
            transform: translateY(-1px);
        }

        .profile-btn-primary:disabled {
            background: #94a3b8;
            box-shadow: none;
            transform: none;
            cursor: not-allowed;
        }

        .auth-btn-secondary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4em;
            width: 100%;
            margin-top: 0.75rem;
            text-decoration: none;
            font-weight: 600;
            color: #2563eb;
            background: #f8fafc;
            border: 1.5px solid #e2e8f0;
            border-radius: 0.75rem;
            padding: 0.75em 0;
            font-size: 0.95rem;
            transition: background 0.18s, border-color 0.18s, transform 0.13s;
        }

        .auth-btn-secondary:hover,
        .auth-btn-secondary:focus {
            background: #eff6ff;
            border-color: #93c5fd;
            color: #1d4ed8 !important;
            transform: translateY(-1px);
            text-decoration: none;
        }

        .auth-footer-links {
            display: flex;
            justify-content: center;
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid #f1f5f9;
        }

        .auth-footer-link {
            color: #64748b;
            font-weight: 500;
            font-size: 0.9rem;
            text-decoration: none;
            transition: color 0.15s;
        }

        .auth-footer-link:hover {
            color: #2563eb;
            text-decoration: underline;
        }

        .auth-error-box {
            background: #fef2f2;
            border: 1.5px solid #f87171;
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
            color: #dc2626;
            font-weight: 600;
        }

        .auth-error-box ul {
            margin-bottom: 0;
            padding-left: 0;
            list-style: none;
        }

        .auth-divider {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
            color: #6b7280;
            font-weight: 600;
        }

        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e0e7ef;
        }

        .auth-divider::before { margin-right: 1rem; }
        .auth-divider::after { margin-left: 1rem; }

        .auth-check-field {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.85rem 1rem;
            border: 1.5px solid #e2e8f0;
            border-radius: 0.75rem;
            background: #f8fafc;
            margin-bottom: 1rem;
        }

        .auth-check-field .form-check-input {
            margin-top: 0.2rem;
            flex-shrink: 0;
        }

        .auth-check-field .form-check-label {
            font-size: 0.9rem;
            line-height: 1.5;
            color: #475569;
            margin: 0;
        }

        .auth-check-field .form-check-label a {
            color: #2563eb;
            font-weight: 600;
        }

        .auth-tab-header {
            margin-bottom: 1.25rem;
        }

        .auth-tab-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--fursvp-text);
            margin: 0 0 0.25rem;
        }

        .auth-tab-desc {
            color: #64748b;
            font-size: 0.875rem;
            margin: 0;
            line-height: 1.5;
        }

        .auth-field-help {
            margin-top: 0.4rem;
            font-size: 0.8rem;
            color: #64748b;
        }

        .auth-field-error {
            margin-top: 0.4rem;
            font-size: 0.85rem;
            color: #dc2626;
            font-weight: 600;
        }

        .auth-info-box {
            background: #f0f9ff;
            border: 1.5px solid #bfdbfe;
            border-radius: 0.75rem;
            padding: 1rem 1.15rem;
            margin-bottom: 1rem;
            color: var(--fursvp-text-secondary);
            font-size: 0.875rem;
            line-height: 1.6;
        }

        .auth-info-box ul {
            margin: 0;
            padding-left: 1.1rem;
        }

        .auth-status-box {
            border-radius: 0.75rem;
            padding: 0.85rem 1rem;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .auth-status-box--success {
            background: #ecfdf5;
            border: 1.5px solid #6ee7b7;
            color: #047857;
        }

        .auth-status-box--warning {
            background: #fffbeb;
            border: 1.5px solid #fcd34d;
            color: #b45309;
        }

        .auth-warning-box {
            background: #fef2f2;
            border: 1.5px solid #fecaca;
            border-radius: 0.75rem;
            padding: 0.85rem 1rem;
            margin-bottom: 1rem;
            color: #b91c1c;
            font-weight: 600;
            font-size: 0.9rem;
            text-align: center;
        }

        .auth-qr-wrap {
            display: flex;
            justify-content: center;
            padding: 1.25rem;
            border: 1.5px solid #e2e8f0;
            border-radius: 0.75rem;
            background: #f8fafc;
            margin-bottom: 1rem;
        }

        .auth-qr-wrap img {
            max-width: 200px;
            height: auto;
            border-radius: 0.5rem;
            background: #fff;
            padding: 0.5rem;
        }

        .auth-page-icon--danger {
            background: #dc2626;
            box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
        }

        .profile-btn-danger {
            width: 100%;
            background: #dc2626;
            color: #fff !important;
            font-weight: 700;
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 2px 8px rgba(220, 38, 38, 0.20);
            padding: 0.85em 0;
            font-size: 1rem;
            transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.45em;
            text-decoration: none;
        }

        .profile-btn-danger:hover,
        .profile-btn-danger:focus {
            background: #b91c1c;
            color: #fff !important;
            box-shadow: 0 4px 16px rgba(220, 38, 38, 0.28);
            transform: translateY(-1px);
        }

        .profile-btn-outline-danger {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            background: #fff;
            color: #dc2626 !important;
            font-weight: 600;
            border: 1.5px solid #fecaca;
            border-radius: 0.75rem;
            padding: 0.45em 1em;
            font-size: 0.875rem;
            transition: background 0.18s, border-color 0.18s;
        }

        .profile-btn-outline-danger:hover {
            background: #fef2f2;
            border-color: #f87171;
        }

        .profile-page-card {
            background: var(--fursvp-surface);
            border-radius: 1.25rem;
            box-shadow:
                0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 24px rgba(37, 99, 235, 0.08),
                0 20px 40px rgba(37, 99, 235, 0.05);
            border: 1px solid var(--fursvp-border-subtle);
            padding: 2rem;
            margin-bottom: 2.5rem;
        }

        .profile-tabs-shell {
            background: #f1f5f9;
            border-radius: 0.875rem;
            padding: 0.25rem;
            margin-bottom: 1.5rem;
        }

        .profile-tabs {
            display: flex;
            flex-wrap: nowrap;
            gap: 0.2rem;
            margin: 0;
            padding: 0;
            list-style: none;
            width: 100%;
            border-bottom: none;
        }

        .profile-tabs .nav-item {
            flex: 1;
            min-width: 0;
        }

        .profile-tabs .nav-link {
            width: 100%;
            border: 0 !important;
            border-radius: 0.65rem !important;
            background: transparent !important;
            color: #64748b !important;
            font-weight: 600;
            font-size: 0.8125rem !important;
            line-height: 1.2;
            padding: 0.55rem 0.5rem !important;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            white-space: nowrap;
            outline: none;
            box-shadow: none !important;
            transform: none !important;
            transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
        }

        .profile-tabs .nav-link .material-icons {
            font-size: 1rem !important;
            line-height: 1;
            flex-shrink: 0;
            color: inherit;
        }

        .profile-tabs .nav-link:not(.active):hover {
            color: #334155 !important;
            background: rgba(255, 255, 255, 0.45) !important;
            transform: none !important;
        }

        .profile-tabs .nav-link.active {
            background: #fff !important;
            color: #0f172a !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
        }

        .profile-tabs .nav-link.active .material-icons {
            color: #2563eb !important;
        }

        .profile-tabs .nav-link--danger:not(.active) {
            color: #94a3b8 !important;
        }

        .profile-tabs .nav-link--danger:not(.active):hover {
            color: #dc2626 !important;
            background: rgba(254, 242, 242, 0.6) !important;
        }

        .profile-tabs .nav-link--danger.active {
            color: #b91c1c !important;
        }

        .profile-tabs .nav-link--danger.active .material-icons {
            color: #dc2626 !important;
        }

        .admin-tabs-shell {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .admin-tabs .nav-item {
            flex: 1 1 0;
            min-width: 4.25rem;
        }

        .admin-tabs .nav-link {
            font-size: 0.72rem !important;
            padding: 0.5rem 0.35rem !important;
        }

        .admin-tabs .nav-link span {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .auth-input-group .form-control--otp {
            letter-spacing: 0.15em;
            text-align: center;
        }

        @media (max-width: 600px) {
            .auth-glass-card {
                padding: 1.5rem 1.15rem 1.35rem;
            }

            .profile-section-card {
                padding: 1.25rem;
            }

            .profile-page-card {
                padding: 1.25rem;
            }

            .profile-tabs-shell {
                padding: 0.2rem;
            }

            .profile-tabs .nav-link {
                font-size: 0.75rem !important;
                padding: 0.5rem 0.35rem !important;
            }

            .profile-tabs .nav-link span {
                display: none;
            }

            .profile-tabs .nav-link .material-icons {
                font-size: 1.1rem !important;
            }

            .auth-page-title {
                font-size: 1.4rem;
            }
        }

        @media (max-width: 768px) {
            .admin-tabs .nav-link span {
                display: none;
            }

            .admin-tabs .nav-link {
                padding: 0.5rem !important;
            }

            .admin-tabs .nav-link .material-icons {
                font-size: 1.1rem !important;
            }
        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            padding: 0.5rem 1.5rem;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #1a2f9a;
            border-color: #1a2f9a;
            transform: translateY(-2px);
        }

        .table {
            border-radius: 10px;
            overflow: hidden;
        }

        .table thead th {
            background-color: var(--secondary-color);
            border: none;
            color: var(--primary-color);
        }

        .footer {
            background-color: var(--secondary-color);
            padding: 3.5rem 0;
            margin-top: auto;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .footer h5 {
            font-weight: 600;
            font-size: 1.2rem;
        }

        .footer .text-muted {
            color: #6c757d !important;
        }

        .footer a.text-muted:hover {
            color: var(--fursvp-primary) !important;
        }

        .footer .btn-outline-primary {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .footer .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .form-control {
            border-radius: 5px;
            border: 1px solid #dee2e6;
            padding: 0.75rem;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(42, 63, 170, 0.25);
        }

        .footer-logo {
            height: 50px;
            width: auto;
            display: block;
            margin: 0 auto 1rem auto;
        }

        .footer-links a {
            transition: all 0.2s ease;
        }

        .footer-links a:hover {
            transform: translateX(5px);
        }

        .footer .btn {
            transition: all 0.2s ease;
        }

        .footer .btn:hover {
            transform: translateY(-2px);
        }

        .quick-link:hover {
            color: var(--fursvp-primary) !important;
            text-decoration: underline;
        }

        .footer-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .unread-notifications-badge {
            position: absolute;
            top: -7px;
            right: -7px;
            background: #dc2626;
            color: #fff;
            border: 2px solid #fff;
            font-size: 1rem;
            font-weight: 700;
            padding: .32em .7em;
            border-radius: 2em;
            box-shadow: 0 2px 8px rgba(220, 53, 69, 0.13);
            z-index: 2;
            min-width: 1.7em;
            text-align: center;
        }

        .dropdown-menu.notifications-dropdown {
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);
            padding: 0;
            min-width: 360px;
            max-width: 400px;
            border: none;
            margin-top: 0.75rem !important;
            overflow: hidden;
        }

        .notification-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.15rem 0.75rem;
            border-bottom: 1px solid #f1f5f9;
        }

        .notification-header-row h6 {
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: -0.01em;
        }

        .notification-header-action {
            background: none;
            border: none;
            color: #2563eb;
            font-size: 0.8125rem;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }

        .notification-header-action:hover {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .notifications-scroll-container {
            max-height: 320px;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 0.35rem;
            list-style: none;
        }

        .notifications-scroll-container::-webkit-scrollbar {
            width: 4px;
        }

        .notifications-scroll-container::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .notification-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.75rem;
            border-radius: 0.625rem;
            cursor: pointer;
            transition: background 0.15s;
            position: relative;
            border: none;
            background: transparent;
            white-space: normal;
            text-decoration: none;
            color: inherit;
        }

        .notification-item:hover {
            background: #f8fafc;
        }

        .notification-item.unread {
            background: #f0f7ff;
        }

        .notification-item.unread:hover {
            background: #e8f1fe;
        }

        .notification-item-icon {
            flex-shrink: 0;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 50%;
            background: #e0edff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .notification-item-icon .material-icons {
            font-size: 1.125rem;
            color: #2563eb;
        }

        .notification-item-body {
            flex: 1;
            min-width: 0;
            padding-right: 0.75rem;
        }

        .notification-item-text {
            font-size: 0.875rem;
            color: var(--fursvp-text-secondary);
            line-height: 1.45;
            font-weight: 400;
            word-break: break-word;
            margin: 0;
        }

        .notification-item.unread .notification-item-text {
            color: #0f172a;
            font-weight: 500;
        }

        .notification-item-meta {
            display: flex;
            align-items: center;
            margin-top: 0.25rem;
        }

        .notification-item-date {
            font-size: 0.75rem;
            color: var(--fursvp-text-placeholder);
            font-weight: 400;
        }

        .notification-unread-indicator {
            position: absolute;
            top: 0.875rem;
            right: 0.75rem;
            width: 0.5rem;
            height: 0.5rem;
            background: #2563eb;
            border-radius: 50%;
        }

        .notification-item:not(.unread) .notification-unread-indicator {
            display: none;
        }

        #no-notifications-message-item {
            padding: 2rem 1.5rem;
            text-align: center;
            list-style: none;
        }

        .notifications-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            color: var(--fursvp-text-placeholder);
        }

        .notifications-empty-state .material-icons {
            font-size: 2.5rem;
            opacity: 0.45;
        }

        .notifications-empty-state p {
            margin: 0;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .notification-dropdown-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.65rem 1rem;
            border-top: 1px solid #f1f5f9;
            gap: 0.5rem;
            list-style: none;
        }

        .notification-view-all {
            font-size: 0.8125rem;
            font-weight: 600;
            color: #64748b;
            text-decoration: none;
            padding: 0.4rem 0.75rem;
            border-radius: 0.5rem;
            transition: color 0.15s, background 0.15s;
        }

        .notification-view-all:hover {
            color: #2563eb;
            background: #f8fafc;
        }

        #clear-notifications-btn {
            font-size: 0.8125rem;
            font-weight: 600;
            color: #64748b;
            background: none;
            border: none;
            padding: 0.4rem 0.75rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: color 0.15s, background 0.15s;
        }

        #clear-notifications-btn:hover,
        #clear-notifications-btn:focus {
            color: #dc2626;
            background: #fef2f2;
        }

        @media (max-width: 600px) {
            .dropdown-menu.notifications-dropdown {
                min-width: calc(100vw - 2rem);
                max-width: calc(100vw - 2rem);
            }

            .notification-header-row {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .notification-dropdown-footer {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }
        }

        /* Mobile Bottom Navigation */
        @media (max-width: 768px) {
            body {
                height: 100dvh;
                max-height: 100dvh;
                min-height: 0;
                overflow: hidden;
            }

            .main-content {
                flex: 1 1 auto;
                min-height: 0;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                padding-bottom: 0.75rem;
            }

            .mobile-bottom-nav {
                display: flex;
                position: relative;
                flex: 0 0 auto;
                bottom: auto;
                left: auto;
                right: auto;
                z-index: 1000;
                justify-content: space-around;
                align-items: stretch;
                gap: 0.15rem;
                padding: 0.35rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
                background: var(--fursvp-surface);
                border-top: 1px solid var(--fursvp-border-subtle);
                box-shadow: 0 -8px 24px var(--fursvp-shadow);
            }

            .mobile-bottom-nav form {
                flex: 1 1 0;
                min-width: 0;
                margin: 0;
                display: flex;
            }

            .mobile-bottom-nav .nav-link {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.12rem;
                flex: 1 1 0;
                min-width: 0;
                min-height: 3.15rem;
                margin: 0;
                padding: 0.3rem 0.1rem 0.2rem !important;
                border: 0;
                border-radius: 0.85rem;
                background: transparent;
                color: var(--fursvp-text-muted) !important;
                font-family: inherit;
                font-size: 0.68rem !important;
                font-weight: 650;
                line-height: 1.1;
                text-align: center;
                text-decoration: none;
                cursor: pointer;
                appearance: none;
                -webkit-appearance: none;
                transform: none !important;
            }

            .mobile-bottom-nav .nav-link:hover,
            .mobile-bottom-nav .nav-link:focus-visible,
            .mobile-bottom-nav .nav-link.active {
                color: var(--fursvp-link) !important;
                background: var(--fursvp-surface-muted);
                text-shadow: none;
                transform: none !important;
            }

            .mobile-bottom-nav .nav-link i.material-icons,
            .mobile-bottom-nav .material-icons {
                font-size: 1.35rem !important;
                width: 1.55rem;
                height: 1.55rem;
                margin: 0;
                color: inherit;
                line-height: 1;
                filter: none;
                transform: none;
            }

            .mobile-bottom-nav .nav-link span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
                line-height: 1.1;
            }

            .navbar {
                display: none;
            }

            .mobile-header {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.75rem;
                padding-top: 0rem;
                padding-bottom: 0rem;
                background: white;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                position: sticky;
                top: 0;
                z-index: 1000;
            }

            .mobile-header .navbar-brand {
                margin: 0;
                padding: 0.35rem 0;
            }

            .mobile-header .site-wordmark {
                font-size: 1.85rem;
                padding: 0.55rem 0;
            }

            .mobile-header .navbar-brand img {
                height: 2.4rem;
                width: auto;
            }

            .footer {
                padding: 2.5rem 0 1.5rem 0;
                margin-top: 0;
                background-color: var(--secondary-color);
                margin-bottom: 4.5rem;
                position: relative;
                z-index: 1;
            }

            .footer-logo {
                height: 2.5rem;
                margin-bottom: 0.75rem;
                margin-top: 0;
            }

            .footer .row {
                margin-bottom: 1rem;
            }

            .footer h5 {
                font-size: 1rem;
                margin-bottom: 0.75rem;
            }

            .footer p,
            .footer a {
                font-size: 0.85rem;
            }

            .footer .btn {
                padding: 0.4rem 0.8rem;
                font-size: 0.85rem;
            }
        }

        @media (min-width: 769px) {

            .mobile-bottom-nav,
            .mobile-header {
                display: none;
            }
        }

        .flash-icon {
            animation: icon-flash 1s infinite alternate;
        }

        @keyframes icon-flash {
            0% {
                color: #dc3545;
            }

            100% {
                color: #ff6f6f;
            }
        }

        .notification-bell-icon .material-icons.flash-icon,
        .mobile-bottom-nav .material-icons.flash-icon {
            color: #dc3545 !important;
            animation: icon-flash 1s infinite alternate;
        }


        /* ===== Dark mode (token + Bootstrap 5.3; custom widgets only) ===== */
        body.dark-mode {
            background-color: var(--fursvp-bg);
            color: var(--fursvp-text);
        }

        .dark-mode .text-primary {
            color: var(--fursvp-accent-light) !important;
        }

        .dark-mode .text-muted {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .card .text-primary,
        .dark-mode .card-body .text-primary {
            color: var(--fursvp-accent-light) !important;
        }

        .dark-mode .card .text-muted,
        .dark-mode .card-body .text-muted {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .card .badge.bg-warning.text-dark {
            background: #f7c948 !important;
            color: var(--fursvp-surface) !important;
        }

        .dark-mode .notification-bell-icon .material-icons.flash-icon,
        .dark-mode .mobile-bottom-nav .material-icons.flash-icon {
            color: #ff4c4c !important;
            animation: icon-flash 1s infinite alternate;
        }

        .dark-mode .nav-tabs .nav-link.active,
        .dark-mode .nav-tabs .nav-item.show .nav-link {
            color: var(--fursvp-text) !important;
            background-color: var(--fursvp-surface-elevated) !important;
        }

        .dark-mode .nav-tabs .nav-link.active .material-icons,
        .dark-mode .nav-tabs .nav-item.show .nav-link .material-icons {
            color: var(--fursvp-primary) !important;
        }

        .dark-mode .helptext,
        .dark-mode .invalid-feedback,
        .dark-mode .errorlist,
        .dark-mode .form-text {
            color: var(--fursvp-text-secondary) !important;
        }

        .dark-mode .auth-glass-card {
            background: var(--fursvp-surface);
            border-color: var(--fursvp-border-subtle);
            box-shadow: 0 8px 24px var(--fursvp-shadow);
        }

        .dark-mode .auth-page-title {
            color: var(--fursvp-text);
        }

        .dark-mode .auth-page-subtitle,
        .dark-mode .auth-form-label {
            color: var(--fursvp-text-muted);
        }

        .dark-mode .auth-input-group {
            background: var(--fursvp-surface-input);
            border-color: var(--fursvp-border);
        }

        .dark-mode .auth-input-group:focus-within {
            background: var(--fursvp-surface);
            border-color: var(--fursvp-accent);
        }

        .dark-mode .auth-input-group .form-control,
        .dark-mode .auth-input-group .form-select {
            color: var(--fursvp-text) !important;
            background-color: transparent !important;
            --bs-form-select-color: var(--fursvp-text);
            --bs-form-select-bg: transparent;
            --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa0a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }

        .dark-mode .auth-input-group .form-control::placeholder {
            color: var(--fursvp-text-placeholder) !important;
            opacity: 1 !important;
        }

        .dark-mode .auth-input-group .form-select option {
            background: var(--fursvp-surface);
            color: var(--fursvp-text);
        }

        .dark-mode .auth-input-group .input-group-text {
            background: transparent !important;
            color: var(--fursvp-link) !important;
            border: none !important;
        }

        .dark-mode .auth-field-help {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .auth-tab-title {
            color: var(--fursvp-text);
        }

        .dark-mode .auth-tab-desc {
            color: var(--fursvp-text-muted);
        }

        .dark-mode .auth-check-field {
            background: var(--fursvp-surface-input);
            border-color: var(--fursvp-border);
        }

        .dark-mode .auth-check-field .form-check-label {
            color: var(--fursvp-text-secondary);
        }

        .dark-mode .admin-search-meta {
            color: var(--fursvp-text-muted);
        }

        .dark-mode .admin-search-meta strong {
            color: var(--fursvp-text-secondary);
        }

        .dark-mode .admin-search-clear:hover {
            color: var(--fursvp-text-muted) !important;
            background: rgba(255, 255, 255, 0.06);
        }

        .dark-mode .moderation-header .auth-tab-title,
        .dark-mode .moderation-stat-value {
            color: var(--fursvp-text) !important;
        }

        .dark-mode .moderation-help strong {
            color: var(--fursvp-text-secondary) !important;
        }

        .dark-mode .table thead th {
            background-color: var(--fursvp-surface-muted) !important;
            color: var(--fursvp-text-secondary) !important;
        }

        .dark-mode .auth-footer-link {
            color: var(--fursvp-link);
        }

        /* Profile & auth: fix light-theme surfaces left white in dark mode */
        .dark-mode .profile-tabs-shell {
            background: var(--fursvp-surface-muted);
            border: 1px solid var(--fursvp-border-subtle);
        }

        .dark-mode .profile-tabs .nav-link {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .profile-tabs .nav-link:not(.active):hover {
            color: var(--fursvp-text-secondary) !important;
            background: rgba(255, 255, 255, 0.06) !important;
        }

        .dark-mode .profile-tabs .nav-link.active {
            background: var(--fursvp-surface-elevated) !important;
            color: var(--fursvp-text) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
            border: 1px solid var(--fursvp-border);
        }

        .dark-mode .profile-tabs .nav-link.active .material-icons {
            color: var(--fursvp-link) !important;
        }

        .dark-mode .profile-tabs .nav-link--danger:not(.active) {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .profile-tabs .nav-link--danger:not(.active):hover {
            color: #f87171 !important;
            background: rgba(220, 38, 38, 0.12) !important;
        }

        .dark-mode .profile-tabs .nav-link--danger.active {
            color: #fca5a5 !important;
            background: rgba(127, 29, 29, 0.35) !important;
            border-color: rgba(248, 113, 113, 0.25) !important;
        }

        .dark-mode .profile-tabs .nav-link--danger.active .material-icons {
            color: #f87171 !important;
        }

        .dark-mode .auth-status-box--success {
            background: rgba(4, 120, 87, 0.18);
            border-color: rgba(52, 211, 153, 0.35);
            color: #6ee7b7;
        }

        .dark-mode .auth-status-box--warning {
            background: rgba(180, 83, 9, 0.18);
            border-color: rgba(245, 158, 11, 0.35);
            color: #fbbf24;
        }

        .dark-mode .auth-warning-box {
            background: rgba(127, 29, 29, 0.25);
            border-color: rgba(248, 113, 113, 0.35);
            color: #fca5a5;
        }

        .dark-mode .auth-info-box {
            background: rgba(30, 58, 95, 0.35);
            border-color: rgba(147, 197, 253, 0.25);
            color: var(--fursvp-text-secondary);
        }

        .dark-mode .auth-error-box {
            background: rgba(127, 29, 29, 0.25);
            border-color: rgba(248, 113, 113, 0.4);
            color: #fca5a5;
        }

        .dark-mode .auth-btn-secondary {
            background: var(--fursvp-surface-muted);
            border-color: var(--fursvp-border);
            color: var(--fursvp-link) !important;
        }

        .dark-mode .auth-btn-secondary:hover,
        .dark-mode .auth-btn-secondary:focus {
            background: var(--fursvp-surface-elevated);
            border-color: var(--fursvp-accent);
            color: var(--fursvp-link-hover) !important;
        }

        .dark-mode .profile-section-card {
            background: var(--fursvp-surface-muted);
            border-color: var(--fursvp-border-subtle);
            box-shadow: none;
        }

        .dark-mode .profile-btn-outline-danger {
            background: transparent;
            color: #f87171 !important;
            border-color: rgba(248, 113, 113, 0.4);
        }

        .dark-mode .profile-btn-outline-danger:hover {
            background: rgba(127, 29, 29, 0.25);
            border-color: #f87171;
        }

        .dark-mode .turnstile-wrap {
            background: var(--fursvp-surface-input);
            border-color: var(--fursvp-border);
        }

        /* TomSelect */
        .dark-mode .ts-wrapper,
        .dark-mode .ts-control,
        .dark-mode .ts-dropdown,
        .dark-mode .ts-dropdown .option,
        .dark-mode .ts-dropdown .active,
        .dark-mode .ts-dropdown .selected,
        .dark-mode .ts-dropdown .no-results {
            background: var(--fursvp-surface) !important;
            color: var(--fursvp-text) !important;
            border-color: var(--fursvp-border) !important;
        }

        .dark-mode .ts-control {
            border: 1.5px solid var(--fursvp-border) !important;
        }

        .dark-mode .ts-dropdown {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
            border-radius: 8px;
        }

        .dark-mode .ts-dropdown .no-results {
            color: var(--fursvp-text-muted) !important;
            padding: 0.75rem 1rem;
            font-style: italic;
        }

        .dark-mode .ts-dropdown .option {
            padding: 0.75rem 1rem;
            border-radius: 4px;
        }

        .dark-mode .ts-dropdown .option:hover,
        .dark-mode .ts-dropdown .active,
        .dark-mode .ts-dropdown .option.selected {
            background: var(--fursvp-primary) !important;
            color: var(--fursvp-text-on-primary) !important;
        }

        .dark-mode .ts-wrapper.multi .ts-control > .item {
            background: var(--fursvp-border) !important;
            color: var(--fursvp-text-on-primary) !important;
            border-color: var(--fursvp-primary) !important;
        }

        .dark-mode .ts-control input::placeholder {
            color: var(--fursvp-text-placeholder) !important;
            opacity: 1 !important;
        }

        .dark-mode .input-group-text,
        .dark-mode .icon-bg,
        .dark-mode .form-icon-bg {
            background: var(--fursvp-surface) !important;
            color: var(--fursvp-primary) !important;
            border-color: var(--fursvp-border) !important;
        }

        .dark-mode input[type="checkbox"],
        .dark-mode .form-check-input {
            accent-color: var(--fursvp-primary) !important;
            background-color: var(--fursvp-surface) !important;
            border: 1.5px solid var(--fursvp-text-muted) !important;
        }

        .dark-mode input[type="checkbox"]:checked,
        .dark-mode .form-check-input:checked {
            background-color: var(--fursvp-primary) !important;
            border-color: var(--fursvp-primary) !important;
        }

        /* TinyMCE */
        .dark-mode .tox,
        .dark-mode .tox-editor-container,
        .dark-mode .tox-edit-area,
        .dark-mode .tox-toolbar,
        .dark-mode .tox-toolbar__primary,
        .dark-mode .tox-toolbar__overflow,
        .dark-mode .tox-statusbar,
        .dark-mode .tox .tox-edit-area__iframe,
        .dark-mode iframe.tox-edit-area__iframe {
            background: var(--fursvp-surface) !important;
            color: var(--fursvp-text) !important;
            border-color: var(--fursvp-border) !important;
        }

        .dark-mode .tox .tox-statusbar {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode iframe.tox-edit-area__iframe {
            color-scheme: dark;
        }

        .dark-mode .tox .tox-toolbar__primary button,
        .dark-mode .tox .tox-toolbar__primary .tox-tbtn,
        .dark-mode .tox .tox-toolbar__overflow button,
        .dark-mode .tox .tox-toolbar__overflow .tox-tbtn {
            background: var(--fursvp-surface) !important;
            color: var(--fursvp-text) !important;
            border: 1px solid var(--fursvp-border) !important;
        }

        .dark-mode .tox .tox-toolbar__primary button:hover,
        .dark-mode .tox .tox-toolbar__primary .tox-tbtn:hover,
        .dark-mode .tox .tox-toolbar__overflow button:hover,
        .dark-mode .tox .tox-toolbar__overflow .tox-tbtn:hover {
            background: var(--fursvp-primary) !important;
            color: var(--fursvp-text-on-primary) !important;
            border-color: var(--fursvp-primary) !important;
        }

        /* Flatpickr */
        .dark-mode .flatpickr-input,
        .dark-mode .flatpickr-calendar,
        .dark-mode .flatpickr-days,
        .dark-mode .flatpickr-months,
        .dark-mode .flatpickr-weekdays,
        .dark-mode .flatpickr-day,
        .dark-mode .flatpickr-current-month,
        .dark-mode .flatpickr-monthDropdown-months,
        .dark-mode .flatpickr-month,
        .dark-mode .flatpickr-innerContainer,
        .dark-mode .flatpickr-rContainer,
        .dark-mode .flatpickr-time,
        .dark-mode .flatpickr-time input,
        .dark-mode .flatpickr-time .flatpickr-am-pm,
        .dark-mode .flatpickr-monthDropdown-months,
        .dark-mode .flatpickr-current-month input.cur-month {
            background: var(--fursvp-surface) !important;
            color: var(--fursvp-text) !important;
            border-color: var(--fursvp-border) !important;
        }

        .dark-mode .flatpickr-day {
            border: 1px solid var(--fursvp-border) !important;
        }

        .dark-mode .flatpickr-day.selected,
        .dark-mode .flatpickr-day.startRange,
        .dark-mode .flatpickr-day.endRange,
        .dark-mode .flatpickr-day.inRange {
            background: var(--fursvp-primary) !important;
            color: var(--fursvp-text-on-primary) !important;
            border-color: var(--fursvp-primary) !important;
        }

        .dark-mode .flatpickr-day.today {
            border-color: var(--fursvp-primary) !important;
        }

        .dark-mode .flatpickr-weekdays {
            border-bottom: 1px solid var(--fursvp-border) !important;
        }

        .dark-mode .flatpickr-weekday {
            color: var(--fursvp-text) !important;
        }

        .dark-mode .auth-input-group .flatpickr-calendar.static .numInputWrapper span.arrowUp:after {
            border-bottom-color: var(--fursvp-text);
        }

        .dark-mode .auth-input-group .flatpickr-calendar.static .numInputWrapper span.arrowDown:after {
            border-top-color: var(--fursvp-text);
        }

        /* Autocomplete */
        .dark-mode .autocomplete-container,
        .dark-mode .autocomplete-suggestion {
            background: var(--fursvp-surface) !important;
            color: var(--fursvp-text) !important;
            border: 1px solid var(--fursvp-border) !important;
        }

        .dark-mode .autocomplete-suggestion.active,
        .dark-mode .autocomplete-suggestion:hover {
            background: var(--fursvp-primary) !important;
            color: var(--fursvp-text-on-primary) !important;
        }

        /* Notification dropdown */
        .dark-mode .dropdown-menu.notifications-dropdown {
            background: var(--fursvp-surface-elevated) !important;
            color: var(--fursvp-text) !important;
            border-color: var(--fursvp-border-subtle) !important;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
        }

        .dark-mode .notification-header-row {
            border-bottom-color: var(--fursvp-border-subtle) !important;
        }

        .dark-mode .notification-header-row h6 {
            color: var(--fursvp-text) !important;
        }

        .dark-mode .notification-header-action {
            color: var(--fursvp-link) !important;
        }

        .dark-mode .notification-header-action:hover {
            background: var(--fursvp-accent-light) !important;
            color: var(--fursvp-link-hover) !important;
        }

        .dark-mode .notification-item:hover {
            background: var(--fursvp-surface-muted) !important;
        }

        .dark-mode .notification-item.unread {
            background: #1a2744 !important;
        }

        .dark-mode .notification-item.unread:hover {
            background: #1e3054 !important;
        }

        .dark-mode .notification-item-icon {
            background: var(--fursvp-accent-light) !important;
        }

        .dark-mode .notification-item-icon .material-icons {
            color: var(--fursvp-link) !important;
        }

        .dark-mode .notification-item-text {
            color: var(--fursvp-text-secondary) !important;
        }

        .dark-mode .notification-item.unread .notification-item-text {
            color: var(--fursvp-text) !important;
        }

        .dark-mode .notification-item-date {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .notification-unread-indicator {
            background: var(--fursvp-link) !important;
        }

        .dark-mode .notifications-empty-state {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .notification-dropdown-footer {
            border-top-color: var(--fursvp-border-subtle) !important;
        }

        .dark-mode .notification-view-all {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .notification-view-all:hover {
            color: var(--fursvp-link) !important;
            background: var(--fursvp-surface-muted) !important;
        }

        .dark-mode #clear-notifications-btn {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode #clear-notifications-btn:hover,
        .dark-mode #clear-notifications-btn:focus {
            color: #f87171 !important;
            background: #3b1515 !important;
        }

        /* Mobile chrome */
        .dark-mode .mobile-header,
        .dark-mode .mobile-header *,
        .dark-mode .mobile-header.bg-white,
        .dark-mode .mobile-header.bg-light {
            background: var(--fursvp-surface) !important;
            color: var(--fursvp-text) !important;
            border-color: var(--fursvp-border-subtle) !important;
        }

        .dark-mode .mobile-header .material-icons,
        .dark-mode .mobile-header .nav-link {
            color: var(--fursvp-text) !important;
        }

        .dark-mode .mobile-bottom-nav {
            background: var(--fursvp-surface);
            color: var(--fursvp-text);
            border-color: var(--fursvp-border-subtle);
        }

        .dark-mode .mobile-bottom-nav .nav-link,
        .dark-mode .mobile-bottom-nav .material-icons {
            color: var(--fursvp-text-muted) !important;
        }

        .dark-mode .mobile-bottom-nav .nav-link:hover,
        .dark-mode .mobile-bottom-nav .nav-link:focus-visible,
        .dark-mode .mobile-bottom-nav .nav-link.active,
        .dark-mode .mobile-bottom-nav .nav-link:hover .material-icons,
        .dark-mode .mobile-bottom-nav .nav-link.active .material-icons {
            color: var(--fursvp-link) !important;
            background: transparent;
        }

        .dark-mode .mobile-bottom-nav .nav-link:hover,
        .dark-mode .mobile-bottom-nav .nav-link:focus-visible,
        .dark-mode .mobile-bottom-nav .nav-link.active {
            background: var(--fursvp-surface-muted);
        }

        /* Modern Header Styles */
        .main-header {
            background: var(--fursvp-header);
            padding: 1rem 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 1.2rem;
        }

        .notification-container {
            position: relative;
        }

        .notification-bell-icon,
        .user-profile-icon,
        .logout-btn,
        .group-access-icon {
            background: var(--fursvp-icon-btn-bg);
            color: var(--fursvp-text-on-header) !important;
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.10);
            width: 54px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: box-shadow 0.18s, transform 0.18s, background 0.18s, color 0.18s;
            font-size: 28px;
            position: relative;
            border: 2px solid var(--fursvp-icon-btn-border);
            text-decoration: none;
        }

        .notification-bell-icon.has-unread {
            background: #2563eb;
            color: #fff !important;
        }

        .notification-bell-icon:hover,
        .user-profile-icon:hover,
        .logout-btn:hover,
        .group-access-icon:hover {
            background: #2563eb;
            color: #fff !important;
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.18);
            transform: scale(1.07);
            border-color: #2563eb;
        }

        .notification-bell-icon:active,
        .user-profile-icon:active,
        .logout-btn:active,
        .group-access-icon:active {
            transform: scale(0.97);
        }

        .notification-bell-icon .material-icons,
        .user-profile-icon .material-icons,
        .logout-btn .material-icons {
            font-size: 2.1rem;
        }

        .unread-notifications-badge {
            position: absolute;
            top: -7px;
            right: -7px;
            background: #dc2626;
            color: #fff;
            border: 2px solid #fff;
            font-size: 1rem;
            font-weight: 700;
            padding: .32em .7em;
            border-radius: 2em;
            box-shadow: 0 2px 8px rgba(220, 53, 69, 0.13);
            z-index: 2;
            min-width: 1.7em;
            text-align: center;
        }

        .user-profile-icon {
            background: #fff;
            color: #2563eb !important;
        }

        .user-profile-icon:hover {
            background: #2563eb;
            color: #fff !important;
            border-color: #2563eb;
        }

        .logout-btn {
            background: #fff;
            color: #dc3545 !important;
        }

        .logout-btn:hover {
            background: #dc2626;
            color: #fff !important;
            border-color: #dc3545;
        }

        @media (max-width: 600px) {

            .notification-bell-icon,
            .user-profile-icon,
            .logout-btn,
            .group-access-icon {
                width: 44px;
                height: 44px;
                font-size: 22px;
            }

            .notification-bell-icon .material-icons,
            .user-profile-icon .material-icons,
            .logout-btn .material-icons,
            .group-access-icon .material-icons {
                font-size: 1.5rem;
            }
        }

        .auth-actions {
            display: flex;
            gap: 1.1rem;
            align-items: center;
            margin-top: 0.5rem;
        }

        .auth-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6em;
            font-size: 1.13rem;
            font-weight: 700;
            border-radius: 2em;
            padding: 0.7em 2.1em;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.07);
            border: 2px solid #2563eb;
            transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.13s;
            outline: none;
            text-decoration: none;
            cursor: pointer;
            position: relative;
            background: #fff;
            color: #2563eb;
        }

        .login-btn {
            background: #fff;
            color: #2563eb;
        }

        .login-btn:hover,
        .login-btn:focus {
            background: #2563eb;
            color: #fff;
            box-shadow: 0 4px 18px rgba(59, 130, 246, 0.13);
            transform: translateY(-2px) scale(1.04);
            border-color: #2563eb;
        }

        .register-btn {
            background: #2563eb;
            color: #fff;
            border: 2px solid #2563eb;
        }

        .register-btn:hover,
        .register-btn:focus {
            background: #2563eb;
            color: #fff;
            box-shadow: 0 4px 18px rgba(59, 130, 246, 0.13);
            transform: translateY(-2px) scale(1.04);
            border-color: #06b6d4;
        }

        .auth-btn .material-icons {
            font-size: 1.35em;
            vertical-align: middle;
            margin-right: 0.3em;
        }

        @media (max-width: 600px) {
            .auth-actions {
                flex-direction: column;
                gap: 0.5rem;
            }

            .auth-btn {
                width: 100%;
                justify-content: center;
                padding: 0.7em 0;
                font-size: 0.98rem;
            }
        }

        .navigation-subheader {
            background: var(--fursvp-header);
            padding: 0.25rem 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .nav-content {
            display: flex;
            justify-content: center;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 2rem;
        }

        .nav-menu .nav-item {
            margin: 0;
        }

        .nav-menu .nav-link {
            color: var(--fursvp-primary) !important;
            font-weight: 500;
            transition: all 0.3s ease;
            font-size: 1rem;
            padding: 0.5rem 1rem !important;
            border-radius: 20px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-menu .nav-link:hover {
            color: #1a2f9a !important;
            background-color: rgba(42, 63, 170, 0.08);
            transform: translateY(-1px);
            text-decoration: underline;
        }

        .nav-menu .nav-link i.material-icons {
            font-size: 20px !important;
            vertical-align: middle;
            line-height: 1;
        }

        /* Mobile responsive adjustments */
        @media (max-width: 768px) {

            .main-header,
            .navigation-subheader,
            .modern-topnav {
                display: none !important;
            }

            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            .user-actions {
                gap: 0.75rem;
            }

            .notification-bell-icon,
            .user-profile-icon,
            .logout-btn {
                width: 44px;
                height: 44px;
                font-size: 22px;
            }

            .user-profile-icon {
                font-size: 26px;
            }

            .auth-actions {
                flex-direction: column;
                gap: 0.5rem;
            }

            .auth-btn {
                padding: 0.6rem 1rem;
                font-size: 1.4rem;
            }

            .nav-menu {
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;
            }

            .nav-menu .nav-link {
                padding: 0.75rem 1.5rem !important;
                font-size: 0.95rem;
            }
        }


        /* Dark mode: header, nav, auth */
        .dark-mode .main-header,
        .dark-mode .navigation-subheader {
            background: var(--fursvp-header) !important;
            border-color: var(--fursvp-border) !important;
        }

        .dark-mode .nav-menu .nav-link {
            color: var(--fursvp-accent-light) !important;
        }

        .dark-mode .nav-menu .nav-link:hover {
            color: var(--fursvp-text-on-primary) !important;
            background-color: rgba(147, 197, 253, 0.1) !important;
        }

        .dark-mode .user-profile-icon {
            background-color: var(--fursvp-surface) !important;
            color: var(--fursvp-accent-light) !important;
            border-color: var(--fursvp-border) !important;
        }

        .dark-mode .user-profile-icon:hover {
            background-color: var(--fursvp-primary) !important;
            color: var(--fursvp-text-on-primary) !important;
            border-color: var(--fursvp-primary) !important;
        }

        .dark-mode .logout-btn {
            background-color: var(--fursvp-surface) !important;
            color: #ff6b6b !important;
            border-color: var(--fursvp-border) !important;
        }

        .dark-mode .logout-btn:hover {
            background-color: var(--fursvp-danger) !important;
            color: var(--fursvp-text-on-primary) !important;
            border-color: var(--fursvp-danger) !important;
        }

        [data-bs-theme="dark"] .login-btn,
        .dark-mode .login-btn {
            background-color: rgba(147, 197, 253, 0.1) !important;
            color: var(--fursvp-link) !important;
            border-color: var(--fursvp-link) !important;
        }

        [data-bs-theme="dark"] .login-btn:hover,
        [data-bs-theme="dark"] .login-btn:focus,
        .dark-mode .login-btn:hover,
        .dark-mode .login-btn:focus {
            background-color: var(--fursvp-primary) !important;
            color: var(--fursvp-text-on-primary) !important;
            border-color: var(--fursvp-primary) !important;
        }

        .dark-mode .register-btn {
            background-color: var(--fursvp-primary) !important;
            color: var(--fursvp-text-on-primary) !important;
            border-color: var(--fursvp-primary) !important;
        }

        .dark-mode .register-btn:hover {
            background-color: var(--fursvp-primary-hover) !important;
            border-color: var(--fursvp-primary-hover) !important;
        }

        .dark-mode .bullet-point {
            color: var(--fursvp-text-on-primary) !important;
        }

        /* Site footer */
        .gradient-footer,
        .site-footer {
            background: var(--fursvp-header);
            border-top-left-radius: 1.5rem;
            border-top-right-radius: 1.5rem;
            box-shadow: 0 -4px 24px 0 rgba(31, 38, 135, 0.10);
            padding: 2.5rem 1.5rem 1.5rem 1.5rem;
            margin-top: 3rem;
            color: #234;
        }

        .footer-btn-modern {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
            padding: 0.7em 1.4em;
            border-radius: 1.2em;
            border: none;
            background: var(--fursvp-footer-btn-bg);
            color: var(--fursvp-accent);
            font-weight: 600;
            font-size: 1.08rem;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.07);
            transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
            margin: 0.3em 0.4em 0.3em 0;
            outline: none;
            cursor: pointer;
            text-decoration: none;
        }

        .footer-btn-modern:hover,
        .footer-btn-modern:focus-visible {
            background: #2563eb;
            color: #fff;
            box-shadow: 0 4px 18px rgba(59, 130, 246, 0.13);
            transform: translateY(-2px) scale(1.04);
            text-decoration: none;
        }

        .footer-btn-modern i,
        .footer-btn-modern .material-icons {
            font-size: 1.25em;
            vertical-align: middle;
        }

        .footer-meta {
            color: var(--fursvp-footer-text) !important;
            font-size: 1.13rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 0.2em;
            letter-spacing: 0.01em;
        }

        .footer-meta .footer-copyright {
            font-weight: 600;
            font-size: 1.09em;
            color: var(--fursvp-footer-text);
            margin-bottom: 0.2em;
            display: block;
        }

        .footer-meta .footer-madeby,
        .footer-meta .footer-credit {
            font-weight: 400;
            font-size: 1.04em;
            color: var(--fursvp-footer-text-muted);
            margin-top: 0.2em;
            letter-spacing: 0.01em;
            display: block;
        }

        .footer-meta .footer-credit a {
            color: #29486d;
            font-weight: 600;
            text-decoration: none;
        }

        .footer-meta .footer-credit a:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }

        .footer-meta .footer-heart {
            color: var(--fursvp-footer-text-muted);
            font-size: 1.2em;
            vertical-align: middle;
            margin: 0 0.18em;
        }

        .footer-fork {
            display: block;
            margin-top: 0.35rem;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--fursvp-footer-text-muted);
        }

        .footer-fork a {
            color: inherit;
            font-weight: 600;
        }

        .footer-version {
            margin-top: 0.5rem;
            font-size: 1.125rem;
            font-weight: 500;
            color: var(--fursvp-footer-text-muted);
        }

        .footer-version a {
            color: var(--fursvp-footer-text-muted);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .footer-version a:hover {
            color: #2563eb;
        }

        .footer-version .material-icons {
            font-size: 1rem;
            vertical-align: middle;
        }

        @media (max-width: 768px) {
            .gradient-footer,
            .site-footer {
                border-radius: 0;
                padding: 1.5rem 0.5rem 1rem 0.5rem;
                margin-bottom: 0;
            }

            .footer-btn-modern {
                padding: 0.4em 0.8em;
                font-size: 0.8rem;
                margin: 0.2em 0.2em 0.2em 0;
                gap: 0.3em;
            }

            .footer-btn-modern i,
            .footer-btn-modern .material-icons {
                font-size: 1em;
            }
        }

        /* --- Enhanced Modern Topnav --- */
        .modern-topnav {
            background: var(--fursvp-header);
            box-shadow: 0 2px 12px rgba(59, 130, 246, 0.07);
            padding: 1.1rem 0 1.1rem 0;
            display: flex;
            justify-content: center;
            gap: 2.5rem;
            border-bottom-left-radius: 1.5rem;
            border-bottom-right-radius: 1.5rem;
            margin-bottom: 1.5rem;
            border: none;
        }

        .modern-topnav .nav-content {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .modern-topnav .nav-menu {
            display: flex;
            gap: 2.2rem;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .modern-topnav .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
            font-size: 1.13rem;
            font-weight: 700;
            color: var(--fursvp-text-on-header) !important;
            background: var(--fursvp-surface-muted);
            border: none;
            border-radius: 2em;
            padding: 0.7em 1.7em;
            transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
            text-decoration: none;
            outline: none;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.07);
            position: relative;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .modern-topnav .nav-link:hover {
            background: #2563eb !important;
            color: #fff !important;
            box-shadow: 0 4px 18px rgba(59, 130, 246, 0.13);
            transform: translateY(-1px);
            text-decoration: none !important;
        }

        .modern-topnav .nav-link.active {
            background: #2563eb !important;
            color: #fff !important;
            box-shadow: 0 4px 18px rgba(59, 130, 246, 0.13);
            transform: none;
            text-decoration: none !important;
        }

        .modern-topnav .nav-link .material-icons {
            font-size: 1.25em;
            vertical-align: middle;
            margin-right: 0.4em;
            color: inherit;
        }

        .modern-topnav .nav-link:hover .material-icons,
        .modern-topnav .nav-link.active .material-icons {
            color: #fff !important;
        }

        @media (max-width: 900px) {
            .modern-topnav .nav-menu {
                gap: 1.1rem;
            }

            .modern-topnav .nav-link {
                padding: 0.6em 1.1em;
                font-size: 1rem;
            }
        }

        @media (max-width: 600px) {
            .modern-topnav {
                flex-direction: column;
                gap: 0.5rem;
                padding: 0.7rem 0;
                border-radius: 0;
            }

            .modern-topnav .nav-link {
                width: 100%;
                justify-content: center;
                padding: 0.7em 0;
                font-size: 0.98rem;
            }

            .modern-topnav .nav-menu {
                width: 100%;
                gap: 0.5rem;
            }
        }

        /* Modern Group Selector Modal Styles */
        .modern-modal-dialog {
            max-width: 500px;
        }

        .modern-modal-content {
            background: var(--fursvp-surface);
            border: none;
            border-radius: 2rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }

        .modern-modal-header {
            background: #2563eb;
            color: #fff;
            border: none;
            padding: 1.5rem 2rem;
            position: relative;
        }

        .modern-modal-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(37, 99, 235, 0.08);
            pointer-events: none;
        }

        .modern-modal-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .modern-modal-title .material-icons {
            font-size: 1.8rem;
            margin-right: 0.75rem;
        }

        .modern-btn-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: all 0.2s ease;
            position: relative;
            z-index: 1;
        }

        .modern-btn-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .modern-btn-close .material-icons {
            font-size: 1.2rem;
        }

        .modern-modal-body {
            padding: 2rem;
            background: var(--fursvp-surface);
        }

        .group-section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 2px solid var(--fursvp-border);
        }

        .group-section-title .material-icons {
            font-size: 1.3rem;
            color: #2563eb;
        }

        .modern-group-item {
            background: var(--fursvp-surface);
            border: 2px solid var(--fursvp-border);
            border-radius: 1.5rem;
            transition: all 0.3s ease;
            color: #374151;
            text-decoration: none;
            display: block;
            margin-bottom: 1rem;
            overflow: hidden;
            position: relative;
        }

        .modern-group-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #2563eb;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 0;
        }

        .modern-group-item:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
            border-color: #2563eb;
            color: #fff;
            text-decoration: none;
        }

        .modern-group-item:hover::before {
            opacity: 1;
        }

        .group-item-content {
            display: flex;
            align-items: center;
            padding: 1.25rem 1.5rem;
            position: relative;
            z-index: 1;
        }

        .group-icon {
            width: 56px;
            height: 56px;
            background: #eef2ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2563eb;
            margin-right: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
        }

        .modern-group-item:hover .group-icon {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            transform: scale(1.1);
        }

        .group-icon .material-icons {
            font-size: 1.5rem;
        }

        .group-info {
            flex: 1;
        }

        .group-name {
            font-size: 1.1rem;
            font-weight: 700;
            margin: 0 0 0.25rem 0;
            color: inherit;
        }

        .group-role {
            font-size: 0.875rem;
            font-weight: 500;
            color: #6b7280;
            display: block;
            transition: color 0.3s ease;
        }

        .modern-group-item:hover .group-role {
            color: rgba(255, 255, 255, 0.8);
        }

        .group-arrow {
            color: #9ca3af;
            transition: all 0.3s ease;
        }

        .modern-group-item:hover .group-arrow {
            color: #fff;
            transform: translateX(4px);
        }

        .group-arrow .material-icons {
            font-size: 1.2rem;
        }

        /* Mobile responsive */
        @media (max-width: 600px) {
            .modern-modal-dialog {
                margin: 1rem;
                max-width: calc(100vw - 2rem);
            }

            .modern-modal-header {
                padding: 1.25rem 1.5rem;
            }

            .modern-modal-title {
                font-size: 1.25rem;
            }

            .modern-modal-body {
                padding: 1.5rem;
            }

            .group-item-content {
                padding: 1rem 1.25rem;
            }

            .group-icon {
                width: 48px;
                height: 48px;
            }

            .group-icon .material-icons {
                font-size: 1.25rem;
            }

            .group-name {
                font-size: 1rem;
            }
        }


        /* Dark mode: footer & topnav */
        .dark-mode .gradient-footer,
        .dark-mode .site-footer {
            background: var(--fursvp-header) !important;
            color: var(--fursvp-text-on-header) !important;
        }

        .dark-mode .footer-meta,
        .dark-mode .footer-meta *,
        .dark-mode .footer-meta .footer-copyright,
        .dark-mode .footer-meta .footer-madeby,
        .dark-mode .footer-meta .footer-credit,
        .dark-mode .footer-meta .footer-credit a,
        .dark-mode .footer-meta .footer-heart,
        .dark-mode .footer-version,
        .dark-mode .footer-version a {
            color: var(--fursvp-footer-text) !important;
        }

        .dark-mode .footer-btn-modern {
            background: var(--fursvp-footer-btn-bg) !important;
            color: var(--fursvp-text-on-header) !important;
        }

        .dark-mode .footer-btn-modern:hover,
        .dark-mode .footer-btn-modern:focus-visible {
            background: var(--fursvp-accent) !important;
            color: var(--fursvp-text-on-primary) !important;
        }

        .dark-mode .footer-version a:hover {
            color: var(--fursvp-link) !important;
        }

        .dark-mode .modern-topnav {
            background: var(--fursvp-header) !important;
            box-shadow: 0 2px 12px rgba(59, 130, 246, 0.13);
        }

        .dark-mode .modern-topnav .nav-link {
            background: var(--fursvp-surface-muted) !important;
            color: var(--fursvp-text-secondary) !important;
            border: 1.5px solid var(--fursvp-border) !important;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.10);
        }

        .dark-mode .modern-topnav .nav-link .material-icons {
            color: var(--fursvp-text-secondary) !important;
        }

        .dark-mode .modern-topnav .nav-link:hover,
        .dark-mode .modern-topnav .nav-link.active {
            background: var(--fursvp-accent) !important;
            color: var(--fursvp-text-on-primary) !important;
            box-shadow: 0 4px 18px rgba(59, 130, 246, 0.18);
            border-color: var(--fursvp-accent) !important;
        }

        .dark-mode .modern-topnav .nav-link:hover .material-icons,
        .dark-mode .modern-topnav .nav-link.active .material-icons {
            color: var(--fursvp-text-on-primary) !important;
        }

        .dark-mode .notification-bell-icon,
        .dark-mode .user-profile-icon,
        .dark-mode .logout-btn,
        .dark-mode .group-access-icon {
            background: var(--fursvp-accent) !important;
            color: var(--fursvp-text-secondary) !important;
            border: 2px solid #22335a !important;
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.18);
        }

        .dark-mode .notification-bell-icon.has-unread {
            border-color: var(--fursvp-accent) !important;
        }

        .dark-mode .notification-bell-icon .material-icons,
        .dark-mode .user-profile-icon .material-icons,
        .dark-mode .group-access-icon .material-icons {
            color: var(--fursvp-text-on-primary) !important;
            font-size: 2.3rem !important;
            text-shadow: 0 2px 8px rgba(59, 130, 246, 0.18);
        }

        .dark-mode .logout-btn .material-icons {
            color: #ff6b6b !important;
            font-size: 2.3rem !important;
            text-shadow: 0 2px 8px rgba(220, 53, 69, 0.18);
        }

        .dark-mode .unread-notifications-badge {
            background: var(--fursvp-danger-hover) !important;
            color: var(--fursvp-text-on-primary) !important;
            border: 2px solid var(--fursvp-text-on-primary) !important;
        }

        /* Dark mode: group selector modal */
        .dark-mode .modern-modal-content,
        .dark-mode .modern-modal-body {
            background: var(--fursvp-header);
        }

        .dark-mode .modern-modal-header {
            background: #1e40af;
        }

        .dark-mode .group-section-title {
            color: var(--fursvp-text-secondary);
            border-bottom-color: var(--fursvp-border);
        }

        .dark-mode .group-section-title .material-icons {
            color: var(--fursvp-link);
        }

        .dark-mode .modern-group-item {
            background: var(--fursvp-surface-muted);
            border-color: var(--fursvp-border);
            color: var(--fursvp-text-secondary);
        }

        .dark-mode .group-icon {
            background: var(--fursvp-surface-muted);
            color: var(--fursvp-link);
        }

        .dark-mode .group-role {
            color: var(--fursvp-text-muted);
        }

        .dark-mode .group-arrow {
            color: var(--fursvp-text-muted);
        }

        /* Dark mode: site banner */
        .dark-mode .site-banner.alert-info {
            background: #4f46e5 !important;
            color: var(--fursvp-text-on-primary) !important;
            border-bottom: 3px solid #5a67d8 !important;
        }

        .dark-mode .site-banner.alert-warning {
            background: #d97706 !important;
            color: var(--fursvp-text-on-primary) !important;
            border-bottom: 3px solid #d69e2e !important;
        }

        .dark-mode .site-banner.alert-success {
            background: #059669 !important;
            color: var(--fursvp-text-on-primary) !important;
            border-bottom: 3px solid #38a169 !important;
        }

        .dark-mode .site-banner.alert-danger {
            background: #dc2626 !important;
            color: var(--fursvp-text-on-primary) !important;
            border-bottom: 3px solid #c53030 !important;
        }


        /* Site Banner Styles */
        .site-banner {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            font-weight: 600;
            font-size: 1.1rem;
            border: none;
            border-radius: 0;
            padding: 1rem 0;
        }

        .site-banner .btn-close {
            width: 1.5rem;
            height: 1.5rem;
            min-width: 1.5rem;
            min-height: 1.5rem;
            padding: 0;
            background: none;
            border: none;
            border-radius: 0;
            opacity: 0.7;
            box-shadow: none;
            filter: none;
        }
        .site-banner .btn-close:hover {
            opacity: 1;
            background: none;
        }

        .site-banner.alert-info {
            background: #6366f1;
            color: #fff;
            border-bottom: 3px solid #5a67d8;
        }

        .site-banner.alert-warning {
            background: #fbbf24;
            color: #fff;
            border-bottom: 3px solid #d69e2e;
        }

        .site-banner.alert-success {
            background: #10b981;
            color: #fff;
            border-bottom: 3px solid #38a169;
        }

        .site-banner.alert-danger {
            background: #ef4444;
            color: #fff;
            border-bottom: 3px solid #e53e3e;
        }

        .site-banner .material-icons {
            font-size: 1.4rem;
            margin-right: 0.75rem;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        .site-banner span {
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            letter-spacing: 0.02em;
        }

        @media (max-width: 768px) {
            .site-banner {
                font-size: 0.9rem;
                padding: 0.5rem 0;
            }
            
            .site-banner .material-icons {
                font-size: 1rem;
                margin-right: 0.3rem;
            }
            
            .site-banner .banner-text {
                font-size: 0.9rem;
                font-weight: 500;
            }
            
            .site-banner .container {
                min-height: 1.8rem !important;
            }
        }

        .banner-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 4rem;
            z-index: 1050;
            background: var(--fursvp-header);
        }

        .site-banner .banner-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .site-banner .banner-icon.left {
            margin-right: 0.5rem;
        }
        .site-banner .banner-icon.right {
            margin-left: 0.5rem;
        }
        .site-banner .banner-close {
            height: 2.5rem;
            width: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .site-banner .banner-text {
            flex: 1;
            text-align: center;
            font-size: 1.1rem;
            font-weight: 600;
        }
        .site-banner .banner-icon.right {
            margin: 0 1.3rem;
        }
        .site-banner .btn-close {
            height: 1.5rem;
            width: 1.5rem;
            min-width: 1.5rem;
            min-height: 1.5rem;
            padding: 0;
            background: none;
            border: none;
            box-shadow: none;
        }

html,
        body {
            font-family: 'Baloo 2', Arial, sans-serif !important;
        }

        @media (max-width: 768px) {
            .mobile-header {
                padding: 0.35rem 0.75rem;
                padding-top: env(safe-area-inset-top, 0px);
                background: var(--fursvp-surface);
            }

            .mobile-bottom-nav .nav-link span {
                white-space: normal;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .footer,
            .gradient-footer,
            .site-footer {
                margin-bottom: 0;
                border-radius: 0;
            }

            input,
            select,
            textarea,
            .form-control,
            .form-select,
            .auth-input-group .form-control,
            .auth-input-group .form-select,
            .ts-control > input {
                font-size: 16px !important;
            }

            .auth-btn,
            .auth-btn-secondary,
            .profile-btn-primary,
            .profile-btn-danger,
            .admin-search-submit,
            .btn:not(.btn-close):not(.btn-sm) {
                min-height: 44px;
            }

            .auth-glass-card,
            .profile-section-card,
            .profile-page-card {
                padding: 1.15rem;
                margin-bottom: 1rem;
            }

            .table {
                display: block;
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .site-banner {
                padding: 0.65rem 2.75rem;
            }

            .site-banner .banner-text {
                white-space: normal;
                line-height: 1.35;
            }

            .site-banner .banner-close,
            .site-banner .btn-close {
                width: 44px;
                height: 44px;
                min-width: 44px;
                min-height: 44px;
            }

            .modern-modal-dialog {
                margin: 0.75rem;
                max-width: calc(100vw - 1.5rem);
            }

            .modern-modal-content {
                border-radius: 1rem;
            }

            .dropdown-menu.notifications-dropdown {
                min-width: calc(100vw - 1.5rem);
                max-width: calc(100vw - 1.5rem);
            }
        }