/* Layout translation of the four Kavare reference boards. Palette stays unchanged.
   Loaded after legacy page styles so the same geometry is used by web/PWA/Electron. */
:root {
    --ref-base: var(--workspace-base, #000);
    --ref-panel: var(--workspace-panel, #111);
    --ref-raised: var(--workspace-raised, #1b1b1b);
    --ref-border: var(--workspace-line, #303030);
    --ref-text: var(--workspace-ink, #fff);
    --ref-muted: #b0b0b0;
    --ref-primary: var(--workspace-blue, #0060ff);
    --ref-radius: 12px;
}
[hidden] { display: none !important; }
:is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--ref-primary); outline-offset: 3px; }
button { touch-action: manipulation; }
.reference-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.reference-tabs :is(a, button) { min-height: 44px; padding: 8px 16px; border: 1px solid var(--ref-border); border-radius: 10px; background: var(--ref-panel); color: var(--ref-muted); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; cursor: pointer; }
.reference-tabs :is([aria-current=page], [aria-selected=true], .active) { color: var(--ref-text); background: var(--ref-primary); border-color: var(--ref-primary); }
.reference-tabs :is(a, button):hover { color: var(--ref-text); border-color: var(--ref-primary); }

/* A connected three-column app, not separate floating cards. */
.workspace-app.room-page .room-shell { gap: 0; padding: 0; height: 100dvh; grid-template-columns: 248px minmax(0, 1fr) 220px; }
.workspace-app.room-page.workspace-members-hidden .room-shell { grid-template-columns: 248px minmax(0, 1fr); }
.workspace-app.room-page :is(.sidebar, .chat-area, .server-member-panel) { border-radius: 0; border: 0; background: var(--ref-base); backdrop-filter: none; box-shadow: none; }
.workspace-app.room-page .sidebar { background: var(--ref-panel); border-inline-end: 1px solid var(--ref-border); }
.workspace-app.room-page .sidebar-head { min-height: 72px; padding: 12px; gap: 10px; }
.workspace-app.room-page .sidebar-title strong { font-size: 16px; }
.workspace-app.room-page .server-channels { flex: 1; max-height: none; padding: 8px 8px 140px; border: 0; }
.workspace-app.room-page .channel-category-title { min-height: 40px; font-size: 12px; }
.workspace-app.room-page .channel-link { min-height: 40px; border-radius: 8px; font-size: 14px; margin: 2px 0; }
.workspace-app.room-page .channel-link.active { background: #0060ff26; border-color: transparent; color: var(--ref-text); }
.workspace-app.room-page .voice-channel-members { padding-inline: 22px 4px; }
.workspace-app.room-page .voice-channel-members button { min-height: 36px; }
.workspace-app.room-page .chat-header { min-height: 72px; padding: 12px 18px; border-bottom: 1px solid var(--ref-border); flex-wrap: nowrap; }
.workspace-app.room-page .chat-header > :first-child { min-width: 80px; flex: 1; }
.workspace-app.room-page .chat-header .chat-room-meta { min-width: 0; }
.workspace-app.room-page .chat-header h1 { font-size: 18px; overflow-wrap: anywhere; }
.workspace-app.room-page .chat-header .owner-chip { display: none; }
.workspace-app.room-page .chat-header .header-actions { flex: 0 0 auto; gap: 4px; }
.workspace-app.room-page .chat-header .workspace-search { display: none; }
.workspace-app.room-page .chat-header .header-actions .icon-button { width: 36px; height: 36px; min-height: 36px; border: 0; background: transparent; border-radius: 8px; }
.workspace-app.room-page .chat-header .header-actions .icon-button:hover { background: var(--ref-raised); }
.workspace-app.room-page .server-member-panel { background: var(--ref-panel); border-inline-start: 1px solid var(--ref-border); }
.workspace-app.room-page .control-panel { right: var(--workspace-rail-width); bottom: 0; width: 248px; border-radius: 0; padding: 10px 12px; border: 0; border-top: 1px solid var(--ref-border); background: var(--ref-panel); box-shadow: none; }
.workspace-app.room-page .control-panel .my-info { padding-bottom: 8px; }
.workspace-app.room-page .control-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.workspace-app.room-page .control-grid .control-button { width: 100%; min-width: 0; height: 40px; min-height: 40px; border-radius: 10px; padding: 0; }
.workspace-app.room-page .control-grid .disconnect-voice { grid-column: auto; }
.workspace-app.room-page .control-grid .control-button :is(span,small) { display: none; }

/* Message anatomy matches the reference: avatar + identity/time + content. */
.workspace-app.room-page .chat-messages { padding: 20px; gap: 6px; }
.workspace-app.room-page .message,
.workspace-app.room-page .message.mine { width: 100%; max-width: 100%; align-self: stretch; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 12px; direction: rtl; padding: 8px 0; }
.workspace-app.room-page .message-avatar { width: 38px; height: 38px; min-width: 38px; min-height: 38px; flex: 0 0 38px; border-radius: 50%; padding: 0; border: 0; overflow: hidden; }
.workspace-app.room-page .message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.workspace-app.room-page .message-content,
.workspace-app.room-page .message.mine .message-content { min-width: 0; max-width: min(100%, 760px); padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; text-align: start; }
.workspace-app.room-page .message-head { justify-content: flex-start; gap: 10px; margin-bottom: 3px; }
.workspace-app.room-page .message-author { font-size: 14px; font-weight: 700; padding: 0; min-height: 24px; color: var(--ref-text); }
.workspace-app.room-page .message.mine .message-author { color: #8ab4ff; }
.workspace-app.room-page .message-head time { color: var(--ref-muted); font-size: 12px; }
.workspace-app.room-page .message-text { font-size: 15px; line-height: 1.8; margin: 0; overflow-wrap: anywhere; direction: rtl; text-align: start; }
.workspace-app.room-page .message.pinned { border-inline-start: 2px solid var(--ref-primary); padding-inline-start: 8px; }
.workspace-app.room-page .chat-input-container { margin: 0 16px 16px; padding: 8px; border: 1px solid var(--ref-border); background: var(--ref-panel); border-radius: var(--ref-radius); }
.workspace-app.room-page .chat-input-container textarea { background: transparent; border: 0; box-shadow: none; }
.workspace-app .dm-bubble { position: relative; width: 100%; max-width: 100%; align-self: stretch; background: none !important; border: 0 !important; border-radius: 0; box-shadow: none; padding: 8px 50px 8px 8px; margin: 0; text-align: start; }
.workspace-app .dm-bubble .reference-dm-avatar { position: absolute; inset-inline-start: 0; top: 9px; width: 38px; height: 38px; min-height: 38px; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 50%; padding: 0; background: var(--ref-primary); color: white; font-size: 15px; font-weight: 700; }
.reference-dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reference-dm-identity { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.reference-dm-identity strong { font-size: 14px; }
.reference-dm-identity strong[role=button] { cursor: pointer; }
.reference-dm-identity strong[role=button]:hover { text-decoration: underline; }
.reference-dm-identity time { font-size: 12px; color: var(--ref-muted); }
.workspace-app .dm-bubble .reference-dm-identity time { position: static; margin: 0; font-size: 12px; }
.workspace-app .dm-bubble p { margin: 0; font-size: 15px; line-height: 1.8; }
.workspace-app .dm-bubble.mine .reference-dm-identity strong { color: #8ab4ff; }

/* Voice/stream stage: one live media grid, avatar grid when cameras are off. */
.workspace-app.room-page .video-stage { flex: 0 1 48%; min-height: 230px; height: 48%; max-height: 58%; display: flex; flex-direction: column; gap: 8px; margin: 12px 16px 0; padding: 12px; border: 1px solid var(--ref-border); border-radius: 14px; background: var(--ref-panel); overflow: hidden; }
.workspace-app.room-page .video-stage.participants-only { flex-basis: 42%; height: 42%; }
.workspace-app.room-page .stage-head { min-height: 32px; flex: 0 0 auto; padding: 0; gap: 8px; border: 0; }
.stage-head > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-end: auto; font-size: 14px; font-weight: 700; }
.stage-head small { color: var(--ref-muted); font-size: 12px; font-weight: 400; }
.workspace-app.room-page .stream-row-head { display: none; }
.workspace-app.room-page .stream-row { flex: 1; min-height: 0; padding: 0; border: 0; background: none; overflow: hidden; }
.workspace-app.room-page .video-grid { width: 100%; height: 100%; min-height: 0; display: grid; gap: 8px; grid-template-columns: repeat(var(--stream-columns, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--stream-rows, 1), minmax(0, 1fr)); overflow: hidden; }
.workspace-app.room-page .video-grid.has-focus { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 3fr) repeat(var(--thumbnail-rows, 1), minmax(0, 1fr)); }
.workspace-app.room-page .video-grid.has-focus .stage-focused { grid-column: 1 / -1; grid-row: 1; }
.workspace-app.room-page .video-grid.has-focus > :only-child { grid-row: 1 / -1; }
.workspace-app.room-page .video-item { width: 100%; height: 100%; max-height: none; min-height: 0; aspect-ratio: auto; border-radius: 10px; cursor: pointer; overflow: hidden; background: var(--ref-base); }
.workspace-app.room-page .video-item video { width: 100%; height: 100%; object-fit: contain; }
.workspace-app.room-page .video-item[data-type=screen]::before { content: 'LIVE'; position: absolute; top: 8px; left: 8px; z-index: 2; background: #d92d42; color: white; font: 700 10px/1 sans-serif; padding: 5px 6px; border-radius: 4px; pointer-events: none; }
.workspace-app.room-page .video-username { max-width: calc(100% - 12px); font-size: 11px; padding: 4px 8px; bottom: 6px; right: 6px; border-radius: 6px; }
.workspace-app.room-page .video-item:fullscreen { border-radius: 0; width: 100vw; height: 100dvh; }
.workspace-app.room-page .video-expand { z-index: 3; }
.voice-participant-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--participant-columns, 3), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; place-items: center; container-type: size; }
.voice-participant { min-width: 0; width: 100%; height: 100%; min-height: 0; padding: 4px; background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; color: var(--ref-text); }
.voice-participant-avatar { position: relative; width: max(12px, min(64px, calc(100cqh / var(--participant-rows, 1) - 40px), calc(100cqw / var(--participant-columns, 3) - 20px))); aspect-ratio: 1; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--ref-raised); outline: 2px solid var(--ref-border); outline-offset: 3px; font-size: 20px; font-weight: 700; overflow: visible; container-type: inline-size; }
.voice-participant-avatar > span { font-size: clamp(8px, 40cqw, 24px); }
.voice-participant-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.voice-participant strong { max-width: 100%; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-participant .participant-state { position: absolute; bottom: -4px; inset-inline-end: -4px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ref-raised); border: 2px solid var(--ref-panel); font-size: 10px; color: var(--ref-muted); }
.voice-participant.speaking .voice-participant-avatar { outline-color: #22c58e; }
.voice-stage-controls { flex-shrink: 0; display: flex; justify-content: center; gap: 10px; padding-top: 4px; }
.voice-stage-controls button { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--ref-border); background: var(--ref-raised); color: var(--ref-text); }
.voice-stage-controls button[aria-pressed=true] { background: var(--ref-primary); border-color: var(--ref-primary); }
.voice-stage-controls button.danger { background: #d92d42; border-color: #d92d42; }
.reference-header-more { display: none; position: relative; }
.reference-header-more > summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; color: var(--ref-text); }
.reference-header-more > summary::-webkit-details-marker { display: none; }
.reference-header-more[open] > summary { background: var(--ref-raised); }
.reference-header-more > div { position: absolute; top: calc(100% + 8px); left: 0; width: min(250px, calc(100vw - var(--workspace-rail-width) - 24px)); padding: 8px; border: 1px solid var(--ref-border); background: var(--ref-panel); border-radius: 12px; box-shadow: 0 12px 40px #0008; z-index: 80; }
.reference-header-more button { display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%; padding: 8px 12px; text-align: start; color: var(--ref-text); background: none; border: 0; border-radius: 8px; font: inherit; }
.reference-header-more button:hover { background: var(--ref-raised); }

/* Lobby and discovery: compact headers, tabs and repeatable rows/cards. */
.workspace-app.lobby-hub .hub-content { padding: 24px 32px; }
.workspace-app.lobby-hub .hub-topbar { padding-bottom: 16px; margin-bottom: 0; border-bottom: 1px solid var(--ref-border); }
.workspace-app.lobby-hub .hub-topbar h1 { font-size: 24px; }
.workspace-app.lobby-hub .hub-topbar .eyebrow { display: none; }
.reference-lobby-tabs { margin: 8px 0 24px; border-bottom: 1px solid var(--ref-border); }
.reference-lobby-tabs a { background: none; border-color: transparent; }
.workspace-app.lobby-hub .hero-strip { padding: 24px; background: var(--ref-panel); }
.workspace-app.lobby-hub .hero-strip h2 { font-size: 24px; }
.workspace-app.lobby-hub .hero-strip p { max-width: 560px; }
.workspace-app.lobby-hub .server-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.workspace-app.lobby-hub .server-cover { height: 100px; }
.workspace-app.lobby-hub .friend-list > article { padding: 14px 8px; border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--ref-border); }
.workspace-app.lobby-hub :is(.person-avatar, .mini-avatar) { border-radius: 50%; }
.workspace-app.lobby-hub .conversation-sidebar { border-radius: 0; border-inline-end: 1px solid var(--ref-border); background: var(--ref-panel); }
.workspace-app.lobby-hub .conversation-list > a { border-radius: 8px; }
.workspace-app.lobby-hub .dm-room { border: 0; border-radius: 0; }
.workspace-app.lobby-hub .dm-room > header { min-height: 72px; padding: 12px 20px; }
.workspace-app.lobby-hub .messages-panel { border: 1px solid var(--ref-border); border-radius: 14px; overflow: hidden; gap: 0; }
.workspace-app .community-shell { max-width: 1280px; padding: 28px 32px 48px; }
.workspace-app .community-hero { padding: 24px 0; border: 0; background: none; }
.workspace-app .community-hero h1 { font-size: clamp(24px, 3vw, 36px); }
.reference-discovery-tabs { margin: 0 0 20px; }
.workspace-app .discovery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.workspace-app .discovery-card { border-radius: 14px; background: var(--ref-panel); border: 1px solid var(--ref-border); padding: 0 16px 16px; overflow: hidden; display: flex; flex-direction: column; }
.workspace-app .discovery-cover { height: 112px; margin: 0 -16px 16px; padding: 16px; background: var(--ref-raised); }
.workspace-app .discovery-card h2 { font-size: 18px; margin-block: 0 8px; }
.workspace-app .discovery-card > p { font-size: 14px; line-height: 1.7; }
.workspace-app .discovery-card > form { margin-top: auto; padding-top: 16px; }
.workspace-app .discovery-card > form button { width: 100%; border-radius: 8px; }
.workspace-app .discovery-tags { flex-wrap: wrap; }

/* Profile banner, overlapping portrait, identity and actual content tabs. */
:is(.global-profile-dialog, .profile-dialog) { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 1px solid var(--ref-border); border-radius: 18px; padding: 0; background: var(--ref-panel); overflow: auto; color: var(--ref-text); }
:is(.global-profile-card, .member-profile-card) { position: relative; overflow: hidden; border-radius: 0; background: var(--ref-panel); min-height: 0; }
:is(.global-profile-banner, .member-profile-banner) { height: 156px; min-height: 156px; background-color: var(--ref-raised); background-position: center; background-size: cover; background-image: none; border-bottom: 1px solid var(--ref-border); }
.member-profile-banner img { width: 100%; height: 100%; object-fit: cover; }
:is(.global-profile-avatar, .member-profile-avatar) { display: grid; place-items: center; position: relative; top: auto; right: auto; left: auto; inset: auto; width: 88px; height: 88px; border-radius: 50%; margin: -44px 24px 0 auto; border: 6px solid var(--ref-panel); background: var(--ref-primary); overflow: visible; font-size: 28px; font-weight: 700; }
:is(.global-profile-avatar, .member-profile-avatar) img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
:is(.global-profile-body, .member-profile-body) { padding: 12px 24px 24px; }
:is(.global-profile-body, .member-profile-body) h2 { font-size: 24px; line-height: 1.3; margin: 0 0 4px; }
:is(.global-profile-handle, .member-profile-handle) { color: var(--ref-muted); margin: 0 0 12px; font-size: 14px; direction: ltr; text-align: right; }
:is(.global-profile-bio, .member-profile-bio) { font-size: 15px; line-height: 1.9; margin: 16px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
:is(.global-profile-bio, .member-profile-bio) a { color: #8ab4ff; text-decoration: underline; }
.reference-profile-tabs { margin: 16px 0 0; border-bottom: 1px solid var(--ref-border); gap: 0; }
.reference-profile-tabs button { flex: 1; padding: 8px; border: 0; border-radius: 0; background: none; color: var(--ref-muted); }
.reference-profile-tabs button[aria-selected=true] { color: #8ab4ff; background: none; border-bottom: 2px solid var(--ref-primary); }
.reference-profile-panel { min-height: 88px; }
.reference-profile-panel > p { color: var(--ref-muted); line-height: 1.8; }
.reference-profile-edit { display: inline-flex; gap: 8px; padding: 8px 12px; min-height: 40px; border: 1px solid var(--ref-primary); border-radius: 8px; text-decoration: none; color: #8ab4ff; margin-top: 12px; }
:is(.global-profile-close, .profile-dialog-close) { position: absolute; display: grid; place-items: center; padding: 0; color: white; z-index: 3; width: 36px; height: 36px; min-height: 36px; border-radius: 50%; top: 12px; left: 12px; right: auto; background: #000b; border: 1px solid var(--ref-border); cursor: pointer; }
.global-profile-status { display: inline-flex; gap: 6px; font-size: 12px; margin-bottom: 10px; }
.global-profile-status.status-online { color: #38d996; }
.global-profile-status.status-busy { color: #ff6079; }
.global-profile-status.status-focus { color: #ffbe5c; }
.global-profile-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.global-profile-badges .profile-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; color: #8ab4ff; border: 1px solid #0060ff40; background: #0060ff18; border-radius: 8px; }
.global-profile-badges .role-admin { color: #ffd89a; border-color: #ffd89a40; background: #ffd89a10; }
.global-profile-badges .role-staff { color: #b8f5d8; border-color: #b8f5d840; background: #b8f5d810; }
.global-profile-badges .role-moderator { color: #78d7ff; border-color: #78d7ff40; background: #78d7ff10; }
.global-profile-message { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 10px; margin-top: 20px; background: var(--ref-primary); color: white; text-decoration: none; }
.global-profile-dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
.workspace-app .profile-preview { border: 1px solid var(--ref-border); border-radius: 16px; overflow: hidden; background: var(--ref-panel); }
.workspace-app .profile-preview-banner { height: 140px; min-height: 140px; }
.workspace-app .profile-preview-avatar { width: 80px; height: 80px; border-radius: 50%; top: auto; right: auto; position: relative; margin: -40px 20px 0 auto; border: 5px solid var(--ref-panel); display: grid; place-items: center; }
.workspace-app .profile-preview-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.workspace-app .profile-preview-body { padding: 12px 20px 20px; }

/* Server settings use the same quiet sidebar/content split as the boards. */
.server-settings-dialog .server-settings-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 0; }
.server-settings-dialog .server-settings-nav { border-radius: 0; border: 0; border-inline-end: 1px solid var(--ref-border); background: var(--ref-panel); padding: 16px 12px; }
.server-settings-dialog .server-settings-nav button { min-height: 48px; border: 0; border-radius: 8px; padding: 8px 12px; }
.server-settings-dialog .server-settings-nav small { display: none; }
.server-settings-dialog .server-settings-content { padding: 28px; background: var(--ref-base); }
.server-settings-dialog :is(.settings-section-title, .server-settings-form) { max-width: 840px; margin-inline: auto; }
.server-settings-dialog .server-image-field { background: var(--ref-panel); border-radius: 12px; padding: 20px; border: 1px solid var(--ref-border); }
.server-settings-dialog .role-editor { border-radius: 10px; }
.reference-create-role { max-width: 840px; margin: 0 auto 20px; }
.reference-create-role > summary { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; padding: 10px 16px; background: var(--ref-primary); color: white; border-radius: 8px; list-style: none; cursor: pointer; }
.reference-create-role > summary::-webkit-details-marker { display: none; }
.reference-create-role[open] > summary { margin-bottom: 16px; }
.server-settings-dialog .server-role-list { max-width: 840px; margin-inline: auto; gap: 10px; }
.server-settings-dialog .role-card { border: 1px solid var(--ref-border); border-radius: 10px; background: var(--ref-panel); }
.server-settings-dialog .role-card > summary { min-height: 72px; padding: 12px 16px; display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 4px 12px; }
.server-settings-dialog .role-card > summary .permission-role { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.server-settings-dialog .role-card > summary > i { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.reference-role-count { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ref-muted); }
@media (min-width: 901px) {
    .server-settings-dialog [data-settings-panel=general] > .server-settings-form { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px 28px; align-items: start; }
    .server-settings-dialog [data-settings-panel=general] .server-image-field { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; text-align: center; padding: 20px 12px; }
    .server-settings-dialog [data-settings-panel=general] .server-image-field > span { width: 88px; height: 88px; border-radius: 50%; background: var(--ref-primary); display: grid; place-items: center; font-size: 30px; }
    .server-settings-dialog [data-settings-panel=general] .server-image-field > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .server-settings-dialog [data-settings-panel=general] .server-settings-form > :is(label, button, .server-banner-editor) { grid-column: 2; }
    .server-settings-dialog [data-settings-panel=general] .server-banner-editor { grid-row: 3; }
    .server-settings-dialog [data-settings-panel=general] .server-banner-editor button { width: auto; justify-self: start; background: var(--ref-raised); color: var(--ref-muted); }
}

/* Authentication: focused form with a restrained gaming/developer illustration. */
.auth-page { background: var(--ref-base); }
.auth-page .ambient { display: none; }
.auth-page .auth-layout { width: min(920px, calc(100% - 48px)); min-height: 600px; margin: 48px auto; padding: 0; align-items: stretch; gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--ref-border); border-radius: 20px; overflow: hidden; background: var(--ref-panel); }
.auth-page .auth-story { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; background: var(--ref-raised); border-inline-start: 1px solid var(--ref-border); }
.auth-page .auth-story > a, .auth-page .auth-story > .eyebrow { display: none; }
.auth-page .auth-story h1 { font-size: 26px; line-height: 1.5; margin: 28px 0 12px; }
.auth-page .auth-story > p { font-size: 15px; max-width: 320px; }
.auth-page .auth-benefits { justify-content: center; font-size: 12px; }
.auth-page .auth-card { grid-column: 1; grid-row: 1; width: 100%; padding: 36px; border: 0; border-radius: 0; background: var(--ref-panel); box-shadow: none; }
.auth-form-brand { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--ref-text); text-decoration: none; font-size: 24px; }
.auth-form-brand img { width: 48px; height: 48px; object-fit: contain; }
.auth-page .auth-heading { justify-content: center; text-align: center; margin: 24px 0; }
.auth-page .auth-heading .status-pulse { display: none; }
.auth-page .auth-heading h2 { font-size: 24px; }
.auth-page .auth-field { position: relative; height: 48px; min-height: 48px; border-radius: 10px; background: var(--ref-base); }
.auth-page .auth-field input { display: block; width: 100%; min-width: 0; height: 48px; min-height: 48px; padding-inline: 44px; }
.auth-page .auth-submit { min-height: 48px; border-radius: 10px; }
.reference-password-toggle { position: absolute; left: 2px; top: 2px; width: 40px; height: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ref-muted); }
.auth-illustration { width: 220px; height: 220px; position: relative; display: grid; place-items: center; border-radius: 36px; border: 1px solid var(--ref-border); color: var(--ref-primary); background: var(--ref-panel); }
.auth-illustration > i { font-size: 116px; }
.auth-illustration > span { position: absolute; width: 76px; height: 76px; display: grid; place-items: center; background: var(--ref-primary); color: white; border-radius: 20px; font-size: 32px; box-shadow: 0 12px 24px #0005; }
.auth-illustration > span:nth-child(2) { bottom: -18px; right: -20px; transform: rotate(-12deg); }
.auth-illustration > span:nth-child(3) { top: -16px; left: -20px; transform: rotate(12deg); }

/* Landing: the interface itself is the hero illustration, with five feature tiles. */
.landing-refresh .hero-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: center; gap: 40px; max-width: 1440px; min-height: 600px; padding: 56px 32px 32px; margin-inline: auto; }
.landing-refresh .hero-copy h1 { font-size: clamp(40px, 4.2vw, 66px); line-height: 1.4; max-width: 600px; text-wrap: balance; }
.landing-refresh .hero-copy { display: block; min-width: 0; }
.landing-refresh .hero-copy h1 em { display: inline; color: var(--ref-primary); font-style: normal; }
.landing-refresh [data-reveal] { opacity: 1; transform: none; }
.landing-refresh .hero-lead { max-width: 480px; font-size: 18px; line-height: 1.9; }
.landing-refresh .hero-product { width: 100%; min-width: 0; transform: none; }
.landing-refresh .hero-proof { display: none; }
.landing-refresh .hero-primary, .landing-refresh .hero-secondary { min-height: 48px; border-radius: 24px; padding: 10px 22px; }
.landing-refresh .product-window { border-radius: 16px; box-shadow: 0 24px 60px #0008; transform: none; background: var(--ref-panel); border: 1px solid var(--ref-border); }
.landing-refresh .window-body { display: grid; grid-template-columns: 46px 140px minmax(0,1fr) 140px; min-height: 370px; gap: 0; }
.landing-refresh .window-body .server-rail { grid-column: 1; grid-row: 1; width: auto; padding: 12px 6px; border-inline-end: 1px solid var(--ref-border); }
.landing-refresh .window-body .server-rail :is(span,img) { width: 32px; height: 32px; border-radius: 10px; }
.landing-refresh .window-body .channel-rail { grid-column: 2; grid-row: 1; padding: 12px 8px; width: auto; font-size: 11px; }
.landing-refresh .window-body .channel-rail > a { min-height: 30px; padding: 6px; font-size: 11px; }
.landing-refresh .window-body .call-stage { grid-column: 4; grid-row: 1; padding: 12px 8px; display: flex; flex-direction: column; border-inline-start: 1px solid var(--ref-border); }
.landing-refresh .call-stage .screen-grid { display: none; }
.landing-refresh .call-stage h2 { font-size: 16px; }
.landing-refresh .call-stage header { flex-wrap: wrap; }
.landing-refresh .call-controls { margin-top: auto; flex-wrap: wrap; gap: 6px; }
.landing-refresh .call-controls button { width: 32px; height: 32px; min-height: 32px; border-radius: 50%; font-size: 12px; }
.landing-refresh .window-body .chat-rail { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; width: auto; padding: 0; background: var(--ref-base); }
.landing-refresh .chat-rail > header { padding: 12px; min-height: 56px; }
.landing-refresh .preview-messages { padding: 16px 12px; flex: 1; }
.landing-refresh .preview-messages article { padding: 8px 0; gap: 8px; background: none; border: 0; }
.landing-refresh .preview-messages p { font-size: 12px; line-height: 1.9; }
.landing-refresh .preview-messages b { font-size: 12px; }
.landing-refresh .preview-composer { margin: 8px; padding: 10px; min-height: 40px; border: 1px solid var(--ref-border); border-radius: 8px; font-size: 11px; }
.preview-participants { display: grid; gap: 14px; padding-block: 20px; }
.preview-participants > span { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.preview-participants .avatar { width: 28px; height: 28px; border-radius: 50%; }
.reference-feature-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; max-width: 1200px; margin: 0 auto 56px; padding: 16px 32px; }
.reference-feature-strip > a { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 12px; border: 1px solid var(--ref-border); border-radius: 14px; background: var(--ref-panel); color: var(--ref-text); text-align: center; text-decoration: none; font-size: 15px; }
.reference-feature-strip i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #8ab4ff; background: #0060ff1f; font-size: 22px; }
.reference-feature-strip a:hover { border-color: var(--ref-primary); }

/* Download platform selector and code-native device preview (no invented builds). */
.reference-download { text-align: center; }
.reference-download .reference-tabs { justify-content: center; margin-bottom: 24px; }
.reference-device { width: min(760px, 100%); margin: 0 auto 32px; border: 8px solid var(--ref-raised); border-bottom-width: 20px; border-radius: 16px; box-shadow: 0 0 0 1px var(--ref-border); overflow: hidden; }
.reference-device .reference-preview { display: grid; grid-template-columns: 44px 140px minmax(0,1fr); min-height: 290px; text-align: start; background: var(--ref-base); }
.reference-preview > aside { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px; border-inline-end: 1px solid var(--ref-border); background: var(--ref-panel); font-size: 12px; }
.reference-preview .preview-mini-rail { align-items: center; }
.preview-mini-rail :is(img,span) { display: grid; place-items: center; width: 28px; height: 28px; background: var(--ref-raised); border-radius: 8px; color: #8ab4ff; }
.reference-preview main { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.reference-preview header { border-bottom: 1px solid var(--ref-border); padding-bottom: 12px; }
.reference-preview article { display: flex; gap: 12px; font-size: 13px; line-height: 1.8; }
.reference-preview article > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ref-primary); flex-shrink: 0; }
.reference-preview article p { margin: 4px 0; color: var(--ref-muted); }
.reference-preview footer { margin-top: auto; padding: 10px; border: 1px solid var(--ref-border); border-radius: 8px; color: var(--ref-muted); font-size: 12px; }
.reference-platform-panel { max-width: 600px; margin: 0 auto; }
.reference-platform-panel h2 { font-size: 24px; }
.reference-platform-panel p { color: var(--ref-muted); line-height: 1.9; }
.reference-platform-panel :is(.primary-btn, button, a) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 10px; text-decoration: none; }
.page-download .page-hero { text-align: center; padding-block: 40px 24px; }
.page-download .page-hero h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.4; }
.page-download .page-hero p { margin-inline: auto; }
.page-download .page-hero .marketing-eyebrow { justify-content: center; }

@media (max-width: 1400px) and (min-width: 1181px) { .workspace-app.room-page .room-shell { grid-template-columns: 232px minmax(0,1fr) 200px; } .workspace-app.room-page .control-panel { width: 232px; } }
@media (max-width: 1180px) { .workspace-app.room-page .room-shell, .workspace-app.room-page.workspace-members-hidden .room-shell { grid-template-columns: 232px minmax(0,1fr); } .workspace-app.room-page .control-panel { width: 232px; } .landing-refresh .hero-section { grid-template-columns: 1fr; gap: 32px; text-align: center; } .landing-refresh .hero-copy { max-width: 720px; margin: 0 auto; } .landing-refresh .hero-copy h1, .landing-refresh .hero-lead { max-width: none; } .landing-refresh .hero-actions { justify-content: center; } .landing-refresh .hero-product { max-width: 850px; margin-inline: auto; } }
@media (max-width: 900px) {
    .workspace-app.room-page .room-shell, .workspace-app.room-page.workspace-members-hidden .room-shell { display: block; height: 100dvh; padding: 0 0 108px; }
    .workspace-app.room-page .chat-area { height: 100%; }
    .workspace-app.room-page .sidebar { right: calc(var(--workspace-rail-width) + 8px); width: min(300px, calc(100vw - var(--workspace-rail-width) - 24px)); top: 8px; bottom: 116px; border-radius: 12px; border: 1px solid var(--ref-border); }
    .workspace-app.room-page .sidebar .server-channels { padding-bottom: 12px; }
    .workspace-app.room-page .control-panel { right: var(--workspace-rail-width); bottom: 0; width: calc(100vw - var(--workspace-rail-width)); padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
    .workspace-app.room-page .control-panel .my-info { width: auto; padding: 0; margin-inline-end: auto; }
    .workspace-app.room-page .control-panel .my-info .avatar { width: 32px; height: 32px; }
    .workspace-app.room-page .control-panel .my-copy strong { font-size: 13px; }
    .workspace-app.room-page .chat-header { padding: 8px 12px; min-height: 64px; gap: 4px; }
    .workspace-app.room-page .chat-header h1 { font-size: 16px; }
    .workspace-app.room-page .chat-header .chat-room-meta p { display: none; }
    .workspace-app.room-page .chat-header .header-actions .icon-button { min-height: 40px; height: 40px; width: 40px; }
    .workspace-app.room-page .chat-header :is(#openActivityBtn, #openNotificationsBtn, #openPinsBtn) { display: none; }
    .reference-header-more { display: block; }
    .workspace-app.room-page .chat-messages { padding: 12px; }
    .workspace-app.room-page .chat-input-container { margin: 0 8px 8px; }
    .workspace-app.room-page .video-stage { margin: 8px 8px 0; min-height: 180px; padding: 8px; }
    .voice-stage-controls { display: none; }
    .voice-participant { padding: 4px; }
    .workspace-app.lobby-hub .hub-content { padding: 16px; }
    .workspace-app .community-shell { padding: 20px 16px 32px; }
    .reference-lobby-tabs a { flex: 1; padding: 8px; font-size: 13px; }
    .reference-lobby-tabs a > i { display: none; }
    .server-settings-dialog .server-settings-layout { display: flex; flex-direction: column; }
    .server-settings-dialog .server-settings-nav { width: 100%; flex-direction: row; overflow-x: auto; border-inline-end: 0; padding: 8px; }
    .server-settings-dialog .server-settings-nav button { flex-shrink: 0; width: auto; min-width: 110px; }
    .server-settings-dialog .server-settings-content { padding: 16px; }
    .reference-feature-strip { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: 16px; }
}
@media (max-width: 600px) {
    .auth-page .auth-layout { display: block; width: min(440px, calc(100% - 24px)); min-height: 0; margin: 20px auto; }
    .auth-page .auth-story { display: none; }
    .auth-page .auth-card { padding: 24px; }
    .landing-refresh .hero-section { padding: 32px 16px 24px; min-height: 0; }
    .landing-refresh .hero-copy h1 { font-size: clamp(32px, 8vw, 44px); }
    .landing-refresh .hero-lead { font-size: 16px; }
    .landing-refresh .window-body { grid-template-columns: 38px minmax(0,1fr); min-height: 330px; }
    .landing-refresh .window-body .channel-rail, .landing-refresh .window-body .call-stage { display: none; }
    .landing-refresh .window-body .chat-rail { grid-column: 2; }
    .landing-refresh .product-preview-heading small { display: none; }
    .reference-feature-strip { grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 24px; }
    .reference-feature-strip > a:last-child { grid-column: 1 / -1; }
    .reference-feature-strip > a { padding: 16px 8px; font-size: 14px; }
    .workspace-app.lobby-hub .hub-content { padding: 12px; }
    .workspace-app.lobby-hub .hub-topbar h1 { font-size: 20px; }
    .reference-lobby-tabs { gap: 0; }
    .reference-lobby-tabs a { padding: 8px 4px; font-size: 12px; }
    .workspace-app.lobby-hub .hero-strip { padding: 16px; }
    .workspace-app.lobby-hub .hero-strip h2 { font-size: 20px; }
    .workspace-app.lobby-hub .server-grid { grid-template-columns: minmax(0,1fr); }
    .workspace-app .discovery-grid { grid-template-columns: minmax(0,1fr); }
    .workspace-app .dm-bubble { padding-inline-start: 42px; }
    .workspace-app .dm-bubble .reference-dm-avatar { width: 32px; height: 32px; min-height: 32px; }
    .workspace-app.room-page .message-actions { background: none; border: 0; padding: 0; margin-top: 4px; box-shadow: none; gap: 4px; }
    .workspace-app.room-page .message-actions button { width: 44px; height: 44px; }
    :is(.global-profile-banner, .member-profile-banner) { min-height: 120px; height: 120px; }
    :is(.global-profile-body, .member-profile-body) { padding: 12px 16px 20px; }
    :is(.global-profile-avatar, .member-profile-avatar) { width: 76px; height: 76px; margin-top: -38px; margin-right: 16px; }
    .reference-device .reference-preview { grid-template-columns: 36px minmax(0,1fr); min-height: 280px; }
    .reference-preview > aside:not(.preview-mini-rail) { display: none; }
    .reference-preview main { padding: 12px; }
    .reference-download .reference-tabs { gap: 6px; }
    .reference-download .reference-tabs button { padding: 8px 12px; font-size: 13px; }
}
@media (max-height: 500px) and (max-width: 900px) {
    .workspace-app.room-page .room-shell { padding-bottom: 68px; }
    .workspace-app.room-page .control-panel { min-height: 60px; display: flex; flex-direction: row; align-items: center; gap: 8px; }
    .workspace-app.room-page .control-grid { flex: 0 0 250px; }
    .workspace-app.room-page .video-stage { min-height: 120px; }
    .workspace-app.room-page .sidebar { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .auth-illustration, .reference-tabs *, .voice-participant * { animation: none; transition: none; } }