:root {
  --ink: #243e35;
  --muted: #66796f;
  --accent: #275d4b;
  --line: #dce4dc;
  --paper: #fffefa;
  --wash: #f5f6f0;
  --soft: #eaf0e5;
  background: var(--wash);
  color: var(--ink);
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

body { background: var(--wash); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #b68e43; outline-offset: 3px; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.4; }
.eyebrow, .card-kicker { color: #5d7863; font-size: 11px; letter-spacing: .13em; }
.primary-button { background: var(--accent); box-shadow: 0 4px 10px #275d4b12; font-size: 14px; min-height: 44px; border-radius: 10px; justify-content: center; }
.primary-button:hover:not(:disabled) { background: #1c4839; }
.ghost-button { font-size: 13px; min-height: 40px; padding: 9px 13px; border-color: var(--line); border-radius: 9px; color: #4b6356; background: #fffefa; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ghost-button:hover:not(:disabled) { background: var(--soft); border-color: #b9ccb8; }
.icon-button { min-width: 40px; min-height: 40px; }
.subtle-copy, .login-footnote { color: var(--muted); font-size: 13px; line-height: 1.7; }
.form-stack input, input[type="search"], .room-discovery input { font-size: 15px; color: var(--ink); height: 46px; border: 1px solid #ced9ce; background: #fff; border-radius: 9px; padding: 0 13px; }
.form-stack input::placeholder, input::placeholder, textarea::placeholder { color: #7a887e; }
.input-wrap input { padding-left: 42px; }
.form-stack input:focus, .room-discovery input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #275d4b15; }
.field-label, .form-stack label { font-size: 13px; color: #445c4c; }
select { border: 1px solid #ced9ce; border-radius: 9px; min-height: 44px; background: #fff; color: var(--ink); padding: 9px 12px; max-width: 100%; }
.form-error { font-size: 13px; line-height: 1.6; }

.login-view { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); }
.login-art { background: #204f42; min-height: 100dvh; }
.login-art::before { background: radial-gradient(ellipse at 5% 80%, #83996c88, transparent 55%), linear-gradient(135deg, #203f35, #36735e); }
.login-art::after, .art-orbit { border-color: #ebf0df30; }
.swatch-one { background: linear-gradient(140deg, #f0d8ad, #d5a376 60%, #a87b5b); opacity: .9; }
.swatch-two { background: linear-gradient(150deg, #658570, #9caf84 75%); }
.swatch-three { background: linear-gradient(135deg, #efe3b7, #ddbd81); }
.art-caption { left: 9%; bottom: 10%; }
.art-caption .eyebrow { color: #dde8cf; }
.art-caption strong { font-weight: 600; letter-spacing: -.04em; }
.login-panel { padding: 7vh clamp(35px, 6vw, 96px); background: var(--paper); justify-content: center; }
.brand-lockup strong { color: #264f3e; letter-spacing: .08em; }
.brand-lockup > div:last-child > span { color: #72806c; font-size: 10px; letter-spacing: .19em; }
.brand-mark { background: #376c53; }
.login-copy { margin-top: clamp(40px, 8vh, 100px); }
.login-copy h1 { font-size: clamp(28px, 3vw, 38px); color: #263e32; margin-bottom: 12px; }
.login-copy p { color: var(--muted); font-size: 14px; margin-bottom: 28px; line-height: 1.8; }
.login-footnote { margin-top: 42px; font-size: 12px; }
.auth-actions { gap: 12px; }
.auth-actions > button { flex: 1; }

.sidebar { width: 232px; flex-basis: 232px; position: sticky; top: 0; height: 100dvh; min-height: 0; padding: 26px 16px 16px; background: var(--paper); border-color: var(--line); }
.sidebar-head { padding: 0 8px; align-items: center; }
.workspace-card { margin: 30px 0 24px; padding: 14px 12px; background: #edf1e6; border-color: #e0e6d7; }
.workspace-card strong { font-size: 13px; color: #3c5541; }
.workspace-card span:not(.live-dot) { font-size: 11px; color: #687e60; }
.workspace-icon { background: #6f8660; }
.nav-item { font-size: 14px; padding: 12px; min-height: 46px; color: #5e6e5c; }
.nav-item.active { background: #e6eddd; color: #2e5439; }
.nav-item:hover { background: #eff3e9; }
.nav-count { background: #d4e1ca; color: #3a5b3a; font-size: 11px; }
.sidebar-section-title { margin: 26px 10px 10px; font-size: 12px; color: #697a66; }
.member-list { flex: 1; min-height: 40px; }
.member-meta strong, .account-meta strong { font-size: 13px; }
.member-meta span, .account-meta span, .connection-mini { font-size: 11px; color: #71816d; }
.sidebar-bottom { flex-shrink: 0; }
.account-chip { gap: 8px; }
.account-meta strong { overflow-wrap: anywhere; }
.account-chip > .account-meta { min-width: 0; }
.connection-mini { padding: 16px 8px; }
.topbar { min-height: 76px; height: auto; padding: 15px clamp(22px, 3vw, 48px); background: #fffefa; border-color: var(--line); gap: 14px; }
.topbar-location { display: flex; gap: 12px; align-items: center; min-width: 0; }
.breadcrumbs { font-size: 13px; gap: 10px; min-width: 0; }
.breadcrumbs > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #36513d; }
.topbar-actions { gap: 8px; flex-shrink: 0; }
.topbar-actions > .ghost-button { font-size: 12px; min-height: 36px; }
.status-pill { font-size: 11px; color: #6d7a63; border-color: var(--line); background: #f6f8f2; }
.active-room-return { display: flex; align-items: center; gap: 8px; border: 1px solid #c6d6ba; background: #eaf1e1; color: #3d643f; min-height: 36px; padding: 6px 12px; border-radius: 9px; font-size: 12px; }
.view-panel { padding: 34px clamp(22px, 3vw, 48px) 55px; }
.room-heading { margin-bottom: 26px; gap: 22px; align-items: center; }
.room-heading h1 { font-size: 30px; font-weight: 650; letter-spacing: -.03em; margin: 9px 0 10px; color: #2a4132; }
.room-heading p { font-size: 14px; color: var(--muted); line-height: 1.8; max-width: 660px; }
.room-heading .stage-actions, .square-toolbar { flex-wrap: wrap; gap: 9px; }
.lobby-heading { position: relative; padding: 32px; background: #e9eddf; border: 1px solid #dce3cf; border-radius: 18px; overflow: hidden; align-items: center; }
.lobby-heading::after { content: ''; position: absolute; width: 240px; height: 240px; border: 40px solid #a1b18b22; border-radius: 50%; right: -70px; top: -90px; pointer-events: none; }
.lobby-heading > div { position: relative; z-index: 1; }
.lobby-heading h1 { font-size: clamp(26px, 2.7vw, 37px); }
.lobby-heading p { color: #607058; margin: 0 0 16px; }
.lobby-heading .stage-actions { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; }
.lobby-heading .stage-actions .primary-button { min-width: 172px; min-height: 48px; }
.lobby-heading .stage-actions .ghost-button { background: transparent; border-color: transparent; font-size: 12px; }
.lobby-features { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.lobby-features > span { color: #52694d; font-size: 12px; }
.lobby-features > span::before { content: '✓'; margin-right: 5px; color: #7c915e; }
.lobby-summary { display: flex; align-items: center; gap: 32px; padding: 0 4px 25px; margin-top: -2px; border-bottom: 1px solid var(--line); }
.lobby-summary > div { display: flex; gap: 9px; align-items: baseline; }
.lobby-summary strong { font-size: 25px; font-weight: 600; color: #395338; font-variant-numeric: tabular-nums; }
.lobby-summary span { font-size: 12px; color: #6e7c67; }
.lobby-summary .lobby-refresh-note { margin-left: auto; }
.lobby-summary > button { min-height: 34px; padding: 6px 11px; font-size: 12px; }
#room-directory-status:empty { display: none; }
#room-directory-status:not(:empty) { padding: 12px 16px; border-radius: 10px; background: #fff0de; color: #85612d; }
.room-discovery { margin: 25px 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px 18px; }
.room-discovery label { font-size: 12px; color: #596c53; font-weight: 600; gap: 7px; }
.room-discovery input, .room-discovery select { width: 100%; min-width: 0; height: 46px; font-size: 14px; font-weight: 400; }
.room-discovery #room-search-status { grid-column: 1 / -1; font-size: 12px; }
.lobby-layout { grid-template-columns: minmax(0, 1fr) 294px; gap: 22px; }
.room-directory { grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr)); gap: 18px; }
.room-directory-card { padding: 23px; border-radius: 15px; border-color: var(--line); background: var(--paper); display: flex; flex-direction: column; box-shadow: 0 3px 4px #30442b03; transition: border-color .2s, box-shadow .2s; }
.room-directory-card:hover { border-color: #acbda3; box-shadow: 0 7px 24px #30442b08; }
.room-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room-card-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #68814f; background: #edf0df; font-size: 20px; border-radius: 12px; }
.room-directory-card:nth-child(3n+2) .room-card-icon { background: #f3e9df; color: #a37c5c; }
.room-directory-card:nth-child(3n+3) .room-card-icon { background: #e6eae5; color: #64827d; }
.room-access-badge { font-size: 11px; color: #57704d; background: #edf2e7; padding: 4px 8px; border-radius: 6px; }
.room-access-badge.is-private { color: #8a7450; background: #f5efdf; }
.room-directory-card h2 { font-size: 20px; margin: 18px 0 9px; color: #2a4231; }
.room-directory-card p { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.8; }
.room-directory-card .room-directory-topic { min-height: 46px; }
.room-directory-card .room-card-owner { font-size: 12px; margin-bottom: 6px; color: #7a8573; }
.room-card-counts { font-size: 12px; color: #5d7153; margin-bottom: 22px; }
.room-directory-card .stage-actions { margin-top: auto; gap: 8px; }
.room-directory-card .primary-button { flex: 1; font-size: 13px; }
.room-directory-card .ghost-button { font-size: 12px; }
.room-directory-card .room-end-action { flex-basis: 100%; border: 0; min-height: 28px; padding: 3px; color: #877b6a; background: transparent; }
.room-directory-card .room-end-action:hover { color: #a34f42; background: #f9f0e9; }
.chat-card { background: var(--paper); border-color: var(--line); border-radius: 15px; box-shadow: none; }
.lobby-layout > .chat-card { height: 445px; position: sticky; top: 22px; }
.chat-head { padding: 20px 18px; gap: 8px; }
.chat-head h2 { font-size: 16px; margin-top: 5px; }
.chat-live { font-size: 10px; color: #6b805d; background: #edf1e5; white-space: nowrap; }
.chat-messages { padding: 18px; }
.chat-message strong { font-size: 12px; color: #566e46; }
.chat-message p { font-size: 14px; line-height: 1.7; }
.chat-empty { color: #89917d; font-size: 13px; line-height: 1.9; text-align: center; padding: 36px 12px; }
.chat-form { margin: 0 12px 12px; border-color: var(--line); border-radius: 10px; }
.chat-form input { min-width: 0; font-size: 13px; }
.send-button { min-width: 36px; min-height: 36px; background: #52704b; }
.stage-empty { border: 1px dashed #cbd6c0; border-radius: 16px; padding: 42px 24px; background: #fafbf6; gap: 14px; }
.stage-empty strong { font-size: 18px; color: #4c6342; }
.stage-empty > span { font-size: 13px; color: #7a8770; max-width: 380px; line-height: 1.8; }
.empty-illustration { color: #819366; }
.stage-card, .square-panel, .gallery-panel, .practice-card, .account-form-card, .account-list-card, .announcement-card { background: var(--paper); border-color: var(--line); box-shadow: none; border-radius: 15px; }
.stage-toolbar { min-height: 66px; height: auto; gap: 12px; padding: 14px 20px; flex-wrap: wrap; }
.stage-title strong { font-size: 15px; }
.stage-title > span:last-child { font-size: 11px; }
.room-stats > div > strong { font-size: 24px; color: #46613d; }
.room-stats > div > span { font-size: 12px; }
.studio-status-bar { background: #eaf0e3; border-color: #d8e2ce; color: #4e6640; }
.studio-status-bar strong { font-size: 14px; }
.studio-status-bar span { font-size: 12px; }
.audio-health { border-radius: 12px; font-size: 12px; flex-wrap: wrap; }
.audio-health small { font-size: 11px; }
.voice-bar { background: #f0f3ed; border-color: var(--line); }
.voice-bar small { color: #738168; }
.link-panel { border-color: var(--line); background: var(--paper); }
.link-panel .subtle-copy { font-size: 12px; }
.connection-details { margin: 0 0 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.connection-details > summary { padding: 15px 20px; color: #5b7050; font-size: 13px; cursor: pointer; }
.connection-details > summary > span { float: right; color: #89927e; font-size: 11px; }
.connection-details > .link-panel { margin-bottom: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.square-toolbar { display: flex; }
.square-feed { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.square-panel { padding: 24px; }
.square-panel > h2 { font-size: 19px; color: #3a5137; margin-top: 22px; }
.segmented { background: #eff2e8; border-radius: 10px; padding: 4px; gap: 3px; }
.segmented button { font-size: 13px; min-height: 38px; padding: 7px 16px; border-radius: 7px; color: #74806b; }
.segmented button.active { color: #3a5f36; background: #fffefa; box-shadow: 0 2px 5px #31442d0b; }
.social-card { background: #fff; border: 1px solid var(--line); padding: 19px; border-radius: 13px; }
.social-author { color: #416437; font-size: 14px; }
.social-card > small { font-size: 11px; color: #7e8a76; }
.social-card-text { font-size: 14px; line-height: 1.9; color: #56624f; margin-bottom: 10px; }
.social-read-more { min-height: 32px; padding: 2px 0; background: transparent; color: #6b7f58; border: 0; font-size: 12px; justify-content: flex-start; }
.social-card-actions { border-top: 1px solid #edf0e8; padding-top: 12px; margin-top: 14px; gap: 7px; }
.social-card-actions button { font-size: 12px; min-height: 36px; padding: 6px 11px; }
.social-image-button { border-radius: 9px; }
.square-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 12px; background: #f7f9f1; }
.square-empty h3 { color: #566b49; margin-top: 0; }
.square-empty p { color: #77846b; font-size: 14px; }
.learning-records { background: #eef2e7; border-color: var(--line); margin-top: 24px; border-radius: 12px; }
.learning-records > summary { font-size: 14px; padding: 18px; color: #61734f; }
.upgrade-banner { background: #eef1e4; border-color: #dce5cf; padding: 10px clamp(22px, 3vw, 48px); gap: 8px; }
.upgrade-banner > button:first-child { min-width: 0; gap: 12px; color: #5f734b; }
.upgrade-banner > button:first-child { flex-wrap: nowrap; }
.upgrade-banner strong { white-space: nowrap; font-size: 12px; }
#upgrade-banner-summary { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 12px; text-align: left; }
.upgrade-banner > button:first-child > span:last-child { white-space: nowrap; font-size: 12px; }
.announcement-list-item { border-color: var(--line); border-radius: 14px; background: var(--paper); padding: 24px; }
.announcement-list-item h2 { color: #3e5b35; font-size: 20px; }
.announcement-list-item p, .announcement-card .social-post-text { font-size: 15px; line-height: 1.9; color: #5f6f54; }
.announcement-card { padding: 24px; }
.announcement-summary strong { color: #3e5b35; font-size: 18px; }
.announcement-summary p { color: #67755a; font-size: 14px; }
.announcement-summary small { color: #7c8971; font-size: 12px; }
.paper-dialog, .simple-dialog, .room-access-dialog { border: 1px solid #d4ddcc; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 28px; box-shadow: 0 25px 100px #192c3240; max-width: min(720px, calc(100vw - 32px)); max-height: 90dvh; overflow-y: auto; }
dialog::backdrop { background: #1e302969; backdrop-filter: blur(4px); }
.dialog-heading h2, .room-access-dialog h2 { font-size: 21px; color: #345031; }
.paper-dialog p, .paper-dialog label { line-height: 1.8; }
.paper-dialog .stage-actions { flex-wrap: wrap; }
.help-header { background: var(--paper); border-color: var(--line); }
.help-content > section, .help-nav { background: var(--paper); border-color: var(--line); border-radius: 15px; }
.help-content p, .help-content li { font-size: 15px; line-height: 1.9; color: #5c6c52; }
.help-content h2 { color: #385431; }

.meeting-view { background: #151d1a; color: #e8eee4; }
.meeting-head, .meeting-footer { background: #202d26; border-color: #354337; }
.meeting-title .eyebrow { color: #93aa85; }
.meeting-main .focus-media { background: #0e1511; border: 1px solid #2b3a2e; border-radius: 12px; }
.meeting-control { font-size: 13px; padding: 10px 12px; color: #c6d4c0; min-height: 44px; }
.meeting-control:hover { background: #344536; }
.meeting-control[aria-pressed="true"], .meeting-control[aria-expanded="true"] { background: #3c5b3e; border-color: #759a65; color: #f2f7ed; }
#meeting-share { background: #4c7047; color: #fff; border-color: #678a59; }
#meeting-share[aria-pressed="true"] { background: #855443; border-color: #b68570; }
.room-invite-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-weight: 600; }
#overview-invite { min-height: 40px; }
#meeting-room-invite { background: #354f38; border-color: #7d9b68; color: #eef6df; }
#meeting-room-invite:hover { background: #456345; border-color: #abc38b; }
.meeting-button { background: #2c4031; border-color: #4a5e46; color: #dfebd7; font-size: 12px; min-height: 36px; }
.meeting-button:hover { background: #3b5340; }
.meeting-toolbar { gap: 5px; justify-content: center; }
.meeting-control.meeting-leave { margin-left: 8px; background: #683f36; color: #ffdbca; }
.meeting-more-panel { display: contents; }
.meeting-footer { position: relative; padding: 12px 16px max(10px, env(safe-area-inset-bottom)); }
.meeting-copy, .meeting-voice-line { color: #acbea1; font-size: 12px; }
.meeting-footer .meeting-copy { margin-top: 6px; }
.meeting-panel { background: #f7f8f0; color: #3f5435; border-color: #455740; }
.meeting-panel-head { border-color: var(--line); }
.meeting-panel .meeting-button { color: #597349; background: #e7efdd; border-color: #cad7bc; }
.meeting-panel .meeting-copy { color: #7d8b70; }
.meeting-avatar { color: #60804f; background: #e6eddd; }
.meeting-member { border-color: var(--line); }
.meeting-member small { color: #7f8d73; }
.meeting-tile[aria-pressed="true"] { border-color: #93b276; }
.meeting-chat-tabs button[aria-pressed="true"] { background: #dae7cc; color: #4b6c3a; }
#navigation-toggle, #navigation-close, #meeting-more-toggle { display: none; }

@media (max-width: 1200px) {
  .lobby-layout { grid-template-columns: minmax(0, 1fr); }
  .lobby-layout > .chat-card { height: 330px; position: static; }
  .meeting-toolbar { display: flex; flex-wrap: wrap; }
  #meeting-more-toggle { display: inline-flex; }
  .meeting-more-panel { display: none; position: absolute; z-index: 5; right: 16px; bottom: calc(100% + 8px); width: min(350px, calc(100% - 32px)); max-height: 50dvh; overflow-y: auto; padding: 12px; background: #263b2e; border: 1px solid #4c6345; border-radius: 14px; box-shadow: 0 -12px 45px #0006; }
  .meeting-more-panel.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .meeting-more-panel .meeting-control { white-space: normal; background: #314a38; font-size: 12px; }
}

@media (max-width: 900px) {
  .workspace-view { display: block; }
  .interface-ready .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, calc(100vw - 44px)); height: 100dvh; z-index: 42; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; border-right: 1px solid var(--line); padding: 22px 18px; }
  .interface-ready .navigation-open .sidebar { transform: translateX(0); visibility: visible; }
  .navigation-open { overflow: hidden; }
  .navigation-backdrop { position: fixed; inset: 0; z-index: 41; border: 0; background: #1d332e66; backdrop-filter: blur(3px); }
  #navigation-toggle, #navigation-close { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
  #navigation-toggle { min-width: 44px; padding: 7px 10px; font-size: 16px; color: #526842; border: 0; background: #edf1e5; }
  #navigation-toggle > span { font-size: 13px; }
  .sidebar .workspace-card { display: flex; margin: 24px 0 20px; }
  .sidebar .sidebar-section-title { display: flex; }
  .sidebar .member-list { display: flex; }
  .sidebar .connection-mini { display: flex; }
  .sidebar .main-nav { display: flex; flex-direction: column; flex-wrap: nowrap; margin-top: 0; }
  .sidebar .nav-item { width: 100%; font-size: 14px; }
  .sidebar .sidebar-bottom { margin-top: auto; }
  .sidebar .account-chip { padding-top: 14px; }
  .sidebar #security-open { width: 100%; margin-top: 12px; }
  .topbar { min-height: 68px; padding: 12px 20px; flex-wrap: nowrap; }
  .topbar-actions { flex-wrap: nowrap; gap: 7px; }
  .breadcrumbs > span, #topbar-status { display: none; }
  .view-panel { padding: 25px 24px 45px; }
  .lobby-heading { padding: 27px; flex-direction: row; }
  .room-discovery { grid-template-columns: minmax(0, 1fr) 175px; }
  .room-stats { width: auto; }
}

@media (max-width: 760px) {
  .login-view { grid-template-columns: 1fr; }
  .login-art { min-height: 210px; }
  .login-panel { min-height: calc(100dvh - 210px); }
}

@media (max-width: 600px) {
  :root { font-size: 14px; }
  .login-view { grid-template-columns: 1fr; }
  .login-art { min-height: 210px; }
  .art-caption { left: 26px; bottom: 26px; }
  .art-caption strong { font-size: 32px; }
  .art-caption > span:last-child { font-size: 11px; }
  .art-caption .eyebrow { font-size: 9px; }
  .login-panel { min-height: calc(100dvh - 210px); padding: 30px 26px; }
  .login-copy { margin-top: 36px; }
  .login-copy h1 { font-size: 27px; }
  .login-copy p { font-size: 13px; }
  .login-footnote { margin-top: 28px; }
  .topbar { min-height: 62px; padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .topbar-location { gap: 10px; flex: 1; }
  .breadcrumbs { font-size: 13px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .ghost-button { font-size: 11px; padding: 7px 9px; }
  #topbar-share { font-size: 12px; padding: 8px 10px; min-height: 38px; }
  .active-room-return { position: fixed; z-index: 12; bottom: max(18px, env(safe-area-inset-bottom)); right: 18px; min-height: 46px; box-shadow: 0 5px 20px #354c3433; }
  .view-panel { padding: 20px 16px 70px; }
  .room-heading { gap: 15px; margin-bottom: 22px; align-items: flex-start; }
  .room-heading h1 { font-size: 26px; }
  .room-heading p { font-size: 13px; }
  .lobby-heading { padding: 24px; flex-direction: column; gap: 19px; border-radius: 14px; }
  .lobby-heading h1 { font-size: 26px; line-height: 1.5; }
  .lobby-heading .stage-actions { flex-direction: row; width: 100%; align-items: center; gap: 8px; flex-wrap: wrap; }
  .lobby-heading .stage-actions .primary-button { min-width: 134px; min-height: 44px; flex: 1; }
  .lobby-heading .stage-actions .ghost-button { padding: 6px 0; font-size: 11px; }
  .lobby-features { gap: 7px 10px; }
  .lobby-features > span { font-size: 11px; }
  .lobby-summary { flex-wrap: wrap; gap: 14px; justify-content: space-between; padding: 0 0 16px; }
  .lobby-summary > div { flex-direction: column; gap: 0; align-items: flex-start; }
  .lobby-summary strong { font-size: 24px; }
  .lobby-summary span { font-size: 11px; }
  .lobby-summary .lobby-refresh-note { display: none; }
  .lobby-summary > button { font-size: 11px; padding: 6px 8px; }
  .room-discovery { margin: 18px 0; grid-template-columns: minmax(0, 1fr) 116px; gap: 10px; }
  .room-discovery input { font-size: 13px; }
  .room-discovery select { font-size: 12px; padding: 8px; }
  .room-discovery label { font-size: 11px; }
  .lobby-layout { gap: 22px; }
  .room-directory { grid-template-columns: 1fr; gap: 14px; }
  .room-directory-card { padding: 20px; }
  .room-directory-card h2 { margin-top: 14px; }
  .room-directory-card .room-directory-topic { min-height: 0; }
  .room-card-counts { margin-bottom: 16px; }
  .room-card-icon { width: 38px; height: 38px; border-radius: 10px; }
  .upgrade-banner { padding: 8px 14px; }
  .upgrade-banner > button:first-child { display: flex; gap: 8px; }
  .upgrade-banner > button:first-child > span:last-child { display: none; }
  .upgrade-banner strong, #upgrade-banner-summary { font-size: 11px; }
  .upgrade-banner .icon-button { min-width: 32px; min-height: 32px; }
  .room-stats { width: 100%; justify-content: space-between; gap: 10px; }
  .room-stats > div > strong { font-size: 23px; }
  .room-stats > div > span { font-size: 11px; }
  .studio-status-bar { gap: 12px; padding: 14px; }
  .studio-status-bar .stage-actions { gap: 6px; }
  .studio-status-bar .ghost-button, .studio-status-bar .primary-button { font-size: 12px; padding: 8px 10px; }
  .voice-bar { padding: 16px; }
  .voice-actions { justify-content: flex-start; }
  .voice-actions .ghost-button { font-size: 12px; padding: 8px 10px; }
  .square-panel { padding: 16px; }
  .square-toolbar { width: 100%; }
  .square-toolbar .primary-button { order: -1; flex: 1 0 100%; }
  .gallery-toolbar { flex-wrap: wrap; gap: 10px; }
  .segmented button { padding: 7px 11px; font-size: 12px; }
  .square-feed { grid-template-columns: 1fr; }
  .social-card { padding: 17px; }
  .paper-dialog, .simple-dialog, .room-access-dialog { padding: 20px; max-width: calc(100vw - 24px); border-radius: 14px; }
  .dialog-heading h2, .room-access-dialog h2 { font-size: 19px; }
  .meeting-head { padding: 10px; gap: 8px; }
  .meeting-title h2 { font-size: 14px; max-width: 150px; }
  .meeting-stage { padding: 8px; }
  .meeting-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .meeting-toolbar > .meeting-control { padding: 7px 3px; font-size: 11px; min-height: 42px; border: 1px solid #3a4d3c; background: #2a3c2e; border-radius: 8px; white-space: normal; }
  .meeting-control.meeting-leave { margin-left: 0; background: #683f36; }
  .meeting-toolbar > #meeting-share { grid-column: span 1; background: #4c7047; }
  .meeting-footer { padding: 9px 9px max(9px, env(safe-area-inset-bottom)); }
  .meeting-footer .meeting-copy { font-size: 10px; }
  .meeting-voice-line { font-size: 11px; gap: 4px 8px; }
  .meeting-more-panel { right: 9px; width: min(350px, calc(100% - 18px)); }
  .meeting-panel .chat-form input { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.activity-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.meeting-view { z-index: 60; }
.simple-modal { z-index: 80; }
.room-activity-bar { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 16px 22px; color: #e9f2dd; background: #30432d; border-bottom: 1px solid #587048; }
.activity-copy { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; }
.activity-copy strong { font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.activity-copy > span:last-child { font-size: 12px; color: #c0d0b5; }
.activity-badge { font-size: 11px; letter-spacing: .06em; color: #cde4af; }
.activity-clock { display: flex; flex-direction: column; gap: 5px; width: 132px; }
.activity-clock output { font: 600 34px/1.1 ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.activity-clock progress { width: 100%; height: 4px; accent-color: #b8cf83; }
.activity-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.activity-button { min-height: 36px; border: 1px solid #778c63; border-radius: 8px; background: #3d5335; color: #f4f7e9; padding: 8px 11px; font-size: 12px; }
.activity-button:hover, .activity-button[aria-pressed="true"] { background: #617d47; }
.activity-queue { flex: 0 0 100%; font-size: 12px; color: #f2db9e; padding-top: 8px; border-top: 1px solid #65734a; overflow-wrap: anywhere; }
.room-activity-bar[data-phase="finished"] { background: #58492c; border-color: #ad8c50; }
.room-activity-bar[data-phase="finished"] .activity-badge { color: #ffe1a1; }
.room-activity-bar[data-phase="paused"] { background: #414c47; }
#overview-activity-bar { border-radius: 14px; margin: 0 0 22px; }
.stage-card:fullscreen > #overview-activity-bar { border-radius: 0; margin: 0; }
.studio-meeting-status { display: none; }
.meeting-screen-area { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; gap: 12px; }
.meeting-stage.sketch-active { display: grid; grid-template-columns: minmax(0, var(--reference-width, 40%)) minmax(0, 1fr); gap: 14px; }
.sketch-reference { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; border-radius: 12px; border: 1px solid #5e7151; background: #253124; }
.reference-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; flex: none; }
.reference-heading > div { min-width: 0; }
.reference-heading span { display: block; font-size: 11px; color: #b7cc9f; margin-bottom: 5px; }
.reference-heading strong { font-size: 14px; overflow-wrap: anywhere; display: block; }
.reference-viewport { flex: 1; min-height: 80px; min-width: 0; overflow: auto; background: #10180f; }
.reference-viewport img { display: block; width: 100%; height: 100%; min-width: 100%; min-height: 100%; max-width: none; object-fit: contain; }
.reference-controls { display: flex; flex: none; gap: 6px; padding: 10px 12px 0; flex-wrap: wrap; }
.reference-controls .meeting-button { min-height: 36px; padding: 7px 10px; }
.reference-width { display: flex; flex: none; align-items: center; gap: 12px; padding: 12px; font-size: 12px; }
.reference-width { white-space: nowrap; }
.reference-width input { flex: 1; width: 0; min-width: 0; padding: 0; accent-color: #b6cb86; }
.reference-tip, #sketch-reference-error { flex: none; font-size: 11px; line-height: 1.6; padding: 0 12px 12px; color: #b7c5ab; margin: 0; }
.sketch-active .meeting-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.sketch-active .meeting-screen-area.no-shares > #meeting-main, .sketch-active .meeting-screen-area.no-shares > #meeting-tiles { display: none; }
.sketch-screens-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; border: 1px dashed #53664d; border-radius: 12px; color: #c9d6be; }
.sketch-screens-empty strong { font-size: 19px; color: #ecf2e3; }
.sketch-screens-empty p { max-width: 330px; font-size: 13px; line-height: 1.9; }
.sketch-gallery-back { align-self: flex-start; margin-bottom: 8px; }
.sketch-draft-preview { width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px; background: #e8eddf; }
.sketch-image-dialog { width: min(1100px, calc(100vw - 24px)); }
.sketch-image-dialog > img { display: block; max-width: 100%; max-height: 70dvh; object-fit: contain; margin: auto; }
.member-hand-raised .meeting-avatar { background: #eadcaf; color: #69521c; }
.sketch-setup { border: 1px solid #bdcdb1; background: #f2f5e9; border-radius: 12px; padding: 18px; }

@media (max-width: 1100px) {
  .meeting-body > .meeting-panel { position: absolute; z-index: 3; inset: 0 0 0 auto; width: min(340px, 100%); box-shadow: -8px 0 30px #0006; }
}
@media (max-width: 700px) {
  .room-activity-bar { padding: 10px 12px; gap: 8px 10px; }
  .activity-copy { min-width: 0; }
  .activity-copy strong { font-size: 14px; }
  .activity-clock { width: 93px; }
  .activity-clock output { font-size: 28px; }
  .activity-actions { width: 100%; gap: 5px; }
  .activity-actions .activity-button { min-height: 32px; font-size: 11px; padding: 6px 8px; }
  .activity-queue { font-size: 11px; padding-top: 5px; }
  .meeting-stage.sketch-active { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 48%) minmax(180px, 1fr); gap: 8px; overflow-y: auto; }
  .reference-heading { padding: 8px 10px; }
  .reference-heading > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
  .reference-heading span { margin: 0; }
  .reference-heading strong { font-size: 12px; }
  .reference-controls { padding: 5px 8px; gap: 4px; }
  .reference-controls .meeting-button { padding: 5px 9px; min-height: 30px; }
  .reference-width, .reference-tip { display: none; }
  .sketch-active .meeting-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
  .sketch-screens-empty { padding: 10px; }
  .sketch-screens-empty strong { font-size: 14px; }
  .sketch-screens-empty p { font-size: 11px; line-height: 1.5; margin: 8px 0; }
  .meeting-footer .meeting-copy { display: none; }
  .meeting-view > .meeting-shell > .audio-health { gap: 4px 8px; padding: 5px 9px; font-size: 10px; }
  .meeting-view > .meeting-shell > .audio-health > [data-system-audio-status] { display: none; }
  .meeting-view > .meeting-shell > .audio-health button { font-size: 10px; min-height: 28px; padding: 4px 7px; }
}
@media (max-height: 600px) and (min-width: 701px) {
  .room-activity-bar { padding: 8px 14px; }
  .activity-copy strong { font-size: 14px; }
  .activity-clock output { font-size: 26px; }
  .reference-tip, .reference-width { display: none; }
}