/* 石門國小電腦財產盤點 — iOS 手機優先設計 */
:root {
  --primary: #0a84ff;        /* iOS Blue */
  --primary-dark: #0060d4;
  --primary-light: #e5f1ff;
  --accent: #ff9500;         /* iOS Orange */
  --accent-soft: #fff2dd;
  --success: #34c759;        /* iOS Green */
  --success-soft: #d5f5dd;
  --warning: #ffcc00;
  --danger: #ff3b30;         /* iOS Red */
  --danger-soft: #ffe2e0;
  --purple: #af52de;
  --bg: #f2f2f7;             /* iOS grouped bg */
  --bg-elevated: #fff;
  --card: #fff;
  --border: #e5e5ea;
  --sep: #c6c6c8;
  --text: #000;
  --text-2: #3c3c43;
  --text-soft: #6e6e73;
  --text-muted: #8e8e93;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
  --tap: 48px;  /* iOS Human Interface: min touch target */
  --nav-h: 56px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* 強制固定亮色模式（不跟隨系統） */
:root { color-scheme: light; }
html, body { background: var(--bg); color: var(--text); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { overscroll-behavior-y: contain; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  padding-bottom: calc(var(--safe-bottom) + 100px); /* 避免底部固定按鈕遮住內容 */
}

/* 隱藏長按選取 (iOS) */
button, .tap { user-select: none; -webkit-user-select: none; }
input, textarea, select { user-select: auto; -webkit-user-select: auto; }

/* =========== 登入畫面 =========== */
.login-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.login-card {
  background: var(--card); border-radius: 24px;
  padding: 36px 28px; max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-logo {
  font-size: 56px; margin-bottom: 12px;
  line-height: 1;
}
.login-card h1 {
  margin: 0; font-size: 22px; font-weight: 800;
  letter-spacing: -0.015em; color: var(--text);
}
.login-subtitle {
  font-size: 13px; color: var(--text-soft);
  margin: 6px 0 24px; line-height: 1.5;
}
.google-signin-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px;
  background: #fff; color: #3c4043;
  border: 1.5px solid #dadce0; border-radius: 12px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.google-signin-btn:hover {
  background: #f8f9fa; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.google-signin-btn:active { transform: scale(0.98); }
.login-note {
  font-size: 12px; color: var(--text-soft);
  margin: 20px 0 0; line-height: 1.6;
  padding: 12px; background: var(--primary-light);
  color: var(--primary-dark); border-radius: 10px;
}

/* =========== 使用者 Chip =========== */
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  background: var(--bg); border-radius: 999px;
  font-size: 13px; margin-left: 4px;
}
.user-chip img { flex-shrink: 0; object-fit: cover; }
.user-chip .user-info { line-height: 1.2; min-width: 0; }
.user-chip .user-name { font-weight: 600; font-size: 12px; }
.user-chip .user-mail { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .user-logout {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-soft); font-size: 14px; padding: 4px 8px;
  border-radius: 6px;
}
.user-chip .user-logout:hover { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 640px) {
  .user-chip .user-info { display: none; }
  .user-chip { padding: 2px; }
}

/* =========== 頂部導覽 =========== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--sep);
  color: var(--text);
  padding: calc(var(--safe-top) + 10px) 16px 10px;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--nav-h);
}
.topbar .logo { font-size: 22px; line-height: 1; }
.topbar .title { font-size: 17px; font-weight: 700; flex: 1; line-height: 1.2; letter-spacing: -0.01em; }
.topbar .subtitle { font-size: 11px; font-weight: 500; color: var(--text-soft); margin-top: 1px; }
.nav-btn {
  min-height: 36px; padding: 0 14px;
  background: var(--primary-light); color: var(--primary);
  border: none; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-btn:active { background: var(--primary); color: #fff; }

main { padding: 12px 16px; max-width: 820px; margin: 0 auto; }

/* =========== Section 標題 =========== */
.section-label {
  font-size: 13px; color: var(--text-soft); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 16px 4px 6px;
}

/* =========== Card =========== */
.card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.card.flat { box-shadow: none; }
.card h2 {
  margin: 0 0 10px; font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
}
.card h3 {
  margin: 10px 0 6px; font-size: 13px;
  color: var(--text-soft); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* =========== 目前教室 Hero 卡 =========== */
.hero-room {
  background: linear-gradient(135deg, var(--primary), #0a6bcf);
  color: #fff; border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(10,132,255,0.3);
  position: relative; overflow: hidden;
}
.hero-room::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}
.hero-room .label {
  font-size: 12px; opacity: 0.85; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.hero-room .name {
  font-size: 28px; font-weight: 800; margin-top: 3px;
  letter-spacing: -0.02em; line-height: 1.1;
}
.hero-room .meta {
  display: flex; gap: 8px; margin-top: 10px;
  flex-wrap: wrap;
}
.hero-room .pill {
  background: rgba(255,255,255,0.18); padding: 5px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-room .change-btn {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.25); color: #fff;
  border: none; min-height: 32px; padding: 0 12px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  white-space: nowrap;
  z-index: 2;
}
.hero-room .change-btn:active { background: rgba(255,255,255,0.4); }
/* 手機：教室名稱為長字時，預留 change-btn 空間避免重疊 */
@media (max-width: 640px) {
  .hero-room { padding-right: 88px; }
  .hero-room .change-btn {
    top: 12px; right: 12px;
    min-height: 28px; padding: 0 10px; font-size: 11.5px;
  }
  .hero-room .name { font-size: 24px; }
  .hero-room .meta { gap: 6px; }
  .hero-room .pill { padding: 4px 9px; font-size: 11px; }
}

/* =========== 本教室資產清單（展開區塊）=========== */
.room-assets-details {
  background: var(--card);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.room-assets-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s;
}
.room-assets-summary::-webkit-details-marker { display: none; }
.room-assets-summary:active { background: var(--bg); }
.ra-title {
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}
.ra-toggle-icon {
  font-size: 22px;
  color: var(--text-muted);
  font-weight: 300;
  transition: transform 0.2s;
}
.room-assets-details[open] .ra-toggle-icon { transform: rotate(90deg); }

.room-assets-body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--border);
}

.ra-section {
  margin-top: 10px;
  padding-top: 4px;
}
.ra-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 4px;
}
.ra-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.ra-section-icon.cat-device { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.ra-section-icon.cat-ts     { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.ra-section-icon.cat-ap     { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
.ra-section-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.ra-section-count {
  background: var(--bg);
  color: var(--text-soft);
  font-weight: 700;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
}
.ra-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 4px;
}
.ra-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.ra-item:hover { background: var(--primary-light); }
.ra-pn {
  font-family: monospace;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 12px;
  background: var(--card);
  padding: 1px 8px;
  border-radius: 4px;
}
.ra-pn.ra-ap-code {
  color: var(--accent);
  background: var(--accent-soft);
}
.ra-model {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ra-year {
  color: var(--text-muted);
  font-size: 11px;
  background: var(--card);
  padding: 1px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ra-flag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ra-flag.danger { background: var(--danger-soft); color: var(--danger); }
.ra-flag.accent { background: var(--accent-soft); color: var(--accent); }
.ra-more {
  padding: 6px 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

@media (max-width: 640px) {
  .ra-section-icon { width: 28px; height: 28px; font-size: 15px; }
  .ra-section-title { font-size: 13px; }
  .ra-item { padding: 6px 8px; font-size: 12px; gap: 6px; }
  .ra-pn { font-size: 11.5px; }
  .ra-model { font-size: 12px; }
}

/* =========== 進度條 Widget =========== */
.progress-widget {
  background: var(--card); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.progress-widget.in-room { margin-top: -4px; }
.progress-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; gap: 10px;
}
.progress-title { font-size: 12px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.progress-label { font-size: 13px; color: var(--text); font-weight: 600; }
.progress-track {
  width: 100%; height: 10px; background: var(--bg);
  border-radius: 999px; overflow: hidden; position: relative;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--primary);
}
.progress-fill.start { background: linear-gradient(90deg, var(--danger), var(--accent)); }
.progress-fill.half { background: linear-gradient(90deg, var(--accent), var(--primary)); }
.progress-fill.done { background: linear-gradient(90deg, var(--success), #2db84a); }

/* =========== iOS 開關 Switch =========== */
.mode-toggle {
  display: flex; gap: 12px; align-items: center;
  background: var(--card); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.mode-title { font-size: 14px; font-weight: 600; }
.mode-desc { font-size: 11px; color: var(--text-soft); margin-top: 2px; line-height: 1.3; }
.switch {
  position: relative; display: inline-block;
  width: 51px; height: 31px; flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0;
  background: var(--sep); border-radius: 31px;
  cursor: pointer; transition: 0.25s;
}
.switch .slider::before {
  content: ''; position: absolute;
  height: 27px; width: 27px; left: 2px; bottom: 2px;
  background: #fff; border-radius: 50%;
  transition: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: var(--success); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* =========== 底部固定 CTA =========== */
.bottom-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  pointer-events: none;
}
.bottom-cta .btn-capture {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--accent), #ff7a00);
  color: #fff; font-size: 17px; font-weight: 700;
  border: none; border-radius: 16px;
  box-shadow: 0 6px 20px rgba(255,149,0,0.35);
  cursor: pointer;
  transition: transform 0.1s;
  letter-spacing: 0.02em;
}
.bottom-cta .btn-capture:active {
  transform: scale(0.97);
  box-shadow: 0 3px 10px rgba(255,149,0,0.4);
}
.bottom-cta .btn-capture .icon { font-size: 22px; }
.bottom-cta .btn-capture input { display: none; }
.bottom-cta .btn-capture.disabled {
  background: var(--text-muted); box-shadow: none;
  opacity: 0.6; pointer-events: none;
}
.btn-capture-mini {
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 8px 14px; min-width: 64px;
  background: var(--card); color: var(--primary);
  border: 2px solid var(--primary-light);
  border-radius: 16px; font-size: 20px; font-weight: 700;
  cursor: pointer; transition: transform 0.1s;
  box-shadow: var(--shadow-sm);
}
.btn-capture-mini:active { transform: scale(0.95); }
.btn-capture-mini small { font-size: 10px; font-weight: 600; margin-top: 2px; }

/* QR Reader container 調整 */
#qrReader video { border-radius: 12px; }
#qrReader img[alt="Info icon"] { display: none !important; } /* 隱藏 library 預設 icon */
#qrReader__dashboard_section_csr button { display: none !important; }

/* =========== Bottom Sheet (教室選擇器) =========== */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sheet-backdrop.show { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 91;
  background: var(--bg-elevated);
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -10px 50px rgba(0,0,0,0.2);
  pointer-events: none; /* 🔑 隱藏時不接受點擊（修正桌機 opacity:0 仍被點擊的 bug） */
}
.sheet.show { transform: translateY(0); pointer-events: auto; }
.sheet-handle {
  width: 36px; height: 5px; background: var(--sep);
  border-radius: 3px; margin: 8px auto 0;
  flex-shrink: 0;
}
.sheet-header {
  padding: 10px 16px 8px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.sheet-header h3 {
  margin: 0; font-size: 20px; font-weight: 700; flex: 1;
  letter-spacing: -0.015em;
}
.sheet-close {
  background: var(--bg); color: var(--text-soft);
  border: none; width: 30px; height: 30px;
  border-radius: 50%; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sheet-body {
  flex: 1; overflow-y: auto; padding: 0 16px 16px;
  -webkit-overflow-scrolling: touch;
}
.sheet-sticky {
  position: sticky; top: 0; background: var(--bg-elevated);
  padding-bottom: 10px; z-index: 1;
}

/* =========== 平面圖 =========== */
.fp-container { padding: 4px; }
.fp-legend {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 8px 4px; font-size: 11px; color: var(--text-soft);
  margin-bottom: 10px;
}
.fp-leg { font-weight: 600; }
.fp-floor {
  background: var(--bg); border-radius: 14px;
  padding: 10px; margin-bottom: 14px;
}
.fp-floor-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 8px; letter-spacing: 0.02em;
}
.fp-floor-body {
  display: flex; flex-direction: column; gap: 10px;
}
.fp-block {
  background: var(--card); border-radius: 10px;
  padding: 8px; box-shadow: var(--shadow-sm);
}
.fp-block-label {
  font-size: 10px; color: var(--text-soft);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px;
}

/* 水平走廊（所有 room 一排，可多 span）
   手機螢幕不夠寬時允許橫向捲動，避免擠壓跑版 */
.fp-block-h {
  display: grid;
  grid-template-columns: repeat(var(--cols, 10), minmax(56px, 1fr));
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
  /* 讓 grid 在 flex 父層不被壓縮 */
  min-width: 0;
}
.fp-block-h::-webkit-scrollbar { display: none; }
.fp-block-h > .fp-cell { scroll-snap-align: start; }
/* 水平走廊的父層：右緣加漸層提示「還有內容」 */
.fp-block.fp-block-has-h {
  position: relative;
  overflow: hidden;
}
.fp-block.fp-block-has-h::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 18px;
  background: linear-gradient(to right, transparent, var(--card) 90%);
  pointer-events: none;
  border-radius: 0 10px 10px 0;
}
@media (min-width: 900px) {
  /* 桌面螢幕夠寬就不需要漸層提示 */
  .fp-block.fp-block-has-h::after { display: none; }
}

/* 垂直翼樓 */
.fp-block-v {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 4px;
}

.fp-cell {
  padding: 6px 4px; border-radius: 8px;
  text-align: center; cursor: pointer;
  transition: all 0.15s;
  border: 1.5px solid transparent;
  min-height: 54px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.fp-cell:active { transform: scale(0.95); }
.fp-cell.fp-empty { background: transparent; opacity: 0.3; cursor: default; pointer-events: none; }

.fp-code {
  font-size: 9px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.02em;
}
.fp-name {
  font-size: 11px; font-weight: 600;
  line-height: 1.15; margin-top: 1px;
  /* 避免超長教室名稱撐破格子 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.fp-pct {
  font-size: 9px; margin-top: 2px;
  color: var(--text-soft); font-weight: 600;
}
.fp-pct.fp-no-inv { opacity: 0.4; }

/* 狀態色 */
.fp-cell.fp-no-inv { background: var(--bg); color: var(--text-muted); }
.fp-cell.fp-todo { background: var(--danger-soft); color: var(--danger); }
.fp-cell.fp-todo .fp-name, .fp-cell.fp-todo .fp-code { color: var(--danger); }
.fp-cell.fp-partial { background: var(--accent-soft); color: var(--accent); }
.fp-cell.fp-partial .fp-name, .fp-cell.fp-partial .fp-code { color: #c27300; }
.fp-cell.fp-done { background: var(--success-soft); color: var(--success); }
.fp-cell.fp-done .fp-name, .fp-cell.fp-done .fp-code { color: #146c3a; }
.fp-cell.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* 切換檢視模式 */
.view-toggle {
  display: flex; background: var(--bg); padding: 2px;
  border-radius: 10px; gap: 2px; margin-bottom: 10px;
}
.view-toggle button {
  flex: 1; padding: 8px 6px; background: transparent; border: none;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  border-radius: 8px; cursor: pointer;
}
.view-toggle button.active {
  background: var(--bg-elevated); color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

@media (min-width: 900px) {
  .fp-block-h { grid-template-columns: repeat(var(--cols, 10), minmax(72px, 1fr)); }
  .fp-block-v { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  .fp-cell { min-height: 68px; }
  .fp-name { font-size: 12px; }
}

/* =========== Floor Tabs =========== */
.floor-segments {
  display: flex; background: var(--bg); padding: 2px;
  border-radius: 10px; gap: 2px; margin-bottom: 10px;
}
.floor-segments button {
  flex: 1; padding: 8px 6px; background: transparent; border: none;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.floor-segments button.active {
  background: var(--bg-elevated); color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 搜尋框 */
.search-wrap {
  position: relative; margin-bottom: 10px;
}
.search-wrap::before {
  content: '🔍'; position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); font-size: 14px; opacity: 0.5;
  pointer-events: none;
}
.search-wrap input {
  width: 100%; padding: 12px 14px 12px 38px;
  border: none; background: var(--bg);
  border-radius: 10px; font-size: 15px;
  font-family: inherit; color: var(--text);
}
.search-wrap input:focus { outline: 2px solid var(--primary); }

/* Category chips */
.cat-chips {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips button {
  flex-shrink: 0; padding: 7px 14px;
  background: var(--bg); color: var(--text-2);
  border: none; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.cat-chips button.active {
  background: var(--primary); color: #fff;
}

/* 教室格狀 */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.room-btn {
  padding: 12px 10px; border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--card);
  cursor: pointer; text-align: left;
  transition: all 0.15s;
  min-height: var(--tap);
}
.room-btn:active { transform: scale(0.97); }
.room-btn .code {
  font-size: 10.5px; color: var(--text-muted);
  font-weight: 600; letter-spacing: 0.02em;
}
.room-btn .name {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin-top: 2px; line-height: 1.2;
}
.room-btn .count {
  font-size: 10px; color: var(--primary); margin-top: 5px;
  font-weight: 600;
}
.room-btn.active {
  background: var(--primary-light); border-color: var(--primary);
}
.room-btn.active .name { color: var(--primary); }

.cat-class .code { color: var(--primary); }
.cat-admin .code { color: var(--accent); }
.cat-subject .code { color: var(--purple); }
.cat-care .code { color: var(--danger); }
.cat-kindergarten .code { color: var(--success); }

/* 最近使用 chips */
.recent-chips {
  display: flex; gap: 6px; overflow-x: auto;
  margin-bottom: 14px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
}
.recent-chips::-webkit-scrollbar { display: none; }
.recent-chip {
  flex-shrink: 0; padding: 6px 12px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
}
.recent-chip:active { background: var(--primary-light); }
.recent-chip .c { color: var(--text-muted); font-size: 11px; }

/* =========== 預覽面板 =========== */
.preview-panel {
  background: var(--card); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.preview-img-wrap {
  width: 100%; aspect-ratio: 4/3;
  background: #000; display: flex;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.preview-img-wrap img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.preview-overlay-btn {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(0,0,0,0.55); color: #fff;
  border: none; width: 36px; height: 36px;
  border-radius: 18px; font-size: 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer;
}
.preview-overlay-btn:active { background: rgba(0,0,0,0.75); }

.detect-actions {
  padding: 12px; display: flex; gap: 8px;
  border-bottom: 0.5px solid var(--sep);
}

/* =========== 表單 =========== */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px;
}
.form-grid .full { grid-column: span 2; }

.field {
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.field label {
  font-size: 11px; color: var(--text-soft);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field input, .field select, .field textarea {
  padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: 15px; color: var(--text);
  font-family: inherit; min-height: var(--tap);
  -webkit-appearance: none; appearance: none;
}
.field input[type="number"] {
  -moz-appearance: textfield;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); background: var(--card);
}
.field textarea { resize: vertical; min-height: 60px; }
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%238e8e93' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 10px; padding-right: 30px;
}
.field.auto-detected input, .field.auto-detected select, .field.auto-detected textarea {
  background: var(--success-soft); border-color: var(--success);
}
.field.auto-detected::after {
  content: '✨ AI'; position: absolute; right: 10px; top: 32px;
  font-size: 10px; color: var(--success); font-weight: 700;
  pointer-events: none;
}

/* =========== Button =========== */
.btn {
  padding: 10px 16px; border-radius: 10px; border: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform 0.08s;
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: center; min-height: var(--tap);
  font-family: inherit;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:active { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: var(--bg); color: var(--text); }
.btn-ghost-accent { background: var(--primary-light); color: var(--primary); }
.btn-block { width: 100%; display: flex; }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-save-panel {
  position: sticky; bottom: 0;
  padding: 12px; background: var(--card);
  border-top: 0.5px solid var(--sep);
}

/* =========== 比對結果 =========== */
.match-banner {
  padding: 12px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.match-banner.good { background: var(--success-soft); color: #146c3a; }
.match-banner.none { background: var(--danger-soft); color: #8b2929; }
.match-banner.transfer {
  background: linear-gradient(135deg, #e5f1ff, #dceeff);
  color: var(--primary-dark);
  border-left: 4px solid var(--primary);
}
.match-banner.transfer b { color: var(--primary); font-weight: 800; }
.match-banner .count { flex: 1; }

/* 候選卡的資產類型 badge */
.asset-type-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.01em;
  vertical-align: 1px;
}
.asset-type-badge.ab-device { background: #dbeafe; color: #1e40af; }
.asset-type-badge.ab-ts     { background: #ede9fe; color: #5b21b6; }
.asset-type-badge.ab-ap     { background: #ffedd5; color: #9a3412; }

.match-suggest.is-transfer {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--card), #f0f7ff);
}
.match-suggest.is-transfer.selected {
  background: var(--primary-light);
}
.match-suggest .from-room {
  font-weight: 600;
}
.match-suggest.is-transfer .from-room {
  color: var(--primary);
}

.match-suggest {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 10px 12px; margin-top: 6px;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 10px;
}
.match-suggest:active { transform: scale(0.99); }
.match-suggest.selected {
  background: var(--primary-light); border-color: var(--primary);
}
.match-suggest .check {
  width: 22px; height: 22px; border-radius: 11px;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: transparent;
}
.match-suggest.selected .check {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.match-suggest .info { flex: 1; min-width: 0; }
.match-suggest .title {
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.match-suggest .desc {
  font-size: 12px; color: var(--text-soft); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =========== 拍攝選單：辨識重點 hint segmented control =========== */
.capture-hint-section {
  background: linear-gradient(135deg, var(--primary-light), #f0f7ff);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 4px;
}
.capture-hint-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.capture-hint-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.hint-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-2);
  transition: all 0.15s;
  min-height: 70px;
}
.hint-btn:active { transform: scale(0.97); }
.hint-btn .hint-icon {
  font-size: 20px;
  line-height: 1;
}
.hint-btn .hint-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.hint-btn .hint-sub {
  font-size: 9.5px;
  color: var(--text-muted);
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
}
.hint-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(10,132,255,0.3);
}
.hint-btn.active .hint-sub { color: rgba(255,255,255,0.85); }

/* =========== 欄位編輯狀態視覺回饋 =========== */
.field.user-edited input,
.field.user-edited select,
.field.user-edited textarea {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
}
.field.user-edited::after {
  content: '✏️ 已修改';
  position: absolute;
  right: 10px;
  top: 32px;
  font-size: 10px;
  color: var(--primary);
  font-weight: 700;
  pointer-events: none;
}
/* auto-detected 仍保留綠底（原有樣式），只在欄位被改時換顏色 */

/* =========== 照片內 AI 摘要 overlay =========== */
.ai-summary-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 70%, transparent);
  color: #fff;
  z-index: 3;
  font-size: 14px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ai-summary-line1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.ai-summary-line2 {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* 依信心度給 overlay 邊條 */
.ai-summary-overlay.sum-high {
  border-left: 4px solid var(--success);
}
.ai-summary-overlay.sum-mid {
  border-left: 4px solid var(--accent);
}
.ai-summary-overlay.sum-low {
  border-left: 4px solid var(--danger);
  background: linear-gradient(to top, rgba(139,41,41,0.85) 0%, rgba(0,0,0,0.6) 70%, transparent);
}

/* =========== A1 (v7.4.11): AI 來源 chip =========== */
.ai-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 500;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: auto;  /* 讓使用者可以看到 tooltip */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-source-chip .src-icon { font-size: 11px; }
.ai-source-chip .src-label { font-weight: 600; letter-spacing: 0.01em; }
.ai-source-chip .src-extras { opacity: 0.85; font-weight: 400; }
.ai-source-chip .src-extras::before { content: ' · '; opacity: 0.6; }

/* 依來源變色 */
.ai-source-chip.src-direct {
  background: rgba(52, 199, 89, 0.25);
  border-color: rgba(52, 199, 89, 0.5);
}
.ai-source-chip.src-proxy {
  background: rgba(0, 122, 255, 0.25);
  border-color: rgba(0, 122, 255, 0.5);
}
.ai-source-chip.src-fallback {
  background: rgba(255, 149, 0, 0.3);
  border-color: rgba(255, 149, 0, 0.6);
}
.ai-source-chip.src-unknown {
  background: rgba(142, 142, 147, 0.3);
  border-color: rgba(142, 142, 147, 0.5);
}
/* finishReason 非 STOP 時高亮 */
.ai-source-chip.src-warning {
  background: rgba(255, 59, 48, 0.35) !important;
  border-color: rgba(255, 59, 48, 0.7) !important;
  animation: chip-pulse 2s ease-in-out infinite;
}
@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6); }
  50% { box-shadow: 0 0 0 4px rgba(255, 59, 48, 0); }
}

@media (max-width: 640px) {
  .capture-hint-section { padding: 10px; }
  .hint-btn { min-height: 60px; padding: 8px 4px; }
  .hint-btn .hint-icon { font-size: 18px; }
  .hint-btn .hint-label { font-size: 11px; }
  .hint-btn .hint-sub { font-size: 9px; }

  .ai-summary-line1 { font-size: 14px; }
  .ai-summary-line2 { font-size: 11.5px; }
  .ai-source-chip { font-size: 9.5px; padding: 2px 6px; }
}

/* =========== AI 辨識信心度條 =========== */
.confidence-bar {
  display: flex;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 10px 12px 0;
  font-size: 13px;
  border-left: 4px solid;
  background: var(--card);
}
.confidence-bar.conf-high {
  background: var(--success-soft);
  border-left-color: var(--success);
  color: #146c3a;
}
.confidence-bar.conf-mid {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: #8a5800;
}
.confidence-bar.conf-low {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  color: #8b2929;
}
.conf-main { flex: 1; min-width: 0; }
.conf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.conf-icon { font-size: 16px; }
.conf-label {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
}
.conf-pct {
  font-size: 18px;
  font-weight: 800;
  font-family: monospace;
}
.conf-track {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.conf-fill {
  height: 100%;
  background: currentColor;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.conf-msg {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.9;
}

/* =========== OCR 辨識錯誤警告（財產號查無時）=========== */
.match-banner.warn {
  background: var(--accent-soft);
  color: #8a5800;
  border-left: 4px solid var(--accent);
}
.match-banner.warn b { color: var(--accent); font-weight: 800; }

.ocr-warn-box {
  background: var(--card);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(255,149,0,0.12);
}
.ocr-warn-title {
  font-size: 14px;
  font-weight: 700;
  color: #8a5800;
  margin-bottom: 8px;
}
.ocr-warn-list {
  margin: 0 0 12px 0;
  padding-left: 22px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.ocr-warn-list li { margin-bottom: 6px; }
.ocr-warn-list b { color: var(--text); font-weight: 700; }
.ocr-warn-list code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: monospace;
  color: var(--primary-dark);
  letter-spacing: 0.05em;
}
.ocr-warn-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ocr-warn-actions .btn {
  flex: 1;
  min-width: 140px;
}

/* 🎯 智慧類型建議面板 */
.smart-type-suggest {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.sts-hint {
  font-size: 12.5px;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.4;
}
.sts-other-types {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.sts-other-label {
  font-size: 12px;
  color: var(--text-soft);
  margin-right: 4px;
  font-weight: 600;
}
.sts-other-types .btn {
  padding: 6px 14px;
  font-size: 12.5px;
  min-height: 34px;
  flex: 0 1 auto;
}

/* 新增按鈕依類型上色 */
.ab-ap-btn.btn-primary {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.ab-ts-btn.btn-primary {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
}
.ab-ap-btn.btn-ghost {
  background: #ffedd5;
  color: #9a3412;
}
.ab-ts-btn.btn-ghost {
  background: #ede9fe;
  color: #6b21a8;
}

@media (max-width: 640px) {
  .sts-other-types .btn { flex: 1; }
}

/* OCR 模糊比對 hint（找到但要再確認）*/
.ocr-fuzzy-hint {
  background: linear-gradient(135deg, var(--accent-soft), #fff5e5);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a5800;
}
.ocr-fuzzy-hint.ocr-fuzzy-weak {
  background: var(--bg);
  border-left-color: var(--text-muted);
  color: var(--text-soft);
}
.ocr-fuzzy-hint code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  color: var(--primary-dark);
  font-weight: 700;
}

@media (max-width: 640px) {
  .confidence-bar { padding: 10px 12px; margin: 10px 0 0; font-size: 12px; }
  .conf-pct { font-size: 16px; }
  .conf-label { font-size: 12px; }
  .ocr-warn-box { padding: 12px; }
  .ocr-warn-actions { flex-direction: column; }
  .ocr-warn-actions .btn { width: 100%; min-width: 0; }
}

/* =========== 財產清冊差異更新面板 =========== */
.inv-diff-panel {
  margin-top: 10px;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-soft), #fff5e5);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  font-size: 13px;
}
.inv-diff-panel.no-diff {
  background: var(--success-soft);
  border-color: var(--success);
}
.inv-diff-panel.is-transfer {
  background: linear-gradient(135deg, #e5f1ff, #dceeff);
  border-color: var(--primary);
}
.inv-diff-panel.is-transfer .inv-diff-title {
  color: var(--primary-dark);
}
.inv-diff-transfer-banner {
  background: rgba(255,255,255,0.8);
  border-left: 3px solid var(--primary);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 8px 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--primary-dark);
}
/* 標題級 b（直接在 banner 底下的）顯示為粗體段落 */
.inv-diff-transfer-banner > b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--primary-dark);
  background: transparent;
  padding: 0;
}
/* 內層 b（在 div 裡的，例如新教室名稱）顯示為藍底 pill */
.inv-diff-transfer-banner div b {
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 12px;
}
.inv-diff-row.is-transfer-row {
  background: #e5f1ff;
  border-color: var(--primary);
}
.inv-diff-row.is-transfer-row .inv-diff-new {
  background: var(--primary);
  color: #fff;
}
.inv-diff-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.inv-diff-title {
  font-size: 14px;
  font-weight: 700;
  color: #8a5800;
  letter-spacing: -0.01em;
}
.inv-diff-panel.no-diff .inv-diff-title { color: #146c3a; }
.inv-diff-desc {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 4px;
}
.inv-diff-all {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
}
.inv-diff-all input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.inv-diff-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-diff-row {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1.5px solid transparent;
}
.inv-diff-row:hover { border-color: var(--accent); }
.inv-diff-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  margin-top: 2px;
}
.inv-diff-content {
  flex: 1;
  min-width: 0;
}
.inv-diff-label {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.inv-diff-values {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}
.inv-diff-old {
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.75;
}
.inv-diff-arrow {
  color: var(--text-muted);
  font-weight: 700;
}
.inv-diff-new {
  color: var(--success);
  font-weight: 700;
  background: var(--success-soft);
  padding: 1px 8px;
  border-radius: 5px;
}
.inv-diff-hint {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  font-size: 11.5px;
  color: #8a5800;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .inv-diff-panel { padding: 12px; }
  .inv-diff-title { font-size: 13px; }
  .inv-diff-row { padding: 8px 10px; }
  .inv-diff-values { font-size: 12.5px; }
}

/* =========== 紀錄列表 =========== */
.record-list { display: flex; flex-direction: column; gap: 8px; }
.record-item {
  background: var(--card); border-radius: 12px; padding: 10px;
  display: flex; gap: 10px; align-items: center;
}
.record-item img {
  width: 54px; height: 54px; object-fit: cover;
  border-radius: 8px; flex-shrink: 0;
  background: var(--bg);
}
.record-item .info { flex: 1; min-width: 0; }
.record-item .model {
  font-weight: 600; font-size: 14px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.record-item .meta {
  font-size: 11px; color: var(--text-soft); margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.tag {
  display: inline-block; padding: 1.5px 7px;
  background: var(--primary-light); color: var(--primary);
  border-radius: 5px; font-size: 10px; font-weight: 600;
  white-space: nowrap;
}
.record-item .del {
  background: transparent; border: none; color: var(--danger);
  cursor: pointer; font-size: 18px; padding: 8px;
  min-width: var(--tap); min-height: var(--tap);
}

/* =========== 📋 照片詳情 Modal =========== */
.record-item.record-clickable {
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.record-item.record-clickable:active {
  transform: scale(0.99);
  background: var(--primary-light);
}
.record-item.record-clickable .record-chev {
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 300;
  margin-right: 4px;
  flex-shrink: 0;
}
.record-item.record-clickable:hover .record-chev { color: var(--primary); }

/* 詳情 modal 內容樣式 */
.photo-detail-sheet .sheet-body {
  padding: 0 16px 20px;
}

.pd-photo-wrap {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 14px;
  background: #000;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.pd-photo-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.pd-section {
  background: var(--card);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 4px solid var(--primary);
}
.pd-section-matched {
  border-left-color: var(--success);
  background: linear-gradient(135deg, var(--success-soft), var(--card));
}
.pd-section-nomatch {
  border-left-color: var(--text-muted);
  background: var(--bg);
}

.pd-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.pd-section-matched .pd-section-title { color: #146c3a; }

.pd-kv {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(0,0,0,0.05);
}
.pd-kv:last-child { border-bottom: none; }
.pd-kv.pd-kv-full {
  grid-template-columns: 1fr;
  gap: 3px;
}
.pd-k {
  color: var(--text-soft);
  font-weight: 600;
  font-size: 11.5px;
}
.pd-v {
  color: var(--text);
  word-break: break-word;
}
.pd-v code {
  background: var(--bg);
  padding: 1px 8px;
  border-radius: 5px;
  font-family: monospace;
  font-weight: 700;
  color: var(--primary-dark);
}
.pd-section-matched .pd-v code {
  background: rgba(255,255,255,0.7);
  color: var(--success);
}
.pd-null { color: var(--text-muted); font-style: italic; font-size: 12px; }

.pd-conf {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
}
.pd-conf-high { background: var(--success-soft); color: var(--success); }
.pd-conf-mid  { background: var(--accent-soft); color: var(--accent); }
.pd-conf-low  { background: var(--danger-soft); color: var(--danger); }

.pd-notes {
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.pd-warn {
  background: var(--accent);
  color: #fff;
  padding: 1px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

.pd-nomatch-desc {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}

.pd-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.pd-actions .btn { width: 100%; justify-content: center; }

/* 🖼 照片全螢幕 viewer */
.photo-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.photo-fullscreen img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  border-radius: 8px;
}
.photo-fullscreen-close {
  position: absolute;
  top: calc(var(--safe-top) + 16px);
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 22px;
  border: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 640px) {
  .pd-section { padding: 12px; }
  .pd-kv {
    grid-template-columns: 80px 1fr;
    font-size: 12.5px;
  }
  .pd-k { font-size: 11px; }
  .pd-photo-wrap { aspect-ratio: 16 / 10; }
}

/* =========== 水平照片列 =========== */
.photo-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 0; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip .ps-item {
  flex-shrink: 0; width: 100px;
  border-radius: 10px; background: var(--card);
  overflow: hidden; position: relative; cursor: pointer;
}
.photo-strip .ps-item img {
  width: 100%; height: 100px; object-fit: cover; display: block;
}
.photo-strip .ps-item .cap {
  padding: 4px 6px; font-size: 10px; line-height: 1.2;
  color: var(--text-soft); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =========== Toast =========== */
.toast {
  position: fixed; top: calc(var(--safe-top) + 60px); left: 50%;
  transform: translateX(-50%) translateY(-20px); z-index: 200;
  background: var(--text); color: var(--bg-elevated);
  padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 85%; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--success); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }

/* =========== Loading =========== */
.loading-inline {
  display: inline-block; width: 16px; height: 16px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
.loading-lg {
  width: 42px; height: 42px;
  border: 3.5px solid var(--primary-light);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 5;
  color: #fff; font-weight: 600; gap: 10px;
}
.loading-overlay .msg {
  font-size: 14px; opacity: 0.9;
}

/* =========== Modal (保留為 fallback key 輸入) =========== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--card); border-radius: 16px;
  max-width: 420px; width: 100%; padding: 20px;
}
.modal h3 { margin: 0 0 8px; font-size: 18px; }
.modal p { color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.modal .actions {
  display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end;
}

/* =========== Empty state =========== */
.empty {
  text-align: center; padding: 36px 16px; color: var(--text-muted);
  font-size: 14px;
}
.empty .icon { font-size: 38px; margin-bottom: 8px; opacity: 0.4; }

/* =========== Manage page 專用 =========== */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 520px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
  background: var(--card); padding: 14px; border-radius: 12px;
  border-left: 4px solid var(--primary);
}
.stat-card .label { font-size: 11px; color: var(--text-soft); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.stat-card .val { font-size: 26px; font-weight: 800; color: var(--primary); margin-top: 2px; letter-spacing: -0.02em; line-height: 1; }
.stat-card.accent { border-left-color: var(--accent); }
.stat-card.accent .val { color: var(--accent); }
.stat-card.success { border-left-color: var(--success); }
.stat-card.success .val { color: var(--success); }
.stat-card.danger { border-left-color: var(--danger); }
.stat-card.danger .val { color: var(--danger); }

/* Tab bar (管理後台) */
.tab-bar {
  display: flex; overflow-x: auto; background: var(--card);
  border-radius: 12px; padding: 4px; gap: 2px;
  margin-bottom: 12px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar button {
  flex: 1; min-width: 70px; padding: 10px 8px;
  background: transparent; border: none;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
.tab-bar button.active {
  background: var(--primary); color: #fff;
}

/* 列表卡片（管理） */
.list-item {
  background: var(--card); border-radius: 12px; padding: 12px;
  margin-bottom: 8px;
}
.list-item .row {
  display: flex; gap: 10px; align-items: center;
}
.list-item img {
  width: 48px; height: 48px; object-fit: cover; border-radius: 8px;
}
.list-item .title {
  font-weight: 600; font-size: 14px; line-height: 1.3;
}
.list-item .sub {
  font-size: 12px; color: var(--text-soft); margin-top: 2px;
}

/* Badge */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.badge-old { background: var(--danger-soft); color: var(--danger); }
.badge-mid { background: var(--accent-soft); color: var(--accent); }
.badge-new { background: var(--success-soft); color: var(--success); }

/* Import area */
.drop-area {
  border: 2px dashed var(--border); border-radius: 14px;
  padding: 28px 16px; text-align: center;
  background: var(--card);
  cursor: pointer; transition: all 0.15s;
}
.drop-area:active { background: var(--bg); }
.drop-area .icon { font-size: 36px; }
.drop-area .hint { color: var(--text-soft); font-size: 13px; margin-top: 6px; }

/* 桌機版拍照列 / 拖放區：手機版完全隱藏（手機用底部固定按鈕）
   ⚠️ 預設就要 display:none，否則手機會顯示 native file input + "Live 相機" + 拖放區 */
.desktop-capture-bar { display: none; }
.drop-zone { display: none; }
/* btn-capture-inline 內的 native file input 永遠不要顯示（不論手機或桌機） */
.btn-capture-inline > input[type="file"] { display: none !important; }
label.btn-capture-inline { cursor: pointer; }

/* =========== 拍攝來源選單 (Action Sheet) =========== */
.capture-sheet {
  /* 手機端由下往上滑入；桌機沿用 .sheet 既有 center-modal 樣式 */
  max-height: 92vh;
}
.capture-menu {
  padding: 4px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.capture-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
  text-align: left;
}
.capture-option:active {
  transform: scale(0.98);
  background: var(--primary-light);
  border-color: var(--primary);
}
.capture-option-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--bg);
}
.capture-option-icon.cam  { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
.capture-option-icon.live { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.capture-option-icon.lib  { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.capture-option-icon.file { background: linear-gradient(135deg, #dcfce7, #86efac); }
.capture-option-info {
  flex: 1;
  min-width: 0;
}
.capture-option-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.capture-option-desc {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 3px;
  line-height: 1.35;
}
.capture-option-arrow {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--text-muted);
  font-weight: 300;
}
.capture-cancel {
  margin-top: 6px;
  background: var(--bg);
  color: var(--text-2);
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  border: none;
  cursor: pointer;
}
.capture-cancel:active { background: var(--sep); }

/* 桌機：hover 效果 */
@media (hover: hover) {
  .capture-option:hover {
    border-color: var(--primary);
    background: var(--primary-light);
  }
}

.table-wrap {
  overflow-x: auto; background: var(--card); border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.data-table th, .data-table td {
  padding: 10px; text-align: left; border-bottom: 0.5px solid var(--sep);
  white-space: nowrap;
}
.data-table th {
  background: var(--bg); font-weight: 600;
  color: var(--text-soft); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* =========== 可排序表格 =========== */
.data-table.sortable th.sortable-th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 28px;
  transition: background 0.15s;
}
.data-table.sortable th.sortable-th:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.sort-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.5;
}
.sort-arrow.active {
  color: var(--primary);
  opacity: 1;
  font-size: 11px;
}

/* =========== 網路工具：MAC 廠商、IP 衝突、Excel 匯出 =========== */
.conflict-banner {
  background: linear-gradient(135deg, var(--danger-soft), #ffeceb);
  border: 1.5px solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #8b2929;
  box-shadow: 0 2px 8px rgba(255,59,48,0.12);
}
.conflict-banner b {
  display: block;
  font-size: 14px;
  color: var(--danger);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.conflict-banner .conflict-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.conflict-banner .conflict-chip {
  background: #fff;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
}

.data-table tr.row-conflict,
.data-table tr.conflict-row {
  background: rgba(255,59,48,0.06);
}
.data-table tr.row-conflict:hover,
.data-table tr.conflict-row:hover {
  background: rgba(255,59,48,0.12);
}
.data-table tr.row-conflict td,
.data-table tr.conflict-row td {
  border-bottom-color: rgba(255,59,48,0.2);
}

.vendor-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* =========== 觸屏顯示器（Touchscreen Tab）=========== */
.ts-compat-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ts-compat-chip {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  border: 1.5px solid var(--border);
}
.ts-compat-chip b {
  font-size: 16px;
  margin: 0 3px;
}
.ts-compat-chip.best   { background: var(--success-soft); color: #146c3a; border-color: var(--success); }
.ts-compat-chip.ok     { background: var(--accent-soft); color: #c27300; border-color: var(--accent); }
.ts-compat-chip.warn   { background: #fff4e0; color: #8a5800; border-color: var(--warning); }
.ts-compat-chip.danger { background: var(--danger-soft); color: #8b2929; border-color: var(--danger); }
.ts-compat-chip.muted  { background: var(--bg); color: var(--text-soft); border-color: var(--border); }

.ts-card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary);
}
.ts-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.ts-card-title {
  display: flex; align-items: baseline; gap: 8px;
  flex: 1; min-width: 0;
}
.ts-card-title b {
  font-size: 17px; font-weight: 800; color: var(--primary); letter-spacing: -0.01em;
}
.ts-room-name {
  font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-card-body {
  display: flex; flex-direction: column; gap: 10px;
}
.ts-meta {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  font-size: 13px; color: var(--text-soft);
}
.ts-meta .ts-pn {
  font-family: monospace; font-weight: 700; color: var(--text);
}
.ts-meta .ts-size {
  background: var(--primary-light); color: var(--primary);
  padding: 1px 8px; border-radius: 5px; font-weight: 700;
}
.ts-meta .ts-brand { font-weight: 600; color: var(--text); }

.ts-ports, .ts-port-row {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap;
}
.ts-ports-label {
  font-size: 12px; color: var(--text-soft); font-weight: 600;
}
.port-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: -apple-system, sans-serif;
}

.ts-pc {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.ts-pc-label { color: var(--text-soft); font-weight: 600; }
.ts-pc b { color: var(--text); font-weight: 700; }
.ts-pc-year {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 6px;
}
.ts-port-note {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
}
.ts-pc-none {
  color: var(--text-muted);
  font-style: italic;
}

.ts-advice {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  border-left: 3px solid;
}
.ts-advice-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.ts-advice-detail { font-size: 12px; opacity: 0.9; }
.ts-advice-best   { background: var(--success-soft); color: #146c3a; border-left-color: var(--success); }
.ts-advice-ok     { background: var(--accent-soft); color: #8a5800; border-left-color: var(--accent); }
.ts-advice-warn   { background: #fff4e0; color: #8a5800; border-left-color: var(--warning); }
.ts-advice-danger { background: var(--danger-soft); color: #8b2929; border-left-color: var(--danger); }

/* 手機端優化 */
@media (max-width: 640px) {
  .ts-compat-summary { gap: 6px; }
  .ts-compat-chip { padding: 6px 10px; font-size: 12px; flex: 1; min-width: 140px; }
  .ts-compat-chip b { font-size: 14px; }
  .ts-card { padding: 12px; }
  .ts-card-head { margin-bottom: 8px; padding-bottom: 8px; }
  .ts-card-title b { font-size: 15px; }
  .ts-room-name { font-size: 13px; }
  .ts-meta { gap: 6px 10px; font-size: 12px; }
  .ts-pc { padding: 8px 10px; font-size: 12px; }
  .ts-advice { padding: 8px 10px; font-size: 12px; }
  .ts-advice-title { font-size: 13px; }
  .ts-advice-detail { font-size: 11.5px; }
}

/* =========== 📡 無線 AP Tab =========== */
.ap-alert-banner {
  background: linear-gradient(135deg, var(--accent-soft), #fff5e5);
  border: 1.5px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-alert-item {
  font-size: 13px;
  color: #8a5800;
  line-height: 1.5;
}
.ap-alert-item b { color: var(--danger); font-size: 15px; }

.ap-card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary);
}
.ap-card.ap-unregistered {
  border-left-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--card) 30%);
}
.ap-card.ap-no-location {
  border-left-color: var(--text-muted);
  opacity: 0.85;
}

.ap-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ap-card-title {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.ap-code {
  font-family: monospace;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.02em;
}
.ap-pn {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-soft);
  background: var(--bg);
  padding: 1px 7px;
  border-radius: 5px;
}
.ap-no-pn {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
}

.ap-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.ap-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.ap-brand {
  font-weight: 700;
  color: var(--text);
}
.ap-year {
  color: var(--text-soft);
  font-size: 11.5px;
  background: var(--bg);
  padding: 1px 7px;
  border-radius: 4px;
}
.ap-location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  flex-wrap: wrap;
}
.ap-location b {
  font-family: monospace;
  color: var(--primary-dark);
  font-weight: 700;
}
.ap-loc-name { color: var(--text-soft); }
.ap-floor {
  background: var(--primary-light);
  color: var(--primary);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.ap-network {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-2);
}
.ap-net-label {
  min-width: 44px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.ap-network code {
  background: var(--bg);
  padding: 1px 7px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text);
}
.ap-poe { font-size: 12px; color: var(--text-soft); }
.ap-warranty {
  font-size: 11.5px;
  color: var(--text-soft);
  padding: 3px 8px;
  background: var(--bg);
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
}
.ap-warranty.ap-warn { background: var(--accent-soft); color: var(--accent); }
.ap-warranty.ap-exp { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.ap-source {
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: italic;
}
.ap-notes {
  font-size: 11.5px;
  color: var(--text-soft);
  background: var(--bg);
  padding: 5px 8px;
  border-radius: 6px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .ap-card { padding: 10px 12px; }
  .ap-code { font-size: 15px; }
  .ap-meta { font-size: 12px; }
  .ap-location { font-size: 12px; }
}

/* =========== Veyon 匯出 & 差異比對 =========== */
.veyon-export-box {
  background: linear-gradient(135deg, #e5f1ff, #f0f7ff);
  border: 1.5px solid var(--primary-light);
  border-radius: 12px; padding: 14px; margin-bottom: 14px;
}
.diff-summary {
  padding: 12px; background: var(--card); border-radius: 10px;
  font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px; align-items: center;
}
.diff-summary b { margin-right: 8px; }
.diff-summary-head {
  cursor: pointer; padding: 10px 14px; border-radius: 8px;
  font-weight: 700; font-size: 14px; margin: 8px 0;
  list-style: none;
}
.diff-summary-head::-webkit-details-marker { display: none; }
.diff-summary-head.added { background: var(--success-soft); color: var(--success); }
.diff-summary-head.removed { background: var(--danger-soft); color: var(--danger); }
.diff-summary-head.changed { background: var(--accent-soft); color: var(--accent); }
.diff-list { padding: 8px 0; max-height: 360px; overflow-y: auto; }
.diff-row {
  padding: 8px 12px; margin-bottom: 4px; border-radius: 6px;
  font-size: 13px; background: var(--card);
  border-left: 3px solid var(--border);
}
.diff-row.added { border-left-color: var(--success); }
.diff-row.removed { border-left-color: var(--danger); text-decoration: line-through; opacity: 0.8; }
.diff-row.changed { border-left-color: var(--accent); }
.diff-row ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; }

/* =========== 版本號 + 更新提示 =========== */
.version-tag {
  position: fixed; bottom: 4px; right: 6px; z-index: 10;
  font-size: 10px; color: var(--text-muted); opacity: 0.6;
  padding: 2px 6px;
}
.version-tag a { color: inherit; text-decoration: none; }
.version-tag:hover { opacity: 1; }

/* 桌面：置中 pill-like 卡片，手機：全寬橫幅 */
.update-banner {
  position: fixed;
  top: calc(var(--safe-top) + 62px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: 10px 14px;
  background: var(--primary); color: #fff;
  border-radius: 14px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: bannerIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: min(calc(100% - 24px), 560px);
  line-height: 1.35;
}
.update-banner > span {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.update-banner button {
  background: #fff; color: var(--primary);
  border: none; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.update-banner button:last-child {
  background: transparent; color: #fff; padding: 4px 8px;
  font-size: 14px;
}
@keyframes bannerIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 手機：全寬橫幅，避免置中 + translate 造成長文字跑版 */
@media (max-width: 640px) {
  .update-banner {
    top: calc(var(--safe-top) + 8px);
    left: 8px;
    right: 8px;
    transform: none;
    max-width: none;
    padding: 10px 12px;
    font-size: 12.5px;
    border-radius: 12px;
  }
}

/* =========== QR 標籤選擇列表 =========== */
.qr-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
}
.qr-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; background: var(--card);
  border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: all 0.15s;
}
.qr-item:hover { border-color: var(--primary); background: var(--primary-light); }
.qr-item input[type="checkbox"] {
  margin-top: 2px; width: 20px; height: 20px; cursor: pointer;
  accent-color: var(--primary);
}
.qr-item .qr-pn { font-family: monospace; font-weight: 700; font-size: 14px; }
.qr-item .qr-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.qr-item .qr-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* 壽命預測區 */
.lifespan-details summary {
  cursor: pointer; padding: 10px 14px; background: var(--bg);
  border-radius: 10px; font-weight: 600; font-size: 14px;
  list-style: none;
}
.lifespan-details summary::-webkit-details-marker { display: none; }
.lifespan-details summary::before {
  content: '▶ '; color: var(--text-muted); transition: transform 0.2s;
  display: inline-block;
}
.lifespan-details[open] summary::before { transform: rotate(90deg); }

/* =========== 離線狀態 Badge =========== */
.offline-badge {
  position: fixed; top: calc(var(--safe-top) + 62px);
  left: 50%; transform: translateX(-50%);
  z-index: 45;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 6px;
  pointer-events: none;
}
.offline-badge.offline { background: var(--danger); color: #fff; }
.offline-badge.pending { background: var(--accent); color: #fff; }

/* =========== Live 相機 Modal =========== */
.camera-modal {
  position: fixed; inset: 0; z-index: 200;
  background: #000; display: none;
  flex-direction: column;
}
.camera-modal.show { display: flex; }

.camera-topbar {
  display: flex; align-items: center;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; position: relative; z-index: 3;
}
.camera-title { flex: 1; text-align: center; font-weight: 700; font-size: 16px; }
.camera-close, .camera-grid-toggle {
  background: rgba(255,255,255,0.2); border: none;
  color: #fff; width: 36px; height: 36px; border-radius: 18px;
  font-size: 18px; cursor: pointer;
}
.camera-close:active, .camera-grid-toggle:active { background: rgba(255,255,255,0.4); }

.camera-view {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.camera-view video {
  width: 100%; height: 100%; object-fit: cover;
  /* iOS Safari 需要 playsinline，HTML 已設 attr */
}

.camera-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
.camera-overlay .grid-line {
  position: absolute; background: rgba(255,255,255,0);
}
.camera-overlay.show-grid .grid-line {
  background: rgba(255,255,255,0.4);
}
.camera-overlay .grid-line.h {
  left: 0; right: 0; height: 1px;
}
.camera-overlay .grid-line.v {
  top: 0; bottom: 0; width: 1px;
}
.camera-overlay .focus-frame {
  position: absolute; top: 50%; left: 50%;
  width: 200px; height: 200px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.15);
}
@media (min-width: 900px) {
  .camera-overlay .focus-frame { width: 340px; height: 340px; }
}

.camera-flash {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity 0.05s;
}
.camera-flash.flash { opacity: 0.85; transition: opacity 0.05s; }

.camera-hint {
  padding: 10px 18px; text-align: center;
  font-weight: 600; font-size: 13px;
  background: rgba(0,0,0,0.85); color: #fff;
  position: relative; z-index: 3;
}
.camera-hint.good { background: rgba(52,199,89,0.95); }
.camera-hint.warn { background: rgba(255,59,48,0.95); }

.camera-bottom {
  padding: 18px 16px calc(18px + var(--safe-bottom));
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 3;
}
.camera-shutter {
  width: 76px; height: 76px; border-radius: 50%;
  background: #fff; border: 4px solid rgba(255,255,255,0.3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.2);
}
.camera-shutter:active {
  transform: scale(0.9);
  background: #ddd;
}
.camera-shutter .shutter-inner {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
}

/* =========== 儀表板 Dashboard =========== */
.kpi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi-card {
  background: var(--card); border-radius: 14px; padding: 14px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  border-top: 4px solid var(--primary);
}
.kpi-card.accent { border-top-color: var(--accent); }
.kpi-card.success { border-top-color: var(--success); }
.kpi-card.danger { border-top-color: var(--danger); }
.kpi-card .label { font-size: 11px; color: var(--text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card .val { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); margin: 4px 0 2px; line-height: 1; }
.kpi-card.accent .val { color: var(--accent); }
.kpi-card.success .val { color: var(--success); }
.kpi-card.danger .val { color: var(--danger); }
.kpi-card .sub { font-size: 11px; color: var(--text-muted); }

.dash-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 900px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid .full { grid-column: span 2; }
}

.chart-card {
  background: var(--card); border-radius: 14px; padding: 16px;
  box-shadow: var(--shadow-sm);
}
.chart-card h3 {
  margin: 0 0 12px; font-size: 15px; font-weight: 700;
  color: var(--text); text-transform: none; letter-spacing: 0;
}
.chart-wrap {
  position: relative; height: 260px; width: 100%;
}
@media (min-width: 900px) {
  .chart-wrap { height: 300px; }
}

/* =========== 平面圖「本月盤點進度」模式 =========== */
.fp-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 10px;
}
.fp-mode-btn {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.fp-mode-btn.active {
  background: var(--bg-elevated);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.fp-mode-btn:hover:not(.active) { background: rgba(255,255,255,0.4); }

/* 本月盤點 4 色系統 */
.fp-cell.fp-round-never {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1.5px dashed var(--danger);
}
.fp-cell.fp-round-never .fp-code,
.fp-cell.fp-round-never .fp-name { color: var(--danger); }

.fp-cell.fp-round-stale {
  background: var(--accent-soft);
  color: var(--accent);
}
.fp-cell.fp-round-stale .fp-code,
.fp-cell.fp-round-stale .fp-name { color: #c27300; }

.fp-cell.fp-round-partial {
  background: #ffedd5;
  color: #c27300;
  border: 1.5px solid var(--accent);
}
.fp-cell.fp-round-partial .fp-code,
.fp-cell.fp-round-partial .fp-name { color: #c27300; }

.fp-cell.fp-round-done {
  background: var(--success-soft);
  color: var(--success);
  border: 1.5px solid var(--success);
}
.fp-cell.fp-round-done .fp-code,
.fp-cell.fp-round-done .fp-name { color: #146c3a; }

/* 圖例 */
.fp-leg.fp-round-never   { color: var(--danger); }
.fp-leg.fp-round-stale   { color: #c27300; }
.fp-leg.fp-round-partial { color: var(--accent); }
.fp-leg.fp-round-done    { color: var(--success); }

/* =========== 單筆財產異動歷史 Modal =========== */
.inv-history-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.inv-history-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

.audit-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 4px;
}
.audit-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card);
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
}
.audit-time {
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap;
  padding-top: 2px;
  flex-shrink: 0;
  font-family: monospace;
}
.audit-main { flex: 1; min-width: 0; }
.audit-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.audit-source {
  font-size: 11px;
  padding: 1px 8px;
  background: var(--bg);
  color: var(--text-soft);
  border-radius: 4px;
  font-weight: 600;
}
.audit-field {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.audit-change {
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.audit-old {
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.7;
}
.audit-arrow { color: var(--text-muted); font-weight: 700; }
.audit-new {
  color: var(--success);
  font-weight: 700;
  background: var(--success-soft);
  padding: 1px 8px;
  border-radius: 5px;
}
.audit-new-big {
  color: var(--success);
  font-weight: 700;
  font-size: 14px;
}
.audit-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.audit-notes { color: var(--text-soft); }

/* =========== 盤點報告 Tab =========== */
.report-section {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.report-section summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 10px;
  border-left: 4px solid var(--primary);
  list-style: none;
  outline: none;
}
.report-section summary::-webkit-details-marker { display: none; }
.report-section summary::before {
  content: '▶ ';
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s;
  display: inline-block;
}
.report-section[open] summary::before { transform: rotate(90deg); }
.report-list {
  margin-top: 10px;
  max-height: 400px;
  overflow-y: auto;
}
.report-row {
  display: grid;
  grid-template-columns: 90px 100px 1fr 140px;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.report-row:last-child { border-bottom: none; }
.report-row:hover { background: var(--primary-light); }
.report-row .r-time { color: var(--text-muted); font-size: 11.5px; font-family: monospace; }
.report-row .r-pn { font-family: monospace; font-weight: 700; color: var(--primary); }
.report-row .r-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.report-row .r-detail s { color: var(--danger); opacity: 0.7; }
.report-row .r-detail b { color: var(--success); }
.report-row .r-user { color: var(--text-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
  .report-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px;
  }
  .report-row .r-time { font-size: 10.5px; }
  .report-row .r-user { font-size: 11px; }
  .inv-history-btn { padding: 5px 8px; font-size: 11.5px; }
  .audit-item { padding: 8px 10px; gap: 8px; }
  .audit-time { font-size: 10px; }
}

/* =========== 熱度地圖顏色（延伸 floorplan） =========== */
.fp-cell.fp-heat-0 { background: var(--bg); color: var(--text-muted); }
.fp-cell.fp-heat-1 { background: #cee3ff; color: #0060d4; }
.fp-cell.fp-heat-2 { background: #7abaff; color: #003d85; }
.fp-cell.fp-heat-3 { background: #2e90ff; color: #fff; }
.fp-cell.fp-heat-4 { background: #0050b3; color: #fff; }
.fp-cell.fp-heat-1 .fp-code, .fp-cell.fp-heat-1 .fp-name { color: inherit; }
.fp-cell.fp-heat-2 .fp-code, .fp-cell.fp-heat-2 .fp-name { color: inherit; }
.fp-cell.fp-heat-3 .fp-code, .fp-cell.fp-heat-3 .fp-name { color: inherit; }
.fp-cell.fp-heat-4 .fp-code, .fp-cell.fp-heat-4 .fp-name { color: inherit; }

/* =========== 預算試算工具 =========== */
.budget-calc {
  display: flex; flex-direction: column; gap: 16px;
}
.slider-row {
  display: flex; flex-direction: column; gap: 6px;
}
.slider-label {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.slider-label b { color: var(--primary); font-size: 18px; }
.fancy-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--success), var(--accent), var(--danger));
  outline: none;
}
.fancy-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border: 2px solid var(--primary);
}
.fancy-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; cursor: pointer; border: 2px solid var(--primary);
}
.slider-marks {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-muted); padding: 0 10px;
}

.budget-big {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; background: var(--primary-light);
  padding: 20px; border-radius: 14px; flex-wrap: wrap;
  margin-top: 8px;
}
.budget-num {
  font-size: 24px; font-weight: 800; color: var(--primary-dark);
  letter-spacing: -0.02em; line-height: 1.1;
}
.budget-num.budget-total {
  font-size: 30px; color: var(--danger);
}
.budget-label {
  font-size: 11px; color: var(--text-soft);
  text-align: center; margin-top: 4px;
}

.budget-breakdown-title {
  font-size: 12px; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 12px 0 8px;
}
.budget-row {
  display: flex; justify-content: space-between;
  padding: 8px 12px; background: var(--bg);
  border-radius: 8px; margin-bottom: 4px;
  font-size: 14px;
}

@media (min-width: 640px) {
  .budget-num { font-size: 28px; }
  .budget-num.budget-total { font-size: 36px; }
}

/* =========== 管理後台 - 通用工具列 (toolbar-row) =========== */
/* 搭配 manage.html 的 .toolbar-row / .toolbar-input / .toolbar-select 使用
   桌面水平排列、手機自動換行且每個元件撐滿全寬 */
.toolbar-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.toolbar-input,
.toolbar-select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  min-height: var(--tap);
  -webkit-appearance: none;
  appearance: none;
}
.toolbar-input:focus,
.toolbar-select:focus {
  outline: none;
  border-color: var(--primary);
}
.toolbar-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%238e8e93' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  padding-right: 30px;
}
.toolbar-grow { flex: 1; min-width: 180px; }

/* =========== QR 狀態列（已選 / 按鈕）=========== */
.qr-status-bar {
  padding: 12px 14px;
  background: var(--primary-light);
  border-radius: 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qr-status-text { flex: 1; min-width: 160px; font-size: 13px; }
.qr-gen-btn { white-space: nowrap; }

/* =========== Dashboard 動作列 =========== */
.dashboard-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ==================================================
   📱 手機端（≤ 640px）— 管理後台 RWD 深度優化
   ================================================== */
@media (max-width: 640px) {

  /* --- 頁面間距 --- */
  main { padding: 10px 12px; }

  /* --- 統計卡 (stat-grid) --- */
  .stat-grid { gap: 8px; grid-template-columns: repeat(2, 1fr); }
  .stat-card { padding: 10px 12px; border-left-width: 3px; }
  .stat-card .val { font-size: 22px; }
  .stat-card .label { font-size: 10px; }

  /* --- Tab bar --- */
  .tab-bar { padding: 3px; gap: 1px; margin-bottom: 10px; }
  .tab-bar button {
    min-width: 56px;
    padding: 8px 10px;
    font-size: 12.5px;
    flex: 0 0 auto;  /* 手機保持原寬度可捲動，不強制等分 */
  }

  /* --- KPI 卡 --- */
  .kpi-grid { gap: 8px; }
  .kpi-card { padding: 10px 12px; border-top-width: 3px; }
  .kpi-card .val { font-size: 24px; }
  .kpi-card .label { font-size: 10px; }
  .kpi-card .sub { font-size: 10px; }

  /* 網路分頁的 3 欄 KPI — 手機強制 3 欄但內容縮小 */
  .network-kpi-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
  .network-kpi-3 .kpi-card { padding: 8px 6px; }
  .network-kpi-3 .kpi-card .val { font-size: 18px; }
  .network-kpi-3 .kpi-card .label { font-size: 9.5px; line-height: 1.2; letter-spacing: 0; }
  .network-kpi-3 .kpi-card .sub { font-size: 9.5px; }

  /* --- 工具列 (toolbar-row) 手機堆疊 --- */
  .toolbar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .toolbar-input,
  .toolbar-select,
  .toolbar-row .btn {
    width: 100%;
    min-width: 0;
  }
  .toolbar-grow { min-width: 0; }

  /* --- Veyon 匯出框 --- */
  .veyon-export-box { padding: 12px; }
  .veyon-export-box h3 { font-size: 14px; }

  /* --- Dashboard 動作列 --- */
  .dashboard-action-bar { justify-content: stretch; }
  .dashboard-action-bar .btn { flex: 1; }

  /* --- 列表卡片 --- */
  .card { padding: 12px; }
  .card h2 { font-size: 15px; }
  .list-item { padding: 10px; margin-bottom: 6px; }
  .list-item .row { gap: 8px; }
  .list-item img { width: 44px; height: 44px; }
  .list-item .title { font-size: 13.5px; line-height: 1.25; }
  .list-item .sub { font-size: 11.5px; line-height: 1.35; }

  /* 拍照紀錄圖片稍大 */
  #photoList .list-item img { width: 52px; height: 52px; }

  /* --- 圖表卡 --- */
  .chart-card { padding: 12px; border-radius: 12px; }
  .chart-card h3 { font-size: 14px; margin-bottom: 8px; }
  .chart-wrap { height: 220px; }

  /* --- 資料表 (data-table) 手機字體縮小 + 邊距緊湊 --- */
  .table-wrap { border-radius: 10px; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 6px; }
  .data-table th { font-size: 10px; }
  .data-table.sortable th.sortable-th { padding-right: 22px; }
  .sort-arrow { right: 6px; font-size: 9px; }
  /* MAC 欄位使用更小字體避免斷行 */
  .data-table td[style*="monospace"] {
    font-size: 10.5px !important;
    letter-spacing: -0.01em;
  }

  /* --- Vendor tag 手機小一點 --- */
  .vendor-tag { font-size: 10px; padding: 1px 6px; }

  /* --- QR list 手機 1 欄 --- */
  .qr-list { grid-template-columns: 1fr; gap: 4px; }
  .qr-item { padding: 8px 10px; }
  .qr-item .qr-pn { font-size: 13px; }

  /* --- QR 狀態列 手機堆疊 --- */
  .qr-status-bar { padding: 10px 12px; }
  .qr-gen-btn { width: 100%; }

  /* --- 預算試算 手機緊湊 --- */
  .budget-calc { gap: 12px; }
  .slider-row { gap: 4px; }
  .slider-label { font-size: 13px; }
  .slider-label b { font-size: 16px; }
  .budget-big { padding: 14px; gap: 10px; }

  /* --- Diff / Conflict banner 手機 --- */
  .conflict-banner { padding: 10px 12px; font-size: 12px; }
  .conflict-banner b { font-size: 13px; }
  .conflict-banner .conflict-row { font-size: 11.5px; padding: 4px 0; }

  /* --- 匯入分頁 field-map 自動換行 --- */
  #fieldMap { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  #fieldMap .field label { font-size: 10px; }

  /* --- topbar 字體縮小 --- */
  .topbar { padding: calc(var(--safe-top) + 8px) 12px 8px; gap: 6px; }
  .topbar .title { font-size: 15px; }
  .topbar .subtitle { font-size: 10px; }
  .nav-btn { padding: 0 10px; min-height: 32px; font-size: 12px; }
}

/* ==================================================
   📱 極小手機（iPhone SE 等，≤ 360px）
   ================================================== */
@media (max-width: 360px) {
  main { padding: 8px 10px; }
  .stat-card .val { font-size: 20px; }
  .kpi-card .val { font-size: 22px; }
  .tab-bar button { padding: 7px 8px; font-size: 11.5px; min-width: 50px; }
  .network-kpi-3 .kpi-card .val { font-size: 16px; }
  .network-kpi-3 .kpi-card .label { font-size: 9px; }
  #fieldMap { grid-template-columns: 1fr !important; }
}

/* ================================================================
   RWD BREAKPOINTS
   ≤ 640px  : 手機 (預設，以上為手機優先樣式)
   641-899  : 平板直式
   900-1279 : 平板橫向 / 小桌機
   ≥ 1280   : 桌機
   ≥ 1600   : 大螢幕
================================================================ */

/* 小手機微調 */
@media (max-width: 380px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: span 1; }
  .hero-room .name { font-size: 24px; }
  .room-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* iPhone 瀏海 safe-area */
@supports (padding: max(0px)) {
  .topbar { padding-top: max(10px, var(--safe-top)); }
}

/* 防 iOS 輸入放大 */
@media screen and (max-width: 500px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ================================================================
   平板直式 (641px+)
================================================================ */
@media (min-width: 641px) {
  main { padding: 20px 24px; max-width: 960px; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .topbar .title { font-size: 19px; }
  .topbar .subtitle { font-size: 12px; }

  .hero-room { padding: 22px 26px; border-radius: 22px; }
  .hero-room .name { font-size: 32px; }
  .hero-room .meta { margin-top: 14px; gap: 10px; }
  .hero-room .pill { padding: 6px 13px; font-size: 13px; }

  .room-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .room-btn { padding: 14px 12px; }
  .room-btn .name { font-size: 16px; }

  .form-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
  .form-grid .full { grid-column: span 3; }

  .stat-card { padding: 18px; }
  .stat-card .val { font-size: 32px; }

  .preview-img-wrap { aspect-ratio: 16/10; max-height: 500px; }

  .modal { max-width: 480px; }
}

/* ================================================================
   小桌機 (900px+)
================================================================ */
@media (min-width: 900px) {
  :root { --nav-h: 60px; }

  main { max-width: 1140px; padding: 24px 32px; }
  body { padding-bottom: 40px; /* 桌面不需要底部固定按鈕空間 */ }

  .topbar { padding: 14px 32px; min-height: 64px; }
  .topbar .logo { font-size: 26px; }
  .topbar .title { font-size: 20px; }

  /* ===== 桌面雙欄佈局 ===== */
  .desktop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
  }
  .desktop-layout > .main-col { min-width: 0; }
  .desktop-layout > .side-col {
    position: sticky; top: calc(var(--nav-h) + 20px);
    max-height: calc(100vh - var(--nav-h) - 40px);
    overflow-y: auto;
  }

  /* Hero 教室卡左右展開 */
  .hero-room {
    padding: 26px 30px; border-radius: 24px;
    display: flex; align-items: center; gap: 28px;
  }
  .hero-room > div:first-child { flex: 1; }
  .hero-room .name { font-size: 38px; margin-top: 4px; }
  .hero-room .label { font-size: 13px; }
  .hero-room .meta { margin-top: 14px; }
  .hero-room .change-btn {
    position: static; min-height: 40px; padding: 0 18px;
    font-size: 14px; background: rgba(255,255,255,0.25);
    align-self: center;
  }
  .hero-room .change-btn:hover { background: rgba(255,255,255,0.35); }

  /* 底部固定按鈕在桌面隱藏 */
  .bottom-cta { display: none !important; }

  /* 桌面用 inline 主要動作按鈕 */
  .desktop-capture-bar {
    display: flex; gap: 12px; margin-bottom: 18px; align-items: stretch;
  }
  .desktop-capture-bar .btn-capture-inline {
    flex: 1; padding: 20px;
    background: linear-gradient(135deg, var(--accent), #ff7a00);
    color: #fff; font-size: 18px; font-weight: 700;
    border: none; border-radius: 16px;
    box-shadow: 0 6px 20px rgba(255,149,0,0.3);
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px;
    transition: all 0.15s;
  }
  .desktop-capture-bar .btn-capture-inline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255,149,0,0.4);
  }
  .desktop-capture-bar .btn-capture-inline .icon { font-size: 28px; }
  .desktop-capture-bar .btn-capture-inline input { display: none; }
  .desktop-capture-bar .btn-capture-inline .kbd {
    font-size: 11px; font-weight: 500; opacity: 0.8;
    background: rgba(0,0,0,0.2); padding: 2px 7px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
  }

  /* 拖放區域 */
  .drop-zone {
    flex: 1; padding: 20px; border-radius: 16px;
    border: 2.5px dashed var(--border);
    background: var(--card);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-weight: 600; color: var(--text-soft);
    transition: all 0.2s;
  }
  .drop-zone.drag-over {
    background: var(--primary-light); border-color: var(--primary);
    color: var(--primary); transform: scale(1.01);
  }
  .drop-zone .icon { font-size: 28px; }

  /* Bottom Sheet 桌面改成 center modal */
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(92vw, 900px); max-height: 86vh;
    border-radius: 20px;
    opacity: 0; transition: transform 0.25s, opacity 0.25s;
    padding-bottom: 0;
  }
  .sheet.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sheet-handle { display: none; }
  .sheet-header { padding: 16px 24px; border-bottom: 1px solid var(--border); }
  .sheet-header h3 { font-size: 22px; }
  .sheet-body { padding: 16px 24px 24px; }
  .room-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

  /* 預覽圖更大 */
  .preview-img-wrap { aspect-ratio: 16/9; max-height: 560px; }

  /* 紀錄列表改用更寬敞 */
  .record-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
  .record-item { cursor: default; }
  .record-item img { width: 68px; height: 68px; }
  .record-item .model { font-size: 15px; }

  /* Hover 效果 */
  .btn:hover:not(:disabled) { opacity: 0.92; }
  .btn-primary:hover { background: var(--primary-dark); opacity: 1; }
  .nav-btn:hover { background: var(--primary); color: #fff; }
  .room-btn:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
  .recent-chip:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
  .tab-bar button:hover:not(.active) { background: var(--bg); }
  .list-item:hover { box-shadow: var(--shadow); }
  .match-suggest:hover { border-color: var(--primary); background: var(--primary-light); }

  /* 滑鼠 cursor */
  .room-btn, .recent-chip, .record-item, .list-item, .match-suggest { cursor: pointer; }

  /* 管理頁桌面樣式 */
  .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .stat-card .val { font-size: 34px; }

  .tab-bar { padding: 6px; }
  .tab-bar button { padding: 12px 16px; font-size: 14px; }

  /* 桌面表格顯示（管理頁） */
  .desktop-table-view .list-item { display: none; }
  .desktop-table-view .data-table-desktop { display: table; width: 100%; }

  /* 管理頁列表桌面多欄 */
  #photoList, #roomsList, #invList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
  }
  #roomsList .list-item:hover { border: 2px solid var(--primary); padding: 11px; }
}

/* ================================================================
   桌機 (1280px+)
================================================================ */
@media (min-width: 1280px) {
  main { max-width: 1320px; padding: 28px 40px; }

  .form-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid .full { grid-column: span 4; }

  .preview-img-wrap { max-height: 640px; }

  .room-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  .record-list { grid-template-columns: repeat(3, 1fr); }

  /* 教室選擇器 split view */
  .sheet { width: min(90vw, 1100px); }

  /* 鍵盤快捷鍵提示 */
  .kbd-hint {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--text-muted); font-weight: 500;
  }
  .kbd-hint kbd {
    font-family: -apple-system, sans-serif;
    background: var(--bg); border: 1px solid var(--border);
    border-bottom-width: 2px; border-radius: 4px;
    padding: 1px 6px; font-size: 10px; font-weight: 600;
    color: var(--text-2); min-width: 18px; text-align: center;
  }
}

/* ================================================================
   大螢幕 (1600px+)
================================================================ */
@media (min-width: 1600px) {
  main { max-width: 1480px; padding: 32px 48px; }
  .desktop-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; }
  .hero-room .name { font-size: 42px; }
}

/* ================================================================
   印刷樣式（優化列印報表用）
================================================================ */
@media print {
  .topbar, .bottom-cta, .tab-bar, .nav-btn, .btn, .sheet, .sheet-backdrop,
  .desktop-capture-bar, .drop-zone { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card, .list-item { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .stat-card { border: 1px solid #ccc; break-inside: avoid; }
}

/* ================================================================
   滑鼠專屬精緻化（非觸控）
================================================================ */
@media (hover: hover) and (pointer: fine) {
  /* 滑鼠環境才顯示 tooltip 等 */
  [data-tooltip] { position: relative; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text); color: var(--bg-elevated);
    padding: 4px 10px; border-radius: 6px; font-size: 12px;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: all 0.15s; font-weight: 500;
  }
  [data-tooltip]:hover::after {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
}