/* =========================================================
   達盛數位科技 · RTSP 串流管理
   基礎設計系統：設計代幣 / reset / 共用元件 / 公開頁

   設計原則
   1. 階層靠「字級 + 字重 + 背景分層」建立，不靠到處加 1px 邊框。
   2. 密度優先：同一群組內收緊，群組之間才留呼吸空間。
   3. 單一主色，語意色只用於狀態。
   4. 陰影只出現在對話框；其餘一律用邊框與底色分層。
   5. 所有表單元件自繪（appearance:none），不依賴瀏覽器原生外觀。
   6. 固定亮色，不提供暗色模式、也不跟隨 prefers-color-scheme。
      :root 的 color-scheme: light 是必要的 —— 少了它，瀏覽器仍會對
      表單元件與捲軸套用自己的深色處理，在深色系統下會出現半深半淺的畫面。
      唯一的例外是觀看頁的播放區，它用 --viewer-* 固定深色，本來就與主題無關。
   ========================================================= */

:root {
  color-scheme: light;

  /* ── 表面三層：頁面底 → 卡片 → 次要區塊 ──
     中性灰全數帶一點綠灰調性，與主色同一家族，不用純冷灰。 */
  --bg:            #F7F8F6;   /* 內容區底色 */
  --bg-sunken:     #EEF0EC;   /* 登入頁等下沉面 */
  --surface:       #FFFFFF;   /* 卡片、表格、輸入框 */
  --surface-alt:   #F1F3EF;   /* 表頭、次要列 */
  --hover:         #EFF2EE;
  --zebra:         #F8FAF7;   /* 表格斑馬紋（極淡） */

  --border:        #E1E4DE;   /* 分隔線 */
  --border-strong: #C7CDC5;   /* 可互動元件外框 */

  --text:          #1A1D1A;
  --text-muted:    #5B635D;
  --text-subtle:   #8A9289;

  /* ── 單一主色：深松綠。飽和度壓低、明度壓深，
     只出現在主要按鈕、選取狀態與焦點。 ── */
  --accent:        #1F5B4E;
  --accent-hover:  #174A3F;
  --accent-soft:   #E9F0ED;
  --accent-line:   #C2D5CE;
  --on-accent:     #FFFFFF;

  /* ── 語意色（僅用於狀態，一律低飽和） ── */
  --ok:            #3F7A52;
  --ok-soft:       #EAF2EC;
  --warn:          #A9672A;
  --warn-soft:     #F7EFE3;
  --danger:        #A94442;
  --danger-soft:   #F6ECEB;

  /* ── 側欄深色面：墨綠，與主色同家族。
     僅供後台側欄使用，登入頁與內容區維持亮色。 ── */
  --sidebar-bg:          #17332C;
  --sidebar-border:      #26443C;
  --sidebar-hover:       #1E3D35;
  --sidebar-active:      #234A40;
  --sidebar-text:        #A7BCB4;
  --sidebar-text-strong: #E9F0ED;
  --sidebar-accent:      #7DBFA9;

  --scrim:         rgba(20,24,21,.46);
  --shadow-pop:    0 8px 28px -6px rgba(18,26,22,.20), 0 2px 6px rgba(18,26,22,.08);

  --fs-micro: 11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  14px;
  --fs-lg:    16px;
  --fs-xl:    20px;
  --fs-2xl:   24px;

  --ui-font:   -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
               "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Consolas,
               "Liberation Mono", "Noto Sans TC", monospace;

  --radius:     6px;
  --radius-sm:  4px;
  --radius-lg:  9px;
  --h-control:    32px;
  --h-control-sm: 26px;

  --transition: 130ms ease;
  --focus:        0 0 0 3px rgba(31,91,78,.20);
  --focus-danger: 0 0 0 3px rgba(169,68,66,.18);

  /* ── 自繪表單元件用的向量圖示（暗色另有覆寫） ── */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 8.3l3.1 3.1 6.1-6.3'/%3E%3C/svg%3E");
  --icon-dash:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B635D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.2l4 4 4-4'/%3E%3C/svg%3E");
  --switch-thumb: #FFFFFF;

  /* ── 播放區固定深色，不隨主題切換 ── */
  --viewer-bg:    #000000;
  --viewer-fg:    #FFFFFF;
  --viewer-scrim: rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 var(--fs-base)/1.55 var(--ui-font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1 { font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
h2 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; letter-spacing: -.006em; }
h3 { font-size: var(--fs-base); font-weight: 600; line-height: 1.4; }
p  { text-wrap: pretty; }

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

img, video, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
code, pre { font-family: var(--mono-font); font-size: var(--fs-sm); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 細捲軸：密集列表不被粗捲軸切斷節奏 */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-track { background: transparent; }

.muted  { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small  { font-size: var(--fs-sm); }
.num    { font-variant-numeric: tabular-nums; }
.mono   {
  font-family: var(--mono-font);
  font-size: .925em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  font: 500 var(--fs-micro)/1 var(--mono-font);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-control); padding: 0 13px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  letter-spacing: .01em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn:hover  { background: var(--hover); border-color: var(--text-subtle); }
.btn:active { background: var(--surface-alt); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--accent); }

.btn--primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.btn--primary:hover,
.btn--primary:active { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--danger { color: var(--danger); background: var(--surface); border-color: var(--border-strong); }
.btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn--danger:focus-visible { box-shadow: var(--focus-danger); border-color: var(--danger); }

.btn--ghost { color: var(--text-muted); background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--hover); border-color: transparent; color: var(--text); }

.btn--sm {
  height: var(--h-control-sm); padding: 0 9px;
  font-size: var(--fs-xs); border-radius: var(--radius-sm);
}

.btn--icon { width: var(--h-control); padding: 0; }
.btn--icon.btn--sm { width: var(--h-control-sm); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover          { background: var(--surface);   border-color: var(--border-strong); }
.btn--primary:disabled:hover { background: var(--accent);    border-color: var(--accent); }
.btn--ghost:disabled:hover   { background: transparent;      border-color: transparent; }

.copy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 24px; padding: 0 8px;
  font: 500 var(--fs-micro)/1 var(--ui-font);
  letter-spacing: .04em;
  color: var(--text-subtle);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.copy-btn:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.copy-btn:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.copy-btn.is-done { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field__label {
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}
.field__hint  { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-subtle); }
.field__error { font-size: var(--fs-xs); line-height: 1.5; color: var(--danger); font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  padding: 0 10px;
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition),
              background-color var(--transition);
}
.input, .select { height: var(--h-control); }
.textarea { min-height: 78px; padding: 7px 10px; line-height: 1.55; resize: vertical; }

.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-subtle); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-alt);
  color: var(--text-subtle);
  border-color: var(--border);
  cursor: not-allowed;
}

.input--error, .input--error:hover { border-color: var(--danger); }
.input--error:focus { border-color: var(--danger); box-shadow: var(--focus-danger); }

/* 數字：等寬數字 + 收窄，整排表單不會出現一條到底的空欄位 */
.input[type="number"], .input--num {
  font-variant-numeric: tabular-nums;
  max-width: 132px;
}
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.input.mono, .textarea.mono {
  font-family: var(--mono-font); font-size: var(--fs-sm); letter-spacing: -.01em;
}

.select {
  padding-right: 30px;
  cursor: pointer;
  background-image: var(--icon-chevron);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px 14px;
}
.select:disabled { cursor: not-allowed; opacity: .75; }
.select option { color: var(--text); background: var(--surface); }

/* ── 核取方塊：自繪方框 + 向量勾號 ──
   模板結構為 <label class="checkbox"><input type="checkbox"><span>文字</span></label>
   勾號用 background-image（inline SVG）而非 ::after，因為 Firefox 不渲染 input 的偽元素。 */
.checkbox, .radio, .switch {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-base); line-height: 1.45;
  cursor: pointer;
  user-select: none;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"],
.radio input[type="radio"] {
  flex: none;
  width: 17px; height: 17px; margin: 0;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.checkbox input[type="radio"],
.radio input[type="radio"] { border-radius: 50%; }

.checkbox input:hover,
.radio input:hover { border-color: var(--accent); }

.checkbox input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: var(--icon-check);
}
.checkbox input[type="checkbox"]:indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: var(--icon-dash);
}
/* 圓點用 radial-gradient 畫，顏色跟著代幣走，暗色不需另備圖檔 */
.checkbox input[type="radio"]:checked,
.radio input[type="radio"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: radial-gradient(circle at center,
                    var(--on-accent) 0 3.2px, transparent 3.4px);
}

.checkbox input:focus-visible,
.radio input:focus-visible,
.switch input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.checkbox input:disabled,
.radio input:disabled {
  background-color: var(--surface-alt);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: .65;
}
.checkbox input[type="checkbox"]:disabled:checked,
.checkbox input[type="checkbox"]:disabled:indeterminate,
.checkbox input[type="radio"]:disabled:checked,
.radio input[type="radio"]:disabled:checked {
  background-color: var(--text-subtle);
  border-color: var(--text-subtle);
  opacity: .55;
}
.checkbox--disabled, .radio.is-disabled, .switch.is-disabled {
  color: var(--text-subtle); cursor: not-allowed;
}
.checkbox--disabled input { cursor: not-allowed; }

.switch input[type="checkbox"] {
  flex: none;
  width: 34px; height: 20px; margin: 0;
  background-color: var(--border-strong);
  background-image: radial-gradient(circle 7px at 10px 10px, var(--switch-thumb) 99%, transparent 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transition), background-position var(--transition),
              box-shadow var(--transition);
}
.switch input[type="checkbox"]:checked {
  background-color: var(--accent);
  background-position: 14px 0;
}
.switch input[type="checkbox"]:hover { background-color: var(--text-subtle); }
.switch input[type="checkbox"]:checked:hover { background-color: var(--accent-hover); }
.switch input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── 色票：原生外觀各瀏覽器差異大，包成方形色塊 ── */
.input[type="color"] {
  width: 46px; height: var(--h-control);
  padding: 3px;
  cursor: pointer;
  background: var(--surface);
}
.input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.input[type="color"]::-moz-color-swatch { border: 0; border-radius: 3px; }

input[type="range"], .range {
  width: 100%; max-width: 240px; height: 18px;
  padding: 0; margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: var(--border-strong);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px; margin-top: -6px;
  background: var(--accent);
  border: 3px solid var(--surface);
  border-radius: 50%;
  transition: background-color var(--transition);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: var(--border-strong);
}
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--accent);
  border: 3px solid var(--surface);
  border-radius: 50%;
}
input[type="range"]:hover::-webkit-slider-thumb { background: var(--accent-hover); }
input[type="range"]:hover::-moz-range-thumb     { background: var(--accent-hover); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
input[type="range"]:focus-visible::-moz-range-thumb     { box-shadow: var(--focus); }
input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card + .card { margin-top: 14px; }
.card__header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px;
  padding: 9px 14px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
  color: var(--text);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.card__body { padding: 14px; }
.card__body--flush { padding: 0; }
.card__body > .stat-row:first-child { padding-top: 0; }
.card__body > .stat-row:last-child  { padding-bottom: 0; border-bottom: 0; }

.badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  letter-spacing: .01em;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.badge--ok     { color: var(--ok);     background: var(--ok-soft);     border-color: transparent; }
.badge--warn   { color: var(--warn);   background: var(--warn-soft);   border-color: transparent; }
.badge--danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }

.dot {
  display: inline-block; flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-subtle);
  vertical-align: middle;
}
.dot--ok     { background: var(--ok); }
.dot--idle   { background: var(--text-subtle); }
.dot--warn   { background: var(--warn); }
.dot--danger { background: var(--danger); }

.alert {
  display: flex; gap: 8px; align-items: baseline;
  padding: 9px 12px 9px 11px;
  margin-bottom: 14px;
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text);
  background: var(--surface-alt);
  border: 0;
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.alert:empty { display: none; margin: 0; }
.alert--info   { background: var(--accent-soft); border-left-color: var(--accent); }
.alert--ok     { background: var(--ok-soft);     border-left-color: var(--ok); }
.alert--warn   { background: var(--warn-soft);   border-left-color: var(--warn); }
.alert--danger { background: var(--danger-soft); border-left-color: var(--danger); }
.alert__title  { flex: none; font-weight: 700; }
.alert__title:empty { display: none; }
.alert__body   { flex: 1; min-width: 0; color: var(--text-muted); }

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--scrim);
}
.modal__box {
  display: flex; flex-direction: column;
  width: 100%; max-width: 460px; max-height: calc(100vh - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
/* 分頁式表單（串流編輯）在 460px 內太擠，標籤欄佔掉 150px 後只剩不到 300px。 */
.modal__box--wide { max-width: 720px; }
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex: none;
  padding: 12px 16px;
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.006em;
  border-bottom: 1px solid var(--border);
}
.modal__body { padding: 16px; overflow-y: auto; }
.modal__foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  flex: none;
  padding: 11px 16px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
}

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.spinner--lg { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2400ms; }
  * { transition-duration: 1ms !important; }
}

/* 平鋪結構即可，不需要額外 wrapper：
   <span class="brand__mark">…svg…</span>
   <span class="brand__name">達盛數位科技</span>
   <span class="brand__sub">RTSP 串流管理</span> */
.brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark name" "mark sub";
  column-gap: 10px;
  align-items: center;
  min-width: 0;
}
.brand__mark {
  grid-area: mark;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--accent);
}
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__name {
  grid-area: name;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.25;
  letter-spacing: .01em;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand__sub {
  grid-area: sub;
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.3;
  letter-spacing: .08em;
  color: var(--text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand--lg { column-gap: 12px; }
.brand--lg .brand__mark { width: 30px; height: 30px; }
.brand--lg .brand__name { font-size: var(--fs-lg); letter-spacing: -.004em; }
.brand--lg .brand__sub  { font-size: var(--fs-xs); }

.footer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  /* margin-top:auto 讓頁尾在內容不足時貼到底部（.main 是 flex 直欄），
     內容夠長時則退回 24px 的一般間距。 */
  margin-top: auto; padding-top: 14px;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  border-top: 1px solid var(--border);
}
.main__inner > .footer { margin-top: auto; padding-top: 24px; }
.footer__credit { margin-left: auto; letter-spacing: .04em; }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 32px 20px;
  text-align: center;
}
.empty__title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.empty__desc  { font-size: var(--fs-sm); color: var(--text-subtle); max-width: 34em; }
.empty .btn   { margin-top: 10px; }

.captcha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.captcha__img {
  flex: none;
  width: 200px; height: 64px;
  display: block;
  object-fit: cover;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.captcha__input { flex: 1 1 100px; min-width: 0; }
.captcha__reload { flex: none; }

/* ═══════════════════════════════════════════
   12. 觀看頁（player.js 依賴，僅微調不重構）
   ═══════════════════════════════════════════ */
/* 觀看頁固定滿版單一畫面，永遠不出現捲軸。
   影片以等比例縮放塞進視窗（同時受寬與高限制），
   多出來的部分是黑邊而不是可捲動的區域。 */
.viewer {
  height: 100vh;
  height: 100dvh;        /* 行動瀏覽器的網址列會吃掉高度，dvh 才準 */
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--viewer-bg);
  color: var(--viewer-fg);
}
.viewer__inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* .stage 以「影片的實際長寬比」撐到視窗裝得下的最大尺寸。
   --video-ar 由 player.js 在 loadedmetadata 時依實際解析度寫入。

   為什麼不能只用 max-width/max-height 搭配 width:auto：
   那個寫法只會「縮小」不會「放大」，704x480 的子碼流在 1440x900 的視窗裡
   會以原始尺寸縮在正中央，四周一大圈黑。監控畫面要的是盡量大。

   用 aspect-ratio 而不是讓 video 直接 object-fit:contain 撐滿視窗，
   是為了讓 .stage 精確等於畫面本身 —— 疊字才會貼在影像邊角，不會落在黑邊上。 */
.stage {
  position: relative;
  aspect-ratio: var(--video-ar, 1.7778);
  /* 寬度取「視窗寬」與「受視窗高限制的寬」兩者較小值 —— 這就是 contain。
     不能只靠 max-width/max-height：max 夾住其中一邊時，另一邊不會跟著收，
     比例就跑掉了（實測 1920x1080 會被撐成 1440x900）。 */
  width: min(100vw, calc(100dvh * var(--video-ar, 1.7778)));
  height: auto;
  background: #000; line-height: 0;
}
.stage video {
  display: block;
  width: 100%; height: 100%;
  /* 保險：即使 --video-ar 尚未寫入（首個影格之前），也不會被拉伸變形 */
  object-fit: contain;
}

.overlay {
  position: absolute;
  padding: 5px 10px;
  border-radius: 4px;
  font: 500 var(--ovl-size, 18px)/1.4 var(--ui-font);
  color: var(--ovl-color, #fff);
  background: var(--ovl-bg, transparent);
  opacity: var(--ovl-opacity, 1);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  pointer-events: none;
  white-space: pre-wrap;
  max-width: 70%;
}
.overlay--tl { top: 12px; left: 12px; }
.overlay--tc { top: 12px; left: 50%; transform: translateX(-50%); }
.overlay--tr { top: 12px; right: 12px; }
.overlay--bl { bottom: 12px; left: 12px; }
.overlay--bc { bottom: 12px; left: 50%; transform: translateX(-50%); }
.overlay--br { bottom: 12px; right: 12px; }
.overlay--center { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.overlay__clock { font-variant-numeric: tabular-nums; margin-left: 8px; opacity: .85; }

.stage__status {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  font: 500 var(--fs-sm)/1.4 var(--ui-font);
  letter-spacing: .02em;
  color: var(--viewer-fg);
  background: var(--viewer-scrim);
  border-radius: var(--radius);
  pointer-events: none;
  transition: opacity var(--transition);
}
.stage__status--hidden { display: none; }

.viewer__err {
  max-width: 340px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
  color: var(--viewer-fg);
}
.viewer__err-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 5px; }
.viewer__err-desc  { font-size: var(--fs-sm); opacity: .68; }

.gate {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg-sunken);
}
.gate__box {
  width: 100%; max-width: 400px;
  padding: 26px 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.gate__box > .brand { margin-bottom: 20px; }
.gate__title {
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.006em;
  margin-bottom: 3px;
}
.gate__desc  { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 18px; }
.gate__form  { display: flex; flex-direction: column; gap: 10px; }
.gate__form .btn { margin-top: 4px; height: 36px; }
.gate__error {
  font-size: var(--fs-xs); font-weight: 500; color: var(--danger);
  padding: 7px 10px;
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
}
.gate .footer { margin-top: 18px; }

.notfound {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 24px;
  text-align: center;
  background: var(--bg-sunken);
}
.notfound__code {
  font-family: var(--mono-font);
  font-size: var(--fs-2xl); font-weight: 600; letter-spacing: .08em;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.notfound__title { font-size: var(--fs-lg); font-weight: 700; }
.notfound__desc  { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 10px; }