:root {
  color-scheme: dark;
  font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #05090b;
  color: #dff8fb;
  --accent: #69d6e7;
  --accent-soft: #b4f1f8;
  --surface: #070c0e;
  --line: rgba(183, 218, 224, .14);
  --muted: #7f969b;
  --warn: #efc36a;
  --danger: #e57979;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: #05090b; }
body { min-height: 100dvh; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.meeting-page { overflow: hidden; }
.meeting-surface { width: min(100%, 560px); min-height: 100dvh; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: 58px minmax(0, 1fr) 72px 88px; background: radial-gradient(circle at 50% 38%, #0c171b 0, #070c0e 48%, #05090b 100%); }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.app-identity { min-width: 0; display: grid; gap: 3px; }
.app-identity strong { color: #e8f6f8; font-size: 16px; letter-spacing: -.02em; }
.app-identity span { max-width: 170px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.session-time { display: flex; align-items: center; gap: 10px; color: #789096; font: 600 12px ui-monospace, "Cascadia Mono", monospace; letter-spacing: .08em; }
.semantic-light { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #34464a; }
.semantic-light.ready { background: var(--accent); box-shadow: 0 0 10px rgba(105,214,231,.35); }
.semantic-light.warn { background: var(--warn); box-shadow: none; }
.text-button, .round-button, .voice-core, .danger-button { border: 0; cursor: pointer; }
.text-button:active, .round-button:active, .voice-core:active, .danger-button:active { transform: scale(.97); }
.text-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: #0d1619; color: #c9dadd; font-size: 13px; font-weight: 650; }
.text-button:focus-visible, .round-button:focus-visible, .voice-core:focus-visible, .danger-button:focus-visible, .primary:focus-visible { outline: 3px solid rgba(105,214,231,.28); outline-offset: 2px; }
.voice-stage { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
.voice-visual { position: relative; min-height: 0; display: grid; place-items: center; }
#voice-ring { width: min(84vw, 390px); height: min(84vw, 390px); max-height: 46dvh; aspect-ratio: 1; }
.voice-core { position: absolute; width: 118px; height: 118px; display: grid; place-items: center; border-radius: 50%; background: rgba(8, 16, 19, .88); box-shadow: inset 0 0 0 1px rgba(180,241,248,.1); transition: transform .2s ease, background .2s ease; }
.voice-core i { width: 14px; height: 14px; border-radius: 50%; background: #466167; transition: transform .25s ease, background .25s ease; }
[data-mode="connecting"] .voice-core i { background: var(--accent); animation: core-breathe 1.2s ease-in-out infinite; }
[data-mode="listening"] .voice-core i { background: var(--accent); transform: scale(.72); }
[data-mode="speaking"] .voice-core { background: rgba(12,31,35,.94); }
[data-mode="speaking"] .voice-core i { background: var(--accent-soft); transform: scale(1.45); box-shadow: 0 0 24px rgba(105,214,231,.28); }
[data-mode="muted"] .voice-core i { background: var(--warn); }
[data-mode="error"] .voice-core i { background: var(--danger); }
.voice-copy { padding: 0 8px 14px; text-align: center; }
.voice-copy h1 { margin: 0 0 6px; color: #eaf8fa; font-size: 20px; letter-spacing: -.03em; }
.voice-copy p { margin: 0; color: #8ea6ab; font-size: 13px; line-height: 1.45; }
.status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; align-items: stretch; }
.status-strip > div { min-width: 0; padding: 10px 9px; display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 13px; background: rgba(12,20,23,.78); }
.status-strip p { min-width: 0; margin: 0; display: grid; gap: 3px; }
.status-strip strong { color: #b8cdd1; font-size: 11px; font-weight: 650; }
.status-strip p span { overflow: hidden; color: #71898f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.round-controls { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.round-button { position: relative; width: 82px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14,24,27,.76); color: #aec4c8; transition: transform .16s ease, background .2s ease, opacity .2s ease; }
.round-button:disabled { opacity: .24; cursor: default; }
.round-button.active { border-color: rgba(239,195,106,.42); background: rgba(83,63,27,.35); }
.end-button { border-color: rgba(229,121,121,.3); background: rgba(55,22,25,.52); }
.control-label { color: inherit; font-size: 11px; font-weight: 650; }
.mic-icon { position: relative; width: 13px; height: 20px; border: 1.8px solid currentColor; border-radius: 8px; }
.mic-icon::before { content: ""; position: absolute; width: 21px; height: 12px; left: -6px; top: 8px; border: 1.8px solid currentColor; border-top: 0; border-radius: 0 0 12px 12px; }
.mic-icon::after { content: ""; position: absolute; width: 1.8px; height: 6px; left: 4px; bottom: -8px; background: currentColor; box-shadow: -4px 6px 0 -0.4px currentColor, 4px 6px 0 -0.4px currentColor; }
.active .mic-icon::before { width: 25px; height: 1.8px; left: -7px; top: 8px; border: 0; border-radius: 2px; background: var(--warn); transform: rotate(-45deg); }
.end-icon { width: 18px; height: 18px; border-radius: 5px; background: #e5a1a1; }
.speaker-icon { position: relative; width: 11px; height: 16px; border-radius: 3px 0 0 3px; background: currentColor; }
.speaker-icon::before { content: ""; position: absolute; left: 7px; top: -4px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 11px solid currentColor; }
.speaker-icon::after { content: ""; position: absolute; width: 12px; height: 22px; left: 15px; top: -3px; border: 1.8px solid currentColor; border-left: 0; border-radius: 0 20px 20px 0; opacity: .65; }
.error-toast { position: fixed; left: 50%; bottom: calc(112px + env(safe-area-inset-bottom)); max-width: min(86vw, 420px); margin: 0; padding: 11px 15px; border: 1px solid rgba(229,121,121,.25); border-radius: 12px; background: rgba(48,18,22,.94); color: #f2b8b8; font-size: 12px; line-height: 1.45; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: .22s ease; }
.error-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.login-shell { min-height: 100dvh; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); display: grid; place-items: center; background: radial-gradient(circle at 50% 26%, #102025, #070c0e 56%, #05090b); }
.login-card { width: min(100%, 420px); }
.login-brand { width: 72px; height: 72px; margin: 0 auto 28px; display: grid; place-items: center; border: 1px solid rgba(105,214,231,.42); border-radius: 22px; background: #0a1215; }
.login-brand i { width: 28px; height: 28px; border: 2px solid var(--accent); border-radius: 50%; box-shadow: inset 0 0 0 7px #0a1215; }
.login-card h1 { margin: 0 0 10px; text-align: center; font-size: 24px; letter-spacing: -.04em; }
.login-copy { margin: 0 auto 20px; max-width: 34ch; color: #91a7ac; text-align: center; font-size: 13px; line-height: 1.6; }
.login-server { width: fit-content; margin: 0 auto 26px; padding: 8px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; color: #a9bdc1; font-size: 12px; }
.login-card form { display: grid; gap: 15px; }
.login-card label { display: grid; gap: 8px; color: #c7d8db; font-size: 13px; font-weight: 650; }
.login-card input { width: 100%; height: 54px; padding: 0 15px; border: 1px solid var(--line); border-radius: 13px; outline: 0; background: #0c1417; color: #e7f7f9; font-size: 16px; }
.login-card input::placeholder { color: #6f858a; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(105,214,231,.1); }
.primary { min-height: 54px; border: 0; border-radius: 13px; background: var(--accent); color: #00363d; font-weight: 700; }
.primary:disabled { background: #33484d; color: #81969b; cursor: default; }
.notice { min-height: 20px; margin: 18px 0 0; color: #e6a4a4; text-align: center; font-size: 12px; line-height: 1.5; }
.notice.info { color: #91b3b8; }
.login-footnote { margin: 24px auto 0; max-width: 36ch; color: #6f858a; text-align: center; font-size: 11px; line-height: 1.55; }

.settings-dialog { width: min(100%, 560px); max-height: calc(100dvh - 32px); margin: auto auto 0; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); border: 1px solid #294046; border-bottom: 0; border-radius: 24px 24px 0 0; outline: 0; background: #10191c; color: #e5f2f4; box-shadow: 0 -18px 48px rgba(0,0,0,.38); }
.settings-dialog::backdrop { background: rgba(0,0,0,.62); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-head p { margin: 0 0 4px; color: #7f969b; font-size: 12px; }
.settings-head h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.settings-list { margin: 24px 0; border-top: 1px solid var(--line); }
.settings-list > div { min-height: 62px; padding: 12px 2px; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.settings-list span { color: #82999e; font-size: 12px; }
.settings-list strong { color: #d7e7e9; font-size: 13px; font-weight: 600; line-height: 1.45; text-align: right; }
.danger-button { width: 100%; min-height: 50px; border: 1px solid rgba(229,121,121,.36); border-radius: 14px; background: rgba(65,25,28,.72); color: #efb1b1; font-weight: 700; }
@keyframes core-breathe { 50% { transform: scale(1.5); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 650px) { .meeting-page { padding: 20px; } .meeting-surface { min-height: calc(100dvh - 40px); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; } .settings-dialog { margin: auto; border-bottom: 1px solid #294046; border-radius: 24px; } }