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

:root {
  --bg:       #f6f7fb;
  --surface:  #ffffff;
  --border:   #e5e8f0;
  --text:     #16182a;
  --muted:    #6b7280;
  --blue:     #7489fe;
  --blue-d:   #3453fe;
  --blue-soft:#eef1ff;
  --green:    #10b981;
  --green-d:  #059669;
  --purple:   #8b5cf6;
  --amber:    #f59e0b;
  --red:      #ef4444;
  --radius:   10px;
  --shadow:   none;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
}

.container { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }

/* ── Header ── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo svg { color: var(--blue); }
.logo h1 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.header-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Groups the Gmail/Resume/Check-Now tools so they read as one cluster,
   visually separated from the account identity cluster (.user-nav) by a
   divider rather than all six controls competing on one flat row. */
.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}

/* ── User nav ── */
.user-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.user-nav a { color: var(--blue-d); text-decoration: none; font-weight: 600; }
.user-nav a:hover { text-decoration: underline; }
.user-nav .user-email { color: var(--text); font-weight: 700; }

/* ── Setup banner ── */
.setup-banner {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.7;
}
.setup-banner ol { margin-left: 20px; margin-top: 8px; }
.setup-banner code {
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* ── Upgrade banner ── */
.upgrade-banner {
  background: var(--blue-soft);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.7;
}
.upgrade-banner a {
  color: var(--blue-d);
  font-weight: 600;
  text-decoration: none;
}
.upgrade-banner a:hover { text-decoration: underline; }

/* ── Stats ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(229, 232, 240, .7);
  transition: border-color .15s;
}
.stat-card:hover { border-color: #d3d8e3; }
/* Colored top edge names each tile at a glance, before you even read the
   number — the number's own color did this alone before, which only reads
   once you're already looking closely. */
.stat-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--text);
}
.stat-card .n { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat-card .l { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
#s-total   .n { color: var(--text); }
.pending   .n { color: var(--amber); }
.applied   .n { color: var(--blue); }
.interview .n { color: var(--purple); }
.offer     .n { color: var(--green); }
.rejected  .n { color: var(--red); }
.pending::before   { background: var(--amber); }
.applied::before   { background: var(--blue); }
.interview::before { background: var(--purple); }
.offer::before     { background: var(--green); }
.rejected::before  { background: var(--red); }

/* ── Card ── */
.card {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: 24px 26px;
  border: 1px solid rgba(229, 232, 240, .7);
  margin-bottom: 18px;
}
.card h2 { font-size: 16px; font-weight: 800; letter-spacing: -.005em; }

/* ── Find Jobs ── */
.find-card h2 { margin-bottom: 14px; }
.find-row { display: flex; gap: 10px; }
.find-row input:first-child { flex: 2; }
.find-row input:last-of-type { flex: 1; max-width: 200px; }
.find-row select { flex: 1; max-width: 160px; }
/* Watchlist's company search: the input plus its suggestion dropdown. */
.company-picker { position: relative; flex: 2; min-width: 0; }
/* .card's backdrop-filter makes every card its own stacking context, so a
   later card paints over this one's dropdown whatever its z-index — lift
   the card holding the picker above its siblings instead. */
.card-raised { position: relative; z-index: 5; }
/* .find-row's input:first-child / :last-of-type sizing also matches this
   nested input — undo it; the wrapper does the sizing. */
.find-row .company-picker input { width: 100%; max-width: none; flex: none; }
.company-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  /* Own shadow: the theme's --shadow is none, and a floating list needs one. */
  box-shadow: 0 8px 24px rgba(22, 24, 42, .12); max-height: 340px; overflow-y: auto;
}
.company-suggestion {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.company-suggestion:last-child { border-bottom: none; }
.company-suggestion:hover { background: var(--bg); }
.company-suggestion.active { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.company-suggestion .cs-name { font-weight: 600; font-size: 14px; }
.company-suggestion .cs-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.company-suggestion-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }
/* Uniform-width input row (Update Resume's "Add Job Role" form) — unlike
   .find-row, every input here is equally important, so each gets the same
   flex-basis instead of the :first-child/:last-of-type split tuned for
   find-row's specific 2-input layout. */
.job-add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.job-add-row input { flex: 1 1 160px; }
.find-external-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.find-external-label { font-size: 12px; color: var(--muted); }
.suggested-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.suggested-label { font-size: 12px; color: var(--muted); }
.suggested-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.chip {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--blue-d);
  cursor: pointer;
}
.chip:hover { background: #eff6ff; border-color: var(--blue); }
.chip-selected, .chip-selected:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.fit-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.fit-badge.fit-high { background: #dcfce7; color: var(--green-d); }
.fit-badge.fit-mid  { background: #fef3c7; color: #b45309; }
.fit-badge.fit-low  { background: var(--bg); color: var(--muted); }
.find-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.find-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background .15s;
}
.find-item:hover { background: #f8fafc; }
.find-item-main { min-width: 0; }
.find-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.find-item-acts { display: flex; gap: 8px; flex-shrink: 0; }

.find-item-locked { background: #f8fafc; }
.find-item-locked:hover { background: #f1f5f9; }
.find-item-blur {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

.find-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.find-pagination .pg-label { font-size: 12px; color: var(--muted); min-width: 90px; text-align: center; }

/* ── Add form ── */
.add-card h2 { margin-bottom: 14px; }
.add-row { display: flex; gap: 10px; }
.add-row input { flex: 1; }
.manual-fields { display: flex; gap: 10px; margin-top: 10px; }
.manual-fields input { flex: 1; }
.add-msg { margin-top: 8px; font-size: 13px; min-height: 18px; }
.add-msg.ok  { color: var(--green); }
.add-msg.err { color: var(--red); }
.add-msg.spin{ color: var(--blue); }

/* ── Inputs ── */
input[type=text], input[type=url], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, opacity .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn-primary  { background: var(--blue); color: #fff; }
.btn-primary:hover  { background: var(--blue-d); }
.btn-outline  { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.btn-outline:hover  { background: var(--bg); border-color: #d3d8e3; }
.btn-ghost-danger { background: #fee2e2; color: var(--red); border: none; }
.btn-ghost-danger:hover { background: #fecaca; }
.btn-danger { background: var(--red); color: #fff; border: none; }
.btn-danger:hover { background: #dc2626; }

/* Profile → Delete Account: the form stays folded until asked for. */
.delete-account > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; }
.delete-account > summary::-webkit-details-marker { display: none; }
.delete-account-form { margin-top: 14px; max-width: 420px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Row action toolbar ──
   All five/six per-row buttons now share one compact, uniform footprint
   (same height/radius/font) so the row reads as one uncluttered toolbar
   instead of five buttons each making their own color/size/shape choice.
   Apply is the only one that stays filled — it's the one primary action
   per row; everything else is a quiet, same-weight secondary action. */
.btn-apply, .btn-jd, .btn-conn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn-apply {
  background: var(--green);
  color: #fff;
}
.btn-apply:hover { background: var(--green-d); }

.btn-jd, .btn-conn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}
.btn-jd:hover, .btn-conn:hover { background: var(--bg); border-color: #d3d8e3; color: var(--text); }
.btn-jd.disabled, .btn-conn.disabled {
  color: #c3c8d3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Table top ── */
.table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.filters { display: flex; gap: 8px; }
.filters select, .filters input { width: auto; }

/* ── Table ── */
#table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
/* Nothing about the table itself hints that it's horizontally scrollable
   once it's wider than the screen — it just looks like it ends at the
   edge, so most columns (including every row action) were effectively
   undiscoverable on a phone. Shown only at the width where the table
   actually exceeds the viewport and needs scrolling. */
.table-scroll-hint { display: none; }
@media (max-width: 860px) {
  #table-wrap table { min-width: 920px; }
  .table-scroll-hint {
    display: block; font-size: 12px; color: var(--muted);
    margin: -6px 0 10px; text-align: right;
  }
}
/* Phones (and the Android app): each application becomes a card instead
   of a table row, so nothing needs sideways swiping. The cells stay real
   <td>s, so inline note/deadline editing works unchanged; data-label (set
   in tracker.js) names each one. */
@media (max-width: 640px) {
  .table-scroll-hint { display: none; }
  #table-wrap { overflow-x: visible; }
  #table-wrap table { min-width: 0; }
  #table-wrap thead { display: none; }
  #table-wrap table, #table-wrap tbody { display: block; }
  #table-wrap tr {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 12px; background: var(--surface);
  }
  #table-wrap tr.institution-row { background: #ecfdf5; }
  #table-wrap td, #table-wrap tr:hover td, #table-wrap tr.institution-row td {
    display: block; padding: 6px 0; border: none; background: none; min-width: 0;
  }
  #table-wrap td:first-child { grid-column: 1 / -1; padding-top: 0; }
  #table-wrap td.cell-board, #table-wrap td.cell-status { padding-bottom: 8px; }
  #table-wrap td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 10.5px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
  }
  #table-wrap td.notes-cell, #table-wrap td.cell-actions { grid-column: 1 / -1; }
  #table-wrap td.notes-cell { max-width: none; white-space: normal; }
  #table-wrap td.notes-cell.editing { padding: 6px 0; }
  #table-wrap td.cell-actions {
    margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border);
  }
  #table-wrap .acts { max-width: none; }
  #table-wrap .acts .btn-sm, #table-wrap .acts .btn-apply, #table-wrap .acts .btn-jd,
  #table-wrap .acts .btn-conn { min-height: 32px; }
}
th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 15px 12px;
  border-bottom: 1px solid var(--bg);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbfd; }

.co  { font-weight: 700; }
.ttl { color: var(--muted); font-size: 13px; margin-top: 1px; }

/* ── Badges ── */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.pill-pending   { background: #fef3c7; color: #92400e; }
.pill-applied   { background: #dbeafe; color: #1e40af; }
.pill-interview { background: #ede9fe; color: #5b21b6; }
.pill-offer     { background: #d1fae5; color: #065f46; }
.pill-rejected  { background: #fee2e2; color: #991b1b; }

.board {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.board-linkedin { background: #0a66c2; }
.board-indeed   { background: #003a9b; }
.board-naukri   { background: #4a90d9; }
.board-company  { background: var(--green-d); }
.board-himalayas { background: #6d28d9; }
.board-remoteok { background: #16182a; }
.board-adzuna   { background: #0f766e; }
.board-jooble   { background: #c2410c; }
.board-government { background: #b45309; }
.board-other    { background: var(--muted); }

.badge-gmail {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.gmail-on  { background: #d1fae5; color: #065f46; }
.gmail-off { background: #fee2e2; color: #991b1b; }

/* ── Actions cell ── */
.acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: 260px; }
.acts .btn-sm { height: 26px; padding: 0 10px; border-radius: 7px; }

/* ── Deadline alert banner ── */
.deadline-alert {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.deadline-alert-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 10px;
}
.deadline-alert-body { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
}
.dl-overdue { background: #fee2e2; color: #991b1b; }
.dl-soon    { background: #fef3c7; color: #92400e; }
.dl-week    { background: #fefce8; color: #713f12; }
.dl-label   { font-style: italic; opacity: .85; }
.dl-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #92400e;
  padding: 0 2px;
  opacity: .7;
}
.dl-dismiss:hover { opacity: 1; }

/* ── Deadline cell ── */
.deadline-cell {
  font-size: 12px;
  white-space: nowrap;
  cursor: text;
  min-width: 90px;
}
.deadline-cell:hover { background: #f1f5f9; }
.deadline-cell.editing { padding: 6px 8px; }
.deadline-inline-edit {
  width: 130px;
  font-size: 12px;
  font-family: inherit;
  padding: 3px 6px;
  border: 1.5px solid var(--blue);
  border-radius: 4px;
  color: var(--text);
  background: #fff;
  outline: none;
}

/* ── Notes cell ── */
.notes-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
  cursor: text;
}
.notes-cell:hover { background: #f1f5f9; }
.notes-cell.editing {
  white-space: normal;
  overflow: visible;
  max-width: 220px;
  padding: 6px 8px;
}
.notes-placeholder { color: #cbd5e1; font-style: italic; }
.notes-inline-edit {
  width: 100%;
  min-width: 160px;
  font-size: 12px;
  font-family: inherit;
  padding: 4px 6px;
  border: 1.5px solid var(--blue);
  border-radius: 4px;
  resize: vertical;
  color: var(--text);
  background: #fff;
  outline: none;
}

/* ── Empty ── */
.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--muted);
}
.empty svg { margin-bottom: 12px; opacity: .35; }
.empty p { font-size: 15px; }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 460px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-box h3 { font-size: 17px; font-weight: 700; margin-bottom: 20px; }
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.fg input, .fg select, .fg textarea { width: 100%; }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
/* Wider modal for content that needs more room than the default 460px
   (e.g. Watchlist's Openings list) — the box itself still centers/overlays
   the same way. */
.modal-box-wide { width: 640px; }
@media (max-width: 640px) {
  .modal-box-wide { width: 92vw; }
}

/* ── Tailor resume (tracker) ── */
.tailor-intro { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: -10px 0 16px; }
.tailor-edits { display: flex; flex-direction: column; gap: 12px; }
.tailor-edit { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; transition: opacity .15s; }
.tailor-edit.is-skipped { opacity: .5; }
.tailor-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tailor-edit-head label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tailor-reason { font-size: 12px; color: var(--blue-d); }
.tailor-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 4px; }
.tailor-original { font-size: 12.5px; color: var(--muted); line-height: 1.55; text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, .5); }
.tailor-edit textarea { width: 100%; min-height: 84px; font: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
.tailor-adds { font-size: 12px; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 6px 10px; margin-top: 8px; line-height: 1.5; }
.tailor-status { font-size: 13px; line-height: 1.6; padding: 6px 0; }
.tailor-status.is-error { color: var(--red); }
.tailor-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tailor-score:not(:empty) { margin-bottom: 14px; }
.score-pill { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 120px; }
.score-pill span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.score-pill strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.score-pill.is-up { border-color: var(--green); background: #ecfdf5; }
.score-pill.is-up strong { color: var(--green-d); }
.score-arrow { font-size: 18px; color: var(--muted); }
.kw-block { margin: 0 0 12px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: #fff7ed; color: #b45309; border: 1px solid #fed7aa; }
.ats-scope { font-size: 12px; color: var(--muted); text-align: center; margin: 4px 0 12px; }
.ats-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; margin-bottom: 16px; }
.ats-part-head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; }
.ats-part-head strong { font-weight: 800; }
.ats-bar { height: 6px; border-radius: 6px; background: var(--blue-soft); margin: 5px 0 4px; overflow: hidden; }
.ats-bar > div { height: 100%; background: var(--blue-d); border-radius: 6px; }
.ats-part-detail { font-size: 11.5px; color: var(--muted); }
.ats-issues { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.5; }
.ats-issues li { padding-left: 14px; position: relative; }
.ats-issues li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.ats-issues li.sev-high::before { background: var(--red); }
.ats-issues li.sev-medium::before { background: var(--amber); }
.kw-chip.is-found { background: #ecfdf5; color: var(--green-d); border-color: #a7f3d0; }
.ats-deep-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ats-deep-row[hidden] { display: none; }
.ats-deep-row .btn { flex-shrink: 0; }
.ats-deep-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.exp-block { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.exp-ai { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-d); margin-left: 4px; }
.exp-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.exp-item { padding-left: 12px; border-left: 3px solid var(--border); }
.exp-item.exp-covered { border-left-color: var(--green); }
.exp-item.exp-partial { border-left-color: var(--amber); }
.exp-item.exp-missing { border-left-color: var(--red); }
.exp-req { font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.exp-tag, .exp-req-flag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-right: 6px; }
.exp-covered .exp-tag { color: var(--green-d); }
.exp-partial .exp-tag { color: #b45309; }
.exp-missing .exp-tag { color: var(--red); }
.exp-req-flag { color: var(--muted); }
.exp-evidence { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.btn-doc { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.btn-doc.is-set { color: var(--green-d); border-color: var(--green); background: #ecfdf5; }
.tailor-other { margin-left: auto; background: none; border: none; color: var(--blue-d); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.tailor-other:hover { text-decoration: underline; }

/* ── Calendar reminders (tracker) ── */
.btn-remind { display: inline-flex; align-items: center; gap: 5px; }
.btn-remind.is-set { color: var(--blue-d); border-color: var(--blue); background: var(--blue-soft); }
.reminder-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 6px; }

/* ── Last check ── */
.last-check { text-align: center; font-size: 12px; color: var(--muted); padding: 8px 0; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  header { flex-wrap: wrap; gap: 12px; }
  .table-top { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stats-grid .stat-card { padding: 12px 10px; }
  .stats-grid .stat-card .n { font-size: 22px; }
  .stats-grid .stat-card .l { font-size: 10px; }
  .add-row { flex-direction: column; }
  .find-row { flex-direction: column; }
  .find-row input:last-of-type { max-width: none; }
  .company-picker { flex: none; width: 100%; }
  .find-item { flex-direction: column; align-items: flex-start; }
}

/* ── Auth pages (login/register) ── */
/* ── Auth pages: Linear.app-inspired — dark, minimal, single centered
   column (not a marketing split-panel: Linear's own sign-in/sign-up is
   just the form, no side copy). Near-black background with two soft,
   blurred color glows for ambience, a dark elevated card with a thin
   hairline border instead of a heavy shadow, and Linear's own signature
   indigo (#5E6AD2) as the sole accent — everything else recedes to
   near-white/gray text on near-black surfaces. Scoped entirely under
   .auth-page/.auth-card so none of this touches the (light-themed)
   portal, which shares the same .btn/.fg/input rules elsewhere. */
:root {
  --auth-bg:      #0b0b0f;
  --auth-surface: #17171c;
  --auth-field:   #1c1c22;
  --auth-border:  rgba(255, 255, 255, .08);
  --auth-text:    #f4f4f6;
  --auth-muted:   #8b8b96;
  --auth-accent:  #5e6ad2;
  --auth-accent-d:#4c58c4;
}
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--auth-bg);
  position: relative;
  overflow: hidden;
}

.auth-card {
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  padding: 38px 36px;
  width: 380px;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
/* Wider variant for longer forms (institution registration's roster
   upload, subscription fields, etc.) — same card treatment, just more
   breathing room for a form that has more to say. */
.auth-card--wide { width: 640px; }
.auth-card .logo { justify-content: center; margin-bottom: 24px; }
.auth-card .logo h1, .auth-card .logo span { color: var(--auth-text) !important; }
.auth-card h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; text-align: center; color: var(--auth-text); }
.auth-card .form-sub { text-align: center; color: var(--auth-muted); font-size: 13px; margin-bottom: 24px; }
.auth-card .fg label { color: var(--auth-muted); }
.auth-card input, .auth-card select, .auth-card textarea {
  background: var(--auth-field);
  border: 1px solid var(--auth-border);
  color: var(--auth-text);
}
.auth-card input::placeholder { color: #55555f; }
.auth-card input:focus, .auth-card select:focus, .auth-card textarea:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px rgba(94, 106, 210, .25);
}
.auth-card .amount-preview { background: var(--auth-field); color: var(--auth-text); border: 1px solid var(--auth-border); }
.auth-card .radio-group label { color: var(--auth-text); }
.auth-card .sample-csv-link, .auth-card .form-row-2 div[style] { color: var(--auth-muted); }
.auth-error {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .25);
  color: #f87171;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.auth-footer { text-align: center; font-size: 13px; color: var(--auth-muted); margin-top: 20px; }
.auth-footer a { color: var(--auth-text); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-card .btn { width: 100%; justify-content: center; }
.auth-card .btn-primary { background: var(--auth-accent); }
.auth-card .btn-primary:hover { background: var(--auth-accent-d); }
.auth-card .btn-outline { background: rgba(255, 255, 255, .04); border: 1px solid var(--auth-border); color: var(--auth-text); }
.auth-card .btn-outline:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.btn-google svg { flex-shrink: 0; }
.auth-card .pending-icon { color: var(--auth-accent); }
.auth-divider {
  text-align: center; font-size: 11px; color: var(--auth-muted); text-transform: uppercase;
  letter-spacing: .05em; margin: 18px 0; position: relative;
}
.auth-divider::before, .auth-divider::after {
  content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--auth-border);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

/* ── Auth split shell (USP panel + form) — login/register pages ──
   Wraps .auth-usp (left, marketing) and .auth-card (right, the form)
   in one bordered/shadowed unit; .auth-card sheds its own standalone
   border/shadow while nested here so the two halves read as one card.
   Below 860px there's no room for both, so the USP panel is dropped
   and .auth-card reverts to its normal standalone centered look. */
.auth-shell {
  display: flex;
  align-items: stretch;
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: 16px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.auth-shell .auth-card {
  box-shadow: none;
  border: none;
  border-radius: 0;
}
.auth-usp {
  flex: none;
  width: 340px;
  min-width: 0;
  padding: 48px 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  background: var(--auth-field);
  border-right: 1px solid var(--auth-border);
}
.auth-usp-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--auth-accent); margin-bottom: 16px;
}
.auth-usp h2 { font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--auth-text); line-height: 1.32; margin-bottom: 10px; text-align: left; }
.auth-usp-sub { font-size: 13.5px; color: var(--auth-muted); line-height: 1.6; }
.auth-usp-list { display: flex; flex-direction: column; gap: 18px; }
.auth-usp-item { display: flex; align-items: flex-start; gap: 12px; }
.auth-usp-item .ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: rgba(94, 106, 210, .16); color: var(--auth-accent);
  display: flex; align-items: center; justify-content: center;
}
.auth-usp-item .txt { font-size: 13px; color: var(--auth-muted); line-height: 1.55; padding-top: 5px; }
.auth-usp-item .txt strong { color: var(--auth-text); font-weight: 600; }

@media (max-width: 860px) {
  .auth-usp { display: none; }
  .auth-shell { background: none; border: none; }
  .auth-shell .auth-card {
    border: 1px solid var(--auth-border);
    border-radius: 12px;
  }
}
@media (max-width: 1080px) {
  .auth-shell--wide .auth-usp { display: none; }
  .auth-shell--wide { background: none; border: none; }
  .auth-shell--wide .auth-card {
    border: 1px solid var(--auth-border);
    border-radius: 12px;
  }
}

/* ── Admin pages ── */
/* Scrolls sideways rather than overflowing the page on a phone (the
   Android app opens these pages too). */
.admin-nav { display: flex; gap: 20px; margin-bottom: 22px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.admin-nav a {
  font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.admin-nav a.active, .admin-nav a:hover { color: var(--blue-d); border-color: var(--blue-d); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; border-collapse: collapse; }
@media (max-width: 720px) {
  .table-scroll .admin-table { min-width: 640px; }
}
.admin-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 14px 12px; border-bottom: 1px solid var(--bg); font-size: 13px; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #fafbfd; }
.admin-table code {
  background: var(--bg); padding: 2px 7px; border-radius: 6px; font-family: monospace; font-size: 12px;
}
.admin-inline-form { display: inline; }
.new-login-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}
.admin-create-row { display: flex; gap: 10px; margin-bottom: 20px; max-width: 460px; }
.admin-section-title { margin: 28px 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ── Institution-assigned tracker row ── */
tr.institution-row td { background: #ecfdf5; }
tr.institution-row:hover td { background: #d1fae5; }

/* ── Landing page ── */
.landing-page { min-height: 100vh; }
.landing-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px; max-width: 1180px; margin: 0 auto;
}
.landing-hero {
  max-width: 720px; margin: 8vh auto 0; padding: 0 24px; text-align: center;
}
.landing-hero h2 { font-size: 32px; font-weight: 800; margin-bottom: 14px; line-height: 1.25; }
.landing-hero p { font-size: 16px; color: var(--muted); line-height: 1.7; }
.landing-hero .hero-icon { margin: 0 auto 22px; color: var(--blue); }

.nav-menus { display: flex; align-items: center; gap: 10px; position: relative; }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.nav-dropdown-trigger:hover { background: var(--bg); }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border-radius: 10px; box-shadow: var(--shadow);
  border: 1px solid var(--border); min-width: 160px; overflow: hidden; z-index: 20;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 11px 16px; font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none;
}
.nav-dropdown-menu a:hover { background: var(--bg); }
.nav-dropdown-menu a + a { border-top: 1px solid var(--border); }

/* ── Wide forms (institution/student registration) ── */
.form-card { max-width: 640px; margin: 40px auto; padding: 32px; }
.form-card h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; text-align: center; }
/* Not scoped to .form-card — register_institution.html now sits in
   .auth-card--wide instead (see auth-page below) but still uses this
   same subtitle style under its own h2. */
.form-sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.amount-preview {
  background: var(--bg); border-radius: 8px; padding: 12px 14px; font-size: 13px;
  color: var(--text); margin-top: -4px; margin-bottom: 16px;
}
.amount-preview strong { font-size: 16px; }
.radio-group { display: flex; gap: 18px; margin-bottom: 4px; }
.radio-group label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.radio-group input { width: auto; }
.sample-csv-link { font-size: 12px; margin-top: 6px; display: inline-block; }

/* ── Payment page ── */
.payment-card { max-width: 460px; }
.receipt {
  background: var(--bg);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 4px 0 20px;
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
}
.receipt-row.muted { font-size: 12px; font-weight: 500; color: var(--muted); }
.receipt-divider { border-top: 1px dashed var(--border); margin: 10px 0; }
.receipt-row.receipt-total { font-size: 18px; font-weight: 800; }
.payment-trust {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* ── Pending approval page ── */
.pending-icon { color: var(--amber); margin: 0 auto 18px; display: block; }

/* ── Blog / article pages ── */
.article-page { max-width: 720px; margin: 0 auto; padding: 32px 20px 80px; }
.article-page .logo { margin-bottom: 28px; }
.back-link { display: inline-block; margin-bottom: 18px; font-size: 13px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--blue-d); }
.article-page h1 { font-size: 30px; font-weight: 800; line-height: 1.25; margin: 0 0 10px; }
.article-meta { font-size: 12px; color: var(--muted); margin-bottom: 28px; }
.article-body { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.article-body h2 { font-size: 20px; font-weight: 700; margin: 34px 0 12px; }
.article-body h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 16px 22px; }
.article-body li { margin-bottom: 6px; }
.article-body a { color: var(--blue-d); font-weight: 600; }
.article-body strong { font-weight: 700; }
.download-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 8px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.download-box .dl-label strong { display: block; font-size: 14.5px; }
.download-box .dl-label span { font-size: 12.5px; color: var(--muted); }
.cta-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  padding: 24px;
  margin: 36px 0 12px;
  text-align: center;
}
.cta-box h3 { margin: 0 0 8px; font-size: 18px; }
.cta-box p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.cta-box .btn { justify-content: center; }

/* ── Landing page: hero buttons + feature sections ── */
.hero-hello { font-size: 40px; font-weight: 800; margin: 0 0 12px; line-height: 1.15; }
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
@media (max-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr; }
  .landing-header { flex-wrap: wrap; gap: 12px; }
}

/* ── Portal shell (sidebar layout: Profile / Application Tracker / Job
   Search) ── */
.portal-layout { display: flex; min-height: 100vh; align-items: stretch; position: relative; background: var(--bg); }
/* Ambient blurred blobs — the color the glass sidebar/cards actually
   pick up when blurred. Fixed so they hold position while the page
   scrolls; negative z-index keeps them behind all normal content. */
.portal-layout::before, .portal-layout::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}
.portal-layout::before { width: 460px; height: 460px; top: -120px; left: 15%; background: rgba(116, 137, 254, .30); }
.portal-layout::after  { width: 420px; height: 420px; bottom: -140px; right: 8%; background: rgba(16, 185, 129, .20); }
.portal-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: rgba(246, 247, 251, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Stays put while the page scrolls; scrolls itself on short screens.
     The phone layout below turns this back into a normal top bar. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  align-self: flex-start;
}
.portal-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.portal-logo span { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.portal-sidebar-topbar { display: flex; align-items: center; justify-content: space-between; }
.portal-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.portal-menu-toggle:hover { background: var(--surface); }
.portal-nav-links { display: flex; flex-direction: column; gap: 2px; }
.portal-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .15s;
  border-left: 3px solid transparent;
}
.portal-nav-link svg { flex-shrink: 0; transition: transform .15s; }
.portal-nav-link:hover { background: var(--surface); color: var(--text); }
.portal-nav-link:hover svg { transform: translateX(1px); }
.portal-nav-link.active {
  background: var(--surface);
  color: var(--blue-d);
  border-left-color: var(--blue-d);
}
.portal-main { flex: 1; min-width: 0; background: transparent; position: relative; }
.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.portal-page-title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }

@media (max-width: 860px) {
  .portal-layout { flex-direction: column; }
  .portal-sidebar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
    gap: 0;
    position: relative;
    height: auto;
    overflow: visible;
    align-self: stretch;
  }
  .portal-menu-toggle { display: flex; }
  .portal-nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    margin-top: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
    z-index: 30;
  }
  .portal-nav-links.open { display: flex; }
}

/* ── Profile page ── */
.profile-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-photo-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.profile-photo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border); background: var(--bg);
}
.profile-photo-placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.profile-photo-dot {
  position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--surface);
}
.profile-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.profile-field { display: flex; flex-direction: column; gap: 4px; }
.pf-l { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pf-v { font-size: 14.5px; font-weight: 600; }
.pf-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.plan-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.plan-basic   { background: var(--bg); color: var(--muted); }
.plan-premium { background: #d1fae5; color: var(--green-d); }
.pf-edit-display { display: inline-flex; align-items: center; gap: 6px; }
.pf-edit-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--muted); display: inline-flex; line-height: 0; text-decoration: none;
}
.pf-edit-btn:hover { color: var(--blue-d); }
.pf-edit-row { display: flex; gap: 8px; margin-top: 6px; max-width: 320px; }
.pf-edit-row input { flex: 1; }
.profile-hint { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 10px 0 14px; }
.profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inbox-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.inbox-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inbox-email { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 160px; word-break: break-all; }

@media (max-width: 560px) {
  .profile-fields { grid-template-columns: 1fr; }
}

/* ── Watchlist ── */
.watchlist-list { display: flex; flex-direction: column; gap: 10px; }
.watchlist-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
}
.watchlist-item:hover { background: #f8fafc; }
.watchlist-item-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* A long company name wraps onto several lines on a narrow screen — with
   align-items: center on the row above, that tall wrapped text vertically
   centers against the (much shorter) action buttons, so the buttons end up
   floating in the middle of the wrapped words instead of below them
   (confirmed live at 390px width). Stacking avoids the collision entirely.
   .find-item (search/openings results, defined earlier in this file) has
   the identical shape and gets the same fix here. */
@media (max-width: 640px) {
  .watchlist-item, .find-item { flex-direction: column; align-items: stretch; }
}

/* Relevant Companies result cards: a .watchlist-item with more detail, so
   top-aligned rather than centred, with the buttons wrapping beside it. */
.watchlist-item.org-result { align-items: flex-start; }
.org-result .find-item-main { min-width: 0; }
.org-result-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.org-result-desc { font-size: 14px; color: var(--text); margin: 8px 0 0; line-height: 1.5; max-width: 62ch; }
.org-result-areas { font-size: 13px; color: var(--muted); margin-top: 6px; }
.org-result-areas span { font-weight: 600; color: var(--text); }
.org-result-tags { margin-top: 8px; }
.org-result .find-item-acts { flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
@media (max-width: 640px) {
  .watchlist-item.org-result { align-items: stretch; }
  .org-result .find-item-acts { max-width: none; justify-content: flex-start; }
}

/* ── Small round "×" remove button (admin institution/user delete lists,
   Watchlist) ── */
.directory-remove-btn {
  background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--muted); padding: 4px 8px; border-radius: 6px; flex-shrink: 0;
}
.directory-remove-btn:hover { color: var(--red); background: #fee2e2; }

/* ── WhatsApp floating chat button ── */
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  z-index: 1000;
  transition: transform .15s, box-shadow .15s;
}
.wa-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
@media (max-width: 640px) {
  .wa-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .wa-fab svg { width: 26px; height: 26px; }
}

/* ── Animated line→X hamburger (checkbox-driven) — shared by the landing
   nav and portal sidebar mobile toggles. stroke: currentColor so it
   picks up whatever color each toggle button already sets. ── */
.icon-hamburger { cursor: pointer; }
.icon-hamburger input { display: none; }
.icon-hamburger svg { height: 1.6em; transition: transform 600ms cubic-bezier(.4, 0, .2, 1); }
.icon-hamburger .line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: stroke-dasharray 600ms cubic-bezier(.4, 0, .2, 1),
              stroke-dashoffset 600ms cubic-bezier(.4, 0, .2, 1);
}
.icon-hamburger .line-top-bottom { stroke-dasharray: 12 63; }
.icon-hamburger input:checked + svg { transform: rotate(-45deg); }
.icon-hamburger input:checked + svg .line-top-bottom { stroke-dasharray: 20 300; stroke-dashoffset: -32.42; }

/* ── Capybara loader — used for the ATS Fit "analyzing" state ── */
.capybaraloader {
  width: 10em;
  height: 7.2em;
  position: relative;
  z-index: 1;
  --color: rgb(204, 125, 45);
  --color2: rgb(83, 56, 28);
  margin: 0 auto;
}
/* Small inline variant — same markup, shrunk via font-size since every
   capybara measurement is in em. Used next to status text (searching,
   uploading, generating…) instead of the full modal-sized loader. */
.mini-loader { display: inline-block; font-size: 3.2px; vertical-align: middle; line-height: 0; }
.mini-loader .capybaraloader { margin: 0; }
.capybara { width: 100%; height: 5.4em; position: relative; z-index: 1; }
.loader { width: 100%; height: 1.8em; position: relative; z-index: 1; overflow: hidden; }
.capy {
  width: 85%;
  height: 100%;
  background: linear-gradient(var(--color), 90%, var(--color2));
  border-radius: 45%;
  position: relative;
  z-index: 1;
  animation: capy-movebody 1s linear infinite;
}
.capyhead {
  width: 7.5em; height: 7em; bottom: 0em; right: 0em;
  position: absolute; background-color: var(--color); z-index: 3;
  border-radius: 3.5em; box-shadow: -1em 0em var(--color2);
  animation: capy-movebody 1s linear infinite;
}
.capyear {
  width: 2em; height: 2em;
  background: linear-gradient(-45deg, var(--color), 90%, var(--color2));
  top: 0em; left: 0em; border-radius: 100%; position: absolute; overflow: hidden; z-index: 3;
}
.capyear:nth-child(2) { left: 5em; background: linear-gradient(25deg, var(--color), 90%, var(--color2)); }
.capyear2 {
  width: 100%; height: 1em; background-color: var(--color2);
  bottom: 0em; left: 0.5em; border-radius: 100%; position: absolute; transform: rotate(-45deg);
}
.capymouth {
  width: 3.5em; height: 2em; background-color: var(--color2);
  position: absolute; bottom: 0em; left: 2.5em; border-radius: 50%;
  display: flex; justify-content: space-around; align-items: center; padding: 0.5em;
}
.capylips { width: 0.25em; height: 0.75em; border-radius: 100%; transform: rotate(-45deg); background-color: var(--color); }
.capylips:nth-child(2) { transform: rotate(45deg); }
.capyeye {
  width: 2em; height: 0.5em; background-color: var(--color2);
  position: absolute; bottom: 3.5em; left: 1.5em; border-radius: 5em; transform: rotate(45deg);
}
.capyeye:nth-child(4) { transform: rotate(-45deg); left: 5.5em; width: 1.75em; }
.capyleg {
  width: 6em; height: 5em; bottom: 0em; left: 0em; position: absolute;
  background: linear-gradient(var(--color), 95%, var(--color2)); z-index: 2;
  border-radius: 2em; animation: capy-movebody 1s linear infinite;
}
.capyleg2 {
  width: 1.75em; height: 3em; bottom: 0em; left: 3.25em; position: absolute;
  background: linear-gradient(var(--color), 80%, var(--color2)); z-index: 2;
  border-radius: 0.75em; box-shadow: inset 0em -0.5em var(--color2);
  animation: capy-moveleg 1s linear infinite;
}
.capyleg2:nth-child(3) { width: 1.25em; left: 0.5em; height: 2em; animation: capy-moveleg2 1s linear infinite 0.075s; }
@keyframes capy-moveleg {
  0% { transform: rotate(-45deg) translateX(-5%); }
  50% { transform: rotate(45deg) translateX(5%); }
  100% { transform: rotate(-45deg) translateX(-5%); }
}
@keyframes capy-moveleg2 {
  0% { transform: rotate(45deg); }
  50% { transform: rotate(-45deg); }
  100% { transform: rotate(45deg); }
}
@keyframes capy-movebody {
  0% { transform: translateX(0%); }
  50% { transform: translateX(2%); }
  100% { transform: translateX(0%); }
}
.loaderline { width: 50em; height: 0.5em; border-top: 0.5em dashed var(--color2); animation: capy-moveline 10s linear infinite; }
@keyframes capy-moveline {
  0% { transform: translateX(0%); opacity: 0%; }
  5% { opacity: 100%; }
  95% { opacity: 100%; }
  100% { opacity: 0%; transform: translateX(-70%); }
}

/* ── Jobs Board + Employer portal ── */
.pill-shortlisted { background: #e0f2fe; color: #075985; }
.pill-closed      { background: var(--bg); color: var(--muted); }
.pill-open        { background: #d1fae5; color: #065f46; }
.jb-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; }
.jb-list { display: flex; flex-direction: column; gap: 12px; }
.jb-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; border: 1px solid rgba(229, 232, 240, .9); border-radius: var(--radius);
  background: rgba(255, 255, 255, .7); text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
a.jb-item:hover { border-color: var(--blue); transform: translateY(-1px); }
.jb-avatar {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  background: var(--blue-soft); color: var(--blue-d);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; text-transform: uppercase;
}
.jb-avatar-lg { width: 58px; height: 58px; font-size: 21px; border-radius: 14px; }
.jb-main { flex: 1; min-width: 0; }
.jb-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.005em; }
.jb-company { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.jb-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.jb-meta span { display: inline-flex; align-items: center; gap: 5px; }
.jb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.jb-tag {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
}
.jb-tag-hit { background: #dcfce7; border-color: #bbf7d0; color: var(--green-d); }
.jb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; font-size: 12px; color: var(--muted); }
.jb-desc { white-space: pre-wrap; line-height: 1.7; font-size: 14px; }
.jb-section-label { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 8px; }
.jb-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.jb-empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.jb-empty h3 { color: var(--text); font-size: 16px; margin-bottom: 6px; }
.jb-banner {
  padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px;
  background: var(--blue-soft); color: var(--blue-d); border: 1px solid #dfe5ff;
}
.jb-banner-err { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.jb-banner-ok  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.emp-stats { grid-template-columns: repeat(3, 1fr); }
.emp-stats .stat-card::before { background: var(--blue); }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; }
.check-row input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--blue-d); }
.status-select { width: auto !important; padding: 6px 10px !important; font-size: 12.5px !important; }
.cover-note { font-size: 12.5px; color: var(--muted); margin-top: 6px; white-space: pre-wrap; max-width: 520px; }
@media (max-width: 900px) {
  .jb-filters { grid-template-columns: 1fr 1fr; }
  .jb-filters > :first-child { grid-column: 1 / -1; }
  .jb-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .jb-item { flex-wrap: wrap; }
  .jb-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .emp-stats, .form-row-3 { grid-template-columns: 1fr; }
}

/* ── Coins page (templates/coins.html) ── */
.coin-count { margin-left: auto; font-size: 11.5px; font-weight: 700; background: #fef3c7; color: #92400e; border-radius: 20px; padding: 1px 8px; }
.coins-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.coins-balance-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.coins-balance-value { font-size: 40px; font-weight: 800; margin: 2px 0 12px; font-variant-numeric: tabular-nums; }
.coins-meter { height: 10px; background: var(--blue-soft); border-radius: 10px; overflow: hidden; }
.coins-meter > div { height: 100%; background: linear-gradient(90deg, var(--amber), #fbbf24); border-radius: 10px; transition: width .4s; }
.coins-meter-label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.coins-pass-status { margin-bottom: 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.coins-bonus { margin: 14px 0 16px; }
.coins-bonus-dots { display: flex; gap: 6px; }
.coins-bonus-dots span { flex: 1; height: 8px; border-radius: 4px; background: var(--border); }
.coins-bonus-dots span.on { background: var(--amber); }
.coins-bonus-label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.coins-packs { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.coins-pack { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, background .15s; }
.coins-pack:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); }
.coins-pack:disabled { opacity: .6; cursor: wait; }
.coins-pack-coins { font-weight: 800; font-size: 16px; }
.coins-pack-label { color: var(--muted); font-size: 13px; }
.coins-pack-price { font-weight: 800; color: var(--blue-d); font-size: 16px; }
.coins-player-wrap { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.coins-player-wrap iframe, .coins-player-wrap #yt-player { position: absolute; inset: 0; width: 100%; height: 100%; }
.coins-watch-progress { height: 4px; background: var(--border); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.coins-watch-progress > div { height: 100%; width: 0; background: var(--blue); transition: width .5s linear; }
@media (max-width: 760px) {
  .coins-hero, .coins-grid { grid-template-columns: 1fr; }
}

/* ── Admin openings check (templates/admin/organisations.html) ── */
.check-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.check-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; border: 1px solid transparent; text-decoration: none; color: inherit; white-space: nowrap; }
a.check-chip { padding: 6px 12px; font-size: 13px; }
a.check-chip:hover, a.check-chip.active { border-color: currentColor; }
.check-ok { background: #d1fae5; color: var(--green-d); }
.check-guessed { background: #fef3c7; color: #92400e; }
.check-empty { background: #fee2e2; color: #b91c1c; }
.check-unreachable { background: #ffe4e6; color: #9f1239; }
.check-no_career_page { background: var(--blue-soft); color: var(--blue-d); }
.check-skipped { background: #f3f4f6; color: var(--muted); }

/* ── Android app shell ──────────────────────────────────────────────────
   Only inside the CAMP Android app: _portal_sidebar.html adds .in-app to
   <html> and draws the tab bar / More sheet. Not width-based on purpose,
   so it still applies if Chrome's "Desktop site" mode widens the page. */
.in-app body { -webkit-tap-highlight-color: transparent; }
.in-app .portal-layout { flex-direction: column; }
.in-app .portal-layout::before, .in-app .portal-layout::after { display: none; }
.in-app .portal-sidebar, .in-app .user-nav { display: none; }
.in-app .container { padding: 0 16px calc(88px + env(safe-area-inset-bottom)); }
.in-app .portal-topbar {
  position: sticky; top: 0; z-index: 40;
  margin: 0 -16px 16px; padding: 14px 16px 12px;
  background: rgba(246, 247, 251, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.in-app .portal-page-title { font-size: 20px; }
.in-app .header-tools { border-right: none; padding-right: 0; }

.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(22, 24, 42, .06);
}
.app-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; padding: 0; border: none; background: none; font: inherit;
  font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; cursor: pointer;
}
.app-tab svg { width: 22px; height: 22px; }
.app-tab.active { color: var(--blue-d); }
.app-tab.active svg { stroke-width: 2.4; }

.app-sheet { position: fixed; inset: 0; z-index: 60; }
.app-sheet[hidden], .app-desktop-warning[hidden] { display: none; }
.app-sheet-backdrop { position: absolute; inset: 0; background: rgba(22, 24, 42, .38); }
.app-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
}
.app-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 8px; }
.app-sheet-panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 4px; font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--bg);
}
.app-sheet-panel a:last-child { border-bottom: none; }
.app-sheet-panel .app-sheet-danger { color: var(--red); }

/* Shown only in "Desktop site" mode, where the page is drawn at ~40%
   scale, so the text is sized to stay readable there. */
.app-desktop-warning {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  padding: 28px 32px; font-size: 34px; line-height: 1.4;
  background: #fef3c7; color: #92400e; border-bottom: 2px solid #f59e0b;
}

/* ── Profile → Coins ── */
.coin-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 10px; }
.coin-balance { display: flex; flex-direction: column; }
.coin-balance-n { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.coin-balance-n svg { color: #b45309; }
.coin-balance-l { font-size: 12px; color: var(--muted); }
.coin-pass { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.coin-pass span { color: var(--muted); font-size: 12.5px; }
.coin-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 2px solid var(--border); }
.coin-timeline li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0 6px 14px; position: relative; font-size: 13px; }
.coin-timeline li::before { content: ""; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.coin-when { color: var(--muted); font-size: 12px; min-width: 104px; flex-shrink: 0; }
.coin-what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.coin-amount { font-weight: 700; flex-shrink: 0; }
.coin-amount.is-plus { color: var(--green-d); }
.coin-amount.is-minus { color: var(--red); }
.coin-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--blue-d); }

/* ── Profile → What CAMP understood from your resume ── */
.career-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.career-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.career-block { margin-top: 16px; }
.career-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.career-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.career-roles li { font-size: 14px; line-height: 1.45; }
.career-dates { display: block; font-size: 12px; color: var(--muted); }
.career-empty { font-size: 13px; color: var(--muted); }
.chip-editor { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-removable { display: inline-flex; align-items: center; gap: 4px; cursor: default; }
.chip-removable button {
  border: none; background: none; padding: 0 2px; font-size: 15px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.chip-removable button:hover { color: var(--red); }
.chip-input { width: 100%; max-width: 360px; }
@media (max-width: 560px) {
  .career-grid { grid-template-columns: 1fr; }
}

/* ── Job Search: fit to the student's resume ── */
.match-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #ecfdf5; color: var(--green-d); margin-left: 6px; vertical-align: middle;
}
.match-badge.good { background: var(--blue-soft); color: var(--blue-d); }
.find-sort { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }
.find-sort select { width: auto; padding: 4px 8px; font-size: 12.5px; }
.profile-prompt { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* Visually hidden, still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }