/*
 * 文件名/用途说明：public/meeting/styles.css，全部会议前端页面的共享视觉与响应式样式。
 * 核心功能简述：提供门户水墨令牌、入口与创建流程、准备间、深色会议工作台、后台浮层及多视口布局。
 * 作者：AI Assistant
 * 创建日期：2026-07-30
 */

* {
    box-sizing: border-box;
}

[hidden] {
    /* 会议页部分组件本身设置了 display，使用强约束确保运行态隐藏不会被组件样式覆盖。 */
    display: none !important;
}

body.meeting-page {
    min-height: 100vh;
    margin: 0;
    color: #1f2937;
    background: #f7f8fb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.meeting-shell {
    width: min(920px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 64px 0;
}

.meeting-shell.is-session-active {
    /* 入会后将可用宽度提升到 1280px，让主舞台真正获得比原双列宫格更大的阅读面积。 */
    width: min(1280px, calc(100% - 32px));
}

.meeting-panel,
.meeting-result {
    width: 100%;
    margin: 0 0 20px;
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.meeting-kicker {
    margin: 0 0 12px;
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
}

.meeting-panel h1,
.meeting-result h2 {
    margin: 0 0 20px;
    color: #111827;
    font-size: 28px;
    line-height: 1.2;
}

.meeting-result h2 {
    font-size: 20px;
}

.meeting-form {
    display: grid;
    gap: 16px;
    max-width: 520px;
}

.meeting-field {
    display: grid;
    gap: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

.meeting-field input,
.meeting-field textarea,
.meeting-link-row input,
.room-invite-row input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #111827;
    font-size: 15px;
}

.meeting-field textarea {
    min-height: 86px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.meeting-field select {
    text-indent: 12px;
}

.meeting-primary-button,
.meeting-secondary-button,
.meeting-danger-button,
.meeting-secondary-link {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.meeting-primary-button {
    color: #ffffff;
    background: #0f766e;
}

.meeting-secondary-button,
.meeting-secondary-link {
    display: inline-grid;
    place-items: center;
    color: #0f766e;
    background: #e6fffb;
    text-decoration: none;
}

.meeting-danger-button {
    color: #b42318;
    background: #fff1f0;
}

.meeting-feedback,
.meeting-copy {
    min-height: 22px;
    margin: 16px 0 0;
    color: #4b5563;
    font-size: 14px;
}

.meeting-feedback.is-error {
    color: #b42318;
}

.meeting-feedback.is-success {
    color: #067647;
}

.media-preview {
    display: grid;
    gap: 14px;
    max-width: 520px;
    margin: 0 0 20px;
}

.media-toolbar,
.media-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.media-feedback {
    margin-top: 0;
}

.room-live-status {
    color: #6b7280;
}

.room-live-status.is-error {
    color: #b42318;
}

.room-live-status.is-success {
    color: #067647;
}

.meeting-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.room-invite-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    max-width: 720px;
    margin: 0 0 22px;
    align-items: center;
}

.room-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}

.room-meta div {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.room-meta dt {
    margin: 0 0 6px;
    color: #6b7280;
    font-size: 13px;
}

.room-meta dd {
    margin: 0;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.room-session-header {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.room-session-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.participant-list {
    display: grid;
    align-content: start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.participant-list li {
    min-height: 58px;
    padding: 10px 10px 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    color: #111827;
    background: #f9fafb;
    font-size: 14px;
    font-weight: 700;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 0;
}

.remote-video-list {
    display: contents;
}

.video-tile {
    position: relative;
    min-width: 0;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #111827;
}

.video-tile[data-participant-id] {
    cursor: pointer;
}

.video-tile[data-participant-id]:focus-visible {
    /* 视频格本身是键盘切换主舞台的入口，使用高对比外轮廓且不依赖颜色填充表达焦点。 */
    outline: 3px solid #14b8a6;
    outline-offset: 3px;
}

.video-grid .video-tile {
    /* 统一比例可避免摄像头关闭、等待文案或昵称变化重新计算网格高度。 */
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.video-grid .video-tile video {
    min-height: 0;
}

.video-tile video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    background: #111827;
}

.video-tile[data-video-role="local"]:not(.is-screen-sharing) video {
    /* 本地摄像头按镜像预览展示，符合用户看自己时的直觉；屏幕共享必须排除，否则文字和界面会被反向。 */
    transform: scaleX(-1);
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 16px;
    color: #d1d5db;
    font-size: 14px;
    text-align: center;
    overflow-wrap: anywhere;
    background: #111827;
}

.video-placeholder.is-hidden {
    display: none;
}

.video-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 5px 8px;
    border-radius: 6px;
    color: #ffffff;
    background: rgba(17, 24, 39, 0.78);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    max-height: calc(100% - 20px);
    overflow: hidden;
    overflow-wrap: anywhere;
}

.video-view-actions {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.video-view-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 6px;
    color: #ffffff;
    background: rgba(17, 24, 39, 0.82);
    cursor: pointer;
}

.video-view-button:hover {
    background: rgba(17, 24, 39, 0.96);
}

.video-view-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.video-view-button img {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.video-grid.is-theater-mode {
    /* 缩略图列数由当前真实成员数决定，主舞台始终跨满全部列。 */
    grid-template-columns: repeat(var(--meeting-thumbnail-count, 1), minmax(0, 1fr));
    align-items: start;
}

.video-grid.is-theater-mode .remote-waiting-tile {
    display: none;
}

.video-grid.is-theater-mode .video-tile[data-participant-id] {
    width: 100%;
    max-width: 360px;
    min-height: 0;
    aspect-ratio: 16 / 9;
    justify-self: center;
}

.video-grid.is-theater-mode .video-tile[data-participant-id] video {
    min-height: 0;
}

.video-grid.is-theater-mode .video-tile.is-focused {
    order: -1;
    grid-column: 1 / -1;
    max-width: none;
}

.video-tile.is-fullscreen-active {
    /* 全屏元素脱离页面网格后必须独立占满屏幕，并用纯深色承接不同宽高比产生的留白。 */
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: #000000;
}

.video-tile.is-fullscreen-active video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #000000;
}

.video-tile.is-fullscreen-active .video-placeholder {
    background: #000000;
}

.view-mode-feedback {
    margin-top: 10px;
}

.media-controls {
    margin-top: 14px;
}

.screen-share-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.screen-share-controls legend {
    width: 100%;
    padding: 0;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
}

.share-mode-control {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

.share-mode-control label {
    position: relative;
    min-width: 126px;
    cursor: pointer;
}

.share-mode-control label + label {
    border-left: 1px solid #cbd5e1;
}

.share-mode-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.share-mode-control span {
    display: grid;
    min-height: 38px;
    padding: 0 12px;
    place-items: center;
    color: #475467;
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.share-mode-control input:checked + span {
    color: #ffffff;
    background: #0f766e;
}

.share-mode-control input:focus-visible + span {
    outline: 2px solid #0f766e;
    outline-offset: -2px;
}

.share-mode-control input:disabled + span,
.share-audio-control input:disabled + span {
    cursor: not-allowed;
    opacity: 0.55;
}

.share-audio-control {
    display: inline-flex;
    min-height: 38px;
    gap: 8px;
    align-items: center;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.share-audio-control input {
    width: 18px;
    height: 18px;
    accent-color: #0f766e;
}

.video-tile.is-screen-sharing video {
    object-fit: contain;
}

.peer-status,
.network-diagnostics {
    margin-top: 12px;
}

.network-diagnostics {
    color: #4b5563;
    font-size: 13px;
}

.network-diagnostics.is-success {
    color: #047857;
}

.network-diagnostics.is-error {
    color: #b91c1c;
}

.chat-panel {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

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

.chat-list {
    display: grid;
    max-height: 260px;
    min-height: 96px;
    margin: 0;
    padding: 0;
    gap: 8px;
    overflow-y: auto;
    list-style: none;
}

.chat-message {
    display: grid;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}

.chat-message.is-self {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.chat-message.is-system {
    border-color: #fde68a;
    background: #fffbeb;
}

.chat-message-meta {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

.chat-message-text {
    margin: 0;
    color: #111827;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.chat-field {
    gap: 6px;
}

.chat-feedback {
    min-height: 20px;
    margin-top: 0;
}

@media (max-width: 900px) {
    .meeting-shell {
        padding: 40px 0;
    }

    .meeting-panel,
    .meeting-result {
        padding: 24px;
    }

    .room-session-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .video-grid.is-theater-mode {
        /* 平板最多保留两列缩略图，第三名成员自然换行且主舞台仍跨满整行。 */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .video-grid.is-theater-mode .video-tile[data-participant-id] {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .meeting-shell {
        width: min(100% - 20px, 920px);
        padding: 24px 0;
    }

    .meeting-shell.is-session-active {
        width: min(100% - 20px, 1280px);
    }

    .meeting-panel,
    .meeting-result {
        padding: 20px;
    }

    .meeting-link-row,
    .room-invite-row,
    .room-meta,
    .room-session-header,
    .room-session-actions,
    .chat-form {
        grid-template-columns: 1fr;
    }

    .room-session-header,
    .room-session-actions {
        display: grid;
        width: 100%;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-grid.is-theater-mode {
        /* 手机端主舞台占满整行，缩略图保持两列以避免多人会议产生过长纵向滚动。 */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .video-grid.is-theater-mode .video-tile[data-participant-id] {
        max-width: none;
    }

    .video-view-actions {
        top: 8px;
        right: 8px;
        gap: 6px;
    }

    .video-view-button {
        width: 44px;
        height: 44px;
    }

    .video-label {
        left: 8px;
        bottom: 8px;
        max-width: calc(100% - 16px);
    }

    .screen-share-controls,
    .share-mode-control {
        width: 100%;
    }

    .share-mode-control label {
        min-width: 0;
    }
}

/* 清新薄荷视觉系统从这里开始覆盖旧 MVP 表单观感，保留原有会议网格与信令相关类名供脚本和测试稳定使用。 */
:root {
    --meeting-ink: #17332d; /* 主文字使用偏冷深绿，和薄荷背景形成足够对比。 */
    --meeting-muted: #5f716d; /* 次级文字降低存在感，避免页面变成说明文档。 */
    --meeting-border: #d7ebe4; /* 卡片边框使用低饱和薄荷色，保持轻盈但能分隔结构。 */
    --meeting-surface: #ffffff; /* 主操作区域保持白底，确保表单长期使用时可读。 */
    --meeting-surface-soft: #f7fffc; /* 次级区域比白色略带薄荷，避免纯白平铺。 */
    --meeting-primary: #12856f; /* 主按钮使用更深绿色，保证可点击性和对比度。 */
    --meeting-primary-strong: #0d695b; /* 悬停态加深，给桌面用户明确反馈。 */
    --meeting-primary-soft: #e3f8ef; /* 次级按钮背景用于低风险动作。 */
    --meeting-teal: #2fb9a3; /* 小面积渐变辅助色，来自清新薄荷方向。 */
    --meeting-sun: #f8c96b; /* 暖黄色只用于少量状态点缀，避免整体单一绿色。 */
    --meeting-coral: #e9695f; /* 危险和错误状态使用珊瑚红，和成功绿色清晰区分。 */
    --meeting-shadow: 0 18px 42px rgba(39, 107, 91, 0.12); /* 页面主阴影保持柔和，避免后台工具显得沉重。 */
    --meeting-shadow-soft: 0 10px 28px rgba(39, 107, 91, 0.08); /* 小组件阴影更弱，防止卡片层级过多。 */
}

body.meeting-page {
    letter-spacing: 0;
    color: var(--meeting-ink);
    background:
        linear-gradient(132deg, #effdf7 0%, #f7fffb 48%, #fff7df 100%);
}

.meeting-shell {
    width: min(1080px, calc(100% - 36px));
    padding: 28px 0;
}

.meeting-shell.is-session-active {
    width: min(1280px, calc(100% - 32px));
}

.meeting-panel,
.meeting-result {
    border-color: rgba(177, 220, 207, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--meeting-shadow-soft);
}

.meeting-panel h1,
.meeting-result h2,
.chat-header h3 {
    color: var(--meeting-ink);
}

.meeting-kicker {
    color: var(--meeting-primary);
    letter-spacing: 0;
}

.meeting-copy {
    color: var(--meeting-muted);
    line-height: 1.65;
}

.meeting-field {
    color: #2f4a44;
}

.meeting-field input,
.meeting-field textarea,
.meeting-field select,
.meeting-link-row input,
.room-invite-row input {
    border-color: var(--meeting-border);
    border-radius: 8px;
    color: var(--meeting-ink);
    background: #fbfffd;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.meeting-field input:focus,
.meeting-field textarea:focus,
.meeting-field select:focus,
.meeting-link-row input:focus,
.room-invite-row input:focus {
    border-color: var(--meeting-teal);
    outline: 0;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 185, 163, 0.16);
}

.meeting-field select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--meeting-primary) 50%),
        linear-gradient(135deg, var(--meeting-primary) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 18px,
        calc(100% - 12px) 18px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.meeting-primary-button,
.meeting-secondary-button,
.meeting-danger-button,
.meeting-secondary-link,
.meeting-primary-link {
    border-radius: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.meeting-primary-button,
.meeting-primary-link {
    display: inline-grid;
    min-height: 42px;
    padding: 0 16px;
    place-items: center;
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, var(--meeting-primary) 0%, var(--meeting-teal) 100%);
    box-shadow: 0 10px 22px rgba(18, 133, 111, 0.22);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.meeting-primary-button:hover,
.meeting-primary-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(18, 133, 111, 0.26);
}

.meeting-primary-button:disabled,
.meeting-secondary-button:disabled,
.meeting-danger-button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

.meeting-secondary-button,
.meeting-secondary-link {
    border: 1px solid rgba(127, 190, 173, 0.62);
    color: var(--meeting-primary);
    background: var(--meeting-primary-soft);
}

.meeting-secondary-button:hover,
.meeting-secondary-link:hover {
    background: #d6f3e8;
    transform: translateY(-1px);
}

.meeting-danger-button {
    color: #a33b35;
    background: #fff0ed;
}

.meeting-feedback.is-error,
.room-live-status.is-error,
.network-diagnostics.is-error {
    color: #b42318;
}

.meeting-feedback.is-success,
.room-live-status.is-success,
.network-diagnostics.is-success {
    color: #067647;
}

.meeting-topbar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.meeting-brand {
    display: inline-flex;
    min-width: 0;
    gap: 10px;
    align-items: center;
    color: var(--meeting-ink);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.meeting-brand-mark {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--meeting-primary) 0%, #66cfb4 100%);
    box-shadow: 0 8px 18px rgba(18, 133, 111, 0.18);
    font-size: 13px;
}

.meeting-page-entry .meeting-shell,
.meeting-page-admin-create .meeting-shell,
.meeting-page-room .meeting-room-shell {
    min-height: 100vh;
}

.meeting-entry-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.meeting-entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 40px;
    align-items: center;
    min-height: calc(100vh - 168px);
}

.meeting-entry-copy h1 {
    max-width: 520px;
    margin: 0 0 14px;
    color: var(--meeting-ink);
    font-size: 44px;
    line-height: 1.08;
}

.meeting-entry-summary {
    max-width: 520px;
    margin: 0;
    font-size: 17px;
}

.meeting-entry-card,
.meeting-create-card,
.meeting-create-result,
.meeting-unavailable-card,
.prejoin-lobby {
    position: relative;
    overflow: hidden;
    box-shadow: var(--meeting-shadow);
}

.meeting-entry-card::before,
.meeting-create-card::before,
.meeting-create-result::before,
.meeting-unavailable-card::before,
.prejoin-lobby::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--meeting-teal), var(--meeting-sun));
}

.meeting-entry-card .meeting-form {
    max-width: none;
}

.meeting-room-code-form {
    gap: 18px;
}

.meeting-admin-create-shell {
    width: min(1160px, calc(100% - 36px));
}

.meeting-admin-create-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.92fr) minmax(360px, 1.08fr);
    gap: 22px;
    align-items: start;
}

.meeting-create-card .meeting-form {
    max-width: none;
}

.meeting-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.meeting-option-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.meeting-option-group legend {
    grid-column: 1 / -1;
    margin: 0 0 -2px;
    color: #2f4a44;
    font-size: 14px;
    font-weight: 700;
}

.meeting-option-group label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.meeting-option-group input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.meeting-option-group span {
    display: grid;
    min-height: 42px;
    padding: 0 10px;
    place-items: center;
    border: 1px solid var(--meeting-border);
    border-radius: 8px;
    color: #42625a;
    background: #fbfffd;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.meeting-option-group input:checked + span {
    border-color: rgba(18, 133, 111, 0.44);
    color: var(--meeting-primary);
    background: #e5f8ef;
    box-shadow: inset 0 0 0 1px rgba(18, 133, 111, 0.14);
}

.meeting-option-group input:focus-visible + span {
    outline: 2px solid var(--meeting-teal);
    outline-offset: 2px;
}

.meeting-switch-field {
    display: inline-flex;
    min-height: 42px;
    gap: 10px;
    align-items: center;
    color: #2f4a44;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.meeting-switch-field input {
    width: 18px;
    height: 18px;
    accent-color: var(--meeting-primary);
}

.meeting-result-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.meeting-result-meta div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--meeting-border);
    border-radius: 8px;
    background: var(--meeting-surface-soft);
}

.meeting-result-meta dt {
    margin: 0 0 6px;
    color: var(--meeting-muted);
    font-size: 12px;
    font-weight: 700;
}

.meeting-result-meta dd {
    margin: 0;
    color: var(--meeting-ink);
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.meeting-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

.meeting-room-shell {
    width: min(1140px, calc(100% - 36px));
}

.meeting-lobby-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.meeting-lobby-header h1 {
    margin-bottom: 0;
}

.room-meta-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.room-meta-compact div,
.room-meta div {
    border-color: var(--meeting-border);
    background: var(--meeting-surface-soft);
}

.room-meta dt {
    color: var(--meeting-muted);
}

.room-meta dd {
    color: var(--meeting-ink);
}

.prejoin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 22px;
    align-items: start;
    margin-bottom: 18px;
}

/* 重复标签页提示是明确的阻断状态，不使用背景模糊或动画，避免提示本身引入持续合成开销。 */
.meeting-room-tab-lease-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid rgba(181, 98, 62, 0.42);
    border-radius: 6px;
    background: rgba(255, 247, 240, 0.96);
    color: var(--meeting-danger);
}

.meeting-room-tab-lease-notice[hidden] {
    display: none;
}

.meeting-room-tab-lease-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 680px) {
    .meeting-room-tab-lease-notice {
        align-items: stretch;
        flex-direction: column;
    }
}

.prejoin-preview {
    max-width: none;
    margin: 0;
}

.prejoin-video-tile {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-color: rgba(23, 51, 45, 0.14);
    background: #10231f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.prejoin-video-tile video {
    min-height: 0;
}

.prejoin-media-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prejoin-media-toolbar .meeting-secondary-button:first-child,
.prejoin-media-toolbar .meeting-secondary-button:last-child {
    grid-column: 1 / -1;
}

.prejoin-form-card {
    min-width: 0;
    padding: 4px 0 0;
}

.prejoin-form-card .meeting-form {
    max-width: none;
}

.meeting-prejoin-quality-mode {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.meeting-prejoin-quality-mode legend {
    margin-bottom: 8px;
    color: var(--meeting-ink);
    font-size: 14px;
    font-weight: 700;
}

.meeting-prejoin-quality-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.meeting-prejoin-quality-options .meeting-stage-view-button {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 8px;
}

.meeting-prejoin-quality-options .meeting-stage-view-button span {
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    .meeting-prejoin-quality-options {
        grid-template-columns: 1fr;
    }
}

.prejoin-blocker {
    min-height: 0;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #ffd5cf;
    border-radius: 8px;
    background: #fff5f2;
}

.room-invite-row {
    max-width: none;
    margin-bottom: 0;
    padding-top: 16px;
    border-top: 1px solid var(--meeting-border);
}

.meeting-unavailable-card {
    max-width: 560px;
    margin: 12vh auto 0;
}

.room-session {
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.is-room-session-active {
    background:
        linear-gradient(135deg, rgba(232, 253, 244, 0.94) 0%, rgba(248, 255, 252, 0.96) 46%, rgba(255, 249, 228, 0.88) 100%),
        #effdf7;
}

body.is-room-session-active .meeting-room-shell {
    width: min(1440px, calc(100% - 28px));
    padding: 14px 0;
}

.room-session-workspace {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100vh - 28px);
    min-height: 560px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(8, 27, 24, 0.9);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(18, 36, 32, 0.98), rgba(8, 16, 15, 0.98));
    box-shadow: 0 18px 44px rgba(16, 48, 42, 0.22);
}

.room-session-header {
    min-height: 68px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(206, 248, 237, 0.12);
}

.room-session-header h2 {
    margin: 0;
    color: #f5fffb;
    font-size: 22px;
    line-height: 1.2;
}

.room-session-header .meeting-kicker {
    margin-bottom: 6px;
    color: #7de0c7;
}

.room-session-header .meeting-copy {
    min-height: 18px;
    margin-top: 6px;
    color: #b9d8d0;
}

.room-session-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.room-session-actions .meeting-secondary-button,
.room-control-bar .meeting-secondary-button {
    min-height: 38px;
    border-color: rgba(173, 233, 219, 0.24);
    color: #d8fff4;
    background: rgba(216, 255, 244, 0.09);
}

.room-session-actions .meeting-secondary-button:hover,
.room-control-bar .meeting-secondary-button:hover,
.room-session-actions .meeting-secondary-button.is-active {
    color: #07352d;
    background: linear-gradient(135deg, #9df0d8, #f8d77a);
    box-shadow: 0 10px 22px rgba(68, 210, 177, 0.18);
}

.room-admin-trigger {
    border-color: rgba(248, 201, 107, 0.42) !important;
    color: #fff4d2 !important;
    background: rgba(248, 201, 107, 0.13) !important;
}

.room-admin-trigger.is-active,
.room-admin-trigger:hover {
    color: #17332d !important;
    background: linear-gradient(135deg, #c9f7e7, #f8c96b) !important;
}

.room-stage {
    display: grid;
    min-height: 0;
    padding: 14px 0;
}

.room-stage .video-grid {
    grid-auto-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    margin: 0;
    align-items: stretch;
}

.room-stage .video-grid .video-tile {
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
    border-color: rgba(255, 255, 255, 0.08);
    background: #08110f;
}

.room-stage .video-grid .video-tile video {
    min-height: 0;
}

.room-stage .video-placeholder {
    color: #b9d8d0;
    background:
        linear-gradient(135deg, rgba(13, 105, 91, 0.16), rgba(248, 201, 107, 0.08)),
        #08110f;
}

.room-control-bar {
    display: flex;
    min-height: 64px;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid rgba(206, 248, 237, 0.12);
    border-radius: 8px;
    background: rgba(5, 14, 13, 0.74);
}

.room-control-bar .media-controls {
    margin-top: 0;
}

.room-control-bar .meeting-danger-button {
    min-height: 40px;
    color: #ffe9e6;
    background: #b5473f;
}

.room-side-drawer {
    position: absolute;
    z-index: 8;
    top: 92px;
    right: 14px;
    bottom: 88px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(380px, calc(100% - 28px));
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(177, 220, 207, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 38px rgba(6, 25, 22, 0.24);
}

.room-drawer-header {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--meeting-border);
}

.room-drawer-header h3 {
    margin: 0;
    color: var(--meeting-ink);
    font-size: 18px;
    line-height: 1.2;
}

.room-side-drawer .meeting-secondary-button,
.room-side-drawer .meeting-danger-button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.room-side-drawer .meeting-secondary-button {
    border-color: rgba(127, 190, 173, 0.62);
    color: var(--meeting-primary);
    background: var(--meeting-primary-soft);
}

.room-side-drawer .meeting-danger-button {
    color: #a33b35;
    background: #fff0ed;
}

.room-drawer-panel {
    display: grid;
    align-content: start;
    min-height: 0;
    gap: 12px;
    padding-top: 12px;
    overflow-y: auto;
}

.room-drawer-panel.chat-panel {
    margin-top: 0;
    padding-top: 12px;
    border-top: 0;
}

.room-drawer-panel .chat-list {
    max-height: none;
    min-height: 180px;
}

.room-drawer-panel .chat-form {
    grid-template-columns: 1fr;
}

.room-admin-panel {
    gap: 12px;
}

.room-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.room-admin-actions .meeting-danger-button {
    grid-column: 1 / -1;
}

.meeting-admin-sensitive-output {
    display: grid;
    gap: 6px;
}

.meeting-admin-sensitive-output p {
    margin: 0;
}

.participant-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.participant-empty-line {
    justify-content: center;
    color: var(--meeting-muted) !important;
}

.participant-item-text {
    display: block;
    min-width: 0;
    color: #13232b;
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.participant-item-content {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.participant-item-meta {
    color: var(--meeting-muted);
    font-size: 12px;
    font-weight: normal;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.participant-audio-badge {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 5px;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 8px;
    border: 1px solid var(--meeting-border);
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
}

.participant-audio-icon {
    width: 14px;
    height: 14px;
}

.participant-audio-badge.is-live {
    color: #166534;
    background: #dcfce7;
}

.participant-audio-badge.is-muted {
    color: #991b1b;
    background: #fee2e2;
}

.participant-remove-button {
    min-height: 24px;
    min-width: 44px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
}

.participant-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--meeting-border);
}

.room-session-feedback {
    position: fixed;
    z-index: 40;
    top: 92px;
    left: 50%;
    width: min(420px, calc(100vw - 32px));
    min-height: 0;
    margin: 0;
    padding: 12px 16px;
    text-align: center;
    color: #ffffff !important;
    font-size: 14px !important;
    background: rgba(12, 28, 31, 0.94);
    box-shadow: 0 18px 46px rgba(5, 12, 14, 0.34);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.room-session-feedback.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.room-session-feedback:empty {
    display: none;
}

.video-tile {
    border-color: rgba(17, 24, 39, 0.18);
    background: #10231f;
}

.video-placeholder {
    color: #d7e5e0;
    background: #10231f;
}

.participant-list li,
.chat-message {
    border-color: var(--meeting-border);
    background: var(--meeting-surface-soft);
}

.chat-message.is-self {
    border-color: #99e7d0;
    background: #edfbf5;
}

.chat-message.is-system {
    border-color: #f8e0a0;
    background: #fff8e6;
}

.screen-share-controls {
    border-top-color: var(--meeting-border);
}

.share-mode-control {
    border-color: var(--meeting-border);
}

.share-mode-control label + label {
    border-left-color: var(--meeting-border);
}

.share-mode-control span {
    color: #42625a;
}

.share-mode-control input:checked + span {
    background: var(--meeting-primary);
}

.share-mode-control input:focus-visible + span {
    outline-color: var(--meeting-teal);
}

.share-audio-control input {
    accent-color: var(--meeting-primary);
}

.meeting-page-admin-login .meeting-shell,
.meeting-page-admin-dashboard .meeting-shell {
    min-height: 100vh;
}

body.meeting-page-entry,
body.meeting-page-admin-login,
body.meeting-page-admin-dashboard,
body.meeting-page-room {
    /* 这四个页面共用门户同款天空底色，保证山景和页面主内容落在同一视觉基底上。 */
    background-color: var(--meeting-paper);
    background-image: linear-gradient(
        180deg,
        var(--meeting-sky) 0%,
        #d8e8f0 28%,
        #e8f0f5 54%,
        var(--meeting-paper) 100%
    );
}

.meeting-admin-login-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.meeting-admin-login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 42px;
    align-items: center;
    min-height: calc(100vh - 168px);
}

.meeting-admin-login-copy h1 {
    margin: 0;
    color: var(--meeting-ink);
    font-size: 34px;
    line-height: 1.12;
}

.meeting-admin-login-copy .meeting-copy {
    max-width: 520px;
    margin: 14px 0 0;
}

.meeting-admin-login-card {
    position: relative;
    overflow: hidden;
    box-shadow: var(--meeting-shadow);
}

.meeting-admin-login-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--meeting-teal), var(--meeting-sun));
}

.meeting-admin-login-card .meeting-form {
    max-width: none;
}

.meeting-admin-alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #f5d58a;
    border-radius: 8px;
    color: #8a5a00;
    background: #fff8e6;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.meeting-admin-dashboard-shell {
    width: min(1440px, calc(100% - 32px));
    padding: 14px 0 16px;
}

.meeting-admin-dashboard-topbar {
    min-height: 54px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(151, 207, 190, 0.64);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 10px 24px rgba(39, 107, 91, 0.07);
    backdrop-filter: blur(16px);
}

.meeting-admin-topbar-actions {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.meeting-admin-session-pill {
    display: inline-grid;
    min-height: 36px;
    max-width: 280px;
    padding: 0 12px;
    place-items: center;
    border: 1px solid rgba(127, 190, 173, 0.58);
    border-radius: 8px;
    color: var(--meeting-primary);
    background: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.meeting-admin-dashboard-hero {
    display: flex;
    min-height: 52px;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(177, 220, 207, 0.62);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(239, 253, 247, 0.72));
    box-shadow: 0 10px 26px rgba(39, 107, 91, 0.06);
}

.meeting-admin-dashboard-title-block {
    min-width: 0;
}

.meeting-admin-dashboard-hero h1 {
    margin: 0;
    color: var(--meeting-ink);
    font-size: 26px;
    line-height: 1.12;
}

.meeting-admin-dashboard-hero .meeting-kicker {
    margin-bottom: 4px;
    font-size: 12px;
}

.meeting-admin-feedback {
    min-width: min(360px, 100%);
    min-height: 20px;
    margin: 0;
    text-align: right;
}

.meeting-admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.meeting-admin-metric {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 62px;
    padding: 12px 14px;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(166, 216, 200, 0.74);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 253, 247, 0.9));
    box-shadow: 0 8px 20px rgba(39, 107, 91, 0.06);
}

.meeting-admin-metric::before {
    display: block;
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
    content: "";
    background: linear-gradient(180deg, var(--meeting-teal), var(--meeting-sun));
}

.meeting-admin-metric span {
    display: block;
    margin-right: auto;
    color: var(--meeting-muted);
    font-size: 12px;
    font-weight: 800;
}

.meeting-admin-metric strong {
    color: var(--meeting-ink);
    font-size: 26px;
    line-height: 1;
}

.meeting-admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
    gap: 12px;
    align-items: start;
    height: min(780px, calc(100vh - 218px));
    min-height: 520px;
}

.meeting-admin-main-stack {
    display: grid;
    grid-template-rows: minmax(148px, 0.72fr) minmax(0, 1.28fr);
    min-width: 0;
    min-height: 0;
    height: 100%;
    gap: 12px;
}

.meeting-admin-rooms-panel,
.meeting-admin-detail-panel,
.meeting-admin-emergency-panel,
.meeting-admin-events-panel {
    min-height: 0;
    margin-bottom: 0;
    padding: 14px 16px;
    overflow: hidden;
    border-color: rgba(151, 207, 190, 0.72);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 26px rgba(39, 107, 91, 0.07);
}

.meeting-admin-section-header {
    display: flex;
    min-width: 0;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.meeting-admin-section-header h2 {
    margin: 0;
    color: var(--meeting-ink);
    font-size: 17px;
    line-height: 1.25;
}

.meeting-admin-section-header .meeting-kicker {
    margin-bottom: 4px;
    font-size: 12px;
}

.meeting-admin-table-wrap {
    max-height: none;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--meeting-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.meeting-admin-room-table-wrap {
    height: calc(100% - 48px);
}

.meeting-admin-room-table,
.meeting-admin-participant-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    color: var(--meeting-ink);
    font-size: 13px;
}

.meeting-admin-room-table th,
.meeting-admin-room-table td,
.meeting-admin-participant-table th,
.meeting-admin-participant-table td {
    padding: 8px 11px;
    border-bottom: 1px solid var(--meeting-border);
    text-align: left;
    vertical-align: middle;
}

.meeting-admin-room-table th,
.meeting-admin-participant-table th {
    position: sticky;
    z-index: 1;
    top: 0;
    color: #31514a;
    background: #f3fff9;
    font-size: 12px;
    font-weight: 900;
}

.meeting-admin-room-table tr.is-selected td {
    background: #edfbf5;
}

.meeting-admin-room-table td,
.meeting-admin-participant-table td {
    overflow-wrap: anywhere;
}

.meeting-admin-room-id {
    display: block;
    margin-top: 4px;
    color: var(--meeting-muted);
    font-size: 12px;
    font-weight: 700;
}

.meeting-admin-status-badge {
    display: inline-grid;
    min-height: 28px;
    padding: 0 10px;
    place-items: center;
    border-radius: 8px;
    color: var(--meeting-primary);
    background: var(--meeting-primary-soft);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.meeting-admin-status-badge.is-warning {
    color: #8a5a00;
    background: #fff1c7;
}

.meeting-admin-status-badge.is-danger {
    color: #a33b35;
    background: #fff0ed;
}

.meeting-admin-status-badge.is-muted {
    color: var(--meeting-muted);
    background: #eef8f4;
}

.meeting-admin-side-stack {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    height: 100%;
}

.meeting-admin-emergency-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.meeting-admin-emergency-card {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--meeting-border);
    border-radius: 8px;
    background: var(--meeting-surface-soft);
}

.meeting-admin-emergency-card span {
    color: var(--meeting-muted);
    font-size: 12px;
    font-weight: 800;
}

.meeting-admin-emergency-card strong {
    color: var(--meeting-primary);
    font-size: 18px;
}

.meeting-admin-emergency-card strong.is-danger {
    color: var(--meeting-coral);
}

.meeting-admin-inline-actions,
.meeting-admin-room-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.meeting-admin-inline-actions .meeting-secondary-button,
.meeting-admin-room-actions .meeting-secondary-button,
.meeting-admin-room-actions .meeting-danger-button,
.meeting-admin-room-table .meeting-secondary-button,
.meeting-admin-participant-table .meeting-danger-button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.meeting-admin-source-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 8px;
    align-items: end;
    margin: 0 0 8px;
}

.meeting-admin-source-form .meeting-field:nth-child(3),
.meeting-admin-source-form .meeting-danger-button {
    grid-column: 1 / -1;
}

.meeting-admin-source-list,
.meeting-admin-event-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.meeting-admin-source-list {
    margin-bottom: 10px;
}

.meeting-admin-source-list li {
    display: flex;
    min-width: 0;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--meeting-border);
    border-radius: 8px;
    background: #fbfffd;
    color: var(--meeting-muted);
    font-size: 13px;
}

.meeting-admin-wide-action {
    width: 100%;
}

.meeting-admin-event-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
}

.meeting-admin-events-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.meeting-admin-event-columns > div {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.meeting-admin-event-columns h3 {
    margin: 0 0 8px;
    color: #31514a;
    font-size: 14px;
}

.meeting-admin-event-list {
    max-height: none;
    min-height: 0;
    height: 100%;
    overflow: auto;
}

.meeting-admin-event-list li {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--meeting-border);
    border-radius: 8px;
    background: #fbfffd;
}

.meeting-admin-event-list strong {
    color: var(--meeting-ink);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.meeting-admin-event-list span,
.meeting-admin-empty-line {
    color: var(--meeting-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.meeting-admin-detail-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    margin-top: 0;
}

.meeting-admin-room-empty {
    min-height: 0;
    height: 100%;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(127, 190, 173, 0.72);
    border-radius: 8px;
    color: var(--meeting-muted);
    background: rgba(247, 255, 252, 0.76);
    font-size: 14px;
    font-weight: 800;
}

.meeting-admin-room-detail-body {
    display: grid;
    min-height: 0;
    gap: 12px;
    overflow: hidden;
}

.meeting-admin-room-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 286px);
    min-height: 0;
    height: 100%;
    gap: 12px;
}

.meeting-admin-room-detail-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    gap: 10px;
}

.meeting-admin-room-control-card {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--meeting-border);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(247, 255, 252, 0.96), rgba(255, 250, 235, 0.56));
}

.meeting-admin-room-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
}

.meeting-admin-room-meta div {
    padding: 9px 10px;
}

.meeting-admin-password-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: end;
}

.meeting-admin-reason-field {
    max-width: none;
}

.meeting-admin-sensitive-output {
    padding: 12px 14px;
    border: 1px solid #f2d07c;
    border-radius: 8px;
    color: #704400;
    background: #fff8e6;
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.meeting-admin-participant-wrap {
    height: 100%;
}

@media (min-width: 960px) {
    .meeting-page-admin-create .meeting-admin-create-layout,
    .meeting-page-room .prejoin-layout {
        /* 桌面端把创建和准备间的核心内容横向展开，减少不必要纵向滚动。 */
        min-height: 0;
    }
}

@media (max-width: 900px) {
    .meeting-topbar {
        margin-bottom: 22px;
    }

    .meeting-entry-layout,
    .meeting-admin-create-layout,
    .meeting-admin-login-layout,
    .meeting-admin-dashboard-grid,
    .prejoin-layout {
        grid-template-columns: 1fr;
    }

    .meeting-entry-layout {
        min-height: 0;
        align-items: start;
    }

    .meeting-entry-copy h1 {
        font-size: 36px;
    }

    .meeting-admin-login-copy h1,
    .meeting-admin-dashboard-hero h1 {
        font-size: 34px;
    }

    .meeting-admin-dashboard-hero h1 {
        font-size: 26px;
    }

    .meeting-admin-dashboard-hero,
    .meeting-admin-section-header {
        display: grid;
    }

    .meeting-admin-feedback {
        min-width: 0;
        text-align: left;
    }

    .meeting-admin-summary-grid,
    .meeting-admin-room-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meeting-admin-dashboard-grid,
    .meeting-admin-main-stack,
    .meeting-admin-side-stack {
        height: auto;
        min-height: 0;
    }

    .meeting-admin-main-stack,
    .meeting-admin-side-stack {
        grid-template-rows: none;
    }

    .meeting-admin-room-table-wrap,
    .meeting-admin-participant-wrap {
        height: auto;
        max-height: 320px;
    }

    .meeting-admin-room-detail-layout,
    .meeting-admin-event-columns {
        grid-template-columns: 1fr;
    }

    .meeting-admin-room-empty {
        min-height: 120px;
    }

    .meeting-create-result {
        order: 2;
    }
}

@media (max-width: 640px) {
    .meeting-shell,
    .meeting-admin-create-shell,
    .meeting-room-shell {
        width: min(100% - 20px, 1140px);
        padding: 20px 0;
    }

    .meeting-topbar {
        align-items: flex-start;
    }

    .meeting-brand {
        font-size: 14px;
    }

    .meeting-entry-copy h1 {
        font-size: 32px;
    }

    .meeting-form-grid,
    .meeting-option-group,
    .meeting-result-meta,
    .meeting-admin-summary-grid,
    .meeting-admin-emergency-grid,
    .meeting-admin-source-form,
    .meeting-admin-room-meta,
    .meeting-admin-password-tools,
    .prejoin-media-toolbar {
        grid-template-columns: 1fr;
    }

    .meeting-action-row,
    .meeting-action-row > *,
    .meeting-primary-link,
    .meeting-secondary-link {
        width: 100%;
    }

    .meeting-lobby-header {
        display: grid;
    }

    .meeting-admin-dashboard-topbar,
    .meeting-admin-topbar-actions {
        display: grid;
        justify-items: stretch;
    }

    .meeting-admin-session-pill {
        max-width: none;
    }

    .meeting-admin-source-form .meeting-field:nth-child(3),
    .meeting-admin-source-form .meeting-danger-button {
        grid-column: auto;
    }

    .meeting-admin-room-actions,
    .meeting-admin-inline-actions {
        display: grid;
    }

    .meeting-admin-room-actions > *,
    .meeting-admin-inline-actions > *,
    .meeting-admin-password-tools > * {
        width: 100%;
    }
}

@media (max-width: 900px) {
    body.is-room-session-active .meeting-room-shell {
        width: min(100% - 20px, 1140px);
        padding: 12px 0;
    }

    .room-session-workspace {
        height: auto;
        min-height: calc(100vh - 24px);
        overflow: visible;
        padding: 12px;
    }

    .room-session-header {
        display: grid;
        gap: 12px;
        min-height: 0;
    }

    .room-session-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        justify-content: stretch;
    }

    .room-stage {
        min-height: 320px;
    }

    .room-stage .video-grid {
        height: auto;
        min-height: 320px;
    }

    .room-stage .video-grid .video-tile {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .room-control-bar {
        position: sticky;
        z-index: 6;
        bottom: 10px;
        display: grid;
        justify-content: stretch;
    }

    .room-control-bar .media-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .room-side-drawer {
        position: static;
        width: 100%;
        max-height: none;
        margin-top: 12px;
    }

    .room-drawer-panel {
        max-height: none;
    }

    .room-session-feedback {
        position: fixed;
        top: 76px;
        left: 50%;
        width: min(420px, calc(100vw - 32px));
        margin: 0;
        color: #07352d;
        background: rgba(216, 255, 244, 0.82);
        transform: translate(-50%, -12px);
    }

    .room-session-feedback.is-visible {
        transform: translate(-50%, 0);
    }
}

@media (max-width: 640px) {
    .room-session-header h2 {
        font-size: 20px;
    }

    .room-session-actions,
    .room-control-bar .media-controls,
    .room-admin-actions,
    .participant-admin-actions {
        grid-template-columns: 1fr;
    }

    .room-control-bar,
    .room-control-bar .media-controls {
        gap: 8px;
    }

    .room-side-drawer {
        padding: 12px;
    }
}

/* 门户水墨视觉系统：本层覆盖历史薄荷主题，同时保留所有业务选择器供脚本稳定使用。 */
:root {
    --meeting-sky: #c8dde8; /* 门户首页冷蓝天空，用于页面顶部空间和远景。 */
    --meeting-sky-soft: #dce9ef; /* 天空到宣纸之间的过渡色，避免硬切。 */
    --meeting-paper: #f4efe6; /* 主背景暖色宣纸，与个人门户主体一致。 */
    --meeting-paper-solid: #fbf9f4; /* 表单和浮层需要更高可读性时使用的不透明纸面。 */
    --meeting-paper-glass: rgba(251, 249, 244, 0.84); /* 水墨背景上的轻透纸面，保留层次但不牺牲对比度。 */
    --meeting-ink: #2c3e4a; /* 主文字墨蓝，比纯黑更柔和并符合门户基调。 */
    --meeting-ink-deep: #20333f; /* 主按钮与会议深色区域使用的深墨色。 */
    --meeting-muted: rgba(44, 62, 74, 0.68); /* 次级说明统一降低视觉权重。 */
    --meeting-faint: rgba(44, 62, 74, 0.48); /* 时间、编号和空态等非核心信息。 */
    --meeting-copper: #8b6f4e; /* 暖棕强调色用于品牌、选中和细边，不大面积铺色。 */
    --meeting-copper-soft: rgba(139, 111, 78, 0.2); /* 纸面控件的轻边框和选中底色。 */
    --meeting-mountain-blue: #668ba0; /* 山蓝用于会议可交互状态和水墨层次。 */
    --meeting-success: #547568; /* 正常与成功状态保持低饱和绿色。 */
    --meeting-danger: #a4544f; /* 离会与破坏性操作使用克制暗红。 */
    --meeting-night: #172833; /* 会议视频画布主背景，承接深山夜色。 */
    --meeting-night-soft: #223945; /* 抽屉和视频占位的次级深色。 */
    --meeting-border: rgba(139, 111, 78, 0.22); /* 全局结构线统一使用暖棕透明色。 */
    --meeting-shadow: 0 18px 46px rgba(44, 62, 74, 0.14); /* 主面板与浮层阴影，控制在单层关系。 */
    --meeting-shadow-soft: 0 8px 26px rgba(44, 62, 74, 0.1); /* 小范围悬浮和输入面板阴影。 */
    --meeting-radius: 8px; /* 项目大型容器圆角上限，保持简洁克制。 */
    --meeting-radius-small: 6px; /* 按钮、输入和状态标签的小圆角。 */
    --meeting-motion-fast: 160ms; /* 按钮、焦点和选中状态的即时反馈。 */
    --meeting-motion: 240ms; /* Tab、抽屉和弹窗的标准过渡时长。 */
    --meeting-layer-content: 2; /* 普通页面内容层。 */
    --meeting-layer-drawer: 30; /* 抽屉和遮罩层，必须高于页面内容。 */
    --meeting-layer-dialog: 40; /* 确认与创建弹窗高于抽屉。 */
    --meeting-title-font: "STSong", "Songti SC", "SimSun", Georgia, serif; /* 中文标题延续门户宋体气质。 */
    --meeting-body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; /* 控件与正文保持跨平台可读。 */
}

html {
    min-width: 320px;
    background: var(--meeting-paper);
}

body.meeting-page {
    position: relative;
    min-width: 320px;
    color: var(--meeting-ink);
    background-color: var(--meeting-paper);
    background-image:
        linear-gradient(180deg, var(--meeting-sky) 0, var(--meeting-sky-soft) 180px, rgba(244, 239, 230, 0.92) 390px, var(--meeting-paper) 100%),
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139, 111, 78, 0.025) 3px, rgba(139, 111, 78, 0.025) 4px);
    font-family: var(--meeting-body-font);
    letter-spacing: 0;
}

body.meeting-page::before {
    position: fixed;
    z-index: 0;
    right: -2vw;
    bottom: 0;
    left: -2vw;
    /* 加高绘制区域，让两层远山先进入留白，再过渡到近山与页脚。 */
    height: min(38vw, 500px);
    min-height: 280px;
    content: "";
    opacity: 0.96;
    /* SVG 内部已按远、中、近景分层，100% 尺寸可防止左右缩放截断山脊。 */
    background: url("/meeting/assets/mountain-landscape.svg") center bottom / 100% 100% no-repeat;
    pointer-events: none;
    animation: meeting-mountain-enter 560ms ease-out both;
}

body.meeting-page::after {
    position: fixed;
    z-index: 1;
    right: -4vw;
    bottom: 21%;
    left: 5vw;
    height: 42px;
    content: "";
    opacity: 0.18;
    /* 仅作远景提亮，主体薄雾由 SVG 路径承载，避免产生完整横向灰带。 */
    background: radial-gradient(ellipse at center, rgba(251, 249, 244, 0.7) 0%, rgba(251, 249, 244, 0.26) 42%, transparent 74%);
    /* 固定大面积 blur 会让 Chrome 每帧重绘合成层；使用低透明渐变即可保留空气感。 */
    filter: none;
    pointer-events: none;
    animation: none;
}

body.meeting-page-entry {
    /* 入口页直接复用门户同款天空，避免单独再做一套偏差很大的渐变。 */
    background-image: linear-gradient(
        180deg,
        var(--meeting-sky) 0%,
        #d8e8f0 28%,
        #e8f0f5 54%,
        var(--meeting-paper) 100%
    );
}

body.meeting-page-entry::before,
body.meeting-page-entry::after,
body.meeting-page-admin-login::before,
body.meeting-page-admin-login::after,
body.meeting-page-admin-dashboard::before,
body.meeting-page-admin-dashboard::after,
body.meeting-page-room::before,
body.meeting-page-room::after {
    /* 首页已使用门户同款 DOM 山层，关闭历史整张 SVG 背景以免山体重叠发暗。 */
    display: none;
}

.meeting-mountain-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.meeting-portal-layer {
    position: absolute;
    left: -5%;
    width: 110%;
    opacity: 0;
    pointer-events: none;
    will-change: transform;
}

.meeting-portal-layer svg {
    display: block;
    width: 100%;
    height: 100%;
}

.meeting-portal-layer-far {
    bottom: 118px; /* 取自门户首页远山层，用固定层距保留原始山水比例。 */
    height: 220px; /* 取自门户首页 SVG viewBox 高度，防止路径被纵向拉伸。 */
    animation: meeting-portal-layer-in 0.8s ease-out 0ms forwards;
}

.meeting-portal-layer-mid {
    bottom: 68px; /* 取自门户首页中山层，让第一道雾正好压在山脊交界处。 */
    height: 220px; /* 与门户首页一致，中景山脊是自然起伏感的主体。 */
    animation: meeting-portal-layer-in 0.8s ease-out 100ms forwards;
}

.meeting-portal-layer-near {
    bottom: 0; /* 近山贴底承接 ICP 页脚，避免页面底部露出浅色断层。 */
    height: 170px; /* 取自门户首页近山层，保持山脚厚度不过分压暗。 */
    animation: meeting-portal-layer-in 0.8s ease-out 200ms forwards;
}

.meeting-portal-mist {
    position: absolute;
    right: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.meeting-portal-mist-1 {
    bottom: 136px; /* 门户原始雾线位置，位于远/中景和近景之间。 */
    height: 28px;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.35), transparent);
    filter: blur(5px);
    animation:
        meeting-portal-fade-in 0.6s ease-out 400ms forwards,
        meeting-portal-mist-drift-1 8s ease-in-out 1s infinite alternate;
}

.meeting-portal-mist-2 {
    bottom: 74px; /* 门户原始第二层雾线位置，用来柔化近山顶部硬边。 */
    height: 22px;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.22), transparent);
    filter: blur(7px);
    animation:
        meeting-portal-fade-in 0.6s ease-out 400ms forwards,
        meeting-portal-mist-drift-2 12s ease-in-out 1s infinite alternate-reverse;
}

body.meeting-page-entry .meeting-shell,
body.meeting-page-admin-login .meeting-shell,
body.meeting-page-admin-dashboard .meeting-shell,
body.meeting-page-room .meeting-shell,
body.meeting-page-entry .meeting-icp-footer,
body.meeting-page-admin-login .meeting-icp-footer,
body.meeting-page-admin-dashboard .meeting-icp-footer {
    /* 内容和备案信息要压在 fixed 山景之上，否则会被山层遮住点击与阅读层级。 */
    position: relative;
    z-index: var(--meeting-layer-content);
}

body.meeting-page-entry .meeting-icp-footer,
body.meeting-page-admin-login .meeting-icp-footer,
body.meeting-page-admin-dashboard .meeting-icp-footer {
    /*
     * 备案区域复刻门户页脚的深山渐隐，既让白字可读，也让底部不出现独立色块。
     */
    background: linear-gradient(
        to top,
        rgba(35, 55, 70, 0.92) 0%,
        rgba(35, 55, 70, 0.5) 50%,
        transparent 100%
    );
}

/* 性能优先模式关闭固定雾气动画和高成本滤镜，先把持续 GPU 合成成本降下来。 */
body.meeting-page.is-performance-mode::before,
body.meeting-page.is-performance-mode::after {
    animation: none;
}

body.meeting-page.is-performance-mode .meeting-portal-layer,
body.meeting-page.is-performance-mode .meeting-portal-mist {
    /* 低性能模式保留最终静态画面，去掉入场和雾气漂移动画。 */
    animation: none;
    opacity: 1;
    transform: none;
}

body.meeting-page.is-performance-mode .meeting-mountain-scene {
    transform: none;
}

body.meeting-page.is-performance-mode::after {
    opacity: 0;
    filter: none;
}

body.meeting-page.is-performance-mode .meeting-panel,
body.meeting-page.is-performance-mode .meeting-result,
body.meeting-page.is-performance-mode .meeting-view-settings-menu,
body.meeting-page.is-performance-mode .room-side-drawer,
body.meeting-page.is-performance-mode .meeting-dialog {
    box-shadow: none;
    backdrop-filter: none;
}

body.meeting-page.is-performance-mode .video-tile,
body.meeting-page.is-performance-mode .meeting-stage-view-button,
body.meeting-page.is-performance-mode .meeting-secondary-button,
body.meeting-page.is-performance-mode .meeting-primary-button {
    transition-duration: 0ms;
}

body.is-ui-layer-open {
    overflow: hidden;
}

.meeting-shell {
    position: relative;
    z-index: var(--meeting-layer-content);
    width: min(1080px, calc(100% - 36px));
    padding: 20px 0 34px;
}

.meeting-brand,
.meeting-kicker,
.meeting-panel h1,
.meeting-panel h2,
.meeting-result h2,
.meeting-entry-copy h1,
.meeting-admin-login-copy h1,
.meeting-admin-dashboard-hero h1,
.room-session-header h2,
.room-drawer-header h3 {
    font-family: var(--meeting-title-font);
    font-weight: 500;
    letter-spacing: 0;
}

.meeting-topbar {
    min-height: 58px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--meeting-border);
}

.meeting-brand {
    color: var(--meeting-ink);
    font-size: 16px;
    font-weight: 500;
}

.meeting-brand-mark {
    width: 38px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    color: var(--meeting-paper-solid);
    background: var(--meeting-ink-deep);
    box-shadow: 0 4px 14px rgba(44, 62, 74, 0.16), 0 0 0 4px rgba(255, 255, 255, 0.12);
    font-family: var(--meeting-title-font);
    font-weight: 500;
}

.meeting-kicker {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 9px;
    color: var(--meeting-copper);
    font-size: 14px;
    letter-spacing: 0;
}

.meeting-kicker::before {
    width: 3px;
    height: 16px;
    border-radius: 1px;
    background: var(--meeting-copper);
    content: "";
}

.meeting-copy,
.meeting-feedback,
.room-live-status,
.network-diagnostics {
    color: var(--meeting-muted);
}

.meeting-feedback {
    min-height: 22px;
    overflow-wrap: anywhere;
}

.meeting-feedback.is-error,
.room-live-status.is-error,
.network-diagnostics.is-error {
    color: var(--meeting-danger);
}

.meeting-feedback.is-success,
.room-live-status.is-success,
.network-diagnostics.is-success {
    color: var(--meeting-success);
}

.meeting-panel,
.meeting-result {
    border: 1px solid var(--meeting-border);
    border-radius: var(--meeting-radius);
    background: var(--meeting-paper-glass);
    box-shadow: var(--meeting-shadow-soft);
    backdrop-filter: blur(8px);
}

.meeting-field {
    gap: 7px;
    color: var(--meeting-ink);
    font-size: 14px;
    font-weight: 500;
}

.meeting-field > span,
.meeting-field > label,
.meeting-option-group legend {
    font-family: var(--meeting-title-font);
    font-weight: 500;
}

.meeting-field input,
.meeting-field textarea,
.meeting-field select,
.meeting-link-row input,
.room-invite-row input {
    min-height: 42px;
    border: 1px solid var(--meeting-border);
    border-radius: var(--meeting-radius-small);
    outline: 0;
    color: var(--meeting-ink);
    background: rgba(255, 255, 255, 0.64);
    transition: border-color var(--meeting-motion-fast) ease, box-shadow var(--meeting-motion-fast) ease, background-color var(--meeting-motion-fast) ease;
}

.meeting-field input:focus,
.meeting-field textarea:focus,
.meeting-field select:focus,
.meeting-link-row input:focus,
.room-invite-row input:focus {
    border-color: rgba(139, 111, 78, 0.66);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(139, 111, 78, 0.12);
}

.meeting-primary-button,
.meeting-primary-link,
.meeting-secondary-button,
.meeting-secondary-link,
.meeting-danger-button,
.meeting-icon-button {
    min-height: 40px;
    border-radius: var(--meeting-radius-small);
    font-size: 14px;
    font-weight: 500;
    transition: color var(--meeting-motion-fast) ease, background-color var(--meeting-motion-fast) ease, border-color var(--meeting-motion-fast) ease, box-shadow var(--meeting-motion-fast) ease, transform var(--meeting-motion-fast) ease;
}

.meeting-primary-button,
.meeting-primary-link {
    border: 1px solid var(--meeting-ink-deep);
    color: #ffffff;
    background: var(--meeting-ink-deep);
    box-shadow: 0 8px 20px rgba(44, 62, 74, 0.18);
}

.meeting-primary-button:hover,
.meeting-primary-link:hover,
.meeting-secondary-button:hover,
.meeting-secondary-link:hover,
.meeting-danger-button:hover,
.meeting-icon-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(44, 62, 74, 0.16);
}

.meeting-secondary-button,
.meeting-secondary-link,
.meeting-icon-button {
    border: 1px solid var(--meeting-copper-soft);
    color: var(--meeting-ink);
    background: rgba(255, 255, 255, 0.58);
}

.meeting-secondary-button:hover,
.meeting-secondary-link:hover,
.meeting-icon-button:hover {
    color: var(--meeting-copper);
    background: rgba(255, 255, 255, 0.82);
}

.meeting-danger-button {
    border: 1px solid rgba(164, 84, 79, 0.38);
    color: #ffffff;
    background: var(--meeting-danger);
}

.meeting-primary-button:focus-visible,
.meeting-primary-link:focus-visible,
.meeting-secondary-button:focus-visible,
.meeting-secondary-link:focus-visible,
.meeting-danger-button:focus-visible,
.meeting-icon-button:focus-visible,
.meeting-tab:focus-visible {
    outline: 3px solid rgba(139, 111, 78, 0.34);
    outline-offset: 2px;
}

.meeting-icon-button {
    display: inline-grid;
    width: 40px;
    min-width: 40px;
    padding: 0;
    place-items: center;
    cursor: pointer;
}

.meeting-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    position: absolute;
    z-index: 60;
    left: 50%;
    bottom: calc(100% + 8px);
    padding: 5px 7px;
    opacity: 0;
    visibility: hidden;
    border-radius: 4px;
    color: var(--meeting-paper-solid);
    background: var(--meeting-ink-deep);
    content: attr(data-tooltip);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    transform: translate(-50%, 3px);
    transition: opacity var(--meeting-motion-fast) ease, transform var(--meeting-motion-fast) ease, visibility var(--meeting-motion-fast) ease;
    pointer-events: none;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* 顶部和弹窗标题中的提示向下展开，避免越过页面或滚动容器上边缘后被裁切。 */
[data-tooltip-placement="bottom"]::after {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translate(-50%, -3px);
}

[data-tooltip-placement="bottom"]:hover::after,
[data-tooltip-placement="bottom"]:focus-visible::after {
    transform: translate(-50%, 0);
}

/* 抽屉标题的关闭按钮贴近右边缘，提示向下并向左对齐才能完全保留在抽屉裁切边界内。 */
#meeting-room-drawer-close[data-tooltip-placement="bottom"]::after {
    right: 0;
    left: auto;
    transform: translate(0, -3px);
}

#meeting-room-drawer-close[data-tooltip-placement="bottom"]:hover::after,
#meeting-room-drawer-close[data-tooltip-placement="bottom"]:focus-visible::after {
    transform: translate(0, 0);
}

.meeting-tab-list {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    border-bottom: 1px solid var(--meeting-border);
}

.meeting-tab {
    min-height: 40px;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--meeting-muted);
    background: transparent;
    font-family: var(--meeting-title-font);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.meeting-tab.is-active,
.meeting-tab[aria-selected="true"] {
    color: var(--meeting-copper);
    border-bottom-color: var(--meeting-copper);
}

.meeting-layer-backdrop {
    position: fixed;
    z-index: var(--meeting-layer-drawer);
    inset: 0;
    opacity: 0;
    visibility: hidden;
    border: 0;
    background: rgba(32, 51, 63, 0.34);
    backdrop-filter: blur(3px);
    transition: opacity var(--meeting-motion) ease, visibility var(--meeting-motion) ease;
}

.meeting-layer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.meeting-drawer {
    position: fixed;
    z-index: calc(var(--meeting-layer-drawer) + 1);
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 94vw);
    padding: 22px;
    overflow-y: auto;
    border-left: 1px solid var(--meeting-border);
    color: var(--meeting-ink);
    background-color: var(--meeting-paper-solid);
    background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139, 111, 78, 0.025) 3px, rgba(139, 111, 78, 0.025) 4px);
    box-shadow: -18px 0 46px rgba(44, 62, 74, 0.2);
    transform: translateX(104%);
    transition: transform var(--meeting-motion) ease;
}

.meeting-drawer.is-open {
    transform: translateX(0);
}

.meeting-dialog {
    position: fixed;
    z-index: var(--meeting-layer-dialog);
    top: 50%;
    left: 50%;
    width: min(460px, calc(100% - 28px));
    max-height: min(86vh, 760px);
    padding: 22px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    border: 1px solid var(--meeting-border);
    border-radius: var(--meeting-radius);
    color: var(--meeting-ink);
    background: var(--meeting-paper-solid);
    box-shadow: 0 26px 70px rgba(44, 62, 74, 0.28);
    transform: translate(-50%, calc(-50% + 14px));
    transition: opacity var(--meeting-motion) ease, visibility var(--meeting-motion) ease, transform var(--meeting-motion) ease;
}

.meeting-dialog.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.meeting-layer-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.meeting-layer-header h2,
.meeting-layer-header h3 {
    margin: 0;
    color: var(--meeting-ink);
    font-family: var(--meeting-title-font);
    font-weight: 500;
}

.meeting-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
}

.meeting-empty-state {
    display: grid;
    min-height: 180px;
    padding: 30px;
    place-items: center;
    color: var(--meeting-muted);
    text-align: center;
}

@keyframes meeting-mountain-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 0.72; transform: translateY(0); }
}

@keyframes meeting-portal-layer-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes meeting-portal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes meeting-portal-mist-drift-1 {
    from { transform: translateX(-15px); opacity: 0.7; }
    to { transform: translateX(15px); opacity: 1; }
}

@keyframes meeting-portal-mist-drift-2 {
    from { transform: translateX(12px); opacity: 0.5; }
    to { transform: translateX(-12px); opacity: 0.9; }
}

@keyframes meeting-mist-drift {
    from { opacity: 0.38; transform: translateX(-12px); }
    to { opacity: 0.62; transform: translateX(12px); }
}

@keyframes meeting-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .meeting-shell {
        width: min(100% - 28px, 1080px);
        padding-top: 16px;
    }

    body.meeting-page::before {
        height: 220px;
        width: 130%;
        left: -15%;
    }
}

@media (max-width: 640px) {
    .meeting-shell,
    .meeting-shell.is-session-active {
        width: min(100% - 20px, 1080px);
    }

    .meeting-topbar {
        min-height: 52px;
        gap: 10px;
    }

    .meeting-topbar > .meeting-secondary-link {
        /* 导航次级入口按内容宽度显示，避免历史移动端全宽按钮规则挤压品牌名称。 */
        width: auto;
        flex: 0 0 auto;
    }

    .meeting-brand > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .meeting-panel,
    .meeting-result,
    .meeting-dialog,
    .meeting-drawer {
        padding: 18px;
    }

    .meeting-dialog-actions > * {
        flex: 1 1 130px;
    }

    [data-tooltip]::after {
        display: none;
    }
}

@media (max-height: 760px) and (min-width: 901px) {
    .meeting-shell {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.meeting-page::before,
    body.meeting-page::after,
    .meeting-page *,
    .meeting-page *::before,
    .meeting-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 公共入口、管理员登录与创建流程使用门户首页的居中重心和轻量纸面。 */
.meeting-command-button,
.meeting-inline-command {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.meeting-entry-shell,
.meeting-admin-login-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.meeting-entry-layout,
.meeting-admin-login-layout {
    grid-template-columns: minmax(0, 0.88fr) minmax(320px, 1.12fr);
    gap: 48px;
    min-height: calc(100vh - 218px);
    padding-bottom: 128px;
}

.meeting-portal-copy {
    animation: meeting-fade-up 520ms ease-out both;
}

.meeting-entry-copy h1,
.meeting-admin-login-copy h1 {
    margin: 0 0 10px;
    color: var(--meeting-ink);
    font-family: var(--meeting-title-font);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0;
}

.meeting-entry-summary,
.meeting-admin-login-copy .meeting-copy {
    max-width: 480px;
    margin: 0;
    color: var(--meeting-muted);
    font-size: 16px;
}

.meeting-entry-card,
.meeting-admin-login-card {
    max-width: 460px;
    justify-self: end;
    padding: 24px;
    overflow: visible;
    animation: meeting-fade-up 540ms ease-out 80ms both;
}

.meeting-entry-card::before,
.meeting-admin-login-card::before,
.meeting-create-card::before,
.meeting-create-result::before {
    display: none;
}

.meeting-room-code-form,
.meeting-admin-login-form {
    max-width: none;
    gap: 16px;
}

.meeting-admin-create-shell {
    width: min(1040px, calc(100% - 36px));
}

.meeting-admin-create-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.88fr);
    gap: 22px;
    align-items: start;
    padding: 10px 0 100px;
}

.meeting-create-card,
.meeting-create-result {
    padding: 24px;
    animation: meeting-fade-up 520ms ease-out both;
}

.meeting-create-card h1 {
    margin: 0 0 20px;
    color: var(--meeting-ink);
    font-family: var(--meeting-title-font);
    font-size: 28px;
    font-weight: 500;
}

.meeting-create-result h2 {
    font-size: 24px;
}

.meeting-advanced-settings {
    overflow: hidden;
    border-top: 1px solid var(--meeting-border);
    border-bottom: 1px solid var(--meeting-border);
}

.meeting-advanced-settings summary {
    display: flex;
    min-height: 44px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    color: var(--meeting-ink);
    font-family: var(--meeting-title-font);
    cursor: pointer;
    list-style: none;
}

.meeting-advanced-settings summary::-webkit-details-marker {
    display: none;
}

.meeting-advanced-settings summary .meeting-icon {
    transition: transform var(--meeting-motion-fast) ease;
}

.meeting-advanced-settings[open] summary .meeting-icon {
    transform: rotate(180deg);
}

.meeting-advanced-settings-body {
    display: grid;
    gap: 16px;
    padding: 4px 0 18px;
}

.meeting-option-group span {
    border-color: var(--meeting-border);
    border-radius: var(--meeting-radius-small);
    color: var(--meeting-muted);
    background: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.meeting-option-group input:checked + span {
    border-color: rgba(139, 111, 78, 0.5);
    color: var(--meeting-copper);
    background: rgba(139, 111, 78, 0.1);
    box-shadow: none;
}

.meeting-option-group input:focus-visible + span {
    outline-color: rgba(139, 111, 78, 0.46);
}

/* fieldset 的 legend 在不同浏览器不会稳定参与网格排版，拆出选项网格以预留固定标签高度。 */
.meeting-password-mode-fieldset {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
}

.meeting-password-mode-fieldset legend {
    display: block;
    float: none;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    line-height: 1.4;
}

.meeting-password-mode-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.meeting-switch-field {
    color: var(--meeting-ink);
    font-weight: 500;
}

.meeting-switch-field input,
.share-audio-control input {
    accent-color: var(--meeting-copper);
}

.meeting-result-meta div {
    border-color: var(--meeting-border);
    background: rgba(255, 255, 255, 0.46);
}

.meeting-result-meta dt {
    color: var(--meeting-faint);
    font-weight: 500;
}

.meeting-result-meta dd {
    color: var(--meeting-ink);
    font-weight: 500;
}

@media (max-width: 900px) {
    .meeting-entry-layout,
    .meeting-admin-login-layout {
        grid-template-columns: minmax(0, 0.8fr) minmax(300px, 1.2fr);
        gap: 28px;
    }

    .meeting-admin-create-layout {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .meeting-entry-layout,
    .meeting-admin-login-layout {
        grid-template-columns: 1fr;
        gap: 24px;
        align-content: start;
        min-height: 0;
        padding: 34px 0 170px;
    }

    .meeting-entry-copy h1,
    .meeting-admin-login-copy h1 {
        font-size: 32px;
    }

    .meeting-entry-card,
    .meeting-admin-login-card {
        max-width: none;
        justify-self: stretch;
    }

    .meeting-admin-create-layout {
        padding-bottom: 140px;
    }

    .meeting-form-grid,
    .meeting-option-group,
    .meeting-result-meta {
        grid-template-columns: 1fr;
    }
}

/* 正式会议工作台：深山蓝画布优先，水墨只保留为边缘氛围，不覆盖视频内容。 */
body.is-room-session-active {
    overflow: hidden;
    color: #edf3f4;
    background:
        linear-gradient(180deg, rgba(23, 40, 51, 0.98), rgba(15, 28, 36, 1)),
        var(--meeting-night);
}

body.is-room-session-active::before {
    height: min(22vw, 230px);
    opacity: 0.13;
    filter: saturate(0.45) brightness(0.74);
}

body.is-room-session-active::after {
    bottom: 11%;
    opacity: 0.1;
}

body.is-room-session-active .meeting-room-shell,
body.is-room-session-active .meeting-shell.is-session-active {
    width: min(1540px, calc(100% - 24px));
    padding: 12px 0;
}

.room-session-workspace {
    grid-template-rows: 58px minmax(0, 1fr) 68px;
    height: calc(100dvh - 24px);
    min-height: 560px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(200, 221, 232, 0.14);
    border-radius: var(--meeting-radius);
    background:
        radial-gradient(circle at 50% 115%, rgba(102, 139, 160, 0.16), transparent 42%),
        rgba(15, 28, 36, 0.94);
    box-shadow: 0 26px 64px rgba(7, 16, 22, 0.38);
}

.room-session-header {
    position: relative;
    z-index: 50;
    min-height: 58px;
    padding: 8px 12px 8px 16px;
    border-bottom: 1px solid rgba(200, 221, 232, 0.12);
    background: rgba(23, 40, 51, 0.78);
    /* 会中头部长期覆盖视频，使用高不透明底色比实时背景模糊更稳定且可读性一致。 */
    backdrop-filter: none;
}

.room-session-header > div:first-child {
    min-width: 0;
}

.room-session-header h2 {
    max-width: min(48vw, 660px);
    overflow: hidden;
    color: #f7f3eb;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-session-header .meeting-kicker {
    display: none;
}

.room-session-header .meeting-copy {
    min-height: 16px;
    margin: 3px 0 0;
    overflow: hidden;
    color: rgba(222, 232, 235, 0.66);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-session-actions {
    flex-wrap: nowrap;
    gap: 6px;
}

.room-session-actions .meeting-secondary-button {
    width: 78px;
    min-width: 78px;
    min-height: 38px;
    padding: 0 9px;
    border-color: rgba(200, 221, 232, 0.16);
    color: rgba(242, 246, 247, 0.86);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
}

.room-session-actions .meeting-secondary-button:hover,
.room-session-actions .meeting-secondary-button.is-active {
    color: #ffffff;
    border-color: rgba(139, 111, 78, 0.7);
    background: rgba(139, 111, 78, 0.28);
    box-shadow: none;
}

.room-admin-trigger,
.room-admin-trigger:hover,
.room-admin-trigger.is-active {
    color: #f0dfc7 !important;
    border-color: rgba(139, 111, 78, 0.54) !important;
    background: rgba(139, 111, 78, 0.18) !important;
}

.room-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    padding: 10px;
    overflow: hidden;
}

.room-stage .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    gap: 8px;
    margin: 0;
}

.room-stage .video-grid .video-tile {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border: 1px solid rgba(200, 221, 232, 0.12);
    border-radius: var(--meeting-radius-small);
    background: var(--meeting-night-soft);
    box-shadow: inset 0 0 52px rgba(7, 16, 22, 0.34);
}

.room-stage .video-grid .video-tile video {
    min-height: 0;
}

.room-stage .video-grid .video-tile:only-child,
.room-stage .video-grid.is-theater-mode .video-tile.is-focused {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.room-stage .video-placeholder {
    color: rgba(232, 239, 241, 0.64);
    background:
        linear-gradient(180deg, rgba(34, 57, 69, 0.58), rgba(23, 40, 51, 0.84)),
        var(--meeting-night-soft);
}

.room-stage .video-label {
    left: 12px;
    bottom: 12px;
    border: 1px solid rgba(200, 221, 232, 0.12);
    background: rgba(15, 28, 36, 0.72);
    backdrop-filter: none;
}

.room-control-bar {
    min-height: 68px;
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid rgba(200, 221, 232, 0.12);
    border-radius: 0;
    background: rgba(23, 40, 51, 0.9);
    backdrop-filter: none;
}

.room-control-bar .media-controls {
    flex-wrap: nowrap;
    gap: 8px;
}

.room-control-bar .meeting-control-button {
    display: inline-flex;
    width: 116px;
    min-width: 116px;
    min-height: 46px;
    padding: 0 12px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    border-color: rgba(200, 221, 232, 0.17);
    color: #edf3f4;
    background: rgba(255, 255, 255, 0.065);
    box-shadow: none;
}

.room-control-bar .meeting-control-button:hover {
    border-color: rgba(139, 111, 78, 0.68);
    color: #ffffff;
    background: rgba(139, 111, 78, 0.24);
    box-shadow: none;
}

.room-control-bar .meeting-danger-button {
    margin-left: auto;
    border-color: rgba(255, 222, 218, 0.16);
    color: #ffffff;
    background: var(--meeting-danger);
}

.room-side-drawer {
    z-index: 18;
    top: 66px;
    right: 8px;
    bottom: 76px;
    width: min(390px, calc(100% - 16px));
    padding: 18px;
    opacity: 0;
    overflow: hidden;
    border: 1px solid var(--meeting-border);
    color: var(--meeting-ink);
    background: rgba(251, 249, 244, 0.97);
    box-shadow: -18px 0 50px rgba(7, 16, 22, 0.34);
    transform: translateX(calc(100% + 18px));
    transition: opacity var(--meeting-motion) ease, transform var(--meeting-motion) ease;
    pointer-events: none;
}

.room-side-drawer.is-open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.room-drawer-panel {
    padding-right: 3px;
    overscroll-behavior: contain;
}

.room-side-drawer .meeting-secondary-button {
    border-color: var(--meeting-border);
    color: var(--meeting-ink);
    background: rgba(255, 255, 255, 0.62);
}

.room-side-drawer .meeting-danger-button {
    color: #ffffff;
    background: var(--meeting-danger);
}

.room-session-feedback {
    color: #edf3f4;
    background: rgba(15, 28, 36, 0.84);
    box-shadow: 0 8px 26px rgba(7, 16, 22, 0.2);
}

@media (max-width: 900px) {
    body.is-room-session-active {
        overflow: auto;
    }

    body.is-room-session-active .meeting-room-shell,
    body.is-room-session-active .meeting-shell.is-session-active {
        width: min(100% - 20px, 900px);
        padding: 10px 0;
    }

    .room-session-workspace {
        grid-template-rows: auto minmax(340px, 1fr) auto;
        height: auto;
        min-height: calc(100dvh - 20px);
    }

    .room-session-header {
        display: grid;
        gap: 10px;
        padding: 12px;
    }

    .room-session-header h2 {
        max-width: 100%;
    }

    .room-session-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .room-session-actions .meeting-secondary-button {
        width: 100%;
        min-width: 0;
    }

    .room-stage {
        min-height: 340px;
    }

    .room-stage .video-grid {
        min-height: 320px;
    }

    .room-stage .video-grid .video-tile {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .room-control-bar {
        position: sticky;
        z-index: 10;
        bottom: 0;
        display: flex;
        gap: 8px;
        border-radius: 0 0 var(--meeting-radius-small) var(--meeting-radius-small);
    }

    .room-side-drawer {
        position: fixed;
        z-index: 18;
        top: auto;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        max-height: min(72dvh, 620px);
        margin: 0;
        transform: translateY(calc(100% + 18px));
    }

    .room-side-drawer.is-open {
        transform: translateY(0);
    }

    .room-session-feedback {
        position: fixed;
        z-index: 19;
        top: 72px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(420px, calc(100vw - 24px));
        margin: 0;
        color: #edf3f4;
        background: rgba(15, 28, 36, 0.92);
        transform: translate(-50%, -12px);
    }

    .room-session-feedback.is-visible {
        transform: translate(-50%, 0);
    }
}

@media (max-width: 640px) {
    .room-session-workspace {
        grid-template-rows: auto minmax(280px, 1fr) auto;
    }

    .room-session-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .room-session-actions .meeting-secondary-button {
        min-height: 40px;
        padding: 0 6px;
        font-size: 12px;
    }

    .room-stage {
        min-height: 280px;
        padding: 6px;
    }

    .room-stage .video-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
        min-height: 260px;
    }

    .room-control-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px;
        padding: 8px;
    }

    .room-control-bar .media-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .room-control-bar .meeting-control-button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 0 6px;
        font-size: 0;
    }

    .room-control-bar .meeting-control-button .meeting-icon {
        width: 20px;
        height: 20px;
    }

    .room-control-bar .meeting-danger-button {
        width: 48px;
        min-width: 48px;
        margin-left: 0;
    }

    .room-admin-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 760px) and (min-width: 901px) {
    body.is-room-session-active .meeting-room-shell,
    body.is-room-session-active .meeting-shell.is-session-active {
        padding: 8px 0;
    }

    .room-session-workspace {
        grid-template-rows: 54px minmax(0, 1fr) 62px;
        height: calc(100dvh - 16px);
        min-height: 520px;
    }

    .room-session-header {
        min-height: 54px;
    }

    .room-control-bar {
        min-height: 62px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .room-control-bar .meeting-control-button {
        min-height: 42px;
    }

    .room-side-drawer {
        top: 62px;
        bottom: 70px;
    }
}

/* 简约管理后台：默认只呈现摘要和单一数据工作区，低频操作进入暖纸抽屉与弹窗。 */
.meeting-admin-dashboard-shell {
    width: min(1240px, calc(100% - 36px));
    padding: 18px 0 48px;
}

.meeting-admin-dashboard-topbar {
    min-height: 58px;
    margin-bottom: 22px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid var(--meeting-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.meeting-admin-topbar-actions {
    flex-wrap: nowrap;
    gap: 8px;
}

.meeting-admin-session-pill {
    min-height: 40px;
    max-width: 260px;
    border-color: var(--meeting-border);
    color: var(--meeting-muted);
    background: rgba(251, 249, 244, 0.48);
    font-weight: 500;
}

.meeting-admin-dashboard-hero {
    min-height: 88px;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.meeting-admin-dashboard-hero h1 {
    font-size: 32px;
    font-weight: 500;
}

.meeting-admin-dashboard-hero .meeting-copy {
    min-height: 0;
    margin: 7px 0 0;
}

.meeting-admin-feedback {
    max-width: 440px;
    text-align: right;
}

.meeting-admin-summary-grid {
    gap: 10px;
    margin-bottom: 12px;
}

.meeting-admin-metric {
    min-height: 74px;
    padding: 14px 16px;
    border-color: var(--meeting-border);
    background: rgba(251, 249, 244, 0.7);
    box-shadow: var(--meeting-shadow-soft);
    backdrop-filter: blur(8px);
}

.meeting-admin-metric::before {
    width: 2px;
    border-radius: 0;
    background: var(--meeting-copper);
}

.meeting-admin-metric span {
    color: var(--meeting-muted);
    font-weight: 500;
}

.meeting-admin-metric strong {
    color: var(--meeting-ink);
    font-family: var(--meeting-title-font);
    font-size: 28px;
    font-weight: 500;
}

.meeting-admin-security-notice {
    display: flex;
    min-height: 58px;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--meeting-copper);
    color: var(--meeting-ink);
    background: rgba(251, 249, 244, 0.58);
}

.meeting-admin-security-notice > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.meeting-admin-security-notice strong {
    font-family: var(--meeting-title-font);
    font-weight: 500;
}

.meeting-admin-security-notice span {
    color: var(--meeting-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.meeting-admin-workspace {
    min-height: 410px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: rgba(251, 249, 244, 0.82);
}

.meeting-admin-workspace > .meeting-tab-list {
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.24);
}

.meeting-admin-workspace > [data-ui-tab-panel] {
    padding: 18px 20px 20px;
}

.meeting-admin-workspace .meeting-admin-section-header {
    align-items: center;
    margin-bottom: 12px;
}

.meeting-admin-workspace .meeting-admin-section-header h2 {
    font-family: var(--meeting-title-font);
    font-size: 19px;
    font-weight: 500;
}

.meeting-admin-room-table-wrap {
    height: min(390px, calc(100dvh - 430px));
    min-height: 220px;
    border-color: var(--meeting-border);
    background: rgba(255, 255, 255, 0.38);
}

.meeting-admin-room-table th,
.meeting-admin-participant-table th {
    color: var(--meeting-muted);
    background: var(--meeting-paper-solid);
    font-weight: 500;
}

.meeting-admin-room-table tr.is-selected td {
    background: rgba(139, 111, 78, 0.09);
}

.meeting-admin-event-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 300px;
    gap: 24px;
}

.meeting-admin-event-columns > section {
    min-width: 0;
}

.meeting-admin-event-columns h3 {
    color: var(--meeting-ink);
    font-family: var(--meeting-title-font);
    font-size: 16px;
    font-weight: 500;
}

.meeting-admin-event-list {
    max-height: min(390px, calc(100dvh - 440px));
    overflow-y: auto;
}

.meeting-admin-room-detail-panel,
.meeting-admin-settings-drawer {
    width: min(520px, 96vw);
}

.meeting-admin-room-detail-panel .meeting-admin-status-badge {
    margin-bottom: 12px;
}

.meeting-admin-room-detail-body {
    display: grid;
    gap: 16px;
}

.meeting-admin-room-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meeting-admin-participant-wrap {
    max-height: 250px;
}

.meeting-admin-room-control-card {
    display: grid;
    gap: 14px;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--meeting-border);
    background: transparent;
}

.meeting-admin-room-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meeting-admin-settings-drawer .meeting-tab-list {
    margin-bottom: 18px;
}

.meeting-admin-settings-drawer .meeting-admin-emergency-panel {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.meeting-admin-settings-drawer [data-ui-tab-panel] {
    display: grid;
    gap: 16px;
}

.meeting-admin-emergency-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.meeting-admin-emergency-card {
    min-height: 92px;
    border-color: var(--meeting-border);
    background: rgba(255, 255, 255, 0.46);
}

.meeting-admin-source-form {
    grid-template-columns: 1fr;
}

.meeting-admin-source-form .meeting-field:nth-child(3),
.meeting-admin-source-form .meeting-danger-button {
    grid-column: auto;
}

.meeting-admin-source-list {
    max-height: 280px;
    overflow-y: auto;
}

.meeting-admin-create-dialog {
    width: min(720px, calc(100% - 28px));
}

.meeting-admin-create-dialog .meeting-form {
    max-width: none;
}

.meeting-admin-create-result-dialog {
    width: min(640px, calc(100% - 28px));
}

.meeting-admin-create-result {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
}

.meeting-admin-create-fallback {
    width: 100%;
    margin-top: 12px;
}

@media (max-width: 640px) {
    .meeting-password-mode-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .meeting-admin-dashboard-shell {
        width: min(100% - 28px, 1240px);
    }

    .meeting-admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meeting-admin-room-table-wrap,
    .meeting-admin-event-list {
        height: auto;
        max-height: 430px;
    }
}

@media (max-width: 640px) {
    .meeting-admin-dashboard-shell {
        width: min(100% - 20px, 1240px);
        padding-top: 10px;
    }

    .meeting-admin-dashboard-topbar {
        display: flex;
        align-items: center;
    }

    .meeting-admin-topbar-actions {
        display: flex;
        width: auto;
        margin-left: auto;
    }

    .meeting-admin-session-pill {
        display: none;
    }

    .meeting-admin-topbar-actions .meeting-primary-button {
        width: 42px;
        min-width: 42px;
        padding: 0;
        font-size: 0;
    }

    .meeting-admin-dashboard-hero {
        display: grid;
        min-height: 0;
        gap: 10px;
    }

    .meeting-admin-dashboard-hero h1 {
        font-size: 27px;
    }

    .meeting-admin-feedback {
        min-width: 0;
        text-align: left;
    }

    .meeting-admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meeting-admin-metric {
        min-height: 68px;
        padding: 11px;
        gap: 8px;
    }

    .meeting-admin-metric strong {
        font-size: 23px;
    }

    .meeting-admin-security-notice {
        display: grid;
    }

    .meeting-admin-security-notice .meeting-secondary-button {
        width: 100%;
    }

    .meeting-admin-workspace > .meeting-tab-list {
        padding: 0 14px;
    }

    .meeting-admin-workspace > [data-ui-tab-panel] {
        padding: 14px;
    }

    .meeting-admin-event-columns,
    .meeting-admin-room-meta {
        grid-template-columns: 1fr;
    }

    .meeting-admin-room-detail-panel,
    .meeting-admin-settings-drawer {
        width: 100%;
    }
}

/* 浏览器验收修正：移除历史主题色和嵌套 only-child 对宫格行数的误判。 */
.prejoin-lobby::before {
    background: var(--meeting-copper);
}

.room-session {
    margin: 0;
    padding: 0;
}

.room-stage .video-grid {
    grid-template-rows: minmax(0, 1fr);
}

/* 多成员两行规则只属于宫格；舞台模式必须保持单行，否则主画面会被压缩到画布上半区。 */
.room-stage .meeting-stage-surface[data-view-mode="grid"] .video-grid:has(.remote-video-list .video-tile:nth-child(3)) {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.room-stage .video-grid .video-tile:only-child {
    grid-column: auto;
    grid-row: auto;
}

.room-control-bar .meeting-control-button {
    width: 124px;
    min-width: 124px;
}

@media (max-width: 900px) {
    .room-stage .video-grid,
    .room-stage .meeting-stage-surface[data-view-mode="grid"] .video-grid:has(.remote-video-list .video-tile:nth-child(3)) {
        height: auto;
        min-height: 0;
        align-self: center;
        grid-template-rows: none;
        grid-auto-rows: auto;
    }

    .room-stage .video-grid .video-tile {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 640px) {
    .room-stage {
        min-height: 0;
    }

    .room-stage .video-grid {
        height: auto;
        min-height: 0;
        align-self: center;
        grid-template-rows: none;
        grid-auto-rows: auto;
    }

    .room-stage .video-grid .video-tile {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .room-control-bar .meeting-control-button {
        width: 100%;
        min-width: 0;
    }

    .room-control-bar .meeting-danger-button {
        width: 48px;
        min-width: 48px;
    }
}

/* 舞台观看视图：同一批视频格通过布局重排进入主画面与缩略带，避免复制媒体元素造成流状态分叉。 */
.meeting-stage-surface {
    --meeting-stage-rail-width: 214px;
    --meeting-stage-thumbnail-height: clamp(104px, 15vh, 156px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    overflow: hidden;
    border-radius: var(--meeting-radius-small);
    background: rgba(7, 16, 22, 0.42);
}

.meeting-stage-rail {
    display: contents;
}

.meeting-participant-status-list {
    display: none;
}

.meeting-view-settings {
    position: relative;
    display: flex;
    flex: 0 0 auto;
}

.meeting-view-settings-trigger {
    min-width: 104px !important;
}

.meeting-view-settings-menu {
    position: absolute;
    z-index: 42;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: 190px;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(200, 221, 232, 0.2);
    border-radius: var(--meeting-radius-small);
    background: rgba(15, 28, 36, 0.98);
    box-shadow: 0 14px 32px rgba(7, 16, 22, 0.34);
}

/* 会议头部与画布分别建立层级，菜单必须覆盖缩略带而不能被后续视频节点压住。 */
.room-session-header .meeting-view-settings-menu {
    z-index: 60;
}

.meeting-stage-view-button {
    display: inline-flex;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    gap: 9px;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgba(200, 221, 232, 0.16);
    border-radius: 6px;
    color: rgba(237, 243, 244, 0.86);
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
    transition: border-color var(--meeting-motion) ease, color var(--meeting-motion) ease, background var(--meeting-motion) ease;
}

.meeting-stage-view-button:hover,
.meeting-stage-view-button[aria-pressed="true"] {
    border-color: rgba(201, 174, 132, 0.7);
    color: #ffffff;
    background: rgba(139, 111, 78, 0.3);
}

.meeting-media-quality-mode-group {
    display: grid;
    gap: 4px;
}

.meeting-media-quality-mode-group::before {
    display: block;
    padding: 3px 4px 1px;
    color: rgba(237, 243, 244, 0.52);
    content: "媒体质量";
    font-size: 12px;
    line-height: 1.2;
}

.meeting-media-quality-mode-option[aria-pressed="true"] .meeting-icon {
    color: #f1d8a7;
}

.meeting-stage-view-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.meeting-stage-view-button:focus-visible {
    outline: 2px solid #f1d8a7;
    outline-offset: 2px;
}

.meeting-stage-view-button .meeting-icon {
    width: 18px;
    height: 18px;
}

.meeting-stage-rail-toggle .meeting-view-switch-track {
    position: relative;
    width: 32px;
    height: 18px;
    margin-left: auto;
    flex: 0 0 auto;
    border: 1px solid rgba(200, 221, 232, 0.28);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
    transition: border-color var(--meeting-motion) ease, background var(--meeting-motion) ease;
}

.meeting-stage-rail-toggle .meeting-view-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(237, 243, 244, 0.76);
    transition: transform var(--meeting-motion) ease, background var(--meeting-motion) ease;
}

.meeting-stage-rail-toggle[aria-checked="true"] .meeting-view-switch-track {
    border-color: rgba(241, 216, 167, 0.72);
    background: rgba(139, 111, 78, 0.58);
}

.meeting-stage-rail-toggle[aria-checked="true"] .meeting-view-switch-thumb {
    transform: translateX(14px);
    background: #f1d8a7;
}

.room-stage .meeting-stage-surface .video-grid {
    height: 100%;
    min-height: 0;
    align-self: stretch;
    border: 1px solid rgba(200, 221, 232, 0.12);
    border-radius: 0;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px var(--meeting-stage-rail-width);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 0;
    padding: 0;
    background: #071012;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    grid-auto-rows: var(--meeting-stage-thumbnail-height);
    align-content: start;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 0 2px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(201, 174, 132, 0.52) transparent;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail .remote-video-list,
.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-participant-status-list {
    display: contents;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .remote-waiting-tile {
    display: none;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-tile.is-focused {
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

/* 本机共享时视频格是 video-grid 的直接子项，必须显式拉满每一层高度，避免旧响应式比例规则在下方留下空白。 */
.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid > .video-tile[data-video-role="local"].is-focused.is-screen-sharing {
    align-self: stretch;
    min-height: 0;
    height: 100%;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid > .video-tile[data-video-role="local"].is-focused.is-screen-sharing > video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .remote-video-list {
    display: contents;
}

.meeting-stage-rail-resizer {
    display: none;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail-resizer {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    border-right: 1px solid rgba(200, 221, 232, 0.16);
    cursor: col-resize;
    touch-action: none;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail-resizer:hover,
.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail-resizer.is-resizing,
.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail-resizer:focus-visible {
    border-right-color: rgba(241, 216, 167, 0.94);
    background: rgba(201, 174, 132, 0.16);
    outline: none;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail .video-tile {
    width: 100%;
    max-width: none;
    min-height: 0;
    height: var(--meeting-stage-thumbnail-height);
    aspect-ratio: 16 / 9;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid.is-focused-remote .meeting-stage-rail .video-tile.is-focused {
    position: absolute;
    inset: 0 calc(var(--meeting-stage-rail-width) + 12px) 0 0;
    width: auto;
    height: auto;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid.is-focused-remote > .video-tile[data-video-role="local"] {
    z-index: 3;
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    height: var(--meeting-stage-thumbnail-height);
    min-height: 0;
    align-self: start;
    aspect-ratio: 16 / 9;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid.is-focused-remote .meeting-stage-rail {
    padding-top: calc(var(--meeting-stage-thumbnail-height) + 8px);
}

.participant-rail-card {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    border: 1px solid rgba(200, 221, 232, 0.14);
    border-radius: var(--meeting-radius-small);
    color: rgba(237, 243, 244, 0.9);
    background: linear-gradient(145deg, rgba(34, 57, 69, 0.86), rgba(15, 28, 36, 0.96));
    box-shadow: inset 0 0 34px rgba(7, 16, 22, 0.28);
}

.participant-rail-card-name,
.participant-rail-card-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-rail-card-name {
    font-size: 14px;
    font-weight: 700;
}

.participant-rail-card-status {
    color: rgba(201, 225, 219, 0.66);
    font-size: 12px;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail .video-tile.is-participant-video-unavailable:not(.is-focused),
.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid.is-focused-remote > .video-tile[data-video-role="local"].is-participant-video-unavailable {
    display: none;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"] .video-tile.is-focused video,
.meeting-stage-surface:fullscreen .video-tile.is-focused video,
.meeting-stage-surface:-webkit-full-screen .video-tile.is-focused video {
    object-fit: contain;
    background: #000000;
}

.meeting-stage-surface:fullscreen,
.meeting-stage-surface:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: #050b0d;
}

.meeting-stage-surface:fullscreen .video-grid,
.meeting-stage-surface:-webkit-full-screen .video-grid {
    min-height: 0;
    height: 100%;
}

.meeting-stage-surface:fullscreen .view-mode-feedback,
.meeting-stage-surface:-webkit-full-screen .view-mode-feedback {
    margin: 6px 0 0;
    color: #f2f6f7;
}

@media (max-width: 900px) {
    .meeting-stage-surface {
        --meeting-stage-thumbnail-height: 104px;
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(220px, 1fr) var(--meeting-stage-thumbnail-height);
        align-items: stretch;
        height: 100%;
        min-height: 0;
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .video-tile.is-focused {
        grid-column: 1;
        grid-row: 1;
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail {
        display: flex;
        grid-column: 1;
        grid-row: 2;
        gap: 8px;
        min-height: 0;
        padding: 0 0 2px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail .remote-video-list,
    .room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-participant-status-list {
        display: contents;
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail-resizer {
        display: none;
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .meeting-stage-rail .video-tile,
    .room-stage .meeting-stage-surface[data-view-mode="stage"] .participant-rail-card {
        width: calc(var(--meeting-stage-thumbnail-height) * 1.7778);
        min-width: calc(var(--meeting-stage-thumbnail-height) * 1.7778);
        height: var(--meeting-stage-thumbnail-height);
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid.is-focused-remote .meeting-stage-rail .video-tile.is-focused {
        inset: 0 0 calc(var(--meeting-stage-thumbnail-height) + 10px) 0;
        width: auto;
        height: auto;
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid.is-focused-remote > .video-tile[data-video-role="local"] {
        grid-column: 1;
        grid-row: 2;
        width: calc(var(--meeting-stage-thumbnail-height) * 1.7778);
        min-width: calc(var(--meeting-stage-thumbnail-height) * 1.7778);
        height: var(--meeting-stage-thumbnail-height);
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid.is-focused-remote .meeting-stage-rail {
        padding: 0 0 2px calc((var(--meeting-stage-thumbnail-height) * 1.7778) + 8px);
    }
}

@media (max-width: 640px) {
    .meeting-stage-surface {
        --meeting-stage-thumbnail-height: 82px;
    }

    .room-stage .meeting-stage-surface[data-view-mode="stage"] .video-grid {
        grid-template-rows: minmax(180px, 1fr) var(--meeting-stage-thumbnail-height);
    }
}

/* 专注模式只收纳缩略成员，远端主舞台仍留在原 DOM 中，避免隐藏祖先导致共享画面一并消失。 */
.room-stage .meeting-stage-surface[data-view-mode="stage"][data-stage-rail-visible="false"] .video-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.room-stage .meeting-stage-surface[data-view-mode="stage"][data-stage-rail-visible="false"] .meeting-stage-rail {
    display: contents;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"][data-stage-rail-visible="false"] .meeting-stage-rail .video-tile:not(.is-focused),
.room-stage .meeting-stage-surface[data-view-mode="stage"][data-stage-rail-visible="false"] .participant-rail-card,
.room-stage .meeting-stage-surface[data-view-mode="stage"][data-stage-rail-visible="false"] .video-grid.is-focused-remote > .video-tile[data-video-role="local"],
.room-stage .meeting-stage-surface[data-view-mode="stage"][data-stage-rail-visible="false"] .meeting-stage-rail-resizer {
    display: none;
}

.room-stage .meeting-stage-surface[data-view-mode="stage"][data-stage-rail-visible="false"] .video-grid.is-focused-remote .meeting-stage-rail .video-tile.is-focused {
    display: block;
    inset: 0;
    width: auto;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .meeting-stage-view-button,
    .meeting-stage-rail-resizer,
    .meeting-view-switch-track,
    .meeting-view-switch-thumb {
        transition: none;
    }
}

body.meeting-page-with-icp {
    /* 备案页脚需要贴近短页面底部，同时不能影响会议室全屏工作台的独立布局。 */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

body.meeting-page-with-icp .meeting-shell {
    /* 覆盖入口页原本的整屏高度，让公共页脚能进入首屏底部而不是被推到屏幕外。 */
    flex: 1 0 auto;
    min-height: 0;
}

.meeting-icp-footer {
    position: relative;
    flex: 0 0 auto;
    padding: 18px 20px 24px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
}

.meeting-icp-footer p {
    margin: 0;
}

.meeting-icp-footer a {
    color: inherit;
    text-decoration: none;
}

.meeting-icp-footer a:hover,
.meeting-icp-footer a:focus-visible {
    color: rgba(15, 23, 42, 0.78);
    text-decoration: underline;
}

.meeting-icp-record {
    margin-top: 4px !important;
}

/* 配置中心是独立后台页面，布局保持工具化密度，同时复用既有按钮、抽屉和表格基础令牌。 */
.meeting-page-admin-configs {
    background: #f4f7f6;
}

.meeting-config-admin-shell {
    width: min(1180px, calc(100% - 32px));
    padding: 0 0 48px;
}

.meeting-config-admin-topbar,
.meeting-config-admin-header,
.meeting-config-toolbar,
.meeting-config-table-panel {
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

.meeting-config-admin-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 24px 0 18px;
    padding: 26px 28px;
    border: 1px solid #d9e5e1;
    border-radius: 8px;
    background: #ffffff;
}

.meeting-config-admin-header h1 {
    margin: 0 0 10px;
    color: #10201c;
    font-size: 32px;
    line-height: 1.15;
}

.meeting-config-admin-header .meeting-copy {
    max-width: 720px;
    margin: 0;
}

.meeting-config-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.meeting-config-feedback {
    margin: 0 0 14px;
}

.meeting-config-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(130px, 160px) minmax(240px, 1fr);
    gap: 14px;
    padding: 18px;
}

.meeting-config-table-panel {
    padding: 22px;
}

.meeting-config-table-wrap {
    overflow-x: auto;
}

.meeting-config-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    color: #26332f;
    font-size: 14px;
}

.meeting-config-table th,
.meeting-config-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #e2ebe8;
    text-align: left;
    vertical-align: top;
}

.meeting-config-table th {
    color: #50615c;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    background: #f7faf9;
}

.meeting-config-table td:nth-child(5) {
    max-width: 240px;
    color: #4b5f58;
    word-break: break-all;
}

.meeting-config-name-cell {
    display: grid;
    gap: 4px;
    min-width: 140px;
    font-weight: 800;
}

.meeting-config-name-cell small {
    color: #667a73;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.meeting-config-key-text {
    display: inline-block;
    max-width: 210px;
    overflow-wrap: anywhere;
    color: #0f766e;
    font-size: 12px;
}

.meeting-config-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 210px;
}

.meeting-config-row-actions .meeting-secondary-button,
.meeting-config-row-actions .meeting-danger-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 13px;
}

.meeting-config-drawer .meeting-form {
    max-width: none;
}

.meeting-config-drawer textarea#meeting-config-value {
    min-height: 128px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
}

.meeting-config-drawer input[readonly] {
    color: #64748b;
    background: #f1f5f9;
}

.meeting-config-drawer .meeting-dialog-actions {
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .meeting-config-admin-shell {
        width: min(100% - 20px, 1180px);
        padding-top: 16px;
    }

    .meeting-config-admin-header {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
    }

    .meeting-config-admin-header h1 {
        font-size: 26px;
    }

    .meeting-config-header-actions .meeting-primary-button {
        width: 100%;
    }

    .meeting-config-toolbar {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }

    .meeting-config-table-panel {
        padding: 16px;
    }

    .meeting-icp-footer {
        padding: 14px 16px 18px;
        font-size: 12px;
    }
}