/* =========================================================
   Candidate Match Center — Warm Dark Theme
   Palette: 土 / 火 / 金 · dark only
   ========================================================= */

:root {
  /* Backgrounds — earth tones */
  --bg-body:      #1C1917;   /* graphite black */
  --bg-sidebar:   #1F1B18;   /* slightly deeper */
  --bg-card:      #292524;   /* warm charcoal */
  --bg-elevated:  #37322E;   /* dropdown / drawer */
  --bg-hover:     rgba(41, 37, 36, 0.6);
  --border:       #44403C;
  --border-strong:#57534E;

  /* Text — warm whites */
  --text-strong:  #F5F5F0;   /* ivory */
  --text-body:    #D6D3D1;
  --text-muted:   #A8A29E;
  --text-disabled:#78716C;

  /* Accents — fire / earth / gold, no water/wood */
  --accent-primary:  #F4A825;  /* amber gold — brand */
  --accent-secondary:#FF6B35;  /* warm orange — activity */
  --accent-primary-2:#E8A317;  /* gold — success/match */
  --accent-primary-3:#DC7633;  /* burnt orange — warn */
  --accent-primary-4:#C0392B;  /* brick red — error */

  /* Score bands — all warm */
  --band-strong-bg:   rgba(232, 163, 23, 0.14);
  --band-strong-fg:   #F5D06F;
  --band-strong-line: #E8A317;

  --band-caveat-bg:   rgba(244, 168, 37, 0.14);
  --band-caveat-fg:   #F4A825;
  --band-caveat-line: #F4A825;

  --band-borderline-bg:rgba(220, 118, 51, 0.14);
  --band-borderline-fg:#F09C6E;
  --band-borderline-line:#DC7633;

  --band-drop-bg:     rgba(192, 57, 43, 0.14);
  --band-drop-fg:     #E88579;
  --band-drop-line:   #C0392B;

  /* Client brand colors preserved */
  --client-smbc:  #00A040;   /* SMBC green — brand identity */
  --client-ctbc:  #003DA5;
  --client-cathay:#5D3D8C;
  --client-hsbc:  #DB0011;
  --client-bea:   #C8102E;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  26px;
  --text-3xl:  32px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* Shadow (subtle warm) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.45);

  /* Layout */
  --sidebar-w: 244px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-body);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

.hidden { display: none !important; }

/* Lucide icon styling */
.lucide {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.lucide-sm { width: 14px; height: 14px; }
.lucide-md { width: 18px; height: 18px; }
.lucide-lg { width: 22px; height: 22px; }
.lucide-xl { width: 28px; height: 28px; }

/* =========================================================
   App shell
   ========================================================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* Watermark for demo build */
.demo-watermark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: linear-gradient(90deg, #DC7633, #F4A825);
  color: #1C1917;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 12px;
}
body.has-watermark { padding-top: 24px; }

/* =========================================================
   Sidebar
   ========================================================= */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 8px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 12px;
  border-bottom: 1px solid var(--border);
}
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #F4A825, #DC7633);
  display: grid;
  place-items: center;
  color: #1C1917;
}
.brand-name { font-weight: 700; font-size: var(--text-md); color: var(--text-strong); }
.brand-sub  { font-size: var(--text-xs); color: var(--text-muted); }

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.nav-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  padding: 10px 10px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-section-title .tag-manager {
  background: rgba(244, 168, 37, 0.15);
  color: var(--accent-primary);
  border: 1px solid rgba(244, 168, 37, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--text-base);
  cursor: pointer;
  position: relative;
  transition: background 120ms, color 120ms;
  text-align: left;
  width: 100%;
}
.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-body);
}
.nav-item:hover .lucide {
  color: var(--text-body);
}
.nav-item.active {
  background: var(--bg-card);
  color: var(--text-strong);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent-primary);
  border-radius: 0 3px 3px 0;
}
.nav-item.active .lucide {
  color: var(--accent-primary);
}
.nav-item .lucide {
  color: var(--text-muted);
  transition: color 120ms;
}
.nav-item .badge {
  margin-left: auto;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
}
.nav-item .badge-new {
  background: rgba(244, 168, 37, 0.18);
  color: var(--accent-primary);
  font-weight: 600;
}
.nav-item .badge-dot {
  margin-left: auto;
  width: 6px;
  height: 6px;
  background: var(--accent-secondary);
  border-radius: 50%;
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 6px;
}

/* User chip */
.user-chip {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: relative;
}
.user-chip:hover { background: var(--bg-elevated); }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12.5px;
  color: #1C1917;
  background: linear-gradient(135deg, #F4A825, #DC7633);
  flex-shrink: 0;
  overflow: hidden;
}
.avatar.alt1 { background: linear-gradient(135deg, #E8A317, #DC7633); }
.avatar.alt2 { background: linear-gradient(135deg, #DC7633, #C0392B); }
.avatar.alt3 { background: linear-gradient(135deg, #F4A825, #E8A317); }
.avatar.alt4 { background: linear-gradient(135deg, #A66A38, #7A4A28); }
.avatar.sm   { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.md   { width: 34px; height: 34px; font-size: 12.5px; }
.avatar.lg   { width: 46px; height: 46px; font-size: 15px; }
.avatar.xl   { width: 60px; height: 60px; font-size: 20px; }
.avatar img  { width: 100%; height: 100%; object-fit: cover; }

.user-meta { flex: 1; min-width: 0; }
.user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.role-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.role-dot.manager   { background: var(--accent-primary); }
.role-dot.recruiter { background: var(--accent-secondary); }

.user-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
}
.user-menu-title {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--text-disabled);
  padding: 6px 8px;
  letter-spacing: 0.06em;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
  width: 100%;
  color: var(--text-body);
  text-align: left;
  cursor: pointer;
}
.user-menu-item:hover { background: var(--bg-card); }
.user-menu-item.active { background: var(--bg-card); color: var(--text-strong); }
.user-menu-item .lucide-check { margin-left: auto; color: var(--accent-primary); }

/* =========================================================
   Main area
   ========================================================= */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  background: rgba(28, 25, 23, 0.85);
  backdrop-filter: blur(12px);
  z-index: 40;
}
body.has-watermark .topbar { top: 24px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.breadcrumb .sep { color: var(--text-disabled); }
.breadcrumb .current { color: var(--text-strong); font-weight: 500; }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 12px;
  min-width: 280px;
}
.search-box:focus-within {
  border-color: var(--accent-primary);
  background: var(--bg-elevated);
}
.search-box input {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-body);
}
.search-box .kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border: 1px solid transparent;
  position: relative;
}
.icon-btn:hover {
  background: var(--bg-card);
  color: var(--text-body);
}
.icon-btn.active { background: var(--bg-card); color: var(--accent-primary); }
.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent-secondary);
  color: #1C1917;
  font-size: 9.5px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg-body);
}

.content {
  padding: 24px 28px;
  flex: 1;
  overflow-x: hidden;
}

/* =========================================================
   Notification drawer
   ========================================================= */
.notif-drawer {
  position: fixed;
  top: calc(var(--topbar-h) + 8px);
  right: 20px;
  width: 380px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
body.has-watermark .notif-drawer { top: calc(var(--topbar-h) + 32px); }
.notif-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-header h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
}
.notif-header button {
  color: var(--accent-primary);
  font-size: var(--text-xs);
}
.notif-list {
  overflow-y: auto;
  padding: 6px;
}
.notif {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
}
.notif:hover { background: var(--bg-card); }
.notif.unread { background: rgba(244, 168, 37, 0.05); }
.notif.unread::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-primary);
}
.notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--bg-card);
  color: var(--text-muted);
}
.notif-icon.match  { background: rgba(232, 163, 23, 0.15); color: var(--band-strong-fg); }
.notif-icon.assign { background: rgba(244, 168, 37, 0.15); color: var(--accent-primary); }
.notif-icon.meet   { background: rgba(255, 107, 53, 0.15); color: var(--accent-secondary); }
.notif-icon.client { background: rgba(220, 118, 51, 0.15); color: var(--accent-primary-3); }

.notif-body { flex: 1; min-width: 0; }
.notif-title {
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-weight: 500;
  margin-bottom: 2px;
}
.notif-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
.notif-time {
  font-size: 10.5px;
  color: var(--text-disabled);
  margin-top: 3px;
}

/* =========================================================
   HOME — chat + result full viewport
   ========================================================= */
.home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: calc(100vh - var(--topbar-h) - 48px);
}
body.has-watermark .home { height: calc(100vh - var(--topbar-h) - 48px - 24px); }

.chat-panel, .result-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-header h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-header .header-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

/* Agent D badge in header */
.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 100px;
}
.agent-badge .agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary-2);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-msg {
  display: flex;
  gap: 10px;
  max-width: 88%;
}
.chat-msg.agent { align-self: flex-start; }
.chat-msg.user  { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.msg-avatar.agent {
  background: linear-gradient(135deg, #F4A825, #DC7633);
  color: #1C1917;
}
.msg-avatar.user {
  background: linear-gradient(135deg, #F4A825, #DC7633);
  color: #1C1917;
  font-weight: 700;
  font-size: 11px;
}

.msg-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: 1.55;
}
.chat-msg.user .msg-bubble {
  background: rgba(244, 168, 37, 0.14);
  border-color: rgba(244, 168, 37, 0.3);
  color: var(--text-strong);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-body);
  font-size: var(--text-xs);
  padding: 5px 11px;
  cursor: pointer;
  transition: all 120ms;
}
.chip:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--text-strong);
}
.chip.active {
  background: rgba(244, 168, 37, 0.15);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.chat-input-wrap {
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  background: var(--bg-card);
}
.chat-quick-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.chat-input-box {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.chat-input-box:focus-within {
  border-color: var(--accent-primary);
}
.chat-input-box textarea {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 140px;
  font-size: var(--text-base);
  color: var(--text-strong);
  line-height: 1.4;
}
.chat-input-box textarea::placeholder { color: var(--text-disabled); }
.send-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--accent-primary);
  color: #1C1917;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.send-btn:hover { background: #FFBF44; }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Result panel */
.result-empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}
.result-empty .empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-disabled);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.result-empty h3 {
  margin: 0 0 6px;
  font-size: var(--text-lg);
  color: var(--text-body);
  font-weight: 500;
}
.result-empty p {
  margin: 0;
  font-size: var(--text-sm);
  max-width: 300px;
}

.result-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

/* Match card */
.match-card {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 12px;
}
.match-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.match-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F4A825, #DC7633);
  color: #1C1917;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.match-title {
  flex: 1;
  min-width: 0;
}
.match-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.match-id-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 400;
}
.match-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.match-actions {
  display: flex;
  gap: 6px;
}
.action-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-body);
  display: grid;
  place-items: center;
  transition: all 120ms;
}
.action-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.action-btn.call:hover { color: var(--accent-primary-2); border-color: var(--accent-primary-2); }
.action-btn.email:hover { color: var(--accent-secondary); border-color: var(--accent-secondary); }

.score-band {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 600;
}
.score-band.strong     { background: var(--band-strong-bg);     color: var(--band-strong-fg); }
.score-band.caveat     { background: var(--band-caveat-bg);     color: var(--band-caveat-fg); }
.score-band.borderline { background: var(--band-borderline-bg); color: var(--band-borderline-fg); }
.score-band.drop       { background: var(--band-drop-bg);       color: var(--band-drop-fg); }

.score-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}

.match-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.match-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 120ms;
}
.match-row:hover {
  border-color: var(--accent-primary);
  transform: translateX(2px);
}
.match-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #F5F5F0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  font-family: var(--font-mono);
}
.match-row-body { min-width: 0; }
.match-row-title {
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-row-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.match-row .score-value { text-align: right; min-width: 40px; }

/* =========================================================
   DASHBOARD
   ========================================================= */
.dash-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
}
.dash-header h1 {
  margin: 0 0 4px;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-strong);
}
.dash-header .sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.dash-header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-body);
  cursor: pointer;
  transition: all 120ms;
}
.btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.btn-primary {
  background: var(--accent-primary);
  color: #1C1917;
  border-color: var(--accent-primary);
}
.btn-primary:hover { background: #FFBF44; color: #1C1917; }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text-strong); background: var(--bg-card); }
.btn-sm { padding: 5px 10px; font-size: var(--text-xs); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.widget.editing {
  border-style: dashed;
  border-color: var(--accent-primary);
}
.widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.widget-header h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-strong);
}
.widget-header .action-link {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--accent-primary);
}
.widget-tag {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 500;
}

.widget-remove {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--text-muted);
  display: none;
  place-items: center;
}
.widget-remove:hover { background: var(--bg-elevated); color: var(--accent-primary-4); }
.widget.editing .widget-remove { display: grid; }

/* Client market updates rows */
.client-updates {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.client-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.client-row:last-child { border: none; }
.client-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #FFF;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10.5px;
  flex-shrink: 0;
}
.client-avatar.smbc   { background: var(--client-smbc); }
.client-avatar.ctbc   { background: var(--client-ctbc); }
.client-avatar.cathay { background: var(--client-cathay); }
.client-avatar.hsbc   { background: var(--client-hsbc); }
.client-avatar.bea    { background: var(--client-bea); }
.client-row-body { flex: 1; min-width: 0; }
.client-row-title {
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.client-row-tag {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(244, 168, 37, 0.18);
  color: var(--accent-primary);
  font-weight: 500;
}
.client-row-tag.rumor {
  background: rgba(220, 118, 51, 0.18);
  color: var(--accent-primary-3);
}
.client-row-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Interview progress */
.progress-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.progress-kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 8px;
  text-align: center;
}
.progress-kpi.emphasize {
  border-color: var(--accent-primary);
  background: rgba(244, 168, 37, 0.08);
}
.progress-kpi.final {
  border-color: var(--accent-primary-2);
  background: rgba(232, 163, 23, 0.08);
}
.progress-kpi .num {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-strong);
  font-family: var(--font-mono);
  line-height: 1;
}
.progress-kpi.emphasize .num { color: var(--accent-primary); }
.progress-kpi.final .num { color: var(--accent-primary-2); }
.progress-kpi .label {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

.interview-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.interview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--border);
}
.interview-item.final { border-left-color: var(--accent-primary-2); }
.interview-item.round2 { border-left-color: var(--accent-primary); }
.interview-stage {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 2px 6px;
  background: var(--bg-card);
  border-radius: 4px;
  text-transform: uppercase;
}
.interview-stage.final { color: var(--accent-primary-2); }
.interview-stage.round2 { color: var(--accent-primary); }
.interview-body { flex: 1; min-width: 0; }
.interview-title {
  font-size: var(--text-xs);
  color: var(--text-strong);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interview-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Meetings widget */
.meeting-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meeting-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.meeting-when {
  text-align: center;
  min-width: 44px;
  flex-shrink: 0;
}
.meeting-when .day {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.meeting-when .time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-primary);
  font-weight: 700;
}
.meeting-body { flex: 1; min-width: 0; }
.meeting-title {
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.3;
}
.meeting-meta {
  font-size: 10.5px;
  color: var(--text-muted);
}
.meeting-action {
  flex-shrink: 0;
}

/* Custom widget placeholders */
.watch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  margin-bottom: 8px;
}
.watch-item .lucide { color: var(--accent-primary); }
.watch-title { font-size: var(--text-sm); color: var(--text-strong); }
.watch-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-primary);
  font-weight: 700;
}

/* Widget picker modal */
.widget-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.widget-choice {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  transition: all 120ms;
  background: var(--bg-card);
}
.widget-choice:hover {
  border-color: var(--accent-primary);
  background: var(--bg-elevated);
}
.widget-choice .lucide {
  color: var(--accent-primary);
  margin-bottom: 8px;
}
.widget-choice h4 {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  color: var(--text-strong);
}
.widget-choice p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* =========================================================
   AI RECORD — 3 columns
   ========================================================= */
.ai-record {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 16px;
  height: calc(100vh - var(--topbar-h) - 100px);
}
body.has-watermark .ai-record { height: calc(100vh - var(--topbar-h) - 100px - 24px); }
.record-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.recorder {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.record-btn {
  padding: 14px 24px;
  background: var(--accent-primary-4);
  color: #F5F5F0;
  border-radius: 100px;
  font-weight: 600;
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.record-btn:hover { background: #D14A3B; }
.record-btn.recording { background: var(--bg-elevated); border: 1px solid var(--accent-primary-4); color: var(--accent-primary-4); }
.timer {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--text-strong);
  margin: 16px 0 8px;
  font-weight: 700;
}
.waveform {
  height: 40px;
  margin: 8px auto 12px;
  max-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.waveform span {
  display: inline-block;
  width: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
  animation: wave 1.2s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { height: 8px; }
  50% { height: 26px; }
}
.speakers {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.speaker-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-body);
}

.save-destinations {
  padding: 16px;
  border-top: 1px solid var(--border);
}
.sd-title {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.sd-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sd-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-body);
}
.sd-option:hover { background: var(--bg-elevated); }
.sd-option.checked {
  border-color: var(--accent-primary);
  background: rgba(244, 168, 37, 0.08);
  color: var(--text-strong);
}
.sd-option input { display: none; }

.transcript {
  overflow-y: auto;
  padding: 16px;
  flex: 1;
}
.transcript-line {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: 1.5;
  display: flex;
  gap: 10px;
}
.transcript-line:last-child { border: none; }
.transcript-speaker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  min-width: 40px;
}
.transcript-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-disabled);
  min-width: 44px;
}

/* =========================================================
   Format CV
   ========================================================= */
.formatcv-layout {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 16px;
  min-height: calc(100vh - var(--topbar-h) - 120px);
}
.cv-templates, .cv-actions {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.tmpl-title {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.tmpl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  cursor: pointer;
  font-size: var(--text-sm);
}
.tmpl-item:hover { background: var(--bg-elevated); }
.tmpl-item.selected {
  border-color: var(--accent-primary);
  background: rgba(244, 168, 37, 0.08);
}
.tmpl-preview {
  width: 34px;
  height: 44px;
  background: var(--bg-elevated);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.cv-preview {
  background: #F5F5F0;
  color: #1C1917;
  border-radius: var(--r-lg);
  padding: 40px;
  overflow-y: auto;
  font-family: 'Georgia', serif;
  line-height: 1.6;
}
.cv-preview h1 {
  margin: 0 0 4px;
  font-size: 24px;
  color: #1C1917;
}
.cv-preview .headline {
  font-size: 13px;
  color: #57534E;
  margin-bottom: 16px;
  font-style: italic;
}
.cv-preview h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #DC7633;
  border-bottom: 1px solid #D6D3D1;
  padding-bottom: 4px;
  margin: 20px 0 10px;
}
.cv-preview .job {
  margin-bottom: 12px;
}
.cv-preview .job-title {
  font-weight: 700;
  color: #1C1917;
  font-size: 14px;
}
.cv-preview .job-meta {
  font-size: 12px;
  color: #57534E;
  margin-bottom: 6px;
}
.cv-preview ul { margin: 4px 0 0 20px; padding: 0; font-size: 13px; }

/* =========================================================
   1-Click Update
   ========================================================= */
.oc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.oc-header h1 {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--text-strong);
  font-weight: 700;
}
.oc-search-bar {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
}
.oc-search-bar:focus-within { border-color: var(--accent-primary); }
.oc-search-bar input {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-body);
}
.oc-search-bar input::placeholder { color: var(--text-disabled); }

.oc-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.oc-picker-chip {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.oc-picker-chip:hover { background: var(--bg-elevated); color: var(--text-strong); }
.oc-picker-chip.active {
  background: var(--bg-elevated);
  color: var(--text-strong);
}
.oc-picker-chip.active .dot { background: var(--accent-primary); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-disabled); }

.oc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.oc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  cursor: pointer;
  transition: all 120ms;
  border-left: 3px solid var(--border);
}
.oc-card:hover {
  border-color: var(--accent-primary);
}
.oc-card.smbc   { border-left-color: var(--client-smbc); }
.oc-card.ctbc   { border-left-color: var(--client-ctbc); }
.oc-card.cathay { border-left-color: var(--client-cathay); }
.oc-card.hsbc   { border-left-color: var(--client-hsbc); }
.oc-card.bea    { border-left-color: var(--client-bea); }

.oc-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.oc-card-header .client-avatar { width: 30px; height: 30px; }
.oc-card-header h3 {
  margin: 0;
  font-size: var(--text-md);
  color: var(--text-strong);
  font-weight: 600;
}
.oc-card-header .refresh-time {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.oc-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.oc-kpi-item {
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  padding: 8px 6px;
  text-align: center;
}
.oc-kpi-item .n {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1;
}
.oc-kpi-item .l {
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.oc-kpi-item.flag .n { color: var(--accent-primary-3); }

.oc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.oc-tab {
  padding: 10px 14px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  border-bottom: 2px solid transparent;
  transition: all 120ms;
}
.oc-tab:hover { color: var(--text-body); background: rgba(41, 37, 36, 0.3); }
.oc-tab.active {
  color: var(--text-strong);
  border-bottom-color: var(--accent-primary);
}

.oc-list-item {
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.oc-list-title {
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-weight: 500;
  margin-bottom: 3px;
}
.oc-list-meta {
  font-size: 10.5px;
  color: var(--text-muted);
}
.oc-list-body { flex: 1; }
.oc-list-tag {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.oc-list-tag.flag { background: rgba(220, 118, 51, 0.15); color: var(--accent-primary-3); }

/* =========================================================
   Calendar
   ========================================================= */
.cal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.cal-header h1 { margin: 0; font-size: var(--text-xl); color: var(--text-strong); font-weight: 700; }
.cal-view-toggle {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  margin-left: auto;
}
.cal-view-toggle button {
  padding: 5px 14px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-radius: var(--r-sm);
}
.cal-view-toggle button.active {
  background: var(--bg-elevated);
  color: var(--text-strong);
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-week {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.cal-day-header {
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.cal-day-header:last-child { border-right: none; }
.cal-day-header .name { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; }
.cal-day-header .num { font-size: 18px; color: var(--text-strong); font-weight: 700; }
.cal-day-header.today .num { color: var(--accent-primary); }
.cal-hour {
  padding: 6px 6px 6px 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
  min-height: 44px;
}
.cal-slot {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  position: relative;
  padding: 3px;
}
.cal-slot:last-of-type { border-right: none; }
.cal-event {
  background: rgba(244, 168, 37, 0.15);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10.5px;
  color: var(--text-strong);
  cursor: pointer;
  margin-bottom: 3px;
}
.cal-event.final { border-left-color: var(--accent-primary-2); background: rgba(232, 163, 23, 0.15); }
.cal-event.meeting { border-left-color: var(--accent-secondary); background: rgba(255, 107, 53, 0.12); }
.cal-event .ev-time { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }

/* Day view */
.cal-day {
  display: grid;
  grid-template-columns: 80px 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.day-hour {
  padding: 14px 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
  min-height: 70px;
}
.day-slot {
  border-bottom: 1px solid var(--border);
  min-height: 70px;
  padding: 6px;
  position: relative;
}
.day-event {
  background: rgba(244, 168, 37, 0.12);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: pointer;
  margin-bottom: 6px;
}
.day-event.final { border-left-color: var(--accent-primary-2); background: rgba(232, 163, 23, 0.12); }
.day-event.meeting { border-left-color: var(--accent-secondary); background: rgba(255, 107, 53, 0.1); }
.day-event .ev-title {
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-weight: 500;
  margin-bottom: 3px;
}
.day-event .ev-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Month view */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.month-cell {
  min-height: 88px;
  padding: 6px 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.month-cell .date { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.month-cell.today .date { color: var(--accent-primary); }
.month-cell.other .date { color: var(--text-disabled); }
.month-cell .m-event {
  background: rgba(244, 168, 37, 0.15);
  border-radius: 3px;
  font-size: 10px;
  padding: 2px 5px;
  color: var(--text-body);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   Data tables (Candidates / Contacts / Jobs / Clients)
   ========================================================= */
.tbl-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tbl-header h1 {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--text-strong);
  font-weight: 700;
}
.tbl-header .count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.tbl-header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.data-table thead {
  background: var(--bg-elevated);
}
.data-table th {
  padding: 12px 14px;
  text-align: left;
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 12px 14px;
  font-size: var(--text-sm);
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:hover { background: var(--bg-elevated); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .row-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.data-table .row-name {
  color: var(--text-strong);
  font-weight: 500;
}
.data-table .row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.data-table .status-active   { color: var(--band-strong-fg); }
.data-table .status-hold     { color: var(--band-caveat-fg); }
.data-table .status-filled   { color: var(--text-muted); }

.tag-list { display: flex; gap: 4px; flex-wrap: wrap; }
.tag {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* =========================================================
   Team (Manager only)
   ========================================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}
.team-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.team-name { font-size: var(--text-md); color: var(--text-strong); font-weight: 600; }
.team-role { font-size: var(--text-xs); color: var(--text-muted); }
.team-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.team-kpi-item {
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  padding: 10px 6px;
  text-align: center;
}
.team-kpi-item .n { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text-strong); }
.team-kpi-item .l { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; margin-top: 3px; }

/* =========================================================
   Team Chat
   ========================================================= */
.teamchat {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  height: calc(100vh - var(--topbar-h) - 48px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
body.has-watermark .teamchat { height: calc(100vh - var(--topbar-h) - 48px - 24px); }

.tc-sidebar {
  border-right: 1px solid var(--border);
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
}
.tc-search {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.tc-search input {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.tc-section-title {
  font-size: 10.5px;
  color: var(--text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 14px 6px;
}
.tc-conv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.tc-conv:hover { background: var(--bg-card); }
.tc-conv.active {
  background: var(--bg-card);
  border-left-color: var(--accent-primary);
}
.tc-conv-body { flex: 1; min-width: 0; }
.tc-conv-name {
  font-size: var(--text-sm);
  color: var(--text-strong);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-conv-last {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-conv .unread-badge {
  background: var(--accent-primary);
  color: #1C1917;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 100px;
  font-weight: 700;
}

.tc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tc-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.tc-header h3 { margin: 0; font-size: var(--text-md); color: var(--text-strong); font-weight: 600; }
.tc-header .meta { font-size: var(--text-xs); color: var(--text-muted); }

.tc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tc-msg {
  display: flex;
  gap: 10px;
  max-width: 78%;
}
.tc-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.tc-msg .avatar { width: 32px; height: 32px; font-size: 11px; }
.tc-msg-body { min-width: 0; }
.tc-msg-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-msg.me .tc-msg-meta { justify-content: flex-end; }
.tc-msg-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.5;
}
.tc-msg.me .tc-msg-bubble {
  background: rgba(244, 168, 37, 0.14);
  border-color: rgba(244, 168, 37, 0.3);
  color: var(--text-strong);
}
.mention {
  color: var(--accent-primary);
  background: rgba(244, 168, 37, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 12px;
}
.shared-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
  margin-top: 6px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.shared-card .lucide { color: var(--accent-primary); }
.shared-card-title { font-size: var(--text-xs); color: var(--text-strong); font-weight: 600; }
.shared-card-meta { font-size: 10px; color: var(--text-muted); }

.tc-input {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  background: var(--bg-card);
}
.tc-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
}
.tc-input-row textarea {
  flex: 1;
  min-height: 34px;
  max-height: 100px;
  resize: none;
  color: var(--text-strong);
  font-size: var(--text-sm);
}
.tc-hint {
  font-size: 10.5px;
  color: var(--text-disabled);
  margin-top: 6px;
}

/* =========================================================
   Modals
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-header h2 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-strong);
  font-weight: 600;
  flex: 1;
}
.modal-close {
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}
.modal-close:hover { background: var(--bg-card); color: var(--text-strong); }
.modal-body {
  padding: 20px;
  overflow-y: auto;
}

/* Settings */
.settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}
.settings-tab {
  padding: 12px 14px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.settings-tab.active {
  color: var(--text-strong);
  border-bottom-color: var(--accent-primary);
}
.settings-section-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.settings-block { margin-bottom: 24px; }

.integration-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  background: var(--bg-card);
}
.integration-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.integration-body { flex: 1; min-width: 0; }
.integration-name { font-size: var(--text-sm); color: var(--text-strong); font-weight: 600; }
.integration-desc { font-size: var(--text-xs); color: var(--text-muted); }
.badge-status {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.badge-status.connected { background: rgba(232, 163, 23, 0.15); color: var(--band-strong-fg); }
.badge-status.disconnected { background: var(--bg-elevated); color: var(--text-muted); }
.badge-status.coming { background: rgba(244, 168, 37, 0.15); color: var(--accent-primary); }

/* Voice section */
.voice-toggle {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.voice-opt {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--bg-card);
  opacity: 0.5;
  cursor: not-allowed;
}
.voice-opt.selected { border-color: var(--accent-primary); color: var(--text-strong); }
.coming-tag {
  display: inline-block;
  background: rgba(244, 168, 37, 0.15);
  color: var(--accent-primary);
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 8px;
}

/* Avatar picker */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.avatar-choice {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #1C1917;
  transition: all 120ms;
}
.avatar-choice:hover { transform: scale(1.08); }
.avatar-choice.selected {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(244, 168, 37, 0.2);
}

/* Company research card (Search new client) */
.company-research {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-top: 16px;
}
.research-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.research-title {
  font-size: var(--text-lg);
  color: var(--text-strong);
  font-weight: 600;
}
.research-badge {
  background: rgba(244, 168, 37, 0.15);
  color: var(--accent-primary);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 600;
}
.research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.research-item {
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
}
.research-item-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.research-item-value {
  font-size: var(--text-sm);
  color: var(--text-strong);
}

/* =========================================================
   Notes / House Rules / Architecture (misc)
   ========================================================= */
.doc-page {
  max-width: 920px;
}
.doc-page h1 { color: var(--text-strong); font-size: var(--text-2xl); margin: 0 0 8px; }
.doc-page h2 { color: var(--text-strong); font-size: var(--text-lg); margin: 24px 0 8px; }
.doc-page p { color: var(--text-body); }
.doc-page code {
  font-family: var(--font-mono);
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--accent-primary);
}
.doc-page pre {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.6;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1280px) {
  .dash-grid, .oc-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-record { grid-template-columns: 1fr 1fr; }
  .ai-record .record-col:nth-child(2) { display: none; }
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .home { grid-template-columns: 1fr; height: auto; min-height: 60vh; }
  .chat-panel { min-height: 500px; }
  .result-panel { min-height: 400px; }
  .formatcv-layout { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .oc-grid { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: 1fr; }
  .teamchat { grid-template-columns: 1fr; height: auto; min-height: 70vh; }
  .tc-sidebar { display: none; }
}

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .search-box { display: none; }
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* =========================================================
   PHP 版新增元件 — 全部沿用上面嘅設計 token
   ========================================================= */

/* ---------- 自檢帶 (DEBUG = true 先出現) ---------- */
.selftest{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;
  padding:7px 14px;background:var(--bg-elevated);
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:11px;line-height:1.6;
  color:var(--text-muted);position:relative;z-index:60;
}
.selftest-bad{background:#3B1512;border-bottom-color:var(--accent-primary-4)}
.selftest .stx-label{font-weight:700;color:var(--accent-primary);letter-spacing:.02em}
.selftest-bad .stx-label{color:#FF8A7A}
.selftest .stx-item{white-space:nowrap}
.selftest .stx-ok{color:var(--accent-primary-2)}
.selftest .stx-bad{color:#E88579;font-weight:600}
.selftest .stx-more{margin-left:auto;color:var(--text-muted);text-decoration:none}
.selftest .stx-more:hover{color:var(--accent-primary)}
.selftest .stx-close{
  background:none;border:0;color:var(--text-disabled);font-size:15px;
  cursor:pointer;padding:0 2px;line-height:1;
}
.selftest .stx-close:hover{color:var(--text-strong)}
.selftest-errors{
  background:#3B1512;color:#F8B4AD;padding:10px 14px;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.8;
  border-bottom:1px solid var(--accent-primary-4);
}

/* ---------- Flash 訊息 ---------- */
.flash{
  padding:11px 16px;border-radius:var(--r-md);margin-bottom:16px;
  font-size:var(--text-sm);border:1px solid var(--border);
  background:var(--bg-card);color:var(--text-body);
}
.flash-ok  {background:rgba(232,163,23,.12);border-color:var(--accent-primary-2);color:var(--band-strong-fg)}
.flash-warn{background:rgba(244,168,37,.12);border-color:var(--accent-primary);color:var(--band-caveat-fg)}
.flash-err {background:rgba(192,57,43,.14);border-color:var(--accent-primary-4);color:var(--band-drop-fg)}

/* ---------- 語言切換 ---------- */
.lang-switch{display:flex;gap:2px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:2px}
.lang-opt{
  padding:4px 9px;border-radius:4px;font-size:11.5px;font-weight:600;
  color:var(--text-muted);text-decoration:none;line-height:1.4;
}
.lang-opt:hover{color:var(--text-strong)}
.lang-opt.active{background:var(--accent-primary);color:#1C1917}

/* ---------- 分頁（前台後台共用） ---------- */
.pagination{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--border);
}
.pagination .pg-info{font-size:var(--text-xs);color:var(--text-muted)}
.pagination .pg-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 10px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--bg-card);color:var(--text-body);
  font-size:var(--text-sm);text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
a.pg-btn:hover{background:var(--bg-elevated);border-color:var(--border-strong);color:var(--text-strong)}
.pg-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);
  color:#1C1917;font-weight:700}
.pg-btn.disabled{opacity:.38;cursor:default}
.pg-gap{padding:0 4px;color:var(--text-disabled);font-size:var(--text-sm)}

/* ---------- 表格篩選列 ---------- */
.tbl-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tbl-filter input[type=text],
.tbl-filter select{
  height:32px;padding:0 10px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--bg-card);color:var(--text-body);
  font-family:inherit;font-size:var(--text-sm);outline:none;
}
.tbl-filter input[type=text]{min-width:160px}
.tbl-filter input[type=text]:focus,
.tbl-filter select:focus{border-color:var(--accent-primary)}
.tbl-empty{text-align:center;color:var(--text-muted);padding:28px 0!important}

/* ---------- Key/Value 表 ---------- */
.kv-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.kv-table th,
.kv-table td{padding:8px 0;border-bottom:1px solid rgba(68,64,60,.55);text-align:left;vertical-align:top}
.kv-table th{color:var(--text-muted);font-weight:500;width:38%;white-space:nowrap;padding-right:12px}
.kv-table td{color:var(--text-body)}
.kv-table tr:last-child th,.kv-table tr:last-child td{border-bottom:0}

/* ---------- House Rules 表 ---------- */
.rules-table .rules-section-row td{
  background:var(--bg-elevated);color:var(--accent-primary);
  font-weight:700;font-size:var(--text-xs);letter-spacing:.06em;
  text-transform:uppercase;padding:8px 12px;
}

/* ---------- Blog / Pages 卡 ---------- */
.blog-grid{align-items:start}
.blog-card{display:flex;flex-direction:column;gap:6px}
.blog-card .blog-cover{display:block;margin:-4px -4px 8px;border-radius:var(--r-md);overflow:hidden}
.blog-card .blog-cover img{display:block;width:100%;height:150px;object-fit:cover}
.blog-card h3 a{color:var(--text-strong);text-decoration:none}
.blog-card h3 a:hover{color:var(--accent-primary)}
.blog-meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:auto;padding-top:8px}
.blog-breadcrumb{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:10px}
.blog-breadcrumb a{color:var(--text-muted);text-decoration:none}
.blog-breadcrumb a:hover{color:var(--accent-primary)}
.blog-breadcrumb .sep{margin:0 6px;color:var(--text-disabled)}
.blog-hero{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-lg);margin:14px 0}
.blog-body{color:var(--text-body);font-size:var(--text-base);line-height:1.85}
.blog-body img{max-width:100%;height:auto;border-radius:var(--r-md)}
.blog-body a{color:var(--accent-primary)}

/* 客戶卡新聞行 */
.client-news-line{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  font-size:var(--text-xs);color:var(--text-muted);line-height:1.6;
}

/* 表格連結 */
.data-table .row-name a{color:var(--text-strong);text-decoration:none}
.data-table .row-name a:hover{color:var(--accent-primary)}

/* nav-item 由 <button> 改為 <a>，保持一致 */
a.nav-item{text-decoration:none}

@media (max-width:720px){
  .pagination{flex-direction:column;align-items:flex-start}
  .tbl-filter input[type=text]{min-width:120px}
}

/* =========================================================
   後台專用元件
   ========================================================= */

/* ---------- 表單 ---------- */
.admin-form{max-width:100%}
.form-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px 20px;
}
.form-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-row-wide{grid-column:1/-1}
.form-row > label{
  font-size:var(--text-sm);font-weight:600;color:var(--text-strong);
}
.form-row > label .req{color:var(--accent-primary-4);margin-left:2px}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=number],
.form-row input[type=date],
.form-row input[type=datetime-local],
.form-row input[type=file],
.form-row select,
.form-row textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--bg-body);color:var(--text-body);
  font-family:inherit;font-size:var(--text-sm);line-height:1.6;outline:none;
  transition:border-color .15s;
}
.form-row textarea{resize:vertical;min-height:70px;font-family:var(--font-mono);font-size:12.5px}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--accent-primary)}
.form-row input:disabled,.form-row select:disabled{opacity:.5;cursor:not-allowed}
.field-hint{font-size:var(--text-xs);color:var(--text-muted);line-height:1.6}
.field-hint a{color:var(--accent-primary)}
.form-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
}
.switch{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text-body);cursor:pointer}
.switch input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary);cursor:pointer}

/* ---------- 統計卡 ---------- */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:18px;
}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px;text-decoration:none;display:block;
  transition:border-color .15s,transform .15s;
}
a.stat-card:hover{border-color:var(--accent-primary);transform:translateY(-2px)}
.stat-icon{color:var(--accent-primary);margin-bottom:8px}
.stat-n{font-size:var(--text-2xl);font-weight:700;color:var(--text-strong);line-height:1.1}
.stat-l{font-size:var(--text-xs);color:var(--text-muted);margin-top:3px}

/* ---------- 快速操作 ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.quick-btn{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--bg-body);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text-body);text-decoration:none;font-size:var(--text-sm);
  transition:border-color .15s,color .15s;
}
.quick-btn:hover{border-color:var(--accent-primary);color:var(--text-strong)}
.quick-btn code{margin-left:auto;font-family:var(--font-mono);color:var(--text-disabled)}

/* ---------- 表格 ---------- */
.data-table.compact th,
.data-table.compact td{padding:7px 10px;font-size:var(--text-sm)}
.inline-form{display:inline}
.action-btn.danger:hover{color:var(--band-drop-fg);border-color:var(--accent-primary-4)}
.tag-manager{
  background:rgba(244,168,37,.16);color:var(--accent-primary);
  border-color:rgba(244,168,37,.4)!important;
}

/* ---------- 登入頁 ---------- */
.login-body{
  min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(244,168,37,.08), transparent 60%),
    radial-gradient(800px 400px at 95% 110%, rgba(255,107,53,.06), transparent 60%),
    var(--bg-body);
}
.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-card{
  width:100%;max-width:400px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:30px 28px;box-shadow:var(--shadow-lg);
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.login-brand .brand-logo{width:42px;height:42px;flex:none}
.login-brand .brand-name{font-size:var(--text-lg);font-weight:700;color:var(--text-strong)}
.login-brand .brand-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.login-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
  font-size:var(--text-xs);
}
.login-foot a{color:var(--text-muted);text-decoration:none}
.login-foot a:hover{color:var(--accent-primary)}

/* 後台唔要 demo 水印留白 */
.admin-body .demo-watermark{display:none}

@media (max-width:720px){
  .form-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   CV / JD 入庫流程（首頁）
   ========================================================= */

/* ---------- 拖放覆蓋層 ---------- */
.chat-panel{position:relative}
.drop-overlay{
  position:absolute;inset:0;z-index:30;display:none;
  align-items:center;justify-content:center;text-align:center;
  background:rgba(28,25,23,.94);border:2px dashed var(--accent-primary);
  border-radius:var(--r-lg);color:var(--text-strong);
}
.drop-overlay.on{display:flex}
.drop-overlay h3{margin:10px 0 4px;font-size:var(--text-lg)}
.drop-overlay p{margin:0;color:var(--text-muted);font-size:var(--text-sm);
  font-family:var(--font-mono)}
.drop-overlay [data-icon]{color:var(--accent-primary)}

/* ---------- 目前模式提示條 ---------- */
.intake-mode{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  padding:7px 11px;border-radius:var(--r-sm);
  background:rgba(244,168,37,.12);border:1px solid rgba(244,168,37,.35);
  color:var(--accent-primary);font-size:var(--text-xs);font-weight:600;
}
.intake-mode .intake-file{color:var(--text-muted);font-weight:400;
  font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intake-mode button{
  margin-left:auto;background:none;border:0;cursor:pointer;
  color:var(--text-muted);font-size:16px;line-height:1;padding:0 2px;
}
.intake-mode button:hover{color:var(--text-strong)}

/* 離線狀態點 */
.agent-dot.off{background:var(--text-disabled);box-shadow:none;animation:none}

/* ---------- 解析預覽卡 ---------- */
.intake-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px;margin-bottom:12px;
}
.intake-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.intake-meta{font-size:var(--text-xs);color:var(--text-muted)}
.intake-summary{
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border);
  font-size:var(--text-sm);color:var(--text-body);line-height:1.7;
}
.intake-card .kv-table th{width:42%;font-size:var(--text-xs)}
.intake-card .kv-table td{font-size:var(--text-sm)}

/* ---------- 查重 ---------- */
.intake-dupes{
  background:rgba(244,168,37,.08);border:1px solid rgba(244,168,37,.3);
  border-radius:var(--r-md);padding:12px 14px;margin-bottom:12px;
}
.intake-dupes h4{
  margin:0 0 10px;font-size:var(--text-sm);color:var(--accent-primary);
  display:flex;align-items:center;gap:6px;
}
.dupe-row{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:8px 0;border-top:1px solid rgba(244,168,37,.18);
}
.dupe-row:first-of-type{border-top:0}
.dupe-name{font-size:var(--text-sm);color:var(--text-strong)}
.dupe-why{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}

.intake-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* ---------- 配對結果卡 ---------- */
.match-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px;
  transition:border-color .15s;
}
.match-card:hover{border-color:var(--border-strong)}
.match-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.match-name{color:var(--text-strong);text-decoration:none;font-weight:600;
  font-size:var(--text-sm);line-height:1.4}
.match-name:hover{color:var(--accent-primary)}
.match-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:3px}
.match-why{font-size:var(--text-sm);color:var(--text-body);margin-top:8px;line-height:1.65}
.match-points{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.match-points .pt{
  font-size:var(--text-xs);padding:3px 8px;border-radius:999px;
  border:1px solid var(--border);line-height:1.4;
}
.match-points .pt.good{color:var(--band-strong-fg);border-color:rgba(232,163,23,.35);
  background:rgba(232,163,23,.1)}
.match-points .pt.bad{color:var(--band-drop-fg);border-color:rgba(192,57,43,.35);
  background:rgba(192,57,43,.1)}

/* ---------- 載入中 ---------- */
.intake-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:46px 20px;text-align:center;
  color:var(--text-body);font-size:var(--text-sm);
}
.intake-loading-sub{font-size:var(--text-xs);color:var(--text-muted)}
.spinner{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--border);border-top-color:var(--accent-primary);
  animation:cmc-spin .8s linear infinite;
}
@keyframes cmc-spin{to{transform:rotate(360deg)}}

/* chip 做咗 <a> 都要一樣 */
a.chip{text-decoration:none}

/* =========================================================
   AI Record — 真錄音
   ========================================================= */
.record-btn.recording{
  background:var(--accent-primary-4);border-color:var(--accent-primary-4);
  color:#F5F5F0;animation:rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.45)}
  50%    {box-shadow:0 0 0 10px rgba(192,57,43,0)}
}

.waveform.live span{animation:none;transition:height .08s linear}

.rec-status{
  margin-top:10px;font-size:var(--text-xs);color:var(--text-muted);
  text-align:center;line-height:1.6;min-height:2.6em;
}
.rec-status.err{color:var(--band-drop-fg)}

.rec-secondary{margin-top:12px;display:flex;justify-content:center}

.transcript-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:56px 20px;text-align:center;color:var(--text-muted);
}
.transcript-empty [data-icon]{color:var(--text-disabled)}
.transcript-empty p{margin:0;font-size:var(--text-sm)}

.rec-summary{
  background:rgba(244,168,37,.08);border:1px solid rgba(244,168,37,.28);
  border-radius:var(--r-md);padding:12px 14px;margin:12px;
  font-size:var(--text-sm);color:var(--text-body);line-height:1.75;
}
.rec-summary h4{
  margin:0 0 8px;font-size:var(--text-xs);color:var(--accent-primary);
  text-transform:uppercase;letter-spacing:.06em;
  display:flex;align-items:center;gap:6px;
}
.rec-summary ul{margin:0;padding-left:18px}
.rec-summary li{margin-bottom:4px}

.rec-lines{padding:0 4px}

/* 錄音頁嘅儲存設定表單 */
.save-destinations .form-row{margin-bottom:10px}
.save-destinations .form-row > label{font-size:var(--text-xs);color:var(--text-muted);font-weight:500}
.save-destinations input[type=text],
.save-destinations select{
  width:100%;padding:7px 10px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--bg-body);color:var(--text-body);
  font-family:inherit;font-size:var(--text-sm);outline:none;
}
.save-destinations input[type=text]:focus,
.save-destinations select:focus{border-color:var(--accent-primary)}

/* =========================================================
   Dashboard widget（真資料版）
   ========================================================= */
.widget-choice.on{border-color:var(--accent-primary);background:rgba(244,168,37,.08)}
.widget-choice{position:relative}
.wc-state{
  position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);
}
.widget-choice.on .wc-state{color:var(--accent-primary)}

/* 會議時間格 */
.meeting-when{
  flex:none;width:48px;text-align:center;padding-top:2px;
}
.meeting-when .mw-day{
  font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--accent-primary);text-transform:uppercase;
}
.meeting-when .mw-time{
  font-size:var(--text-sm);color:var(--text-strong);
  font-family:var(--font-mono);margin-top:1px;
}

/* 轉換漏斗 */
.funnel{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.funnel-row{display:flex;align-items:center;gap:10px}
.funnel-label{width:74px;flex:none;font-size:var(--text-xs);color:var(--text-muted)}
.funnel-bar{flex:1;height:18px;background:var(--bg-body);border-radius:var(--r-sm);overflow:hidden}
.funnel-bar div{
  height:100%;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--accent-primary),var(--accent-primary-3));
}
.funnel-n{width:36px;text-align:right;font-size:var(--text-sm);
  color:var(--text-strong);font-weight:600;font-family:var(--font-mono)}

/* widget 內嘅連結 */
.cu-name a,.iv-cand a,.iv-job a{color:inherit;text-decoration:none}
.cu-name a:hover,.iv-cand a:hover,.iv-job a:hover{color:var(--accent-primary)}

/* 日曆：連結化嘅事件 + 圖例 */
a.cal-event,a.day-event,a.m-event{text-decoration:none;display:block}
a.cal-event:hover,a.day-event:hover{filter:brightness(1.25)}
.cal-event.interview{border-left-color:var(--accent-secondary);
  background:rgba(255,107,53,.12)}
.cal-view-toggle a{
  padding:5px 12px;font-size:var(--text-sm);color:var(--text-muted);
  text-decoration:none;border-radius:var(--r-sm);
}
.cal-view-toggle a.active{background:var(--accent-primary);color:#1C1917;font-weight:600}
.cal-view-toggle a:hover:not(.active){color:var(--text-strong)}
.cal-legend{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:14px;font-size:var(--text-xs);color:var(--text-body);
}
.cal-legend i.lg{
  display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:5px;vertical-align:-1px;background:var(--accent-primary);
}
.cal-legend i.lg.interview{background:var(--accent-secondary)}
.cal-legend i.lg.final{background:var(--accent-primary-2)}

/* 團隊聊天：日期分隔線、時間、輸入區 */
.tc-daysep{
  display:flex;align-items:center;gap:10px;margin:6px 0;
  font-size:var(--text-xs);color:var(--text-muted);
}
.tc-daysep::before,.tc-daysep::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.tc-msg-time{font-family:var(--font-mono);font-size:10px;color:var(--text-disabled)}
.tc-msg-meta .tag-manager{font-size:9px;padding:1px 5px}
.tc-msg-bubble a.mention{text-decoration:none}
.tc-composer{padding:12px 16px;border-top:1px solid var(--border)}
.tc-composer .tc-hint{margin-top:8px}
.tc-main .pagination{padding:0 16px;margin-top:0}
a.tc-conv{text-decoration:none}

/* =========================================================
   Format CV · 1-Click Update
   ========================================================= */
.cv-actions-bar{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--border);
}
.tmpl-name{font-size:var(--text-sm);color:var(--text-strong);font-weight:600}
.tmpl-desc{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.tmpl-preview.tp-classic{background:linear-gradient(180deg,#F5F5F0 0 22%,#D6D3D1 22% 26%,#F5F5F0 26%)}
.tmpl-preview.tp-modern{background:linear-gradient(180deg,#F4A825 0 16%,#F5F5F0 16%)}
.tmpl-preview.tp-compact{background:repeating-linear-gradient(180deg,#F5F5F0 0 5px,#E7E5E4 5px 6px)}
.cv-templates .form-row{margin-bottom:10px}
.cv-templates .form-row > label{font-size:var(--text-xs);color:var(--text-muted);font-weight:500}
.cv-templates select{
  width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--bg-body);color:var(--text-body);font-family:inherit;
  font-size:var(--text-sm);outline:none;
}
.cv-templates select:focus{border-color:var(--accent-primary)}
.cv-preview{overflow-y:auto}
.cv-preview .chip-row{margin-top:6px}

.oc-status{margin-bottom:16px}
a.oc-picker-chip,a.oc-tab,a.oc-list-item{text-decoration:none}
.oc-card-header h3 a{color:inherit;text-decoration:none}
.oc-card-header h3 a:hover{color:var(--accent-primary)}
.oc-list-meta a{color:var(--accent-primary);text-decoration:none}

/* =========================================================
   團隊管理（多用戶）
   ========================================================= */
.team-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.team-card .tag{font-size:10px;padding:1px 6px;vertical-align:1px}

.handover{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
}
.handover summary{
  cursor:pointer;font-size:var(--text-xs);color:var(--text-muted);
  list-style:none;display:flex;align-items:center;gap:6px;
}
.handover summary::-webkit-details-marker{display:none}
.handover summary::before{content:'▸';color:var(--accent-primary);transition:transform .15s}
.handover[open] summary::before{transform:rotate(90deg)}
.handover summary:hover{color:var(--text-strong)}
.handover-form{margin-top:10px}
.handover-form label{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-bottom:4px}
.handover-form select{
  width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--bg-body);color:var(--text-body);font-family:inherit;
  font-size:var(--text-sm);outline:none;
}
.handover-form select:focus{border-color:var(--accent-primary)}
.handover-form button{border-color:var(--accent-primary-4);color:var(--band-drop-fg)}
.handover-form button:hover{background:rgba(192,57,43,.12)}

/* 顧問視角提示 */
.scope-note{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-xs);color:var(--text-muted);
  padding:3px 9px;border:1px solid var(--border);border-radius:999px;
}

/* 配對結果：展開強項／疑慮 */
.match-detail{margin-top:6px}
.match-detail summary{
  cursor:pointer;font-size:var(--text-xs);color:var(--accent-primary);
  list-style:none;display:inline-flex;align-items:center;gap:4px;
}
.match-detail summary::-webkit-details-marker{display:none}
.match-detail summary::before{content:'▸';transition:transform .15s}
.match-detail[open] summary::before{transform:rotate(90deg)}
.match-detail .match-points{margin-top:6px}