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

:root {
  --bg: #f7f8fa;
  --sidebar-bg: #18181b;
  --sidebar-text: #a1a1aa;
  --sidebar-active: #ffffff;
  --sidebar-accent: #6366f1;
  --card-bg: #ffffff;
  --surface: #ffffff;
  --border: #e4e4e7;
  --border-strong: #d1d5db;
  --text: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-placeholder: #9ca3af;
  --danger: #ef4444;
  --error: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;
  --info: #3b82f6;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-light: #eef2ff;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.20);
  /* 間距 scale（新功能一律引用，勿再目測填 px）*/
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  /* 字級 scale（對齊既有實際用值，body=14=--fs-md）*/
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
  /* 字重 scale */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* z-index 階梯（modal 需在內容之上、toast 之下）*/
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 9999;
  /* transition 時長 */
  --transition: 0.12s;
  --transition-slow: 0.3s;
  /* 整站放大倍率（1 = 原始大小）。改這一個值即可整站等比縮放 */
  --ui-zoom: 1.1;
  /* 圖表類別配色（20 色）：10 色相×2 明度階、相鄰色差夠大（任兩色最小 RGB 距≈67）；圓餅／圖例依序取用不循環 */
  --cat-1: #b62020; --cat-2: #3e20b6; --cat-3: #49df85; --cat-4: #b67a20; --cat-5: #9820b6;
  --cat-6: #49dfdf; --cat-7: #98b620; --cat-8: #b6207a; --cat-9: #4985df; --cat-10: #3eb620;
  --cat-11: #df4949; --cat-12: #6749df; --cat-13: #20b65c; --cat-14: #dfa349; --cat-15: #c149df;
  --cat-16: #20b6b6; --cat-17: #c1df49; --cat-18: #df49a3; --cat-19: #205cb6; --cat-20: #67df49;
}

/* 深色模式：Notion 風溫暖中性灰，非冷藍黑；邊框極細微 */
[data-theme="dark"] {
  --bg: #191919;
  --sidebar-bg: #202020;
  --sidebar-text: rgba(255,255,255,0.55);
  --sidebar-active: #ffffff;
  --card-bg: #202020;
  --surface: #202020;
  --border: #2e2e2e;
  --border-strong: #3d3d3d;
  --text: rgba(255,255,255,0.82);
  --text-secondary: rgba(255,255,255,0.62);
  --text-muted: rgba(255,255,255,0.44);
  --text-placeholder: rgba(255,255,255,0.30);
  --primary-hover: #7c7ff5;
  --primary-light: rgba(99,102,241,0.22);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.55);
  /* 同一組 20 色類別配色的深色階（對深色面板調亮，非直接翻色）*/
  --cat-1: #dd4b4b; --cat-2: #684bdd; --cat-3: #90eab4; --cat-4: #dda24b; --cat-5: #c04bdd;
  --cat-6: #90eaea; --cat-7: #c0dd4b; --cat-8: #dd4ba2; --cat-9: #90b4ea; --cat-10: #68dd4b;
  --cat-11: #ea9090; --cat-12: #a290ea; --cat-13: #4bdd85; --cat-14: #eac690; --cat-15: #d890ea;
  --cat-16: #4bdddd; --cat-17: #d8ea90; --cat-18: #ea90c6; --cat-19: #4b85dd; --cat-20: #a2ea90;
}

/* 寫死淺色的中性面板 → 改用變數 */
[data-theme="dark"] .topbar,
[data-theme="dark"] .page-header { background: var(--surface); }
[data-theme="dark"] .field-input,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .login-box { background: var(--surface); }
/* 輸入框一律白底黑字，不隨深色模式切換（辨識度優先於配色一致） */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea { background: #fff; color: #111827; }
/* 輸入框強制白底 → placeholder 也要配深灰；否則深色模式的近白 --text-placeholder 印在白底上＝隱形
   （症狀：只靠 placeholder 當說明的欄位如「新增 Repo」的標籤／Git URL 看起來是兩個空框，不知要填什麼） */
[data-theme="dark"] .form-control::placeholder { color: #9ca3af; }
[data-theme="dark"] .btn-outline:hover:not(:disabled) { background: #2a2a2a; border-color: #4a4a4a; }
[data-theme="dark"] .setting-block-footer { background: #262626; }
[data-theme="dark"] .tab-badge { background: #333333; color: rgba(255,255,255,0.75); }

/* 任務卡片狀態底色 → 柔和半透明 */
[data-theme="dark"] .task-card.needs-action { background: rgba(245,158,11,0.10); }
[data-theme="dark"] .task-card.batch-selected { background: rgba(99,102,241,0.14); }

/* 對話泡泡 */
[data-theme="dark"] .conv-msg.ai { background: #232733; border-color: #313849; }
[data-theme="dark"] .conv-msg.user { background: #1b2620; border-color: #294032; }
[data-theme="dark"] .conv-msg.system { background: #202020; }

/* Stepper */
[data-theme="dark"] .step-connector { background: #333333; }
[data-theme="dark"] .step-circle { background: #202020; border-color: #3d3d3d; color: rgba(255,255,255,0.4); }

/* 錯誤訊息 */
[data-theme="dark"] .error-msg { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); }

/* 狀態徽章：柔和半透明底 + 亮色文字，保留語意色 */
[data-theme="dark"] .status-badge.new,
[data-theme="dark"] .status-badge.coding_running,
[data-theme="dark"] .status-badge.wiki_updating { background: rgba(59,130,246,0.16); color: #93c5fd; }
[data-theme="dark"] .status-badge.analysis_running { background: rgba(139,92,246,0.16); color: #c4b5fd; }
[data-theme="dark"] .status-badge.confirm_pending,
[data-theme="dark"] .status-badge.final_pending,
[data-theme="dark"] .status-badge.clarify_pending,
[data-theme="dark"] .status-badge.cs_data_needed { background: rgba(245,158,11,0.16); color: #fcd34d; }
[data-theme="dark"] .status-badge.confirm_answered,
[data-theme="dark"] .status-badge.qa_running { background: rgba(16,185,129,0.16); color: #6ee7b7; }
[data-theme="dark"] .status-badge.done,
[data-theme="dark"] .status-badge.deploy_ready { background: rgba(34,197,94,0.16); color: #86efac; }
[data-theme="dark"] .status-badge.deploy_pending,
[data-theme="dark"] .status-badge.deploy_fixing { background: rgba(249,115,22,0.16); color: #fdba74; }
[data-theme="dark"] .status-badge.stopped,
[data-theme="dark"] .status-badge.triage_blocked,
[data-theme="dark"] .status-badge.merge_conflict { background: rgba(239,68,68,0.16); color: #fca5a5; }
[data-theme="dark"] .status-badge.branch_pending { background: rgba(14,165,233,0.16); color: #7dd3fc; }
[data-theme="dark"] .status-badge.merge_running { background: rgba(168,85,247,0.16); color: #d8b4fe; }
[data-theme="dark"] .status-badge.cs_running,
[data-theme="dark"] .status-badge.cs_reply_pending { background: rgba(217,70,239,0.16); color: #f0abfc; }

/* 卷軸 */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 5px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* ── 任務卡片 chips（來源 / 專案 / 測試機）── */
.src-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; text-decoration: none; display: inline-block; }
.src-odoo    { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.src-service { background: #f3e8ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.src-default { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border); }
.proj-chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #e0f2fe; color: #0369a1; cursor: pointer; border: 1px solid #bae6fd; font-weight: 500; }
.env-chip { font-size: 11px; padding: 1px 8px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-secondary); text-decoration: none; background: var(--surface); }

[data-theme="dark"] .src-odoo    { background: rgba(59,130,246,0.16);  color: #93c5fd; border-color: rgba(59,130,246,0.30); }
[data-theme="dark"] .src-service { background: rgba(168,85,247,0.18);  color: #d8b4fe; border-color: rgba(168,85,247,0.35); }
[data-theme="dark"] .proj-chip   { background: rgba(14,165,233,0.16);  color: #7dd3fc; border-color: rgba(14,165,233,0.30); }

/* ── 語意狀態 pill（淺底＋語意色字，dark-aware）── */
.pill { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid transparent; display: inline-block; }
.pill-info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.pill-success { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.pill-warn    { background: #fefce8; color: #ca8a04; border-color: #fde68a; }
.pill-danger  { background: #fff5f5; color: #dc2626; border-color: #fca5a5; }
[data-theme="dark"] .pill-info    { background: rgba(59,130,246,0.16); color: #93c5fd; border-color: rgba(59,130,246,0.30); }
[data-theme="dark"] .pill-success { background: rgba(34,197,94,0.16);  color: #86efac; border-color: rgba(34,197,94,0.30); }
[data-theme="dark"] .pill-warn    { background: rgba(245,158,11,0.16); color: #fcd34d; border-color: rgba(245,158,11,0.30); }
[data-theme="dark"] .pill-danger  { background: rgba(239,68,68,0.16);  color: #fca5a5; border-color: rgba(239,68,68,0.30); }

/* setting-block-footer 警示變體（測試模式）dark-aware */
.setting-block-footer.warn { background: #fffbeb; border-top-color: #fde68a; }
[data-theme="dark"] .setting-block-footer.warn { background: rgba(245,158,11,0.10); border-top-color: rgba(245,158,11,0.30); }

body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
/* 整體介面放大：zoom 會把子樹的 100vh 也放大→需把根高度改成 calc(100vh / zoom)，
   縮放後剛好等於一個視窗高，才不會裁掉 sidebar footer／內容底部 */
body { zoom: var(--ui-zoom); height: calc(100vh / var(--ui-zoom)); }

#app { display: flex; height: 100%; }

/* ── Sidebar ───────────────────────── */
.sidebar { width: 220px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-header { padding: 18px 16px 10px; }
.sidebar-header strong { display: block; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.sidebar-header span { font-size: 11px; color: var(--sidebar-text); }
.sidebar nav { flex: 1; padding: 6px 8px; min-height: 0; overflow-y: auto; }
.sidebar nav a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; color: var(--sidebar-text); text-decoration: none; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.12s, color 0.12s; }
.sidebar nav a:hover { background: rgba(255,255,255,0.07); color: #e5e7eb; }
.sidebar nav a.active { background: rgba(99,102,241,0.18); color: #fff; font-weight: 500; }
.sidebar nav a .badge { margin-left: auto; background: var(--danger); color: #fff; border-radius: 9px; padding: 1px 7px; font-size: 11px; font-weight: 600; min-width: 18px; text-align: center; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.sidebar-footer a { font-size: 12px; color: var(--sidebar-text); text-decoration: none; cursor: pointer; }
.sidebar-footer a:hover { color: #fff; }
.usage-mini { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; padding: 6px 8px; margin-left: -8px; margin-right: -8px; border-radius: var(--radius-sm); transition: background 0.12s; }
.usage-mini:hover { background: rgba(255,255,255,0.05); }
.usage-mini:hover .usage-title { opacity: 1; color: #e5e7eb; }
.usage-title { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--sidebar-text); opacity: 0.7; }
.usage-stale { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.85; }
.usage-row-top { display: flex; justify-content: space-between; font-size: 10px; color: var(--sidebar-text); margin-bottom: 3px; }
.usage-track { height: 4px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.usage-fill { height: 100%; border-radius: 3px; background: var(--sidebar-accent); transition: width 0.3s ease; }
.usage-fill.warn { background: var(--warning); }
.usage-fill.crit { background: var(--danger); }
.usage-reset { font-size: 9px; color: var(--sidebar-text); opacity: 0.55; text-align: right; margin-top: 2px; }

/* ── Main layout ───────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; align-items: stretch; }
.content { flex: 1; overflow-y: auto; padding: 20px 24px; min-width: 0; }
.page-body { flex: 1; overflow-y: auto; padding: 28px 32px; min-width: 0; }

/* ── Old topbar (task list etc.) ───────────────────────── */
.topbar { padding: 12px 24px; border-bottom: 1px solid var(--border); background: #fff; display: flex; align-items: center; gap: 12px; min-height: 52px; }
.topbar h1 { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; }

/* ── New page header / body (settings pages) ───────────────────────── */
.page-header { padding: 20px 32px 0; background: #fff; border-bottom: 1px solid var(--border); }
.page-header-inner { padding-bottom: 16px; }
.page-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }

/* ── Setting layout ───────────────────────── */
.settings-layout { display: flex; flex-direction: column; gap: 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }

/* 管理工具導覽卡 */
.settings-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); margin: 8px 2px 0; }
.nav-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.nav-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.nav-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.nav-card-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-card-arrow { color: var(--text-muted); font-size: 15px; transition: transform .15s, color .15s; }
.nav-card:hover .nav-card-arrow { transform: translateX(3px); color: var(--primary); }
.nav-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; }

.setting-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.setting-block-head { padding: 20px 24px 16px; }
.setting-block-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.setting-block-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.setting-block-body { padding: 0 24px 8px; }
.setting-block-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; background: #fafafa; }

/* Connection group (Odoo / eService inside a block) */
.conn-group { padding: 12px 0 4px; }
.conn-group + .conn-group { border-top: 1px solid var(--border); }
.conn-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--primary); margin-bottom: 12px;
}
.conn-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.conn-fields-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 0 8px; }
.field-item { display: flex; flex-direction: column; gap: 5px; }
.field-item-narrow { grid-column: span 1; max-width: 220px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.field-label-hint { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.field-input {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.field-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.field-input::placeholder { color: var(--text-placeholder); }
.field-input:disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }
.field-input.error { border-color: var(--danger); }

/* ── Settings page (personal) ─── */
.settings-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
}

/* ── Buttons ───────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: background 0.12s, box-shadow 0.12s, opacity 0.12s; white-space: nowrap; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-outline { background: #fff; color: var(--text-secondary); border: 1px solid var(--border-strong); }
.btn-outline:hover:not(:disabled) { background: var(--bg); border-color: #9ca3af; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { opacity: 0.88; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover:not(:disabled) { opacity: 0.88; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.tab-badge { display: inline-block; min-width: 18px; text-align: center; background: #e5e7eb; color: #374151; border-radius: 9px; padding: 0 5px; margin-left: 5px; font-size: 11px; font-weight: 600; line-height: 1.6; }
.tab-badge.tab-badge-active { background: rgba(255,255,255,0.25); color: #fff; }

/* ── Form helpers ───────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); background: #fff; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.form-control { width: 100%; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.form-control::placeholder { color: var(--text-placeholder); }
.form-control-error { border-color: var(--danger) !important; }
.form-error { font-size: 12px; color: var(--danger); margin-bottom: 10px; }
.label-hint { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.hint-text { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.section-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.section-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; }

/* ── Task list ───────────────────────── */
.task-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px; cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s; position: relative; overflow: hidden; }
.task-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.task-card.needs-action { border-left: 4px solid var(--warning); background: #fffbeb; }
.task-card.stopped { border-left: 3px solid var(--danger); }
.task-card.paused { border-left: 3px solid #9ca3af; opacity: 0.75; }
.task-card.done { border-left: 3px solid var(--success); }
.task-card.archived { border-left: 3px dashed #94a3b8; opacity: 0.6; }
.task-card.batch-selected { border-left: 3px solid var(--primary) !important; background: #eff6ff; }
.task-card.processing { border-left: 3px solid var(--primary); }
.task-card.processing::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%); animation: cardSweep 1.8s ease-in-out infinite; }
@keyframes cardSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(59,130,246,0.2); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.75s linear infinite; flex-shrink: 0; margin-right: 5px; vertical-align: middle; }
.pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); animation: pulseDot 1.4s ease-in-out infinite; flex-shrink: 0; margin-right: 5px; vertical-align: middle; }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
.task-card .task-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.task-card .task-title { font-size: 14px; font-weight: 600; flex: 1; margin-right: 12px; color: var(--text); }
.task-card .task-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.task-card .task-source { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }

.status-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.status-badge.new { background: #eff6ff; color: #1d4ed8; }
.status-badge.analysis_running { background: #f5f3ff; color: #6d28d9; }
.status-badge.confirm_pending, .status-badge.final_pending, .status-badge.clarify_pending { background: #fffbeb; color: #92400e; }
.status-badge.confirm_answered { background: #ecfdf5; color: #065f46; }
.status-badge.coding_running { background: #eff6ff; color: #1e40af; }
.status-badge.qa_running { background: #ecfdf5; color: #065f46; }
.status-badge.deploy_pending { background: #fff7ed; color: #9a3412; }
.status-badge.done { background: #f0fdf4; color: #166534; }
.status-badge.stopped, .status-badge.triage_blocked { background: #fef2f2; color: #991b1b; }
.status-badge.branch_pending { background: #f0f9ff; color: #0369a1; }
.status-badge.merge_running { background: #fdf4ff; color: #7e22ce; }
.status-badge.merge_conflict { background: #fef2f2; color: #b91c1c; }
.status-badge.deploy_ready { background: #f0fdf4; color: #15803d; }
.status-badge.deploy_fixing { background: #fff7ed; color: #c2410c; }
.status-badge.wiki_updating { background: #eff6ff; color: #1d4ed8; }
.status-badge.cs_running, .status-badge.cs_reply_pending { background: #fdf4ff; color: #86198f; }
.status-badge.cs_data_needed { background: #fffbeb; color: #92400e; }

/* ── 圓餅放大 modal ──────────────────── */
.pie-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: var(--space-4); }
.pie-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); max-width: 90vw; max-height: 90vh; overflow: auto; }
.pie-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--text); }
.pie-modal-close { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text-muted); padding: 2px 6px; }
.pie-modal-close:hover { color: var(--text); }
.pie-modal-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.pie-modal-caption { font-size: var(--fs-md); color: var(--text); min-height: 22px; display: flex; align-items: center; gap: 8px; }
.pie-modal-caption .caption-hint { color: var(--text-muted); }
.pie-modal-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; width: 100%; max-width: 360px; font-size: var(--fs-sm); }
.pie-modal-legend > div { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); cursor: default; padding: 2px 4px; border-radius: var(--radius-sm); }
.pie-modal-legend > div.lg-active { background: var(--primary-light); color: var(--text); }
.pie-slice { cursor: pointer; transition: opacity 0.12s; }

/* ── Stepper ──────────────────────── */
.stepper { display: flex; align-items: flex-start; width: 100%; padding-top: 8px; }
.step-node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step-connector { flex: 1; height: 2px; background: #e5e7eb; margin-top: 9px; }
.sc-done  { background: var(--success); }
.sc-error { background: var(--danger); }
.step-circle {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #d1d5db; background: #fff; color: #9ca3af;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; line-height: 1; flex-shrink: 0;
}
.sn-done   .step-circle { background: var(--success); border-color: var(--success); color: #fff; }
.sn-active .step-circle { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }
.sn-error  .step-circle { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.step-label { font-size: 9px; color: #9ca3af; margin-top: 3px; text-align: center; max-width: 44px; line-height: 1.2; white-space: nowrap; }
.sn-done   .step-label { color: var(--success); }
.sn-active .step-label { color: var(--primary); font-weight: 600; }
.sn-error  .step-label { color: var(--danger); }

/* ── Conv / Task detail ───────────────────────── */
.conv-log { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.conv-row { display: flex; flex-direction: column; align-items: flex-start; }
.conv-row.user { align-items: flex-end; }
.conv-msg { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; line-height: 1.6; max-width: 85%; white-space: pre-wrap; }
.conv-msg.ai { background: #f0f4ff; align-self: flex-start; border: 1px solid #dde3ff; }
.conv-msg.user { background: #f0fdf4; align-self: flex-end; border: 1px solid #bbf7d0; }
.conv-msg.system { background: #f9fafb; align-self: flex-start; color: var(--text-muted); font-size: 12px; font-style: italic; max-width: 85%; border: 1px solid var(--border); }
.conv-msg-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* 使用者自己貼的長 LOG：預設收合成標籤，點開展開全文（dark-aware，勿寫死淺色底） */
.conv-log-chip { align-self: flex-end; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.conv-log-chip:hover { color: var(--text); border-color: var(--text-muted); }
.conv-log-pre { align-self: flex-end; max-width: 85%; margin-top: 6px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 12px; line-height: 1.5; max-height: 320px; overflow: auto; white-space: pre; }
/* 對話時間軸獨立面板：用 --bg（比 card 深一階，深色模式 surface 與 card 同色會糊在一起）做內凹面板＋邊框，和上下區塊明確區隔 */
.conv-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 var(--space-4); max-height: 420px; overflow-y: auto; }
.conv-loadmore { align-self: center; margin-bottom: 6px; font-size: var(--fs-sm); padding: 5px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-family: inherit; }
.conv-loadmore:hover { color: var(--text); border-color: var(--text-muted); }
.conv-panel .conv-log { margin: 0; }
/* 時間軸下方動作區與對話面板拉開，加分隔線 */
.timeline-action { border-top: 1px solid var(--border); padding-top: var(--space-4); }

/* ── Modal / Dialog（共用；取代原生 confirm/prompt）── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: var(--z-modal); }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 440px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); padding: var(--space-5) var(--space-6) var(--space-3); }
.modal-body { padding: 0 var(--space-6); font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.7; }
.modal-body code { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; font-size: var(--fs-base); color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
.modal-fade-enter-active, .modal-fade-leave-active { transition: opacity var(--transition) ease; }
.modal-fade-enter-from, .modal-fade-leave-to { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .modal-fade-enter-active, .modal-fade-leave-active { transition: none; } }
/* 深色模式下，同色系 --surface 卡片會糊進深色頁面背景＝跳窗浮不起來。此 modifier 用抬升色＋強邊框讓它明顯浮出（淺色模式白卡本就有對比，不需覆寫）*/
[data-theme="dark"] .modal-elevated { background: #2b2b2b; border-color: var(--border-strong); }

/* ── Data table（共用；取代各頁手刻 <table>）── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.data-table thead th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); background: var(--bg); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.data-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:hover { background: var(--bg); }
.data-table .empty-row td { padding: var(--space-6); text-align: center; color: var(--text-muted); }

/* ── Skeleton（共用；取代純文字「載入中」）── */
.skeleton { display: block; background: linear-gradient(90deg, var(--border) 25%, var(--border-strong) 37%, var(--border) 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeletonShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: .6; } }

/* ── Toasts ───────────────────────── */
.toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast { padding: 10px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.18); animation: toastIn 0.2s ease; max-width: 340px; }
.toast.info { background: var(--info); }
.toast.success { background: var(--success); }
.toast.warn { background: var(--warning); }
.toast.error { background: var(--danger); }
@keyframes toastIn { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.processing-icon { display: inline-block; animation: spin 1s linear infinite; font-style: normal; line-height: 1; }

/* ── Login ───────────────────────── */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; background: var(--sidebar-bg); }
.login-box { background: #fff; border-radius: var(--radius-lg); padding: 36px 40px; width: 380px; box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.3px; }
.login-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.error-msg { background: #fef2f2; border: 1px solid #fecaca; color: var(--danger); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }

/* ── 註冊精靈：左右分欄（左窄步驟／右寬表單）───────── */
.login-box.register-box { width: 760px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; }
.register-split { display: flex; align-items: stretch; }
.register-aside { width: 210px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); padding: 32px 22px; }
.register-aside .login-title { color: var(--sidebar-active); }
.register-aside .login-sub { color: var(--sidebar-text); margin-bottom: 0; }
.register-steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.register-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--fs-base); color: var(--sidebar-text); }
.register-step .rs-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); flex-shrink: 0; background: rgba(255,255,255,0.12); }
.register-step.is-active { background: rgba(255,255,255,0.08); color: var(--sidebar-active); font-weight: var(--fw-semibold); }
.register-step.is-active .rs-num { background: var(--primary); color: #fff; }
.register-step.is-done { color: var(--sidebar-active); }
.register-step.is-done .rs-num { background: var(--success); color: #fff; }
.register-cancel { margin-top: 22px; padding: 0; background: none; border: 0; cursor: pointer; font-size: var(--fs-sm); color: var(--sidebar-text); }
.register-cancel:hover { color: var(--sidebar-active); }
.register-main { flex: 1; min-width: 0; padding: 32px 36px; }
.register-step-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: 16px; color: var(--text); }
@media (max-width: 640px) {
  .login-box.register-box { width: 100%; }
  .register-split { flex-direction: column; }
  .register-aside { width: auto; padding: 22px; }
  .register-steps { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .register-main { padding: 22px; }
}

/* ── Task detail ───────────────────────── */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); text-decoration: none; margin-bottom: 16px; cursor: pointer; }
.back-link:hover { color: var(--text); }
.detail-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.detail-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.2px; }
.detail-meta { font-size: 13px; color: var(--text-muted); display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.answer-box { margin-top: 16px; }
.answer-box textarea { width: 100%; height: 80px; resize: vertical; }
.answer-actions { display: flex; gap: 8px; margin-top: 8px; }

/* 失敗原因卡片（兩段式：警示標頭＋處理表單），dark-aware 取代原本寫死淺紅色 */
.blocker-card { border: 1px solid #fca5a5; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-4); }
.blocker-card-head { background: #fff5f5; padding: 10px var(--space-3); font-size: var(--fs-base); white-space: pre-wrap; color: #991b1b; }
.blocker-card-head strong { color: #dc2626; }
.blocker-card-body { background: var(--surface); padding: var(--space-3); border-top: 1px solid #fca5a5; }
[data-theme="dark"] .blocker-card { border-color: rgba(239,68,68,0.35); }
[data-theme="dark"] .blocker-card-head { background: rgba(239,68,68,0.14); color: #fca5a5; }
[data-theme="dark"] .blocker-card-head strong { color: #fca5a5; }
[data-theme="dark"] .blocker-card-body { border-top-color: rgba(239,68,68,0.35); }
.blocker-card-body textarea { border-color: #fca5a5; }
[data-theme="dark"] .blocker-card-body textarea { border-color: rgba(239,68,68,0.35); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state p { font-size: 14px; margin-top: 8px; }
.loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; }

/* ── Project card ─── */
.project-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow 0.12s, border-color 0.12s;
  box-shadow: var(--shadow-sm);
}
.project-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.project-card-name { font-size: 16px; font-weight: 600; color: var(--text); }

/* ── form-section (old style, kept for compat) ─── */
.form-section { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 12px; }

/* ── 審核 diff 檢視（TaskDetail review）──── */
.diff-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  max-height: 420px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.diff-line { white-space: pre; color: var(--text-secondary); }
.diff-line.diff-add { color: var(--success); }
.diff-line.diff-del { color: var(--danger); }
.diff-line.diff-hunk { color: var(--info); }
.diff-line.diff-meta { color: var(--text-muted); font-weight: 600; }