:root {
            --member-female-bg: linear-gradient(180deg, rgba(255,244,248,.98), rgba(255,237,244,.96));
            --member-female-border: rgba(244,114,182,.20);
            --member-female-shadow: 0 12px 24px rgba(244,114,182,.08);
            --member-female-highlight: linear-gradient(135deg, rgba(253,242,248,.72), rgba(244,114,182,.26));
            --member-female-avatar-start: #f9a8d4;
            --member-female-avatar-end: #ec4899;
            --member-gender-female-bg: rgba(244,114,182,.10);
            --member-gender-female-border: rgba(244,114,182,.22);
            --member-gender-female-text: #db2777;
            --member-gender-male-bg: rgba(59,130,246,.10);
            --member-gender-male-border: rgba(59,130,246,.18);
            --member-gender-male-text: #2563eb;
            --admin-card-overlay-image: none;
        }
        body.dark {
            --member-female-bg: linear-gradient(180deg, rgba(72,31,53,.96), rgba(54,24,45,.98));
            --member-female-border: rgba(244,114,182,.24);
            --member-female-shadow: 0 14px 28px rgba(236,72,153,.12);
            --member-female-highlight: linear-gradient(135deg, rgba(190,24,93,.28), rgba(244,114,182,.16));
            --member-female-avatar-start: #f472b6;
            --member-female-avatar-end: #be185d;
            --member-gender-female-bg: rgba(244,114,182,.16);
            --member-gender-female-border: rgba(244,114,182,.28);
            --member-gender-female-text: #f9a8d4;
            --member-gender-male-bg: rgba(59,130,246,.16);
            --member-gender-male-border: rgba(96,165,250,.24);
            --member-gender-male-text: #93c5fd;
            --scrollbar-track: rgba(71,85,105,.34);
            --scrollbar-thumb: rgba(var(--accent-rgb), .34);
            --scrollbar-thumb-hover: rgba(var(--accent-rgb), .52);
            --scrollbar-thumb-active: rgba(var(--accent-rgb), .66);
        }

        .login-gender-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 0 0 188px;
            min-width: 168px;
        }
        .login-gender-label {
            display: block;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .login-gender-options {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }
        .login-gender-option {
            position: relative;
            flex: 1 1 0;
            min-width: 0;
            cursor: pointer;
        }
        .login-gender-option input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }
        .login-gender-option span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 48px;
            padding: 0 16px;
            border-radius: var(--radius-pill);
            border: 1px solid var(--border-light);
            background: var(--input-bg);
            color: var(--text-primary);
            font-weight: 700;
            box-shadow: 0 8px 18px rgba(15,23,42,.05);
            transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
        }
        .login-gender-option input:focus + span {
            box-shadow: 0 0 0 4px rgba(59,130,246,.12), 0 8px 18px rgba(15,23,42,.05);
        }
        .login-gender-option.male input:checked + span {
            color: #1d4ed8;
            border-color: rgba(59,130,246,.32);
            background: rgba(59,130,246,.12);
        }
        .login-gender-option.female input:checked + span {
            color: #db2777;
            border-color: rgba(244,114,182,.34);
            background: rgba(244,114,182,.12);
        }
        body.dark .login-gender-option span {
            box-shadow: 0 10px 18px rgba(0,0,0,.14);
        }
        body.dark .login-gender-option.male input:checked + span {
            color: #93c5fd;
            border-color: rgba(96,165,250,.34);
            background: rgba(59,130,246,.18);
        }
        body.dark .login-gender-option.female input:checked + span {
            color: #f9a8d4;
            border-color: rgba(244,114,182,.34);
            background: rgba(244,114,182,.18);
        }

        .room-grid-layout {
            align-items: stretch;
        }
        .room-grid-layout > .members-area {
            display: flex;
            flex-direction: column;
            min-height: var(--room-panel-base-height);
        }
        .room-members-panel,
        #room-chat-panel {
            min-height: var(--room-panel-base-height);
            height: 100%;
        }
        .member-list,
        .room-members-panel .member-list {
            max-height: none;
            overflow: visible;
        }
        .room-members-panel .member-list {
            flex: 0 0 auto;
            padding-right: 0;
        }
        #room-chat-panel {
            align-self: stretch;
            display: flex;
            flex-direction: column;
        }
        #room-chat-messages {
            flex: 1 1 0;
            min-height: 0;
            height: auto;
            max-height: none;
        }

        .member-avatar {
            border-radius: 50%;
        }
        .member-gender-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: max-content;
            width: max-content;
            max-width: 100%;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.74rem;
            font-weight: 800;
            line-height: 1.2;
            white-space: nowrap;
            border: 1px solid transparent;
        }
        .member-gender-badge.male {
            background: var(--member-gender-male-bg);
            border-color: var(--member-gender-male-border);
            color: var(--member-gender-male-text);
        }
        .member-gender-badge.female {
            background: var(--member-gender-female-bg);
            border-color: var(--member-gender-female-border);
            color: var(--member-gender-female-text);
        }

        .room-members-panel .member-list li.member-female {
            background: var(--member-female-bg);
            border-color: var(--member-female-border);
            box-shadow: var(--member-female-shadow);
        }
        .room-members-panel .member-list li.member-female::after {
            background: var(--member-female-highlight);
            opacity: calc(var(--speak-level, 0) * 0.80);
        }
        .room-members-panel .member-list li.member-female.speaking {
            --speaking-ring: rgba(244,114,182,.10);
            --speaking-ring-strong: rgba(244,114,182,.18);
            --speaking-shadow: rgba(244,114,182,.08);
            --speaking-shadow-strong: rgba(244,114,182,.14);
            --speaking-glow-soft: rgba(244,114,182,.12);
            --speaking-glow: rgba(244,114,182,.18);
            border-color: rgba(244,114,182,.34);
            box-shadow: 0 0 0 1px rgba(244,114,182,.10) inset, 0 12px 24px rgba(244,114,182,.08), 0 0 12px rgba(244,114,182,.08);
        }
        body.dark .room-members-panel .member-list li.member-female.speaking {
            --speaking-ring: rgba(244,114,182,.12);
            --speaking-ring-strong: rgba(244,114,182,.20);
            --speaking-shadow: rgba(190,24,93,.14);
            --speaking-shadow-strong: rgba(190,24,93,.20);
            --speaking-glow-soft: rgba(244,114,182,.16);
            --speaking-glow: rgba(244,114,182,.24);
            border-color: rgba(244,114,182,.32);
            box-shadow: 0 0 0 1px rgba(244,114,182,.12) inset, 0 14px 28px rgba(190,24,93,.16), 0 0 16px rgba(244,114,182,.10);
        }
        .room-members-panel .member-list li.member-female .member-avatar {
            background: linear-gradient(135deg, var(--member-female-avatar-start), var(--member-female-avatar-end));
            box-shadow: 0 10px 20px rgba(236,72,153,.16);
        }
        body.dark .room-members-panel .member-list li.member-female .member-avatar {
            box-shadow: 0 12px 24px rgba(190,24,93,.24);
        }

        .room-members-panel .member-list li.member-admin-card {
            isolation: isolate;
        }

        .room-members-panel .member-list li.member-admin-card .member-admin-card-media {
            position: absolute;
            inset: 0;
            z-index: 0;
            display: none;
            pointer-events: none;
            border-radius: inherit;
            overflow: hidden;
            opacity: .18;
            contain: paint;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        body.admin-card-overlay-ready .room-members-panel .member-list li.member-admin-card .member-admin-card-media {
            display: block;
        }

        .room-members-panel .member-list li.member-admin-card .member-admin-card-media::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(37,99,235,.06));
        }

        .room-members-panel .member-list li.member-admin-card .member-admin-card-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translateZ(0);
            backface-visibility: hidden;
            user-select: none;
            -webkit-user-drag: none;
        }

        body.dark .room-members-panel .member-list li.member-admin-card .member-admin-card-media {
            opacity: .24;
        }

        body.dark .room-members-panel .member-list li.member-admin-card .member-admin-card-media::before {
            background: linear-gradient(135deg, rgba(148,163,184,.10), rgba(30,64,175,.08));
        }

        @media (max-width: 980px) {
            #room-chat-panel {
                grid-template-rows: auto minmax(260px, 1fr) auto auto;
            }
            #room-chat-messages {
                min-height: 260px;
            }
        }
        @media (max-width: 820px) {
            .room-grid-layout {
                align-items: start;
            }
            .room-grid-layout > .members-area,
            .room-members-panel,
            #room-chat-panel {
                min-height: var(--room-panel-base-height-tablet);
                height: auto;
            }
            #room-chat-panel {
                grid-template-rows: auto minmax(280px, auto) auto auto;
            }
            #room-chat-messages {
                min-height: 280px;
            }
        }
        @media (max-width: 640px) {
            .room-grid-layout > .members-area,
            .room-members-panel,
            #room-chat-panel {
                min-height: var(--room-panel-base-height-mobile);
            }
            .login-gender-field {
                flex: 1 1 100%;
                min-width: 0;
                width: 100%;
            }
            #room-chat-panel {
                grid-template-rows: auto minmax(220px, auto) auto auto;
            }
            #room-chat-messages {
                min-height: 220px;
            }
        }
        #theme-reset-btn {
            white-space: nowrap;
            min-width: 84px;
            flex-shrink: 0;
        }