/* ── 全域 ───────────────────────────────────────── */
:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface2: #334155;
  --border: #475569;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --danger: #ef4444;
  --success: #22c55e;
  --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100vh;
  overflow: hidden;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#app-shell {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── 獨立登入畫面 ───────────────────────────────── */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.18), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(34,197,94,.12), transparent 45%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 20px 45px rgba(2, 6, 23, .35);
}

.login-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  margin: -4px -4px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.05);
}
.login-logos .logo-npust { height: 60px; width: auto; flex: 0 0 auto; }
.login-logos .logo-nstc  { height: 30px; width: auto; flex: 0 0 auto; max-width: 60%; }
.login-logos-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(0,0,0,.12);
  margin: 4px 0;
}

.login-card h2 {
  margin-bottom: 4px;
}

.login-subtitle {
  color: var(--text-dim);
  margin-bottom: 10px;
  font-size: .92rem;
}

.login-card label {
  font-size: .88rem;
  color: var(--text-dim);
}

.login-card input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
}

.login-card input:focus {
  outline: none;
  border-color: var(--primary);
}

.login-card .btn-primary {
  margin-top: 4px;
}

.login-status {
  min-height: 22px;
  font-size: .85rem;
  color: var(--text-dim);
}

.login-status.error { color: #fca5a5; }
.login-status.ok { color: #86efac; }

/* ── 專業全域改善 ────────────────────────────────── */
/* 按鈕統一過渡與反饋 */
.btn-primary, .btn-secondary, .btn-danger, .btn-sm {
  transition: background .15s, box-shadow .15s, transform .08s, opacity .15s;
  font-weight: 500;
  letter-spacing: .01em;
}
.btn-primary:active:not(:disabled),
.btn-secondary:active,
.btn-sm:active { transform: translateY(1px); }
.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  box-shadow: 0 2px 10px rgba(59,130,246,.35);
}
.btn-secondary:hover { background: #3d4f68; border-color: #64748b; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }

/* 全域 input/textarea/select focus 光環 */
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* 欄位說明文字（解釋用途與影響）*/
.field-help {
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  color: #94a3b8;
  line-height: 1.55;
  padding: 5px 10px 5px 11px;
  border-left: 2px solid rgba(59,130,246,.45);
  background: rgba(59,130,246,.055);
  border-radius: 0 5px 5px 0;
}
.field-help b { color: #93c5fd; font-weight: 600; }
.field-help code { font-size: .72rem; background: rgba(0,0,0,.25); padding: 1px 5px; border-radius: 3px; color: #7dd3fc; }

/* 設定分組卡片 */
.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px 14px;
  margin-bottom: 14px;
}
.settings-section-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(71,85,105,.5);
  display: flex;
  align-items: center;
  gap: 7px;
}
.settings-section-title::before {
  content: '';
  display: inline-block;
  width: 3px; height: 13px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Header ─────────────────────────────────────── */
header {
  background: linear-gradient(135deg, #182236 0%, var(--surface) 100%);
  border-bottom: 1px solid rgba(71,85,105,.7);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 14px rgba(0,0,0,.3);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.auth-box {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-info {
  font-size: .82rem;
  color: var(--text-dim);
  min-width: 140px;
}

header h1 { font-size: 1.25rem; white-space: nowrap; }

nav { display: flex; gap: 4px; }

.tab {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background .15s, color .15s, box-shadow .15s;
}
.tab:hover { background: rgba(255,255,255,.07); color: var(--text); }
.tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 14px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ── Main / Panels ──────────────────────────────── */
main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.panel.active { display: flex; }
/* demo-panel 用 fixed 定位繞過 flex layout 干擾 — header 大約 56px 高 */
#demo-panel.active {
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  overflow-y: auto !important;
  padding: 16px !important;
  background: var(--bg) !important;
  z-index: 5 !important;
}

/* grow-panel / safety-panel 同 demo-panel：用 fixed 繞過 flex layout 干擾，避免空白 */
#grow-panel.active, #safety-panel.active {
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  overflow-y: auto !important;
  padding: 16px !important;
  background: var(--bg) !important;
  z-index: 5 !important;
}

/* ── 教學面板 inner tabs ─────────────────────────── */
.inner-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.inner-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 8px 18px 9px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 500;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.inner-tab:hover { color: var(--text); }
.inner-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.inner-subpanel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── 自動化 main tabs（規則 vs 排程）────────────── */
.auto-main-tabs {
  display: flex;
  gap: 2px;
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.auto-main-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 8px 20px 9px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.auto-main-tab:hover { color: var(--text); }
.auto-main-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.auto-main-pane {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── 系統設定 Modal ───────────────────────────────── */
#btn-settings {
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
#btn-settings:hover { color: var(--text); background: var(--surface2); }

.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(860px, 96vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  overflow: hidden;
}
.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-modal-header h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.settings-modal-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-modal-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 7px 18px 8px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 500;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.settings-modal-tab:hover { color: var(--text); }
.settings-modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.settings-modal-pane {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* ── Chat Layout ────────────────────────────────── */
.chat-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg {
  max-width: 80%;
  padding: 10px 16px;
  border-radius: var(--radius);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
}
.msg.assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: normal;
}

.msg.assistant p {
  margin: 0;
}

.msg.assistant p + p {
  margin-top: 8px;
}

.msg.assistant ul {
  margin: 0;
  padding-left: 18px;
}

.msg.assistant li + li {
  margin-top: 4px;
}

.msg.assistant code {
  background: #0b1220;
  border: 1px solid #23324d;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
}
.msg.tool-info {
  align-self: flex-start;
  background: #1a2744;
  border: 1px solid #2d4a7a;
  font-size: 0.85rem;
  color: var(--text-dim);
}

#chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ── Modbus Status Panel ────────────────────────── */
#modbus-status-panel {
  width: 320px;
  min-width: 280px;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.status-header h3 {
  font-size: .95rem;
  white-space: nowrap;
}
.status-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.indicator {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.indicator.online  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.indicator.offline { background: var(--danger);  box-shadow: 0 0 6px var(--danger); }

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background .15s;
}
.btn-icon:hover { background: var(--surface2); }

#status-devices {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Status Cards ───────────────────────────────── */
.status-device-group {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;   /* 不被 flex 壓縮，否則群組會擠扁並裁掉工具、導致外層無法捲動 */
}
.status-device-group .device-title {
  font-size: .8rem;
  color: var(--text-dim);
  padding: 6px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.status-device-group .device-title:hover { background: rgba(255,255,255,.04); }
.device-title-text { flex: 1; }
.device-title-count {
  font-size: .68rem; padding: 0 6px; border-radius: 8px;
  background: rgba(59,130,246,.18); color: var(--primary);
  font-weight: 600;
}
.device-title-caret {
  font-size: .7rem; color: var(--text-dim);
  transition: transform .2s;
}
.status-device-group.collapsed .device-title { border-bottom: none; }
.status-device-group.collapsed .device-title-caret { transform: rotate(-90deg); }
.status-device-group.collapsed .device-items { display: none; }

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  gap: 8px;
  border-bottom: 1px solid rgba(71,85,105,.3);
  transition: background .15s;
}
.status-item:last-child { border-bottom: none; }
.status-item:hover { background: rgba(59,130,246,.06); }

.status-item .item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.status-item .item-name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-item .item-meta {
  font-size: .72rem;
  color: var(--text-dim);
}
.status-item { cursor: default; }

.status-item .item-value {
  font-size: 1rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Value type styles */
.item-value.type-register {
  background: #172554;
  color: #60a5fa;
}
.item-value.type-coil-on {
  background: #14532d;
  color: #4ade80;
}
.item-value.type-coil-off {
  background: #450a0a;
  color: #f87171;
}
.item-value.type-error {
  background: #451a03;
  color: #fb923c;
  font-size: .8rem;
}

/* Coil visual indicator */
.coil-led {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.coil-led.on  { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.coil-led.off { background: #6b7280; }

/* No tools message */
.status-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 32px 16px;
  font-size: .9rem;
}

/* Responsive: collapse panel on small screens */
@media (max-width: 768px) {
  .chat-layout { flex-direction: column; }
  #modbus-status-panel {
    width: 100%;
    min-width: unset;
    max-height: 240px;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  #status-devices { height: 195px; }   /* 窄視窗用較小固定高度 */
}

#chat-input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  outline: none;
}
#chat-input:focus { border-color: var(--primary); }

#chat-form button {
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  transition: background .15s;
}
#chat-form button:hover { background: var(--primary-hover); }
#chat-form button:disabled { opacity: .5; cursor: not-allowed; }

/* ── Tools Panel ────────────────────────────────── */
#tools-panel { padding: 16px 24px; overflow-y: auto; }
#ai-settings-panel { padding: 20px 24px; overflow-y: auto; }

.tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.tools-actions {
  display: flex;
  gap: 8px;
}

.tools-filter {
  display: flex;
  gap: 8px;
  flex: 1;
  max-width: 400px;
}

.tools-filter select,
.tools-filter input {
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .9rem;
}
.tools-filter select { min-width: 120px; }
.tools-filter input { flex: 1; }
.tools-filter select:focus,
.tools-filter input:focus { outline: none; border-color: var(--primary); }

#tools-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color .15s, box-shadow .2s, transform .2s;
}
.tool-card:hover {
  border-color: #475569;
  box-shadow: 0 3px 14px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.tool-card h4 { color: var(--primary); margin-bottom: 4px; }
.tool-card .desc { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 8px; }
.tool-card .meta {
  font-size: 0.8rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.tool-card .meta span {
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 4px;
}
.tool-card .actions { display: flex; gap: 8px; }

.perm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.perm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 0;
  background: linear-gradient(145deg, rgba(15,23,42,.86), rgba(30,41,59,.75));
  border: 1px solid #334155;
  border-radius: 10px;
}

.perm-name {
  font-size: .95rem;
  color: var(--text);
}

.perm-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #3b82f6;
  display: inline-block;
  flex-shrink: 0;
}

.badge-cat {
  display: inline-block;
  background: #1e3a5f;
  color: #60a5fa;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: normal;
  vertical-align: middle;
  margin-left: 6px;
}

.badge-proto {
  display: inline-block;
  background: #2d2a4a;
  color: #c4b5fd;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
}

.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

.badge-tag {
  display: inline-block;
  background: #1a2e1a;
  color: #4ade80;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: .72rem;
}

/* ── Buttons ────────────────────────────────────── */
.btn-primary {
  padding: 8px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .9rem;
}

.btn-secondary {
  padding: 8px 16px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .9rem;
}

.btn-danger {
  padding: 6px 12px;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .85rem;
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-sm {
  padding: 6px 12px;
  font-size: .85rem;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

/* ── Modal ──────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }

.modal-content {
  background: linear-gradient(160deg, #1e293b 0%, #16213a 100%);
  border: 1px solid rgba(71,85,105,.8);
  border-radius: 14px;
  padding: 24px;
  width: 580px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(2,6,23,.55), inset 0 1px 0 rgba(148,163,184,.1);
}
.modal-content h3 {
  margin-bottom: 20px;
  font-size: 1.1rem;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(71,85,105,.5);
  color: var(--text);
}

.perm-modal-content {
  width: 620px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(30,41,59,.98), rgba(15,23,42,.95));
  box-shadow: 0 18px 42px rgba(2,6,23,.45), inset 0 1px 0 rgba(148,163,184,.15);
}

.perm-modal-content .modal-actions {
  margin-top: 20px;
}

.perm-modal-content .nl-status {
  margin-top: 10px;
  min-height: 18px;
}

.modal-content label {
  display: block;
  margin-bottom: 14px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
}
.modal-content label small { color: var(--text-dim); font-weight: 400; font-size: .78rem; }

.modal-content input,
.modal-content textarea,
.modal-content select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .95rem;
}

/* 避免 checkbox 被 modal 通用 input 規則拉成整行 */
.modal-content input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus {
  outline: none;
  border-color: var(--primary);
}

.row { display: flex; gap: 12px; }
.row > label { flex: 1; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.nl-status {
  min-height: 20px;
  font-size: .85rem;
  color: var(--text-dim);
  margin-top: 6px;
}

.nl-status.error {
  color: #fca5a5;
}

.nl-status.success {
  color: #86efac;
}

.nl-preview {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 10px;
}

.nl-preview h4 {
  margin-bottom: 8px;
  font-size: .9rem;
}

.nl-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .82rem;
  color: var(--text-dim);
}

/* ── Function Code Help ─────────────────────────── */
.help-toggle {
  color: var(--primary);
  cursor: pointer;
  user-select: none;
}
.help-toggle:hover { text-decoration: underline; }

.fc-help-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 8px;
  animation: fadeIn .2s ease;
}
.fc-help-box.hidden { display: none; }
.fc-help-box h4 { margin-bottom: 10px; font-size: .95rem; }

.fc-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.fc-help-table th {
  text-align: left;
  padding: 6px 8px;
  background: var(--surface2);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.fc-help-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(71,85,105,.3);
  color: var(--text-dim);
}
.fc-help-table tr:hover td { background: rgba(59,130,246,.06); }
.fc-help-table code {
  background: var(--surface2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .8rem;
  color: #60a5fa;
}
.fc-help-write td { color: #fbbf24; }
.fc-help-write code { color: #fbbf24; }

.fc-help-note {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--text-dim);
  line-height: 1.5;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Loading spinner ────────────────────────────── */
.loading::after {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--text-dim);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── AI 思考中氣泡 ───────────────────────────────── */
.ai-thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.ai-thinking-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.ai-thinking-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  opacity: .35;
  animation: ai-dot-bounce 1.3s ease-in-out infinite;
}
.ai-thinking-dots span:nth-child(2) { animation-delay: .18s; }
.ai-thinking-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes ai-dot-bounce {
  0%, 75%, 100% { transform: translateY(0);    opacity: .35; }
  38%           { transform: translateY(-5px); opacity: 1;   }
}
.ai-thinking-label {
  font-size: .82rem;
  color: var(--text-dim);
}
.ai-thinking-timer {
  font-size: .75rem;
  color: var(--text-dim);
  opacity: .6;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}

/* ── 語音輸入按鈕 ────────────────────────────────── */
.btn-mic {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 1.1rem;
  color: var(--text);
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.btn-mic:hover { background: var(--surface); }
.btn-mic.recording { background: #ffe0e0; border-color: #f44; animation: pulse .8s infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }

/* ── 知識庫面板 ──────────────────────────────────── */
/* ── 提示詞管理 ─────────────────────────────────── */
#prompts-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.prompts-layout {
  flex: 1;
  padding: 24px 32px;
  width: 100%;
  height: 0;
  overflow-y: auto;
  box-sizing: border-box;
}
.prompts-layout > .prompt-card {
  max-width: 900px;
}
.prompts-layout h2 { margin: 0 0 6px; font-size: 1.15rem; }
.prompts-layout .hint { color: #8899aa; margin-bottom: 24px; font-size: 0.88rem; }
.prompt-card {
  background: #0d1b2a;
  border: 1px solid #1e3a5a;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.prompt-label { font-weight: 600; font-size: 1rem; color: #cde; }
.prompt-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.prompt-actions .btn-outline { color: #8899aa; border-color: #2a4060; }
.prompt-actions .btn-outline:hover { color: #7eb8f7; border-color: #3a6a9a; background: #0d2035; }
.prompt-modified-badge {
  display: inline-block;
  font-size: 0.72rem;
  background: #102840;
  color: #7eb8f7;
  border: 1px solid #1e4a7a;
  border-radius: 4px;
  padding: 1px 8px;
  margin-bottom: 10px;
}
.prompt-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #060f1a;
  color: #c8ddf0;
  border: 1px solid #1e3a5a;
  border-radius: 6px;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  resize: vertical;
  margin-top: 4px;
}
.prompt-textarea:focus { outline: none; border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }
.prompt-status { font-size: 0.82rem; margin-top: 8px; min-height: 18px; }

.prompt-hint {
  font-size: 0.78rem;
  color: #c8882a;
  background: #1a1200;
  border-left: 3px solid #c8882a;
  padding: 4px 10px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 8px;
}
.prompt-required-kws {
  font-size: 0.78rem;
  color: #7a8fa0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.prompt-required-kws::before { content: '必要關鍵字：'; color: #556677; white-space: nowrap; }
.prompt-required-kws code {
  background: #0d2035;
  color: #7eb8f7;
  border: 1px solid #1e3a5a;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.80em;
}
/* AI 改寫 */
.prompt-ai-preview {
  margin-top: 12px;
  background: #060f1a;
  border: 1px solid #2a4a70;
  border-radius: 8px;
  padding: 14px;
}
.prompt-ai-header { font-weight: 600; color: #7eb8f7; margin-bottom: 8px; font-size: 0.88rem; }
.prompt-ai-changes { font-size: 0.82rem; color: #8899aa; margin-bottom: 8px; background: #0d1b2a; padding: 6px 10px; border-radius: 4px; }
.prompt-ai-missing { font-size: 0.82rem; color: #f44336; margin-bottom: 8px; background: #1a0000; padding: 6px 10px; border-radius: 4px; }
.prompt-ai-actions { display: flex; gap: 8px; margin-top: 10px; }
/* 歷史版本 */
.prompt-history-drawer {
  margin-top: 12px;
  background: #060f1a;
  border: 1px solid #1e3a5a;
  border-radius: 8px;
  padding: 14px;
}
.prompt-history-title { font-size: 0.82rem; color: #7eb8f7; margin-bottom: 10px; font-weight: 600; }
.prompt-history-list { list-style: none; padding: 0; margin: 0; }
.prompt-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #1a2e42;
  font-size: 0.82rem;
}
.prompt-history-item:last-child { border-bottom: none; }
.prompt-history-note { flex: 1; color: #cde; }
.prompt-history-time { color: #556677; font-size: 0.75rem; }
.prompt-history-preview-box {
  margin-top: 10px;
  border-top: 1px solid #1e3a5a;
  padding-top: 10px;
}
.btn-xs {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid;
}
.btn-outline {
  background: transparent;
  border-color: #3a6a9a;
  color: #7eb8f7;
}
.btn-outline:hover { background: #0d2035; }

/* 知識庫頂部分頁列 */
.kb-panel-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.kb-panel-tab {
  padding: 10px 22px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.kb-panel-tab:hover { color: var(--text); }
.kb-panel-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.knowledge-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* 管理頁子分頁列 */
.kb-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  padding: 0 24px;
}
.kb-sub-tab {
  padding: 8px 18px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.kb-sub-tab:hover { color: var(--text); }
.kb-sub-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* 文件管理卡片 */
.kb-manage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color .15s, box-shadow .15s;
}
.kb-manage-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(59,130,246,.1); }
.kb-manage-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.kb-manage-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-manage-name { font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-manage-meta { font-size: .78rem; color: var(--text-dim); }
.kb-manage-desc-label { font-size: .8rem; color: var(--text-dim); margin-bottom: 4px; }
.kb-manage-desc {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: .88rem; resize: vertical; min-height: 64px;
  font-family: inherit;
  transition: border-color .15s;
}
.kb-manage-desc:focus { outline: none; border-color: var(--primary); }
.kb-manage-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.kb-manage-save-status { font-size: .78rem; color: var(--text-dim); }
.kb-manage-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.kb-manage-section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
  flex: 1; border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
/* Q&A 新增表單 */
.kb-qa-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.kb-qa-form-row { display: flex; flex-direction: column; gap: 4px; }
.kb-qa-label { font-size: .78rem; color: var(--text-dim); }
.kb-qa-input {
  padding: 8px 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: .9rem; font-family: inherit;
}
.kb-qa-input:focus { outline: none; border-color: var(--primary); }
.kb-qa-textarea {
  padding: 8px 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: .9rem; font-family: inherit;
  resize: vertical; min-height: 80px; width: 100%; box-sizing: border-box;
}
.kb-qa-textarea:focus { outline: none; border-color: var(--primary); }
/* Q&A 項目卡片 */
.kb-qa-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 8px;
}
.kb-qa-item.editing { border-color: var(--primary); }
.kb-qa-item-header { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.kb-qa-item-q { font-weight: 600; font-size: .9rem; flex: 1; }
.kb-qa-item-meta { font-size: .74rem; color: var(--text-dim); margin-top: 2px; }
.kb-qa-item-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.kb-qa-item-a { font-size: .88rem; color: var(--text-dim); white-space: pre-wrap; line-height: 1.5; }
.kb-qa-edit-area { display: none; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ── RAG 向量設定 ───────────────────────────────────────────── */
.rag-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) { .rag-settings-grid { grid-template-columns: 1fr; } }
.rag-setting-item { display: flex; flex-direction: column; gap: 4px; }
.rag-setting-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
}
.rag-setting-range { font-weight: 400; color: var(--text-dim); font-size: .78rem; }
.rag-setting-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 10px;
  font-size: .88rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s;
}
.rag-setting-input:focus { outline: none; border-color: var(--primary); }
select.rag-setting-input { cursor: pointer; }
.knowledge-upload-area {
  width: 360px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.knowledge-ask-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.knowledge-ask-area .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.knowledge-ask-area form {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.knowledge-ask-area form input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  outline: none;
}
.knowledge-ask-area form input:focus { border-color: var(--primary); }
.knowledge-ask-area form button {
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  transition: background .15s;
}
.knowledge-ask-area form button:hover { background: var(--primary-hover); }
.upload-box {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  background: rgba(59,130,246,.04);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.upload-box:hover { border-color: var(--primary); background: rgba(59,130,246,.08); }
.upload-box.dragover { border-color: var(--primary); background: rgba(59,130,246,.12); }
.upload-box.is-uploading {
  border-color: #22c55e;
  background: rgba(34,197,94,.08);
  cursor: wait;
}
.upload-box span { font-size: .92rem; color: var(--text-dim); }
.upload-label {
  display: inline-block; margin: 10px 0 4px; cursor: pointer;
  padding: 7px 20px; background: var(--primary); color: #fff;
  border-radius: 999px; font-size: .88rem; font-weight: 600;
  transition: background .15s;
}
.upload-label:hover { background: var(--primary-hover); }
.upload-hint { font-size: .78rem; color: var(--text-dim); margin: 0; }
/* 文件清單標題 */
.kb-section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
  margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.kb-doc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 7px;
  transition: border-color .15s, box-shadow .15s;
}
.kb-doc-item:hover { border-color: var(--primary); box-shadow: 0 1px 8px rgba(59,130,246,.12); }
.kb-doc-item.kb-doc-item-new {
  border-color: #22c55e;
  background: rgba(34,197,94,.08);
  box-shadow: 0 1px 10px rgba(34,197,94,.12);
}
.kb-doc-icon { font-size: 1.1rem; flex-shrink: 0; }
.kb-doc-info { flex: 1; min-width: 0; }
.kb-doc-name { font-size: .88rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-doc-meta { font-size: .74rem; color: var(--text-dim); margin-top: 1px; }
.kb-doc-badge {
  flex-shrink: 0;
  border: 1px solid rgba(34,197,94,.45);
  border-radius: 999px;
  color: #86efac;
  background: rgba(34,197,94,.1);
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 7px;
}
.nl-status.success { color: #2e7d32; }
.hint.error { color: #c62828; }
.hint.ok { color: #2e7d32; }

/* ── AI 教練面板 ──────────────────────────────────── */
.coach-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}
.coach-steps-area {
  width: 340px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid var(--border);
}
.coach-flow-selector { display: flex; flex-direction: column; gap: 8px; }
.coach-flow-selector select { padding: 6px 8px; }
#coach-form {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
#coach-form input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  outline: none;
}
#coach-form input:focus { border-color: var(--primary); }
#coach-form button {
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  transition: background .15s;
}
#coach-form button:hover { background: var(--primary-hover); }
.coach-step {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 4px;
}
.coach-step.current { border-color: var(--primary); background: #1a3a2a; }
.coach-step.passed { border-color: #4caf50; background: #1a2e1a; }
.coach-step.failed { border-color: #f44336; background: #2e1a1a; }
.step-icon { font-size: 1.1rem; }
.step-title { font-weight: 600; font-size: .95rem; color: var(--text); }
.step-prompt { font-size: .85rem; color: #cbd5e1; margin-top: 2px; }
.coach-step.failed .step-title { color: #fca5a5; }
.coach-step.failed .step-prompt { color: #fca5a5; opacity: .85; }
.btn-verify-step {
  margin-top: 8px; padding: 7px 14px; border-radius: 6px;
  background: var(--primary); color: #fff; border: none;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  align-self: flex-start; transition: background .2s;
}
.btn-verify-step:hover { background: #059669; }
.coach-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.coach-chat-area .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coach-chat-area .msg.assistant { max-width: 100%; }
.knowledge-ask-area .msg.assistant { max-width: 100%; }
.msg.system {
  background: #2a2500; border-left: 3px solid #ffc107;
  color: #ffe082;
  padding: 8px 12px; margin: 4px 0; border-radius: 4px;
  font-size: .85rem; font-weight: 500;
}

/* ── AI 預警面板 ──────────────────────────────────── */
.alert-layout { display: flex; flex-direction: column; gap: 16px; }
.alert-subtabs {
  display: flex;
  gap: 8px;
}
.alert-subtab-btn {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .9rem;
}
.alert-subtab-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.alert-subpanel { display: none; }
.alert-subpanel.active { display: block; }
.alert-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.alert-switch { display: flex; align-items: center; gap: 10px; }
.alert-rules-box {
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(160deg, rgba(30,41,59,.94), rgba(15,23,42,.92));
  box-shadow: inset 0 1px 0 rgba(148,163,184,.15), 0 10px 25px rgba(2, 6, 23, .35);
}
.rules-list-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.rules-list-title {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.alert-rules-box h3 {
  margin-bottom: 12px;
  font-size: 1rem;
  letter-spacing: .02em;
}
.alert-rule-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.ar-col-span-2 {
  grid-column: span 2;
}
.ar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ar-field label {
  font-size: .76rem;
  color: #94a3b8;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ar-pattern-help {
  margin: 4px 0 0;
  font-size: .78rem;
  color: #93c5fd;
}
.ar-pattern-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ar-pattern-chip {
  border: 1px solid #334155;
  background: rgba(30,41,59,.7);
  color: #cbd5e1;
  border-radius: 999px;
  font-size: .75rem;
  padding: 4px 10px;
  cursor: pointer;
}
.ar-pattern-chip:hover {
  border-color: #38bdf8;
  color: #e0f2fe;
}
.alert-rule-form input,
.alert-rule-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #334155;
  border-radius: var(--radius);
  background: rgba(15,23,42,.88);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.alert-rule-form input:focus,
.alert-rule-form select:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
  transform: translateY(-1px);
}
.ar-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.ar-enabled {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: #cbd5e1;
  background: rgba(15,23,42,.8);
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 6px 12px;
}
.ar-action-buttons {
  display: flex;
  gap: 8px;
}
.ar-guide {
  border: 1px dashed #334155;
  background: rgba(15,23,42,.6);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.ar-condition-help {
  margin: 0 0 8px;
  font-size: .86rem;
  color: #c7d2fe;
}
.ar-example-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ar-example-title {
  font-size: .8rem;
  color: #94a3b8;
}
.ar-example-item {
  font-size: .78rem;
  color: #dbeafe;
  background: rgba(12, 74, 110, .24);
  border: 1px solid rgba(14, 116, 144, .35);
  border-radius: 999px;
  padding: 3px 10px;
}
.alert-rule-item {
  border: 1px solid #334155;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(15,23,42,.86), rgba(30,41,59,.78));
  padding: 12px;
  margin-bottom: 8px;
}
.alert-rule-item.disabled { opacity: .55; }
.alert-rule-main {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.alert-level-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.alert-level-pill.level-error {
  color: #fecaca;
  background: rgba(127, 29, 29, .4);
  border-color: #7f1d1d;
}
.alert-level-pill.level-warning {
  color: #fde68a;
  background: rgba(120, 53, 15, .35);
  border-color: #92400e;
}
.alert-level-pill.level-info {
  color: #bfdbfe;
  background: rgba(30, 58, 138, .35);
  border-color: #1d4ed8;
}
.alert-rule-id {
  font-size: .74rem;
  color: #94a3b8;
  background: rgba(15,23,42,.9);
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 2px 8px;
}
.alert-rule-pattern {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  color: #7dd3fc;
  background: rgba(12, 74, 110, .18);
  border: 1px solid rgba(14, 116, 144, .4);
  border-radius: 6px;
  padding: 2px 8px;
}
.alert-rule-cond {
  font-size: .8rem;
  color: #cbd5e1;
  background: rgba(71,85,105,.2);
  border-radius: 6px;
  padding: 2px 8px;
}
.alert-rule-msg {
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 10px;
}
.alert-rule-form input:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: rgba(30,41,59,.55);
}
.alert-rule-actions {
  display: flex;
  gap: 8px;
}
.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-label .toggle-slider {
  display: inline-block; width: 40px; height: 22px;
  background: #ccc; border-radius: 11px; position: relative;
  transition: background .2s;
}
.toggle-label input { display: none; }
.toggle-label input:checked + .toggle-slider { background: var(--primary); }
.toggle-label .toggle-slider::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; background: white;
  border-radius: 50%; top: 2px; left: 2px; transition: left .2s;
}
.toggle-label input:checked + .toggle-slider::after { left: 20px; }
.alert-status-text { font-size: .85rem; color: var(--text-dim); }
.alert-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alert-active-box, .alert-history-box {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; background: var(--surface);
  max-height: calc(100vh - 280px); overflow-y: auto;
}

/* AI 智慧分析 */
.ai-analysis-box {
  margin-top: 18px;
  border: 1px solid #2563eb44;
  border-radius: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}
.ai-analysis-box h3 { color: #93c5fd; margin: 0 0 12px; font-size: 1rem; }
.ai-loading { font-size: .8rem; color: #7dd3fc; animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-analysis-item {
  border-radius: 8px; padding: 12px; margin-bottom: 10px;
  border-left: 4px solid #3b82f6;
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
}
.ai-item-triggered { border-left-color: #f97316; background: rgba(249,115,22,.08); }
.ai-item-approaching { border-left-color: #eab308; background: rgba(234,179,8,.07); }
.ai-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ai-tool-name { font-weight: 600; font-size: .9rem; color: #bae6fd; }
.ai-trend { font-size: .82rem; color: #94a3b8; margin-left: auto; }
.ai-badge { font-size: .75rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; }
.ai-badge-triggered { background: #7c3aed22; color: #f97316; border: 1px solid #f97316; }
.ai-badge-approaching { background: #78350f22; color: #fbbf24; border: 1px solid #fbbf24; }
.ai-message { font-size: .88rem; color: #cbd5e1; margin: 4px 0; }
.ai-approaching { font-size: .82rem; color: #fde68a; margin: 3px 0; }
.ai-trend-detail { font-size: .78rem; color: #64748b; margin-top: 4px; font-family: monospace; }
.ai-comment {
  margin-top: 8px; padding: 7px 10px; border-radius: 6px;
  background: rgba(56,189,248,.1); border-left: 3px solid #38bdf8;
  font-size: .87rem; color: #e0f2fe; line-height: 1.5;
}
.hint.ok { color: #4ade80; font-size: .9rem; padding: 10px 0; }
.hint.error { color: #f87171; font-size: .9rem; padding: 10px 0; }

/* ── 趨勢記錄面板 ── */
.logger-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  padding: 12px 0;
}
@media (max-width: 800px) { .logger-layout { grid-template-columns: 1fr; } }

.logger-config-box, .logger-view-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--surface);
}
.logger-config-box h3, .logger-view-box h3 { color: var(--text); font-size: .95rem; margin: 0 0 10px; }
.logger-interval-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .88rem; color: var(--text-dim); }
.logger-config-status { min-height: 20px; font-size: .82rem; margin-bottom: 6px; color: var(--text-dim); }
.logger-config-status.ok { color: #4ade80; }
.logger-config-status.error { color: #f87171; }
.logger-hint { font-size: .82rem; color: var(--text-dim); margin: 6px 0; }
.logger-tool-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }
.logger-tool-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 6px; background: var(--surface2); cursor: pointer;
  font-size: .85rem;
}
.logger-tool-item:hover { background: #243447; }
.logger-tool-item input[type="checkbox"] { width: auto; flex-shrink: 0; }
.logger-tool-name { font-weight: 600; color: var(--text); }
.logger-tool-desc { color: var(--text-dim); font-size: .78rem; margin-left: auto; }
.logger-select-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.logger-select-row select { flex: 1; min-width: 160px; }
.btn-sm { padding: 5px 10px; font-size: .8rem; }
.btn-danger { background: #b91c1c; color: white; border: none; border-radius: 6px; cursor: pointer; }
.btn-danger:hover { background: #991b1b; }
.logger-history-box { max-height: 320px; overflow-y: auto; }
.logger-predict-box { margin-top: 14px; }
.predict-summary {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(56,189,248,.08); border: 1px solid #38bdf833;
  font-size: .85rem; color: #93c5fd; margin-bottom: 10px;
}
.logger-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.logger-table th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.logger-table td { padding: 5px 10px; border-bottom: 1px solid #ffffff0a; color: var(--text); }
.forecast-row td { color: #7dd3fc; }
.alert-item {
  border-radius: 8px; padding: 12px; margin-bottom: 10px;
  border-left: 4px solid #ccc;
  color: #1f2937;
}
.alert-item.level-error {
  border-left-color: #f44336;
  background: #fff1f2;
  color: #7f1d1d;
}
.alert-item.level-warning {
  border-left-color: #ff9800;
  background: #fff7d6;
  color: #7c2d12;
}
.alert-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.alert-level-badge { font-size: .8rem; font-weight: 600; }
.alert-tool { font-size: .85rem; color: #334155; }
.alert-message { font-size: .9rem; line-height: 1.5; }
.alert-suggestion { margin-top: 8px; }
.alert-suggestion summary { font-size: .8rem; cursor: pointer; color: #1d4ed8; }
.alert-suggestion pre { margin: 6px 0 0; font-size: .8rem; white-space: pre-wrap; color: #334155; }
.badge {
  display: inline-block; min-width: 20px; padding: 0 5px; height: 20px;
  background: #f44336; color: white; border-radius: 10px;
  font-size: .75rem; line-height: 20px; text-align: center; margin-left: 4px;
}

/* 預警橫幅（頁面頂部） */
.alert-banner {
  width: 100%; padding: 10px 20px; font-size: .92rem; font-weight: 600;
  text-align: center; cursor: pointer; box-sizing: border-box;
  border-bottom: 2px solid transparent;
  transition: background .3s;
}
.alert-banner.banner-error {
  background: #ffebee; color: #b71c1c; border-color: #ef9a9a;
}
.alert-banner.banner-warning {
  background: #fff8e1; color: #e65100; border-color: #ffe082;
}
.alert-banner:hover { filter: brightness(.95); }

/* 分頁按鈕上的異常數字徽章 */
.alert-nav-badge {
  display: inline-block; min-width: 18px; padding: 0 4px; height: 18px;
  background: #f44336; color: white; border-radius: 9px;
  font-size: .7rem; line-height: 18px; text-align: center;
  margin-left: 5px; vertical-align: middle;
}
.alert-hist-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px; border-bottom: 1px solid var(--border); font-size: .82rem;
}
.alert-hist-item.level-error { color: #b71c1c; }
.alert-hist-item.level-warning { color: #e65100; }
.alert-time { white-space: nowrap; color: var(--text-dim); flex-shrink: 0; }
.alert-msg { flex: 1; }

@media (max-width: 1100px) {
  .alert-rule-form {
    grid-template-columns: 1fr;
  }
  .ar-col-span-2 {
    grid-column: span 1;
  }
  .ar-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ar-action-buttons {
    width: 100%;
  }
  .ar-action-buttons button {
    flex: 1;
  }
  .alert-panels {
    grid-template-columns: 1fr;
  }
}

/* ── 面板 padding ────────────────────────────────── */
#alert-panel { padding: 20px; overflow-y: auto; }

/* ── Modal ───────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 999;
}
.modal-box {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 14px; max-height: 90vh; display: flex; flex-direction: column;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(74,222,128,.06) 0%, transparent 60%);
}
.modal-header h3 {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.modal-header h3::before {
  content: ''; display: inline-block; width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--primary) 0%, #059669 100%);
  border-radius: 2px;
}
.modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }

/* ── 教練流程管理 ─────────────────────────────────── */
.coach-manage-tabs {
  display: flex; gap: 0; margin-bottom: 18px;
  border-bottom: 2px solid var(--border);
}
.coach-manage-tab {
  padding: 8px 18px; font-size: .88rem; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.coach-manage-tab:hover { color: var(--text); }
.coach-manage-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.coach-manage-panel { display: none; }
.coach-manage-panel.active { display: block; }
.coach-manage-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center;
  background: rgba(0,0,0,.15); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px;
}
.coach-manage-toolbar select { flex: 1; min-width: 180px; }
.coach-manage-fields-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
}
.coach-manage-field { display: flex; flex-direction: column; gap: 5px; }
.coach-manage-field label {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim);
}
.coach-manage-steps-label {
  font-size: .82rem; font-weight: 700; color: var(--text-dim);
  letter-spacing: .05em; text-transform: uppercase;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
/* 步驟卡片 */
.step-editor-row {
  display: flex; flex-direction: column; margin-bottom: 10px;
  background: #16243a; padding: 0;
  border-radius: 10px;
  border: 1px solid #2a3f5a;
  border-left: 3px solid var(--primary);
  overflow: hidden;
  transition: border-left-color .2s, box-shadow .2s;
}
.step-editor-row:hover {
  box-shadow: 0 4px 20px rgba(59,130,246,.18);
  border-color: #3b5a80;
  border-left-color: var(--primary);
}
.step-editor-header {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  background: #1a2e47;
  border-bottom: 1px solid #1e3352;
}
.step-editor-num {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(59,130,246,.4);
}
.step-editor-title {
  flex: 1; min-width: 0; font-weight: 600; font-size: .93rem;
  background: transparent; border-color: transparent; color: var(--text);
}
.step-editor-title:focus { background: #0f1e30; border-color: var(--primary); border-radius: 6px; }
.step-editor-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.step-editor-prompt {
  width: 100%; box-sizing: border-box; font-size: .88rem; resize: vertical; min-height: 52px;
  background: #0f172a; border-color: #1e3352; color: var(--text);
}
/* 感測器驗證區 */
.step-checks-area {
  background: #0d1929;
  border-radius: 6px; padding: 8px 10px;
  border: 1px solid #1e3352;
}
.step-checks-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 7px; }
.step-check-row {
  display: flex; flex-direction: column; gap: 5px;
  background: #0d1e30; border-radius: 6px; padding: 8px 10px;
  border: 1px solid #1e3a5a; font-size: .82rem;
}
.step-check-top { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.step-check-bottom { display: flex; gap: 5px; }
.step-check-row input, .step-check-row select { font-size: .82rem; padding: 3px 7px; }
.step-check-pattern { flex: 2; min-width: 120px; }
.step-check-ctype { flex: 1.5; min-width: 130px; }
.step-check-val { flex: 0.7; min-width: 64px; }
.step-check-pass { flex: 1; min-width: 100px; }
.step-check-fail { flex: 1; min-width: 100px; }
.step-check-del { flex-shrink: 0; font-size: .75rem; padding: 2px 7px; margin-left: auto; }
/* 底部操作列 */
.coach-action-bar {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.coach-action-bar .coach-manage-status {
  font-size: .83rem; color: #4ade80; margin-left: 4px;
}
.ai-flow-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px;
  background: var(--surface);
}
.ai-flow-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ai-flow-header b { color: var(--text); font-size: .95rem; }
.ai-flow-header code { font-size: .8rem; color: #94a3b8; background: #1e293b; padding: 2px 6px; border-radius: 4px; }
.ai-flow-card ol { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--text-dim); }

/* ── 統計卡片（老師儀表板） ──────────────────────────────────────── */
.stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 80px;
  text-align: center;
}
.stats-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.stats-label {
  font-size: .75rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ── 學生管理頁面 ────────────────────────────────────────────────── */
.students-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 20px 24px;
  gap: 0;
}
.students-subtabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  flex-shrink: 0;
}
.students-subtab {
  padding: 8px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: .9rem;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.students-subtab:hover { color: var(--text); }
.students-subtab.active { color: var(--primary); border-bottom-color: var(--primary); }
.students-subpanel { display: none; flex: 1; overflow-y: auto; }
.students-subpanel.active { display: block; }

/* ── 通用深色輸入框 ── */
.form-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: .9rem;
  padding: 8px 12px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: var(--primary); }
.form-input::placeholder { color: var(--text-dim); }

/* ── 工具授權子 tab（依學生／批次） ── */
.perm-manage-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.perm-manage-tab {
  padding: 7px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: .88rem;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.perm-manage-tab:hover { color: var(--text); }
.perm-manage-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.students-accounts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.students-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.students-table th, .students-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.students-table td:nth-child(2) { white-space: normal; }
.students-table th { color: var(--text-dim); font-weight: 500; font-size: .82rem; }

/* ── 工作站 ─────────────────────────────────────────────────────────── */
.station-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.station-form-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px 12px;
  align-items: center;
  font-size: .9rem;
}
.station-form-grid label { color: var(--text-dim); }
.station-form-grid input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font-size: .9rem;
  width: 100%;
}
.station-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .78rem;
  background: #1e3a5f;
  color: #7dd3fc;
  font-weight: 500;
}
.station-badge.unassigned { background: var(--surface2); color: var(--text-dim); }
.activity-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.activity-filters select { padding: 6px 8px; min-width: 140px; }
.activity-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.activity-table th, .activity-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.activity-table th { color: var(--text-dim); font-weight: 500; font-size: .8rem; }

/* ── 工具授權頁重設計 ────────────────────────────────────────────── */
/* 左側學員卡片 */
.perm-student-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.perm-student-card:hover { background: var(--surface); }
.perm-student-card.active {
  background: #0f2d1a;
  border-color: var(--primary);
}
.perm-student-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.perm-student-card.active .perm-student-avatar { background: #4ade80; color: #000; }
.perm-student-name { font-size: .88rem; font-weight: 500; }

/* 右側頂部 header */
.perm-tool-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border-radius: 8px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
.perm-tool-header-label { font-size: .78rem; color: var(--text-dim); }
.perm-tool-header-name { font-size: .95rem; font-weight: 600; color: #4ade80; flex: 1; }
.perm-tool-count { font-size: .8rem; color: var(--text-dim); background: var(--bg); padding: 2px 8px; border-radius: 12px; border: 1px solid var(--border); }

/* 分類區塊 */
.perm-cat-section {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.perm-cat-header {
  background: #1a1a2e;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.perm-cat-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.perm-cat-name { font-size: .88rem; font-weight: 600; color: var(--text); flex: 1; }
.perm-cat-badge {
  font-size: .75rem;
  background: var(--primary);
  color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.perm-tool-items { padding: 4px 0; }

/* 工具列 */
.perm-tool-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid transparent;
}
.perm-tool-row:last-child { border-bottom: none; }
.perm-tool-row:hover { background: var(--surface); }
.perm-tool-row.is-allowed { background: #0d1f12; }
.perm-tool-row.is-allowed:hover { background: #122519; }
.perm-tool-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.perm-tool-info { display: flex; flex-direction: column; gap: 2px; }
.perm-tool-name { font-size: .875rem; font-weight: 500; font-family: monospace; }
.perm-tool-desc { font-size: .78rem; color: var(--text-dim); line-height: 1.3; }

/* ── 工具授權全高佈局 ────────────────────────────────────────────── */
/* permissions subtab 鋪滿剩餘高度 */
#students-sub-permissions.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#students-sub-permissions .coach-manage-tabs { flex-shrink: 0; }
#students-sub-permissions .coach-manage-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 左右分欄（學員 + 工具列） */
.perm-split-area {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.perm-left-col {
  width: 168px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  overflow-y: auto;
}
.perm-col-label {
  font-size: .78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.perm-right-col {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}

/* 底部 action bar */
.perm-action-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

/* ── 批次授權 UI ─────────────────────────────────────────────────── */
.batch-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.batch-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.batch-col-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.batch-arrow {
  font-size: 1.4rem;
  color: var(--text-dim);
  padding-top: 30px;
  flex-shrink: 0;
}
.batch-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
}
.batch-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  user-select: none;
}
.batch-chip:hover { background: var(--surface); }
.batch-chip.selected {
  background: #0f2d1a;
  border-color: var(--primary);
}
.batch-chip-dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.batch-chip.selected .batch-chip-dot {
  background: var(--primary);
  border-color: var(--primary);
}
.batch-chip.selected .batch-chip-dot::after {
  content: '✓';
  font-size: .65rem;
  color: #fff;
  font-weight: 700;
}
.batch-chip-name { font-size: .9rem; flex: 1; }
.batch-chip-count { font-size: .75rem; color: var(--text-dim); }

/* 批次授權學員卡片 */
.batch-student-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
}
.batch-stu-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  user-select: none;
}
.batch-stu-card:hover { background: var(--surface); }
.batch-stu-card.selected {
  background: #0f2d1a;
  border-color: var(--primary);
}
.batch-stu-card .perm-student-avatar {
  width: 28px; height: 28px; font-size: .78rem;
}
.batch-stu-card.selected .perm-student-avatar { background: #4ade80; color: #000; }
.batch-stu-card-name { font-size: .88rem; flex: 1; }

/* ── AI 設定檔管理 ─────────────────────────────────── */

.aip-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

/* ── 頁首 ── */
.be-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.be-page-header-left { display: flex; align-items: center; gap: 14px; }
.be-page-header-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.be-page-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 3px; }
.be-page-sub   { font-size: .78rem; color: var(--text-dim); }

/* ── 後端卡片 grid ── */
#ai-profiles-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

#be-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

/* ── 後端卡片 (be-card) ── */
.be-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--be-color, var(--border));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s, transform .15s;
}
.be-card:hover:not(.be-card-add) { box-shadow: 0 6px 24px rgba(0,0,0,.4); transform: translateY(-2px); }
.be-card--active { background: linear-gradient(160deg, #071a0f 0%, var(--surface) 55%); }

.be-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}
.be-card-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.be-card-title  { flex: 1; min-width: 0; }
.be-card-model  { font-size: .97rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-card-prov-label { font-size: .73rem; color: var(--text-dim); margin-top: 2px; }
.be-active-pill {
  font-size: .68rem; font-weight: 700;
  color: var(--primary);
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.3);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.be-card-meta {
  margin: 0 16px 12px;
  background: rgba(0,0,0,.22);
  border-radius: 7px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.be-meta-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.be-meta-icon { font-size: .82rem; flex-shrink: 0; opacity: .65; }
.be-meta-val  { font-size: .79rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; }
.be-meta-dot  { color: var(--text-dim); flex-shrink: 0; }
.be-cap-row   { display: flex; gap: 5px; flex-wrap: wrap; padding-top: 2px; }
.be-cap-badge {
  font-size: .69rem; font-weight: 600;
  border-radius: 5px;
  padding: 2px 7px;
  line-height: 1.5;
}
.be-cap-tools  { background: rgba(74,222,128,.1);  color: #86efac; border: 1px solid rgba(74,222,128,.25); }
.be-cap-vision { background: rgba(167,139,250,.1); color: #c4b5fd; border: 1px solid rgba(167,139,250,.25); }

.be-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.be-btn-test {
  flex: 1;
  background: rgba(74,222,128,.07);
  color: var(--primary);
  border: 1px solid rgba(74,222,128,.28);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.be-btn-test:hover { background: rgba(74,222,128,.16); border-color: var(--primary); }
.be-btn-test:disabled { opacity: .4; cursor: not-allowed; }

.be-foot-actions { display: flex; align-items: center; gap: 6px; }
.be-btn-activate {
  background: transparent;
  border: 1px solid rgba(74,222,128,.38);
  color: var(--primary);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .77rem;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.be-btn-activate:hover { background: rgba(74,222,128,.1); }
.be-btn-edit {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .77rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.be-btn-edit:hover { border-color: var(--text-dim); color: var(--text); }
.be-btn-del {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: .85rem; cursor: pointer;
  transition: all .15s;
}
.be-btn-del:hover { border-color: rgba(248,113,113,.38); color: #f87171; background: rgba(248,113,113,.07); }

.be-card-inline-result {
  margin: 0 16px 14px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .8rem;
  word-break: break-all;
}
.be-card-inline-result.ok    { background: rgba(74,222,128,.08);  color: #4ade80; border: 1px solid rgba(74,222,128,.25); }
.be-card-inline-result.error { background: rgba(248,113,113,.08); color: #f87171; border: 1px solid rgba(248,113,113,.25); }

/* 虛線新增卡片 */
.be-card-add {
  border: 2px dashed var(--border) !important;
  border-top: 2px dashed var(--border) !important;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  min-height: 140px;
  cursor: pointer;
  transition: all .15s;
}
.be-card-add:hover { border-color: var(--primary) !important; background: rgba(74,222,128,.04); }
.be-card-add-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-dim); font-size: .88rem; }
.be-card-add-icon  { font-size: 1.6rem; }
.be-card-add:hover .be-card-add-inner { color: var(--primary); }

/* ── 表單 ── */
.be-form-wrap { margin-bottom: 22px; max-width: 700px; }
.be-form-card {
  background: var(--surface);
  border: 1px solid rgba(74,222,128,.35);
  border-radius: 10px;
  overflow: hidden;
}
.be-form-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: rgba(74,222,128,.06);
  border-bottom: 1px solid var(--border);
}
.be-form-title-text { font-weight: 700; font-size: .95rem; }
.be-form-body { padding: 20px; }

.be-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.be-form-span2 { grid-column: 1 / -1; }

.be-toggles-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.be-toggle-label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.be-toggle-label:hover { border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.04); }
.be-toggle-label input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.be-toggle-text { font-size: .84rem; font-weight: 600; display: block; }
.be-toggle-sub  { font-size: .71rem; color: var(--text-dim); display: block; margin-top: 2px; }

/* ── Section 卡片 ── */
.be-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.be-section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.be-section-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(74,222,128,.09);
  border: 1px solid rgba(74,222,128,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
}
.be-section-title { font-size: .88rem; font-weight: 700; }

/* ── 快速新增 ── */
.be-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.be-quick-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.15);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.be-quick-card:hover { border-color: var(--be-color, var(--primary)); background: rgba(74,222,128,.04); }
.be-quick-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.be-quick-name { font-size: .81rem; font-weight: 700; }
.be-quick-type { font-size: .69rem; color: var(--text-dim); margin-top: 1px; }

.aip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px 14px;
  transition: border-color .15s, box-shadow .2s, transform .2s;
}
.aip-card:hover:not(.aip-card--active) {
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transform: translateY(-1px);
}
.aip-card--active {
  border-left-color: var(--primary);
  background: #071a0f;
}

.aip-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}
.aip-card-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aip-card-name { font-size: 1.05rem; font-weight: 700; }
.aip-card-provider { font-size: .82rem; color: var(--text-dim); white-space: nowrap; }

.aip-card-tested { font-size: .78rem; color: var(--text-dim); margin-bottom: 12px; }

.aip-card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.aip-cf { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.aip-cf span:first-child {
  font-size: .75rem;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.aip-cf code, .aip-cf span:last-child {
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aip-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.aip-test-btn {
  flex: 1;
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.aip-test-btn:hover { opacity: .85; }
.aip-test-btn:disabled { opacity: .5; cursor: not-allowed; }

.aip-btn-act {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.aip-btn-act--on { opacity: .5; cursor: default; }
.aip-btn-act:not(.aip-btn-act--on):hover { background: #0a2a14; }

.aip-btn-del {
  background: transparent;
  border: 1px solid #7f1d1d;
  color: #f87171;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .82rem;
  cursor: pointer;
}
.aip-btn-del:hover { background: #2a0a0a; }

.aip-card-inline-result {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .84rem;
  word-break: break-all;
}
.aip-card-inline-result.ok    { background: #0a2a14; color: #4ade80; border: 1px solid #15803d; }
.aip-card-inline-result.error { background: #2a0a0a; color: #f87171; border: 1px solid #b91c1c; }

/* ── 虛線新增卡片 ── */
.aip-card-add {
  border: 2px dashed var(--border) !important;
  border-left: 2px dashed var(--border) !important;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.aip-card-add:hover { border-color: var(--primary) !important; background: #071a0f; }
.aip-card-add-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: .9rem;
  user-select: none;
}
.aip-card-add-icon { font-size: 1.8rem; }
.aip-card-add:hover .aip-card-add-inner,
.aip-card-add:hover .aip-card-add-icon { color: var(--primary); }

/* ── 新增/編輯表單 ── */
.aip-form-wrap { margin-bottom: 20px; max-width: 720px; }
.aip-form-card {
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 10px;
  overflow: hidden;
}
.aip-form-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #0a2010;
  border-bottom: 1px solid var(--border);
}
.aip-form-card-title { font-weight: 700; font-size: .95rem; }
.aip-form-body { padding: 20px; }

/* 共用表單欄位 */
.ai-section-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 7px;
  margin-bottom: 14px;
}
.ai-field { margin-bottom: 14px; }
.ai-field label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  margin-bottom: 5px;
}
.ai-field input {
  width: 100%; box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: .9rem;
  padding: 8px 12px;
  outline: none;
  transition: border-color .15s;
}
.ai-field input:focus { border-color: var(--primary); }
.ai-field input::placeholder { color: var(--text-dim); }
.ai-field .hint { margin: 5px 0 0; }

.ai-perf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ai-perf-row .ai-field { margin-bottom: 0; }

/* 數字輸入帶單位後綴 */
.perf-input-wrap { position: relative; }
.perf-input-wrap input { padding-right: 30px; }
.perf-input-unit {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: .75rem; color: var(--text-dim); pointer-events: none;
}

/* Thinking 模式欄位 */
.perf-thinking-field { margin-top: 14px; }
.perf-label-note {
  font-size: .72rem; color: var(--text-dim);
  font-weight: 400; margin-left: 6px;
}

/* 按鈕組 */
.tm-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.tm-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 6px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  color: var(--text-dim);
  text-align: center;
  width: 100%;
}
.tm-btn:hover { border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.05); color: var(--text); }
.tm-btn.tm-active {
  border-color: var(--primary);
  background: rgba(74,222,128,.1);
  color: var(--primary);
}
.tm-icon { font-size: 1.15rem; line-height: 1; }
.tm-name { font-size: .8rem; font-weight: 700; }
.tm-desc { font-size: .67rem; color: var(--text-dim); }
.tm-btn.tm-active .tm-desc { color: rgba(74,222,128,.65); }

.ai-settings-actions {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}
.ai-test-result {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .88rem;
  word-break: break-all;
}
.ai-test-result.ok    { background: #0a2a14; color: #4ade80; border: 1px solid #15803d; }
.ai-test-result.error { background: #2a0a0a; color: #f87171; border: 1px solid #b91c1c; }

/* ── Badge ── */
.aip-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 8px;
  line-height: 1.4;
}
.aip-tag-active { background: var(--primary); color: #000; }
.aip-tag-local  { background: #374151; color: #d1d5db; }
.aip-tag-cloud  { background: #1e3a8a; color: #93c5fd; }

/* ── Provider 預設快選 ── */
.aip-providers-section { margin-top: 10px; }
.aip-providers-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.aip-providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.aip-provider-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.aip-provider-card:hover { border-color: var(--primary); background: #071a0f; }
.aip-provider-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.aip-provider-name {
  font-weight: 600;
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.aip-provider-desc { font-size: .78rem; color: var(--text-dim); margin-bottom: 5px; }
.aip-provider-info code {
  font-size: .72rem;
  color: var(--primary);
  word-break: break-all;
  background: none;
}

@media (max-width: 640px) {
  .aip-card-fields    { grid-template-columns: 1fr; }
  .ai-perf-row        { grid-template-columns: repeat(2, 1fr); }
  .aip-page-header    { flex-direction: column; }
  .aip-providers-grid { grid-template-columns: 1fr; }
  .be-form-grid       { grid-template-columns: 1fr; }
  .be-form-span2      { grid-column: 1; }
  .be-toggles-row     { grid-template-columns: 1fr; }
  .be-quick-grid      { grid-template-columns: repeat(2, 1fr); }
}

/* ── 建立學生帳號內嵌表單 ── */
.student-create-form {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px 14px;
  margin-bottom: 16px;
}
.student-create-form-title {
  margin: 0 0 14px;
  font-size: .95rem;
  color: var(--text);
}
.student-create-form-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.student-create-form-fields .form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 180px;
}
.student-create-form-fields label {
  font-size: .82rem;
  color: var(--text-dim);
}
.student-create-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.student-create-msg { font-size: .85rem; }
.student-create-msg.ok    { color: #4ade80; }
.student-create-msg.error { color: #f87171; }

/* ── 自訂確認 Modal ── */
.custom-confirm-box { width: 380px; max-width: 92vw; }
#custom-confirm-modal { z-index: 10001; }
.confirm-modal-msg {
  margin: 0;
  line-height: 1.7;
  color: var(--text);
  font-size: .95rem;
  white-space: pre-wrap;
}
.confirm-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}

/* ── Toast 通知 ── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.toast {
  padding: 11px 18px;
  border-radius: 8px;
  font-size: .9rem;
  max-width: 340px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s;
  pointer-events: auto;
}
.toast.toast-show { opacity: 1; transform: translateY(0); }
.toast-error   { background: #7f1d1d; color: #fca5a5; border: 1px solid #991b1b; }
.toast-success { background: #14532d; color: #86efac; border: 1px solid #166534; }
.toast-info    { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }

/* ── 自動化 / 排程 / 優化 共用版面 ─────────────────────────────────── */
.auto-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 28px 0;
  overflow: hidden;
}
.auto-header { margin-bottom: 16px; }
.auto-header h2 { margin: 0 0 4px; font-size: 1.2rem; }
.auto-header .hint { margin: 0 0 8px; }
.auto-header .field-help { margin: 6px 0 12px; }
.auto-header .btn-primary { margin-top: 4px; }

.auto-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-shrink: 0;
}
.auto-sub-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .88rem;
  padding: 8px 16px;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.auto-sub-tab:hover { color: var(--text); }
.auto-sub-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── 自動化規則卡片 ─────────────────────────────────────────────────── */
.auto-rule-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow .2s;
}
.auto-rule-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.auto-rule-card.disabled { opacity: .6; }
.auto-rule-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.auto-rule-name { font-weight: 600; font-size: .95rem; flex: 1; min-width: 100px; }
.auto-rule-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .04em;
}
.auto-rule-badge.on  { background: rgba(34,197,94,.18); color: #4ade80; }
.auto-rule-badge.off { background: rgba(148,163,184,.15); color: var(--text-dim); }
.auto-rule-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-rule-desc { font-size: .82rem; color: var(--text-dim); margin: 2px 0 6px; }
.auto-rule-detail { font-size: .78rem; color: var(--text-dim); line-height: 1.6; }
.btn-danger {
  background: rgba(239,68,68,.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s;
}
.btn-danger:hover { background: rgba(239,68,68,.3); }

/* ── 規則 Modal 行 ──────────────────────────────────────────────────── */
.auto-row-wrap { margin-bottom: 10px; }
.auto-row-wrap .auto-row { margin-bottom: 0; }
.auto-tool-hint {
  font-size: .74rem;
  color: var(--text-dim);
  padding: 3px 8px;
  margin-top: 3px;
  border-left: 2px solid var(--primary);
  background: rgba(255,255,255,.03);
  border-radius: 0 4px 4px 0;
}
.auto-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.auto-field-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-size: .85rem;
  min-width: 100px;
  flex: 1;
}
.auto-field-input:focus { outline: none; border-color: var(--primary); }
.auto-tool-select { flex: 1.5; }

/* ── 執行日誌 ───────────────────────────────────────────────────────── */
.auto-log-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.auto-log-item.failed { border-color: rgba(239,68,68,.4); }
.auto-log-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.auto-log-ts { font-size: .75rem; color: var(--text-dim); flex: 1; }
.auto-log-detail { font-size: .78rem; color: var(--text-dim); }

/* ── 排程步驟預覽 ───────────────────────────────────────────────────── */
.sched-steps-preview { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* ── 排程執行進度 UI ─────────────────────────────────────── */
.sched-run-log {
  margin-top: 10px; padding: 12px 14px;
  background: rgba(0,0,0,.3); border-radius: 10px;
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0;
}
.srp-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #475569; margin-bottom: 10px;
}
.srp-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 6px; border-radius: 7px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .25s;
}
.srp-step:last-child { border-bottom: none; }
.srp-step[data-state="ok"]      { background: rgba(74,222,128,.05); }
.srp-step[data-state="fail"]    { background: rgba(239,68,68,.07); }
.srp-step[data-state="waiting"] { background: rgba(251,191,36,.06); }
.srp-step[data-state="running"] { background: rgba(59,130,246,.06); }

.srp-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.srp-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #334155; display: block;
}
.srp-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(59,130,246,.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: srp-spin .7s linear infinite;
}
@keyframes srp-spin { to { transform: rotate(360deg); } }
.srp-hourglass { font-size: 15px; line-height: 1; animation: srp-pulse .9s ease-in-out infinite alternate; }
@keyframes srp-pulse { from { opacity:.5; } to { opacity:1; } }
.srp-done { font-size: 15px; line-height: 1; animation: srp-pop .3s cubic-bezier(.175,.885,.32,1.275); }
@keyframes srp-pop { 0% { transform:scale(.3); opacity:0; } 100% { transform:scale(1); opacity:1; } }

.srp-info { flex: 1; min-width: 0; }
.srp-name { font-size: .85rem; font-weight: 500; color: var(--text); }
.srp-step[data-state="pending"] .srp-name { color: #475569; }
.srp-step[data-state="fail"]    .srp-name { color: #f87171; }
.srp-step[data-state="waiting"] .srp-name { color: #fbbf24; }
.srp-detail { font-size: .76rem; color: var(--text-dim); margin-top: 2px; }

.srp-wait-label { display: block; margin-bottom: 4px; }
.srp-wait-bar {
  height: 3px; background: rgba(251,191,36,.15);
  border-radius: 2px; overflow: hidden;
}
.srp-wait-fill {
  height: 100%; width: 0%; background: #fbbf24;
  border-radius: 2px; transition: width .25s linear;
}
.srp-inter-wait {
  padding: 6px 6px 6px 34px; font-size: .75rem; color: #fbbf24;
  display: flex; flex-direction: column; gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sched-step-chip {
  background: rgba(59,130,246,.12);
  color: var(--primary);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .75rem;
}
.sched-cron-box {
  margin-top: 16px; padding: 14px 16px;
  background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.2);
  border-radius: 10px; display: flex; flex-direction: column; gap: 10px;
}
.sched-cron-title { font-size: .8rem; font-weight: 600; color: var(--primary); }
.sched-cron-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sched-cron-extra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sched-cron-extra input, .sched-cron-extra select { width: auto; min-width: 80px; }
.sched-cron-preview {
  font-size: .75rem; color: #94a3b8; font-family: monospace;
  background: rgba(0,0,0,.2); padding: 6px 10px; border-radius: 6px;
  display: none;
}
.sched-cron-preview.visible { display: block; }
.sched-cron-next { color: #4ade80; font-size: .75rem; margin-top: 2px; }
.auto-rule-cron-badge {
  font-size: .72rem; color: #94a3b8; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 1px 8px; font-family: monospace;
}
.sched-next-run {
  margin-top: 6px; font-size: .78rem; color: #94a3b8;
  background: rgba(74,222,128,.05); border-left: 2px solid #4ade80;
  padding: 4px 10px; border-radius: 4px;
}
.sched-next-eta { font-weight: 600; color: #4ade80; }
.sched-step-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}
/* 可編輯步驟卡片 */
.sched-step-edit {
  flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  background: #16243a; border-color: #2a3f5a;
  border-left: 3px solid var(--primary);
}
.sched-step-edit-head {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px;
  background: #1a2e47; border-bottom: 1px solid #1e3352;
}
.sched-step-edit-head .sched-step-num { flex-shrink: 0; width: 28px; height: 28px; font-size: .82rem; }
/* 1. 步驟名稱：透明背景不破壞 header 底色，只用底線提示可編輯 */
.sched-edit-name {
  flex: 1; min-width: 0; box-sizing: border-box;
  font-weight: 600; font-size: .92rem;
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.15);
  border-radius: 0; padding: 3px 4px; color: var(--text);
}
.sched-edit-name:focus {
  outline: none; border-bottom-color: var(--primary);
  background: rgba(255,255,255,.04);
}
.sched-edit-type {
  width: 82px; font-size: .82rem; padding: 5px 6px;
  background: rgba(0,0,0,.3); border: 1px solid #2a3f5a; color: var(--text);
  border-radius: 6px; flex-shrink: 0;
}
.sched-step-edit-head .btn-icon {
  flex-shrink: 0; width: 26px; height: 26px; font-size: .8rem;
  border-radius: 6px;
}
.sched-step-ins {
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25);
  color: #4ade80;
}
.sched-step-ins:hover { background: rgba(74,222,128,.25); }
.sched-step-del {
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25);
  color: #f87171;
}
.sched-step-del:hover { background: rgba(239,68,68,.28); }

/* 2. body 間距加大，input 有足夠高度不切字 */
#sched-preview-steps { width: 100%; }
.sched-step-edit-body {
  display: flex; flex-direction: column;
  gap: 12px; padding: 14px 16px 16px;
  width: 100%; box-sizing: border-box;
}
.sched-edit-row { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sched-edit-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.sched-edit-row-2col > div { display: flex; flex-direction: column; gap: 6px; }

/* 3. label 顏色加亮，清楚可見 */
.sched-edit-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #94a3b8;
}
.sched-edit-tool {
  width: 100%; font-family: monospace; font-size: .87rem;
  background: #0f172a; border-color: #2a3f5a; color: var(--text);
  border-radius: 6px; padding: 7px 10px;
}
.sched-edit-tool:focus { border-color: var(--primary); outline: none; }
.sched-step-edit-body input {
  width: 100%; box-sizing: border-box;
  background: #0f172a; border: 1px solid #2a3f5a;
  color: var(--text); border-radius: 6px;
  padding: 7px 10px; line-height: 1.4;
}
.sched-step-edit-body input:focus { border-color: var(--primary); background: #0a1628; outline: none; }
.sched-step-edit-body input::placeholder { color: #475569; }
.sched-step-num {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.sched-step-body { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: .85rem; }
.sched-step-type {
  background: rgba(148,163,184,.15);
  color: var(--text-dim);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .72rem;
}

/* ── 優化統計 ───────────────────────────────────────────────────────── */
.opt-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.opt-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.opt-stat-card.insufficient { opacity: .6; border-style: dashed; }
.opt-stat-name { font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.opt-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
  font-size: .78rem;
  color: var(--text-dim);
}
.opt-stat-grid b { color: var(--text); }
.opt-stat-meta { font-size: .72rem; color: var(--text-dim); margin-top: 8px; }

/* ── 優化建議 ───────────────────────────────────────────────────────── */
.opt-sug-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.opt-sug-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.opt-sug-content { font-size: .88rem; margin: 0 0 6px; }
.opt-sug-meta { font-size: .73rem; color: var(--text-dim); }
.opt-sug-applied { opacity: .7; border-color: rgba(255,255,255,.1); }
.opt-sug-applied-tag { font-size: .75rem; color: var(--success); font-weight: 600; }
.opt-applied-section { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 12px; }
.opt-applied-section summary { font-size: .85rem; color: var(--text-dim); cursor: pointer; margin-bottom: 10px; }
.opt-applied-section summary:hover { color: var(--text); }

/* ── ML 模型卡片 ────────────────────────────────────────────────────── */
.opt-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.opt-model-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.opt-model-name { font-weight: 700; font-size: .88rem; margin-bottom: 8px; word-break: break-all; }
.opt-model-info { display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; color: var(--text-dim); margin-bottom: 8px; }

/* ── 功能開關 ───────────────────────────────────────────────────────── */
.feature-flag-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.feature-flag-info { flex: 1; }
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .toggle-slider {
  position: absolute; inset: 0;
  background: rgba(148,163,184,.25);
  border-radius: 26px;
  cursor: pointer;
  transition: background .2s;
}
.toggle-switch .toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }

/* ── ML 工作台 ──────────────────────────────────────────────────── */
.ml-workbench {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .ml-workbench { grid-template-columns: 1fr; }
}

.ml-config-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 0;
}
.ml-section-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
.ml-tool-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}
.ml-tool-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 5px;
}
.ml-tool-check:hover { background: rgba(255,255,255,.05); }
.ml-tool-check input { accent-color: var(--primary); width: 14px; height: 14px; }

.ml-model-type-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.ml-model-type-btns label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  cursor: pointer;
}
.ml-model-type-btns input { accent-color: var(--primary); }

.ml-param-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ml-param-label {
  font-size: .78rem;
  color: var(--text-dim);
  min-width: 90px;
  flex-shrink: 0;
}
.ml-param-input { flex: 1; padding: 5px 8px; font-size: .84rem; }

.ml-action-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* ── 右側視覺化面板 ─────────────────────────────────────────── */
.ml-viz-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ml-viz-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.15);
}
.ml-viz-tab {
  padding: 10px 18px;
  font-size: .82rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ml-viz-tab:hover { color: var(--text); }
.ml-viz-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.ml-viz-pane { padding: 16px; }
.ml-viz-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ml-chart-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}
.ml-chart-hint {
  text-align: center;
  margin-top: 8px;
  font-size: .78rem;
}

/* ── 訓練指標 ───────────────────────────────────────────────── */
.ml-metrics-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ml-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 8px 14px;
}
.ml-metric-label { font-size: .72rem; color: var(--text-dim); margin-bottom: 2px; }
.ml-metric-val   { font-size: 1.15rem; font-weight: 700; }
.ml-metric-val.good { color: #50fa7b; }
.ml-metric-val.ok   { color: #ffb86c; }
.ml-metric-val.bad  { color: #ff5555; }
.ml-metric-mode {
  font-size: .76rem;
  color: var(--text-dim);
  flex-basis: 100%;
  margin-top: 2px;
}

/* ── 模型比較表格 ───────────────────────────────────────────── */
.ml-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin-top: 12px;
}
.ml-cmp-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.ml-cmp-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ml-cmp-table tr:last-child td { border-bottom: none; }
.ml-compare-table-wrap { margin-top: 8px; }
.text-good { color: #50fa7b; font-weight: 700; }
.text-ok   { color: #ffb86c; font-weight: 700; }
.text-bad  { color: #ff5555; font-weight: 700; }

/* ── 統計卡片 sparkline ──────────────────────────────────────── */
.stat-spark-wrap {
  height: 60px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ── ML 工作台步驟標題 ──────────────────────────────────────── */
.ml-step-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.ml-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ml-count-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .68rem;
  background: rgba(74,158,255,.18);
  color: #4a9eff;
  font-weight: 600;
  vertical-align: middle;
}
.ml-count-badge.warn {
  background: rgba(255,85,85,.18);
  color: #ff5555;
}
.ml-tool-label { display: inline-flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.ml-tool-desc-hint { font-size: .75rem; color: var(--text-dim); font-weight: 400; }
.ml-tool-check.ml-insufficient { opacity: .6; }
.btn-ghost { background: transparent; border: none; padding: 2px 5px; opacity: .6; cursor: pointer; font-size: .9rem; }
.btn-ghost:hover { opacity: 1; background: var(--surface2); border-radius: 4px; }

/* ── Step ② Feature Pills ──────────────────────────────── */
.ml-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 0 4px;
}
.ml-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: var(--text-dim);
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.ml-feature-pill:hover {
  background: rgba(255,255,255,.10);
  color: var(--text);
}
.ml-feature-pill.selected {
  background: rgba(99,179,237,.18);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.ml-feature-pill.insufficient { opacity: .55; }
.ml-pill-badge {
  font-size: .7rem;
  color: var(--text-dim);
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 0 5px;
}
.ml-feature-pill.selected .ml-pill-badge { color: var(--primary); background: rgba(99,179,237,.12); }
.ml-pill-badge.warn { color: #e88; }

.ml-log-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.ml-clear-data-btn {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .68rem;
  cursor: pointer;
  white-space: nowrap;
  opacity: .7;
  flex-shrink: 0;
}
.ml-clear-data-btn:hover { opacity: 1; background: rgba(255,85,85,.12); }

/* ── AI 建議文件選擇器 ────────────────────────────── */
.opt-doc-picker-wrap {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
}
.opt-doc-picker-label {
  font-size: .78rem;
  color: var(--text-dim);
  display: block;
  margin-bottom: 6px;
}
.opt-doc-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.opt-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opt-doc-chip:has(input:checked) {
  border-color: var(--primary);
  background: rgba(59,130,246,.12);
  color: var(--primary);
}
.opt-doc-chip input { accent-color: var(--primary); width: 12px; height: 12px; }

.ml-add-tool-row { margin-top: 6px; }
.ml-add-tool-sel {
  width: 100%;
  padding: 4px 8px;
  font-size: .8rem;
  background: var(--surface);
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
.ml-add-tool-sel option { background: var(--surface); color: var(--text); }
.ml-add-tool-sel:hover { border-color: var(--primary); }

/* ── 閉迴路控制 ────────────────────────────────────────────────────── */
.loop-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }

.loop-session-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.loop-session-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.loop-session-name { font-weight: 600; font-size: .95rem; flex: 1; }
.loop-status-badge { font-size: .78rem; font-weight: 700; }
.loop-session-meta { font-size: .75rem; color: var(--text-dim); margin-bottom: 10px; }
.loop-session-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.loop-section-header {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 10px;
  margin-top: 16px;
}

.loop-tool-row, .loop-target-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.loop-detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.loop-detail-targets {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: .82rem;
}
.loop-target-chip {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .78rem;
}

.loop-iter-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg);
}
.loop-iter-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
  font-size: .82rem;
  flex-wrap: wrap;
}
.loop-iter-header span:first-child { font-weight: 600; }
.loop-iter-analysis {
  font-size: .85rem;
  margin-bottom: 6px;
  white-space: pre-wrap;
  color: var(--text-dim);
}
.loop-iter-actions { font-size: .82rem; }
.loop-action-item { margin-bottom: 3px; }
.loop-tool-row-wrap { margin-bottom: 10px; }
.loop-tool-limits {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  border-left: 2px solid var(--primary);
}
.loop-limit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.loop-limit-field span {
  font-size: .72rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.loop-tool-desc-hint {
  font-size: .74rem;
  color: var(--text-dim);
  padding: 3px 6px;
  margin-top: 2px;
  background: rgba(255,255,255,.03);
  border-left: 2px solid var(--primary);
  border-radius: 0 4px 4px 0;
}
.loop-target-row-wrap { margin-bottom: 10px; }

/* ── 統計詳情 Modal ─────────────────────────────────────────────── */
.stat-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stat-detail-item {
  background: rgba(255,255,255,.04);
  border-radius: 7px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-detail-item span { font-size: .72rem; color: var(--text-dim); }
.stat-detail-item b { font-size: 1rem; }

/* ── 統計詳情 時間/工具選擇 ──────────────────────────────────────── */
.stat-range-bar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.stat-range-btn {
  padding: 4px 12px; border-radius: 20px; font-size: .78rem; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  transition: all .15s;
}
.stat-range-btn.active, .stat-range-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(74,158,255,.1); }

.stat-tool-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.stat-tool-pill {
  padding: 3px 12px; border-radius: 20px; font-size: .78rem; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  transition: all .15s;
}
.stat-tool-pill:hover { border-color: rgba(255,255,255,.3); color: var(--text); }

.stat-detail-row {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 8px 10px; margin-bottom: 8px;
  background: rgba(255,255,255,.03); border-radius: 6px;
  font-size: .82rem;
}
.stat-detail-row b:first-child { min-width: 100px; }
.stat-detail-row span { color: var(--text-dim); }
.stat-detail-row span b { color: var(--text); }

/* ── 資料記錄設定（移至數據統計頁）──────────────────────────────── */
.log-config-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.log-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}
.log-config-title { font-weight: 600; font-size: .88rem; }
.log-config-label { font-size: .8rem; color: var(--text-dim); }
.log-tools-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: none;
}
.log-tools-inline .ml-tool-item {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
}

/* ── 以圖搜圖 ───────────────────────────────────────────────────────── */
.imgsearch-layout {
  display: flex;
  gap: 24px;
  flex: 1;
  overflow: hidden;
  padding: 20px 24px;
}
.imgsearch-search-col {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.imgsearch-manage-col {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.imgsearch-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--text-dim);
  transition: border-color .2s, background .2s;
}
.imgsearch-drop-zone:hover,
.imgsearch-drop-zone.dragover {
  border-color: var(--accent);
  background: rgba(99,102,241,.06);
}
.imgsearch-drop-icon {
  font-size: 2.4rem;
  margin-bottom: 8px;
  opacity: .4;
}
/* 搜尋結果卡片 */
.imgsearch-result-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface2);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.imgsearch-result-rank {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 28px;
  text-align: center;
  padding-top: 4px;
}
.imgsearch-result-img {
  width: 110px;
  height: 90px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
}
.imgsearch-result-img:hover { opacity: .85; }
.imgsearch-result-info {
  flex: 1;
  min-width: 0;
}
.imgsearch-result-similarity {
  font-size: .8rem;
  color: #4ade80;
  font-weight: 600;
  margin-bottom: 4px;
}
.imgsearch-result-desc {
  font-size: .9rem;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.5;
}
.imgsearch-ai-answer {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--text-dim);
  background: var(--surface);
  border-radius: 6px;
  padding: 8px 10px;
  white-space: pre-wrap;
  display: none;
}
.imgsearch-ai-answer:not(:empty) { display: block; }

/* 管理欄圖片列表 */
.imgkb-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.imgkb-list-thumb {
  width: 64px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.imgkb-list-info {
  flex: 1;
  min-width: 0;
}
.imgkb-list-desc {
  font-size: .88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imgkb-list-meta {
  font-size: .78rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ── 以圖搜圖（重構版）─────────────────────────────────────────────── */
.imgkb-teacher-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.imgkb-teacher-tab,
.imgkb-teacher-tab2 {
  background: var(--surface2);
  border: none;
  color: var(--text-dim);
  padding: 7px 20px;
  cursor: pointer;
  font-size: .9rem;
  border-radius: 20px;
  transition: background .15s, color .15s;
}
.imgkb-teacher-tab:hover,
.imgkb-teacher-tab2:hover { color: var(--text); background: var(--surface3, #2a2a3e); }
.imgkb-teacher-tab.active,
.imgkb-teacher-tab2.active { background: var(--accent); color: #fff; font-weight: 600; }

/* 格狀圖片列表 */
.imgkb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.imgkb-grid-card {
  background: var(--surface2);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .15s, box-shadow .15s;
}
.imgkb-grid-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.imgkb-grid-img-wrap {
  position: relative;
}
.imgkb-grid-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
.imgkb-grid-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transition: opacity .15s;
  padding: 2px 7px;
  font-size: .8rem;
  border-radius: 5px;
}
.imgkb-grid-card:hover .imgkb-grid-delete { opacity: 1; }
.imgkb-grid-desc {
  padding: 8px 10px 4px;
  font-size: .82rem;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.imgkb-grid-meta {
  padding: 0 10px 8px;
  font-size: .75rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 學生搜尋結果放大 */
#imgkb-student-view .imgsearch-result-img {
  width: 140px;
  height: 110px;
}
#imgkb-student-view .imgsearch-drop-zone {
  padding: 40px 20px;
}

/* 學生版以圖搜圖排版 */
.imgsearch-student-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 28px 24px;
  width: 100%;
  box-sizing: border-box;
}
.imgsearch-student-dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--text-dim);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s, background .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.imgsearch-student-dropzone:hover,
.imgsearch-student-dropzone.dragover {
  border-color: var(--accent);
  background: rgba(99,102,241,.06);
}

/* ── 演示分頁 ─────────────────────────────────────── */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 12px 0;
}
@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr; }
}
.demo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.demo-card-wide { grid-column: 1 / -1; }
.demo-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.demo-hint {
  color: var(--text-dim);
  font-size: .85rem;
  margin: 0 0 12px;
}
.demo-scenarios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.demo-scenarios button {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  font-size: .92rem;
}
.demo-scenarios button:hover { border-color: var(--primary); }
.demo-scenarios button.flash { animation: demoFlash .6s; }
@keyframes demoFlash {
  0% { background: var(--primary); }
  100% { background: var(--surface2); }
}
.demo-loops {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-loop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  padding: 12px;
  border-radius: 8px;
}
.demo-loop-info { display: flex; flex-direction: column; gap: 2px; }
.demo-loop-name { font-weight: 600; }
.demo-loop-target { color: var(--text-dim); font-size: .85rem; }
.demo-switch {
  position: relative;
  width: 46px; height: 24px;
  background: var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s;
}
.demo-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: left .2s;
}
.demo-switch.on { background: #22c55e; }
.demo-switch.on::after { left: 24px; }

.demo-ml-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.demo-ml-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.demo-ml-row {
  background: var(--surface2);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-ml-row .ml-name { color: var(--text-dim); }
.demo-ml-row .ml-pred { font-weight: 600; color: #86efac; }
.demo-ml-row .ml-err  { color: #fca5a5; }

.demo-chart-wrap {
  background: rgba(0,0,0,.2);
  border-radius: 8px;
  padding: 8px;
}
.demo-chart-controls {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .85rem;
  align-items: center;
}
.demo-chart-controls label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

.demo-llm-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.demo-llm-buttons button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: .92rem;
}
.demo-llm-buttons button:hover { filter: brightness(1.1); }
.demo-llm-buttons button:disabled { opacity: .5; cursor: wait; }

.demo-llm-log {
  background: rgba(0,0,0,.2);
  border-radius: 8px;
  padding: 12px 14px;
  max-height: 380px;
  overflow-y: auto;
  font-size: .9rem;
  line-height: 1.6;
}
.demo-llm-placeholder { color: var(--text-dim); text-align: center; padding: 12px; }
.demo-llm-block { margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; }
.demo-llm-block.user    { background: rgba(59,130,246,.15);  border-left: 3px solid #3b82f6; }
.demo-llm-block.think   { background: rgba(168,85,247,.12);  border-left: 3px solid #a78bfa; }
.demo-llm-block.tool    { background: rgba(34,197,94,.12);   border-left: 3px solid #22c55e; font-family: ui-monospace, monospace; font-size: .85rem; }
.demo-llm-block.reply   { background: rgba(245,158,11,.12);  border-left: 3px solid #f59e0b; }
.demo-llm-block.error   { background: rgba(239,68,68,.15);   border-left: 3px solid #ef4444; }
.demo-llm-tag {
  display: inline-block;
  font-weight: 600;
  margin-right: 6px;
}

.demo-empty-state {
  padding: 24px;
  text-align: center;
  color: var(--text-dim);
  background: var(--surface2);
  border-radius: 8px;
}

/* ── AI Agent 控制台 ─────────────────────────────────── */
.agent-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: 8px;
}
.agent-controls label { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.agent-controls input[type=number] {
  width: 70px; padding: 4px 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 4px;
}
.agent-controls select {
  padding: 4px 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 4px;
}
.agent-status {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--border);
  font-size: .85rem;
}
.agent-status.running { background: #22c55e; }
.agent-status.paused  { background: #f59e0b; }

.agent-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 16px 0;
  padding: 12px;
  background: rgba(0,0,0,.2);
  border-radius: 8px;
  overflow-x: auto;
}
.agent-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--text-dim);
  min-width: 90px;
  transition: color .3s;
}
.agent-step .dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--border);
  transition: background .3s, box-shadow .3s, transform .2s;
}
.agent-step.active {
  color: #86efac;
}
.agent-step.active .dot {
  background: #22c55e;
  box-shadow: 0 0 16px rgba(34,197,94,.7);
  transform: scale(1.3);
  animation: stepPulse 1s infinite;
}
.agent-step.done .dot {
  background: #22c55e;
  opacity: .5;
}
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(34,197,94,.7); }
  50% { box-shadow: 0 0 24px rgba(34,197,94,1); }
}

.agent-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.agent-metrics > div {
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.metric-label { display: block; color: var(--text-dim); font-size: .8rem; }
.metric-val   { display: block; font-size: 1.2rem; font-weight: 600; margin-top: 2px; }

.agent-pending {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(245,158,11,.15);
  border: 1px solid #f59e0b;
  border-radius: 8px;
}
.pending-title { font-weight: 600; margin-bottom: 6px; color: #fbbf24; }
.pending-buttons { display: flex; gap: 8px; margin-top: 8px; }

.agent-log-title { font-weight: 600; margin: 12px 0 6px; }
.agent-log {
  background: rgba(0,0,0,.25);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 260px;
  overflow-y: auto;
  font-size: .85rem;
  line-height: 1.6;
  font-family: ui-monospace, monospace;
}
.agent-log-row { padding: 2px 0; }
.agent-log-row .ts { color: var(--text-dim); margin-right: 6px; }
.agent-log-row.sense   { color: #93c5fd; }
.agent-log-row.predict { color: #c4b5fd; }
.agent-log-row.decide  { color: #fbbf24; }
.agent-log-row.write   { color: #86efac; }
.agent-log-row.verify  { color: #67e8f9; }
.agent-log-row.warn    { color: #fdba74; }
.agent-log-row.error   { color: #fca5a5; }
.agent-log-row.pending { color: #fbbf24; }
.agent-log-row.info    { color: var(--text-dim); }

/* ── WAS 雲端 Modal ─────────────────────────────────── */
.was-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.was-section h4 { margin: 0 0 8px; font-size: .95rem; }
.was-row-btns { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.was-catalog-info { color: var(--text-dim); font-size: .85rem; }
.was-candidates { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.was-cand-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface2); border-radius: 6px; padding: 8px 10px; font-size: .88rem;
}
.was-cand-info { display: flex; flex-direction: column; gap: 2px; }
.was-cand-name { font-weight: 600; }
.was-cand-meta { color: var(--text-dim); font-size: .78rem; }
.was-cand-score { color: #86efac; font-size: .75rem; }

/* ── 🌱 栽種週期 ───────────────────────────────────── */
.grow-layout { display: flex; gap: 1rem; height: 100%; min-height: 0; }
.grow-sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; }
.grow-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.grow-sidebar-head h3 { margin: 0; font-size: .95rem; }
.grow-cycle-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.grow-cycle-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .55rem .65rem; cursor: pointer; }
.grow-cycle-item:hover { border-color: var(--primary); }
.grow-cycle-sel { border-color: var(--primary); background: var(--surface2); }
.grow-ci-name { font-weight: 600; font-size: .9rem; }
.grow-ci-meta { color: var(--text-dim); font-size: .76rem; margin-top: .2rem; display: flex; align-items: center; gap: .4rem; }
.grow-main { flex: 1; overflow-y: auto; min-width: 0; }
.grow-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.grow-detail-head h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.grow-d-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--text-dim); font-size: .85rem; }
.grow-day-badge { background: var(--primary); color: #fff; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; }
.grow-status-badge { padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; border: 1px solid var(--border); }
.grow-status-badge.on { background: #166534; color: #bbf7d0; border-color: #166534; }
.grow-status-badge.off { background: var(--surface2); color: var(--text-dim); }
.grow-d-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.grow-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.grow-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .85rem 1rem; }
.grow-card h4 { margin: 0 0 .6rem; font-size: .92rem; }
.grow-weight-summary { font-size: .9rem; margin-bottom: .5rem; }
.grow-mini-table table, .grow-env-wrap table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.grow-mini-table th, .grow-mini-table td, .grow-env-wrap th, .grow-env-wrap td { border-bottom: 1px solid var(--border); padding: .3rem .4rem; text-align: left; }
.grow-mini-table th, .grow-env-wrap th { color: var(--text-dim); font-weight: 500; }
.grow-env-wrap { overflow-x: auto; }
.grow-reports { display: flex; flex-direction: column; gap: .6rem; max-height: 320px; overflow-y: auto; }
.grow-report-item { border-left: 3px solid var(--primary); padding: .2rem .7rem; }
.grow-report-date { font-size: .76rem; color: var(--text-dim); margin-bottom: .2rem; }
.grow-report-body { font-size: .85rem; line-height: 1.5; }
.grow-empty { display: flex; align-items: center; justify-content: center; height: 60%; }
@media (max-width: 760px) { .grow-cards { grid-template-columns: 1fr; } .grow-layout { flex-direction: column; } .grow-sidebar { width: 100%; } }

/* AI 排程建議 */
.grow-advise-focus { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .8rem; }
.grow-advise-focus label { flex: 1; }
.grow-advise-result { max-height: 50vh; overflow-y: auto; font-size: .85rem; line-height: 1.5; }
.ga-conf { color: var(--text-dim); margin-bottom: .4rem; }
.ga-summary { background: var(--surface2); border-radius: 6px; padding: .5rem .7rem; margin-bottom: .7rem; }
.ga-table { width: 100%; border-collapse: collapse; font-size: .78rem; margin-bottom: .7rem; }
.ga-table th, .ga-table td { border: 1px solid var(--border); padding: .25rem .4rem; text-align: center; vertical-align: top; }
.ga-table th { color: var(--text-dim); font-weight: 500; }
.ga-block { margin-bottom: .6rem; }
.ga-block ul { margin: .2rem 0 0 1.1rem; padding: 0; }
.ga-rationale { color: var(--text-dim); margin-top: .2rem; }
.ga-watch { background: rgba(239,68,68,.08); border-left: 3px solid var(--danger); padding: .3rem .6rem; border-radius: 4px; }

/* 安全層面板 */
.safety-wrap { max-width: 900px; }
.safety-master-row { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.switch-label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.safety-trip { color: var(--danger); font-weight: 600; }
.safety-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.safety-form input[type="text"] { flex: 1; min-width: 200px; }
.safety-form input[type="number"] { width: 90px; }

/* 階段 + 時段排程 */
.ga-stage { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; margin-bottom: .7rem; }
.ga-stage-head { font-weight: 600; margin-bottom: .3rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ga-stage-head small { color: var(--text-dim); font-weight: 400; }
.ga-stage-nutri { margin-left: auto; font-size: .76rem; color: #86efac; font-weight: 500; }
.seg-table td, .seg-table th { padding: .2rem .35rem; }

/* AI 建議載入動畫 */
.ga-loader { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.2rem .5rem; }
.ga-spinner { font-size: 2.2rem; animation: ga-pulse 1.2s ease-in-out infinite; }
@keyframes ga-pulse { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }
.ga-steps { display: flex; flex-direction: column; gap: .45rem; width: 100%; max-width: 420px; }
.ga-step { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--text-dim); opacity: .5; transition: all .3s; }
.ga-step .ga-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: all .3s; }
.ga-step.on { opacity: 1; color: var(--text); }
.ga-step.on .ga-dot { background: #22c55e; }
.ga-step.cur { opacity: 1; color: var(--primary); font-weight: 600; }
.ga-step.cur .ga-dot { background: var(--primary); box-shadow: 0 0 0 4px rgba(59,130,246,.25); animation: ga-blink 1s ease-in-out infinite; }
@keyframes ga-blink { 0%,100% { box-shadow: 0 0 0 3px rgba(59,130,246,.15); } 50% { box-shadow: 0 0 0 6px rgba(59,130,246,.35); } }
.ga-loader-hint { font-size: .78rem; color: var(--text-dim); }

/* 栽種頁圖表容器 */
.grow-chart-wrap { position: relative; width: 100%; height: 200px; margin: 6px 0 10px; }

/* AI 每小時巡檢紀錄：固定高度滾動，避免無限拉長 */
#grow-ai-activity { max-height: 320px; overflow-y: auto; }
#grow-ai-activity table { width: 100%; }
#grow-ai-activity thead th, #grow-ai-activity table tr:first-child th {
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}

/* 栽種頁自動刷新切換 */
.grow-autorefresh {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .8rem; color: var(--text-dim); margin-left: 8px;
  cursor: pointer; user-select: none;
}
.grow-refresh-status { font-size: .75rem; color: var(--text-dim); }

/* 聊天訊息：表格 / 標題 / 分隔線 */
.chat-table {
  border-collapse: collapse; width: 100%; margin: 8px 0;
  font-size: .9em; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.chat-table th, .chat-table td {
  padding: 6px 10px; border: 1px solid var(--border); vertical-align: top;
}
.chat-table th { background: var(--surface2); color: var(--text); font-weight: 600; }
.chat-table tr:nth-child(even) td { background: rgba(148,163,184,.05); }
.chat-h { margin: 12px 0 6px; font-weight: 600; }
.chat-hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.chat-ol-item { margin: 4px 0; padding-left: 6px; }

/* 聊天 sessions 側邊欄 */
#chat-sessions-panel {
  width: 200px; flex-shrink: 0; border-right: 1px solid var(--border);
  background: var(--surface); overflow-y: auto;
  display: flex; flex-direction: column;
}
.chat-sessions-head { padding: 10px; border-bottom: 1px solid var(--border); }
.chat-sessions-head button { width: 100%; }
#chat-sessions-list { flex: 1; overflow-y: auto; padding: 6px; }
.chat-sess-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; margin-bottom: 4px; border-radius: 6px;
  cursor: pointer; font-size: .85rem;
  color: var(--text-dim); transition: background .15s;
}
.chat-sess-item:hover { background: var(--surface2); color: var(--text); }
.chat-sess-item.on { background: var(--primary); color: #fff; }
.chat-sess-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sess-meta { font-size: .7rem; color: var(--text-dim); }
.chat-sess-item.on .chat-sess-meta { color: rgba(255,255,255,.7); }
.chat-sess-del {
  opacity: 0; background: transparent; border: none; color: inherit;
  cursor: pointer; padding: 0 4px; font-size: .9rem; transition: opacity .15s;
}
.chat-sess-item:hover .chat-sess-del { opacity: 0.8; }
.chat-sess-del:hover { opacity: 1 !important; }
.chat-current-title {
  padding: 8px 14px;
  font-size: .92rem; color: var(--text-dim);
}

.chat-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 8px 0 0;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.chat-mode-switch {
  display: inline-flex; gap: 4px; padding: 4px 6px;
}
.chat-mode-switch .cm-chip {
  font-size: .78rem; padding: 4px 10px; border-radius: 14px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); cursor: pointer; transition: all .15s ease;
  white-space: nowrap;
}
.chat-mode-switch .cm-chip:hover {
  border-color: var(--accent); color: var(--text);
}
.chat-mode-switch .cm-chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-weight: 600;
}

/* 光譜配方一鍵套用卡片（AI 推薦時自動出現） */
.apply-recipe-card {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(96, 165, 250, 0.05);
}
.apply-recipe-card .ar-title {
  font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.apply-recipe-card .ar-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.apply-recipe-card .ar-tag {
  display: inline-block; padding: 3px 9px; border-radius: 11px;
  color: #fff; font-size: .82rem; font-weight: 600;
}
.apply-recipe-card .ar-apply-btn {
  padding: 6px 16px; border-radius: 6px; border: none;
  background: #10b981; color: #fff; font-weight: 600; cursor: pointer;
  font-size: .9rem;
}
.apply-recipe-card .ar-apply-btn:hover:not(:disabled) {
  background: #059669;
}
.apply-recipe-card .ar-apply-btn:disabled {
  background: #6b7280; cursor: default;
}
.apply-recipe-card .ar-result {
  margin-top: 8px; font-size: .85rem; color: var(--text-dim);
}

/* 光譜配方色條（適用 spectrum status 列 + 目標排程 stage） */
.recipe-bar {
  display: inline-flex; align-items: stretch; height: 14px; border-radius: 4px;
  overflow: hidden; vertical-align: middle; gap: 1px; min-width: 80px;
}
.recipe-seg {
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.9); font-size: .65rem; font-weight: 600;
  min-width: 8px; flex: 0 0 auto;
}
.ga-stage-recipe { margin: 4px 0 6px; font-size: .8rem; display: flex; align-items: center; gap: 6px; }
.ga-stage-recipe .recipe-label { color: var(--text-dim); font-size: .75rem; }
.ga-stage-recipe .recipe-bar { flex: 1; max-width: 360px; }

/* WAS 健康狀態徽章 */
.was-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  cursor: pointer; user-select: none; margin-left: 4px;
}
.was-badge-unknown { background: rgba(148,163,184,.18); color: var(--text-dim); }
.was-badge-ok      { background: rgba(34,197,94,.18);  color: #86efac; }
.was-badge-stale   { background: rgba(252,211,77,.18); color: #fcd34d; }
.was-badge-down    { background: rgba(239,68,68,.18);  color: #fca5a5; }

/* 兩盤秤重即時顯示 */
.tray-now {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; margin-bottom: 6px; font-size: .92rem;
}
.tray-now b { color: #86efac; }
.tray-hint { color: var(--text-dim); font-size: .78rem; margin-left: 4px; }

/* 多光譜相機分析指標 */
.cam-band { padding: 4px 10px; font-weight: 600; opacity: .7; }
.cam-band.on { opacity: 1; background: var(--primary); color: #fff; }
.cam-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; width: 100%;
}
.cam-badge {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px;
}
.cam-badge-wide { grid-column: span 2; }
.cam-badge-k { font-size: .72rem; color: var(--text-dim); margin-bottom: 2px; }
.cam-badge-v { font-size: .95rem; font-weight: 600; }
.cam-delta { font-size: .8rem; font-weight: 500; margin-left: 4px; padding: 1px 5px; border-radius: 4px; }
.badge-up   { color: #86efac; background: rgba(34,197,94,.12); }
.badge-down { color: #fca5a5; background: rgba(239,68,68,.12); }
.badge-flat { color: var(--text-dim); background: rgba(255,255,255,.05); }
.cam-spark { margin-top: 4px; opacity: 0.9; }
.cam-spark svg { display: block; max-width: 100%; }

/* 排程自動駕駛 — 頂部 grow-d-meta 用的顯眼 badge（綠 ON / 灰 OFF） */
.grow-autopilot-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: #1f2937; border: 1px solid #475569;
  color: var(--text-dim); font-size: .78rem; cursor: pointer;
  user-select: none; transition: all .15s;
}
.grow-autopilot-badge:hover { border-color: #10b981; }
.grow-autopilot-badge:has(input:checked) {
  background: #064e3b; border-color: #10b981; color: #d1fae5; font-weight: 600;
}
.grow-autopilot-badge .ap-label { display: inline-block; }

/* 排程微調模式 badge（OFF=灰 / SUGGEST=藍 / AUTO=紫）— 跟自動駕駛 badge 並排 */
.grow-tune-mode-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: #1f2937; border: 1px solid #475569;
  color: var(--text-dim); font-size: .78rem; user-select: none;
}
.grow-tune-mode-badge select {
  background: transparent; color: inherit; border: 1px solid #475569;
  border-radius: 4px; padding: 1px 6px; font-size: .75rem; cursor: pointer;
}
.grow-tune-mode-badge[data-mode="suggest"] { background: #1e3a8a; border-color: #3b82f6; color: #dbeafe; font-weight: 600; }
.grow-tune-mode-badge[data-mode="auto"]    { background: #581c87; border-color: #a855f7; color: #f3e8ff; font-weight: 600; }

/* 作物生理 tile（VPD / 光合 / 環境分數） */
.physio-tile {
  background: #1e293b; border: 1px solid #334155; border-radius: 8px;
  padding: 10px 12px;
}
.physio-tile .pt-k {
  font-size: .78rem; color: var(--text-dim); margin-bottom: 4px;
}
.physio-tile .pt-v {
  font-size: 1.4rem; font-weight: 700; color: #e2e8f0; line-height: 1.2;
}

/* AI 排程 — stage_purpose 階段目標小區塊 */
.ga-stage-purpose {
  padding: 6px 10px; margin: 6px 0;
  background: #1e3a8a; border-left: 3px solid #60a5fa;
  border-radius: 4px; color: #dbeafe; font-size: .85rem;
}

/* AI 排程 — 過去階段（is_passed=true）灰色顯示 */
.ga-stage-passed {
  opacity: 0.55; background: #0a0f1a; border-color: #1e293b !important;
}
.ga-stage-passed:hover { opacity: 0.85; }
.stage-passed-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  background: #4b5563; color: #d1d5db; border-radius: 999px;
  font-size: .72rem; font-weight: 600;
}

/* 趨勢圖模式切換按鈕 */
.trend-mode-btn {
  background: #1f2937; color: var(--text-dim); border: 1px solid #475569;
  padding: 3px 10px; border-radius: 4px; font-size: .78rem; cursor: pointer;
}
.trend-mode-btn:hover { border-color: #60a5fa; }
.trend-mode-btn.on {
  background: #1e3a8a; border-color: #60a5fa; color: #dbeafe; font-weight: 600;
}

/* 植株個別追蹤（per-plant tracking） */
.plant-health-bar {
  width: 100%; max-width: 720px; padding: 10px 12px; border-radius: 8px;
  background: #0f172a; border: 1px solid #334155; margin-top: 6px;
}
.plant-health-bar .phb-bar {
  display: flex; height: 22px; border-radius: 6px; overflow: hidden;
  background: #1e293b; margin-top: 6px;
}
.plant-health-bar .phb-seg {
  font-size: .72rem; color: #fff; text-align: center; line-height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.phb-thriving         { background: #16a34a; }
.phb-normal           { background: #ca8a04; }
.phb-trending-decline { background: #f97316; }
.phb-declining        { background: #dc2626; }
.phb-missing          { background: #525252; }
.plant-health-bar .phb-legend {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem;
  color: #cbd5e1; margin-top: 8px;
}
.plant-health-bar .phb-legend span::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  margin-right: 4px; border-radius: 2px; vertical-align: middle;
}
.plant-health-bar .phb-legend .l-thriving::before { background: #16a34a; }
.plant-health-bar .phb-legend .l-normal::before { background: #ca8a04; }
.plant-health-bar .phb-legend .l-trending-decline::before { background: #f97316; }
.plant-health-bar .phb-legend .l-declining::before { background: #dc2626; }
.plant-health-bar .phb-legend .l-missing::before { background: #525252; }

.plant-per-table {
  width: 100%; max-width: 720px;
}
.plant-per-table table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.plant-per-table th {
  text-align: center; padding: 6px 4px; background: #1e293b;
  color: #e2e8f0; font-weight: 600;
}
.plant-per-table td {
  padding: 6px 4px; text-align: center; border-bottom: 1px solid #1e293b;
}
.plant-per-table .pp-label { font-weight: 700; color: #e2e8f0; }
.plant-per-table .pp-health-旺盛   { color: #4ade80; font-weight: 600; }
.plant-per-table .pp-health-普通   { color: #fbbf24; font-weight: 600; }
.plant-per-table .pp-health-衰退中 { color: #fb923c; font-weight: 700; }
.plant-per-table .pp-health-衰退   { color: #f87171; font-weight: 700; }
.plant-per-table .pp-health-缺株   { color: #6b7280; }

/* 排程修改歷史（audit log）表 */
.grow-audit-last {
  padding: 8px 12px; border-radius: 8px; background: #0f172a;
  border: 1px solid #334155; margin-bottom: 10px; font-size: .82rem;
  color: #cbd5e1;
}
.grow-audit-last b { color: #e2e8f0; }
.grow-audit-list { max-height: 360px; overflow-y: auto; }
.grow-audit-list table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.grow-audit-list th { text-align: left; padding: 6px 8px; background: #1e293b; color: #e2e8f0; position: sticky; top: 0; }
.grow-audit-list td { padding: 6px 8px; border-bottom: 1px solid #1e293b; vertical-align: top; }
.grow-audit-list tr:hover td { background: #0b1220; }
.audit-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.audit-tag-user_edit         { background: #1e3a8a; color: #dbeafe; }
.audit-tag-lock              { background: #374151; color: #d1d5db; }
.audit-tag-unlock            { background: #374151; color: #d1d5db; }
.audit-tag-ai_suggest_apply  { background: #064e3b; color: #d1fae5; }
.audit-tag-ai_auto           { background: #581c87; color: #f3e8ff; }
.audit-delta { color: #fbbf24; font-weight: 600; }
.audit-reason { color: #94a3b8; font-size: .78rem; margin-top: 2px; }

/* AI 微調 modal 提案列表 */
.gt-proposal-row {
  display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #334155;
  border-radius: 8px; margin-bottom: 8px; background: #0f172a;
  align-items: flex-start;
}
.gt-proposal-row input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; }
.gt-proposal-row .gt-pr-body { flex: 1; min-width: 0; font-size: .85rem; }
.gt-proposal-row .gt-pr-head {
  font-weight: 600; color: #e2e8f0; margin-bottom: 4px;
}
.gt-proposal-row .gt-pr-delta { color: #fbbf24; }
.gt-proposal-row .gt-pr-reason { color: #94a3b8; margin-top: 2px; }
.gt-proposal-row .gt-pr-outcome { color: #6ee7b7; margin-top: 2px; font-size: .8rem; }
.gt-blocked {
  padding: 12px; border-radius: 8px; background: #422006; border: 1px solid #d97706;
  color: #fde68a; margin-bottom: 8px;
}
.gt-skipped {
  padding: 10px; border-radius: 8px; background: #1f2937; border: 1px dashed #64748b;
  color: #cbd5e1; margin-top: 8px; font-size: .82rem;
}

/* 自動駕駛 log 表：簡單 max-height 內 scroll，避免撐爆 card */
#grow-autopilot-log { max-height: 240px; overflow-y: auto; }
#grow-autopilot-log table { margin: 0; }

/* Stage 編輯 modal */
.stage-editor-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.6); display: flex;
  align-items: center; justify-content: center; padding: 20px;
}
.stage-editor {
  background: var(--surface); border-radius: 12px;
  width: 100%; max-width: 920px; max-height: 90vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
}
.stage-editor .se-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.stage-editor .se-head h3 { margin: 0; font-size: 1.05rem; }
.stage-editor .se-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.2rem; cursor: pointer; padding: 4px 10px;
}
.stage-editor .se-body { padding: 14px 18px; overflow-y: auto; }
.stage-editor .se-body h4 { margin: 14px 0 8px; font-size: .9rem; color: var(--text-dim); }
.stage-editor .se-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.stage-editor .se-row label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--text-dim); }
.stage-editor .se-row label.se-fullw { flex: 1; min-width: 100%; }
.stage-editor .se-input {
  padding: 5px 8px; border-radius: 5px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text); font-size: .88rem;
  min-width: 80px;
}
.stage-editor .se-fullw .se-input { width: 100%; }
.stage-editor .se-segs { display: flex; flex-direction: column; gap: 6px; }
.stage-editor .se-seg-header {
  display: flex; gap: 6px; align-items: center;
  padding: 4px 6px; font-size: .72rem; color: var(--text-dim);
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.stage-editor .se-seg-header > span { display: inline-block; text-align: center; }
.stage-editor .se-h-time { width: 80px; }
.stage-editor .se-h-num { width: 80px; }
.stage-editor .se-h-linear { width: 56px; }
.stage-editor .se-h-note { flex: 1; min-width: 100px; text-align: left; padding-left: 8px; }
.stage-editor .se-h-del { width: 32px; }
.stage-editor .se-seg-row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 6px; background: var(--bg); border-radius: 6px;
}
.stage-editor .se-seg-in {
  padding: 4px 7px; border-radius: 4px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); font-size: .82rem;
  width: 80px;
}
.stage-editor .se-seg-in.se-seg-note { flex: 1; min-width: 100px; }
.stage-editor .se-seg-linear { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; color: var(--text-dim); }
.stage-editor .se-seg-del {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 4px; padding: 3px 8px; cursor: pointer;
}
.stage-editor .se-seg-del:hover { color: #f87171; border-color: #f87171; }
.stage-editor .se-add-seg { margin-top: 8px; }
.stage-editor .se-foot {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* Stage 鎖定徽章 + 編輯按鈕 */
.stage-lock-on {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #fef3c7; color: #92400e; font-size: .72rem; margin-left: 6px;
}
.stage-edit-btn { margin-left: 6px; font-size: .75rem; padding: 2px 8px; }
.ga-stage-locked { border-left: 3px solid #f59e0b; padding-left: 8px; }

/* 目標排程翻頁 tabs */
.sched-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.sched-tab {
  padding: 5px 10px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); border-radius: 6px; cursor: pointer; font-size: .82rem;
  display: inline-flex; align-items: center; gap: 4px; transition: all .15s;
}
.sched-tab small { font-size: .7rem; opacity: 0.7; }
.sched-tab:hover { border-color: var(--primary); color: var(--text); }
.sched-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.sched-panel { display: none; }
.sched-panel.on { display: block; }


/* AI 每小時運行紀錄 */
.grow-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.grow-card-head h4 { margin: 0; }
.ai-st { font-size: .78rem; white-space: nowrap; }
.ai-ok { color: #86efac; }
.ai-warn { color: #fcd34d; }
.ai-fail { color: #fca5a5; }

/* 全螢幕忙碌動畫 */
.busy-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(2,6,23,.72); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.busy-overlay.hidden { display: none; }
.busy-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 36px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 260px;
}
.busy-spinner { font-size: 2.6rem; animation: busy-bounce 1.1s ease-in-out infinite; }
@keyframes busy-bounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.12); } }
.busy-msg { font-size: .95rem; color: var(--text); }
.busy-dots { display: flex; gap: 6px; }
.busy-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  animation: busy-blink 1.2s infinite ease-in-out both;
}
.busy-dots span:nth-child(2) { animation-delay: .2s; }
.busy-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes busy-blink { 0%,80%,100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* 工具呼叫資訊：可折疊（結果預設收合） */
.tool-collapsible .ti-head {
  cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.tool-collapsible .ti-call {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.tool-collapsible .ti-toggle { color: var(--primary); font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
.tool-collapsible .ti-body {
  white-space: pre-wrap; word-break: break-word; margin-top: 6px;
  max-height: 320px; overflow-y: auto; font-size: .82rem; color: var(--text-dim);
}
.tool-collapsible.collapsed .ti-body { display: none; }

/* 週期清單刪除鈕 */
.grow-ci-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.grow-ci-del {
  background: none; border: none; cursor: pointer; font-size: .9rem; opacity: .55;
  padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.grow-ci-del:hover { opacity: 1; }

/* ── 頂層導覽精簡：把工程類分頁從主 nav 隱藏（只能由「🔧 工程」內部進入）── */
.tab.eng-hidden { display: none !important; }
/* 知識庫被搬到「文件管理」後，教學內部的「知識庫」 inner-tab 不再需要 */
.inner-tab[data-ittab="knowledge"] { display: none !important; }

/* docs-panel / engineering-panel 同 grow/safety 使用 fixed 定位 */
#docs-panel.active, #engineering-panel.active {
  position: fixed !important;
  top: 56px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  display: block !important; overflow-y: auto !important;
  padding: 0 !important; background: var(--bg) !important; z-index: 5 !important;
}
/* 工程頁的次級導覽 */
.eng-wrap { padding: 16px; }
.eng-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.eng-sub-btn {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: .9rem;
  transition: background .15s, border-color .15s;
}
.eng-sub-btn:hover { background: var(--surface2); border-color: var(--primary); }
.eng-sub-btn.eng-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.eng-hint { color: var(--text-dim); font-size: .82rem; padding: 8px 4px; }

/* 文件上傳：每檔狀態列 */
.kb-up-list { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.kb-up-item {
  display: flex; flex-direction: column; gap: 4px; font-size: .85rem;
  padding: 8px 10px; border-radius: 6px; background: var(--surface);
  border-left: 3px solid var(--border);
}
.kb-up-row { display: flex; align-items: center; gap: 8px; }
.kb-up-st { min-width: 7em; font-weight: 600; }
.kb-up-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-up-extra { color: var(--text-dim); font-size: .8rem; }
.kb-up-running { border-left-color: var(--primary); }
.kb-up-done { border-left-color: #22c55e; }
.kb-up-fail { border-left-color: var(--danger); }

/* 上傳進度條 */
.kb-up-bar {
  height: 4px; background: rgba(148,163,184,.18); border-radius: 2px; overflow: hidden;
  position: relative;
}
.kb-up-bar-fill {
  height: 100%; width: 0; background: var(--primary, #3b82f6);
  transition: width .35s ease;
}
.kb-up-bar-fill.indeterminate {
  width: 30% !important;
  animation: kb-up-slide 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, var(--primary, #3b82f6), transparent);
}
.kb-up-done .kb-up-bar-fill { background: #22c55e; }
.kb-up-fail .kb-up-bar-fill { background: #ef4444; }
.kb-up-err {
  font-size: .78rem; color: #fca5a5;
  background: rgba(239,68,68,.08); padding: 4px 8px; border-radius: 4px;
  white-space: pre-wrap; word-break: break-all;
}
@keyframes kb-up-slide {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(380%); }
}

/* 等待中項目的「⏳」脈動 */
.kb-up-item:not(.kb-up-running):not(.kb-up-done):not(.kb-up-fail) .kb-up-st {
  animation: kb-up-pulse 1.6s ease-in-out infinite;
}
@keyframes kb-up-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* 文件管理頁：純文件管理，藏掉 Q&A 區、內部 sub-tabs、以圖搜圖／管理視圖 */
#docs-host .kb-panel-tabs { display: none !important; }
#docs-host .knowledge-ask-area { display: none !important; }
#docs-host #kb-imgsearch-view { display: none !important; }
#docs-host #kb-manage-view { display: none !important; }
/* 左右分欄：左=介紹/上傳/狀態  右=section title + 清單（JS 已包成兩個容器）*/
#docs-host .knowledge-layout { display: block !important; padding: 16px 24px; }
#docs-host .knowledge-upload-area {
  display: flex !important;
  flex-direction: row !important;
  gap: 28px;
  width: 100% !important;
  max-width: 1600px !important;
  min-width: 0 !important;
  margin: 0 auto;
  padding: 0 !important;
  border-right: none !important;
  background: transparent !important;
  overflow: visible !important;
  align-items: flex-start;
}
#docs-host .docs-left {
  flex: 0 0 340px; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
}
#docs-host .docs-right {
  flex: 1 1 0; min-width: 0;
}
#docs-host .docs-left > * { max-width: none; margin: 0; }
#docs-host .docs-right > * { max-width: none; margin: 0; }
#docs-host .kb-section-title { margin: 0 0 8px; padding: 0; border: none; }
#docs-host .upload-box { padding: 18px 16px; }
@media (max-width: 900px) {
  #docs-host .knowledge-upload-area { flex-direction: column !important; }
  #docs-host .docs-left { flex: 0 0 auto; width: 100%; }
  #docs-host .docs-right { width: 100%; }
}

/* 文件管理：搜尋＋分類過濾列 */
.kb-doc-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0 12px;
}
.kb-doc-toolbar input[type="text"] {
  flex: 0 0 240px; padding: 6px 10px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.kb-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-cat-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: .8rem;
  transition: all .15s;
}
.kb-cat-chip:hover { border-color: var(--primary); }
.kb-cat-chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 文件項目的分類小標籤 */
.kb-doc-cat {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  background: rgba(59,130,246,.15); color: #93c5fd;
  border: 1px solid rgba(59,130,246,.35);
  border-radius: 999px; font-size: .72rem; font-weight: 500;
}
.kb-doc-cat-empty { background: rgba(148,163,184,.12); color: var(--text-dim); border-color: var(--border); }
.kb-doc-cat:hover { filter: brightness(1.15); }

/* 文件說明（給 AI 看的「這檔是什麼」）*/
.kb-doc-desc {
  font-size: .76rem; color: #cbd5e1; margin-top: 4px;
  padding: 3px 8px; background: rgba(59,130,246,.08);
  border-left: 2px solid rgba(59,130,246,.35);
  border-radius: 0 4px 4px 0; cursor: pointer;
}
.kb-doc-desc:hover { background: rgba(59,130,246,.14); }
.kb-doc-desc-empty { color: var(--text-dim); font-style: italic; background: transparent; border-left-color: var(--border); }

/* 聊天訊息 — 修正按鈕（老師才看得到） */
.msg.assistant { position: relative; }
.msg-correct-btn {
  position: absolute; right: 6px; bottom: 6px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 8px; font-size: .72rem; cursor: pointer;
  opacity: 0; transition: opacity .2s, background .2s, color .2s;
}
.msg.assistant:hover .msg-correct-btn { opacity: 1; }
.msg-correct-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.msg-corrected-tag {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  background: rgba(34,197,94,.15); color: #86efac;
  border-radius: 999px; font-size: .72rem;
}

/* 文件清單：緊湊單行 + 分類分組 */
.kb-doc-list { border-top: 1px solid var(--border); }
.kb-doc-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1.6fr) auto auto minmax(0, 1.4fr) auto;
  gap: 10px; align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.kb-doc-row:hover { background: rgba(255,255,255,.03); }
.kb-doc-row .kb-doc-icon { font-size: 1rem; }
.kb-doc-row .kb-doc-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.kb-doc-row .kb-doc-meta {
  color: var(--text-dim); font-size: .72rem; white-space: nowrap;
}
.kb-doc-row .kb-doc-cat {
  margin: 0; padding: 1px 7px; font-size: .68rem;
  white-space: nowrap;
}
.kb-doc-row .kb-doc-desc-inline {
  font-size: .74rem; color: #94a3b8; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; background: transparent; border: none; border-radius: 0;
  margin: 0; cursor: pointer;
}
.kb-doc-row .kb-doc-desc-inline:hover { color: #93c5fd; }
.kb-doc-row .kb-doc-desc-empty { color: var(--text-dim); opacity: .5; }
.kb-doc-row:hover .kb-doc-desc-empty { opacity: 1; }
.kb-doc-row .kb-doc-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.kb-doc-row:hover .kb-doc-actions { opacity: 1; }
.kb-doc-row-new { background: rgba(34,197,94,.06); animation: kb-new-fade 5s ease; }
@keyframes kb-new-fade { 0% { background: rgba(34,197,94,.18); } 100% { background: rgba(34,197,94,.06); } }

/* 分類分組 */
.kb-group { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: var(--surface); }
.kb-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  background: rgba(59,130,246,.06);
  border-left: 3px solid var(--primary);
  user-select: none;
}
.kb-group-head:hover { background: rgba(59,130,246,.12); }
.kb-group-arrow { font-size: .8rem; transition: transform .15s; }
.kb-group-name { font-weight: 600; flex: 1; color: #cbd5e1; font-size: .9rem; }
.kb-group-count { color: var(--text-dim); font-size: .75rem; }
.kb-group-collapsed .kb-group-arrow { transform: rotate(-90deg); }
.kb-group-collapsed .kb-group-items { display: none; }

/* 響應式：太窄就縮起說明 */
@media (max-width: 900px) {
  .kb-doc-row { grid-template-columns: 22px 1fr auto auto auto; }
  .kb-doc-row .kb-doc-desc-inline { display: none; }
}

/* 文件卡片網格（取代單行式） */
.kb-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 10px 4px;
}
.kb-doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.kb-doc-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.kb-doc-card-head { display: flex; gap: 10px; align-items: flex-start; }
.kb-doc-card-icon {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.kb-doc-card-title { flex: 1; min-width: 0; }
.kb-doc-card-name {
  font-weight: 600; font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-doc-card-ext {
  font-size: .68rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 2px;
}
.kb-doc-card-meta {
  display: flex; flex-direction: column; gap: 3px;
  font-size: .76rem; color: var(--text-dim);
}
.kb-doc-card-desc {
  font-size: .76rem; color: #cbd5e1; font-style: italic;
  padding: 5px 8px;
  background: rgba(59,130,246,.06);
  border-left: 2px solid rgba(59,130,246,.4);
  border-radius: 0 4px 4px 0;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  cursor: pointer;
}
.kb-doc-card-desc:hover { background: rgba(59,130,246,.12); }
.kb-doc-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border);
}
.kb-doc-card-actions { display: flex; gap: 4px; }

/* 不同副檔名的色塊 */
.kb-icon-pdf     { background: rgba(239,68,68,.18); color: #fca5a5; }
.kb-icon-docx    { background: rgba(59,130,246,.18); color: #93c5fd; }
.kb-icon-xlsx    { background: rgba(34,197,94,.18); color: #86efac; }
.kb-icon-img     { background: rgba(168,85,247,.18); color: #d8b4fe; }
.kb-icon-txt     { background: rgba(148,163,184,.18); color: #cbd5e1; }
.kb-icon-default { background: rgba(148,163,184,.12); color: var(--text-dim); }

/* 新上傳的卡片淡綠色閃一下 */
.kb-doc-card-new { border-color: #22c55e; animation: kb-card-fade 5s ease; }
@keyframes kb-card-fade { 0% { background: rgba(34,197,94,.12); } 100% { background: var(--surface); } }


/* ──────────────────────────────────────────────────────────────────
   📱 平板（≤1024px）+ 手機（≤768px / 480px）優化
   ────────────────────────────────────────────────────────────────── */

/* 平板 */
@media (max-width: 1024px) {
  header { padding: 10px 16px; gap: 16px; }
  header h1 { font-size: 1.05rem; }
  .auth-info { min-width: unset; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .grow-cards { grid-template-columns: 1fr; }
  .grow-chart-wrap { height: 220px; }
  #cam-latest { max-height: 420px; }
  .cam-metrics { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .modal-box { width: 92vw !important; }
}

/* 手機（橫向 + 直向）*/
@media (max-width: 768px) {
  body { font-size: 14px; }
  header {
    padding: 8px 10px; gap: 10px;
    flex-wrap: wrap;
  }
  header h1 { font-size: 1rem; }
  nav { flex-wrap: wrap; gap: 2px; flex: 1 1 100%; order: 99; }
  .tab { padding: 6px 10px; font-size: .82rem; }
  .auth-box { gap: 4px; }
  .auth-info { font-size: .72rem; max-width: 100px; }

  main, .panel { overflow-x: hidden; }

  /* 栽種頁 */
  .grow-sidebar { width: 100%; }
  .grow-layout { flex-direction: column; }
  .grow-detail-head { gap: .5rem; }
  .grow-detail-head h2 { font-size: 1rem; }
  .grow-d-actions button, .grow-d-actions a {
    padding: 6px 10px !important; font-size: .82rem !important;
  }
  .grow-card { padding: .6rem .7rem; }
  .grow-card h4 { font-size: .88rem; }
  .grow-chart-wrap { height: 200px; }

  /* 相機 */
  #cam-latest { max-height: 340px; }
  .cam-band { padding: 3px 8px; font-size: .78rem; }
  .cam-metrics { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
  .cam-badge { padding: 6px 8px; }
  .cam-badge-wide { grid-column: span 1; }

  /* 表格 — 橫向滾動避免擠爆 */
  .grow-mini-table, .grow-env-wrap { overflow-x: auto; }
  .grow-mini-table table, .grow-env-wrap table { font-size: .8rem; min-width: 480px; }

  /* 聊天 */
  #chat-form { gap: 6px; padding: 8px; }
  #chat-input { padding: 8px 12px; font-size: .92rem; }

  /* 文件管理：強制堆疊（覆寫 docs-host 那段 desktop flex） */
  #docs-host .knowledge-upload-area { flex-direction: column !important; gap: 14px; }
  #docs-host .docs-left { flex: 0 0 auto; width: 100%; }
  #docs-host .docs-right { width: 100%; }
  .kb-doc-grid { grid-template-columns: 1fr; }

  /* Modal — 全寬 */
  .modal-box { width: 96vw !important; max-height: 88vh; overflow-y: auto; }

  /* 工程頁次級按鈕：可橫向滾動 */
  .eng-sub-btn { padding: 6px 10px; font-size: .82rem; }
}

/* 小手機 */
@media (max-width: 480px) {
  header { padding: 6px 8px; }
  header h1 { font-size: .9rem; }
  .tab { padding: 5px 8px; font-size: .76rem; }
  .grow-detail-head h2 { font-size: .95rem; }
  .grow-chart-wrap { height: 180px; }
  #cam-latest { max-height: 260px; }
}