/* ═══════════════════════════════════
   The Girls Job Search HQ
   Design System: Warm Editorial
   ═══════════════════════════════════ */

:root {
  --bg: #FAF8F5;
  --white: #FFFFFF;
  --text: #1C1917;
  --text-secondary: #8A8580;
  --text-muted: #B5B0AA;
  --border: #E8E4DF;
  --border-light: #F0EDEA;
  --accent: #C4653A;
  --accent-hover: #B05830;
  --green: #5A7A5A;
  --green-bg: #E0F0E4;
  --green-text: #3D7A4A;
  --purple-bg: #EDE8FF;
  --purple-text: #6B5AC4;
  --orange-bg: #FFF3E0;
  --orange-text: #C4653A;
  --blue-bg: #E3F2FD;
  --blue-text: #1565C0;
  --red: #D32F2F;
  --font-display: 'DM Serif Display', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* ─── Header ─── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

header h1 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
}

.header-accent {
  font-size: 26px;
  background: linear-gradient(135deg, var(--accent) 0%, #D4884A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-client {
  font-size: 13px;
  color: var(--text-secondary);
}

.header-tabs {
  display: flex;
  gap: 28px;
  align-items: flex-end;
}

/* Start Here tab highlight */
.start-here-tab {
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.tab-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  font-weight: 500;
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ─── Tab Content ─── */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ─── Tab 1: Get a Tailored Resume ─── */
.hero {
  text-align: center;
  padding: 64px 48px 32px;
}

.hero h2 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.hero p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}

.form-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-label-new {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-field {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
}

.form-field:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field::placeholder {
  color: var(--text-muted);
}

.form-field-textarea {
  width: 100%;
  min-height: 110px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  resize: vertical;
  line-height: 1.6;
}

.form-field-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field-textarea::placeholder {
  color: var(--text-muted);
}

.form-row {
  display: flex;
  gap: 16px;
}

.flex-1 {
  flex: 1;
}

.btn-tailor {
  width: 100%;
  height: 50px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-tailor:hover {
  background: var(--accent-hover);
}

.btn-tailor:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-field-textarea-short {
  min-height: 70px;
}

.form-field-hint {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.helper-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px 48px 48px;
}

/* ─── Tab 2: Job Leads ─── */

/* Leads explainer */
.leads-explainer {
  padding: 32px 48px 24px;
}

.leads-explainer h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
}

.leads-explainer p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 10px;
}

.leads-explainer p:last-child {
  margin-bottom: 0;
}

.explainer-highlight {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(196, 101, 58, 0.3);
  text-underline-offset: 2px;
}

.leads-explainer-nudge {
  color: var(--text);
  background: #FDF6F2;
  border-left: 3px solid var(--accent);
  padding: 20px 20px;
  border-radius: 0 8px 8px 0;
  margin-top: 8px;
}

.leads-explainer-nudge .nudge-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 8px;
}

.leads-explainer-nudge p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 8px;
  font-weight: 400;
}

.leads-explainer-nudge p:last-child {
  margin-bottom: 0;
}

.nudge-examples {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.nudge-example {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-style: italic;
  color: var(--text);
}

/* Stats bar */
.stats-bar {
  display: flex;
  padding: 24px 48px;
  border-bottom: 1px solid var(--border);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 0 24px;
  border-right: 1px solid var(--border);
}

.stat:first-child {
  padding-left: 0;
}

.stat:last-child {
  border-right: none;
}

.stat .number {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--text);
}

.stat .number.highlight {
  color: var(--accent);
}

.stat .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat.stat-passed .number {
  font-size: 20px;
  color: var(--text-muted);
}

.stat.stat-passed .label {
  color: var(--text-muted);
  font-size: 10px;
}

/* Queue Gate Banner */
.queue-gate-banner {
  background: var(--blue-bg);
  color: var(--blue-text);
  padding: 14px 48px;
  font-size: 13px;
  line-height: 1.5;
}

/* Narrowing Warning */
.narrowing-warning {
  background: var(--orange-bg);
  color: var(--orange-text);
  padding: 14px 48px;
  font-size: 13px;
  line-height: 1.5;
}

/* Filter Row */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
}

.filter-pills {
  display: flex;
  gap: 8px;
}

.pill {
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.pill:hover {
  border-color: var(--text-secondary);
  color: var(--text);
}

.pill.active {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}

.filter-row input[type="text"] {
  height: 36px;
  width: 200px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: none;
}

.filter-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-row input[type="text"]::placeholder {
  color: var(--text-muted);
}

.jobs-count {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Table */
.table-section {
  padding: 0 48px 48px;
}

.table-header-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.table-header-row span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}

.table-header-row .sortable {
  cursor: pointer;
}

.table-header-row .sortable:hover {
  color: var(--text);
}

.th-id { width: 50px; flex-shrink: 0; color: #999; }
.th-date { width: 70px; flex-shrink: 0; }
.th-fit { width: 56px; flex-shrink: 0; text-align: center; }
.th-title { flex: 1; }
.th-company { width: 180px; flex-shrink: 0; }
.th-pay { width: 130px; flex-shrink: 0; }
.th-source { width: 80px; flex-shrink: 0; }
.th-status { width: 110px; flex-shrink: 0; }

.job-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.15s;
}

.job-row:hover {
  background: rgba(196, 101, 58, 0.04);
}

.job-row .cell-id {
  width: 50px;
  flex-shrink: 0;
  font-size: 12px;
  font-family: monospace;
  color: #999;
}

.job-row .cell-date {
  width: 70px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.job-row .cell-fit {
  width: 56px;
  flex-shrink: 0;
  text-align: center;
}

.fit-badge {
  display: inline-block;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.fit-badge.fit-none { background: #d0d0d0; color: #666; }
.fit-badge.fit-low { background: #c85a4a; }
.fit-badge.fit-borderline { background: #d9993d; }
.fit-badge.fit-adjacent { background: #c9a64a; color: #3a2f10; }
.fit-badge.fit-strong { background: #6fa94a; }
.fit-badge.fit-excellent { background: #3b8a2b; }

.job-row .cell-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.job-row .cell-company {
  width: 180px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text);
}

.job-row .cell-pay {
  width: 130px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-row .cell-source {
  width: 80px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.job-row .cell-status {
  width: 160px;
  flex-shrink: 0;
}

.tailored-date {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.table-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
  font-size: 14px;
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.status-new { background: var(--purple-bg); color: var(--purple-text); }
.status-reviewing { background: var(--green-bg); color: var(--green-text); }
.status-tailoring { background: var(--orange-bg); color: var(--orange-text); }
.status-tailored { background: var(--blue-bg); color: var(--blue-text); }
.status-applied { background: var(--green-bg); color: #2E7D32; }
.status-not-interested { background: #F5F5F5; color: #999; }

/* Priority badges */
.priority-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 6px;
}

.priority-high { background: #FFF0F0; color: var(--red); }
.priority-medium { background: var(--orange-bg); color: #F57C00; }
.priority-low { background: #F5F5F5; color: #999; }

.type-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 6px;
  background: #EEF2FF;
  color: #4338CA;
}

/* ─── Tab 3: Chat with JJ ─── */
.chat-layout {
  display: flex;
  height: calc(100vh - 73px);
}

.chat-sidebar {
  width: 260px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.btn-new-chat {
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--text);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-new-chat:hover {
  background: #2C2825;
}

.sidebar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.06em;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
}

.conv-item {
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
}

.conv-item:hover {
  background: var(--border-light);
}

.conv-item.active {
  background: var(--border-light);
}

.conv-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

.conv-item-date {
  font-size: 12px;
  color: var(--text-secondary);
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-disclaimer {
  padding: 16px 40px;
  font-size: 13px;
  color: var(--accent-hover);
  background: #FDF6F2;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  line-height: 1.6;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chat-msg {
  display: flex;
  gap: 12px;
  max-width: 600px;
}

.chat-msg.from-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
}

.chat-avatar.jj {
  background: var(--accent);
}

.chat-avatar.user {
  background: var(--text);
}

.chat-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-msg.from-user .chat-msg-body {
  align-items: flex-end;
}

.chat-msg-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.chat-msg-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

.chat-msg.from-user .chat-msg-text {
  text-align: right;
}

.chat-starter-prompts {
  padding: 0 40px 16px;
}

.starter-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 10px;
}

.starter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.starter-pill {
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}

.starter-pill:hover {
  border-color: var(--text-secondary);
}

.chat-input-bar {
  padding: 16px 40px 24px;
  border-top: 1px solid var(--border);
}

.chat-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  resize: none;
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent);
}

.chat-input::placeholder {
  color: var(--text-muted);
}

.btn-chat-send {
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--text);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.btn-chat-send:hover {
  background: #2C2825;
}

.btn-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Modals ─── */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(28, 25, 23, 0.4);
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}

.modal {
  background: var(--white);
  border-radius: 12px;
  width: 100%;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(28, 25, 23, 0.15);
}

.modal-wide { max-width: 700px; }
.modal-sm { max-width: 520px; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text);
}

.modal-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.modal-close:hover { color: var(--text); }

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Modal content blocks */
.info-block {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.info-block-pay { background: #F0FAF0; border-color: #C8E6C9; }
.info-block-pay .pay-label { font-size: 12px; font-weight: 600; color: #2E7D32; margin-bottom: 4px; }
.info-block-pay .pay-value { font-size: 1.2rem; color: #2E7D32; font-weight: 700; }

.info-block-desc { background: var(--bg); }
.info-block-desc .desc-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.info-block-desc p { color: #555; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }

.info-block-feedback { background: #FFFDE7; border-color: #FFF9C4; }
.info-block-feedback .fb-label { font-size: 12px; font-weight: 600; color: #F57C00; margin-bottom: 6px; }
.fb-entry { margin-top: 6px; padding: 8px; background: rgba(0,0,0,0.03); border-radius: 6px; }
.fb-entry-meta { font-size: 11px; color: #999; }
.fb-entry-text { font-size: 13px; color: #555; margin-top: 2px; }

.link-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 20px; background: var(--text); color: var(--white);
  border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 500;
  transition: background 0.2s;
}
.btn-link:hover { background: #2C2825; }

.btn-copy-url {
  padding: 10px 16px; background: var(--blue-bg); color: var(--blue-text);
  border: 1px solid #BBDEFB; border-radius: 8px; cursor: pointer;
  font-size: 13px; transition: background 0.2s;
}
.btn-copy-url:hover { background: #BBDEFB; }

.url-display {
  margin-top: 6px; padding: 8px 12px; background: var(--bg); border-radius: 6px;
  font-size: 12px; color: var(--text-secondary); word-break: break-all; font-family: monospace;
}

/* Full description textarea in modal */
.full-desc-section .desc-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.full-desc-textarea {
  width: 100%; min-height: 160px; padding: 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; line-height: 1.6; resize: vertical;
  font-family: var(--font-body); color: var(--text);
}
.full-desc-textarea:focus { outline: none; border-color: var(--accent); }
.full-desc-save-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.btn-save-desc {
  padding: 8px 20px; background: var(--green-bg); color: var(--green-text);
  border: 1px solid #C8E6C9; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.btn-save-desc:hover { background: #C8E6C9; }
.save-status { font-size: 12px; color: var(--text-secondary); }

.tags-row { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { display: inline-block; background: var(--border-light); color: var(--text-secondary); padding: 2px 8px; border-radius: 8px; font-size: 11px; }

/* Modal action buttons */
.btn-primary {
  padding: 10px 24px; background: var(--text); color: var(--white); border: none;
  border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500;
  font-family: var(--font-body); transition: background 0.2s;
}
.btn-primary:hover { background: #2C2825; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  padding: 10px 20px; background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 14px; font-family: var(--font-body);
  transition: background 0.2s;
}
.btn-secondary:hover { background: var(--border-light); }

.btn-interested-modal { background: var(--blue-bg); color: var(--blue-text); border: 1px solid #BBDEFB; }
.btn-interested-modal:hover { background: #BBDEFB; }
.btn-tailor-modal { background: var(--orange-bg); color: var(--orange-text); border: 1px solid #FFE0B2; }
.btn-tailor-modal:hover { background: #FFE0B2; }
.btn-dismiss-modal { background: #F5F5F5; color: #999; border: 1px solid #EEE; }
.btn-dismiss-modal:hover { background: #EEE; }
.btn-undo-modal { background: #F5F5F5; color: #666; border: 1px solid var(--border); }
.btn-undo-modal:hover { background: var(--border-light); }

.btn-download {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; background: #4CAF50; color: white;
  border-radius: 8px; font-size: 13px; text-decoration: none; font-weight: 500;
}
.btn-download:hover { background: #388E3C; }
.btn-download-cover { background: #1565C0; }
.btn-download-cover:hover { background: #0D47A1; }

.tailoring-indicator { display: flex; align-items: center; gap: 8px; color: var(--orange-text); font-size: 13px; }
.spinner {
  width: 16px; height: 16px; border: 2px solid #FFE0B2; border-top-color: var(--orange-text);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Forms (modal forms) ─── */
.form-group { margin-bottom: 14px; }
.form-label { display: block; margin-bottom: 4px; color: #555; font-size: 13px; font-weight: 600; }
.form-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: var(--font-body); color: var(--text);
}
.form-input:focus { outline: none; border-color: var(--accent); }
.form-textarea {
  width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 14px; font-family: var(--font-body); color: var(--text);
  resize: vertical; line-height: 1.6;
}
.form-textarea:focus { outline: none; border-color: var(--accent); }
.form-textarea-tall { min-height: 150px; }
.form-hint {
  font-size: 12px; color: var(--red); background: #FFF0F0; border: 1px solid #FFCDD2;
  border-radius: 6px; padding: 8px 12px; margin: 4px 0 8px 0; line-height: 1.4; font-weight: 500;
}
.form-error { display: none; margin-top: 12px; padding: 8px 12px; color: var(--red); font-size: 13px; }
.feedback-job-info {
  padding: 10px; background: var(--bg); border-radius: 8px; font-size: 13px; color: #555; margin-bottom: 12px;
}
.feedback-required-hint {
  color: var(--red); font-size: 12px; margin-top: 6px; padding: 6px 10px;
  background: #FFF0F0; border-radius: 6px; border: 1px solid #FFCDD2;
}

/* Feedback step 2 */
.feedback-step-2-body { text-align: center; padding: 32px 24px !important; }
.feedback-gotit-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--green-bg); color: #2E7D32;
  font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.feedback-gotit-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 24px; }
.feedback-gotit-buttons { display: flex; flex-direction: column; gap: 10px; }
.feedback-gotit-buttons .btn-primary { padding: 14px 24px; font-size: 14px; }
.feedback-gotit-buttons .btn-secondary { padding: 12px 20px; font-size: 13px; }

/* Confirmation (hidden, for JS compat) */
.confirmation { display: none; }
.confirmation.show { display: block; }

/* ─── Toast ─── */
.toast {
  position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; border-radius: 8px;
  color: white; font-family: var(--font-body); font-size: 0.85rem; z-index: 2000;
  transform: translateY(100px); opacity: 0; transition: all 0.3s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: #4CAF50; }
.toast.error { background: var(--red); }
.toast.info { background: var(--text); }

/* ─── About You ─── */
.about-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 48px 64px;
}

.about-header {
  margin-bottom: 40px;
}

.about-header h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.about-header p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 300;
}

.about-section {
  margin-bottom: 36px;
}

.about-section h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}

.about-hint {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Upload area */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 36px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--accent);
  background: #FDF6F2;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.upload-icon {
  color: var(--text-muted);
  margin-bottom: 4px;
}

.upload-text {
  font-size: 14px;
  color: var(--text);
}

.upload-link {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.upload-subtext {
  font-size: 12px;
  color: var(--text-muted);
}

.upload-status {
  margin-top: 12px;
  font-size: 13px;
}

.upload-status.uploading { color: var(--blue-text); }
.upload-status.success { color: var(--green-text); }
.upload-status.error { color: var(--red); }

/* Uploaded files list */
.uploaded-files {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uploaded-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.uploaded-file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uploaded-file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.uploaded-file-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.btn-remove-file {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
}

.btn-remove-file:hover {
  color: var(--red);
}

/* Text entry with mic */
.textarea-wrapper {
  position: relative;
}

.btn-mic {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 20px;
  border: none;
  background: var(--text);
  color: var(--white);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-mic:hover {
  background: #2C2825;
}

.btn-mic.recording {
  background: var(--accent);
  color: var(--white);
  animation: pulse-mic 1.5s ease infinite;
}

.mic-icon {
  flex-shrink: 0;
}

@keyframes pulse-mic {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 101, 58, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(196, 101, 58, 0); }
}

.mic-status {
  font-size: 12px;
  color: var(--text-secondary);
  min-height: 20px;
  margin-bottom: 4px;
}

.mic-status.listening {
  color: var(--accent);
}

.about-textarea {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  resize: vertical;
  margin-bottom: 12px;
}

.about-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.about-textarea::placeholder {
  color: var(--text-muted);
}

.btn-save-background {
  height: 44px;
  padding: 0 28px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  margin-left: auto;
  display: block;
}

.btn-save-background:hover {
  background: var(--accent-hover);
}

.btn-save-background:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Background entries */
.background-entries {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-empty {
  font-size: 14px;
  color: var(--text-muted);
  padding: 24px 0;
}

.bg-entry {
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
}

.bg-entry-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  padding-right: 80px;
}

.bg-entry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.bg-entry-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.btn-forget {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}

.btn-forget:hover {
  color: var(--red);
  background: #FFF0F0;
}

/* Forgotten entries */
.forgotten-entry {
  padding: 12px 16px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.forgotten-entry-text {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
  flex: 1;
  line-height: 1.5;
}

.btn-undo-forget {
  background: none;
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.15s;
}

.btn-undo-forget:hover {
  border-color: var(--green-text);
  color: var(--green-text);
  background: var(--green-bg);
}

.bg-entry-file {
  border-left: 3px solid var(--accent);
}

.bg-entry-file .bg-entry-text {
  font-weight: 500;
}

/* ─── Tab: Training JJ ─── */
.training-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 48px 64px;
}

.training-header {
  margin-bottom: 48px;
}

.training-header h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.training-header p {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.7;
}

.training-section {
  margin-bottom: 48px;
}

.training-section h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 16px;
}

.training-section > p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 12px;
}

.training-section > p strong {
  color: var(--text);
  font-weight: 600;
}

/* Steps */
.training-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
}

.training-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.training-step-number {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--accent);
  width: 32px;
  flex-shrink: 0;
  line-height: 1.2;
}

.training-step-content strong {
  font-size: 15px;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}

.training-step-content p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Callouts */
.training-callout {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 16px;
}

.training-callout-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 10px;
}

.training-callout p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 8px;
}

.training-callout p:last-child {
  margin-bottom: 0;
}

.training-callout-action {
  background: #FDF6F2;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}

.training-action-list {
  list-style: none;
  padding: 0;
}

.training-action-list li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
  padding-left: 16px;
  position: relative;
}

.training-action-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.training-action-list li strong {
  color: var(--text);
}

.training-action-list li:last-child {
  margin-bottom: 0;
}

/* Real Example */
.training-example {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 16px;
}

.training-example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: var(--text);
  color: var(--white);
}

.training-example-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.training-example-date {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.training-example-section {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-light);
}

.training-example-section:last-child {
  border-bottom: none;
}

.training-example-section strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 10px;
}

.training-example-section ul {
  list-style: none;
  padding: 0;
}

.training-example-section ul li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
  margin-bottom: 4px;
}

.training-example-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--border);
  border-radius: 50%;
}

.training-example-section p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.training-title-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.training-title {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
}

/* Results grid */
.training-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.training-result-category {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.training-result-count {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
}

.training-result-label {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.training-skip-list {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  font-style: italic;
}

/* Kicker line */
.training-kicker {
  font-style: italic;
  font-size: 16px !important;
  color: var(--text) !important;
  font-weight: 500;
  margin-top: -4px;
}

/* Pull quote */
.training-pullquote {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent);
  line-height: 1.5;
  padding: 24px 0;
  margin: 8px 0 12px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

/* Inline highlight */
.training-highlight {
  background: linear-gradient(to top, rgba(196, 101, 58, 0.12) 40%, transparent 40%);
  padding: 0 2px;
}

/* Comparison box */
.training-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}

.training-compare-box {
  padding: 20px 24px;
  border-radius: 10px;
}

.training-compare-box.compare-before {
  background: #F5F0ED;
  border: 1px solid var(--border);
}

.training-compare-box.compare-after {
  background: #F0F7F1;
  border: 1px solid #C8DFC8;
}

.training-compare-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.compare-before .training-compare-label {
  color: var(--text-muted);
}

.compare-after .training-compare-label {
  color: var(--green);
}

.training-compare-box p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.training-compare-box strong {
  color: var(--text);
}

/* Stat callout */
.training-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0;
}

.training-stat-number {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
}

.training-stat-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Resume tip box */
.training-tip {
  background: var(--blue-bg);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 16px 0;
}

.training-tip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-text);
  margin-bottom: 8px;
  display: block;
}

.training-tip p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}

/* ─── Tab 4: Guide ─── */
.guide-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 48px 64px;
}

.guide-header {
  margin-bottom: 48px;
}

.guide-header h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.guide-header p {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 300;
}

.guide-section {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
}

.guide-number {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--accent);
  width: 32px;
  flex-shrink: 0;
  line-height: 1.2;
}

.guide-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
}

.guide-body p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 12px;
}

.guide-body p:last-child {
  margin-bottom: 0;
}

.guide-callout {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

.guide-tips {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-tips li {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}

.guide-tips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ─── Tailor Processing State ─── */
.tailor-processing {
  max-width: 480px;
  margin: 32px auto 0;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.tailor-processing-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.tailor-processing-header strong {
  font-size: 15px;
  color: var(--text);
}
.tailor-processing-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

.tailor-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.tailor-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.tailor-step.active { color: var(--text); font-weight: 500; }
.tailor-step.done { color: var(--text); }

.step-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s;
}
.step-pending {
  border: 2px solid var(--border);
  background: transparent;
}
.step-working {
  border: 2px solid var(--orange-text);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
.step-done {
  border: none;
  background: #4CAF50;
  color: #fff;
}
.step-done::after { content: '\2713'; }

.step-label { line-height: 1.4; }

/* ─── Flip Cards (Directions) ─── */
.flip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.flip-card {
  cursor: pointer;
  border-radius: 12px;
  transition: box-shadow 0.2s;
}

.flip-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.flip-card-wide {
  grid-column: 1 / -1;
}

.flip-front {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.flip-card.flipped .flip-front {
  display: none;
}

.flip-back {
  display: none;
  background: var(--text);
  color: rgba(255,255,255,0.9);
  border-radius: 12px;
  padding: 32px;
}

.flip-card.flipped .flip-back {
  display: block;
}

.flip-front .flip-number {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 8px;
  line-height: 1;
}

.flip-front h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}

.flip-teaser {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 300;
}

.flip-back p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 10px;
}

.flip-back p:last-child {
  margin-bottom: 0;
}

.flip-front-centered {
  text-align: center;
}

.flip-front h3.flip-title-accent {
  font-size: 22px;
  color: var(--accent);
}

.flip-back .guide-tips li {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}

.flip-back .guide-tips li::before {
  background: var(--accent);
}

/* ─── Hidden compat elements ─── */
.job-table { display: none; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
    align-items: flex-start;
  }

  .header-tabs {
    gap: 20px;
    overflow-x: auto;
    width: 100%;
  }

  .tab-btn {
    font-size: 13px;
    white-space: nowrap;
  }

  .hero {
    padding: 40px 20px 24px;
  }

  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 15px;
  }

  .form-card {
    margin: 0 20px;
    padding: 24px;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .helper-text {
    padding: 16px 20px 32px;
  }

  .stats-bar {
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .stat {
    padding: 0 12px;
    min-width: 0;
  }

  .stat .number {
    font-size: 22px;
  }

  .filter-row {
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px;
    align-items: stretch;
  }

  .filter-pills {
    flex-wrap: wrap;
  }

  .filter-row input[type="text"] {
    width: 100%;
  }

  .table-section {
    padding: 0 20px 32px;
  }

  .table-header-row {
    display: none;
  }

  .job-row {
    flex-wrap: wrap;
    padding: 16px 0;
    gap: 4px;
  }

  .job-row .cell-title {
    width: 100%;
    font-size: 15px;
  }

  .job-row .cell-company {
    width: auto;
    font-size: 14px;
  }

  .job-row .cell-id,
  .job-row .cell-date,
  .job-row .cell-source {
    display: none;
  }

  .leads-explainer {
    padding: 24px 20px 16px;
  }

  .queue-gate-banner,
  .narrowing-warning {
    padding: 12px 20px;
  }

  /* Chat */
  .chat-layout {
    flex-direction: column;
    height: calc(100vh - 110px);
  }

  .chat-sidebar {
    width: 100%;
    max-height: 120px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .conversation-list {
    display: flex;
    overflow-x: auto;
    padding: 8px 12px;
    gap: 8px;
  }

  .conv-item {
    padding: 8px 14px;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
  }

  .chat-disclaimer {
    padding: 12px 20px;
    font-size: 12px;
  }

  .chat-messages {
    padding: 20px;
  }

  .chat-starter-prompts {
    padding: 0 20px 12px;
  }

  .starter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .chat-input-bar {
    padding: 12px 20px 16px;
  }

  /* About You */
  .about-container {
    padding: 32px 20px 48px;
  }

  .about-header h2 {
    font-size: 28px;
  }

  .upload-area {
    padding: 24px;
  }

  /* Training JJ */
  .training-container {
    padding: 32px 20px 48px;
  }

  .training-header h2 {
    font-size: 28px;
  }

  .training-pullquote {
    font-size: 18px;
  }

  .training-compare {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .training-results-grid {
    grid-template-columns: 1fr 1fr;
  }

  .training-stat-number {
    font-size: 36px;
  }

  .training-title-grid {
    gap: 6px;
  }

  .training-title {
    font-size: 12px;
    padding: 4px 10px;
  }

  .training-example-header {
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
  }

  .training-example-section {
    padding: 16px 20px;
  }

  .training-step {
    gap: 14px;
  }

  /* Guide */
  .guide-container {
    padding: 32px 20px 48px;
  }

  .guide-header h2 {
    font-size: 28px;
  }

  .flip-grid {
    grid-template-columns: 1fr;
  }

  .flip-card-wide {
    grid-column: auto;
  }

  .guide-section {
    gap: 16px;
  }

  .guide-number {
    font-size: 24px;
    width: 24px;
  }

  /* Modals */
  .modal {
    margin: 0;
    border-radius: 12px;
    max-height: calc(100vh - 40px);
  }

  .modal-overlay {
    padding: 20px 10px;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions > * {
    text-align: center;
  }
}

/* ═══════════════════════════════════
   DEMO MODE
   ═══════════════════════════════════ */

.demo-banner {
  background: #FFF3CD;
  color: #664D03;
  border-bottom: 1px solid #FFE69C;
  padding: 10px 16px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.demo-action-note {
  background: #F5F5F5;
  border-left: 3px solid #BBB;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 13px;
  color: #555;
  font-style: italic;
  border-radius: 4px;
}

/* Hide the Get Help tab in demo mode (no live chat in a sandbox) */
body.demo-mode [data-tab="tab-chat"] {
  display: none;
}