/* ============================================================
   快點POS HurryUp 品牌視覺系統 V1.16
   依 hurryup-digital-ecommerce-ui SKILL：
   深色賽博科技／霓虹青＋橘金點綴／銳利幾何／HUD 風格
   避免：generic SaaS 白底、柔和圓角、粉彩、企業官網感
   ============================================================ */
:root {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
  color: #ece9fb;
  background: #080415;
  /* 品牌色板 */
  --bg: #080415;
  --bg-strong: #03010a;
  --surface: #10091f;
  --surface-2: #17102a;
  --surface-3: #1d1435;
  --neon: #1fffed;
  --neon-soft: rgba(31, 255, 237, 0.12);
  --neon-line: rgba(31, 255, 237, 0.28);
  --gold: #ffb347;
  --gold-soft: rgba(255, 179, 71, 0.12);
  --gold-line: rgba(255, 179, 71, 0.35);
  --text: #ece9fb;
  --text-dim: #a89fd0;
  --text-faint: #6f6699;
  /* 舊變數相容映射 */
  --navy: #080415;
  --navy2: #17102a;
  --blue: #1fffed;
  --blue2: #17d9c8;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #fb7185;
  --line: rgba(31, 255, 237, 0.13);
  --line-soft: rgba(168, 159, 208, 0.16);
  --muted: #a89fd0;
  --card: #10091f;
  --shadow: 0 14px 40px rgba(3, 1, 10, 0.6);
  /* 元件 token */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --info: #1fffed;
  --info-bg: rgba(31, 255, 237, 0.09);
  --warn-bg: rgba(255, 179, 71, 0.1);
  --danger-bg: rgba(251, 113, 133, 0.1);
  --focus-ring: 0 0 0 3px rgba(31, 255, 237, 0.2);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(31, 255, 237, 0.07), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(255, 179, 71, 0.05), transparent 55%),
    linear-gradient(180deg, #0b0518, #080415 42%);
  background-attachment: fixed;
}
::selection { background: rgba(31, 255, 237, 0.32); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #241a44; border-radius: 8px; border: 2px solid #080415; }
::-webkit-scrollbar-thumb:hover { background: #352764; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  background: #0d0720;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--neon); box-shadow: var(--focus-ring); }
textarea { width: 100%; resize: vertical; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.eyebrow {
  margin: 0 0 4px;
  color: var(--neon);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* ── 頂列：玻璃 HUD，底部速度線 ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  background: rgba(8, 4, 21, 0.88);
  backdrop-filter: blur(12px);
  color: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(31, 255, 237, 0.28), 0 12px 30px rgba(3, 1, 10, 0.55);
}
.brand-block { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-block > b, .brand-block b { font-size: 16px; letter-spacing: 0.02em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #2bffe9, #0ec9bd);
  color: #041311;
  font-weight: 900;
  font-size: 20px;
  box-shadow: 0 0 16px rgba(31, 255, 237, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.brand-mark.large { width: 64px; height: 64px; border-radius: 14px; font-size: 32px; margin: auto; }
.brand-mark.brand-image { background: transparent; border: 0; padding: 0; }
.brand-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.top-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.ghost { background: transparent; }
.ghost.light { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
/* V1.18.31：hover 僅在可懸停裝置生效，避免觸控裝置 hover 樣式黏住 */
@media (hover: hover) and (pointer: fine) {
  .ghost.light:hover { border-color: var(--neon); color: var(--neon); }
}
/* ── 按鈕：暗面底＋霓虹主按鈕 ── */
button {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 650;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  button:hover {
    transform: translateY(-1px);
    border-color: var(--neon-line);
    color: var(--neon);
    box-shadow: 0 4px 14px rgba(3, 1, 10, 0.5);
  }
}
/* V1.18.31：按壓回饋（比 hover 更快回彈，頻率高所以保持細微） */
button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}
button.primary {
  background: linear-gradient(135deg, #2bffe9, #0ec9bd);
  border-color: #2bffe9;
  color: #041311;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(31, 255, 237, 0.28);
}
@media (hover: hover) and (pointer: fine) {
  button.primary:hover { color: #041311; box-shadow: 0 0 28px rgba(31, 255, 237, 0.45); }
}
button.big { width: 100%; font-size: 19px; padding: 15px; }
.action-wide { width: 100%; margin-top: 10px; }
.danger { color: var(--red); }
@media (hover: hover) and (pointer: fine) {
  button.danger:hover { border-color: rgba(251, 113, 133, 0.5); color: var(--red); }
}
/* ── 狀態膠囊：半透明 HUD ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill.ok { background: var(--success-bg); color: var(--green); border-color: rgba(52, 211, 153, 0.4); }
.status-pill.warn { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }
.status-pill.update { background: var(--info-bg); color: var(--neon); border-color: var(--neon-line); }
.status-pill.info { background: var(--info-bg); color: var(--neon); border-color: var(--neon-line); }
.status-pill.danger { background: var(--danger-bg); color: var(--red); border-color: rgba(251, 113, 133, 0.4); }
.status-pill.muted { background: var(--surface-3); color: var(--text-dim); border-color: var(--line-soft); }
.system-notice {
  max-width: 1280px;
  margin: 10px auto 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  border: 1px solid var(--line);
}
.system-notice.warn { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }
.system-notice.danger { background: var(--danger-bg); color: var(--red); border-color: rgba(251, 113, 133, 0.4); }
.system-notice.info { background: var(--info-bg); color: var(--neon); border-color: var(--neon-line); }
.sync-strip {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 8px auto 0;
  padding: 0 14px;
  color: var(--text-dim);
  font-size: 12px;
}
/* ── 分頁列 ── */
.tabs {
  position: sticky;
  top: 60px;
  z-index: 40;
  display: flex;
  overflow: auto;
  background: rgba(13, 7, 32, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 0 12px;
}
.tabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px 16px;
  color: var(--text-dim);
  white-space: nowrap;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .tabs button:hover { transform: none; box-shadow: none; color: var(--text); }
}
.tabs button.active {
  color: var(--neon);
  font-weight: 800;
  border-bottom: 3px solid var(--neon);
  text-shadow: 0 0 14px rgba(31, 255, 237, 0.5);
}
.app-main, .admin-wrap { max-width: 1280px; margin: auto; padding: 18px 14px 90px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 8px 2px 18px; }
.page-head.compact { margin-bottom: 14px; }
.page-head h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.02em;
  border-left: 3px solid var(--neon);
  padding-left: 12px;
  line-height: 1.15;
}
.page-head p { margin-top: 5px; }
.page-date { font-weight: 700; color: var(--text-dim); }
/* ── 卡片：面板＋頂部霓虹切角 ── */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), #0d0720 90%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(31, 255, 237, 0.4) 6%,
    rgba(31, 255, 237, 0.18) 40%,
    rgba(31, 255, 237, 0.05) 78%,
    transparent 100%
  );
  pointer-events: none;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; font-size: 19px; letter-spacing: 0.01em; }
.card-head p { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; }
.card .card-head .row { align-items: center; justify-content: flex-end; gap: 8px; }
.card .card-head .row select, .card .card-head .row input { min-width: 110px; }
/* 分頁：只顯示作用中的頁籤 */
.tab { display: none; }
.tab.active { display: block; animation: subtabIn 0.18s ease; }
/* ── 指標卡 ── */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.metric {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.metric::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(31, 255, 237, 0.4), transparent 70%);
}
.metric.accent { background: linear-gradient(135deg, rgba(31, 255, 237, 0.13), var(--surface) 70%); }
.metric.warning { background: linear-gradient(135deg, var(--gold-soft), var(--surface) 70%); }
.metric.warning::after { background: linear-gradient(180deg, rgba(255, 179, 71, 0.5), transparent 70%); }
.metric span { display: block; color: var(--text-dim); font-size: 13px; font-weight: 700; }
.metric b { display: block; font-size: 28px; margin: 5px 0; color: var(--neon); font-variant-numeric: tabular-nums; }
.metric small { color: var(--text-faint); }
.danger-metric { background: linear-gradient(135deg, rgba(251, 113, 133, 0.14), var(--surface) 70%); }
.danger-metric::after { background: linear-gradient(180deg, rgba(251, 113, 133, 0.55), transparent 70%); }
.danger-metric b { color: var(--red); }
.metrics .metric { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
@media (hover: hover) and (pointer: fine) {
  .metrics .metric:hover { transform: translateY(-2px); border-color: var(--neon-line); box-shadow: 0 12px 30px rgba(3, 1, 10, 0.65); }
}
/* ── 首頁快速動線 ── */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 16px;
  min-height: 112px;
}
.quick-action span { font-size: 24px; }
.quick-action small { color: var(--text-dim); }
.quick-action.primary { color: #041311; }
.quick-action.primary small { color: #0b5f58; }
/* ── POS 工作區：左結帳區＋右收款面板（修正原本無效的雙欄選擇器） ── */
.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
  gap: 16px;
  align-items: start;
}
.checkout { position: sticky; top: 118px; height: max-content; }
.checkout input, .checkout select { font-size: 17px; }
.checkout .sumline.total { font-size: 26px; }
/* ── 收款面板：表單網格，標籤在輸入框上方 ── */
.checkout .pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 13px 0; }
.checkout .pay-grid .span-2 { grid-column: 1 / -1; }
.checkout .pay-field label { display: block; font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 0 0 6px; }
.checkout .pay-field input, .checkout .pay-field select { width: 100%; }
.checkout .pay-field .row { display: flex; gap: 8px; flex-wrap: nowrap; margin: 0; align-items: stretch; }
.checkout .pay-field .row input { flex: 1 1 auto; min-width: 0; }
.checkout .pay-field .row button { flex: 0 0 auto; white-space: nowrap; }
.checkout .pay-field .muted.small { margin-top: 6px; }
.checkout .cash-quick { margin: 13px 0; gap: 7px; }
.checkout .change-box { width: 100%; padding: 12px 14px; }
/* ── 1080p 桌機：整頁一屏容納（壓縮頁首／班次卡／收款面板） ── */
@media (min-width: 1500px) and (min-height: 940px) {
  .page-head.compact { margin: 2px 2px 10px; }
  .page-head h1 { font-size: 24px; }
  .page-head.compact .muted { font-size: 12.5px; margin-top: 3px; }
  .tab-pos .card { padding: 14px 16px; margin-bottom: 12px; }
  .tab-pos .card-head h2 { font-size: 17px; }
  .tab-pos .card-head p { display: none; }
  .shift-card .card-head { margin-bottom: 8px; }
  .shift-state { padding: 8px 12px; margin-bottom: 8px; }
  .pos-layout { gap: 14px; }
  .checkout { top: 90px; }
  .checkout input, .checkout select { font-size: 16px; padding: 9px 11px; }
  .checkout .sumline { padding: 6px 0; }
  .checkout .sumline.total { font-size: 22px; padding-top: 10px; margin-top: 6px; }
  .checkout .pay-grid { gap: 10px; margin: 10px 0; }
  .checkout .pay-field label { font-size: 12px; margin-bottom: 4px; }
  .checkout .pay-field .row input { flex: 1 1 auto; }
  .checkout .cash-quick { margin: 10px 0; }
  .checkout .cash-quick button { padding: 8px 4px; }
  .checkout .change-box { padding: 9px 12px; font-size: 19px; }
  .checkout button.big { padding: 12px; font-size: 17px; }
}
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.row > input, .row > select { flex: 1 1 150px; min-width: 120px; }
.row > button { flex: 0 0 auto; white-space: nowrap; }
.row > label { flex: 0 0 auto; white-space: nowrap; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.toolbar button { white-space: nowrap; }
/* ── 掃碼列：HUD 對焦框感 ── */
.scanner { width: 100%; font-size: 20px; border: 1px solid var(--neon-line); background: rgba(31, 255, 237, 0.05); font-weight: 700; }
.scanner:focus { background: rgba(31, 255, 237, 0.08); }
.hero-scan { padding: 8px; background: rgba(31, 255, 237, 0.04); border-radius: var(--radius-md); border: 1px solid var(--line); }
.scan-row { display: flex; gap: 8px; align-items: stretch; margin: 6px 0; }
.scan-row > input { flex: 1; min-width: 0; }
.scan-row.compact { margin: 0; }
.camera-btn {
  white-space: nowrap;
  background: var(--neon-soft);
  border-color: var(--neon-line);
  color: var(--neon);
  font-weight: 800;
}
@media (hover: hover) and (pointer: fine) {
  .camera-btn:hover { border-color: var(--neon); }
}
.cart-line, .purchase-line, .stocktake-line {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 90px 110px 70px;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cart-line { grid-template-columns: minmax(130px, 1fr) 70px 85px 50px; }
.purchase-line {
  grid-template-columns: minmax(140px, 1fr) 80px 95px 95px 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  padding: 9px 10px;
  background: var(--surface-2);
}
.purchase-line input { padding: 8px 10px; }
.purchase-line b { font-size: 14px; }
.sumline { display: flex; justify-content: space-between; padding: 8px 0; font-variant-numeric: tabular-nums; }
.sumline.total { font-size: 26px; border-top: 1px solid var(--neon-line); margin-top: 10px; padding-top: 14px; }
.sumline.total b { color: var(--neon); text-shadow: 0 0 16px rgba(31, 255, 237, 0.35); }
.cash-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 9px 0; }
.cash-quick button { min-width: 0; padding: 10px 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.change-box { font-size: 24px; font-weight: 900; background: var(--success-bg); border-color: rgba(52, 211, 153, 0.4); color: #7af0c0; font-variant-numeric: tabular-nums; }
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px; margin: 8px 0; }
.search-results button { text-align: left; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 13px; }
/* ── 表格 ── */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; background: transparent; }
th, td { padding: 10px 11px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
th { font-size: 12px; color: var(--text-dim); background: rgba(31, 255, 237, 0.06); position: sticky; top: 0; }
tr:hover td { background: rgba(31, 255, 237, 0.035); }
.ok { color: var(--green); }
.bad { color: var(--red); font-weight: 800; }
#poList table, #payablesList table, #statementArea table, #poDetailBody table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#poList th, #payablesList th, #statementArea th, #poDetailBody th {
  text-align: left;
  padding: 9px 10px;
  background: rgba(31, 255, 237, 0.06);
  color: var(--text-dim);
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
#poList td, #payablesList td, #statementArea td, #poDetailBody td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
#poList tbody tr:hover, #payablesList tbody tr:hover { background: rgba(31, 255, 237, 0.04); }
#poDetailBody input { max-width: 110px; }
#statementArea { margin-top: 14px; }
#statementArea h3 { margin: 6px 0 10px; }
.msg { padding: 8px 0; min-height: 30px; }
/* V1.18.31：操作訊息（結帳成功／已加入等）進場回饋，純 CSS，內容出現時觸發 */
.msg:not(:empty) { animation: msgIn 240ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* ── 報表 ── */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.report-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; background: rgba(23, 16, 42, 0.5); }
.report-panel h3 { margin-top: 0; }
.mini-card { padding: 9px; border-bottom: 1px solid var(--line-soft); }
.report-filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
/* ── 後台／健康檢查 ── */
.admin-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; }
.admin-form { grid-template-columns: repeat(2, 1fr); }
/* V1.18.33：離線臨時授權卡片重新排版（有標籤、UUID 全寬可讀、紀錄結構化） */
.lic-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.lic-field label { display: block; font-size: 12.5px; font-weight: 750; color: var(--text-dim); margin-bottom: 5px; }
.lic-field select, .lic-field input, .lic-field textarea { width: 100%; }
.lic-span-2 { grid-column: 1 / -1; }
.lic-mono, .lic-record-id { font-family: ui-monospace, Consolas, 'Courier New', monospace; }
.lic-mono { font-size: 13.5px; }
.lic-gap { margin-top: 14px; }
.lic-record { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-2); }
.lic-record + .lic-record { margin-top: 8px; }
.lic-record-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lic-record-id { word-break: break-all; font-size: 12.5px; color: var(--neon); margin-top: 5px; }
.lic-record-meta { margin-top: 5px; }
@media (max-width: 900px) { .lic-form { grid-template-columns: 1fr; } }
.health-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.health-chip {
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-weight: 750;
  font-size: 13px;
}
.health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.health-ok { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.7); }
.health-offline, .health-warn { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.7); }
.health-danger { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.7); }
.health-update { background: #3b82f6; box-shadow: 0 0 8px rgba(59, 130, 246, 0.7); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: var(--text-dim); font-size: 12px; }
.mobile-nav { display: none; }
.print-only { display: none; }
/* ── 營運健康列 ── */
.health-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.health-row:last-child { border-bottom: 0; }
.health-row.danger { color: var(--red); background: rgba(251, 113, 133, 0.06); }
.health-row.warn { color: var(--gold); background: rgba(255, 179, 71, 0.05); }
.health-row.info { color: var(--neon); background: rgba(31, 255, 237, 0.04); }
.health-row.ok { color: var(--green); background: rgba(52, 211, 153, 0.05); }
.health-row.clickable { cursor: pointer; }
.health-row .ghost { padding: 5px 10px; font-size: 12.5px; flex: 0 0 auto; }
.stock-actions { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.stock-actions button { padding: 5px 10px; font-size: 12.5px; }
/* ── 收銀班次 ── */
.shift-card { border-left: 3px solid var(--neon); }
.shift-state {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  margin-bottom: 9px;
  border: 1px solid var(--line-soft);
}
.shift-state.ok { background: var(--success-bg); color: var(--green); border-color: rgba(52, 211, 153, 0.35); }
.shift-state.warn { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }
.shift-state span { font-size: 13px; }
.setting-line { display: flex; gap: 9px; align-items: center; padding: 10px 0; font-weight: 750; }
.setting-line input { width: auto; }
code#deviceIdText {
  display: block;
  word-break: break-all;
  background: #0d0720;
  border: 1px solid var(--line-soft);
  color: var(--neon);
  padding: 12px;
  border-radius: var(--radius-sm);
}
/* ── 登入頁 ── */
.login-page {
  min-height: 100vh;
  background:
    radial-gradient(900px 480px at 80% 0%, var(--neon-soft), transparent 55%),
    radial-gradient(circle at top, var(--surface-2) 0, var(--bg) 45%, var(--bg-strong) 100%);
  display: grid;
  place-items: center;
  padding: 20px;
}
.login-shell { width: min(430px, 100%); }
.login-brand { text-align: center; color: var(--text); margin-bottom: 14px; }
.login-brand h1 { margin: 10px 0 2px; font-size: 32px; letter-spacing: 0.02em; }
.login-brand p { margin: 0; color: var(--text-dim); }
.login-card { padding: 24px; }
.login-card h2 { margin-top: 0; }
.login-card label { display: block; font-size: 13px; font-weight: 750; margin: 11px 0 5px; }
.login-card input { width: 100%; }
.login-card label.remember-line {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  margin: 12px 0 2px;
  cursor: pointer;
}
.login-card label.remember-line input { width: auto; margin: 0; flex: 0 0 auto; }
.login-help { margin-top: 18px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-dim); font-size: 13px; border: 1px solid var(--line-soft); }
.login-help p { margin: 4px 0 0; }
.login-footer { text-align: center; color: var(--text-faint); font-size: 12px; margin-top: 12px; }
/* ── 相機掃碼 ── */
.camera-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(3, 1, 10, 0.85); display: none; align-items: center; justify-content: center; padding: 12px; }
.camera-modal.open { display: flex; }
/* V1.18.31：掃碼視窗進場（避免瞬間彈出的突兀感） */
.camera-modal.open { animation: fadeIn 150ms ease; }
.camera-modal.open .camera-panel { animation: camIn 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes camIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.camera-panel { width: min(720px, 100%); max-height: 96vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; }
.camera-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.camera-close { font-size: 22px; border: 0; background: transparent; padding: 4px 8px; }
.camera-video-wrap { position: relative; margin: 12px 0; background: #000; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.camera-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.camera-reticle { pointer-events: none; position: absolute; inset: 18% 10%; border: 3px solid rgba(31, 255, 237, 0.85); border-radius: var(--radius-md); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.2), 0 0 18px rgba(31, 255, 237, 0.4); }
.camera-status { min-height: 28px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-soft); }
.camera-status.ok { background: var(--success-bg); color: var(--green); }
.camera-status.bad { background: var(--danger-bg); color: var(--red); }
.camera-status.warn { background: var(--gold-soft); color: var(--gold); }
.camera-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 10px 0; }
/* ── 授權提醒 ── */
.license-notice {
  max-width: 1280px;
  margin: 10px auto 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--line);
  font-weight: 800;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.55;
  background: rgba(13, 7, 32, 0.85);
}
.license-notice[hidden] { display: none; }
.license-notice .license-icon { font-size: 26px; flex: 0 0 auto; }
.license-notice .license-main { flex: 1; }
.license-notice .license-title { font-size: 16px; font-weight: 900; }
.license-notice .license-detail { font-size: 13px; font-weight: 700; margin-top: 2px; }
.license-notice.renew { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }
.license-notice.urgent { background: var(--danger-bg); border-color: rgba(251, 113, 133, 0.5); color: var(--red); }
.license-notice.temporary { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }
.license-notice.blocked { background: var(--danger-bg); border-color: #ef4444; color: var(--red); }
.license-notice.offline { background: var(--info-bg); border-color: var(--neon-line); color: var(--neon); }
/* ── 焦點可視性 ── */
button:focus-visible, input:focus-visible, select:focus-visible { box-shadow: var(--focus-ring); outline: 2px solid var(--neon); outline-offset: 1px; }
/* ── 響應式 ── */
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .pos-layout, .report-grid, .admin-grid { grid-template-columns: 1fr; }
  .checkout { position: static; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .top-actions .ghost { display: none; }
}
@media (max-width: 700px) {
  body { padding-bottom: 72px; }
  .topbar { padding: 9px 11px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-block b { font-size: 14px; }
  .top-actions { gap: 5px; }
  .top-actions .status-pill:nth-of-type(2) { display: none; }
  .sync-strip { justify-content: flex-start; padding: 0 10px; gap: 8px; }
  .sync-strip span:nth-child(1) { display: none; }
  .desktop-tabs { display: none; }
  .app-main { padding: 12px 10px 82px; }
  .page-head { margin: 4px 2px 12px; }
  .page-head h1 { font-size: 23px; }
  .page-head .muted { font-size: 13px; }
  .page-date { display: none; }
  .metrics { gap: 8px; }
  .metric { padding: 13px; }
  .metric b { font-size: 23px; }
  .quick-grid { gap: 8px; }
  .quick-action { min-height: 98px; padding: 13px; }
  .card { padding: 14px; }
  .pos-layout { display: block; }
  .scanner { font-size: 17px; min-height: 48px; }
  .scan-row { display: grid; grid-template-columns: 1fr auto; }
  .camera-btn { min-height: 48px; }
  .cart-line { grid-template-columns: minmax(130px, 1fr) 70px 85px 50px; }
  .purchase-line { grid-template-columns: minmax(110px, 1fr) 60px 80px 88px 45px; font-size: 13px; }
  .cash-quick { grid-template-columns: repeat(3, 1fr); }
  .form-grid, .admin-form { grid-template-columns: 1fr; }
  .report-filter-bar > * { flex: 1; min-width: 120px; }
  .table-wrap { border-radius: var(--radius-sm); }
  .mobile-nav {
    display: grid;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(8, 4, 21, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    box-shadow: 0 -8px 30px rgba(3, 1, 10, 0.6);
  }
  .mobile-nav button { border: 0; background: transparent; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-dim); font-size: 18px; box-shadow: none; }
  .mobile-nav button span { font-size: 11px; }
  .checkout button.big { position: sticky; bottom: 72px; z-index: 5; box-shadow: 0 0 22px rgba(31, 255, 237, 0.35); }
  .checkout input, .checkout select { font-size: 17px; }
  .camera-panel { border-radius: var(--radius-md); }
  .camera-video-wrap { aspect-ratio: 3/4; }
  .system-notice { margin: 8px 10px 0; }
  .health-summary { gap: 6px; }
}
@media (max-width: 720px) {
  .license-notice { margin: 8px 10px 0; padding: 12px; }
  .license-notice .license-title { font-size: 15px; }
}
/* ── 列印：收據保持白紙黑字 ── */
@media print {
  body > * { display: none !important; }
  #printArea, #printReportArea { display: block !important; color: #000; }
  .receipt { width: 72mm; font-size: 12px; color: #000; }
  .print-only { display: block; }
  #poList, #payablesList { display: none !important; }
}
/* ============================================================
   V1.17｜佈景主題切換（設定頁可選）
   cyber＝預設賽博深色（上方所有規則即為此主題）
   light＝亮白商務　oled＝純黑省電
   ============================================================ */
/* ── 亮白商務 ── */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --bg-strong: #e8edf5;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f7;
  --neon: #0e7490;
  --neon-soft: rgba(14, 116, 144, 0.08);
  --neon-line: rgba(14, 116, 144, 0.35);
  --gold: #b45309;
  --gold-soft: #fff7ed;
  --gold-line: #fcd34d;
  --text: #0f172a;
  --text-dim: #475569;
  --text-faint: #94a3b8;
  --line: #e2e8f0;
  --line-soft: #e5e7eb;
  --muted: #64748b;
  --card: #ffffff;
  --shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --success: #047857;
  --success-bg: #ecfdf5;
  --info: #0e7490;
  --info-bg: #ecfeff;
  --warn-bg: #fff7ed;
  --danger-bg: #fef2f2;
  --focus-ring: 0 0 0 3px rgba(14, 116, 144, 0.16);
  background: #f4f7fb;
}
html[data-theme="light"] body { background: linear-gradient(180deg, #f6f9fd, #eef2f8); background-attachment: fixed; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-color: #f4f7fb; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #ffffff; }
html[data-theme="light"] .card { background: #ffffff; }
html[data-theme="light"] .card::before {
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(14, 116, 144, 0.32) 12%,
    rgba(14, 116, 144, 0.14) 45%,
    rgba(14, 116, 144, 0.03) 85%,
    transparent 100%
  );
}
html[data-theme="light"] .topbar { background: rgba(15, 23, 42, 0.94); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(15, 23, 42, 0.2); }
html[data-theme="light"] .tabs { background: rgba(255, 255, 255, 0.96); border-bottom-color: #e2e8f0; }
html[data-theme="light"] .tabs button.active { color: #0e7490; text-shadow: none; }
html[data-theme="light"] .page-head h1 { border-left-color: #0e7490; }
html[data-theme="light"] .metric { background: #ffffff; }
html[data-theme="light"] .metric.accent { background: linear-gradient(135deg, #ecfeff, #ffffff 70%); }
html[data-theme="light"] .metric.warning { background: linear-gradient(135deg, #fff7ed, #ffffff 70%); }
html[data-theme="light"] .danger-metric { background: linear-gradient(135deg, #fef2f2, #ffffff 70%); }
html[data-theme="light"] .metric b { color: #0e7490; text-shadow: none; }
html[data-theme="light"] .sumline.total { border-top-color: #cbd5e1; }
html[data-theme="light"] .sumline.total b { color: #0e7490; text-shadow: none; }
html[data-theme="light"] .scanner { background: #f0fbff; border-color: rgba(8, 145, 178, 0.45); }
html[data-theme="light"] .hero-scan { background: #f8fafc; border-color: #e2e8f0; }
html[data-theme="light"] .camera-btn { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
html[data-theme="light"] th { background: #f1f5f9; color: #475569; }
html[data-theme="light"] #poList th, html[data-theme="light"] #payablesList th, html[data-theme="light"] #statementArea th, html[data-theme="light"] #poDetailBody th { background: #f1f5f9; color: #475569; }
html[data-theme="light"] tr:hover td { background: #f8fbff; }
html[data-theme="light"] #poList tbody tr:hover, html[data-theme="light"] #payablesList tbody tr:hover { background: #f8fbff; }
html[data-theme="light"] .report-panel { background: #f8fafc; }
html[data-theme="light"] .health-chip { background: #f8fafc; border-color: #e2e8f0; }
html[data-theme="light"] .health-row.danger { background: #fff7f7; color: #991b1b; }
html[data-theme="light"] .health-row.warn { background: #fffaf0; color: #92400e; }
html[data-theme="light"] .health-row.info { background: #f5f9ff; color: #1e40af; }
html[data-theme="light"] .health-row.ok { background: #f0fdf4; color: #047857; }
html[data-theme="light"] .shift-state { background: #f8fafc; border-color: #e2e8f0; }
html[data-theme="light"] .shift-state.ok { background: #ecfdf5; color: #065f46; }
html[data-theme="light"] .shift-state.warn { background: #fff7ed; color: #9a3412; }
html[data-theme="light"] .change-box { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
html[data-theme="light"] code#deviceIdText { background: #f8fafc; color: #0e7490; border-color: #e2e8f0; }
html[data-theme="light"] .mobile-nav { background: rgba(255, 255, 255, 0.97); border-top-color: #e2e8f0; box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .checkout button.big { box-shadow: 0 8px 22px rgba(14, 116, 144, 0.3); }
html[data-theme="light"] .purchase-line { background: #ffffff; }
html[data-theme="light"] .system-notice, html[data-theme="light"] .license-notice { background: #ffffff; }
/* ── OLED 純黑省電 ── */
html[data-theme="oled"] {
  --bg: #000000;
  --bg-strong: #000000;
  --surface: #07070d;
  --surface-2: #0c0c15;
  --surface-3: #131320;
  --line: rgba(31, 255, 237, 0.15);
  --line-soft: rgba(168, 159, 208, 0.12);
  --card: #07070d;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
  background: #000000;
}
html[data-theme="oled"] body { background: #000000; }
html[data-theme="oled"] .topbar { background: rgba(0, 0, 0, 0.9); }
html[data-theme="oled"] .card { background: var(--surface); }
html[data-theme="oled"] .metric { background: #0c0c15; }
html[data-theme="oled"] .tabs { background: rgba(0, 0, 0, 0.94); }
html[data-theme="oled"] input, html[data-theme="oled"] select, html[data-theme="oled"] textarea { background: #050509; }
html[data-theme="oled"] .mobile-nav { background: rgba(0, 0, 0, 0.96); }
html[data-theme="oled"] .report-panel { background: #0c0c15; }
html[data-theme="oled"] .purchase-line { background: #0c0c15; }
html[data-theme="oled"] .scanner { background: rgba(31, 255, 237, 0.04); }
html[data-theme="oled"] .health-chip { background: #0c0c15; }
/* ── 純白極簡：全白底、細邊框、零漸層零光暈 ── */
html[data-theme="white"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-strong: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f4f4f5;
  --neon: #0369a1;
  --neon-soft: rgba(3, 105, 161, 0.06);
  --neon-line: rgba(3, 105, 161, 0.32);
  --gold: #a16207;
  --gold-soft: #fefce8;
  --gold-line: #fde68a;
  --text: #18181b;
  --text-dim: #52525b;
  --text-faint: #52525b;
  --line: #e4e4e7;
  --line-soft: #ececee;
  --muted: #52525b;
  --green: #166534;
  --red: #b91c1c;
  --amber: #854d0e;
  --blue: #0369a1;
  --blue2: #075985;
  --card: #ffffff;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --success: #15803d;
  --success-bg: #f0fdf4;
  --info: #0369a1;
  --info-bg: #f0f9ff;
  --warn-bg: #fefce8;
  --danger-bg: #fef2f2;
  --focus-ring: 0 0 0 3px rgba(3, 105, 161, 0.14);
  background: #ffffff;
}
html[data-theme="white"] body { background: #ffffff; }
html[data-theme="white"]::selection,
html[data-theme="white"] ::selection { background: #075985; color: #ffffff; }
html[data-theme="white"] button.primary {
  background: #075985;
  border-color: #075985;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(7, 89, 133, .16);
}
html[data-theme="white"] button.primary:disabled {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #475569;
  opacity: 1;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="white"] button.primary:hover:not(:disabled) { background: #0c4a6e; border-color: #0c4a6e; color: #ffffff; }
}
html[data-theme="white"] .status-pill.ok { border-color: #15803d; }
html[data-theme="white"] .status-pill.danger { border-color: #b91c1c; }
html[data-theme="white"] .pos-identity-icon img { filter: grayscale(1) brightness(.45); }
html[data-theme="white"] ::-webkit-scrollbar-thumb { background: #d4d4d8; border-color: #ffffff; }
html[data-theme="white"] input, html[data-theme="white"] select, html[data-theme="white"] textarea { background: #ffffff; border-color: #8b8b96; }
html[data-theme="white"] .card { background: #ffffff; border-color: #e4e4e7; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
html[data-theme="white"] .card::before {
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(3, 105, 161, 0.26) 12%,
    rgba(3, 105, 161, 0.11) 45%,
    rgba(3, 105, 161, 0.03) 85%,
    transparent 100%
  );
}
html[data-theme="white"] .topbar { background: #ffffff; color: #18181b; border-bottom: 1px solid #e4e4e7; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
html[data-theme="white"] .ghost.light { color: #18181b; border-color: #d4d4d8; }
html[data-theme="white"] .ghost.light:hover { border-color: #0369a1; color: #0369a1; }
html[data-theme="white"] .tabs { background: rgba(255, 255, 255, 0.98); border-bottom-color: #e4e4e7; }
html[data-theme="white"] .tabs button { color: #71717a; }
html[data-theme="white"] .tabs button:hover { color: #18181b; }
html[data-theme="white"] .tabs button.active { color: #0369a1; text-shadow: none; }
html[data-theme="white"] .page-head h1 { border-left-color: #0369a1; }
html[data-theme="white"] .metric { background: #ffffff; border-color: #e4e4e7; }
html[data-theme="white"] .metric::after { background: linear-gradient(180deg, rgba(3, 105, 161, 0.3), transparent 70%); }
html[data-theme="white"] .metric.accent { background: #f0f9ff; }
html[data-theme="white"] .metric.warning { background: #fefce8; }
html[data-theme="white"] .danger-metric { background: #fef2f2; }
html[data-theme="white"] .metric b { color: #0369a1; text-shadow: none; }
html[data-theme="white"] .sumline.total { border-top-color: #d4d4d8; }
html[data-theme="white"] .sumline.total b { color: #0369a1; text-shadow: none; }
html[data-theme="white"] .scanner { background: #f0f9ff; border-color: #0369a1; }
html[data-theme="white"] .hero-scan { background: #fafafa; border-color: #e4e4e7; }
html[data-theme="white"] .camera-btn { background: #f0f9ff; border-color: #0369a1; color: #0369a1; }
html[data-theme="white"] th { background: #fafafa; color: #52525b; }
html[data-theme="white"] #poList th, html[data-theme="white"] #payablesList th, html[data-theme="white"] #statementArea th, html[data-theme="white"] #poDetailBody th { background: #fafafa; color: #52525b; }
html[data-theme="white"] tr:hover td { background: #fafafa; }
html[data-theme="white"] #poList tbody tr:hover, html[data-theme="white"] #payablesList tbody tr:hover { background: #f0f9ff; }
html[data-theme="white"] .report-panel { background: #fafafa; }
html[data-theme="white"] .health-chip { background: #fafafa; border-color: #e4e4e7; }
html[data-theme="white"] .health-row.danger { background: #fef2f2; color: #991b1b; }
html[data-theme="white"] .health-row.warn { background: #fefce8; color: #92400e; }
html[data-theme="white"] .health-row.info { background: #f0f9ff; color: #075985; }
html[data-theme="white"] .health-row.ok { background: #f0fdf4; color: #15803d; }
html[data-theme="white"] .shift-card { border-left-color: #0369a1; }
html[data-theme="white"] .shift-state { background: #fafafa; border-color: #e4e4e7; }
html[data-theme="white"] .shift-state.ok { background: #f0fdf4; color: #166534; }
html[data-theme="white"] .shift-state.warn { background: #fefce8; color: #854d0e; }
html[data-theme="white"] .change-box { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
html[data-theme="white"] code#deviceIdText { background: #fafafa; color: #0369a1; border-color: #e4e4e7; }
html[data-theme="white"] .mobile-nav { background: rgba(255, 255, 255, 0.98); border-top-color: #e4e4e7; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06); }
html[data-theme="white"] .checkout button.big { box-shadow: 0 4px 14px rgba(3, 105, 161, 0.25); }
html[data-theme="white"] .purchase-line { background: #ffffff; border-color: #e4e4e7; }
html[data-theme="white"] .system-notice { background: #ffffff; }
html[data-theme="white"] .license-notice { background: #ffffff; }
html[data-theme="white"] .login-page { background: #ffffff; }
html[data-theme="white"] .login-brand { color: #18181b; }
html[data-theme="white"] .login-help { background: #fafafa; color: #52525b; border-color: #e4e4e7; }

/* ---- V1.18.10 登入頁主題切換按鈕 ---- */
.theme-fab {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .theme-fab:hover {
    border-color: var(--neon);
    box-shadow: var(--focus-ring);
  }
}

/* ---- V1.18.4 修正：class 的 display 會蓋掉 hidden 屬性，全域強制 hidden 生效 ---- */
[hidden] {
  display: none !important;
}

/* ---- V1.18.2 子頁簽（頁內分組導覽） ---- */
.subtabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 14px 0 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.subtabs button {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim, #9d94c8);
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
@media (hover: hover) and (pointer: fine) {
  .subtabs button:hover { color: var(--text, #eae6ff); }
}
.subtabs button.active {
  color: var(--accent, #22d3ee);
  border-bottom-color: var(--accent, #22d3ee);
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}
.subtab-pane { display: none; }
.subtab-pane.active { display: block; animation: subtabIn 0.18s ease; }
@keyframes subtabIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* ---- V1.18.28 功能說明頁籤 ---- */
.help-card h3 {
  margin: 14px 0 6px;
  font-size: 15px;
  color: var(--text, #eae6ff);
}
.help-card ul {
  margin: 4px 0 10px 20px;
  line-height: 1.7;
}
.help-card li { margin: 3px 0; }
.help-example {
  background: color-mix(in srgb, var(--accent, #22d3ee) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #22d3ee) 25%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 6px 0 12px;
  font-size: 13.5px;
  line-height: 1.8;
}

/* ---- V1.18.31 動效修訂（find-animation-opportunities） ---- */
/* 手機底部導覽：顯示目前所在頁籤（狀態修復，非動畫） */
.mobile-nav button.active { color: var(--neon); }
.mobile-nav button.active span { color: var(--neon); }
html[data-theme="light"] .mobile-nav button.active { color: #0e7490; }
html[data-theme="white"] .mobile-nav button.active { color: #0369a1; }
/* 觸控按壓回饋（僅觸控裝置） */
@media (pointer: coarse) {
  .mobile-nav button:active { transform: scale(0.94); }
}
/* 減量動效：使用者要求降低動態時，全部壓到近零而非全刪 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}









.language-picker { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.language-picker label { margin:0; color:var(--muted); font-size:13px; }
.language-picker select { width:auto; min-width:180px; max-width:100%; min-height:44px; }
.login-language { justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.admin-language { margin-left:auto; }
@media(max-width:600px) { .admin-language { width:100%; } .language-picker select { flex:1; } }