/* ── Design Tokens ── */
:root {
  /* Brand — Slate + Rose Gold. RGB triples let consumers compose rgba()
     at arbitrary alpha without hard-coding the hex. */
  --color-primary: #8C5543;
  --color-primary-rgb: 140,85,67;
  --color-primary-soft: rgba(140,85,67,0.1);
  --color-primary-light: rgba(140,85,67,0.2);
  --color-primary-bg: #8C5543;

  /* Text */
  --color-text-light: #fff;
  --color-text-slate: #cbd5e1;
  --color-text-dark: #1e293b;
  --color-text-muted: #475569;    /* slate-600 on light bg */
  --color-text-subtle: #94a3b8;   /* slate-400 — secondary lines on dark */
  --color-text-heading: #f1f5f9;  /* slate-50  — headings on dark */

  /* Surfaces */
  --color-bg-light: #f1f5f9;
  --color-border-light: #e2e8f0;

  /* Success / positive feedback */
  --color-success: #10b981;
  --color-success-rgb: 16,185,129;

  /* Application-pipeline status chips (kanban) */
  --status-draft: #6b7280;
  --status-submitted: #3b82f6;
  --status-under-review: #f59e0b;
  --status-interview: #8b5cf6;
  --status-offer: #10b981;
  --status-rejected: #ef4444;
  --status-withdrawn: #9ca3af;
}

html.dark {
  /* slate-600 is too dim on the dark surface; shift muted up to slate-400. */
  --color-text-muted: #94a3b8;
}

/* ── Base ── */
body { font-family: "Space Grotesk", sans-serif; min-height: max(884px, 100dvh); }
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.step-anchor::before { content: ""; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); width: 2px; height: 24px; background: linear-gradient(to bottom, transparent, #8C5543); opacity: 0.3; }

/* ── Chat UI ── */
.chat-msg-user-avatar { width:28px;height:28px;border-radius:8px;background:var(--color-primary-light);display:flex;align-items:center;justify-content:center;color:var(--color-primary);font-weight:700;font-size:12px;flex-shrink:0; }
.chat-msg-user-bubble { max-width:80%;padding:10px 14px;border-radius:12px;font-size:0.875rem;line-height:1.7;background:var(--color-primary-bg);color:var(--color-text-light);font-weight:500; }
.chat-msg-agent-bubble { max-width:90%;padding:10px 14px;border-radius:12px;font-size:0.875rem;line-height:1.7; }
.chat-msg-agent-bubble.light { background:var(--color-bg-light);border:1px solid var(--color-border-light);color:var(--color-text-dark); }
.chat-msg-agent-bubble.dark { background:rgba(255,255,255,0.05);border:1px solid rgba(140,85,67,0.1);color:var(--color-text-slate); }
.chat-thinking { display:flex;align-items:center;gap:8px;color:var(--color-text-muted);font-size:0.75rem; }

/* ── Form elements ──
   ``input`` without a type selector used to match checkboxes and radios
   too, so those inputs rendered as full-width rounded rectangles that
   pushed their sibling labels out of alignment. Explicitly excluding the
   native toggle types keeps the text-input treatment here while letting
   checkbox/radio/file inputs use their default rendering (or whatever
   Tailwind/``accent-*`` class an author put on them). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  font-family: "Space Grotesk", sans-serif;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.75rem;
  padding: 10px 14px;
  color: #111827;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.dark select, html.dark textarea {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(141,163,153,0.25) !important;
  color: #e2e8f0;
}
input::placeholder, textarea::placeholder { color: #9ca3af; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #475569; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus, textarea:focus { border-color: rgba(140,85,67,0.6) !important; }
select option { background: #fff; color: #111827; }
html.dark select option { background: #0f172a; color: #e2e8f0; }
textarea { resize: vertical; }

/* Fallback modal open path when JS event delegation is unavailable. */
#authModal:target { display: flex !important; }

/* Password visibility toggle. Tailwind's ``inset-y-0`` isn't in the
   pre-compiled bundle, so a dedicated class is safer than relying on JIT
   picking up classes we introduce. ``.pw-field-wrap`` is the positioning
   context; ``.pw-toggle`` is the eye-icon button pinned to the right
   edge of the input it sits next to. */
.pw-field-wrap { position: relative; }
.pw-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: transparent !important;
  border: 0 !important;
  color: #9ca3af;
  cursor: pointer;
}
.pw-toggle:hover { color: #475569; }
html.dark .pw-toggle { color: #64748b; }
html.dark .pw-toggle:hover { color: #e2e8f0; }
.pw-toggle .material-symbols-outlined { font-size: 18px; }

/* ── Response area ── */
.response-area {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(141,163,153,0.15);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.8;
  color: #cbd5e1;
  min-height: 120px;
  max-height: 500px;
  overflow-y: auto;
}
.response-area.empty { display:flex;align-items:center;justify-content:center;color:#475569;font-size:0.75rem; }
.response-area h2 { color: #8C5543; font-weight: 700; font-size: 1rem; margin: 1rem 0 0.5rem; }
.response-area h3 { color: #8C5543; font-weight: 600; font-size: 0.9rem; margin: 0.75rem 0 0.35rem; }
.response-area h4 { color: rgba(140,85,67,0.8); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.75rem 0 0.25rem; }
.response-area strong { color: #f1f5f9; font-weight: 600; }
.response-area code { background: rgba(140,85,67,0.1); color: #8C5543; padding: 1px 5px; border-radius: 4px; font-size: 0.75rem; font-family: monospace; }
.response-area hr { border: none; border-top: 1px solid rgba(141,163,153,0.2); margin: 0.75rem 0; }
.md-bullet { display:flex;gap:8px;margin:3px 0; }
.md-bullet-dot { color:#8C5543;flex-shrink:0; }
.md-num { display:flex;gap:8px;margin:3px 0; }
.md-num-n { color:#8C5543;font-size:0.7rem;flex-shrink:0;min-width:18px; }

/* ── Spinner ── */
.spinner { display:inline-block;width:14px;height:14px;border:2px solid rgba(140,85,67,0.2);border-top-color:#8C5543;border-radius:50%;animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Job IDs box ── */
.job-ids-box { margin-top:12px;padding:14px;background:rgba(140,85,67,0.06);border:1px solid rgba(140,85,67,0.15);border-radius:1rem; }
.job-id-item { display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(140,85,67,0.08);color:#94a3b8;font-size:0.75rem; }
.job-id-item:last-child { border-bottom:none; }
.job-id-copy { cursor:pointer;color:#8C5543;font-size:0.65rem;padding:2px 8px;border:1px solid rgba(140,85,67,0.25);border-radius:4px;transition:all 0.15s; }
.job-id-copy:hover { background:#8C5543;color:#0f172a; }

/* ── Toast ── */
#toast { position:fixed;bottom:80px;right:16px;padding:11px 18px;border-radius:12px;font-size:0.8rem;z-index:9999;transform:translateY(12px);opacity:0;transition:all 0.25s;max-width:300px;border:1px solid; }
@media (min-width: 640px) { #toast { bottom: 20px; right: 20px; } }
#toast.show { transform:translateY(0);opacity:1; }
#toast.success { background:#f0fdf4;border-color:#86efac;color:#166534; }
#toast.error { background:#fef2f2;border-color:#fca5a5;color:#991b1b; }
#toast.info { background:#fdf8f6;border-color:rgba(140,85,67,0.3);color:#8C5543; }
html.dark #toast.success { background:#0f172a;border-color:rgba(141,163,153,0.4);color:#8da399; }
html.dark #toast.error { background:#0f172a;border-color:rgba(244,63,94,0.3);color:#f87171; }
html.dark #toast.info { background:#0f172a;border-color:rgba(140,85,67,0.3);color:#8C5543; }

/* ── Scroll reveal ── */
.reveal { opacity:1;transform:translateY(0);transition:opacity 0.6s ease,transform 0.6s ease; }

/* ══════════════════════════════════════
   SIDEBAR  -  collapsible
══════════════════════════════════════ */
#sidebar {
  width: 14rem;
  min-width: 14rem;
  transition: width 0.22s cubic-bezier(0.4,0,0.2,1), min-width 0.22s cubic-bezier(0.4,0,0.2,1);
  flex-shrink: 0;
  overflow: hidden;
}
#sidebar.collapsed {
  width: 3.5rem;
  min-width: 3.5rem;
}
#sidebar.collapsed .nav-label,
#sidebar.collapsed .section-label,
#sidebar.collapsed .brand-text,
#sidebar.collapsed .user-info { display: none; }
#sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
#sidebar.collapsed .sidebar-user { justify-content: center; }

/* ══════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════ */
#app-layout { display: flex; height: 100svh; overflow: hidden; }
#main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#content-scroll { flex: 1; overflow-y: auto; }

/* ══════════════════════════════════════
   MOBILE BOTTOM NAV
══════════════════════════════════════ */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom);
}
#mobile-nav .mn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: #475569; cursor: pointer; transition: color 0.15s; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
#mobile-nav .mn-item.active { color: #8C5543; }
#mobile-nav .mn-item .material-symbols-outlined { font-size: 20px; }

/* ══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════ */
@media (max-width: 767px) {
  #sidebar { display: none !important; }
  #mobile-nav { display: flex; }
  #content-scroll { padding-bottom: 68px; }
  #app-layout { height: 100svh; }
  .dash-panel { border-radius: 1rem; margin: 0 0 1rem; }
  #chatFab { bottom: 72px !important; right: 16px !important; }
  #chatOverlay { bottom: 140px !important; right: 8px !important; left: 8px !important; width: auto !important; max-height: 60vh; }
  #chat-inner { height: calc(100svh - 180px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #sidebar { width: 3.5rem; min-width: 3.5rem; }
  #sidebar .nav-label, #sidebar .section-label, #sidebar .brand-text, #sidebar .user-info { display: none; }
  #sidebar .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  #sidebar .sidebar-user { justify-content: center; }
}
@media (min-width: 1024px) {
  #chat-inner { height: calc(100vh - 128px); }
}

/* ══════════════════════════════════════
   ACTIVE NAV
══════════════════════════════════════ */
.nav-item.active-nav { background: rgba(140,85,67,0.1); color: #8C5543; border-radius: 0.75rem; }

/* ══════════════════════════════════════
   LIGHT MODE OVERRIDES
══════════════════════════════════════ */
html:not(.dark) body { background:#f8fafc; color:#1a1a1a; }
html:not(.dark) .response-area { background:#fff; border-color:#e5e7eb; color:#374151; }
html:not(.dark) .response-area.empty { color:#9ca3af; }
html:not(.dark) .response-area h2, html:not(.dark) .response-area h3, html:not(.dark) .response-area h4 { color:#6E4535; }
html:not(.dark) .response-area strong { color:#111827; }
html:not(.dark) .response-area code { background:rgba(180,83,9,0.08); color:#6E4535; }
html:not(.dark) .job-ids-box { background:rgba(140,85,67,0.08); border-color:rgba(140,85,67,0.25); }
html:not(.dark) .job-id-item { color:#6b7280; border-color:rgba(140,85,67,0.12); }
html.dark #mobile-nav { background:#0f172a; border-color:rgba(140,85,67,0.1); }
html.dark #mobile-nav .mn-item { color:#475569; }
html.dark #mobile-nav .mn-item.active { color:#8C5543; }
html:not(.dark) #sidebar { background: #f1f5f9; border-color: #e2e8f0; }
html:not(.dark) #sidebar .nav-item { color: #475569; }
html:not(.dark) #sidebar .nav-item:hover { background: rgba(0,0,0,0.04); color: #1e293b; }
html:not(.dark) #sidebar .nav-item.active-nav { background: rgba(140,85,67,0.08); color: #8C5543; }
html:not(.dark) #sidebar .section-label { color: #94a3b8; }
html:not(.dark) #sidebar .sidebar-user:hover { background: rgba(0,0,0,0.04); }
html:not(.dark) #sidebar .brand-text { color: #1e293b; }
html:not(.dark) #sidebar #sidebarName { color: #1e293b; }
html:not(.dark) #sidebar #sidebarRole { color: #64748b; }

/* Dashboard panels - light mode */
html:not(.dark) #content-scroll .dash-panel.bg-background-dark { background-color: #fff !important; border-color: #e2e8f0 !important; }
html:not(.dark) .dash-panel { background-color: #fff !important; border-color: #e2e8f0 !important; }
html:not(.dark) #main-area .bg-background-dark { background-color: #fff !important; border-color: #e2e8f0 !important; }
html:not(.dark) #content-scroll .bg-background-dark { background-color: #fff !important; }

/* Chat messages area */
html:not(.dark) #chatMessages { background: #f8fafc !important; border-color: #e2e8f0 !important; }
html:not(.dark) #chatMessages .text-slate-300 { color: #374151; }

/* Update modal */
html:not(.dark) #updateModal .bg-background-dark { background: #fff; border-color: #e2e8f0; }

/* Import job modal */
.job-import-panel { background: #1e293b; color: #f1f5f9; }
.job-import-title { color: #f1f5f9; }
.job-import-hint { color: #94a3b8; }
.job-import-close-btn { color: #94a3b8; }
.job-import-close-btn:hover { color: #f1f5f9; }
.job-import-cancel-btn { color: #94a3b8; }
.job-import-cancel-btn:hover { background: rgba(255,255,255,0.05); }
html:not(.dark) .job-import-panel { background: #fff !important; color: #1e293b; border-color: #e2e8f0 !important; }
html:not(.dark) .job-import-panel .job-import-title { color: #1e293b; }
html:not(.dark) .job-import-panel .job-import-hint { color: #64748b; }
html:not(.dark) .job-import-panel .job-import-close-btn { color: #64748b !important; }
html:not(.dark) .job-import-panel .job-import-close-btn:hover { color: #1e293b !important; }
html:not(.dark) .job-import-panel .job-import-cancel-btn { color: #64748b; }
html:not(.dark) .job-import-panel .job-import-cancel-btn:hover { background: rgba(0,0,0,0.05); }
/* Topbar text */
html:not(.dark) #pageTitle { color: #1e293b; }
html:not(.dark) .text-slate-400.hover\:text-primary { color: #64748b; }

/* Text colors in dashboard panels */
html:not(.dark) .dash-panel .text-slate-400, html:not(.dark) .dash-panel .text-slate-300 { color: #64748b; }
html:not(.dark) .dash-panel .text-slate-500 { color: #94a3b8; }
html:not(.dark) .dash-panel .font-bold:not(.text-white):not(.bg-primary):not(button) { color: #1e293b; }
html:not(.dark) .dash-panel p.text-slate-500, html:not(.dark) .dash-panel p.text-slate-400 { color: #64748b; }
html:not(.dark) .bg-primary { color: #fff !important; }

html:not(.dark) .dash-panel ul.text-slate-400 li { color: #4b5563; }

html:not(.dark) .upload-dropzone p.text-slate-300 { color: #374151; }
html:not(.dark) .upload-dropzone p.text-slate-500 { color: #6b7280; }

/* ── Upload dropzone ── */
.upload-dropzone {
  border: 2px dashed rgba(140,85,67,0.25);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.upload-dropzone:hover { border-color: rgba(140,85,67,0.6); background: rgba(140,85,67,0.04); }
.upload-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ── Profile card ── */
.profile-field { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom: 1px solid rgba(141,163,153,0.1); font-size: 0.8rem; }
.profile-field:last-child { border-bottom: none; }
.profile-field-label { color:#8da399; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; font-size:0.65rem; }
.profile-field-value { color:#e2e8f0; max-width:60%; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html:not(.dark) .profile-field-value { color:#1f2937; }
html:not(.dark) .profile-field { border-color: #e5e7eb; }

/* ══════════════════════════════════════
   DASHBOARD KPI CARDS
══════════════════════════════════════ */
.kpi-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi-card { background: rgba(140,85,67,0.05); border: 1px solid rgba(140,85,67,0.15); border-radius: 1rem; padding: 1rem; }
html:not(.dark) .kpi-card { background: #fff; border-color: #e5e7eb; }
.kpi-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8da399; margin-bottom: 0.35rem; }
.kpi-value { font-size: 1.75rem; font-weight: 700; color: #8C5543; line-height: 1; }
html:not(.dark) .kpi-value { color: #6E4535; }
.kpi-sub { font-size: 0.7rem; color: #64748b; margin-top: 0.35rem; }

/* ══════════════════════════════════════
   GLASS / GLASSMORPHISM UTILITIES
══════════════════════════════════════ */
.glass-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}
html:not(.dark) .glass-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
html:not(.dark) .glass-card:hover {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
}
.premium-border {
  border: 1px solid transparent;
  background-image: linear-gradient(#1e293b, #1e293b),
    linear-gradient(135deg, #c97d4e 0%, rgba(201,125,78,0) 50%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
html:not(.dark) .premium-border {
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(135deg, #c97d4e 0%, rgba(201,125,78,0) 50%);
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ══════════════════════════════════════
   DASHBOARD LIGHT-MODE OVERRIDES
   Cards use dark glass by default; in light mode flip surfaces to white
   and make metric/heading text legible.
══════════════════════════════════════ */
html:not(.dark) #dashActiveContent .text-white:not(button),
html:not(.dark) #dashActiveContent h2,
html:not(.dark) #dashActiveContent h3 {
  color: #1e293b !important;
}
/* Coloured CTA buttons keep white text — must match the override rule's specificity */
html:not(.dark) #dashActiveContent button.text-white { color: #fff !important; }
html.dark #dashActiveContent button.text-white { color: #fff !important; }
html:not(.dark) #dashActiveContent .text-slate-400 { color: #64748b !important; }
html:not(.dark) #dashActiveContent .text-slate-500 { color: #64748b !important; }
html:not(.dark) #dashActiveContent .text-slate-600 { color: #94a3b8 !important; }
html:not(.dark) #dashJourney .text-white,
html:not(.dark) #dashJourney h2,
html:not(.dark) #dashJourney h3 { color: #1e293b !important; }
/* KPI metric numbers legible on light surface */
html:not(.dark) #kpiStrip .text-white { color: #1e293b !important; }
html:not(.dark) #kpiStrip .text-slate-400 { color: #64748b !important; }
/* Pipeline pills on light */
html:not(.dark) [data-stage] { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.1) !important; }
html:not(.dark) [data-stage] span.text-white { color: #1e293b !important; }
/* AI Intelligence gradient card on light */
html:not(.dark) #dashActiveContent [style*="linear-gradient(135deg,rgba(201"] {
  background: rgba(201,125,78,0.05) !important;
}

/* ══════════════════════════════════════
   GUIDED JOURNEY CHECKLIST
══════════════════════════════════════ */
.journey-step { display:flex; align-items:center; gap:0.75rem; padding:0.85rem; border-radius:0.75rem; border:1px solid rgba(141,163,153,0.15); background: rgba(255,255,255,0.02); transition: all 0.15s; }
html:not(.dark) .journey-step { background:#fff; border-color:#e2e8f0; }
.journey-step.done { opacity:0.6; }
.journey-step.done .journey-icon { background: rgba(16,185,129,0.15); color:#10b981; }
.journey-icon { width:36px; height:36px; border-radius:0.5rem; background:rgba(140,85,67,0.1); color:#8C5543; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.journey-label { flex:1; font-size:0.85rem; font-weight:600; }
html:not(.dark) .journey-label { color:#1e293b; }
.journey-desc { font-size:0.7rem; color:#64748b; margin-top:0.15rem; }
.journey-btn { font-size:0.7rem; font-weight:700; padding:0.35rem 0.75rem; border-radius:0.5rem; background:#8C5543; color:#fff; border:none; cursor:pointer; transition:all 0.15s; flex-shrink:0; }
.journey-btn:hover { filter:brightness(1.1); }
.journey-btn.done-btn { background: rgba(16,185,129,0.15); color:#10b981; }

/* ══════════════════════════════════════
   ACTIVITY TIMELINE
══════════════════════════════════════ */
.timeline-item { display:flex; gap:0.75rem; padding:0.6rem 0; border-bottom:1px solid rgba(141,163,153,0.08); }
.timeline-item:last-child { border-bottom:none; }
.timeline-dot { width:8px; height:8px; border-radius:50%; background:#8C5543; margin-top:0.4rem; flex-shrink:0; }
.timeline-dot.applied { background:#3b82f6; }
.timeline-dot.interview_scheduled { background:#8b5cf6; }
.timeline-dot.offer_received { background:#10b981; }
.timeline-dot.rejected { background:#ef4444; }
.timeline-content { flex:1; font-size:0.8rem; }
.timeline-content .t-detail { color:#cbd5e1; font-weight:500; }
html:not(.dark) .timeline-content .t-detail { color:#1e293b; }
.timeline-content .t-time { font-size:0.65rem; color:#64748b; margin-top:0.15rem; }

/* ══════════════════════════════════════
   SKILL TAGS
══════════════════════════════════════ */
.skill-tag { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.7rem; font-weight:600; padding:0.3rem 0.65rem; border-radius:999px; margin:0.15rem; }
.skill-tag.match { background: rgba(16,185,129,0.12); color:#10b981; border:1px solid rgba(16,185,129,0.3); }
.skill-tag.gap { background: rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.25); }
.skill-tag.neutral { background: rgba(140,85,67,0.1); color:#8C5543; border:1px solid rgba(140,85,67,0.2); }

/* ══════════════════════════════════════
   JOB CARDS (list view)
══════════════════════════════════════ */
.job-card { background: rgba(255,255,255,0.03); border:1px solid rgba(141,163,153,0.15); border-radius:1rem; padding:1rem; margin-bottom:0.75rem; transition:all 0.15s; }
.job-card:hover { border-color: rgba(140,85,67,0.4); background: rgba(140,85,67,0.03); }
html:not(.dark) .job-card { background:#fff; border-color:#e5e7eb; }
html:not(.dark) .job-card:hover { border-color: rgba(140,85,67,0.35); background: #fcfaf9; }
.job-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:0.75rem; margin-bottom:0.5rem; }
.job-card-title { font-size:0.95rem; font-weight:700; color:#f1f5f9; line-height:1.3; }
html:not(.dark) .job-card-title { color:#1e293b; }
.job-card-company { font-size:0.75rem; color:#8da399; font-weight:600; margin-top:0.15rem; }
.job-card-meta { display:flex; flex-wrap:wrap; gap:0.5rem; font-size:0.7rem; color:#64748b; margin-top:0.5rem; }
.job-card-meta span { display:inline-flex; align-items:center; gap:0.2rem; }
.job-card-actions { display:flex; gap:0.5rem; margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid rgba(141,163,153,0.1); }
.job-card-actions button { flex:1; font-size:0.7rem; font-weight:700; padding:0.5rem 0.75rem; border-radius:0.5rem; border:1px solid rgba(140,85,67,0.25); color:#8C5543; background:transparent; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; justify-content:center; gap:0.25rem; }
.job-card-actions button:hover { background: rgba(140,85,67,0.1); }
.job-card-actions button.primary { background:#8C5543; color:#fff; border-color:#8C5543; }
.job-card-actions button.primary:hover { filter:brightness(1.1); background:#8C5543; }
.match-badge { display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; border-radius:0.5rem; font-size:0.85rem; font-weight:700; flex-shrink:0; }
.match-badge.high { background: rgba(16,185,129,0.15); color:#10b981; border:1px solid rgba(16,185,129,0.35); }
.match-badge.mid { background: rgba(140,85,67,0.15); color:#8C5543; border:1px solid rgba(140,85,67,0.35); }
.match-badge.low { background: rgba(100,116,139,0.15); color:#94a3b8; border:1px solid rgba(100,116,139,0.3); }
.work-tag { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.65rem; font-weight:700; padding:0.2rem 0.55rem; border-radius:999px; background: rgba(141,163,153,0.12); color:#8da399; text-transform:uppercase; letter-spacing:0.05em; }

/* ══════════════════════════════════════
   JOB DETAIL SLIDE-IN PANEL
══════════════════════════════════════ */
.job-detail-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:400; backdrop-filter: blur(2px); }
.job-detail-panel { position:fixed; top:0; right:0; bottom:0; width:100%; max-width:640px; background:#0f172a; border-left:1px solid rgba(140,85,67,0.2); z-index:401; overflow-y:auto; padding:1.5rem 1.25rem; }
html:not(.dark) .job-detail-panel { background:#fff; border-color:#e5e7eb; }
@media (max-width: 767px) { .job-detail-panel { max-width:100%; } }
.job-detail-close { position:absolute; top:1rem; right:1rem; width:2rem; height:2rem; border-radius:0.5rem; background:transparent; border:1px solid rgba(141,163,153,0.2); color:#94a3b8; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.job-detail-close:hover { background: rgba(140,85,67,0.1); color:#8C5543; }

/* ══════════════════════════════════════
   KANBAN BOARD
══════════════════════════════════════ */
.kanban-scroll { display:flex; gap:0.75rem; overflow-x:auto; padding-bottom:1rem; scrollbar-width:thin; }
.kanban-column { flex:0 0 280px; background: rgba(255,255,255,0.03); border:1px solid rgba(141,163,153,0.15); border-radius:1rem; padding:0.85rem; min-height:400px; display:flex; flex-direction:column; }
html:not(.dark) .kanban-column { background:#f8fafc; border-color:#e2e8f0; }
.kanban-column.drag-over { border-color: rgba(140,85,67,0.6); background: rgba(140,85,67,0.05); }
.kanban-col-head { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.65rem; padding-bottom:0.5rem; border-bottom:1px solid rgba(141,163,153,0.15); }
.kanban-col-dot { width:10px; height:10px; border-radius:50%; }
.kanban-col-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#cbd5e1; flex:1; }
html:not(.dark) .kanban-col-label { color:#1e293b; }
.kanban-col-count { font-size:0.7rem; font-weight:700; color:#64748b; background: rgba(141,163,153,0.12); padding:0.15rem 0.5rem; border-radius:999px; }
.kanban-cards { display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.kanban-card { background:#0f172a; border:1px solid rgba(141,163,153,0.15); border-radius:0.75rem; padding:0.75rem; cursor:grab; transition:all 0.15s; }
html:not(.dark) .kanban-card { background:#fff; border-color:#e5e7eb; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.kanban-card:hover { border-color: rgba(140,85,67,0.35); }
.kanban-card.dragging { opacity:0.4; }
.kanban-card-title { font-size:0.8rem; font-weight:700; color:#f1f5f9; line-height:1.3; margin-bottom:0.2rem; }
html:not(.dark) .kanban-card-title { color:#1e293b; }
.kanban-card-company { font-size:0.7rem; color:#8da399; margin-bottom:0.35rem; }
.kanban-card-meta { display:flex; justify-content:space-between; align-items:center; font-size:0.65rem; color:#64748b; }
.kanban-card-notes { font-size:0.7rem; color:#94a3b8; margin-top:0.35rem; padding-top:0.35rem; border-top:1px solid rgba(141,163,153,0.08); line-height:1.45; max-height:3.2em; overflow:hidden; }
html:not(.dark) .kanban-card-notes { color:#64748b; }
.kanban-nudge { font-size:0.6rem; font-weight:700; color:#f59e0b; text-transform:uppercase; letter-spacing:0.05em; margin-top:0.25rem; display:flex; align-items:center; gap:0.2rem; }

/* Kanban card actions popover (click-triggered, replaces prompt()) */
.kanban-popover { position:fixed; z-index:500; min-width:200px; background:#0f172a; border:1px solid rgba(140,85,67,0.25); border-radius:0.75rem; padding:0.35rem; box-shadow:0 10px 30px rgba(0,0,0,0.45); }
html:not(.dark) .kanban-popover { background:#fff; border-color:#e5e7eb; box-shadow:0 10px 30px rgba(0,0,0,0.12); }
.kanban-popover-header { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#8da399; padding:0.5rem 0.75rem 0.35rem; }
.kanban-popover button { display:flex; align-items:center; gap:0.5rem; width:100%; text-align:left; font-size:0.75rem; font-weight:600; padding:0.5rem 0.75rem; border-radius:0.5rem; background:transparent; border:none; color:#cbd5e1; cursor:pointer; transition:all 0.12s; }
html:not(.dark) .kanban-popover button { color:#1e293b; }
.kanban-popover button:hover { background: rgba(140,85,67,0.1); color:#8C5543; }
.kanban-popover button.danger:hover { background: rgba(239,68,68,0.1); color:#f87171; }
.kanban-popover .kanban-popover-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.kanban-popover-divider { height:1px; background: rgba(141,163,153,0.12); margin:0.25rem 0; }

/* ══════════════════════════════════════
   TABS (for Insights)
══════════════════════════════════════ */
.tab-bar { display:flex; gap:0.25rem; border-bottom:1px solid rgba(141,163,153,0.15); margin-bottom:1rem; overflow-x:auto; }
.tab-item { font-size:0.75rem; font-weight:700; padding:0.65rem 0.9rem; color:#64748b; background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; transition:all 0.15s; }
.tab-item:hover { color:#8C5543; }
.tab-item.active { color:#8C5543; border-bottom-color:#8C5543; }

/* ══════════════════════════════════════
   TEMPLATE PICKER (Documents)
══════════════════════════════════════ */
.template-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:0.75rem; }
.template-card { border:2px solid rgba(141,163,153,0.15); border-radius:0.75rem; padding:0.85rem; cursor:pointer; transition:all 0.15s; background:rgba(255,255,255,0.02); }
html:not(.dark) .template-card { background:#fff; border-color:#e5e7eb; }
.template-card:hover { border-color: rgba(140,85,67,0.4); }
.template-card.selected { border-color:#8C5543; background: rgba(140,85,67,0.08); }
.template-card-name { font-size:0.8rem; font-weight:700; color:#f1f5f9; margin-bottom:0.2rem; }
html:not(.dark) .template-card-name { color:#1e293b; }
.template-card-desc { font-size:0.65rem; color:#64748b; line-height:1.4; }

/* ══════════════════════════════════════
   FEED / DISCOVER CARDS
══════════════════════════════════════ */
.feed-summary { background: linear-gradient(135deg, rgba(140,85,67,0.1), rgba(141,163,153,0.08)); border:1px solid rgba(140,85,67,0.25); border-radius:1rem; padding:1rem 1.25rem; margin-bottom:1rem; }
html:not(.dark) .feed-summary { background: linear-gradient(135deg, rgba(140,85,67,0.06), rgba(141,163,153,0.04)); border-color:rgba(140,85,67,0.2); }
.feed-summary-label { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#8C5543; margin-bottom:0.3rem; display:flex; align-items:center; gap:0.35rem; }
.feed-summary-text { font-size:0.85rem; color:#cbd5e1; line-height:1.55; }
html:not(.dark) .feed-summary-text { color:#1e293b; }

/* ══════════════════════════════════════
   AI INSIGHT BANNER
══════════════════════════════════════ */
.ai-insight { display:flex; align-items:flex-start; gap:0.65rem; background: rgba(140,85,67,0.08); border:1px solid rgba(140,85,67,0.25); border-radius:0.75rem; padding:0.85rem 1rem; margin-bottom:1rem; font-size:0.8rem; color:#cbd5e1; line-height:1.5; }
html:not(.dark) .ai-insight { color:#374151; }
.ai-insight .ai-icon { color:#8C5543; flex-shrink:0; }

/* ══════════════════════════════════════
   PAGINATION
══════════════════════════════════════ */
.pagination { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-top:1rem; }
.pagination button { font-size:0.75rem; font-weight:700; padding:0.5rem 0.85rem; border-radius:0.5rem; border:1px solid rgba(140,85,67,0.25); color:#8C5543; background:transparent; cursor:pointer; transition:all 0.15s; }
.pagination button:hover:not(:disabled) { background: rgba(140,85,67,0.1); }
.pagination button:disabled { opacity:0.35; cursor:not-allowed; }
.pagination .page-info { font-size:0.75rem; color:#64748b; font-weight:600; }

/* ══════════════════════════════════════
   SALARY DATA CARD
══════════════════════════════════════ */
.salary-card { background: rgba(255,255,255,0.03); border:1px solid rgba(141,163,153,0.15); border-radius:1rem; padding:1rem; margin-bottom:0.75rem; }
html:not(.dark) .salary-card { background:#fff; border-color:#e5e7eb; }
.salary-location { font-size:0.7rem; font-weight:700; color:#8da399; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.35rem; }
.salary-range { font-size:1.15rem; font-weight:700; color:#f1f5f9; }
html:not(.dark) .salary-range { color:#1e293b; }
.salary-meta { font-size:0.7rem; color:#64748b; margin-top:0.35rem; }

/* ══════════════════════════════════════
   FEASIBILITY METER (Career Dreamer)
══════════════════════════════════════ */
.feasibility-meter { height:8px; background:rgba(141,163,153,0.15); border-radius:999px; overflow:hidden; margin:0.5rem 0; }
.feasibility-fill { height:100%; background:linear-gradient(90deg, #ef4444, #f59e0b, #10b981); transition:width 0.5s ease; }

/* ══════════════════════════════════════
   SUB-NAV SECTION LABELS (sidebar)
══════════════════════════════════════ */
.section-label { margin-top:0.75rem; }
.nav-new-dot { width:5px; height:5px; border-radius:50%; background:#8C5543; margin-left:auto; }

/* ======================================================
   JOB SEARCH — Redesign (Mockup 1)
====================================================== */
.jobs-trend-banner {
  display:flex; align-items:center; gap:0.75rem;
  background:rgba(140,85,67,0.08); border:1px solid rgba(140,85,67,0.2);
  border-radius:1rem; padding:0.75rem 1rem;
}
html:not(.dark) .jobs-trend-banner { background:rgba(140,85,67,0.06); }

.jobs-search-panel {
  background:rgba(255,255,255,0.03); border:1px solid rgba(140,85,67,0.12);
  border-radius:1.25rem; overflow:visible;
}
html:not(.dark) .jobs-search-panel { background:#fff; border-color:#e5e7eb; }

.jobs-search-row { display:flex; align-items:center; padding:0.5rem; gap:0; }
.jobs-search-field { display:flex; align-items:center; gap:0.5rem; flex:1; padding:0.5rem 0.75rem; }
.jobs-search-icon { font-size:1.1rem; color:#64748b; flex-shrink:0; }
.jobs-search-input {
  background:transparent !important; border:none !important; border-radius:0 !important;
  padding:0.25rem 0 !important; font-size:0.9rem; width:100%; outline:none;
}
.jobs-search-divider { width:1px; height:28px; background:rgba(140,85,67,0.2); flex-shrink:0; }
.jobs-search-btn {
  background:var(--color-primary); color:#fff; font-weight:700; font-size:0.875rem;
  padding:0.6rem 1.25rem; border-radius:0.875rem; border:none; cursor:pointer;
  flex-shrink:0; display:flex; align-items:center; gap:0.35rem;
  transition:filter 0.15s; margin:0.25rem;
}
.jobs-search-btn:hover { filter:brightness(1.12); }

.jobs-suggestions-row { display:flex; align-items:center; gap:0.75rem; padding:0 1rem 0.75rem; flex-wrap:wrap; }
.jobs-suggestions-label { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#64748b; flex-shrink:0; }
.jobs-suggestion-chip {
  font-size:0.75rem; padding:0.2rem 0.6rem; border-radius:0.5rem;
  border:1px solid rgba(140,85,67,0.25); color:#94a3b8; background:transparent; cursor:pointer; transition:all 0.15s;
}
.jobs-suggestion-chip:hover { border-color:var(--color-primary); color:var(--color-primary); }

.jobs-filters-row {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.5rem 0.75rem 0.75rem; border-top:1px solid rgba(140,85,67,0.1); flex-wrap:wrap;
}
.jobs-filter-chip {
  display:inline-flex; align-items:center; gap:0.2rem; font-size:0.75rem; font-weight:600;
  padding:0.35rem 0.75rem; border-radius:999px; border:1px solid rgba(140,85,67,0.2);
  color:#94a3b8; background:transparent; cursor:pointer; transition:all 0.15s; white-space:nowrap;
  position:relative;
}
.jobs-filter-chip:hover,.jobs-filter-chip.active {
  border-color:var(--color-primary); color:var(--color-primary); background:rgba(140,85,67,0.06);
}
.jobs-filter-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; z-index:200; min-width:220px;
  background:#1a1f2e; border:1px solid rgba(140,85,67,0.2); border-radius:1rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.4); overflow:hidden;
}html:not(.dark) .jobs-filter-dropdown { background:#fff; border-color:#e5e7eb; box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.jobs-filter-option { display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; color:#94a3b8; cursor:pointer; padding:0.15rem 0; }
html:not(.dark) .jobs-filter-option { color:#374151; }
.jobs-filter-option:hover { color:#f1f5f9; }
html:not(.dark) .jobs-filter-option:hover { color:#111827; }
.jobs-filter-apply-btn {
  background:var(--color-primary); color:#fff; font-size:0.75rem; font-weight:700;
  padding:0.35rem 0.85rem; border-radius:0.5rem; border:none; cursor:pointer; transition:filter 0.15s;
}
.jobs-filter-apply-btn:hover { filter:brightness(1.12); }

/* 2-column job card grid */
.jobs-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.875rem; }
@media (max-width:700px) { .jobs-grid { grid-template-columns:1fr; } }

.job-card-v2 {
  background:rgba(255,255,255,0.03); border:1px solid rgba(140,85,67,0.12);
  border-radius:1.25rem; padding:1.1rem 1.1rem 0.9rem; cursor:pointer;
  transition:border-color 0.18s,box-shadow 0.18s; display:flex; flex-direction:column; gap:0.6rem;
}
html:not(.dark) .job-card-v2 { background:#fff; border-color:#e5e7eb; }
.job-card-v2:hover { border-color:rgba(140,85,67,0.4); box-shadow:0 4px 24px rgba(140,85,67,0.1); }

.job-card-v2-head { display:flex; align-items:flex-start; gap:0.75rem; }
.job-company-avatar {
  width:40px; height:40px; border-radius:0.75rem; background:rgba(140,85,67,0.15);
  display:flex; align-items:center; justify-content:center; font-size:0.8rem;
  font-weight:700; color:var(--color-primary); flex-shrink:0; letter-spacing:-0.02em;
}
.job-card-v2-title { font-size:0.9rem; font-weight:700; line-height:1.3; margin-bottom:0.15rem; }
.job-card-v2-company { font-size:0.78rem; color:#64748b; }

.job-score-ring { flex-shrink:0; position:relative; width:42px; height:42px; }
.job-score-ring svg { position:absolute; inset:0; }
.job-score-ring-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.62rem; font-weight:800; }

.job-skill-tags { display:flex; flex-wrap:wrap; gap:0.3rem; }
.job-skill-tag {
  font-size:0.65rem; font-weight:600; padding:0.15rem 0.5rem; border-radius:0.4rem;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:#94a3b8;
}
html:not(.dark) .job-skill-tag { background:#f1f5f9; border-color:#e2e8f0; color:#475569; }

.job-card-v2-footer { display:flex; align-items:center; justify-content:space-between; margin-top:0.25rem; }
.job-salary { font-size:0.85rem; font-weight:700; color:#f1f5f9; }
html:not(.dark) .job-salary { color:#1e293b; }
.job-apply-btn {
  font-size:0.75rem; font-weight:700; padding:0.4rem 0.875rem;
  border-radius:0.75rem; cursor:pointer; transition:all 0.15s;
}
.job-apply-btn.primary { background:var(--color-primary); color:#fff; border:none; }
.job-apply-btn.primary:hover { filter:brightness(1.12); }
.job-apply-btn.secondary { background:transparent; border:1px solid rgba(140,85,67,0.3); color:#94a3b8; }
.job-apply-btn.secondary:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* Score-floor chip on job cards */
.score-below-floor-chip {
  display:inline-flex; align-items:center; font-size:0.62rem; font-weight:700;
  padding:0.1rem 0.45rem; border-radius:0.4rem;
  background:rgba(245,158,11,0.12); color:#fbbf24; border:1px solid rgba(245,158,11,0.25);
}
.job-card-below-floor { opacity:0.82; }

/* Legitimacy tier badge (inline in title) */
.legitimacy-badge { display:inline-flex; align-items:center; margin-left:0.35rem; vertical-align:middle; }
.legitimacy-badge.caution { color:#fbbf24; }
.legitimacy-badge.suspicious { color:#f87171; }

/* Non-compete chip tag */
.nc-chip {
  display:inline-flex; align-items:center; gap:0.3rem; font-size:0.72rem; font-weight:600;
  padding:0.25rem 0.6rem; border-radius:999px;
  background:rgba(140,85,67,0.1); border:1px solid rgba(140,85,67,0.2); color:#c97d4e;
}
.nc-chip-remove {
  cursor:pointer; opacity:0.7; font-size:1rem; line-height:1;
  background:none; border:none; color:inherit; padding:0;
}
.nc-chip-remove:hover { opacity:1; }

/* Pipeline inbox status pill */
.pipeline-status-pill {
  display:inline-block; font-size:0.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; padding:0.12rem 0.45rem; border-radius:999px;
}
.pipeline-status-pill.pending   { background:rgba(245,158,11,0.1); color:#fbbf24; }
.pipeline-status-pill.done      { background:rgba(16,185,129,0.1); color:#34d399; }
.pipeline-status-pill.failed    { background:rgba(239,68,68,0.1); color:#f87171; }
.pipeline-status-pill.processing{ background:rgba(99,102,241,0.1); color:#818cf8; }

/* Integrity results panel */
.integrity-stat { display:flex; flex-direction:column; align-items:center; gap:0.15rem; }
.integrity-stat-value { font-size:1.5rem; font-weight:800; }
.integrity-stat-label { font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#64748b; }

/* ======================================================
   TRACKER — Redesign (Mockup 2)
====================================================== */
.tracker-topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.tracker-tab {
  display:inline-flex; align-items:center; gap:0.35rem; font-size:0.75rem; font-weight:600;
  padding:0.4rem 0.875rem; border-radius:0.75rem; border:1px solid rgba(140,85,67,0.15);
  color:#64748b; background:transparent; cursor:pointer; transition:all 0.15s;
}
.tracker-tab.active { border-color:var(--color-primary); color:var(--color-primary); background:rgba(140,85,67,0.08); }
.tracker-tab:hover:not(.active) { border-color:rgba(140,85,67,0.3); color:#94a3b8; }
.tracker-add-btn {
  display:inline-flex; align-items:center; gap:0.35rem; font-size:0.75rem; font-weight:700;
  padding:0.45rem 1rem; border-radius:0.75rem; background:var(--color-primary);
  color:#fff; border:none; cursor:pointer; transition:filter 0.15s;
}
.tracker-add-btn:hover { filter:brightness(1.12); }

/* Kanban column + card (override) */
.kanban-column { min-height:300px; }
.kanban-add-card {
  display:flex; align-items:center; justify-content:center; gap:0.35rem;
  font-size:0.75rem; font-weight:600; color:rgba(140,85,67,0.6);
  border:1.5px dashed rgba(140,85,67,0.3); border-radius:0.875rem; padding:0.6rem;
  cursor:pointer; transition:all 0.15s; background:transparent; width:100%; margin-bottom:0.5rem;
}
.kanban-add-card:hover { border-color:var(--color-primary); color:var(--color-primary); background:rgba(140,85,67,0.04); }

.kanban-card-head { display:flex; align-items:flex-start; gap:0.5rem; margin-bottom:0.5rem; }
.kanban-card-avatar {
  width:32px; height:32px; border-radius:0.5rem; background:rgba(140,85,67,0.15);
  display:flex; align-items:center; justify-content:center; font-size:0.7rem;
  font-weight:700; color:var(--color-primary); flex-shrink:0;
}
.kanban-card-day { font-size:0.65rem; color:#64748b; }

/* Slide-out detail panel */
.kanban-detail-panel {
  position:fixed; top:0; right:0; bottom:0; width:360px; max-width:95vw;
  background:#16192a; border-left:1px solid rgba(140,85,67,0.15);
  z-index:500; display:flex; flex-direction:column; box-shadow:-8px 0 40px rgba(0,0,0,0.3);
  overflow-y:auto; padding:1.25rem; animation:slideInRight 0.22s ease;
}
html:not(.dark) .kanban-detail-panel { background:#fff; border-color:#e5e7eb; }
@keyframes slideInRight { from { transform:translateX(100%); } to { transform:translateX(0); } }
.kanban-detail-header { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:1rem; }
.kanban-detail-avatar {
  width:40px; height:40px; border-radius:0.75rem; background:rgba(140,85,67,0.15);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem;
  font-weight:700; color:var(--color-primary); flex-shrink:0;
}
.kanban-nudge-btn {
  display:inline-flex; align-items:center; gap:0.35rem; font-size:0.8rem; font-weight:700;
  padding:0.5rem 1rem; border-radius:0.75rem; background:var(--color-primary);
  color:#fff; border:none; cursor:pointer; transition:filter 0.15s;
}
.kanban-nudge-btn:hover { filter:brightness(1.12); }
.kanban-match-bar { display:flex; align-items:center; gap:0.5rem; margin:0.75rem 0; }
.kanban-match-bar-track { flex:1; height:6px; background:rgba(140,85,67,0.15); border-radius:999px; overflow:hidden; }
.kanban-match-bar-fill { height:100%; background:var(--color-primary); border-radius:999px; transition:width 0.5s ease; }

.kanban-timeline { margin-top:0.5rem; }
.kanban-timeline-item { display:flex; gap:0.75rem; padding-bottom:1rem; position:relative; }
.kanban-timeline-item:not(:last-child)::after {
  content:''; position:absolute; left:5px; top:12px; bottom:0;
  width:1px; background:rgba(140,85,67,0.15);
}
.kanban-timeline-dot { width:11px; height:11px; border-radius:50%; background:var(--color-primary); flex-shrink:0; margin-top:2px; }
.kanban-timeline-dot.past { background:rgba(140,85,67,0.3); }
.kanban-timeline-title { font-size:0.8rem; font-weight:600; }
.kanban-timeline-date { font-size:0.7rem; color:#64748b; margin-top:0.1rem; }

/* ======================================================
   INTERVIEW PREP — Redesign (Mockup 3)
====================================================== */
.interview-session-bar {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(140,85,67,0.08); border:1px solid rgba(140,85,67,0.2);
  border-radius:1rem; padding:0.65rem 1rem;
}
.interview-session-timer { font-size:1rem; color:var(--color-primary); font-variant-numeric:tabular-nums; }
.interview-end-session-btn {
  font-size:0.75rem; font-weight:700; padding:0.35rem 0.875rem; border-radius:0.625rem;
  border:1px solid rgba(140,85,67,0.3); color:#94a3b8; background:transparent; cursor:pointer; transition:all 0.15s;
}
.interview-end-session-btn:hover { border-color:#ef4444; color:#ef4444; }

.interview-arena { display:grid; grid-template-columns:280px 1fr; gap:0.875rem; align-items:start; }
@media (max-width:768px) { .interview-arena { grid-template-columns:1fr; } }

.interview-queue-panel {
  background:rgba(255,255,255,0.02); border:1px solid rgba(140,85,67,0.1);
  border-radius:1.25rem; padding:1rem; position:sticky; top:1rem;
}
html:not(.dark) .interview-queue-panel { background:#f8fafc; border-color:#e5e7eb; }

.interview-q-item {
  border-radius:0.875rem; padding:0.65rem 0.75rem; cursor:pointer; transition:all 0.15s;
  background:transparent; border:1px solid transparent; margin-bottom:0.4rem;
}
.interview-q-item:hover { background:rgba(140,85,67,0.05); border-color:rgba(140,85,67,0.15); }
.interview-q-item.active { background:rgba(140,85,67,0.08); border-color:rgba(140,85,67,0.25); }
.interview-q-item.completed { opacity:0.5; }

.interview-diff-badge {
  display:inline-block; font-size:0.6rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.06em; padding:0.1rem 0.5rem; border-radius:0.35rem; margin-bottom:0.35rem;
}
.interview-diff-badge.hard { background:rgba(239,68,68,0.15); color:#ef4444; }
.interview-diff-badge.medium { background:rgba(245,158,11,0.15); color:#f59e0b; }
.interview-diff-badge.easy { background:rgba(16,185,129,0.15); color:#10b981; }

.interview-q-text { font-size:0.78rem; color:#cbd5e1; line-height:1.4; }
html:not(.dark) .interview-q-text { color:#374151; }

.interview-challenge-panel {
  background:rgba(255,255,255,0.02); border:1px solid rgba(140,85,67,0.1);
  border-radius:1.25rem; padding:1.25rem;
}
html:not(.dark) .interview-challenge-panel { background:#fff; border-color:#e5e7eb; }
.interview-current-question {
  font-size:1.1rem; font-weight:700; font-style:italic; line-height:1.5;
  color:#f1f5f9; min-height:4rem;
}
html:not(.dark) .interview-current-question { color:#1e293b; }

.interview-submit-btn {
  display:inline-flex; align-items:center; gap:0.35rem; font-size:0.8rem; font-weight:700;
  padding:0.5rem 1rem; border-radius:0.75rem; background:var(--color-primary);
  color:#fff; border:none; cursor:pointer; transition:filter 0.15s;
}
.interview-submit-btn:hover { filter:brightness(1.12); }

.interview-feedback-card {
  background:rgba(140,85,67,0.06); border:1px solid rgba(140,85,67,0.15);
  border-radius:1rem; padding:1rem;
}
.interview-score-ring { position:relative; width:72px; height:72px; flex-shrink:0; }
.interview-score-label {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.interview-score-num { font-size:1rem; font-weight:800; color:var(--color-primary); }
.interview-score-sub { font-size:0.45rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; }

/* ======================================================
   DOCUMENTS — Redesign (Mockup 4)
====================================================== */
.docs-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.docs-tab-bar {
  display:flex; gap:0.25rem; background:rgba(255,255,255,0.03);
  border:1px solid rgba(140,85,67,0.12); border-radius:0.875rem; padding:0.25rem;
}
html:not(.dark) .docs-tab-bar { background:#f1f5f9; border-color:#e2e8f0; }
.docs-tab {
  display:inline-flex; align-items:center; gap:0.35rem; font-size:0.75rem; font-weight:600;
  padding:0.4rem 0.875rem; border-radius:0.625rem; border:none; background:transparent;
  color:#64748b; cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
.docs-tab.active { background:var(--color-primary); color:#fff; }
.docs-tab:hover:not(.active) { background:rgba(140,85,67,0.08); color:#94a3b8; }

.docs-architect-layout { display:grid; grid-template-columns:180px 1fr 1fr; gap:0.875rem; align-items:start; }
@media (max-width:900px) { .docs-architect-layout { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .docs-architect-layout { grid-template-columns:1fr; } }

.docs-recent-panel {
  background:rgba(255,255,255,0.02); border:1px solid rgba(140,85,67,0.1);
  border-radius:1.25rem; padding:1rem;
}
html:not(.dark) .docs-recent-panel { background:#f8fafc; border-color:#e5e7eb; }
.docs-recent-item {
  display:flex; flex-direction:column; padding:0.5rem 0.6rem; border-radius:0.625rem;
  cursor:pointer; transition:all 0.15s; border:1px solid transparent; margin-bottom:0.25rem;
}
.docs-recent-item:hover { background:rgba(140,85,67,0.05); border-color:rgba(140,85,67,0.15); }
.docs-recent-item.active { background:rgba(140,85,67,0.08); border-color:rgba(140,85,67,0.25); }
.docs-recent-item-id { font-size:0.65rem; font-weight:700; color:var(--color-primary); text-transform:uppercase; }
.docs-recent-item-title { font-size:0.75rem; color:#f1f5f9; margin-top:0.1rem; }
html:not(.dark) .docs-recent-item-title { color:#1e293b; }

.docs-form-panel {
  background:rgba(255,255,255,0.02); border:1px solid rgba(140,85,67,0.1);
  border-radius:1.25rem; padding:1.25rem;
}
html:not(.dark) .docs-form-panel { background:#fff; border-color:#e5e7eb; }

.docs-tone-chips { display:flex; flex-wrap:wrap; gap:0.4rem; }
.docs-tone-chip {
  font-size:0.75rem; font-weight:600; padding:0.3rem 0.75rem; border-radius:999px;
  border:1px solid rgba(140,85,67,0.2); color:#94a3b8; background:transparent;
  cursor:pointer; transition:all 0.15s; outline-offset:2px;
}
.docs-tone-chip.active { border-color:var(--color-primary); color:var(--color-primary); background:rgba(140,85,67,0.06); }
.docs-tone-chip:hover:not(.active) { border-color:rgba(140,85,67,0.3); }
.docs-tone-chip:focus-visible {
  outline:2px solid var(--color-primary);
  box-shadow:0 0 0 3px rgba(140,85,67,0.22);
}
.docs-tone-chip.active:focus-visible {
  outline:2px solid var(--color-primary);
  box-shadow:0 0 0 3px rgba(140,85,67,0.28);
}

.docs-generate-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  font-size:0.875rem; font-weight:700; padding:0.7rem 1.25rem; border-radius:0.875rem;
  background:var(--color-primary); color:#fff; border:none; cursor:pointer; transition:filter 0.15s;
}
.docs-generate-btn:hover { filter:brightness(1.12); }

.docs-tailoring-accordion {
  border:1px solid rgba(140,85,67,0.12); border-radius:0.875rem; overflow:hidden;
}
html:not(.dark) .docs-tailoring-accordion { border-color:#e5e7eb; }
.docs-tailoring-summary {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.65rem 0.875rem; font-size:0.75rem; font-weight:600;
  color:#94a3b8; cursor:pointer; list-style:none; user-select:none;
}
.docs-tailoring-summary::-webkit-details-marker { display:none; }
.docs-tailoring-body { padding:0 0.875rem 0.875rem; }

.docs-preview-panel {
  background:rgba(255,255,255,0.02); border:1px solid rgba(140,85,67,0.1);
  border-radius:1.25rem; padding:1.25rem; display:flex; flex-direction:column;
}
html:not(.dark) .docs-preview-panel { background:#f8fafc; border-color:#e5e7eb; }
.docs-preview-area {
  flex:1; min-height:420px; background:#fff; border-radius:0.875rem;
  padding:1rem; overflow-y:auto; font-size:0.8rem; line-height:1.6; color:#1e293b;
}
html.dark .docs-preview-area { background:rgba(255,255,255,0.04); color:#e2e8f0; }
.docs-preview-icon-btn {
  width:30px; height:30px; border-radius:0.5rem; border:1px solid rgba(140,85,67,0.15);
  background:transparent; color:#64748b; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:all 0.15s;
}
.docs-preview-icon-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
.docs-regenerate-btn {
  display:inline-flex; align-items:center; gap:0.3rem; font-size:0.75rem; font-weight:700;
  padding:0.35rem 0.875rem; border-radius:0.625rem; border:1px solid rgba(140,85,67,0.25);
  color:var(--color-primary); background:transparent; cursor:pointer; transition:all 0.15s;
}
.docs-regenerate-btn:hover { background:rgba(140,85,67,0.08); }