[hidden] { display: none !important; }   /* hidden 屬性一律隱藏：元件自己設了 display（flex / grid…）時也不會蓋掉 */
:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-muted: #f4f4f5;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #18181b;
  --text-muted: #71717a;
  --text-soft: #a1a1aa;
  --primary: #18181b;
  --primary-hover: #27272a;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --danger: #dc2626;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(24,24,27,0.04);
  --shadow: 0 4px 12px rgba(24,24,27,0.06);
  --shadow-lg: 0 12px 32px rgba(24,24,27,0.08);
  /* 卡片三層光影：細描邊 + 中距柔光 + 遠距大暈 */
  --shadow-card:
    0 1px 2px rgba(24,24,27,0.05),
    0 8px 24px -6px rgba(24,24,27,0.07),
    0 32px 56px -16px rgba(24,24,27,0.08);
  --shadow-card-hover:
    0 1px 2px rgba(24,24,27,0.06),
    0 12px 28px -6px rgba(24,24,27,0.10),
    0 40px 72px -16px rgba(24,24,27,0.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 讓 body 至少佔滿整個視窗（不然主題底色只會延伸到內容結尾），
   html 不設背景，body 的背景才會自然往上「propagate 到 canvas」填滿視窗。 */
body { min-height: 100vh; }

/* ==========================================================
   主題（由 lib/settings.php 切換，套到 <body class="theme-X">）
   ========================================================== */
body { transition: background-color .25s ease; }

/* plain：純白 */
body.theme-plain { background: #fff; }

/* soft：淺灰底 + 白卡 */
body.theme-soft { background: #f6f6f8; }

/* glow：白底 + 品牌色漸層光暈 */
body.theme-glow {
  background-color: #fff;
  background-image:
    radial-gradient(ellipse 1000px 700px at 0% -10%, rgba(45,138,255,0.10), transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 110%, rgba(247,154,38,0.10), transparent 60%);
  background-attachment: fixed;
}

/* grid：點陣紋理 */
body.theme-grid {
  background-color: #fff;
  background-image: radial-gradient(circle, rgba(24,24,27,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* watermark：白底 + 空曠頁 logo 浮水印 */
body.theme-watermark { background: #fff; }

/* layered：柔灰 + 光暈 + 浮水印（推薦） */
body.theme-layered {
  background-color: #f6f6f8;
  background-image:
    radial-gradient(ellipse 1000px 700px at 0% -10%, rgba(45,138,255,0.10), transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 110%, rgba(247,154,38,0.10), transparent 60%);
  background-attachment: fixed;
}

/* paper：米色紙感 */
body.theme-paper {
  background-color: #fbf7f0;
  background-image: radial-gradient(ellipse 900px 600px at 100% 0%, rgba(214,174,96,0.08), transparent 60%);
  background-attachment: fixed;
}
/* mint：淡薄荷 */
body.theme-mint { background-color: #f0fbf5; }
/* sky：淡天藍 */
body.theme-sky  { background-color: #eef6fc; }
/* rose：淡粉 */
body.theme-rose { background-color: #fcf2f5; }

/* aurora：極光多色光暈 */
body.theme-aurora {
  background-color: #faf8fd;
  background-image:
    radial-gradient(ellipse 900px 500px at 10% 0%,  rgba(124,58,237,0.14), transparent 60%),
    radial-gradient(ellipse 800px 600px at 90% 30%, rgba(34,211,238,0.12), transparent 60%),
    radial-gradient(ellipse 700px 500px at 50% 100%,rgba(244,114,182,0.12), transparent 60%);
  background-attachment: fixed;
}

/* sunset：暖橘紅漸層 */
body.theme-sunset {
  background-color: #fff8f1;
  background-image:
    radial-gradient(ellipse 1000px 700px at 100% 0%, rgba(251,146,60,0.16), transparent 60%),
    radial-gradient(ellipse 800px 600px at 0% 100%, rgba(244,63,94,0.10), transparent 60%);
  background-attachment: fixed;
}

/* mesh：流行多色 mesh gradient */
body.theme-mesh {
  background-color: #f4f4f8;
  background-image:
    radial-gradient(at 20% 20%, hsla(189,80%,80%,0.5), transparent 55%),
    radial-gradient(at 80% 0%,  hsla(43,90%,80%,0.5), transparent 55%),
    radial-gradient(at 0% 50%,  hsla(290,80%,85%,0.5), transparent 55%),
    radial-gradient(at 80% 70%, hsla(340,80%,85%,0.5), transparent 55%),
    radial-gradient(at 50% 100%,hsla(150,80%,80%,0.4), transparent 55%);
  background-attachment: fixed;
}

/* blueprint：工程藍方格 */
body.theme-blueprint {
  background-color: #eef5fd;
  background-image:
    linear-gradient(rgba(37,99,235,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.14) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* dark：純黑底白卡飄浮 */
body.theme-dark { background-color: #0a0a0a; }

/* midnight：深藍夜空 + 細點繁星 */
body.theme-midnight {
  background-color: #0b1228;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.45) 0.5px, transparent 0.6px),
    radial-gradient(ellipse 900px 600px at 30% 0%, rgba(59,130,246,0.18), transparent 60%);
  background-size: 80px 80px, 100% 100%;
  background-position: 0 0, 0 0;
  background-attachment: fixed;
}

/* hologram：彩虹流光（淺色） */
body.theme-hologram {
  background-color: #f8f4ff;
  background-image:
    linear-gradient(135deg,
      rgba(255,182,193,0.35) 0%,
      rgba(173,216,230,0.35) 22%,
      rgba(221,160,221,0.35) 45%,
      rgba(176,224,230,0.35) 68%,
      rgba(255,228,196,0.35) 100%);
  background-attachment: fixed;
}

/* matrix：黑底螢光綠數位雨點陣 */
body.theme-matrix {
  background-color: #00080a;
  background-image:
    radial-gradient(circle, rgba(0,255,135,0.20) 0.6px, transparent 0.8px),
    radial-gradient(ellipse 800px 600px at 50% 0%, rgba(0,255,135,0.10), transparent 70%);
  background-size: 14px 14px, 100% 100%;
  background-position: 0 0, 0 0;
  background-attachment: fixed;
}

/* terminal：純黑終端機 + 掃描線 */
body.theme-terminal {
  background-color: #000;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,135,0.045) 0, rgba(0,255,135,0.045) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse 700px 500px at center, rgba(0,255,135,0.10), transparent 70%);
  background-attachment: fixed;
}

/* synthwave：80s 紫粉 + 透視格線 */
body.theme-synthwave {
  background-color: #1a0a2e;
  background-image:
    radial-gradient(ellipse 1000px 500px at 50% 100%, rgba(0,200,255,0.22), transparent 60%),
    radial-gradient(ellipse 800px 400px at 50% 0%,   rgba(255,0,160,0.20), transparent 60%),
    linear-gradient(180deg, transparent 50%, rgba(255,0,128,0.05) 100%);
  background-attachment: fixed;
}

/* cyber：青粉霓虹龐克 */
body.theme-cyber {
  background-color: #050816;
  background-image:
    radial-gradient(ellipse 900px 600px at 10% 10%, rgba(34,211,238,0.25), transparent 60%),
    radial-gradient(ellipse 800px 600px at 90% 90%, rgba(236,72,153,0.22), transparent 60%),
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(168,85,247,0.12), transparent 70%);
  background-attachment: fixed;
}

/* neon：深紫底粉藍光球 */
body.theme-neon {
  background-color: #0d0824;
  background-image:
    radial-gradient(circle 500px at 0% 0%,    rgba(236,72,153,0.35), transparent 50%),
    radial-gradient(circle 500px at 100% 100%, rgba(56,189,248,0.35), transparent 50%),
    radial-gradient(circle 700px at 50% 50%,   rgba(168,85,247,0.15), transparent 70%);
  background-attachment: fixed;
}

/* ==========================================================
   深色主題共用 override（body.is-dark）
   ========================================================== */

/* 每個深色主題各自的 topbar 底色（搭配各自的 body bg） */
body.theme-dark      .topbar { background: rgba(10,10,12,0.92); }
body.theme-midnight  .topbar { background: rgba(11,18,40,0.92); }
body.theme-matrix    .topbar { background: rgba(0,12,8,0.92); }
body.theme-terminal  .topbar { background: rgba(0,0,0,0.95); }
body.theme-synthwave .topbar { background: rgba(26,10,46,0.92); }
body.theme-cyber     .topbar { background: rgba(5,8,22,0.92); }
body.theme-neon      .topbar { background: rgba(13,8,36,0.92); }

/* 深色 topbar 通用樣式 */
body.is-dark .topbar {
  border-bottom-color: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
body.is-dark .topbar .brand,
body.is-dark .topbar .btn-ghost { color: rgba(255,255,255,0.9); }
body.is-dark .topbar .btn-secondary {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}
body.is-dark .topbar .btn-secondary:hover { background: rgba(255,255,255,0.10); }
body.is-dark .topbar .btn-ghost:hover     { background: rgba(255,255,255,0.08); color: #fff; }

/* 深色主題下空曠頁（等候 / 倒數）文字反白 */
body.is-dark .stage-card h1 { color: #fff; }
body.is-dark .stage-card .muted,
body.is-dark .stage-note { color: rgba(255,255,255,0.65); }
body.is-dark .room-tag {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}
body.is-dark .countdown .cell {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
body.is-dark .countdown .num  { color: #fff; }
body.is-dark .countdown .unit { color: rgba(255,255,255,0.55); }
body.is-dark .spinner {
  border-color: rgba(255,255,255,0.15);
  border-top-color: #fff;
}

/* ===== 深色主題下：卡片與內部元件整體反白 ===== */
body.is-dark .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 1px 2px rgba(0,0,0,0.5),
    0 12px 32px -6px rgba(0,0,0,0.65),
    0 36px 64px -16px rgba(0,0,0,0.50);
}
body.is-dark .card h1 { color: #fff; }
body.is-dark .card .subtitle { color: rgba(255,255,255,0.6); }
body.is-dark .muted { color: rgba(255,255,255,0.55); }
body.is-dark .section-title { color: rgba(255,255,255,0.55); }
body.is-dark .field label { color: rgba(255,255,255,0.85); }
body.is-dark .field .help { color: rgba(255,255,255,0.5); }

body.is-dark input[type="text"],
body.is-dark input[type="email"],
body.is-dark input[type="password"],
body.is-dark input[type="url"],
body.is-dark input[type="datetime-local"] {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}
body.is-dark input[type="text"]::placeholder,
body.is-dark input[type="email"]::placeholder,
body.is-dark input[type="url"]::placeholder,
body.is-dark input[type="password"]::placeholder { color: rgba(255,255,255,0.35); }
body.is-dark input:focus {
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
body.is-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.6);
}

/* 卡片內按鈕 */
body.is-dark .btn-primary { background: #fff; color: #18181b; }
body.is-dark .btn-primary:hover { background: rgba(255,255,255,0.88); }
body.is-dark .btn-secondary {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}
body.is-dark .btn-secondary:hover { background: rgba(255,255,255,0.10); }
body.is-dark .btn-ghost { color: rgba(255,255,255,0.7); }
body.is-dark .btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }

body.is-dark .kbd {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.14);
}

/* Room list */
body.is-dark .room-list { border-color: rgba(255,255,255,0.10); }
body.is-dark .room-list li {
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.07);
}
body.is-dark .room-list .room-name { color: #fff; }
body.is-dark .room-list .room-meta { color: rgba(255,255,255,0.55); }

/* Badge */
body.is-dark .badge {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.14);
}
body.is-dark .badge-success { background: rgba(34,197,94,0.18);  color: #4ade80; border-color: rgba(74,222,128,0.35); }
body.is-dark .badge-warning { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(251,191,36,0.35); }
body.is-dark .badge-accent  { background: rgba(59,130,246,0.20); color: #93c5fd; border-color: rgba(147,197,253,0.35); }
body.is-dark .badge-muted   { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
body.is-dark .badge-info    { background: rgba(139,92,246,0.20); color: #c4b5fd; border-color: rgba(196,181,253,0.35); }

/* Empty state */
body.is-dark .empty {
  color: rgba(255,255,255,0.45);
  border-color: rgba(255,255,255,0.12);
  background: transparent;
}


/* Alerts */
body.is-dark .alert-error   { background: rgba(220,38,38,0.18);  color: #fca5a5; border-color: rgba(248,113,113,0.35); }
body.is-dark .alert-warning { background: rgba(217,119,6,0.18);  color: #fcd34d; border-color: rgba(251,191,36,0.35); }
body.is-dark .alert-info    { background: rgba(37,99,235,0.20);  color: #93c5fd; border-color: rgba(147,197,253,0.35); }
body.is-dark .alert-success { background: rgba(22,163,74,0.18);  color: #86efac; border-color: rgba(134,239,172,0.35); }

/* Created panel（剛建立連結時的綠色 banner） */
body.is-dark .created-panel {
  background: rgba(22,163,74,0.12);
  border-color: rgba(34,197,94,0.40);
}
body.is-dark .created-panel .panel-title { color: #86efac; }
body.is-dark .created-panel .panel-link  { color: rgba(255,255,255,0.6); }
body.is-dark .created-panel .panel-qr canvas,
body.is-dark .created-panel .panel-qr img { background: #fff; }

/* Theme picker */
body.is-dark .theme-option {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
body.is-dark .theme-option:hover { border-color: rgba(255,255,255,0.20); }
body.is-dark .theme-option.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
body.is-dark .theme-option.active::after {
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
}
body.is-dark .theme-name { color: #fff; }
body.is-dark .theme-desc { color: rgba(255,255,255,0.55); }
body.is-dark .theme-swatch { border-color: rgba(255,255,255,0.12); }

/* QR code modal（meeting 分享） */
body.is-dark .modal {
  background: #1a1a22;
  color: rgba(255,255,255,0.92);
}
body.is-dark .modal h2 { color: #fff; }
body.is-dark .modal .modal-sub { color: rgba(255,255,255,0.6); }
body.is-dark .modal .qr { background: rgba(255,255,255,0.04); }
body.is-dark .modal .qr canvas { background: #fff; padding: 6px; border-radius: 4px; }
body.is-dark .modal .link-row input {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}

/* 著陸頁 / 離開 / 錯誤頁的 logo tile / 圓形 icon 框 */
.logo-tile {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border-radius: 14px;
  margin: 0 auto 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
body.is-dark .logo-tile {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.icon-circle {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: 0 auto 16px;
}
.icon-circle-success { background: var(--success-soft); color: var(--success); }
.icon-circle-danger  { background: #fef2f2; color: var(--danger); }
.icon-circle-muted   { background: var(--bg-muted); color: var(--text-muted); width: 64px; height: 64px; }
body.is-dark .icon-circle-success { background: rgba(22,163,74,0.18); color: #86efac; }
body.is-dark .icon-circle-danger  { background: rgba(220,38,38,0.18); color: #fca5a5; }
body.is-dark .icon-circle-muted   { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); }

/* 科技主題加碼：卡片帶霓虹輝光 */
body.theme-cyber .card,
body.theme-neon  .card {
  box-shadow:
    0 0 32px rgba(56,189,248,0.18),
    0 0 64px rgba(236,72,153,0.10),
    var(--shadow-card);
}
body.theme-synthwave .card {
  box-shadow:
    0 0 40px rgba(255,0,160,0.18),
    0 0 80px rgba(0,200,255,0.10),
    var(--shadow-card);
}
body.theme-matrix .card,
body.theme-terminal .card {
  box-shadow:
    0 0 36px rgba(0,255,135,0.16),
    var(--shadow-card);
}

/* 空曠頁 logo 浮水印（watermark + layered） */
.center-stage { position: relative; }
body.theme-watermark .center-stage::before,
body.theme-layered .center-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 340px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.center-stage > * { position: relative; z-index: 1; }


a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* === Top bar === */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.topbar .brand:hover { text-decoration: none; }
.brand-logo {
  width: 32px; height: 32px;
  border-radius: 7px;
  object-fit: contain;
  display: block;
}
.brand-text { font-size: 15px; }
.topbar .topbar-actions { display: flex; gap: 8px; align-items: center; }
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-version {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease;
}
a.topbar-version:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
body.is-dark .topbar-version { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.12); }
@media (max-width: 700px) { .topbar-version { display: none; } }
.topbar-menu { position: relative; }
.topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.topbar-user:hover { background: var(--bg-muted); border-color: var(--border); }
.topbar-menu.open .topbar-user { background: var(--bg-muted); border-color: var(--border); }
.topbar-avatar { display: inline-flex; }
.topbar-user-name { color: var(--text); font-weight: 500; }
.topbar-user > .icon:last-child { opacity: .55; transition: transform .15s; }
.topbar-menu.open .topbar-user > .icon:last-child { transform: rotate(90deg); }
.topbar-user-ip {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
  background: var(--bg-muted);
  padding: 1px 6px;
  border-radius: 4px;
}
.topbar-menu.open .topbar-user .topbar-user-ip { background: var(--bg); }

.topbar-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
}
.topbar-menu.open .topbar-dropdown { display: block; }
.dropdown-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.dropdown-name { font-weight: 600; color: var(--text); font-size: 14px; }
.dropdown-sub { font-family: var(--mono); font-size: 11px; color: var(--text-soft); margin-top: 2px; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}
.dropdown-item:hover { background: var(--bg-muted); }

body.is-dark .topbar-user { color: rgba(255,255,255,0.6); }
body.is-dark .topbar-user:hover,
body.is-dark .topbar-menu.open .topbar-user { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
body.is-dark .topbar-user-name { color: #fff; }
body.is-dark .topbar-user-ip { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
body.is-dark .topbar-dropdown { background: #161616; border-color: rgba(255,255,255,0.12); }
body.is-dark .dropdown-name { color: #fff; }
body.is-dark .dropdown-item { color: rgba(255,255,255,0.9); }
body.is-dark .dropdown-item:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 700px) { .topbar-user-ip, .topbar-user .badge { display: none; } }

/* 管理導覽列（功能頁籤風格） */
.nav-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.nav-row .btn {
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav-row .btn .icon { width: 16px; height: 16px; }
.nav-row .btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(37,99,235,0.15);
  transform: translateY(-1px);
}
body.is-dark .nav-row .btn {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.14);
}
body.is-dark .nav-row .btn:hover {
  border-color: var(--accent);
  color: #fff;
  background: rgba(37,99,235,0.18);
}

/* 用量卡（配色與其他卡片區隔） */
.card-usage {
  background: linear-gradient(135deg, #eef4ff 0%, #ffffff 70%);
  border-color: #bfdbfe;
}
body.is-dark .card-usage {
  background: linear-gradient(135deg, rgba(37,99,235,0.20), rgba(255,255,255,0.04));
  border-color: rgba(147,197,253,0.30);
}
.usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.usage-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.usage-num .lim { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.usage-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
  margin: 12px 0 6px;
}
.usage-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.usage-fill.lvl-ok   { background: var(--success); }
.usage-fill.lvl-warn { background: var(--warning); }
.usage-fill.lvl-crit { background: var(--danger); }
body.is-dark .usage-bar { background: rgba(255,255,255,0.08); }

/* 導覽頁籤 active 標示 */
.nav-row .btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
body.is-dark .nav-row .btn.active { background: rgba(37,99,235,0.18); color: #fff; }

/* 用量頁：統計數字卡（固定一行 4 張）*/
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.stat-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; }
.stat-label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); margin-top: 6px; }
body.is-dark .stat-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }

/* 卡片標題（非可收合，給圖表 / 時間軸用） */
.card-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 14px; }

/* 圖表容器（固定高度，避免 Chart.js 無限長高） */
.chart-wrap { position: relative; height: 280px; }

/* 會議時長時間軸（Gantt） */
.gantt { margin-top: 4px; }
.gantt-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-soft); font-family: var(--mono); margin: 0 0 8px calc(170px + 12px); }
.gantt-row { display: grid; grid-template-columns: 170px 1fr 70px; align-items: center; gap: 12px; padding: 5px 0; }
.gantt-label { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gantt-room { font-family: var(--mono); font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-host { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-host .icon { flex-shrink: 0; }
.gantt-track { position: relative; height: 16px; background: var(--bg-muted); border-radius: 999px; }
.gantt-bar { position: absolute; top: 0; height: 16px; min-width: 6px; border-radius: 999px; background: linear-gradient(90deg, #06b6d4, #7c3aed); }
.gantt-dur { font-size: 12px; color: var(--text-muted); text-align: right; white-space: nowrap; }
body.is-dark .gantt-track { background: rgba(255,255,255,0.08); }
@media (max-width: 640px) {
  .gantt-axis { margin-left: calc(90px + 12px); }
  .gantt-row { grid-template-columns: 90px 1fr 56px; gap: 8px; }
}

/* 表格 */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.table thead th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table thead th.sortable { cursor: pointer; user-select: none; }
.table thead th.sortable::after { content: '⇅'; margin-left: 6px; font-size: 10px; opacity: .35; }
.table thead th.sortable[data-sort="asc"]::after  { content: '↑'; opacity: .85; }
.table thead th.sortable[data-sort="desc"]::after { content: '↓'; opacity: .85; }
.table thead th.sortable:hover { color: var(--text); }
.table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-soft); }
/* 帳號管理：編輯子列不要 hover 變色、用更淡的底 */
.table tbody tr.edit-row td { background: var(--bg-soft); border-bottom: 2px solid var(--border); }
.table tbody tr.edit-row:hover td { background: var(--bg-soft); }
body.is-dark .table { border-color: rgba(255,255,255,0.10); }
body.is-dark .table thead th { background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.10); }
body.is-dark .table tbody td { border-bottom-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
body.is-dark .table tbody tr:hover td { background: rgba(255,255,255,0.03); }
body.is-dark .table tbody tr.edit-row td { background: rgba(255,255,255,0.03); }
.mono { font-family: var(--mono); font-size: 12px; }

/* 自訂檔案選擇器（隱藏原生 input） */
.file-picker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.file-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* 用 .file-picker 前綴提高權重，蓋過 .field label{display:block}（否則按鈕變 block、文字靠上） */
.file-picker .file-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; box-sizing: border-box; line-height: 1; margin-bottom: 0;
  padding: 0 16px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--text); cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.file-btn:hover { background: var(--bg-muted); }
.file-name { font-size: 13px; color: var(--text-muted); }
.logo-preview { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); background: #fff; padding: 4px; object-fit: contain; }
body.is-dark .file-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); }
body.is-dark .file-btn:hover { background: rgba(255,255,255,0.10); }
body.is-dark .file-name { color: rgba(255,255,255,0.55); }
body.is-dark .logo-preview { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit; line-height: 1.5;
  color: var(--text); background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); outline: none; resize: vertical; min-height: 64px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(24,24,27,0.08); }
body.is-dark textarea { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); color: #fff; }

/* select 與 input 視覺一致（含自繪箭頭，避免各瀏覽器外觀不一） */
select {
  width: 100%;
  padding: 10px 34px 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background-color: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .12s ease, box-shadow .12s ease;
}
select:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(24,24,27,0.08); }
body.is-dark select {
  background-color: #1a1a22;
  border-color: rgba(255,255,255,0.14);
  color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
/* 行內表單（如帳號管理列）控制項不撐滿、對齊底部 */
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin: 0; }
.inline-form select, .inline-form input { width: auto; min-width: 120px; }
.inline-form input[name="password"] { min-width: 200px; }
/* 行內表單控制項與按鈕統一高度，避免按鈕比欄位矮 */
.inline-form select, .inline-form input, .inline-form .btn { height: 38px; }
.inline-form .btn { padding-top: 0; padding-bottom: 0; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px;
  width: 100%;
  flex: 1;
}
.container.narrow { max-width: 440px; }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.card { margin-bottom: 18px; }
.card:last-child { margin-bottom: 0; }

/* 可收合卡片（標題列整條背景，可點選收合） */
.card.collapsible { padding: 0; overflow: hidden; }
.card.collapsible > .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 15px 24px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  user-select: none;
}
.card.collapsible > .card-header:hover { background: var(--bg-muted); }
.card-header-title { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.card-header-title .icon { flex-shrink: 0; color: var(--text-muted); }
.card.collapsible > .card-header .chev {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .2s ease;
}
.card.collapsible.collapsed > .card-header { border-bottom: 0; border-radius: var(--radius); }
.card.collapsible.collapsed > .card-header .chev { transform: rotate(-90deg); }
.card.collapsible > .card-body { padding: 24px; }
.card.collapsible.collapsed > .card-body { display: none; }
body.is-dark .card.collapsible > .card-header {
  background: rgba(255,255,255,0.05);
  border-bottom-color: rgba(255,255,255,0.10);
  color: #fff;
}
body.is-dark .card.collapsible > .card-header:hover { background: rgba(255,255,255,0.08); }

.card h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.card .subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* === Form === */
.field { margin-bottom: 24px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
}
.field .help {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="datetime-local"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(24,24,27,0.08);
}

/* 自訂核取方塊 / 單選圓鈕（取代瀏覽器原生，全站視覺一致） */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  vertical-align: -4px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--text); }
input[type="checkbox"]:checked,
input[type="radio"]:checked { background: var(--text); border-color: var(--text); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { box-shadow: 0 0 0 3px rgba(24,24,27,0.14); }
body.is-dark input[type="checkbox"],
body.is-dark input[type="radio"] { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); }
body.is-dark input[type="checkbox"]:checked,
body.is-dark input[type="radio"]:checked { background: #fff; border-color: #fff; }
body.is-dark input[type="checkbox"]:checked::after { border-color: #18181b; }
body.is-dark input[type="radio"]:checked::after { background: #18181b; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn .icon { flex-shrink: 0; }
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  background: #fff;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-muted); }
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-muted); color: var(--text); }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* === Alerts === */
.alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.alert .icon { flex-shrink: 0; margin-top: 1px; }
.alert-error { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: #fde68a; }
.alert-info { background: var(--accent-soft); color: var(--accent); border-color: #bfdbfe; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }

/* === Section helpers === */
.section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin: 24px 0 10px;
}
.muted { color: var(--text-muted); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kbd { font-family: var(--mono); font-size: 12px; background: var(--bg-muted); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }

/* === 限定時段：勾選列 + 展開填寫區，連成同一外框 === */
.schedule-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.schedule-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
}
.schedule-head input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; cursor: pointer; }
.schedule-body {
  padding: 14px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.schedule-body[hidden] { display: none; }
body.is-dark .schedule-block { border-color: rgba(255,255,255,0.10); }
body.is-dark .schedule-body { border-top-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.02); }

.lobby-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  cursor: pointer;
}
.lobby-toggle input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; cursor: pointer; }
.tx-box { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 16px; }
.tx-box .lobby-toggle { border: 0; margin: 0; }
.tx-lang-field { padding: 0 14px 14px 42px; }
.tx-lang-field[hidden] { display: none; }
.tx-lang-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.tx-lang-field .req { color: var(--danger, #dc2626); }
.tx-lang-field select { max-width: 320px; }
.tx-lang-field .cselect { max-width: 320px; }

/* 本站樣式下拉選單（select[data-cselect]）：原生 select 留在表單裡送值與 required 檢查，外觀換成按鈕＋清單 */
.cselect { position: relative; }
.cselect > select.cselect-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.cselect-btn {
  display: flex; align-items: center; width: 100%; min-height: 42px; padding: 10px 34px 10px 12px;
  font: inherit; font-size: 14px; text-align: left; color: var(--text); cursor: pointer;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cselect-btn:focus-visible, .cselect.open .cselect-btn { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(24,24,27,0.08); }
.cselect-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-btn.is-placeholder .cselect-text { color: var(--text-soft); }
.cselect.invalid .cselect-btn { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.cselect-menu {
  position: fixed; z-index: 80; margin: 0; padding: 6px; list-style: none; max-height: min(320px, 60vh); overflow: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.16);
}
.cselect-menu[hidden] { display: none; }
.cselect-menu li { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 7px; font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap; }
.cselect-menu li.active { background: var(--bg-muted); }
.cselect-check { display: inline-flex; width: 14px; flex: none; visibility: hidden; }
.cselect-menu li[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.cselect-menu li[aria-selected="true"] .cselect-check { visibility: visible; }
body.is-dark .cselect-btn {
  background-color: #1a1a22; border-color: rgba(255,255,255,0.14); color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
body.is-dark .cselect-btn.is-placeholder .cselect-text { color: rgba(255,255,255,0.5); }
body.is-dark .cselect-menu { background: #1e293b; border-color: rgba(255,255,255,0.12); }
body.is-dark .cselect-menu li { color: rgba(255,255,255,0.9); }
body.is-dark .cselect-menu li.active { background: rgba(255,255,255,0.08); }
body.is-dark .cselect-menu li[aria-selected="true"] { color: #93c5fd; }
.tx-lang-field .help { margin-top: 6px; }
.lobby-toggle .lobby-text, .schedule-head .lobby-text { display: flex; flex-direction: column; gap: 3px; }
.lobby-toggle .lobby-title, .schedule-head .lobby-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
body.is-dark .lobby-toggle { border-color: rgba(255,255,255,0.10); }

/* === Room list === */
.room-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.room-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.room-list li:last-child { border-bottom: 0; }
.room-list .room-main { min-width: 0; flex: 1; }
.room-list .room-name {
  font-weight: 500;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.room-list .room-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  align-items: center;
}
.room-list .room-actions { display: flex; gap: 6px; flex-shrink: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 500;
  white-space: nowrap;
}
/* 稽核表格的結果欄不要過窄而擠壓徽章 */
.table td:has(> .badge) { white-space: nowrap; }

/* 分頁列 */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; }
.pager .pager-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.badge .icon { width: 11px; height: 11px; }
.badge-success { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: #fde68a; }
.badge-accent  { background: var(--accent-soft);  color: var(--accent);  border-color: #bfdbfe; }
.badge-muted   { background: var(--bg-muted);    color: var(--text-muted); }
.badge-info    { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }   /* 逐字稿與摘要 */
.badge .badge-sub { opacity: .8; }

.empty {
  padding: 20px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* === Just-created panel === */
.created-panel {
  background: #fff;
  border: 1px solid var(--success);
  background: var(--success-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.created-panel .panel-qr canvas, .created-panel .panel-qr img {
  display: block;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
}
.created-panel .panel-body { min-width: 0; }
.created-panel .panel-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}
.created-panel .panel-link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
  margin-bottom: 10px;
}
.created-panel .panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* === Meeting overlay === */
html.in-meeting, body.in-meeting { height: 100%; overflow: hidden; }
.meeting-shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: #000; }
#jaas-container { flex: 1; min-height: 0; }
.share-fab {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 9999;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .12s ease;
}
.share-fab:hover { transform: scale(1.05); }
.share-fab .icon { width: 22px; height: 22px; }

/* === Modal === */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 420px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.modal h2 {
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal .modal-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.modal .qr {
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.modal .qr canvas, .modal .qr img { display: block; }
.link-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.link-row input {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* === Waiting / Countdown stage === */
.center-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px;
}
/* 手機：內容上移、底部留白，避免叫出鍵盤時遮住輸入框 / 按鈕 */
@media (max-width: 640px) {
  .center-stage {
    place-items: start center;
    padding-top: 8vh;
    padding-bottom: 40vh;
  }
}
.stage-card {
  max-width: 520px;
  width: 100%;
  text-align: center;
}
.stage-card h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.stage-card .room-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  margin-bottom: 18px;
}
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.countdown {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 14px;
}
.countdown .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.countdown .unit {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* === 翻頁時鐘 split-flap === */
.flip {
  --h: 94px;
  width: 96px;
  height: var(--h);
  position: relative;
  display: block;
  font-size: 70px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  perspective: 280px;
  user-select: none;
  -webkit-user-select: none;
}
.flip ::selection { background: transparent; }
.flip > div {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.flip > .flip-top, .flip > .flip-fold {
  top: 0;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--border-strong);
}
.flip > .flip-bottom, .flip > .flip-unfold {
  bottom: 0;
  border-radius: 0 0 10px 10px;
  border-top: 0;
}
/* span 高 = 1 倍 cell 高、line-height 也 = cell 高，字心會落在 cell 中線（兩半相接處）。
   上半切到字心 = 字的上半；下半切從字心開始 = 字的下半。 */
.flip > div > span {
  position: absolute;
  left: 0; right: 0;
  height: var(--h);
  line-height: var(--h);
  text-align: center;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  /* 微調字垂直位置，補償 baseline 偏下的視覺感 */
  transform: translateY(-0.04em);
}
.flip > .flip-top > span, .flip > .flip-fold > span { top: 0; }
.flip > .flip-bottom > span, .flip > .flip-unfold > span { bottom: 0; }

/* 動畫元件預設不可見，只在 .flipping 時播放 */
.flip > .flip-fold {
  transform-origin: 50% 100%;
  transform: rotateX(0deg);
  z-index: 2;
  opacity: 0;
}
.flip > .flip-unfold {
  transform-origin: 50% 0%;
  transform: rotateX(90deg);
  z-index: 2;
  opacity: 0;
}
.flip.flipping > .flip-fold   { animation: flipFold   0.4s ease-in forwards; }
.flip.flipping > .flip-unfold { animation: flipUnfold 0.4s ease-out 0.4s forwards; }
@keyframes flipFold {
  0%   { transform: rotateX(0deg);   opacity: 1; }
  99%  {                             opacity: 1; }
  100% { transform: rotateX(-90deg); opacity: 0; }
}
@keyframes flipUnfold {
  0%   { transform: rotateX(90deg);  opacity: 0; }
  1%   {                             opacity: 1; }
  100% { transform: rotateX(0deg);   opacity: 1; }
}

/* 深色主題下的翻頁卡片（用近不透明色避免動畫時透出底下舊值） */
body.is-dark .flip > div {
  background: #1a1a22;
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
body.is-dark .flip > .flip-top,
body.is-dark .flip > .flip-fold {
  border-bottom-color: rgba(255,255,255,0.22);
}
body.is-dark .flip { color: #fff; }
.stage-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 6px;
}
.stage-actions { margin-top: 22px; display: flex; gap: 8px; justify-content: center; }

/* === Copy flash === */
.copy-flash {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10001;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.copy-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================
   主題切換器（管理員儀表板用）
   ========================================================== */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.theme-option {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.theme-option:hover { border-color: var(--border-strong); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option.active {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(24,24,27,0.06);
}
.theme-option.active::after {
  content: '';
  position: absolute; top: 8px; right: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.theme-swatch {
  display: block;
  width: 100%;
  height: 56px;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.theme-name { font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.theme-desc { font-size: 11px; color: var(--text-muted); display: block; margin-top: 2px; }

.theme-swatch-plain { background: #fff; }
.theme-swatch-soft  { background: #f6f6f8; }
.theme-swatch-glow {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(45,138,255,0.45), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(247,154,38,0.45), transparent 55%),
    #fff;
}
.theme-swatch-grid {
  background-color: #fff;
  background-image: radial-gradient(circle, rgba(0,0,0,0.25) 0.8px, transparent 0.8px);
  background-size: 7px 7px;
}
.theme-swatch-watermark {
  background-color: #fff;
  background-image: url('/assets/logo-64.png');
  background-size: 32px;
  background-position: center;
  background-repeat: no-repeat;
}
.theme-swatch-layered {
  background-color: #f6f6f8;
  background-image:
    url('/assets/logo-64.png'),
    radial-gradient(ellipse at 0% 0%, rgba(45,138,255,0.45), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(247,154,38,0.45), transparent 55%);
  background-size: 26px, auto, auto;
  background-position: center, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.theme-swatch-paper {
  background-color: #fbf7f0;
  background-image: radial-gradient(ellipse at 100% 0%, rgba(214,174,96,0.35), transparent 60%);
}
.theme-swatch-mint  { background: #d6f0e0; }
.theme-swatch-sky   { background: #d8e9f5; }
.theme-swatch-rose  { background: #f5dde3; }
.theme-swatch-aurora {
  background-color: #faf8fd;
  background-image:
    radial-gradient(at 20% 20%, hsla(290,80%,80%,0.7), transparent 50%),
    radial-gradient(at 80% 30%, hsla(189,80%,75%,0.7), transparent 50%),
    radial-gradient(at 50% 100%,hsla(340,80%,80%,0.7), transparent 50%);
}
.theme-swatch-sunset {
  background-color: #fff8f1;
  background-image:
    radial-gradient(at 100% 0%, rgba(251,146,60,0.8), transparent 50%),
    radial-gradient(at 0% 100%, rgba(244,63,94,0.5), transparent 50%);
}
.theme-swatch-mesh {
  background-color: #f4f4f8;
  background-image:
    radial-gradient(at 20% 20%, hsla(189,80%,75%,0.8), transparent 50%),
    radial-gradient(at 80% 0%,  hsla(43,90%,75%,0.8), transparent 50%),
    radial-gradient(at 0% 50%,  hsla(290,80%,80%,0.8), transparent 50%),
    radial-gradient(at 80% 70%, hsla(340,80%,80%,0.8), transparent 50%);
}
.theme-swatch-blueprint {
  background-color: #dbeafe;
  background-image:
    linear-gradient(rgba(37,99,235,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.4) 1px, transparent 1px);
  background-size: 7px 7px;
}
.theme-swatch-dark { background: #0a0a0a; }
.theme-swatch-midnight {
  background-color: #0b1228;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.7) 0.5px, transparent 0.6px),
    radial-gradient(ellipse at 30% 0%, rgba(59,130,246,0.35), transparent 60%);
  background-size: 8px 8px, 100% 100%;
  background-position: 0 0, 0 0;
}
.theme-swatch-hologram {
  background:
    linear-gradient(135deg,
      rgba(255,182,193,0.8) 0%,
      rgba(173,216,230,0.8) 25%,
      rgba(221,160,221,0.8) 50%,
      rgba(176,224,230,0.8) 75%,
      rgba(255,228,196,0.8) 100%);
}
.theme-swatch-matrix {
  background-color: #00080a;
  background-image:
    radial-gradient(circle, rgba(0,255,135,0.7) 0.5px, transparent 0.6px),
    radial-gradient(ellipse at 50% 50%, rgba(0,255,135,0.20), transparent 70%);
  background-size: 6px 6px, 100% 100%;
}
.theme-swatch-terminal {
  background-color: #000;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,135,0.18) 0, rgba(0,255,135,0.18) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, rgba(0,255,135,0.20), transparent 70%);
}
.theme-swatch-synthwave {
  background-color: #1a0a2e;
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(0,200,255,0.6), transparent 60%),
    radial-gradient(ellipse at 50% 0%,   rgba(255,0,160,0.5), transparent 60%);
}
.theme-swatch-cyber {
  background-color: #050816;
  background-image:
    radial-gradient(ellipse at 10% 10%, rgba(34,211,238,0.6), transparent 60%),
    radial-gradient(ellipse at 90% 90%, rgba(236,72,153,0.55), transparent 60%);
}
.theme-swatch-neon {
  background-color: #0d0824;
  background-image:
    radial-gradient(circle at 0% 0%,   rgba(236,72,153,0.7), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(56,189,248,0.7), transparent 50%);
}

@media (max-width: 560px) {
  .card { padding: 22px; }
  .container { padding: 24px 16px; }
  .field-row { grid-template-columns: 1fr; }
  .created-panel { grid-template-columns: 1fr; }
  .created-panel .panel-qr { justify-self: center; }
  .flip { --h: 78px; width: 78px; font-size: 56px; }
}

/* 帳號選單分隔線 / 目前語言（i18n） */
.dropdown-sep { height: 1px; margin: 6px 0; background: var(--border, rgba(0,0,0,0.08)); }
.dropdown-item.active { font-weight: 600; }
body.is-dark .dropdown-sep { background: rgba(255,255,255,0.12); }
.lang-switch { white-space: nowrap; }
.lang-menu .topbar-dropdown { min-width: 160px; }
.dropdown-item.active { color: var(--accent); font-weight: 600; }

/* 登入頁：SSO 按鈕與本地帳號之間的分隔線 */
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text-soft); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
body.is-dark .login-divider::before, body.is-dark .login-divider::after { background: rgba(255,255,255,0.14); }
.badge-sso { background: rgba(124,58,237,0.12); color: #6d28d9; }
body.is-dark .badge-sso { background: rgba(167,139,250,0.18); color: #ddd6fe; }

/* 系統設定頁：左側目錄 + 右側設定卡片（點選只顯示該卡片） */
main.settings-page { max-width: 1240px; }
.settings-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-toc {
  position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-sm);
}
.settings-toc-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  font-size: 14px; font-weight: 500; line-height: 1.35;
  color: var(--text-muted); text-decoration: none !important;
  transition: background .12s ease, color .12s ease;
}
.settings-toc-item .icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: .8; }
.settings-toc-item:hover { color: var(--text); background: var(--bg-muted); }
.settings-toc-item.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.settings-toc-item.active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.settings-toc-item.active .icon { opacity: 1; }
.settings-toc-item[data-toc="all"] { margin-bottom: 6px; padding-bottom: 11px; border-radius: 9px 9px 0 0; }
.settings-toc-item[data-toc="all"]::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: -4px; height: 1px; background: var(--border);
}
.settings-main > .card:first-child { margin-top: 0; }
body.is-dark .settings-toc { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
body.is-dark .settings-toc-item { color: rgba(255,255,255,0.72); }
body.is-dark .settings-toc-item:hover { color: #fff; background: rgba(255,255,255,0.06); }
body.is-dark .settings-toc-item.active { color: #fff; background: rgba(37,99,235,0.24); }
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; gap: 16px; }
  .settings-toc {
    position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding: 6px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .settings-toc-item { flex: 0 0 auto; white-space: nowrap; padding: 7px 12px; }
  .settings-toc-item.active::before { display: none; }
  .settings-toc-item[data-toc="all"] { margin-bottom: 0; padding-bottom: 7px; border-radius: 9px; }
  .settings-toc-item[data-toc="all"]::after { display: none; }
}
.settings-card.toc-hidden { display: none !important; }

/* 逐字稿（v1.12.0） */
.badge-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
body.is-dark .badge-danger { background: rgba(239,68,68,0.16); color: #fca5a5; border-color: rgba(248,113,113,0.35); }
.tx-busy { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.spinner-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; animation: txPulse 1.2s ease-in-out infinite; }
@keyframes txPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spinner-dot { animation: none; } }
/* 逐字稿檢視頁（照 jtdt meeting_transcribe / meeting_summary） */
main.tx-page { max-width: 1100px; }
.tx-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 8px 0 12px; font-size: 14px; }
.tx-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.tx-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.tx-actions-sep { flex: 1; }
.tx-more { position: relative; display: inline-block; }
.card.tx-head-card { overflow: visible; position: relative; z-index: 5; }
.tx-more-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 190px; padding: 6px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.14); }
.tx-more-menu[hidden] { display: none; }
.tx-more-menu a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 13px; white-space: nowrap; }
.tx-more-menu a:hover { background: rgba(37,99,235,.08); color: var(--primary, #2563eb); }
body.is-dark .tx-more-menu { background: #1e293b; }
.tx-actions .btn.ok { border-color: var(--success); color: var(--success); }
.tx-hint { font-size: 13px; margin: 10px 0 0; }
.tx-sum-note { font-size: 13px; margin: 4px 0 10px; }
.tx-sec { margin-top: 18px; }
.tx-sec h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 8px; }
.tx-sum-text { font-size: 15px; line-height: 1.75; padding: 12px 14px; background: var(--bg-muted); border-radius: 10px; }
.tx-warn { margin-top: 8px; font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--warning-soft); color: var(--warning); }
.tx-cards { display: flex; flex-direction: column; gap: 8px; }
.tx-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.tx-item-text { font-size: 14px; line-height: 1.6; }
.tx-item-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.tx-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.tx-tag-d { background: #dcfce7; color: #15803d; } .tx-tag-a { background: #dbeafe; color: #1d4ed8; }
.tx-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tx-cite { font: 600 12px/1.6 var(--mono); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-muted); cursor: pointer; }
.tx-cite:hover { border-color: var(--accent); }
.tx-none { font-size: 13px; margin: 0; }
.tx-chap { display: flex; flex-direction: column; gap: 4px; }
.tx-chap-row { display: grid; grid-template-columns: 96px 1fr 140px 52px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.tx-chap-row:hover { background: var(--bg-muted); }
.tx-chap-title { font-size: 14px; }
.tx-pct { font: 12px var(--mono); color: var(--text-muted); text-align: right; }
.tx-bar { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; vertical-align: middle; }
.tx-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tx-tablewrap { overflow-x: auto; }
.tx-spk { width: 100%; border-collapse: collapse; font-size: 13px; }
.tx-spk th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.tx-spk td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.tx-model { font-size: 12px; margin: 14px 0 0; }
.tx-video { width: 100%; max-height: 420px; background: #000; border-radius: 10px; margin: 0 0 10px; }
.tx-err { font-size: 13px; }
.tx-wave-note { font-size: 12.5px; margin: 6px 0 0; }
.mt-player[hidden] { display: none; }
.mt-segs { max-height: 560px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.mt-row { display: grid; grid-template-columns: 52px 120px 1fr; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #f1f5f9; font-size: 14px; line-height: 1.6; }
.mt-row:last-child { border-bottom: none; }
.mt-t { color: #94a3b8; font-variant-numeric: tabular-nums; cursor: pointer; }
.mt-s { font-weight: 600; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.mt-s:hover { text-decoration: underline dotted; }
.mt-c0 { color: #2563eb; } .mt-c1 { color: #c2410c; } .mt-c2 { color: #15803d; } .mt-c3 { color: #7c3aed; }
.mt-c4 { color: #be123c; } .mt-c5 { color: #0f766e; } .mt-c6 { color: #a16207; } .mt-c7 { color: #4338ca; }
.mt-row.mt-b0 { background: #eff6ff; } .mt-row.mt-b1 { background: #fff7ed; } .mt-row.mt-b2 { background: #f0fdf4; } .mt-row.mt-b3 { background: #faf5ff; }
.mt-row.mt-b4 { background: #fff1f2; } .mt-row.mt-b5 { background: #f0fdfa; } .mt-row.mt-b6 { background: #fefce8; } .mt-row.mt-b7 { background: #eef2ff; }
.mt-row.mt-now { box-shadow: inset 3px 0 0 #2563eb; background: #dbeafe !important; font-weight: 500; }
.mt-row.tx-mark { box-shadow: inset 3px 0 0 #f59e0b; background: #fef3c7 !important; }
.mt-player { display: flex; align-items: center; gap: 14px; margin: 12px 0 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, #ffffff, #f8fafc); }
.mt-wave-box { flex: 1; min-width: 0; position: relative; }
.mt-wave { display: block; width: 100%; height: 72px; cursor: pointer; }
.mt-wave-tip { position: absolute; top: 3px; left: 0; pointer-events: none; white-space: nowrap; display: flex; align-items: center; gap: 5px; padding: 1px 6px; border-radius: 4px; background: rgba(15,23,42,.85); color: #fff; font: 600 11px/17px var(--mono); }
.mt-wave-tip[hidden] { display: none; }
.mt-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.mt-d0 { background: #60a5fa; } .mt-d1 { background: #fb923c; } .mt-d2 { background: #4ade80; } .mt-d3 { background: #a78bfa; }
.mt-d4 { background: #fb7185; } .mt-d5 { background: #2dd4bf; } .mt-d6 { background: #facc15; } .mt-d7 { background: #818cf8; }
.mt-play { flex: 0 0 46px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #2563eb; color: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(37,99,235,.35); transition: background .15s, transform .08s; }
.mt-play:hover { background: #1d4ed8; } .mt-play:active { transform: scale(.93); }
.mt-play #txIcPlay { display: flex; margin-left: 2px; } .mt-play #txIcPause { display: flex; }
.mt-play [hidden] { display: none !important; }
.mt-clock { font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; align-items: baseline; gap: 2px; }
.mt-clock b { font-size: 17px; font-weight: 600; } .mt-clock i { font-style: normal; color: #cbd5e1; margin: 0 3px; } .mt-clock span { font-size: 13px; color: #94a3b8; }
.mt-tip { font-size: 12px; margin: 4px 0 8px; }
.mt-name-edit { width: 100%; font-size: 13px; padding: 1px 4px; }
.mt-scope { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #475569; margin-top: 2px; white-space: nowrap; font-weight: 400; }
body.is-dark .mt-row { border-bottom-color: rgba(255,255,255,0.06); }
body.is-dark .mt-row[class*="mt-b"] { background: rgba(255,255,255,0.03); }
body.is-dark .mt-row.mt-now { background: rgba(37,99,235,0.25) !important; }
body.is-dark .mt-row.tx-mark { background: rgba(245,158,11,0.22) !important; }
body.is-dark .mt-player { background: rgba(255,255,255,0.04); }
body.is-dark .tx-item { background: rgba(255,255,255,0.03); }
@media (max-width: 700px) {
  .mt-row { grid-template-columns: 44px 1fr; } .mt-row > span:last-child { grid-column: 1 / -1; }
  .tx-chap-row { grid-template-columns: 90px 1fr; } .tx-chap-row .tx-bar, .tx-chap-row .tx-pct { display: none; }
  .mt-player { flex-wrap: wrap; } .mt-wave-box { order: 3; flex-basis: 100%; }
}
main.rec-page { max-width: 1240px; }
main.rec-page .audit-table { min-width: 100%; }
@media (max-width: 1100px) { main.rec-page .card { overflow-x: auto; } }

/* 發言者對應建議（v1.13.0） */
.tx-suggest { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--bg-muted); }
.tx-suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tx-suggest-head strong { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.tx-suggest-note { font-size: 12px; margin: 6px 0 8px; }
.tx-suggest-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; }
.tx-suggest-row .mt-s { min-width: 34px; }
.tx-suggest-cur { min-width: 120px; }
.tx-suggest-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tx-suggest-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tx-suggest-cov { font-size: 12px; margin-left: auto; }
body.is-dark .tx-suggest { background: rgba(255,255,255,0.04); }

/* 錄影記錄頁逐字稿欄的狀態標籤（v1.13.1：與按鈕同高，失敗原因小字在下方） */
.tx-cell-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.tx-cell-row form { margin: 0; }
.tx-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.tx-chip .icon { width: 13px; height: 13px; }
.tx-chip-fail { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.tx-chip-warn { background: var(--warning-soft); color: var(--warning); border-color: #fde68a; }
.tx-chip-muted { background: var(--bg-muted); color: var(--text-muted); border-color: var(--border); }
.tx-chip-busy { background: var(--accent-soft); color: var(--accent); border-color: #bfdbfe; max-width: 240px; overflow: hidden; }
.tx-chip-busy span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tx-why { font-size: 12px; color: var(--text-muted); margin-top: 4px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-dark .tx-chip-fail { background: rgba(239,68,68,0.16); color: #fca5a5; border-color: rgba(248,113,113,0.35); }
body.is-dark .tx-chip-warn { background: rgba(245,158,11,0.16); color: #fcd34d; border-color: rgba(251,191,36,0.35); }
body.is-dark .tx-chip-busy { background: rgba(37,99,235,0.18); color: #93c5fd; border-color: rgba(147,197,253,0.3); }

/* 錄影列表垂直對齊（v1.13.1）：每格單行、置中；展開箭頭置中 */
main.rec-page .audit-table td { vertical-align: middle; }
main.rec-page .audit-table td.caret-col svg { display: block; }
.tx-detail-why { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #b91c1c; margin: 2px 0 10px; }
body.is-dark .tx-detail-why { color: #fca5a5; }

/* 錄製中的錄影：播放 / 下載 / 刪除反灰（v1.13.1） */
.rec-live-actions { display: inline-flex; gap: 6px; }
.rec-live-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.tx-suggest-chip { font-family: inherit; font-weight: 500; font-size: 13px; }

/* 處理中標籤右端的取消 ✕（可移除標籤樣式） */
.tx-chip.has-x { padding-right: 4px; max-width: 280px; }
.tx-chip-x-form { display: inline-flex; margin: 0 0 0 4px; padding-left: 4px; border-left: 1px solid rgba(37,99,235,0.25); height: 18px; align-items: center; }
.tx-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; padding: 0; opacity: .75; }
.tx-chip-x:hover { background: #fee2e2; color: #b91c1c; opacity: 1; }
.tx-chip-x .icon { width: 12px; height: 12px; }
body.is-dark .tx-chip-x:hover { background: rgba(239,68,68,0.2); color: #fca5a5; }

/* 逐字稿欄：已完成（綠底打勾）vs 尚未產生（虛線框星形），一眼區分 */
.btn.tx-view { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.btn.tx-view:hover { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.btn.tx-gen { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong, #cbd5e1); }
.btn.tx-gen:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
body.is-dark .btn.tx-view { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(52,211,153,0.35); }
body.is-dark .btn.tx-gen { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.25); }

/* 錄影記錄：主要語言欄、產生逐字稿前先選語言（v1.16.0） */
.tx-lang-cell { white-space: nowrap; font-size: 13px; }
.tx-pick { display: inline-block; }
.tx-pick-menu { position: fixed; z-index: 60; min-width: 200px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.16); }
.tx-pick-menu[hidden] { display: none; }
.tx-pick-head { display: block; padding: 6px 10px 4px; font-size: 12px; color: var(--text-muted); }
.tx-pick-menu form { margin: 0; }
.tx-lang-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.tx-lang-item:hover { background: rgba(37,99,235,.08); }
body.is-dark .tx-pick-menu { background: #1e293b; }
/* 沒有發言者分離（台語模式）：逐字稿不顯示空白的發言者欄 */
#txSegs.tx-nospk .mt-s { display: none; }
#txSegs.tx-nospk .mt-row { grid-template-columns: 52px 1fr; }
/* 可收合的統計卡片（<details>）：標題列可點，右側箭頭 */
details.card-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; margin-bottom: 0; user-select: none; }
details.card-fold > summary::-webkit-details-marker { display: none; }
details.card-fold > summary .fold-chev { margin-left: auto; display: inline-flex; color: var(--text-muted); transition: transform .15s; }
details.card-fold[open] > summary { margin-bottom: 14px; }
details.card-fold[open] > summary .fold-chev { transform: rotate(180deg); }

/* 儀表板系統狀態列（管理員，v1.16.0） */
.sys-health { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.72); backdrop-filter: blur(6px); font-size: 13px; }
.sys-health.sh-bad { border-color: #fca5a5; background: #fef2f2; }
.sh-title { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 600; }
.sh-item { display: inline-flex; align-items: center; gap: 6px; }
.sh-item b { font-weight: 600; }
.sh-msg { color: var(--text-muted); }
.sh-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.sh-ok .sh-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.sh-warn .sh-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.sh-warn .sh-msg { color: #b45309; }
.sh-error .sh-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.sh-error .sh-msg { color: #b91c1c; font-weight: 600; }
.sh-off .sh-dot { background: #cbd5e1; }
.sh-refresh { margin-left: auto; padding: 4px 8px; }
body.is-dark .sys-health { background: rgba(255,255,255,.05); }
body.is-dark .sys-health.sh-bad { background: rgba(239,68,68,.12); }

/* 會議頁：連不上 Jitsi 的遮罩（v1.16.0） */
.svc-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); }
.svc-overlay[hidden] { display: none; }
.svc-overlay .stage-card { max-width: 460px; text-align: center; }