@media (prefers-color-scheme: dark) {

    /* ================================================
     * 1. FLOATING DOCK
     * ================================================ */

    .dock-item span,
    .dock-item i {
        color: rgba(255, 255, 255, 0.5) !important;
    }


    /* ================================================
     * 2. DASHBOARD
     * ================================================ */

    .hero-title a {
        color: rgba(242, 225, 255, 0.8);
        font-weight: 600;
        text-decoration: none;
    }

    .dash-visitor__avatar {
        background: rgba(115, 61, 169, 0.5);
        color: rgba(255, 255, 255, 0.5);
    }

    .dash-card {
        border: 1px solid var(--border) !important;
    }

    .dash-card__link {
        color: rgba(242, 225, 255, 0.8) !important;
    }

    .view-all-btn {
        font-size: 0.8rem;
        padding: 3px 6px;
        border-radius: var(--radius-sm);
        background: rgba(75, 75, 75, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .view-all-btn:hover {
        background: rgba(112, 112, 112, 0.6) !important;
        color: rgba(255, 255, 255, 1) !important;
        transform: translateY(-2px);
    }

    .dash-action-btn__label {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .dash-completeness-bar__track {
        background: rgba(0, 0, 0, 1) !important;
    }

    .dash-completeness-bar__fill {
        background: rgba(102, 184, 89, 0.5) !important;
    }

    .dash-status-widget {
        background: rgba(0, 0, 0, 0.6);
        border-color: rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-sm);
    }

    .action-grid > .action-tile:nth-child(1) {
        background-color: rgba(247, 192, 255, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .action-grid > .action-tile:nth-child(2) {
        background-color: rgba(192, 220, 255, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .action-grid > .action-tile:nth-child(3) {
        color: #fff !important;
        background-color: rgba(255, 233, 190, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .action-grid > .action-tile:nth-child(4) {
        background-color: rgba(255, 192, 206, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .dash-stats a:nth-child(1),
    .dash-stats a:nth-child(2),
    .dash-stats a:nth-child(3),
    .dash-stats a:nth-child(4) {
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
    }

    .dash-stat__trend {
        background-color: rgba(141, 236, 132, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(46, 125, 50, 0.1) !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }


    /* ================================================
     * 3. MEMBER BROWSE
     * ================================================ */

    .member-card__body {
        background: var(--container-panel) !important;
    }

    .member-card__name,
    .member-card__age {
        font-weight: 400;
        color: var(--text);
        opacity: 0.8;
    }


    /* ================================================
     * 4. MEMBER PROFILE
     * ================================================ */

    .meta-pill {
        background: #3e3e3e;
        color: rgba(255, 255, 255, 0.6);
        border: 1px solid var(--border);
    }

    .profile-section-block__title {
        color: rgba(255, 255, 255, 0.861) !important;
    }

    .profile-details-grid__item dt {
        color: rgb(210, 199, 216) !important;
    }

    .profile-details-grid__item dd {
        color: rgb(185, 185, 185) !important;
    }

    .btn--profile-action{
        background: rgba(82, 70, 94, 0.9) !important;
        border: 1px solid var(--border) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }


    /* ================================================
     * 5. NOTIFICATIONS & FEED
     * ================================================ */

        .notification-row__text{
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .notification-row__text a {
            font-weight: 500 !important;
            font-style:normal !important;
            color: var(--primary) !important;
        }

    /* ================================================
     * 6. MESSAGES & INBOX
     * ================================================ */

    .inbox-row--unread,
    .notification-row-unread {
        background: var(--container-panel-unread) !important;
        border: 1px solid var(--container-panel-border) !important;
    }

    .inbox-row--unread:hover,
    .notification-row-unread:hover {
        background: var(--container-panel-unread-hover) !important;
        border: 1px solid var(--container-panel-border) !important;
    }

    .inbox-row:hover,
    .notification-row:hover,
    .feed-item:hover {
        background: var(--container-panel-hover) !important;
        border: 1px solid var(--container-panel-border) !important;
    }

    .inbox-row__delete {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 1.4rem;
    }

    .inbox-row__name {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .inbox-avatar {
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
    }

    .inbox-row__preview {
        color: rgba(239, 238, 255, 0.5);
    }

    .inbox-icon-btn,
    .chat-header__menu-btn {
        background: rgba(82, 70, 94, 0.9) !important;
        border: 1px solid var(--border) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .inbox-icon-btn:hover,
    .chat-header__menu-btn:hover {
        background: rgba(104, 90, 118, 0.9) !important;
        border: 1px solid var(--container-panel-border);
    }

    .chat-header,
    .settings-card__header {
        background: rgb(24, 24, 24) !important;
        border-bottom: 1px solid var(--container-panel-border) !important;
    }

    .settings-card__header h2{
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .chat-thread {
        background: rgb(28, 28, 28) !important;
        border: 1px solid var(--container-panel-border) !important;
    }

    .chat-compose {
        background: var(--container-panel) !important;
        border: 1px solid var(--container-panel-border) !important;
    }

    .chat-emoji-bar {
        background: var(--container-panel); !important;
        border: none;
    }

    /* Received message bubble — blue */
    .chat-msg--theirs .chat-msg__bubble {
        background: rgba(50, 68, 97, 0.938);
        color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-bottom-left-radius: 2px;
    }

    /* Sent message bubble — green */
    .chat-msg--mine .chat-msg__bubble {
        background: rgba(53, 73, 39, 0.7);
        color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-bottom-right-radius: 2px;
    }

    .chat-quote {
        background: rgba(255, 255, 255, 0.2) !important;
        border-left: 3px solid rgba(255, 255, 255, 0.5);
    }

    .chat-msg--mine .chat-quote {
        background: rgba(255, 255, 255, 0.2);
    }

    .chat-date-sep {
        color: var(--text);
    }

    .chat-date-sep span {
        color: rgb(255, 255, 255) !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }

    .chat-header__dropdown,
    .inbox-more-dropdown__item {
        background: rgba(82, 70, 94, 0.9) !important;
        border: 1px solid var(--border) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.584);
    }

    .chat-header__dropdown-item:hover,
     .inbox-more-dropdown__item:hover {
        background: rgba(89, 88, 108, 0.9) !important;
    }


    /* ================================================
     * 7. NAVIGATION
     * ================================================ */

    .admin-subnav,
    .admin-subnav__dropdown,
    .admin-subnav__trigger,
    .admin-subnav__menu {
        background: rgb(95, 25, 25) !important;
        border-bottom: 1px solid var(--container-panel-border) !important;
    }


    /* ================================================
     * 8. UTILITIES
     * ================================================ */

    .flash-success {
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        background: rgb(69, 98, 66);
    }

    .flash-error {
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.8) !important;
        background: rgb(143, 50, 50);
    }

    input:focus,textarea:focus,select:focus { 
    outline: none;  
    background-color: rgba(65, 62, 88, 0.6); 
    box-shadow: 0 0 0 1px var(--input-focus-ring);
}

input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],input[type="search"],input[type="date"],textarea,select {
  width: 100%; display: block; box-sizing: border-box;
  padding: 0.85rem 1rem; min-height: 48px;
  border: 1px solid var(--container-panel-border) !important; 
  border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; line-height: 1.5;
  appearance: none; -webkit-appearance: none;
  background-color: rgb(60, 60, 60); color: var(--input-text);
}

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: rgba(31, 31, 31, 0.838); }
    ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #2d2d2d inset !important;
    -webkit-text-fill-color: #e8e4e0 !important;
    caret-color: #e8e4e0;
}

.toggle-switch__slider { position: absolute; inset: 0; background: rgba(56, 56, 56, 0.9); border-radius: var(--radius-pill); transition: background 0.2s; }
.toggle-switch__slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #1d1d1d; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-switch__slider { background: var(--glass-chip-color); }

}