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

/* ── Theme transition (active only during toggle, not on every hover) ── */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color 280ms ease,
    color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease !important;
}

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --bg:            #fff;
  --bg-sub:        #fafafa;
  --bg-hover:      #f5f5f5;
  --bg-active:     #ebebeb;
  --border:        #e5e5e5;
  --border-strong: #ccc;
  --text-1:        #0a0a0a;
  --text-2:        #525252;
  --text-3:        #a3a3a3;
  --accent:        #0070f3;
  --accent-hover:  #005ed3;
  --danger:        #dc2626;
  --danger-bg:     #fef2f2;
  --danger-border: #fca5a5;
  --warning:       #d97706;
  --warning-bg:    #fffbeb;
  --warning-border:#fde68a;
  --success:       #16a34a;
  --success-bg:    #f0fdf4;
  --sidebar-w:     256px;
  --header-h:      52px;
  --radius:        6px;
  --radius-lg:     8px;
  --bg-selected:       #eff6ff;
  --bg-selected-hover: #dbeafe;
  --skel-bg:           #e8e8e8;
  --skel-shine:        #f4f4f4;
}

/* ── Base ──────────────────────────────────────────────────────── */
html, body { height: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* ── Gate ──────────────────────────────────────────────────────── */
.gate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #fff;
}

.gate-box {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.gate-wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: -0.1px;
}

.gate-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-1);
  flex-shrink: 0;
}

.gate-heading {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.gate-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gate-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: #fff;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
}
.gate-input::placeholder { color: #aaa; }
.gate-input:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.gate-btn {
  width: 100%;
  height: 40px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.1px;
  transition: opacity 120ms;
}
.gate-btn:hover { opacity: 0.85; }
.gate-btn:active { opacity: 0.7; }

.gate-error {
  font-size: 12px;
  color: var(--danger);
  min-height: 16px;
  padding-left: 2px;
}

.gate-success {
  font-size: 12px;
  color: #16a34a;
  padding-left: 2px;
}


.gate-link {
  background: none;
  border: none;
  color: #aaa;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: center;
}

.gate-link:hover { color: var(--text-1); }

/* ── Layout ────────────────────────────────────────────────────── */
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  border-right: 1px solid var(--border);
  background: var(--bg-sub);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
/* Directional easing: spring on expand, fast-out on collapse */
.sidebar--expanding {
  transition: width 260ms cubic-bezier(0.16,1,0.3,1),
              min-width 260ms cubic-bezier(0.16,1,0.3,1);
}
.sidebar--collapsing {
  transition: width 200ms cubic-bezier(0.4,0,1,1),
              min-width 200ms cubic-bezier(0.4,0,1,1);
}

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
}
.sidebar-resize-handle:hover,
.sidebar--resizing .sidebar-resize-handle {
  background: var(--accent);
  opacity: 0.4;
}
.sidebar--collapsed .sidebar-resize-handle { display: none; }

.main {
  flex: 1;
  min-width: 0;
  transition: none;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}

.sidebar-title {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.2px;
  min-width: 0;
  overflow: hidden;
}

.sidebar-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sidebar-search {
  padding: 8px 10px;
  flex-shrink: 0;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}
.search-wrap > svg {
  position: absolute;
  left: 9px;
  width: 13px;
  height: 13px;
  color: var(--text-3);
  pointer-events: none;
  z-index: 1;
}
.search-wrap input {
  flex: 1;
  height: 30px;
  padding: 0 90px 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 12px;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  transition: border-color 150ms;
  min-width: 0;
}
.search-wrap input::placeholder { color: var(--text-3); }
.search-wrap input:focus { border-color: var(--border-strong); }

/* Clear search button — appears left of sort button when query is active */
.search-clear-btn {
  position: absolute;
  right: 62px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--text-3);
  color: var(--bg);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  padding: 0;
}
.search-clear-btn svg { width: 10px; height: 10px; }
.search-wrap.has-query .search-clear-btn { opacity: 1; pointer-events: auto; }
.search-clear-btn:hover { background: var(--text-2); }

/* Sort cycle button — lives inside search bar on the right */
.sort-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 7px;
  border: none;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-2);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
}
.sort-btn:hover { background: var(--bg-active); color: var(--text-1); }
.sort-btn svg { width: 11px; height: 11px; }
.sort-btn-label { letter-spacing: -0.1px; }

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.sidebar-list::-webkit-scrollbar { width: 4px; }
.sidebar-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Job card ──────────────────────────────────────────────────── */
.job-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 1px;
  transition: background 120ms;
}
.job-card:hover  { background: var(--bg-hover); }
.job-card.active { background: var(--bg-active); }
.job-card.card-selected { background: var(--bg-selected); }
.job-card.card-selected:hover { background: var(--bg-selected-hover); }

/* ── Per-card checkbox ───────────────────── */
.card-check {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 120ms, background 120ms, border-color 120ms;
  cursor: pointer;
}
.card-check svg { width: 10px; height: 10px; color: #fff; }
.job-card:hover .card-check,
.job-card.select-mode .card-check { opacity: 1; }
.card-check.checked {
  background: var(--accent);
  border-color: var(--accent);
  opacity: 1;
}

.card-body { flex: 1; min-width: 0; }

.job-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1px;
}

.job-card-company {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-card-date {
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: 6px;
}

.job-card-role {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Bulk action bar ─────────────────────── */
.bulk-bar {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.bulk-bar.visible { display: flex; }

.bulk-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bulk-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}
.bulk-clear {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: none; background: none; cursor: pointer;
  color: var(--text-3); border-radius: var(--radius);
  padding: 0;
  transition: background 120ms, color 120ms;
}
.bulk-clear:hover { background: var(--bg-hover); color: var(--text-1); }
.bulk-clear svg { width: 13px; height: 13px; }

.bulk-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bulk-actions::-webkit-scrollbar { display: none; }
.bulk-actions > * { flex-shrink: 0; }
.bulk-delete-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  flex-shrink: 0;
  gap: 5px;
}
.bulk-delete-btn svg { width: 13px; height: 13px; }

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.badge::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-draft      { background: #f4f4f5; color: #71717a; }
.badge-draft::before     { background: #a1a1aa; }
.badge-generated  { background: #eff6ff; color: #1d4ed8; }
.badge-generated::before { background: #60a5fa; }
.badge-applied    { background: #eef2ff; color: #4338ca; }
.badge-applied::before   { background: #818cf8; }
.badge-interview  { background: #fffbeb; color: #92400e; }
.badge-interview::before { background: #f59e0b; }
.badge-offer      { background: #f0fdf4; color: #14532d; }
.badge-offer::before     { background: #22c55e; }
.badge-rejected   { background: #fef2f2; color: #7f1d1d; }
.badge-rejected::before  { background: #f87171; }

/* ── Main area ─────────────────────────────────────────────────── */
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* ── Empty state ───────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  color: var(--text-3);
  text-align: center;
}
.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--bg-hover);
  border-radius: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.empty-icon svg { width: 20px; height: 20px; }
.empty-state p { font-size: 13px; color: var(--text-2); }

/* ── New form ──────────────────────────────────────────────────── */
.new-form {
  max-width: 560px;
  margin: 48px auto 0;
  padding: 0 24px;
  width: 100%;
}
.new-form h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 24px;
}
.new-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field-optional {
  font-size: 10.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
}
.field input,
.field textarea {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--text-1);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.field textarea { min-height: 180px; line-height: 1.6; }
.form-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ── Job detail ────────────────────────────────────────────────── */
.job-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.job-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 16px;
}

.job-header-left { min-width: 0; }
.job-header-left h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-header-left .meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
}

/* ── Tab template dropdown ───────────────────────────────────────── */
.tab-with-opts {
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 14px;
}
.tab-with-opts .tab {
  margin-right: 0;
}
.tab-dd {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 4px;
}
.tab-dd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-3);
  cursor: pointer;
  border-radius: 5px;
  padding: 0;
  flex-shrink: 0;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.tab-dd-btn svg { width: 12px; height: 12px; }
.tab-dd-btn:hover,
.tab-dd:has(.tab-dd-menu.open) .tab-dd-btn {
  background: var(--bg-active);
  border-color: var(--border-strong);
  color: var(--text-2);
}

.tab-dd-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 136px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  padding: 4px;
  z-index: 200;
  transform: translateY(-4px) scale(0.97);
  transition: opacity 150ms cubic-bezier(0.16,1,0.3,1), visibility 150ms, transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.tab-dd-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.tab-dd-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px 3px;
}
.tab-dd-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 100ms, color 100ms;
}
.tab-dd-item:hover { background: var(--bg-hover); color: var(--text-1); }
.tab-dd-item--active { color: var(--text-1); }
.tab-dd-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.tab-dd-item .tpl-check { visibility: hidden; color: var(--text-3); }
.tab-dd-item--active .tpl-check { visibility: visible; }

.job-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-save-status {
  font-size: 11px;
  color: var(--text-3);
  opacity: 0;
  transition: opacity 200ms;
  white-space: nowrap;
}
.header-save-status.visible { opacity: 1; }

.status-select {
  appearance: none;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 12px;
  color: var(--text-1);
  background: var(--bg);
  cursor: pointer;
  outline: none;
  transition: border-color 150ms;
}
.status-select:focus { border-color: var(--border-strong); }

/* ── Deal breaker ──────────────────────────────────────────────── */
.deal-breaker {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 24px 0;
  padding: 11px 14px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-lg);
  font-size: 13px;
  color: #78350f;
  font-weight: 500;
  flex-shrink: 0;
}
.deal-breaker svg { width: 14px; height: 14px; color: var(--warning); flex-shrink: 0; margin-top: 1px; }

/* ── Original job post link ──────────────────────────────────────── */
.apply-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: inherit;
}
.apply-link:hover { color: var(--accent); text-decoration: underline; }

/* ── Source / apply URL inline chip ─────────────────────────────── */
.source-link-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  vertical-align: middle;
  transition: border-color 140ms, color 140ms;
}
.source-link-inline svg { width: 9px; height: 9px; flex-shrink: 0; }
.source-link-inline:hover { border-color: var(--border-strong); color: var(--text-1); }

/* ── ATS keywords ──────────────────────────────────────────────── */
.ats-keywords {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Row 1 — label, height matches .sidebar-search (8px pad + 30px input + 8px pad = 46px) */
.ats-label-row {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 24px;
}
.ats-section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}
/* Row 2 — tags, height matches .status-filters (0px + 22px chip + 8px pad = 30px) */
.ats-tags-row {
  padding: 0 24px 8px;
}
.ats-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ats-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 120ms, transform 80ms;
}
.ats-tag:hover  { opacity: 0.8; }
.ats-tag:active { transform: scale(0.95); }
.ats-tag.hard { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.ats-tag.soft { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

/* ── Generate area ─────────────────────────────────────────────── */
.generate-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
  gap: 8px;
}
.gen-left  { display: flex; align-items: center; gap: 8px; }
.gen-right { display: flex; align-items: center; gap: 6px; }
.gen-sep   { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
.btn-ghost--subtle { opacity: 0.65; }
.btn-ghost--subtle:hover { opacity: 1; }

/* ── Tabs ──────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
  position: relative;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 2px;
  margin-right: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  user-select: none;
  transition: color 120ms, border-color 120ms;
}
.tab svg { width: 13px; height: 13px; }
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--text-1); border-bottom-color: transparent; }

/* ── Tab panels ────────────────────────────────────────────────── */
.tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── PDF pane ──────────────────────────────────────────────────── */
/* ── PDF loading skeleton ────────────────── */
.pdf-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 48px;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.pdf-loading-inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pdf-skel {
  background: var(--skel-bg);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.pdf-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skel-shine) 50%, transparent 100%);
  animation: skel-sweep 1.4s ease infinite;
}
@keyframes skel-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
.pdf-skel-header {
  height: 22px;
  width: 45%;
  margin-bottom: 6px;
}
.pdf-skel-line  { height: 13px; }

/* ── Compile overlay ─────────────────────────── */
.compile-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: compile-overlay-in 180ms ease both;
}
@keyframes compile-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.compile-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.compile-ring {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-bottom: 2px;
}
.compile-overlay-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.1px;
}
.compile-overlay-sub {
  font-size: 12px;
  color: var(--text-3);
  min-height: 16px;
}

/* ── Sidebar loading skeleton ────────────────── */
.skel-shimmer {
  background: var(--skel-bg);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.skel-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skel-shine) 50%, transparent 100%);
  animation: skel-sweep 1.4s ease infinite;
}
/* Stagger sweep so cards don't all pulse in lockstep */
.job-card-skel:nth-child(2) .skel-shimmer::after { animation-delay: 0.08s; }
.job-card-skel:nth-child(3) .skel-shimmer::after { animation-delay: 0.16s; }
.job-card-skel:nth-child(4) .skel-shimmer::after { animation-delay: 0.10s; }
.job-card-skel:nth-child(5) .skel-shimmer::after { animation-delay: 0.18s; }
.job-card-skel:nth-child(6) .skel-shimmer::after { animation-delay: 0.06s; }
.job-card-skel:nth-child(7) .skel-shimmer::after { animation-delay: 0.14s; }

.jcs-week-hd {
  padding: 10px 10px 4px;
}
.jcs-week-label {
  height: 10px;
  width: 58px;
  border-radius: 3px;
}
.job-card-skel {
  padding: 9px 10px;
  border-radius: var(--radius);
  margin-bottom: 1px;
}
.jcs-body { display: flex; flex-direction: column; gap: 5px; }
.jcs-top  { display: flex; justify-content: space-between; align-items: center; }
.jcs-company {
  height: 13px;
  border-radius: 3px;
  flex-shrink: 1;
  min-width: 0;
}
.jcs-date {
  height: 10px;
  width: 38px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-left: 8px;
}
.jcs-role  { height: 11px; border-radius: 3px; }
.jcs-badge { height: 16px; width: 54px; border-radius: var(--radius); margin-top: 1px; }

.pdf-pane {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  contain: layout style paint;
  isolation: isolate;
}
.pdf-pane iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  will-change: transform;
  transform: translateZ(0);
}

/* ── JD pane ───────────────────────────────────────────────────── */
.jd-pane {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.jd-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
  white-space: pre-wrap;
  max-width: 720px;
}
.jd-empty-state {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
}
.jd-empty-hint {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
}
.jd-paste-area {
  width: 100%;
  min-height: 220px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-1);
  background: var(--bg);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms;
}
.jd-paste-area:focus { border-color: var(--border-strong); }
.jd-paste-area::placeholder { color: var(--text-3); }

/* ── Draft editor ──────────────────────────────────────────────── */
.draft-editor {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.draft-editor::-webkit-scrollbar { width: 4px; }
.draft-editor::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Section dividers */
.draft-divider {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.1px;
  padding: 22px 0 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.draft-divider:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* Named field (summary, skills) */
.draft-field { margin-bottom: 18px; }
.draft-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 6px;
}

/* Experience / project entry */
.draft-entry { margin-bottom: 18px; }
.draft-entry-hd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 9px;
}
.draft-entry-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}
.draft-entry-role-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  margin: -3px -6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  background: transparent;
  line-height: 1.3;
  transition: border-color 120ms, background 120ms;
}
.draft-entry-role-input:hover { border-color: var(--border); background: var(--bg-hover); }
.draft-entry-role-input:focus { border-color: var(--accent); background: var(--bg); outline: none; box-shadow: 0 0 0 3px rgba(0,112,243,.08); }
.draft-entry-meta {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
}

/* Bullet inputs */
.draft-bullets { display: flex; flex-direction: column; gap: 4px; }
.draft-bullet {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  transition: border-color 150ms, background 150ms;
}
.draft-bullet:hover   { border-color: var(--border-strong); }
.draft-bullet:focus   { border-color: var(--accent); background: var(--bg-sub); }
.draft-bullet.over-limit { border-color: var(--danger); background: var(--danger-bg); }

/* Textareas */
.draft-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  resize: vertical;
  transition: border-color 150ms, background 150ms;
}
.draft-textarea:hover { border-color: var(--border-strong); }
.draft-textarea:focus { border-color: var(--accent); background: var(--bg-sub); }

/* Static rows (greeting, closing) */
.draft-static-row {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.65;
  padding: 4px 0 18px;
}
.draft-static-row--closing { padding-top: 4px; padding-bottom: 0; }

/* ── Preview drawer ────────────────────────────────────────────── */
.pdrawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 82%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 48px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 340ms cubic-bezier(0.16,1,0.3,1);
  z-index: 20;
  will-change: transform;
  contain: layout style;
  isolation: isolate;
}
.pdrawer.open {
  transform: translateX(0);
  box-shadow: -16px 0 48px rgba(0,0,0,0.11);
}

.pdrawer-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 24px;
  height: 42px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pdrawer-tabs {
  display: flex;
}
.pdrawer-tab {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 2px;
  margin-right: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  user-select: none;
  transition: color 120ms, border-color 120ms;
}
.pdrawer-tab:hover  { color: var(--text-2); }
.pdrawer-tab.active { color: var(--text-1); border-bottom-color: var(--text-1); }

.pdrawer-newtab,
.pdrawer-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
}
.pdrawer-newtab:hover,
.pdrawer-close:hover  { background: var(--bg-sub); color: var(--text-1); }
.pdrawer-newtab svg,
.pdrawer-close svg    { width: 14px; height: 14px; }

.pdrawer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pdrawer-body .pdf-pane { flex: 1; min-height: 0; }

/* ── Split pane (legacy, kept for non-draft PDF view) ──────────── */
.split-pane {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.draft-pane-wrapper {
  width: 400px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pdf-pane-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.pdf-pane-wrapper .pdf-pane { position: absolute; inset: 0; }

/* ── Buttons ───────────────────────────────────────────────────── */
button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0 12px;
  height: 30px;
  white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms, opacity 120ms, box-shadow 120ms;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
button svg { width: 13px; height: 13px; flex-shrink: 0; }

.btn-primary {
  background: var(--text-1);
  color: #fff;
  border-color: var(--text-1);
}
.btn-primary:hover:not(:disabled) { background: #333; border-color: #333; }

@keyframes header-gen-slide-in {
  from { opacity: 0; transform: translateX(8px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.header-gen-btn {
  animation: header-gen-slide-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.btn-ghost {
  background: var(--bg);
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-1);
  border-color: var(--border-strong);
}

.btn-danger {
  background: var(--bg);
  color: var(--danger);
  border-color: var(--border);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* ── Sidebar header actions ────────────────────────────────────── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--bg-active); color: var(--text-1); }
.btn-icon svg   { width: 14px; height: 14px; }

/* ── Generation notice (sidebar) ───────────────────────────────── */
.gen-notice {
  flex-shrink: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gen-notice--visible {
  max-height: 72px;
}
.gen-notice-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease 60ms, transform 180ms ease 60ms;
}
.gen-notice--visible .gen-notice-inner {
  opacity: 1;
  transform: translateY(0);
}
.gen-notice-spinner { color: var(--text-3); flex-shrink: 0; }
.gen-notice-check {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #16a34a;
}
.gen-notice-check svg { width: 14px; height: 14px; }
.gen-notice-body { flex: 1; min-width: 0; }
.gen-notice-label {
  font-size: 11px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.gen-notice-step {
  font-size: 10px; color: var(--text-3); line-height: 1.3; margin-top: 1px;
}
.gen-notice-link {
  flex-shrink: 0; background: none; border: none; padding: 2px 6px;
  font-size: 11px; font-weight: 500; color: var(--text-2); cursor: pointer;
  border-radius: 4px; transition: background 120ms, color 120ms;
}
.gen-notice-link:hover { background: var(--bg-hover); color: var(--text-1); }
.gen-notice-bar {
  height: 2px; background: var(--bg-hover); margin: 0 10px 4px;
}
.gen-notice-fill {
  height: 100%; background: var(--text-2);
  transition: width 800ms ease; border-radius: 1px;
}
.gen-notice-fill--done { background: #16a34a; }
.sidebar--collapsed .gen-notice { display: none; }

/* ── Sidebar footer ────────────────────────────────────────────── */
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
}
.sidebar-footer-btn:hover { background: var(--bg-active); color: var(--text-1); }
.sidebar-footer-btn--active { background: var(--bg-active); color: var(--text-1); }
.sidebar-footer-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Shared view toolbar (master, stats, profile, changelog) ───── */
.view-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

/* ── Master resume editor ──────────────────────────────────────── */
.master-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  color: var(--text-3);
  font-size: 13px;
}
.master-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-sub);
}
.master-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}
.master-subtitle {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.master-scroll {
  flex: 1;
  overflow-y: auto;
  width: 100%;
}
.master-scroll-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 16px 64px;
  box-sizing: border-box;
}
.master-scroll::-webkit-scrollbar { width: 4px; }
.master-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Card containers for info/summary/section blocks */
.master-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  margin-bottom: 8px;
}
.master-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.master-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 5px;
}
/* Stacked title + subtitle in view toolbars */
.view-toolbar-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.master-section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  padding: 24px 0 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.master-section-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.master-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 4px;
}
.master-field { display: flex; flex-direction: column; }
.master-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  transition: border-color 150ms, background 150ms;
}
.master-input:hover { border-color: var(--border-strong); }
.master-input:focus { border-color: var(--accent); background: var(--bg-sub); }
.master-input--meta { color: var(--text-2); font-size: 12px; }
.master-entry-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 9px;
}

/* ── Master editor — movable sections ──────────────────────────── */
.master-movable-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 6px;
  margin-bottom: 8px;
  transition: box-shadow 120ms, border-color 120ms, opacity 150ms;
}
.master-movable-section.msec--over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,112,243,.12);
}
.master-movable-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 12px;
}
.master-movable-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.master-section-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-2);
  background: none;
  border: none;
  outline: none;
  padding: 2px 4px;
  border-radius: 4px;
  min-width: 60px;
  width: auto;
  max-width: 200px;
  cursor: text;
  transition: background 120ms, color 120ms;
}
.master-section-name:hover { background: var(--bg-hover); }
.master-section-name:focus { background: #eff6ff; color: var(--text-1); outline: 1px solid var(--accent); outline-offset: 1px; }
.master-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: grab;
  color: var(--text-3);
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 120ms, background 120ms;
}
.master-grip:hover { color: var(--text-1); background: var(--bg-active); }
.master-grip:active { cursor: grabbing; }
.master-grip svg { width: 14px; height: 14px; }
.master-grip-placeholder { width: 20px; height: 20px; flex-shrink: 0; }
.master-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: none;
  color: var(--text-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.master-add-btn:hover { border-color: var(--accent); color: var(--accent); background: #eff6ff; }
.master-add-btn svg { width: 11px; height: 11px; }

/* ── Master editor — entries ───────────────────────────────────── */
.master-movable-body { padding-bottom: 4px; }
.master-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--bg-sub);
  transition: box-shadow 120ms, border-color 120ms, opacity 150ms;
}
.master-entry.mentry--over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,112,243,.12);
}
.master-entry-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.master-grip--entry { width: 18px; height: 18px; }
.master-rm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  flex-shrink: 0;
}
.master-rm-btn:hover { background: var(--danger-bg); color: var(--danger); }
.master-rm-btn svg { width: 13px; height: 13px; }
.master-add-bullet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--text-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 4px;
  transition: color 120ms, background 120ms;
}
.master-add-bullet:hover { color: var(--accent); background: #eff6ff; }
.master-add-bullet svg { width: 11px; height: 11px; }
.master-rm-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
}
.bullet-wrap:hover .master-rm-bullet { opacity: 1; }
.master-rm-bullet:hover { background: var(--danger-bg); color: var(--danger); }
.master-rm-bullet svg { width: 10px; height: 10px; }
.master-edu-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.master-edu-row .master-input { flex: 1; }

.btn-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  background: var(--text-1);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
}
.btn-new:hover { background: #333; }
.btn-new svg { width: 11px; height: 11px; }

/* ── Status filter chips ───────────────────────────────────────── */
.status-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.status-filters::-webkit-scrollbar { display: none; }
.sf-chip {
  height: 22px;
  padding: 0 9px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.sf-chip:hover  { background: var(--bg-sub); color: var(--text-2); }
.sf-chip.active { background: var(--text-1); border-color: var(--text-1); color: #fff; }

/* ── Status dots & custom dropdown ────────────────────────────── */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.status--draft      .status-dot, .sbar-fill--draft      { background: #a1a1aa; }
.status--generated  .status-dot, .sbar-fill--generated  { background: #60a5fa; }
.status--applied    .status-dot, .sbar-fill--applied    { background: #818cf8; }
.status--interview  .status-dot, .sbar-fill--interview  { background: #f59e0b; }
.status--offer      .status-dot, .sbar-fill--offer      { background: #22c55e; }
.status--rejected   .status-dot, .sbar-fill--rejected   { background: #f87171; }

.status-dd { position: relative; }
.status-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, color 150ms;
  white-space: nowrap;
}
.status-dd-btn:hover { border-color: var(--border-strong); }
.sdd-caret {
  width: 12px; height: 12px;
  color: var(--text-3);
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.status-dd:has(.status-dd-menu.open) .sdd-caret { transform: rotate(180deg); }

.status-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: 50;
  padding: 4px;
  animation: dd-in 140ms cubic-bezier(0.16,1,0.3,1);
}
.status-dd-menu.open { display: block; }
@keyframes dd-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sdd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: background 100ms;
}
.sdd-item:hover      { background: var(--bg-sub); color: var(--text-1); }
.sdd-item--active    { color: var(--text-1); background: var(--bg-sub); }

/* Per-status tinted background + border on the status button — matches badge palette */
.status-dd-btn.status--draft      { border-color: #d4d4d8; background: #f4f4f5; color: #52525b; }
.status-dd-btn.status--generated  { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.status-dd-btn.status--applied    { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.status-dd-btn.status--interview  { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.status-dd-btn.status--offer      { border-color: #bbf7d0; background: #f0fdf4; color: #14532d; }
.status-dd-btn.status--rejected   { border-color: #fecaca; background: #fef2f2; color: #7f1d1d; }

/* ── Job actions dropdown (header ··· menu) ──────────────────────── */
.ja-dd { position: relative; }
/* Bridge pseudo-element fills the 6px gap so hover doesn't break mid-transit */
.ja-dd::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 6px;
}
.ja-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  padding: 4px;
  z-index: 100;
  transform: translateY(-4px) scale(0.97);
  transition: opacity 150ms cubic-bezier(0.16,1,0.3,1), visibility 150ms, transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.ja-dd:hover .ja-menu,
.ja-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.ja-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 100ms, color 100ms;
}
.ja-item:hover:not(:disabled)  { background: var(--bg-hover); color: var(--text-1); }
.ja-item:disabled               { opacity: 0.45; cursor: default; }
.ja-item svg                    { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-3); }
.ja-item:hover:not(:disabled) svg { color: var(--text-2); }
.ja-item--danger                { color: var(--danger); }
.ja-item--danger:hover          { background: var(--danger-bg); color: var(--danger); }
.ja-item--danger svg            { color: var(--danger); }
.ja-label { flex: 1; }
.ja-hint {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ja-sep { height: 1px; background: var(--border); margin: 3px 0; }

/* ── Keyboard shortcuts help ───────────────────────────────────── */
/* ── Shortcuts page ────────────────────────────────────────────── */
.sc-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sc-body {
  flex: 1;
  overflow-y: auto;
  width: 100%;
}
.sc-body-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sc-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.sc-group {
  display: flex;
  flex-direction: column;
}
.sc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.sc-row:last-child { border-bottom: none; }
.sc-keys {
  display: flex;
  gap: 4px;
  min-width: 72px;
  flex-shrink: 0;
}
.sc-desc {
  font-size: 13px;
  color: var(--text-2);
}
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}

/* ── JD import ─────────────────────────────────────────────────── */
.jd-field-header { margin-bottom: 6px; }
.jd-import-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.jd-url-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  transition: border-color 150ms;
}
.jd-url-input:focus { border-color: var(--accent); }
.jd-import-btn { height: 32px; white-space: nowrap; }

/* ── Stats dashboard ───────────────────────────────────────────── */
.stats-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* stats-toolbar → .view-toolbar */
.stats-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 13px;
}
.stats-empty svg { width: 32px; height: 32px; }
.stats-scroll {
  flex: 1;
  overflow-y: auto;
  width: 100%;
}
.stats-scroll-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 32px 64px;
  box-sizing: border-box;
}
.stats-scroll::-webkit-scrollbar { width: 4px; }
.stats-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.stats-section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin: 28px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.stats-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.kpi-card {
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 4px;
}
.kpi-unit { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.kpi-label { font-size: 11px; font-weight: 500; color: var(--text-3); }

.stats-bars { display: flex; flex-direction: column; gap: 2px; }
.sbar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; margin: 0 -8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms;
}
.sbar-row:hover { background: var(--bg-hover); }
.sbar-row:hover .sbar-label { color: var(--text-1); }
.sbar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  width: 80px;
  flex-shrink: 0;
}
.sbar-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 9999px;
  overflow: hidden;
}
.sbar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 600ms cubic-bezier(0.4,0,0.2,1);
}
.sbar-count { font-size: 12px; font-weight: 600; color: var(--text-2); width: 20px; text-align: right; }

.stats-funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-step { }
.funnel-bar-wrap { height: 10px; background: var(--border); border-radius: 9999px; overflow: hidden; margin-bottom: 4px; }
.funnel-bar { height: 100%; border-radius: 9999px; transition: width 600ms cubic-bezier(0.4,0,0.2,1); }
.funnel-bar.status--applied   { background: #818cf8; }
.funnel-bar.status--interview { background: #f59e0b; }
.funnel-bar.status--offer     { background: #22c55e; }
.funnel-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.funnel-meta strong { color: var(--text-1); font-weight: 600; }

/* ── AI Usage section (Stats view) ─────────────────────────────── */
.usage-section { margin-bottom: 24px; }
.usage-loading, .usage-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 0;
}
.usage-table {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.usage-day { border-bottom: 1px solid var(--border); }
.usage-day:last-child { border-bottom: none; }
.usage-day-hd {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 14px;
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--text-1); transition: background 120ms;
}
.usage-day-hd:hover { background: var(--bg-hover); }
.usage-day-label { font-size: 12px; font-weight: 600; flex: 1; }
.usage-day-cost  { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.usage-day-rows {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.usage-day-rows--open { grid-template-rows: 1fr; }
.usage-day-rows-inner { overflow: hidden; }
.usage-row {
  display: grid;
  grid-template-columns: 110px 72px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 14px 7px 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.usage-model { font-weight: 500; color: var(--text-1); }
.usage-calls { color: var(--text-3); }
.usage-tokens { color: var(--text-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.usage-cache  { color: var(--text-3); }
.usage-sep    { color: var(--border-strong); }
.usage-cost   {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  text-align: right;
}
.usage-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-sub);
}
.usage-total strong {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}

/* ── Version history ───────────────────────────────────────────── */
.history-pane {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.history-pane::-webkit-scrollbar { width: 4px; }
.history-pane::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.history-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
  padding: 40px 24px;
}
.history-empty svg { width: 28px; height: 28px; }
.hist-entry {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
.hist-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.hist-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.hist-restore-btn { font-size: 12px; }
.hist-summary {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ── Spinner ───────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.55s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast notifications ───────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #18181b;
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.1);
  font-size: 13px;
  font-weight: 500;
  max-width: 340px;
  min-width: 240px;
  pointer-events: all;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), opacity 220ms ease;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}
.toast.toast-in { transform: translateY(0); opacity: 1; }
.toast.toast-out { transform: translateY(6px); opacity: 0; }

.toast-icon { display: flex; align-items: center; flex-shrink: 0; }
.toast-icon svg { width: 15px; height: 15px; }

.toast-error   .toast-icon svg { color: #f87171; }
.toast-success .toast-icon svg { color: #4ade80; }
.toast-info    .toast-icon svg { color: #60a5fa; }
.toast-warning .toast-icon svg { color: #fbbf24; }

.toast-text { flex: 1; }

.toast-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  height: auto;
  min-height: unset;
  transition: color 120ms, background 120ms;
}
.toast-close-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.toast-close-btn svg { width: 12px; height: 12px; }

.toast-action {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 9px;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms;
  letter-spacing: 0.01em;
}
.toast-action:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }

.toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,0.28);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transform-origin: left;
  animation: toast-shrink linear forwards;
}
@keyframes toast-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Confirm modal ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 180ms ease;
}
.modal-overlay.modal-visible { opacity: 1; }

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  width: 400px;
  max-width: calc(100vw - 40px);
  transform: translateY(-10px) scale(0.97);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), opacity 180ms ease;
  opacity: 0;
}
.modal-overlay.modal-visible .modal { transform: translateY(0) scale(1); opacity: 1; }

.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
}
.modal-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.modal-header-icon.icon-danger { background: var(--danger-bg); color: var(--danger); }
.modal-header-icon.icon-danger svg { width: 16px; height: 16px; }

.modal-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-1);
}

.modal-body {
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-message {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-2);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
}

.modal--wide { width: 560px; }

.import-textarea {
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-1);
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  outline: none;
  margin-bottom: 10px;
}
.import-textarea:focus { border-color: var(--accent, #2563eb); }

.import-error {
  font-size: 12px;
  color: var(--danger, #dc2626);
  padding: 0 2px 10px;
}

/* ── Analysis / Loading screen ─────────────────────────────────── */
/* ── Analysis / generation screen ───────────────────────────────── */
.analysis-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  background: var(--bg);
  padding: 40px 24px;
}

.analysis-wrap {
  width: 400px;
  max-width: 100%;
  animation: fade-up 280ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.an-eyebrow {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}
.an-heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.4px;
  margin: 0 0 24px;
}

/* ── Steps ───────────────────────────────── */
.an-steps {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 18px;
}
.an-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  transition: background 200ms;
}
.an-step + .an-step { border-top: 1px solid var(--border); }
.an-step.step-active { background: var(--bg-sub); }

.an-step-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 250ms, border-color 250ms;
  border: 1.5px solid var(--border-strong);
}
.an-step.step-done .an-step-dot {
  background: #16a34a;
  border-color: #16a34a;
}
.an-step.step-done .an-step-dot svg { width: 10px; height: 10px; color: #fff; }
.an-step.step-active .an-step-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.an-step.step-active .an-step-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: an-ring 1.5s ease-out infinite;
}
@keyframes an-ring {
  0%   { transform: scale(0.7); opacity: 0.5; }
  100% { transform: scale(1.9); opacity: 0;   }
}
.an-active-dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
}

.an-step-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  transition: color 250ms;
}
.an-step.step-active .an-step-label { color: var(--text-1); font-weight: 500; }
.an-step.step-done   .an-step-label { color: var(--text-2); }

.an-step-icon {
  width: 13px; height: 13px;
  color: var(--border-strong);
  flex-shrink: 0;
  transition: color 250ms;
}
.an-step.step-active .an-step-icon { color: var(--accent); }
.an-step.step-done   .an-step-icon { color: #16a34a; }

/* ── Footer ──────────────────────────────── */
.an-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.an-bar {
  height: 2px;
  background: var(--border);
  border-radius: 9999px;
  overflow: hidden;
}
.an-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 9999px;
  transition: width 900ms cubic-bezier(0.4,0,0.2,1);
}
.an-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
}
.an-time svg { width: 11px; height: 11px; }

/* ── Notes pane ─────────────────────────────────────────────────── */
.notes-pane {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 32px;
  gap: 20px;
}
.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notes-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
}
.notes-save-ind {
  font-size: 11px;
  color: var(--text-3);
  min-height: 14px;
}
.notes-textarea {
  width: 100%;
  min-height: 160px;
  flex: 1;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-1);
  background: var(--bg);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms, box-shadow 150ms;
}
.notes-textarea:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.notes-textarea::placeholder { color: var(--text-3); }

/* ── Status timeline ────────────────────────────────────────────── */
.timeline-section { display: flex; flex-direction: column; gap: 10px; }
.timeline-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
}
.timeline-list { display: flex; flex-direction: column; gap: 6px; }
.timeline-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.timeline-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.timeline-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  padding: 4px 0;
}

/* ── Sidebar collapse ───────────────────────────────────────────── */
.sidebar--collapsed {
  width: 48px;
  min-width: 48px;
}

/* Title text slides away */
.sidebar-title-text {
  transition: opacity 150ms ease, max-width 230ms cubic-bezier(.4,0,.2,1);
  max-width: 160px;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar--collapsed .sidebar-title-text { opacity: 0; max-width: 0; }

.sidebar-logo {
  height: 20px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.dark-mode .sidebar-logo {
  filter: invert(1);
}

/* New button collapses */
.btn-new {
  transition: opacity 150ms ease, max-width 230ms cubic-bezier(.4,0,.2,1), padding 230ms cubic-bezier(.4,0,.2,1);
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
}
.sidebar--collapsed .btn-new {
  opacity: 0; max-width: 0; padding-left: 0; padding-right: 0; pointer-events: none;
}

/* Fade-able sections (search, filters) */
.sidebar-fade {
  transition: opacity 150ms ease;
  opacity: 1;
}
.sidebar--collapsed .sidebar-fade {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
}

/* Header: center the collapse button when collapsed */
.sidebar--collapsed .sidebar-header {
  justify-content: center;
  padding: 0;
}
.sidebar--collapsed .sidebar-title { display: none; }

/* Collapsed list */
.sidebar--collapsed .sidebar-list {
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sidebar--collapsed .job-card {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  gap: 0;
}
.sidebar--collapsed .card-body,
.sidebar--collapsed .card-check { display: none; }

/* Status dot visible only when collapsed */
.card-collapse-dot {
  display: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sidebar--collapsed .card-collapse-dot { display: block; }

/* Active job in collapsed state */
.sidebar--collapsed .job-card.active { background: var(--bg-active); }

/* Status-colored dots in collapsed view */
.card-collapse-dot--draft      { background: #a1a1aa; }
.card-collapse-dot--generated  { background: #60a5fa; }
.card-collapse-dot--applied    { background: #818cf8; }
.card-collapse-dot--interview  { background: #f59e0b; }
.card-collapse-dot--offer      { background: #22c55e; }
.card-collapse-dot--rejected   { background: #f87171; }

/* Collapsed footer: icon-only centered column */
.sidebar--collapsed .sidebar-footer {
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
}
.sidebar--collapsed .sidebar-footer-btn {
  width: 32px; height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
}
.sidebar--collapsed .sidebar-footer-btn span { display: none; }


/* ── Job age badge ──────────────────────────────────────────────── */
.card-top-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.card-bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.card-bottom-row .screen-badge { margin-left: auto; }
.job-age {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.job-age--stale { color: var(--warning); }
.job-age--old   { color: var(--danger);  }

/* ── Follow-up badge ────────────────────────────────────────────── */
.fu-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 99px;
  line-height: 1;
}
.fu-badge svg { width: 9px; height: 9px; }
.fu-badge--soon    { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.fu-badge--today   { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.fu-badge--overdue { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.card--overdue { border-left: 2px solid var(--danger); }

/* ── Screen badge (sidebar) ─────────────────────────────────────── */
.screen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: default;
  flex-shrink: 0;
}
.screen-badge--good    { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.screen-badge--risky   { background: #fef9c3; color: #ca8a04; border: 1px solid #fde68a; }
.screen-badge--blocker { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }

/* ── Screen section (header area, below deal-breaker) ───────────── */
.screen-area {
  padding: 12px 24px 8px;
  flex-shrink: 0;
}
.screen-area--empty { padding-bottom: 4px; }
.screen-area .screen-result { margin-bottom: 0; }

/* ── Screen result ──────────────────────────────────────────────── */
.screen-result {
  border-radius: 8px;
  padding: 12px 14px 13px 14px;
  margin-bottom: 14px;
  border: 1px solid;
}
.screen-result--good    { background: #f0fdf4; border-color: #bbf7d0; }
.screen-result--risky   { background: #fefce8; border-color: #fde68a; }
.screen-result--blocker { background: #fff1f2; border-color: #fecdd3; }
.screen-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  user-select: none;
}
.screen-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.screen-chevron {
  display: flex;
  align-items: center;
  color: var(--text-3);
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
}
.screen-chevron svg { width: 14px; height: 14px; }
.screen-chevron--collapsed { transform: rotate(-90deg); }
.screen-reasons-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 200ms cubic-bezier(.4,0,.2,1),
              opacity            200ms cubic-bezier(.4,0,.2,1);
  opacity: 1;
  will-change: grid-template-rows, opacity;
}
.screen-reasons-wrap--collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}
.screen-reasons-inner { min-height: 0; overflow: hidden; }
.screen-result:has(.screen-reasons-wrap--collapsed) .screen-result-header { margin-bottom: 0; }
.screen-result-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
}
.screen-result--good    .screen-result-label { color: #16a34a; }
.screen-result--risky   .screen-result-label { color: #b45309; }
.screen-result--blocker .screen-result-label { color: #dc2626; }
.screen-rerun {
  font-size: 10.5px;
  font-weight: 500;
  font-family: inherit;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.screen-result--good    .screen-rerun { color: #16a34a; border-color: #86efac; }
.screen-result--risky   .screen-rerun { color: #b45309; border-color: #fcd34d; }
.screen-result--blocker .screen-rerun { color: #dc2626; border-color: #fca5a5; }
.screen-result--good    .screen-rerun:hover { background: #dcfce7; }
.screen-result--risky   .screen-rerun:hover { background: #fef9c3; }
.screen-result--blocker .screen-rerun:hover { background: #fee2e2; }
.screen-reasons {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.screen-reasons li {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.screen-reasons li::before {
  content: '–';
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-3);
}
.screen-empty {
  margin-bottom: 4px;
}
.screen-run-btn {
  font-size: 12px;
  color: var(--text-3);
  gap: 5px;
}
.screen-run-btn svg { width: 13px; height: 13px; }

/* ── Screen pill + popup (header) ───────────────────────────────── */
.screen-dd { position: relative; }
.screen-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 120ms;
}
.screen-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.screen-pill:hover { opacity: 0.8; }
.screen-pill--empty   { background: var(--bg); border-color: var(--border); color: var(--text-3); }
.screen-pill--good    { background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; }
.screen-pill--risky   { background: #fefce8; border-color: #fde68a; color: #b45309; }
.screen-pill--blocker { background: #fff1f2; border-color: #fecdd3; color: #dc2626; }

.screen-dd-popup {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  z-index: 50;
  padding: 14px;
  animation: dd-in 140ms cubic-bezier(0.16,1,0.3,1);
}
.screen-dd-popup.open { display: block; }
.screen-dd-verdict {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  margin-bottom: 10px;
}
.screen-dd-verdict--good    { color: #16a34a; }
.screen-dd-verdict--risky   { color: #b45309; }
.screen-dd-verdict--blocker { color: #dc2626; }
.screen-dd-reasons {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.screen-dd-reasons li { display: flex; align-items: baseline; gap: 7px; }
.screen-dd-reasons li::before { content: '–'; flex-shrink: 0; font-size: 11px; color: var(--text-3); }
.screen-dd-footer { border-top: 1px solid var(--border); padding-top: 10px; }
.screen-rerun-btn { font-size: 12px; height: 26px; padding: 0 10px; gap: 5px; }
.screen-rerun-btn svg { width: 11px; height: 11px; }

/* ── Sidebar week grouping ──────────────────────────────────────── */
.sidebar-week-hd {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 10px 4px;
  cursor: pointer;
  user-select: none;
  transition: color 150ms;
}
.sidebar-week-hd:hover { color: var(--text-1); }
.week-hd-label { flex: 1; }
.week-hd-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}
.week-hd-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
}
.sidebar-week-group--collapsed .week-hd-chevron { transform: rotate(-90deg); }
.sidebar-week-group--collapsed .sidebar-week-hd { color: var(--text-2); }
.week-cards-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.week-cards-wrap--collapsed { grid-template-rows: 0fr; }
.week-cards-inner { min-height: 0; overflow: hidden; }
.sidebar-week-group + .sidebar-week-group { margin-top: 2px; }
.sidebar--collapsed .sidebar-week-hd { display: none; }
.sidebar--collapsed .sidebar-week-group { display: contents; }
.sidebar--collapsed .sidebar-list { overflow-y: hidden; }

/* ── Settings view ──────────────────────────────────────────────── */
.settings-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-sub);
}
.settings-body {
  flex: 1;
  overflow-y: auto;
}
.settings-body::-webkit-scrollbar { width: 4px; }
.settings-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.settings-scroll {
  padding: 16px 16px 64px;
  max-width: 600px;
  margin: 0 auto;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.settings-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.settings-row-info { flex: 1; min-width: 0; }
.settings-row-label { font-size: 13px; font-weight: 500; color: var(--text-1); }
.settings-row-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* Toggle switch */
.settings-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  display: block;
}
.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.settings-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-active);
  border-radius: 20px;
  transition: background 150ms;
}
.settings-toggle-track::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform 150ms;
}
.settings-toggle input:checked + .settings-toggle-track { background: var(--accent); }
.settings-toggle input:checked + .settings-toggle-track::after { transform: translateX(16px); }

/* Number input for settings */
.settings-number {
  width: 64px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  text-align: center;
  transition: border-color 150ms, box-shadow 150ms;
}
.settings-number:hover { border-color: var(--border-strong); }
.settings-number:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,112,243,.08); }

/* Block row (label + control stacked vertically) */
.settings-row--block { align-items: flex-start; }

/* Sidebar theme swatches */
.settings-theme-swatches {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.settings-theme-swatch {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--sw-bg);
  border: 2px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: transform 100ms, outline-color 150ms;
}
.settings-theme-swatch::after {
  content: '';
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sw-accent);
}
.settings-theme-swatch:hover { transform: scale(1.12); }
.settings-theme-swatch.active { outline-color: var(--accent); }

/* Custom dropdown for settings */
.settings-dd {
  position: relative;
  flex-shrink: 0;
}
.settings-dd-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.settings-dd-btn svg { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }
.settings-dd-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.settings-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  min-width: 110px;
}

/* Compact job list */
.sidebar-list.compact .job-card { padding: 5px 10px; }

/* Danger button in settings */
.settings-danger-btn {
  padding: 5px 12px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}
.settings-danger-btn:hover { background: #fee2e2; border-color: var(--danger); }

/* ── Candidate profile editor ───────────────────────────────────── */
.profile-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* profile-header → .view-toolbar */
.profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 64px;
  background: var(--bg-sub);
}
.profile-body::-webkit-scrollbar { width: 4px; }
.profile-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto;
}
.profile-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 20px;
}
.profile-section--full { grid-column: 1 / -1; }
.profile-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.profile-field { display: flex; flex-direction: column; gap: 5px; }
.profile-field--grow { flex: 1; }
.profile-field--grow .profile-textarea { flex: 1; resize: none; }
.profile-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.profile-input,
.profile-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
  resize: vertical;
}
.profile-input:hover,
.profile-textarea:hover { border-color: var(--border-strong); }
.profile-input:focus,
.profile-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,112,243,.08);
}
.profile-input::placeholder,
.profile-textarea::placeholder { color: var(--text-3); }

/* ── Bullet char count ──────────────────────────────────────────── */
.bullet-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bullet-wrap .draft-bullet { flex: 1; }
.bullet-count {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 99px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  letter-spacing: -0.2px;
}
.bc--good { background: #f0fdf4; color: #16a34a; }
.bc--warn { background: #fffbeb; color: #d97706; }
.bc--over { background: var(--danger-bg); color: var(--danger); }
.bc--low  { background: var(--bg-sub); color: var(--text-3); opacity: 0; transition: opacity 120ms; }
.bullet-wrap:focus-within .bc--low { opacity: 1; }

/* ── Recruiter / contact section ────────────────────────────────── */
.info-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.info-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.recruiter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.recruiter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recruiter-field label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
}
.recruiter-field input {
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
  transition: border-color 150ms;
}
.recruiter-field input:focus { border-color: var(--border-strong); }
.recruiter-field input::placeholder { color: var(--text-3); }

/* ── Interview prep panel ───────────────────────────────────────── */
.prep-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  max-width: 620px;
}
.prep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prep-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.prep-progress {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.prep-track-wrap { margin-bottom: 4px; }
.prep-track {
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.prep-track-fill {
  height: 100%;
  background: var(--text-1);
  border-radius: 99px;
  transition: width 300ms cubic-bezier(.4,0,.2,1);
}
.prep-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prep-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 100ms;
  user-select: none;
}
.prep-item:hover { background: var(--bg-hover); }
.prep-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, border-color 150ms;
}
.prep-check svg { width: 10px; height: 10px; color: #fff; }
.prep-item--done .prep-check {
  background: var(--text-1);
  border-color: var(--text-1);
}
.prep-label {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.4;
  transition: color 150ms;
}
.prep-item--done .prep-label {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
}

/* ── Weekly goal widget ─────────────────────────────────────────── */
/* ── Momentum / gamification (Stats view) ───────────────────── */
.momentum-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-sub);
  margin-bottom: 12px;
}
.streak-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
}
.streak-number {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.streak-number.streak--active { color: #f59e0b; }
.streak-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  margin-top: 2px;
}
.streak-best {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 1px;
}
.streak-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-3);
  margin-top: 10px;
}
.streak-status svg { width: 11px; height: 11px; flex-shrink: 0; }
.streak-status--done { color: #16a34a; }

/* Activity calendar */
.activity-cal { flex: 1; min-width: 0; }
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 3px;
}
.cal-dow span {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
  line-height: 1;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--bg-hover);
}
.cal-cell--future  { opacity: 0.3; }
.cal-cell--created  { background: #3b82f640; }
.cal-cell--submitted { background: #818cf8; }
.cal-cell--today {
  outline: 1.5px solid var(--text-3);
  outline-offset: 1px;
}

/* Milestones */
.milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.milestone {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border: 1px dashed var(--border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}
.milestone svg { width: 11px; height: 11px; flex-shrink: 0; }
.milestone--earned {
  border-style: solid;
  border-color: var(--border-strong);
  color: var(--text-1);
  background: var(--bg-sub);
}

.weekly-goal-widget {
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wg-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.wg-input-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.wg-count {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.wg-input {
  width: 44px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--text-1);
  background: var(--bg);
  outline: none;
}
.wg-input:focus { border-color: var(--border-strong); }
.wg-unit { font-size: 12px; color: var(--text-3); }
.wg-track {
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.wg-fill {
  height: 100%;
  background: var(--text-1);
  border-radius: 99px;
  transition: width 400ms cubic-bezier(.4,0,.2,1);
  width: 0%;
}

/* ── Changelog ──────────────────────────────────────────────────── */
.changelog-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* changelog-toolbar → .view-toolbar */

.changelog-scroll {
  flex: 1;
  overflow-y: auto;
  width: 100%;
}
.changelog-scroll-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 0 64px;
}
.changelog-scroll::-webkit-scrollbar { width: 4px; }
.changelog-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.changelog-group {
  display: flex;
  gap: 32px;
  padding: 0 32px 32px;
}

.changelog-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 120px;
  flex-shrink: 0;
}

.changelog-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 0;
  border-top: 1px solid var(--border);
  padding-top: 0;
}

.changelog-group:first-child .changelog-list {
  border-top: none;
}

.changelog-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 10px;
}

.changelog-group:first-child .changelog-entry:first-child { padding-top: 0; }

.cl-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 52px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 1px;
}

.cl-type--feat     { background: #eff6ff; color: #1d4ed8; }
.cl-type--fix      { background: #f4f4f5; color: #52525b; }
.cl-type--security { background: #fff7ed; color: #c2410c; }
.cl-type--redesign { background: #fdf4ff; color: #7e22ce; }
.cl-type--revert   { background: var(--danger-bg); color: var(--danger); }

.cl-text {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.55;
}

.changelog-empty {
  padding: 32px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   Motion & Animation
   ══════════════════════════════════════════════════════════════════ */

/* ── View transition ─────────────────────────────────────────────── */
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.main--entering {
  animation: view-in 200ms cubic-bezier(0.16,1,0.3,1) both;
}

/* ── Tab sliding indicator ───────────────────────────────────────── */
.tab-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--text-1);
  border-radius: 1px;
  pointer-events: none;
  transition: left 220ms cubic-bezier(0.16,1,0.3,1),
              width 220ms cubic-bezier(0.16,1,0.3,1);
}
.tab-indicator--instant { transition: none !important; }

/* ── Status dropdown exit ────────────────────────────────────────── */
@keyframes dd-out {
  from { opacity: 1; transform: translateY(0) scale(1);    }
  to   { opacity: 0; transform: translateY(-4px) scale(0.97); }
}
.status-dd-menu.is-closing {
  animation: dd-out 100ms cubic-bezier(0.4,0,1,1) both;
  pointer-events: none;
}

/* ── Sidebar card entrance ───────────────────────────────────────── */
@keyframes card-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.job-card--entering { animation: card-in 200ms cubic-bezier(0.16,1,0.3,1) both; }


/* ── Bulk action bar entrance ────────────────────────────────────── */
@keyframes bulk-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.bulk-bar.visible { animation: bulk-in 180ms cubic-bezier(0.16,1,0.3,1) both; }

/* ── Generate button attention pulse ─────────────────────────────── */
@keyframes gen-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(0,112,243,0);    }
  50%       { box-shadow: 0 0 0 5px rgba(0,112,243,0.14); }
}
.btn--pulse { animation: gen-pulse 2.4s ease-in-out infinite; }

/* ── Sidebar footer overflow menu ────────────────────────────────── */
.sidebar-footer-more {
  position: relative;
  margin-left: auto;
}
.footer-more-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 4px;
  min-width: 148px;
  z-index: 200;
  transform: translateY(4px) scale(0.97);
  transition: opacity 150ms cubic-bezier(0.16,1,0.3,1), visibility 150ms, transform 150ms cubic-bezier(0.16,1,0.3,1);
}
.footer-more-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.footer-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.footer-more-item:hover { background: var(--bg-hover); color: var(--text-1); }
.footer-more-item svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-3); }
.footer-more-item--active { color: var(--text-1); }
.footer-more-item--active svg { color: var(--text-1); }
.sidebar--collapsed .sidebar-footer-more { margin-left: 0; }  /* keep flow centred */


/* ── Bulk status custom dropdown ─────────────────────────────────── */
.bulk-status-dd { position: relative; }
.bulk-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
  white-space: nowrap;
}
.bulk-status-btn:hover { border-color: var(--border-strong); background: var(--bg-hover); color: var(--text-1); }
.bulk-status-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.bulk-status-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 4px;
  min-width: 130px;
  z-index: 200;
}
.bulk-status-menu.open { display: block; }
.bulk-status-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.bulk-status-item:hover { background: var(--bg-hover); color: var(--text-1); }
.bulk-status-item .status-dot { flex-shrink: 0; }

/* ── prefers-reduced-motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Dark theme
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:               #282828;
    --bg-sub:           #202020;
    --bg-hover:         #303030;
    --bg-active:        #3a3a3a;
    --border:           #3d3d3d;
    --border-strong:    #525252;
    --text-1:           #e8e8e8;
    --text-2:           #a0a0a0;
    --text-3:           #5e5e5e;
    --accent:           #4285f4;
    --accent-hover:     #5a9af4;
    --danger:           #fc8181;
    --danger-bg:        #3a1212;
    --danger-border:    #6b1a1a;
    --warning:          #fbbf24;
    --warning-bg:       #3a2a08;
    --warning-border:   #7a5510;
    --success:          #4ade80;
    --success-bg:       #0d2e18;
    --bg-selected:      #1d3356;
    --bg-selected-hover:#16284a;
    --skel-bg:          #333333;
    --skel-shine:       #444444;
  }
}
:root[data-theme="dark"] {
  --bg:               #282828;
  --bg-sub:           #202020;
  --bg-hover:         #303030;
  --bg-active:        #3a3a3a;
  --border:           #3d3d3d;
  --border-strong:    #525252;
  --text-1:           #e8e8e8;
  --text-2:           #a0a0a0;
  --text-3:           #5e5e5e;
  --accent:           #4285f4;
  --accent-hover:     #5a9af4;
  --danger:           #fc8181;
  --danger-bg:        #3a1212;
  --danger-border:    #6b1a1a;
  --warning:          #fbbf24;
  --warning-bg:       #3a2a08;
  --warning-border:   #7a5510;
  --success:          #4ade80;
  --success-bg:       #0d2e18;
  --bg-selected:      #1d3356;
  --bg-selected-hover:#16284a;
  --skel-bg:          #333333;
  --skel-shine:       #444444;
}
:root[data-theme="light"] {
  --bg:               #fff;
  --bg-sub:           #fafafa;
  --bg-hover:         #f5f5f5;
  --bg-active:        #ebebeb;
  --border:           #e5e5e5;
  --border-strong:    #ccc;
  --text-1:           #0a0a0a;
  --text-2:           #525252;
  --text-3:           #a3a3a3;
  --accent:           #0070f3;
  --accent-hover:     #005ed3;
  --danger:           #dc2626;
  --danger-bg:        #fef2f2;
  --danger-border:    #fca5a5;
  --warning:          #d97706;
  --warning-bg:       #fffbeb;
  --warning-border:   #fde68a;
  --success:          #16a34a;
  --success-bg:       #f0fdf4;
  --bg-selected:      #eff6ff;
  --bg-selected-hover:#dbeafe;
}

/* ── Dark component overrides (.dark-mode set by JS) ─────────────── */
.dark-mode .gate { background: var(--bg-sub); }
.dark-mode .gate-input { background: var(--bg); border-color: var(--border); color: var(--text-1); }
.dark-mode .gate-input::placeholder { color: var(--text-3); }
.dark-mode .gate-input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.dark-mode .gate-btn { background: var(--text-1); color: #1f1f1f; }
.dark-mode .gate-btn:hover { opacity: 0.9; }
.dark-mode .gate-link { color: var(--text-3); }
.dark-mode .gate-success { color: #4ade80; }

.dark-mode .btn-primary { color: #1a1a1a; }
.dark-mode .btn-primary:hover:not(:disabled) { background: #d0d0d0; border-color: #d0d0d0; }
.dark-mode .btn-new { color: #1a1a1a; }
.dark-mode .btn-new:hover { background: #d0d0d0; }
.dark-mode .sf-chip.active { color: #1a1a1a; }

.dark-mode .field input:focus,
.dark-mode .field textarea:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.dark-mode .notes-textarea:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.dark-mode .profile-input:focus,
.dark-mode .profile-textarea:focus { box-shadow: 0 0 0 3px rgba(66,133,244,.15); }

.dark-mode .tab-indicator { background: var(--accent); }
.dark-mode .tab.active { color: var(--text-1); }
.dark-mode .pdrawer-tab.active { border-bottom-color: var(--accent); color: var(--text-1); }

.dark-mode .prep-track-fill { background: var(--accent); }
.dark-mode .wg-fill { background: var(--accent); }
.dark-mode .prep-item--done .prep-check { background: var(--accent); border-color: var(--accent); }

.dark-mode .badge-draft      { background: #2a2a2a; color: #9b9b9b; }
.dark-mode .badge-generated  { background: #1a2d4a; color: #93c5fd; }
.dark-mode .badge-applied    { background: #1e1d4a; color: #a5b4fc; }
.dark-mode .badge-interview  { background: #2e2008; color: #fcd34d; }
.dark-mode .badge-offer      { background: #0d2e18; color: #86efac; }
.dark-mode .badge-rejected   { background: #3a1212; color: #fca5a5; }

.dark-mode .ats-tag.hard { background: #1a2d4a; color: #93c5fd; border-color: #1d3562; }
.dark-mode .ats-tag.soft { background: #0d2e18; color: #86efac; border-color: #1a5230; }

.dark-mode .screen-result--good    { background: #0d2e18; border-color: #1a5230; }
.dark-mode .screen-result--risky   { background: #2e2008; border-color: #5a3e00; }
.dark-mode .screen-result--blocker { background: #3a1212; border-color: #6b1a1a; }
.dark-mode .screen-result--good    .screen-result-label { color: #4ade80; }
.dark-mode .screen-result--risky   .screen-result-label { color: #fbbf24; }
.dark-mode .screen-result--blocker .screen-result-label { color: #fc8181; }
.dark-mode .screen-result--good    .screen-rerun { color: #4ade80; border-color: #1a5230; }
.dark-mode .screen-result--risky   .screen-rerun { color: #fbbf24; border-color: #5a3e00; }
.dark-mode .screen-result--blocker .screen-rerun { color: #fc8181; border-color: #6b1a1a; }
.dark-mode .screen-result--good    .screen-rerun:hover { background: #0d3d20; }
.dark-mode .screen-result--risky   .screen-rerun:hover { background: #3a2a08; }
.dark-mode .screen-result--blocker .screen-rerun:hover { background: #4a1515; }

.dark-mode .screen-badge--good    { background: #0d2e18; color: #4ade80; border-color: #1a5230; }
.dark-mode .screen-badge--risky   { background: #2e2008; color: #fbbf24; border-color: #5a3e00; }
.dark-mode .screen-badge--blocker { background: #3a1212; color: #fc8181; border-color: #6b1a1a; }

.dark-mode .status-dd-btn.status--draft      { border-color: #52525b; background: #2a2a2a; color: #9b9b9b; }
.dark-mode .status-dd-btn.status--generated  { border-color: #1d4ed8; background: #1a2d4a; color: #93c5fd; }
.dark-mode .status-dd-btn.status--applied    { border-color: #3730a3; background: #1e1d4a; color: #a5b4fc; }
.dark-mode .status-dd-btn.status--interview  { border-color: #92400e; background: #2e2008; color: #fcd34d; }
.dark-mode .status-dd-btn.status--offer      { border-color: #166534; background: #0d2e18; color: #86efac; }
.dark-mode .status-dd-btn.status--rejected   { border-color: #991b1b; background: #3a1212; color: #fca5a5; }

.dark-mode .ja-menu { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.dark-mode .tab-dd-menu { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.dark-mode .ja-hint { background: var(--bg-active); border-color: var(--border-strong); }

.dark-mode .screen-pill--good    { background: #0d2e18; border-color: #1a5230; color: #4ade80; }
.dark-mode .screen-pill--risky   { background: #2e2008; border-color: #5a3e00; color: #fbbf24; }
.dark-mode .screen-pill--blocker { background: #3a1212; border-color: #6b1a1a; color: #fc8181; }
.dark-mode .screen-dd-verdict--good    { color: #4ade80; }
.dark-mode .screen-dd-verdict--risky   { color: #fbbf24; }
.dark-mode .screen-dd-verdict--blocker { color: #fc8181; }
.dark-mode .screen-dd-popup { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }

.dark-mode .deal-breaker { color: var(--warning); }
.dark-mode .fu-badge--today { background: #1a2d4a; color: #93c5fd; border-color: #1d3562; }

.dark-mode .bc--good { background: #0d2e18; color: #4ade80; }
.dark-mode .bc--warn { background: #2e2008; color: #fbbf24; }

.dark-mode .master-section-name:focus { background: #1a2d4a; }
.dark-mode .master-add-btn:hover { background: #1a2d4a; }
.dark-mode .master-add-bullet:hover { background: #1a2d4a; }

.dark-mode .cl-type--feat     { background: #1a2d4a; color: #93c5fd; }
.dark-mode .cl-type--fix      { background: #2a2a2a; color: #a1a1a1; }
.dark-mode .cl-type--security { background: #3a2008; color: #fb923c; }
.dark-mode .cl-type--redesign { background: #2a1a3a; color: #d8b4fe; }

.dark-mode .pdrawer { box-shadow: -16px 0 48px rgba(0,0,0,.4); }
.dark-mode .pdrawer.open { box-shadow: -16px 0 48px rgba(0,0,0,.5); }
.dark-mode .modal { box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3); }
.dark-mode .status-dd-menu,
.dark-mode .footer-more-menu,
.dark-mode .bulk-status-menu { box-shadow: 0 4px 16px rgba(0,0,0,.4); }