:root {
  --bg: #0b0f14;
  --bg-soft: #10161d;
  --panel: #131a22;
  --panel-2: #18212b;
  --border: rgba(148, 178, 205, 0.14);
  --border-strong: rgba(148, 178, 205, 0.26);
  --text: #e8eef4;
  --text-dim: #93a4b4;
  --text-faint: #64778a;
  --accent: #2dd4bf;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --accent-strong: #14b8a6;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --warn: #fbbf24;
  --ok: #4ade80;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  font-size: 15px;
}

* { box-sizing: border-box; }

html, body, #app { height: 100%; }

body {
  margin: 0;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(45, 212, 191, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(96, 130, 255, 0.07), transparent 60%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; flex-direction: column; height: 100%; }

/* ---------- 顶栏 ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 15, 20, 0.72);
  backdrop-filter: blur(10px);
  flex: none;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #3b82f6);
  display: grid; place-items: center; color: #04211c; font-weight: 800; font-size: 13px;
}
.brand-sub { color: var(--text-faint); font-size: 12px; font-weight: 400; }
.provider-badge {
  font-size: 12px; color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(45, 212, 191, 0.3);
  padding: 2px 8px; border-radius: 999px;
}
.header-right { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  font-size: 13px;
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.status-pill[data-active='true'] .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.status-pill[data-active='false'] .dot { background: var(--text-faint); }
.status-pill[data-state='failed'] .dot { background: var(--danger); }

/* ---------- 主布局 ---------- */
.app-main {
  flex: 1; display: flex; min-height: 0;
  padding: 16px; gap: 16px;
}
.side-panel {
  width: 380px; flex: none;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.tabs {
  display: flex; flex: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.tab {
  flex: 1; padding: 10px 4px; text-align: center;
  color: var(--text-dim); font-size: 13.5px; cursor: pointer;
  border-bottom: 2px solid transparent;
  user-select: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--panel); }
.tab-body { flex: 1; overflow-y: auto; padding: 16px; }
.stage {
  flex: 1; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.app.in-video-call .app-header, .app.in-video-call .side-panel { display: none; }
.app.in-video-call .app-main { padding: 0; gap: 0; }
.app.in-video-call .stage { border: 0; border-radius: 0; background: #05070a; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 14px; }
.field-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.field-label .hint { color: var(--text-faint); font-size: 12px; }
.input, .textarea, .select {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.input:focus, .textarea:focus, .select:focus { border-color: rgba(45, 212, 191, 0.55); }
.textarea { resize: vertical; min-height: 72px; line-height: 1.55; }
.select { appearance: none; }
.segmented { display: flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.segmented button {
  flex: 1; border: none; background: transparent; color: var(--text-dim);
  padding: 7px 0; border-radius: 6px; cursor: pointer; font-size: 13.5px; font-family: inherit;
}
.segmented button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--text-dim); }
.switch input { accent-color: var(--accent); width: 16px; height: 16px; }

.btn {
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 14px; font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--accent-strong), #0d9488); border-color: transparent; color: #04211c; font-weight: 700; }
.btn.danger { background: var(--danger-soft); border-color: rgba(248, 113, 113, 0.4); color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12.5px; border-radius: 6px; }
.btn.block { width: 100%; }

.avatar-picker { display: flex; gap: 12px; align-items: flex-start; }
.avatar-preview {
  width: 84px; height: 84px; flex: none;
  border-radius: 10px; object-fit: cover;
  background: var(--bg-soft); border: 1px dashed var(--border-strong);
  display: grid; place-items: center; color: var(--text-faint); font-size: 12px;
  overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-library { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.avatar-choice {
  flex: 0 0 76px; width: 76px; padding: 4px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-soft);
  color: var(--text-dim); cursor: pointer; font: inherit; font-size: 11px;
}
.avatar-choice.selected { border-color: var(--accent); color: var(--accent); }
.avatar-choice img { display: block; width: 66px; height: 74px; object-fit: contain; border-radius: 5px; background: #05080b; }
.avatar-choice span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 3px; }

.notice {
  background: var(--accent-soft);
  border: 1px solid rgba(45, 212, 191, 0.25);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 12.5px; line-height: 1.6;
  margin-bottom: 14px;
}
.error-banner {
  background: var(--danger-soft);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13px; line-height: 1.5;
  margin: 12px 16px 0;
}

/* ---------- 通话舞台 ---------- */
.stage-view { flex: 1; position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.video-canvas { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.stage-view.phone-mode { background: #070b10; }
.stage-view.phone-mode .video-canvas {
  width: auto; height: 100%; max-width: 100%; aspect-ratio: 9 / 16;
  border: 1px solid var(--border-strong); border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #05080b; transform-origin: center; transition: transform 900ms cubic-bezier(.2,.75,.25,1); }
.camera-zoom {
  position: absolute; z-index: 5; left: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border: 1px solid rgba(151,188,247,.24); border-radius: 11px;
  color: #d4e4ff; background: rgba(10,18,34,.8); backdrop-filter: blur(14px);
  box-shadow: 0 8px 25px rgba(0,0,0,.24);
}
.camera-zoom-label { padding: 0 5px; color: #9eb5d9; font-size: 11px; white-space: nowrap; }
.camera-zoom-value { min-width: 37px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.camera-zoom button {
  min-width: 26px; height: 26px; border: 1px solid rgba(151,188,247,.22); border-radius: 7px;
  color: #e6f0ff; background: rgba(86,113,173,.19); font: inherit; font-size: 16px; cursor: pointer;
}
.camera-zoom button:hover:not(:disabled) { background: rgba(86,113,173,.45); }
.camera-zoom button:disabled { opacity: .4; cursor: default; }
.camera-zoom .camera-zoom-reset { padding: 0 7px; font-size: 11px; }
.camera-zoom-notice {
  position: absolute; z-index: 5; left: 16px; bottom: 61px;
  max-width: min(330px, calc(100% - 32px)); padding: 8px 11px;
  border-radius: 8px; color: #daedff; background: rgba(10,18,34,.82);
  font-size: 11px; pointer-events: none;
}
.stage.immersive .camera-zoom { bottom: 100px; }
.stage.immersive .camera-zoom-notice { bottom: 145px; }
.preview-avatar { display: block; }
.stage-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--text-dim); }
.avatar-ring {
  width: 168px; height: 168px; border-radius: 50%;
  padding: 5px;
  background: conic-gradient(from 0deg, rgba(45, 212, 191, 0.05), rgba(45, 212, 191, 0.55), rgba(59, 130, 246, 0.35), rgba(45, 212, 191, 0.05));
  animation: ring-spin 8s linear infinite;
}
.avatar-ring[data-speaking='false'] { animation-play-state: paused; filter: saturate(0.4); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.avatar-ring .inner {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--bg-soft);
  display: grid; place-items: center;
}
.avatar-ring img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ring .placeholder { font-size: 40px; color: var(--text-faint); }
.stage-meta { position: absolute; top: 14px; left: 16px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.call-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.call-timer { font-variant-numeric: tabular-nums; margin-left: 8px; color: var(--text); }
.chip {
  background: rgba(5, 8, 11, 0.6); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(6px);
}
.local-video {
  position: absolute; right: 16px; bottom: 16px;
  width: 200px; aspect-ratio: 3/4; max-height: 32%;
  border-radius: 10px; border: 1px solid var(--border-strong);
  object-fit: cover; background: #05080b;
  box-shadow: var(--shadow);
  transform: scaleX(-1);
}
.local-preview-hint {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  width: 200px; aspect-ratio: 3 / 4; max-height: 32%;
  display: grid; place-items: center; padding: 12px;
  border-radius: 10px; color: var(--text-dim); font-size: 12px; text-align: center;
  pointer-events: none;
}
.view-toggle { white-space: nowrap; }
.stage.immersive .stage-view { background: #000; }
.stage.immersive .video-canvas { width: 100%; height: 100%; }
.stage.immersive .stage-meta {
  z-index: 3; top: 26px; left: 30px; padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(10,13,18,.65); color: var(--text);
  backdrop-filter: blur(12px); font-size: 13px;
}
.stage.immersive .local-video, .stage.immersive .local-preview-hint {
  z-index: 2; top: 28px; right: 30px; bottom: auto;
  width: clamp(140px, 16vw, 240px); max-height: 34%;
  border: 2px solid rgba(255,255,255,.42); border-radius: 16px;
}
.stage.immersive .local-preview-hint { background: rgba(5,8,11,.7); }
.stage.immersive .transcript {
  position: absolute; z-index: 4; right: 30px; bottom: 106px;
  width: min(390px, calc(100vw - 40px)); height: min(340px, 45vh);
  border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  background: rgba(12,16,23,.9); backdrop-filter: blur(18px);
  box-shadow: 0 16px 50px rgba(0,0,0,.4);
}
.stage.immersive .controls {
  position: absolute; z-index: 5; left: 50%; bottom: 26px;
  transform: translateX(-50%); width: auto; max-width: calc(100vw - 32px);
  padding: 10px 14px; border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; background: rgba(18,22,29,.78);
  backdrop-filter: blur(18px); box-shadow: 0 12px 40px rgba(0,0,0,.42);
}
.stage.immersive .ctrl-btn { flex: none; width: 46px; height: 46px; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.14); }
.stage.immersive .ctrl-btn.off { background: var(--danger-soft); border-color: rgba(248,113,113,.4); }
.stage.immersive .ctrl-btn.hangup { background: #e12633; border-color: transparent; }
.stage.immersive .ctrl-btn.active { background: rgba(45,212,191,.3); }
.call-control-text { border: 0; padding: 8px 10px; background: transparent; color: var(--text); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.call-control-text:hover { color: var(--accent); }
.stage.immersive .text-input { width: min(320px, 25vw); }
.stage.immersive .text-input .input { min-width: 0; }
.stage.immersive .error-banner { position: absolute; z-index: 6; top: 80px; left: 30px; max-width: min(480px, calc(100vw - 60px)); }
.preview-actions {
  position: absolute; z-index: 5; left: 50%; bottom: 26px;
  transform: translateX(-50%); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  background: rgba(18,22,29,.85); backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,.42);
  white-space: nowrap; color: var(--text-dim); font-size: 12px;
}

.controls {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-soft);
}
.ctrl-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--panel-2);
  color: var(--text); cursor: pointer; font-size: 17px;
  display: grid; place-items: center;
}
.ctrl-btn:hover:not(:disabled) { filter: brightness(1.2); }
.ctrl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ctrl-btn.off { background: var(--danger-soft); border-color: rgba(248, 113, 113, 0.4); }
.ctrl-btn.hangup { background: #dc2626; border-color: transparent; color: #fff; }
.text-input { flex: 1; display: flex; gap: 8px; }
.text-input .input { flex: 1; }
.text-mode-select { width: 62px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--text); font: inherit; font-size: 12px; }
@media (max-width: 760px) {
  .stage.immersive .controls { width: calc(100vw - 24px); justify-content: center; border-radius: 20px; }
  .stage.immersive .text-input {
    position: absolute; left: 0; bottom: calc(100% + 8px); width: 100%;
    padding: 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
    background: rgba(18,22,29,.92); box-shadow: 0 8px 28px rgba(0,0,0,.38);
  }
}

/* ---------- 转写 ---------- */
.transcript {
  flex: none; height: 168px; overflow-y: auto;
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(5, 8, 11, 0.35);
}
.transcript:empty { display: none; }
.tr-line { font-size: 13px; line-height: 1.5; display: flex; gap: 8px; }
.tr-role { flex: none; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; height: fit-content; margin-top: 2px; }
.tr-line[data-role='avatar'] .tr-role { background: var(--accent-soft); color: var(--accent); }
.tr-line[data-role='user'] .tr-role { background: rgba(59, 130, 246, 0.16); color: #7db1ff; }
.tr-line[data-role='system'] .tr-role { background: var(--panel-2); color: var(--text-faint); }
.tr-text { color: var(--text-dim); word-break: break-all; }
.tr-line[data-role='avatar'] .tr-text { color: var(--text); }

/* ---------- 列表类 ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.card-row { display: flex; align-items: center; gap: 10px; }
.card-main { flex: 1; min-width: 0; }
.card-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-sub { color: var(--text-faint); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-actions { display: flex; gap: 6px; flex: none; }
.badge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border);
}
.badge.ok { color: var(--ok); border-color: rgba(74, 222, 128, 0.35); }
.badge.warn { color: var(--warn); border-color: rgba(251, 191, 36, 0.35); }
.badge.err { color: var(--danger); border-color: rgba(248, 113, 113, 0.35); }
.badge.accent { color: var(--accent); border-color: rgba(45, 212, 191, 0.35); }
.empty { color: var(--text-faint); font-size: 13px; text-align: center; padding: 28px 0; line-height: 1.7; }

.contact-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--panel-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 15px; color: var(--accent);
  overflow: hidden; font-weight: 600;
}
.contact-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 聊天 ---------- */
.chat-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 300px; overflow-y: auto; }
.chat-msg { max-width: 88%; font-size: 13px; line-height: 1.55; padding: 8px 11px; border-radius: 10px; }
.chat-msg.user { align-self: flex-end; background: rgba(59, 130, 246, 0.18); border: 1px solid rgba(59, 130, 246, 0.3); }
.chat-msg.assistant { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); }
.chat-msg.system { align-self: center; color: var(--text-faint); font-size: 12px; background: none; border: none; padding: 2px; }

/* ---------- 弹层 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(3, 6, 9, 0.66);
  display: grid; place-items: center;
  backdrop-filter: blur(4px);
}
.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.modal h3 { margin: 0 0 14px; font-size: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ---------- 登录门 ---------- */
.gate {
  flex: 1; display: grid; place-items: center; padding: 24px;
}
.gate-card {
  width: min(400px, 100%);
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 16px; padding: 28px; box-shadow: var(--shadow);
  text-align: center;
}
.gate-card .lock { font-size: 34px; }
.gate-card h2 { font-size: 18px; margin: 12px 0 6px; }
.gate-card p { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0 0 16px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(148, 178, 205, 0.2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) {
  .app-main { flex-direction: column; overflow-y: auto; }
  .side-panel { width: 100%; max-height: none; }
  .stage { min-height: 70vh; }
  .local-video, .local-preview-hint { width: 120px; }
  .app.in-video-call .app-main { flex-direction: row; overflow: hidden; }
  .app.in-video-call .stage { min-height: 0; }
  .stage.immersive .stage-meta { top: 16px; left: 16px; }
  .stage.immersive .local-video, .stage.immersive .local-preview-hint { top: 16px; right: 16px; width: 110px; }
  .stage.immersive .controls { bottom: 16px; gap: 4px; padding: 7px; }
  .stage.immersive .ctrl-btn { width: 38px; height: 38px; font-size: 14px; }
  .stage.immersive .transcript { right: 16px; bottom: 78px; }
  .preview-actions { bottom: 16px; flex-wrap: wrap; justify-content: center; white-space: normal; }
}

/* Live Studio visual system */
:root {
  --bg: #080b13;
  --bg-soft: #0f1421;
  --panel: #101625;
  --panel-2: #192236;
  --border: rgba(160, 184, 235, .13);
  --border-strong: rgba(160, 184, 235, .25);
  --text: #edf3ff;
  --text-dim: #a3b2cb;
  --text-faint: #71829e;
  --accent: #81dfff;
  --accent-soft: rgba(77, 159, 255, .13);
  --accent-strong: #586df5;
  --radius: 20px;
  --radius-sm: 11px;
  --shadow: 0 22px 70px rgba(0, 0, 0, .35);
}
body {
  background:
    radial-gradient(900px 680px at 78% 0%, rgba(61, 83, 186, .19), transparent 72%),
    radial-gradient(700px 600px at -10% 100%, rgba(49, 116, 158, .11), transparent 70%),
    var(--bg);
}
.app-header {
  min-height: 78px; padding: 12px 28px;
  background: rgba(9, 13, 24, .88);
  border-bottom-color: rgba(153, 186, 255, .11);
}
.brand { gap: 14px; font-size: 15px; letter-spacing: .01em; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; font-size: 15px;
  color: #f7fbff; background: linear-gradient(145deg, #3d5cf5, #45d1ed);
  box-shadow: 0 8px 30px rgba(63, 121, 246, .29), inset 0 1px rgba(255,255,255,.28);
}
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-eyebrow { color: #87a2c9; font: 600 10px/1.1 'Segoe UI', sans-serif; letter-spacing: .22em; }
.brand-title { font-weight: 730; font-size: 17px; letter-spacing: .02em; }
.provider-badge {
  margin-left: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700;
  color: #a9bcff; background: rgba(98, 118, 255, .12);
  border: 1px solid rgba(132, 147, 255, .23);
}
.app-main { padding: 20px; gap: 20px; }
.side-panel, .stage {
  border-color: rgba(159, 186, 255, .16);
  background: linear-gradient(155deg, rgba(22, 31, 50, .94), rgba(11, 17, 30, .98));
  box-shadow: 0 16px 52px rgba(0, 0, 0, .24);
}
.side-panel { width: min(400px, 31vw); }
.tabs { padding: 10px; gap: 4px; background: rgba(8, 12, 22, .54); border-bottom-color: var(--border); }
.tab {
  border: 1px solid transparent; border-radius: 11px; padding: 10px 3px;
  color: #8293af; font-weight: 600; font-family: inherit;
}
.tab span { color: #7288b0; margin-right: 3px; font-size: 15px; }
.tab.active {
  border-color: rgba(108, 133, 255, .27); color: #e8efff;
  background: linear-gradient(135deg, rgba(76, 99, 208, .29), rgba(41, 85, 116, .17));
  box-shadow: inset 0 1px rgba(255,255,255,.07);
}
.tab.active span { color: #8edfff; }
.tab-body { padding: 21px; }
.field { margin-bottom: 19px; }
.field-label { color: #b6c6df; font-size: 12px; font-weight: 650; letter-spacing: .04em; margin-bottom: 9px; }
.field-label .hint { font-weight: 400; letter-spacing: 0; }
.input, .textarea, .select {
  background: rgba(7, 12, 23, .53); border-color: rgba(147, 174, 228, .16);
  border-radius: 10px; padding: 11px 12px;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: rgba(113, 181, 255, .68); box-shadow: 0 0 0 3px rgba(75, 142, 255, .11);
}
.segmented { background: rgba(6, 11, 21, .6); padding: 4px; border-radius: 11px; }
.segmented button { padding: 10px 0; }
.segmented button.active {
  background: linear-gradient(135deg, rgba(70, 94, 229, .44), rgba(39, 112, 179, .3));
  color: #e5f6ff; box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.avatar-preview { width: 92px; height: 108px; border-radius: 12px; }
.avatar-source-label { color: #bdcee8; font-size: 13px; padding-top: 11px; }
.avatar-choice { border-radius: 11px; }
.avatar-choice.selected { border-color: #7b9dff; box-shadow: 0 0 0 2px rgba(111, 142, 255, .14); }
.btn { border-radius: 10px; transition: filter .18s, transform .18s, border-color .18s; }
.btn:hover:not(:disabled) { filter: brightness(1.13); transform: translateY(-1px); }
.btn.primary {
  color: white; background: linear-gradient(105deg, #4b63ed, #288fc6);
  box-shadow: 0 9px 25px rgba(52, 90, 232, .23);
}
.switch input { accent-color: #718cfa; }
.status-pill { padding: 7px 13px; background: rgba(21, 29, 46, .84); }
.stage-view { background: #0a1020; }
.stage-idle {
  display: block; isolation: isolate;
  background:
    radial-gradient(ellipse at 75% 43%, rgba(62, 93, 203, .34), transparent 43%),
    linear-gradient(135deg, #111c35, #090e1b 65%);
}
.stage-idle.audio-stage-idle { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage-idle::before {
  content: ''; position: absolute; inset: 0; opacity: .25; z-index: -1;
  background-image: linear-gradient(rgba(143, 177, 249, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 177, 249, .12) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to right, black, transparent 85%);
}
.idle-preview-image { position: absolute; right: 0; bottom: 0; width: 60%; height: 100%; object-fit: contain; object-position: center bottom; }
.idle-preview-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,14,27,.18), rgba(9,14,27,.1) 42%, transparent 80%), linear-gradient(0deg, rgba(9,14,27,.75), transparent 48%); }
.idle-preview-copy { position: absolute; left: clamp(24px, 6%, 86px); bottom: 13%; max-width: 58%; }
.idle-kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 11px/1 'Segoe UI', sans-serif; letter-spacing: .2em; color: #a1dfff; }
.idle-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #72f2c6; box-shadow: 0 0 15px #72f2c6; }
.idle-preview-copy h1 { margin: 18px 0 12px; font-size: clamp(28px, 3vw, 54px); line-height: 1.15; letter-spacing: -.035em; color: #f3f7ff; }
.idle-preview-copy p { margin: 0; color: #b5c4df; font-size: clamp(13px, 1.15vw, 17px); }
.idle-preview-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.idle-preview-tags span { padding: 7px 10px; border: 1px solid rgba(168, 194, 244, .21); border-radius: 6px; color: #91aaca; font: 700 10px/1 'Segoe UI', sans-serif; letter-spacing: .12em; background: rgba(18,31,55,.49); }
.audio-idle-title { margin-top: 18px; font-size: 16px; font-weight: 600; text-align: center; }
.stage.immersive .stage-view { background: #050913; }
.stage.immersive .controls { background: rgba(14, 23, 39, .78); border-color: rgba(151, 188, 247, .22); }
.stage.immersive .stage-meta { background: rgba(14,23,39,.75); border-color: rgba(151,188,247,.23); }
.ctrl-btn { transition: transform .18s, background-color .18s, box-shadow .18s; }
.ctrl-btn:hover:not(:disabled) { transform: translateY(-2px); }
.scene-trigger {
  position: absolute; z-index: 8; top: 60px; left: 16px;
  border: 1px solid rgba(151,188,247,.28); background: rgba(17,27,48,.82);
  color: #c7d8ff; border-radius: 10px; padding: 8px 12px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; backdrop-filter: blur(12px);
}
.scene-trigger:hover { border-color: #87bbff; color: white; }
.scene-panel {
  position: absolute; z-index: 9; top: 102px; left: 16px;
  width: min(330px, calc(100vw - 32px)); max-height: min(580px, calc(100vh - 130px)); overflow-y: auto;
  padding: 17px; border-radius: 16px; border: 1px solid rgba(151,188,247,.28);
  color: var(--text); background: rgba(12,19,34,.96); backdrop-filter: blur(20px);
  box-shadow: 0 18px 58px rgba(0,0,0,.5);
}
.scene-panel-header { display: flex; align-items: center; justify-content: space-between; }
.scene-panel-header strong { font-size: 15px; }
.scene-panel p { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin: 9px 0 15px; }
.scene-close { background: none; border: 0; color: var(--text-dim); font-size: 21px; cursor: pointer; }
.scene-thumbnail { display: flex; gap: 9px; align-items: center; margin-bottom: 9px; color: var(--text-dim); font-size: 11px; }
.scene-thumbnail img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.scene-thumbnail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-upload { margin-bottom: 10px; }
.scene-link { margin: 0 0 10px 7px; }
.scene-url { margin-bottom: 10px; }
.scene-actions { display: flex; gap: 8px; margin-top: 14px; }
.scene-actions .btn { flex: 1; font-size: 12px; padding: 9px 7px; }
.scene-message { color: #9ce6cb; font-size: 12px; line-height: 1.5; margin-top: 10px; }
.scene-message.error { color: var(--danger); }
@media (max-width: 900px) {
  .app-main { padding: 12px; gap: 12px; }
  .side-panel { width: 100%; }
  .idle-preview-image { width: 100%; }
  .idle-preview-shade { background: linear-gradient(0deg, rgba(7,12,24,.94), transparent 65%); }
  .idle-preview-copy { left: 22px; right: 20px; bottom: 8%; max-width: none; }
  .idle-preview-copy h1 { font-size: 30px; }
  .idle-preview-tags { margin-top: 18px; }
  .stage.immersive .scene-trigger { top: 64px; left: 16px; }
  .stage.immersive .scene-panel { top: 103px; left: 12px; max-height: calc(100vh - 205px); }
}
@media (max-width: 520px) {
  .app-header { padding: 9px 16px; min-height: 68px; }
  .brand-eyebrow { font-size: 8px; letter-spacing: .12em; }
  .brand-title { font-size: 15px; }
  .brand-mark { width: 36px; height: 36px; }
  .provider-badge { display: none; }
  .tab-body { padding: 17px; }
  .idle-preview-copy h1 { font-size: 26px; }
  .idle-preview-tags span { font-size: 8px; }
}