:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --ink: #18202a;
  --muted: #687383;
  --line: #dce1e7;
  --brand: #246bfd;
  --brand-hover: #1958d8;
  --green: #18875f;
  --red: #c73d42;
  --amber: #a76b12;
  --shadow: 0 12px 36px rgba(27, 37, 49, 0.09);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); letter-spacing: 0; }
button, input, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); text-decoration: none; }
button { cursor: pointer; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.topbar {
  height: 64px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 760; }
.brand-mark { width: 29px; height: 24px; border: 2px solid var(--brand); display: inline-grid; place-items: center; border-radius: 5px; }
.brand-mark::after { content: ""; width: 7px; height: 7px; border: 2px solid #1b8f6a; border-radius: 50%; }
.brand-mark span { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.account-name { font-size: 14px; color: var(--muted); }
.topbar-actions form { margin: 0; }

.button, .icon-text-button, .icon-button, .control-button {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.button { min-height: 42px; padding: 0 17px; font-weight: 700; }
.button svg, .icon-text-button svg { width: 18px; height: 18px; }
.button.primary, .icon-button.primary { background: var(--brand); color: #fff; }
.button.primary:hover, .icon-button.primary:hover { background: var(--brand-hover); }
.button.secondary { color: var(--ink); background: #fff; border: 1px solid #cfd5dc; }
.button.secondary:hover { border-color: #9faab7; background: #f8fafc; }
.button.ghost, .icon-text-button.ghost { background: transparent; color: var(--muted); }
.button.ghost:hover, .icon-text-button.ghost:hover { background: var(--surface-2); color: var(--ink); }
.button.full { width: 100%; }
.icon-text-button { min-height: 38px; padding: 0 12px; }
.icon-button { width: 38px; height: 38px; flex: 0 0 38px; background: #edf1f5; color: #4f5d6d; }
.icon-button:hover { background: #dfe5eb; color: #1f2a36; }
.icon-button.danger { color: var(--red); background: #fff0f0; }
.icon-button.danger:hover { background: #fbdede; }
.icon-button svg { width: 19px; height: 19px; }

.flash-stack { position: fixed; right: 24px; top: 78px; z-index: 80; display: grid; gap: 8px; max-width: 380px; }
.flash { padding: 12px 15px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 5px; background: #fff; box-shadow: var(--shadow); font-size: 14px; }
.flash-success { border-left-color: var(--green); }
.flash-error { border-left-color: var(--red); }
.flash-warning { border-left-color: var(--amber); }

.eyebrow { margin: 0 0 8px; color: var(--brand); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.field { display: grid; gap: 7px; min-width: 0; }
.field.compact { align-self: end; }
.field-label, .field-option legend { color: #3c4856; font-size: 13px; font-weight: 700; }
.input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd5dc;
  border-radius: 5px;
  outline: 0;
}
.input:hover { border-color: #aeb8c3; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(36, 107, 253, .14); }
.textarea { min-height: 84px; resize: vertical; }
.code-input { text-transform: uppercase; font-family: "Cascadia Code", Consolas, monospace; font-weight: 750; letter-spacing: 1.5px; }
.field-errors { display: grid; gap: 3px; color: var(--red); font-size: 12px; }
.form-stack { display: grid; gap: 17px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.check-row { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: var(--brand); }

.auth-page { background: #f2f4f7; }
.auth-page .topbar { position: static; background: transparent; border: 0; }
.auth-layout {
  width: min(1040px, calc(100% - 40px));
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 72px;
  align-items: center;
  padding: 54px 0 84px;
}
.auth-intro h1 { margin: 0; max-width: 620px; font-size: clamp(36px, 5vw, 58px); line-height: 1.08; font-weight: 760; }
.auth-intro > p:not(.eyebrow) { max-width: 620px; margin: 24px 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.auth-capabilities { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-capabilities span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; background: #e5eaf0; border-radius: 5px; color: #45515f; font-size: 13px; font-weight: 650; }
.auth-capabilities svg { width: 17px; }
.security-note { max-width: 600px; margin-top: 26px; padding: 13px 15px; border-left: 3px solid var(--green); background: #e7f4ef; color: #2f5d4d; display: flex; gap: 10px; line-height: 1.55; }
.security-note svg { flex: 0 0 20px; }
.auth-card { background: #fff; border: 1px solid #d9dfe6; border-radius: 7px; padding: 30px; box-shadow: var(--shadow); }
.auth-card header { margin-bottom: 24px; }
.auth-card h2 { margin: 0 0 7px; font-size: 24px; }
.auth-card header p, .auth-switch { margin: 0; color: var(--muted); font-size: 14px; }
.auth-switch { margin-top: 20px; text-align: center; }
.auth-switch a { font-weight: 750; }

.dashboard-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 84px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { margin: 0; font-size: 30px; line-height: 1.2; }
.page-heading p:last-child { margin: 10px 0 0; color: var(--muted); }
.stats-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); background: #fff; }
.stats-strip div { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stats-strip div + div { border-left: 1px solid var(--line); }
.stats-strip span { color: var(--muted); font-size: 13px; }
.stats-strip strong { font-size: 23px; }
.join-band { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.join-band h2, .section-heading h2 { margin: 0; font-size: 20px; }
.join-band p, .section-heading p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.join-form { display: grid; grid-template-columns: minmax(180px, 260px) auto; gap: 9px; }
.room-section { padding: 36px 0 44px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.count-label { color: var(--muted); font-size: 13px; }
.room-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.room-card { --accent: #246bfd; background: #fff; border: 1px solid #dce1e7; border-top: 3px solid var(--accent); border-radius: 6px; padding: 18px; min-width: 0; }
.room-card.accent-1 { --accent: #149eaa; }
.room-card.accent-2 { --accent: #19875f; }
.room-card.accent-3 { --accent: #bd7714; }
.room-card.accent-4 { --accent: #c84b53; }
.room-card.accent-5 { --accent: #7558bd; }
.room-card-top { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.room-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, white); color: var(--accent); font-weight: 800; }
.room-title-wrap { min-width: 0; }
.room-title-wrap h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.room-title-wrap p { margin: 5px 0 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-title-wrap p span { padding: 0 5px; }
.room-title-wrap code { color: #425064; font-weight: 750; }
.live-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.live-state i { width: 7px; height: 7px; border-radius: 50%; background: #9da6b2; }
.live-state.is-live { color: var(--green); }
.live-state.is-live i { background: var(--green); box-shadow: 0 0 0 3px rgba(24, 135, 95, .12); }
.room-badges { min-height: 31px; margin: 15px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.room-badges span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 4px; background: #eff2f5; color: #566272; font-size: 11px; }
.room-badges svg { width: 13px; height: 13px; }
.room-badges .ai-badge { color: #6c4b9b; background: #f0eafb; }
.room-card-actions { display: flex; align-items: center; gap: 8px; }
.room-card-actions .button { margin-right: auto; }
.room-card-actions form { margin: 0; }
.empty-state { min-height: 190px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed #c8d0d9; color: var(--muted); }
.empty-state svg { width: 30px; }
.empty-state h3 { margin: 12px 0 0; color: var(--ink); }
.empty-state p { margin: 6px 0 0; }
.new-room-band { scroll-margin-top: 80px; padding: 34px 0 0; border-top: 1px solid var(--line); }
.room-form { display: grid; gap: 18px; }
.form-options { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 22px; align-items: end; }
.field-option { margin: 0; padding: 0; border: 0; min-width: 0; }
.field-option legend { margin-bottom: 8px; }
.segmented { min-height: 44px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid #cfd5dc; border-radius: 5px; overflow: hidden; background: #fff; }
.segmented label { position: relative; display: grid; place-items: center; min-width: 72px; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; }
.segmented label + label { border-left: 1px solid #cfd5dc; }
.segmented input { position: absolute; opacity: 0; }
.segmented label:has(input:checked) { background: #e8efff; color: var(--brand); }
.color-swatches { min-height: 44px; display: flex; align-items: center; gap: 9px; }
.swatch { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch span { width: 22px; height: 22px; border-radius: 50%; background: #246bfd; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch-1 span { background: #149eaa; }.swatch-2 span { background: #19875f; }.swatch-3 span { background: #bd7714; }.swatch-4 span { background: #c84b53; }.swatch-5 span { background: #7558bd; }
.swatch:has(input:checked)::after { content: ""; position: absolute; inset: 0; border: 2px solid #1f2935; border-radius: 50%; }

.form-page { background: #f3f5f8; }
.centered-form-shell { width: min(520px, calc(100% - 40px)); margin: 0 auto; padding: 66px 0; }
.centered-form-shell.wide { width: min(760px, calc(100% - 40px)); }
.form-panel { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 30px; box-shadow: var(--shadow); }
.form-panel h1 { margin: 0; font-size: 26px; }
.form-panel > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.form-panel .form-stack { margin-top: 24px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 28px; color: var(--muted); font-size: 13px; font-weight: 700; }
.back-link svg { width: 16px; }
.edit-check { align-self: end; min-height: 44px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; }
.error-page { min-height: calc(100vh - 64px); display: grid; place-items: center; align-content: center; text-align: center; padding: 30px; }
.error-page > svg { width: 44px; height: 44px; color: var(--brand); }
.error-page h1 { margin: 20px 0 0; }
.error-page p { margin: 10px 0 24px; color: var(--muted); }

/* Meeting room */
.meeting-page { overflow: hidden; background: #101318; color: #eef2f7; }
.meeting-shell { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 0; overflow: hidden; background: #101318; transition: grid-template-columns .2s ease; }
.meeting-shell[data-panel="open"] { grid-template-columns: minmax(0, 1fr) 360px; }
.meeting-stage { position: relative; min-width: 0; height: 100dvh; overflow: hidden; }
.meeting-header { height: 60px; padding: 0 18px; display: flex; align-items: center; gap: 12px; position: absolute; inset: 0 0 auto; z-index: 5; background: linear-gradient(180deg, rgba(9,11,14,.88), rgba(9,11,14,0)); pointer-events: none; }
.meeting-header > * { pointer-events: auto; }
.meeting-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: 14px; }
.meeting-brand .brand-mark { width: 25px; height: 21px; }
.connection-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 5px; background: rgba(25, 30, 37, .82); color: #aeb8c5; font-size: 12px; }
.connection-pill i { width: 7px; height: 7px; border-radius: 50%; background: #b37a26; }
.connection-pill.online i { background: #3ecb92; }
.icon-button.dark { color: #e7ebf0; background: rgba(31, 37, 45, .86); }
.icon-button.dark:hover { background: #303844; }
.video-grid { height: 100%; display: grid; gap: 8px; padding: 68px 14px 112px; place-content: center; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.video-grid[data-count="1"] { grid-template-columns: minmax(0, min(80vw, 1180px)); grid-template-rows: minmax(0, 1fr); }
.video-grid[data-count="3"], .video-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-grid[data-count="5"], .video-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.video-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #303640; border-radius: 7px; background: #1c2128; }
.video-tile video { width: 100%; height: 100%; object-fit: cover; background: #171b20; }
.video-tile video.mirror { transform: scaleX(-1); }
.video-tile .video-off { position: absolute; inset: 0; display: grid; place-items: center; background: #1b2027; }
.tile-avatar { width: clamp(52px, 8vw, 88px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #303b49; color: #f5f7fa; font-size: clamp(21px, 4vw, 34px); font-weight: 800; }
.tile-meta { position: absolute; left: 10px; right: 10px; bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.tile-name { max-width: calc(100% - 48px); padding: 5px 8px; border-radius: 4px; background: rgba(7,9,12,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.tile-flags { display: flex; gap: 5px; }
.tile-flag { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: rgba(7,9,12,.74); color: #e5e9ef; }
.tile-flag svg { width: 14px; }
.ai-tile { border-color: #564a71; background: #1e1b27; }
.ai-visual { position: absolute; inset: 0; display: grid; place-items: center; }
.ai-core { width: min(24vw, 126px); aspect-ratio: 1; border-radius: 50%; border: 1px solid #77659a; background: radial-gradient(circle at 40% 35%, #7c67a9, #2f2840 64%, #1b1822); display: flex; align-items: center; justify-content: center; gap: 6px; }
.ai-core i { width: 5px; height: 19px; border-radius: 3px; background: #ddd2f4; animation: pulse-bar 1.1s ease-in-out infinite; }
.ai-core i:nth-child(2) { height: 31px; animation-delay: .12s; }.ai-core i:nth-child(3) { animation-delay: .24s; }
.ai-tile:not(.speaking) .ai-core i { animation-play-state: paused; height: 7px; }
@keyframes pulse-bar { 0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)} }
.caption-overlay { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 6; width: min(760px, calc(100% - 32px)); padding: 10px 14px; border-radius: 5px; background: rgba(5,7,9,.83); display: flex; gap: 10px; justify-content: center; font-size: 15px; }
.caption-overlay strong { color: #8fb3ff; white-space: nowrap; }
.meeting-controls { position: absolute; z-index: 8; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid #333a44; border-radius: 8px; background: rgba(23, 27, 33, .94); box-shadow: 0 14px 35px rgba(0,0,0,.34); }
.control-button { width: 45px; height: 45px; flex: 0 0 45px; border-radius: 50%; background: #2a3038; color: #eef2f7; }
.control-button:hover { background: #39414c; }
.control-button[data-active="false"] { background: #54353a; color: #ffd9dc; }
.control-button#screen-button[data-active="false"],
.control-button#caption-button[data-active="false"],
.control-button.ai-control[data-active="false"] { background: #2a3038; color: #eef2f7; }
.control-button.ai-control[data-active="true"] { background: #65518b; color: #fff; }
.control-button.danger { background: #c33c42; color: #fff; }
.control-button svg { width: 20px; height: 20px; }
.meeting-meta { position: absolute; left: 18px; right: 18px; bottom: max(23px, env(safe-area-inset-bottom)); z-index: 7; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.meeting-meta > * { pointer-events: auto; }
.meeting-meta time { font-variant-numeric: tabular-nums; color: #c9d0d9; font-size: 13px; }
#room-code-button { min-width: 0; border: 0; border-left: 1px solid #4a515c; padding: 0 0 0 10px; background: none; color: #e8edf3; display: flex; align-items: center; gap: 8px; }
#room-code-button strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room-code-button code { color: #9eb2cc; }
#invite-button { margin-left: auto; }
.notice-dot { position: absolute; width: 7px; height: 7px; top: 6px; right: 6px; border-radius: 50%; background: #ffcb5a; }
.meeting-panel { width: 360px; height: 100dvh; overflow: hidden; background: #f7f8fa; color: var(--ink); border-left: 1px solid #343b45; display: grid; grid-template-rows: 57px minmax(0, 1fr); }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line); background: #fff; }
.panel-tabs { display: flex; align-self: stretch; gap: 18px; }
.panel-tab { position: relative; border: 0; background: none; color: var(--muted); font-weight: 700; }
.panel-tab.active { color: var(--ink); }
.panel-tab.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: 0; background: var(--brand); }
.panel-pane { display: none; min-height: 0; }
.panel-pane.active { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ai-panel { padding: 14px 16px; border-bottom: 1px solid var(--line); background: #f1edf7; }
.ai-panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ai-panel-title > div { display: grid; gap: 2px; }
.ai-panel-title strong { font-size: 13px; }.ai-panel-title span { color: #695d78; font-size: 11px; }
.ai-indicator { width: 34px; height: 34px; border-radius: 50%; background: #65518b; display: flex; align-items: center; justify-content: center; gap: 2px; }
.ai-indicator i { width: 3px; height: 11px; border-radius: 2px; background: #fff; }.ai-indicator i:nth-child(2){height:17px}
.switch-row { margin-top: 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; }
.switch-track { width: 34px; height: 19px; border-radius: 10px; background: #aab2bd; position: relative; }
.switch-track::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .16s ease; }
.switch-row input:checked + .switch-track { background: #65518b; }
.switch-row input:checked + .switch-track::after { transform: translateX(15px); }
.switch-row > span:last-child { display: grid; }.switch-row strong { font-size: 12px; }.switch-row small { margin-top: 2px; color: #7c7087; font-size: 10px; }
.message-feed { min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.message { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; }
.message-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #dfe5ec; color: #425064; font-size: 12px; font-weight: 800; }
.message.ai .message-avatar { background: #65518b; color: #fff; }
.message.system { grid-template-columns: 1fr; }
.message.system .message-body { padding: 8px 10px; border-left: 2px solid #adb6c1; background: #edf0f3; color: #657180; font-size: 12px; }
.message-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.message-head strong { font-size: 12px; }.message-head time { color: #929ba7; font-size: 10px; }
.message-text { color: #2d3743; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.minutes .message-body { padding: 11px; border: 1px solid #d6dce3; border-radius: 5px; background: #fff; }
.message-composer { padding: 11px; border-top: 1px solid var(--line); background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; }
.message-composer .input { min-height: 38px; height: 38px; }
.member-list { margin: 0; padding: 12px; list-style: none; overflow-y: auto; }
.member-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 6px; }
.member-item .message-avatar { width: 34px; height: 34px; }
.member-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.member-item small { color: var(--muted); font-size: 10px; }
.member-flags { display: flex; gap: 5px; color: #7d8794; }.member-flags svg { width: 15px; }
.minutes-dialog { width: min(760px, calc(100% - 28px)); max-height: min(82vh, 820px); padding: 0; border: 1px solid #ccd3db; border-radius: 7px; color: var(--ink); box-shadow: 0 28px 80px rgba(0,0,0,.38); }
.minutes-dialog::backdrop { background: rgba(7,9,12,.72); }
.minutes-dialog > header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.minutes-dialog h2 { margin: 0; font-size: 22px; }
.minutes-toolbar { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: #f6f8fa; }
.minutes-toolbar > span { color: var(--muted); font-size: 12px; }.minutes-toolbar > div { display: flex; gap: 8px; }
.minutes-content { min-height: 260px; max-height: 58vh; overflow-y: auto; padding: 22px 26px 34px; line-height: 1.7; }
.minutes-content h1 { font-size: 22px; }.minutes-content h2 { margin-top: 22px; font-size: 17px; }.minutes-content p { white-space: pre-wrap; }
.minutes-empty { color: var(--muted); text-align: center; padding-top: 80px; }
.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 100; max-width: min(460px, calc(100% - 30px)); padding: 10px 14px; border-radius: 5px; background: #fff; color: #1c2530; box-shadow: 0 12px 34px rgba(0,0,0,.32); font-size: 13px; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; gap: 30px; width: min(620px, calc(100% - 32px)); padding-top: 32px; }
  .auth-intro h1 { font-size: 38px; }
  .auth-intro > p:not(.eyebrow) { font-size: 16px; }
  .room-list { grid-template-columns: 1fr; }
  .form-options { grid-template-columns: 1fr 1fr; }
  .color-option { grid-column: 1 / -1; }
  .meeting-shell[data-panel="open"] { grid-template-columns: minmax(0, 1fr); }
  .meeting-panel { position: fixed; inset: 0 0 0 auto; z-index: 30; width: min(390px, 100%); transform: translateX(100%); transition: transform .2s ease; }
  .meeting-shell[data-panel="open"] .meeting-panel { transform: translateX(0); }
  .meeting-meta { right: auto; }
  #invite-button { margin-left: 0; }
  #panel-button { position: fixed; right: 18px; bottom: max(23px, env(safe-area-inset-bottom)); }
}

@media (min-width: 901px) {
  .meeting-shell[data-panel="closed"] .meeting-panel { width: 0; border-left: 0; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 16px; }.account-name { display: none; }
  .dashboard-shell { width: min(100% - 28px, 1180px); padding-top: 26px; }
  .page-heading { align-items: start; }.page-heading h1 { font-size: 25px; }.page-heading > .button span { display: none; }
  .stats-strip { grid-template-columns: 1fr; }.stats-strip div + div { border-left: 0; border-top: 1px solid var(--line); }
  .join-band { align-items: stretch; flex-direction: column; }.join-form { grid-template-columns: minmax(0, 1fr) auto; }
  .room-card { padding: 15px; }.room-card-top { grid-template-columns: 38px minmax(0,1fr); }.room-avatar { width: 38px; height: 38px; }.live-state { grid-column: 2; justify-self: start; }
  .two-col, .form-options { grid-template-columns: 1fr; }.color-option { grid-column: auto; }
  .auth-layout { width: calc(100% - 28px); }.auth-intro h1 { font-size: 32px; }.auth-card, .form-panel { padding: 22px; }
  .video-grid { padding: 62px 8px 142px; grid-template-columns: 1fr !important; grid-auto-rows: minmax(180px, 1fr); overflow-y: auto; place-content: stretch; }
  .meeting-controls { bottom: max(72px, calc(env(safe-area-inset-bottom) + 62px)); gap: 5px; padding: 6px; max-width: calc(100% - 16px); }
  .control-button { width: 40px; height: 40px; flex-basis: 40px; }
  .meeting-meta { left: 12px; right: 56px; bottom: max(20px, env(safe-area-inset-bottom)); }
  #room-code-button strong { max-width: 110px; }
  .caption-overlay { bottom: 130px; font-size: 13px; }
  .minutes-toolbar { align-items: start; flex-direction: column; }.minutes-toolbar > div { width: 100%; }.minutes-toolbar .button { flex: 1; }
}