/* TalentTuner workspace (Oct 2026): a calm, light desk for people applying to many jobs.
   One accent (ink blue) for actions; green only for "your resume shows this"; one colour per
   application stage. Companies get a monogram tile so a long list scans by shape, not just text. */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --surface-3: #f8f9fb;
  --ink: #131a22;
  --ink-2: #47525e;
  --ink-3: #7e8893;
  --line: #e2e6ea;
  --line-2: #cdd3d9;
  --accent: #2446a6;
  --accent-2: #1b3584;
  --accent-ink: #ffffff;
  --accent-soft: #e9eefb;
  --good: #1f7a4d;
  --good-soft: #e3f3ea;
  --warn: #93600f;
  --warn-soft: #f8eedb;
  --bad: #a43a3a;
  --bad-soft: #f7e4e4;
  --st-tailored: #5d6b79;
  --st-applied: #2446a6;
  --st-interviewing: #93600f;
  --st-offer: #1f7a4d;
  --st-rejected: #a43a3a;
  --st-not_applying: #8a939c;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(19, 26, 34, 0.05);
  --shadow: 0 1px 2px rgba(19, 26, 34, 0.05), 0 6px 20px rgba(19, 26, 34, 0.05);
  --shadow-pop: 0 2px 6px rgba(19, 26, 34, 0.08), 0 18px 48px rgba(19, 26, 34, 0.16);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1318;
    --surface: #171c23;
    --surface-2: #1f262e;
    --surface-3: #1b2129;
    --ink: #e8edf2;
    --ink-2: #b2bcc6;
    --ink-3: #85909b;
    --line: #29313a;
    --line-2: #39434e;
    --accent: #8aa6ff;
    --accent-2: #a9bfff;
    --accent-ink: #0d1422;
    --accent-soft: #1d2843;
    --good: #6cc394;
    --good-soft: #15301f;
    --warn: #e2b056;
    --warn-soft: #33270f;
    --bad: #ef8a8a;
    --bad-soft: #3a1c1c;
    --st-tailored: #9aa6b2;
    --st-applied: #8aa6ff;
    --st-interviewing: #e2b056;
    --st-offer: #6cc394;
    --st-rejected: #ef8a8a;
    --st-not_applying: #75808b;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; }
kbd { font: 600 11px/1 var(--font); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; color: var(--ink-3); background: var(--surface); }

/* ---------- Top bar + tabs ---------- */
.ws-top { background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.ws-top-inner, .ws-tabs { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.ws-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.ws-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15.5px; }
.ws-brand-sub { color: var(--ink-3); font-weight: 600; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line-2); }
.ws-top-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ws-resume-chip { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--ink-2);
  padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); }
.ws-resume-chip svg { width: 16px; height: 16px; color: var(--ink-3); }
.ws-resume-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.ws-runs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); white-space: nowrap;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
.ws-runs b { color: var(--ink); font-weight: 700; }
.ws-runs-bar { width: 44px; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ws-runs-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ws-link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: none; }
.ws-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ws-tabs { display: flex; gap: 6px; }
.ws-tab { white-space: nowrap; flex: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 10px 11px; cursor: pointer;
  color: var(--ink-3); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s var(--ease); }
.ws-tab:hover { color: var(--ink-2); }
.ws-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ws-count { font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border-radius: 99px; padding: 1px 7px; }
.ws-count:empty { display: none; }

/* ---------- Layout ---------- */
.ws-panel, .ws-gate, .ws-onboard { max-width: 1280px; margin: 0 auto; padding: 24px; }
.ws-gate, .ws-onboard { max-width: 560px; padding-top: 72px; text-align: center; }
.ws-gate h1, .ws-onboard h1 { font-size: 28px; margin-bottom: 10px; letter-spacing: -0.025em; }
.ws-gate p, .ws-onboard p { color: var(--ink-2); margin: 0 0 24px; }
.ws-onboard { max-width: 720px; }
.ws-drop { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px;
  border: 2px dashed var(--line-2); border-radius: 16px; background: var(--surface); cursor: pointer; color: var(--ink-2);
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.ws-drop svg { width: 30px; height: 30px; color: var(--accent); }
.ws-drop strong { color: var(--ink); font-size: 16px; }
.ws-drop:hover, .ws-drop.dragover { border-color: var(--accent); background: var(--accent-soft); }
.ws-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; counter-reset: s; }
.ws-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-size: 14px; color: var(--ink-2); counter-increment: s; }
.ws-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.ws-steps b { display: block; color: var(--ink); margin-bottom: 4px; font-size: 14.5px; }

/* ---------- Buttons ---------- */
.ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-sm);
  border: 1px solid transparent; padding: 0 16px; height: 40px; font-weight: 650; font-size: 14.5px; cursor: pointer;
  text-decoration: none; line-height: 1; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease); }
.ws-btn:active:not([disabled]) { transform: translateY(1px); }
.ws-btn svg { width: 16px; height: 16px; }
.ws-btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 2px rgba(19,26,34,.18); }
.ws-btn-primary:hover { background: var(--accent-2); }
.ws-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.ws-btn-secondary:hover { border-color: var(--ink-3); }
.ws-btn-quiet { background: transparent; color: var(--accent); padding: 0 10px; }
.ws-btn-quiet:hover { background: var(--accent-soft); }
.ws-btn[disabled] { opacity: 0.55; cursor: default; }
.ws-btn-sm { padding: 0 12px; height: 34px; font-size: 13.5px; }
.ws-btn-block { width: 100%; }

/* ---------- Search: one bar ---------- */
.ws-search { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px; box-shadow: var(--shadow); }
.ws-search .ws-field { padding: 6px 14px 7px; border-left: 1px solid var(--line); border-radius: 0; position: relative; }
.ws-search .ws-field:first-child { border-left: 0; }
.ws-search .ws-field > span { font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .01em; }
.ws-search .ws-field input, .ws-search .ws-field select { border: 0; padding: 0; min-height: 24px; background: transparent; box-shadow: none; font-weight: 600; }
.ws-search .ws-field input::placeholder { color: var(--ink-3); font-weight: 500; }
.ws-search .ws-field:focus-within { background: var(--surface-3); border-radius: 10px; }
.ws-search .ws-field input:focus, .ws-search .ws-field select:focus { box-shadow: none; outline: none; }
.ws-search select { cursor: pointer; -webkit-appearance: none; appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%237e8893' stroke-width='1.6'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0 center; padding-right: 16px !important; }
.ws-search-go { height: auto; min-height: 48px; border-radius: 10px; padding: 0 22px; }
.ws-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ws-field input, .ws-field select, .ws-field textarea, .ws-apps-tools input {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface);
  padding: 9px 11px; min-height: 40px; }
.ws-field input:focus, .ws-field select:focus, .ws-field textarea:focus, .ws-apps-tools input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ws-find-aux { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; align-items: center; }
.ws-find-aux .ws-btn-secondary svg { color: var(--accent); }
.ws-find-aux .ws-hint { margin-left: auto; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }

.ws-split { display: grid; grid-template-columns: minmax(320px, 410px) minmax(0, 1fr); gap: 18px; align-items: start; }
.ws-list { display: flex; flex-direction: column; gap: 8px; }
.ws-list-meta { font-size: 12.5px; color: var(--ink-3); padding: 0 4px 4px; line-height: 1.5; }

/* Company monogram */
.ws-avatar { --h: 220; width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; letter-spacing: -0.02em; color: hsl(var(--h) 45% 32%);
  background: hsl(var(--h) 60% 93%); border: 1px solid hsl(var(--h) 40% 86%); }
.ws-avatar.lg { width: 52px; height: 52px; border-radius: 13px; font-size: 18px; }
.ws-avatar.sm { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; }
@media (prefers-color-scheme: dark) {
  .ws-avatar { color: hsl(var(--h) 70% 82%); background: hsl(var(--h) 30% 20%); border-color: hsl(var(--h) 25% 28%); }
}

/* Job card */
.ws-job { text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  box-shadow: var(--shadow-1); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); position: relative; }
.ws-job:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.ws-job[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.ws-job-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.ws-job-main > * { min-width: 0; overflow-wrap: break-word; }
.ws-job-title { font-weight: 700; font-size: 15px; line-height: 1.35; }
.ws-job-co { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.ws-job-meta { color: var(--ink-3); font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.ws-job-meta > span { white-space: nowrap; }
/* One line: a long place name truncates instead of wrapping and stranding the dot on its own line */
.ws-job .ws-job-meta { flex-wrap: nowrap; }
.ws-job .ws-job-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-job .ws-job-meta > span + span { flex: none; }
.ws-job-meta span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--line-2);
  vertical-align: middle; margin-right: 10px; position: relative; top: -1px; }
.ws-job-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ws-flag { font-size: 12px; font-weight: 650; border-radius: 6px; padding: 2px 8px; background: var(--surface-2); color: var(--ink-2); }
.ws-flag-pay { background: var(--good-soft); color: var(--good); }

/* Fit ring (job card + detail) */
.ws-ring { --p: 0; --c: var(--ink-3); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0); }
.ws-ring::before { content: ''; grid-area: 1 / 1; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; background: var(--surface); }
.ws-ring b { grid-area: 1 / 1; font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; z-index: 1; color: var(--ink); }
.ws-ring.good { --c: var(--good); }
.ws-ring.mid { --c: var(--warn); }
.ws-ring.low { --c: var(--bad); }
.ws-ring.now { --c: var(--accent); }
.ws-ring.lg { width: 76px; height: 76px; }
.ws-ring.lg::before { width: calc(100% - 12px); height: calc(100% - 12px); }
.ws-ring.lg b { font-size: 21px; }
.ws-ring.pending { background: var(--surface-2); }
.ws-ring.pending b { color: var(--ink-3); }

/* Status pill (shared) */
.ws-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 6px;
  padding: 2px 8px 2px 7px; background: var(--surface-2); color: var(--st-color, var(--ink-2)); white-space: nowrap; }
.ws-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ws-status[data-s="tailored"] { --st-color: var(--st-tailored); }
.ws-status[data-s="applied"] { --st-color: var(--st-applied); }
.ws-status[data-s="interviewing"] { --st-color: var(--st-interviewing); }
.ws-status[data-s="offer"] { --st-color: var(--st-offer); }
.ws-status[data-s="rejected"] { --st-color: var(--st-rejected); }
.ws-status[data-s="not_applying"] { --st-color: var(--st-not_applying); }

/* ---------- Detail pane ---------- */
.ws-detail { position: sticky; top: 118px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); max-height: calc(100vh - 136px); overflow: auto; scroll-behavior: smooth; }
.ws-detail-inner { padding: 24px 26px 30px; animation: ws-in .22s var(--ease); }
@keyframes ws-in { from { opacity: 0; transform: translateY(4px); } }
.ws-detail-back { display: none; }
.ws-detail-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; }
.ws-detail h2 { font-size: 23px; line-height: 1.22; letter-spacing: -0.02em; }
.ws-detail-co { color: var(--ink-2); margin-top: 3px; font-weight: 600; }
.ws-detail-meta { color: var(--ink-3); font-size: 13.5px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ws-meta-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.ws-meta-chip svg { width: 14px; height: 14px; color: var(--ink-3); }
.ws-note { margin-top: 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink);
  font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ws-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ws-actionbar { position: sticky; top: 0; z-index: 2; background: var(--surface); margin: 16px -26px 0; padding: 12px 26px;
  border-bottom: 1px solid transparent; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; transition: border-color .15s, box-shadow .15s; }
.ws-actionbar.stuck { border-bottom-color: var(--line); box-shadow: 0 6px 12px -10px rgba(19,26,34,.25); }
.ws-actionbar .ws-spacer { flex: 1; }
.ws-actionbar-title { display: none; flex-basis: 100%; font-weight: 700; font-size: 14px; line-height: 1.3; }
.ws-actionbar-title small { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink-3); }
.ws-actionbar.stuck .ws-actionbar-title { display: block; }
.ws-mobile-links { display: none; }

.ws-card { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ws-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ws-card-head h3 { font-size: 15.5px; }
.ws-card-sub { font-size: 13.5px; color: var(--ink-3); margin: 3px 0 0; }

/* Fit */
.ws-fit-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; }
.ws-fit-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ws-fit-title h3 { font-size: 16px; }
.ws-fit-verdict { font-size: 14px; color: var(--ink-2); margin: 4px 0 0; }
.ws-fit-level { font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.ws-reqs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ws-reqs-label { font-size: 12px; font-weight: 700; color: var(--ink-3); margin: 0 0 6px; grid-column: 1 / -1; }
.ws-reqs-label:not(:first-child) { margin-top: 10px; }
.ws-req { font-size: 14px; color: var(--ink); display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.4; }
.ws-req svg { width: 16px; height: 16px; margin-top: 1px; color: var(--good); stroke-width: 2.4; }
.ws-req.missing { color: var(--ink-2); }
.ws-req.missing svg { color: var(--line-2); stroke-width: 2; }
.ws-req .must { white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
.ws-req.have .must { color: var(--good); background: var(--good-soft); }
.ws-reqs { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-pill { font-size: 13px; border-radius: 6px; padding: 3px 9px; background: var(--surface-2); color: var(--ink-2); }

.ws-skeleton { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2));
  background-size: 200% 100%; animation: ws-shimmer 1.4s infinite linear; margin: 8px 0; }
@keyframes ws-shimmer { to { background-position: -200% 0; } }
.ws-skel-card { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ws-skel-card .ws-skeleton:first-child { width: 40px; height: 40px; border-radius: 10px; margin: 0; }

/* Job description */
.ws-desc { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px; }
.ws-desc h3 { color: var(--ink); font-size: 15.5px; margin-bottom: 10px; }
.ws-desc-text { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; max-width: 72ch; }
.ws-desc-text p { margin: 0 0 10px; }
.ws-desc-text h4 { margin: 16px 0 6px; font-size: 14.5px; color: var(--ink); }
.ws-desc-text ul { margin: 0 0 10px; padding-left: 20px; }
.ws-desc-text li { margin: 3px 0; }
.ws-desc-text.clamped { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent); }
.ws-desc-more { margin-top: 6px; }

/* Tailoring progress + result inside the pane */
.ws-run { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface-3); border: 1px solid var(--line); }
.ws-run-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ws-run-head b { font-size: 14.5px; }
.ws-run-head span { font-size: 13px; color: var(--ink-3); }
.ws-run-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 14px; }
.ws-run-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .8s var(--ease); }
.ws-run-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ws-run-steps li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; color: var(--ink-3); font-size: 14px; }
.ws-run-steps li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); justify-self: center; }
.ws-run-steps li.active { color: var(--ink); font-weight: 650; }
.ws-run-steps li.active::before { border-color: var(--accent); border-top-color: transparent; animation: ws-spin 0.8s linear infinite; }
.ws-run-steps li.done { color: var(--ink-2); }
.ws-run-steps li.done::before { width: 14px; height: 14px; border: 0; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat; }
@keyframes ws-spin { to { transform: rotate(360deg); } }
.ws-result { margin-top: 18px; padding: 20px; border: 1px solid color-mix(in srgb, var(--good) 45%, var(--line)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--good-soft) 55%, var(--surface)); animation: ws-in .25s var(--ease); }
.ws-result-title { display: flex; align-items: center; gap: 10px; }
.ws-result-title .ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; }
.ws-result-title .ok svg { width: 15px; height: 15px; stroke-width: 2.6; }
.ws-result h3 { font-size: 16.5px; }
.ws-result-delta { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; flex-wrap: wrap; }
.ws-result-delta .from { font-size: 20px; color: var(--ink-3); font-weight: 700; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--line-2); }
.ws-result-delta .to { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.ws-result-delta svg { color: var(--ink-3); }
.ws-result-score { font-size: 13.5px; color: var(--ink-2); margin: 0 0 16px; max-width: 62ch; }
.ws-result .ws-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--good) 20%, var(--line)); }
.ws-result-score { text-wrap: pretty; }
.ws-dl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-dl select { border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); padding: 0 10px;
  height: 40px; font-size: 14px; font-weight: 600; }

/* People to contact */
.ws-people-list { display: grid; gap: 12px; margin-top: 14px; }
.ws-person { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface-3); }
.ws-person-top { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ws-person-name { font-weight: 700; font-size: 14.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ws-person-title { font-size: 13px; color: var(--ink-2); }
.ws-person-why { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
.ws-kind { font-size: 11px; font-weight: 800; letter-spacing: .02em; border-radius: 4px; padding: 1px 6px; background: var(--accent-soft); color: var(--accent); }
.ws-kind.recruiter { background: var(--surface-2); color: var(--ink-2); }
.ws-conf { font-size: 12px; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ws-conf::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.ws-conf.high::before { background: var(--good); }
.ws-conf.medium::before { background: var(--warn); }
.ws-person textarea { width: 100%; margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 11px;
  background: var(--surface); font-size: 14px; line-height: 1.5; resize: none; min-height: 84px; border-radius: 10px; overflow: hidden; field-sizing: content; }
.ws-person textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ws-person-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.ws-note-wrap { position: relative; }
.ws-note-wrap textarea { padding-bottom: 24px; }
.ws-chars { position: absolute; right: 10px; bottom: 7px; font-size: 11.5px; color: var(--ink-3); pointer-events: none; }
.ws-chars.over { color: var(--bad); font-weight: 700; }
.ws-people-hint { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.5; }

/* ---------- Applications ---------- */
.ws-apps-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ws-stats { font-size: 14px; color: var(--ink-3); }
.ws-stats b { color: var(--ink); font-weight: 700; }
.ws-chip .n { color: var(--ink-3); font-weight: 600; margin-left: 5px; }
.ws-chip[aria-pressed="true"] .n { color: inherit; opacity: 0.7; }
.ws-chip:disabled { opacity: 0.45; cursor: default; }
.ws-empty-cta { margin-top: 14px; }
.ws-apps-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ws-apps-tools input { width: 240px; min-height: 36px; padding: 7px 10px; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-chip { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 13px;
  font-weight: 650; color: var(--ink-2); cursor: pointer; }
.ws-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ws-apps-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ws-apps-layout:has(.ws-gaps[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ws-ledger { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1); }
.ws-row:not(.ws-row-head):hover { background: var(--surface-3); }
.ws-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 160px 150px; gap: 14px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line); }
.ws-row:first-child { border-top: 0; }
.ws-row-head { font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--surface-3); padding-top: 9px; padding-bottom: 9px; }
.ws-row-job { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; }
.ws-row-job > div { min-width: 0; }
.ws-row-title { font-weight: 700; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--ink);
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row-title:hover { color: var(--accent); }
.ws-row-sub { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row-score { font-size: 13.5px; color: var(--ink-3); }
.ws-row-score b { color: var(--ink); }
.ws-row-review { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; margin-left: -9px; cursor: pointer; }
.ws-row-review svg { width: 13px; height: 13px; fill: none; stroke: var(--ink-3); stroke-width: 2.2; transform: rotate(-90deg); opacity: 0; transition: opacity .12s; }
.ws-row-review-lbl { display: none; }
.ws-row-review:hover, .ws-row-review:focus-visible { border-color: var(--line); background: var(--surface-2, #f6f8fa); }
.ws-row:hover .ws-row-review svg, .ws-row-review:focus-visible svg { opacity: 1; }
.ws-status-select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 28px 6px 12px;
  font-size: 13px; font-weight: 700; color: var(--st-color, var(--ink-2)); cursor: pointer; width: 100%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%237e8893' stroke-width='1.6'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center; }
.ws-row-dl { display: flex; gap: 6px; justify-content: flex-end; }
.ws-empty { color: var(--ink-3); text-align: center; padding: 44px 20px; }
.ws-empty p { margin: 0 auto; max-width: 42ch; }
.ws-empty-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; margin: 0 auto 12px; color: var(--ink-3); }
.ws-empty-icon svg { width: 22px; height: 22px; }

.ws-gaps { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.ws-gaps h2 { font-size: 15px; margin-bottom: 10px; }
.ws-gaps-intro { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 12px; }
.ws-gaps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-gaps li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ws-gaps li span:last-child { color: var(--ink-3); white-space: nowrap; }

/* Saved */
.ws-saved { display: grid; gap: 8px; max-width: 820px; }
.ws-saved-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-1); }

/* ---------- Drawer ---------- */
.ws-drawer-scrim { position: fixed; inset: 0; background: rgba(15, 20, 26, 0.24); backdrop-filter: blur(2px); z-index: 40; animation: ws-fade .2s; }
@keyframes ws-fade { from { opacity: 0; } }
.ws-saved-note { font-size: 12.5px; color: var(--good); margin-left: 8px; }
.ws-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: var(--surface); z-index: 41;
  overflow: auto; box-shadow: var(--shadow-pop); padding: 24px 28px 40px; animation: ws-slide .24s var(--ease); }
@keyframes ws-slide { from { transform: translateX(24px); opacity: 0; } }
.ws-drawer:focus { outline: none; }
.ws-drawer-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; color: var(--ink-2); }
.ws-drawer h2 { font-size: 21px; padding-right: 70px; }
.ws-drawer h3 { font-size: 14.5px; margin: 26px 0 10px; }
.ws-change { padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ws-change-where { font-size: 12.5px; color: var(--ink-2); font-weight: 700; margin-bottom: 6px; }
.ws-change-where span { color: var(--ink-3); font-weight: 600; }
.ws-change-now mark { background: var(--good-soft); color: inherit; border-radius: 3px; padding: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ws-change-was { color: var(--ink-3); }
.ws-change-was, .ws-change-now { display: grid; grid-template-columns: 40px 1fr; gap: 8px; line-height: 1.55; }
.ws-change-was { margin-bottom: 4px; }
.ws-change-was::before { content: 'Was'; font-weight: 700; font-size: 12px; color: var(--ink-3); }
.ws-change-now::before { content: 'Now'; font-weight: 700; font-size: 12px; color: var(--good); }
.ws-drawer textarea { width: 100%; min-height: 90px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px;
  background: var(--surface); }
.ws-drawer .ws-desc-text { white-space: pre-line; }

/* Dialog + toast */
.ws-dialog { border: 0; border-radius: 16px; padding: 0; width: min(640px, calc(100% - 32px)); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop); }
.ws-dialog::backdrop { background: rgba(15, 20, 26, 0.4); backdrop-filter: blur(2px); }
.ws-dialog form { padding: 24px 26px; display: grid; gap: 14px; }
.ws-dialog h2 { font-size: 19px; }
.ws-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ws-error { color: var(--bad); font-size: 14px; margin: 0; }
.ws-fit-blocker { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 500; }
.ws-fit-blocker svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ws-fit-blocker span { flex: 1; }
.ws-onboard .ws-error { color: var(--bad); margin: 12px 0 0; }
.ws-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface);
  padding: 11px 16px 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 60; box-shadow: var(--shadow-pop);
  max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; animation: ws-toast .22s var(--ease); }
.ws-toast svg { width: 16px; height: 16px; color: #8fe0b0; }
@keyframes ws-toast { from { transform: translate(-50%, 8px); opacity: 0; } }

/* ---------- People side rail (wide screens) / card (narrow) ---------- */
.ws-rail { position: sticky; top: 118px; max-height: calc(100vh - 136px); overflow: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.ws-rail-inner { padding: 16px 16px 18px; animation: ws-in .22s var(--ease); }
.ws-rail-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.ws-rail-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.ws-rail-label svg { width: 15px; height: 15px; }
.ws-rail-co { font-size: 15.5px; font-weight: 700; }
#ws-people .ws-rail-head { margin-bottom: 12px; }
.ws-hero { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: linear-gradient(180deg, var(--accent-soft), var(--surface) 64px); }
.ws-hero-top { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: center; }
.ws-avatar.xl, .ws-photo.xl { width: 60px; height: 60px; border-radius: 50%; font-size: 20px; }
.ws-photo { object-fit: cover; display: block; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.ws-photo.sm { width: 32px; height: 32px; border-radius: 50%; }
.ws-shimmer { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: ws-shimmer 1.4s infinite linear; border: 0; }
.ws-hero-name { font-weight: 800; font-size: 16.5px; letter-spacing: -0.015em; line-height: 1.25; }
.ws-hero-title { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.ws-hero-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; align-items: center; }
.ws-hero-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.ws-hero-facts span + span::before { content: '·'; margin-right: 12px; color: var(--ink-3); }
.ws-hero-prev { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.ws-hero-rows { margin: 12px 0 0; border-top: 1px solid var(--line); }
.ws-hero-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ws-hero-row > svg { width: 16px; height: 16px; color: var(--ink-3); }
.ws-hero-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-masked { color: var(--ink-3); }
.ws-icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-2); cursor: pointer; text-decoration: none; }
.ws-icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.ws-icon-btn svg { width: 15px; height: 15px; }
.ws-reveal { margin-top: 12px; background: var(--ink); color: var(--surface); }
.ws-reveal:hover:not([disabled]) { filter: brightness(1.15); }
.ws-lock { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--ink-3); }
.ws-lock svg { width: 14px; height: 14px; }
.ws-blur { filter: blur(3.5px); user-select: none; }
.ws-verified { font-size: 11.5px; font-weight: 700; color: var(--good); background: var(--good-soft); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.ws-hero-row { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
.ws-reveal-note { font-size: 12px; color: var(--ink-2); margin-top: 6px; text-wrap: balance; }
.ws-note-block { margin-top: 14px; display: grid; gap: 8px; }
.ws-note-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ws-note-label span { color: var(--ink-3); font-weight: 600; }
.ws-note-block textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px 24px; background: var(--surface);
  font-size: 13.5px; line-height: 1.5; resize: none; overflow: hidden; min-height: 96px; }
.ws-note-block textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ws-others { margin-top: 16px; display: grid; gap: 6px; }
.ws-other { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); cursor: pointer; }
.ws-other:hover { border-color: var(--line-2); background: var(--surface-3); }
.ws-other b { display: block; font-size: 13.5px; }
.ws-other small { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-other .ws-kind { white-space: nowrap; }
.ws-company { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; color: var(--ink-2); }
.ws-company-top { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; }
.ws-company-top b { display: block; color: var(--ink); font-size: 14px; }
.ws-company-top span { font-size: 12px; color: var(--ink-3); text-transform: capitalize; }
.ws-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.ws-company-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.ws-company-facts span { background: var(--surface-2); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.ws-company p { margin: 0; line-height: 1.5; }
.ws-meta-accent { background: var(--accent-soft); color: var(--accent); }
.ws-meta-accent svg { color: var(--accent); }

/* ---------- Cover letter ---------- */
.ws-cover { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ws-cover-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ws-cover-head > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-cover-head h3 { font-size: 15.5px; }
.ws-chip-note { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; }
.ws-cover-why { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.ws-cover-text { width: 100%; max-width: 68ch; display: block; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: var(--surface);
  font: 15px/1.7 var(--font); color: var(--ink); resize: none; overflow: hidden; min-height: 220px; margin-bottom: 10px; }
.ws-cover-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.ws-cover-saved { font-size: 12.5px; color: var(--good); font-weight: 600; }
.ws-cover-offer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ws-cover-offer b { display: block; font-size: 14.5px; }
.ws-cover-offer span { font-size: 13px; color: var(--ink-3); }

/* ---------- LinkedIn review ---------- */
.ws-li { display: grid; gap: 14px; }
.ws-li-intro { max-width: 760px; }
.ws-li-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.ws-li-side { position: sticky; top: 118px; order: 2; }
.ws-li-main { display: grid; gap: 14px; min-width: 0; }
.ws-li-side .ws-li-kw { grid-template-columns: 1fr; }
.ws-li-side .ws-fit-top { grid-template-columns: 76px minmax(0, 1fr); }
.ws-li-side h3 { font-size: 15px; line-height: 1.35; }
.ws-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.ws-clamp.open { -webkit-line-clamp: unset; }
.ws-li-donebar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ws-li-donebar .ws-run-bar { margin: 8px 0 0; }
.ws-ring.lg b { font-size: 18px; }
.ws-li-intro h2 { font-size: 24px; letter-spacing: -0.02em; }
.ws-li-intro p { color: var(--ink-2); margin: 6px 0 0; max-width: 70ch; }
.ws-li .ws-card { margin-top: 0; }
.ws-li-summary .ws-fit-top { align-items: start; }
.ws-li-lock .ws-run-bar { margin: 10px 0 8px; }
.ws-li-progress { display: flex; align-items: baseline; gap: 8px; }
.ws-li-progress b { font-size: 22px; letter-spacing: -0.02em; }
.ws-li-progress span { color: var(--ink-3); font-weight: 600; font-size: 13.5px; }
.ws-li-upload { background: var(--surface); border: 1px dashed var(--line-2); border-radius: 14px; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ws-li-upload.again { border-style: solid; background: var(--surface-3); }
.ws-li-upload h3 { font-size: 16px; }
.ws-li-upload ol { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.ws-li-upload-actions { display: grid; gap: 6px; justify-items: stretch; }
.ws-li-paste { grid-column: 1 / -1; display: grid; gap: 8px; }
.ws-li-paste textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; background: var(--surface); }
.ws-li-kw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ws-li-kw-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 60px 52px; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.ws-li-kw-row svg { width: 15px; height: 15px; color: var(--line-2); stroke-width: 2.2; }
.ws-li-kw-row.have svg { color: var(--good); }
.ws-li-kw-row.have span { color: var(--ink); }
.ws-li-kw-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-li-kw-row i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--w), var(--surface-2) var(--w)); }
.ws-li-kw-row small { font-size: 12px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.ws-li-sec h4 { font-size: 14px; margin: 16px 0 2px; }
.ws-li-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ws-li-sec-head > div { display: flex; align-items: center; gap: 10px; }
.ws-li-step { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 800; }
.ws-li-done { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ws-li-done input { width: 16px; height: 16px; accent-color: var(--good); }
.ws-li-was, .ws-li-new { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; margin-top: 10px; }
.ws-li-was { color: var(--ink-3); }
.ws-li-was span, .ws-li-new span { font-size: 12px; font-weight: 700; padding-top: 2px; }
.ws-li-new span { color: var(--good); }
.ws-li-new { font-weight: 600; }
.ws-li-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ws-li-actions small { font-size: 12.5px; color: var(--ink-3); }
.ws-li-role { padding: 16px 0 4px; border-top: 1px solid var(--line); margin-top: 14px; }
.ws-li-role-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ws-li-role-head b { font-size: 15px; }
.ws-li-role-head span { color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.ws-li-role-head .ws-li-done { margin-left: auto; }
.ws-li-title-change { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; font-size: 14px; }
.ws-li-title-change svg { color: var(--ink-3); width: 16px; height: 16px; }
.ws-li-was-inline { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.ws-li-new-inline { font-weight: 700; background: var(--good-soft); color: var(--ink); border-radius: 6px; padding: 1px 7px; }
.ws-li-desc { white-space: pre-line; font-size: 14px; line-height: 1.65; color: var(--ink); background: var(--surface-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.ws-pill-strong { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.ws-li-skills { display: grid; gap: 6px; margin-top: 8px; }
.ws-li-skill { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: 4px 14px; font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ws-li-skill-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-li-skill-name b { font-weight: 700; }
.ws-li-skill-name .ws-icon-btn { width: 26px; height: 26px; }
.ws-li-skill-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ws-li-skill-meta .ws-pill { font-size: 12px; padding: 1px 7px; }
.ws-li-skill-meta small { flex-basis: 100%; color: var(--ink-2); font-size: 12.5px; }
.ws-li-skill > small { color: var(--ink-2); font-size: 12.5px; }
.ws-li-kw-rest { border-top: 0; margin-top: 6px; padding-top: 0; }
.ws-li-more summary { cursor: pointer; color: var(--accent); font-weight: 650; font-size: 13.5px; margin-top: 10px; }
.ws-li-otw { display: grid; gap: 10px; margin-top: 10px; }
.ws-li-otw > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-li-otw > div > span:first-child { width: 110px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.ws-li-check { display: grid; gap: 8px; margin-top: 10px; }
.ws-li-check .ws-li-done { font-weight: 500; color: var(--ink); align-items: flex-start; }
.ws-li-check .ws-li-done input { margin-top: 2px; }
.ws-count-new { background: var(--accent); color: var(--accent-ink); }
.ws-foot { max-width: 1280px; margin: 0 auto; padding: 18px 24px 28px; font-size: 12px; color: var(--ink-3); }

@media (min-width: 1320px) {
  .ws-top-inner, .ws-tabs, .ws-panel, .ws-foot { max-width: 1520px; }
  .ws-split { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) 330px; }
  .ws-split:has(.ws-rail[hidden]) { grid-template-columns: minmax(320px, 410px) minmax(0, 1fr); }
  .ws-split:has(.ws-rail.collapsed:not([hidden])) { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr) 52px; }
}

/* ---------- Detail cards (hover / focus / tap) ---------- */
.ws-tip { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; margin-left: 2px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-3); cursor: help; vertical-align: -4px; }
.ws-tip:hover, .ws-tip:focus-visible, .ws-tip[aria-describedby] { color: var(--accent); background: var(--accent-soft); }
.ws-tip svg { width: 15px; height: 15px; stroke-width: 2; }
/* One look in both themes: a dark, high-contrast card with a title, never the theme's pale "ink" in dark mode */
.ws-tipcard { position: fixed; z-index: 400; max-width: 320px; padding: 13px 15px 14px; border-radius: 12px;
  background: #141b24; color: #e9edf2; border: 1px solid rgba(255,255,255,.08);
  font-size: 13.5px; line-height: 1.55; font-weight: 450; box-shadow: 0 10px 34px rgba(8, 12, 18, .32), 0 2px 6px rgba(8, 12, 18, .18);
  pointer-events: none; animation: ws-tip .14s var(--ease); }
.ws-tipcard-head { display: block; font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 4px; letter-spacing: -0.005em; }
.ws-tipcard li { margin-top: 2px; }
@media (prefers-color-scheme: dark) { .ws-tipcard { background: #26303c; border-color: rgba(255,255,255,.14); } }
.ws-lock[data-tip] { cursor: help; }
.ws-tipcard p { margin: 0; }
.ws-tipcard p + p, .ws-tipcard p + ul { margin-top: 6px; }
.ws-tipcard ul { margin: 0; padding-left: 16px; }
@keyframes ws-tip { from { opacity: 0; transform: translateY(3px); } }
.ws-li-why { font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border-radius: 6px; padding: 1px 7px; }
.ws-result-score .ws-tip, .ws-reveal-note .ws-tip, .ws-people-hint .ws-tip, .ws-list-meta .ws-tip { vertical-align: -5px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .ws-li-grid { grid-template-columns: 1fr; }
  .ws-li-side { position: static; order: 0; }
}
@media (max-width: 1080px) {
  .ws-search { grid-template-columns: 1fr 1fr; gap: 0; }
  .ws-search .ws-field-what { grid-column: 1 / -1; border-left: 0; border-bottom: 1px solid var(--line); }
  .ws-search .ws-field-where { border-left: 0; }
  .ws-search .ws-field-days { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .ws-search .ws-field-sort { border-top: 1px solid var(--line); }
  .ws-search .ws-field-days { grid-column: 1; border-left: 0; }
  .ws-search-go { grid-column: 1 / -1; margin-top: 6px; }
  .ws-apps-layout { grid-template-columns: minmax(0, 1fr); }
  .ws-row { grid-template-columns: minmax(0, 1fr) 150px 180px; }
  .ws-row-score { display: none; }
  .ws-find-aux .ws-hint { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .ws-top-inner, .ws-tabs, .ws-panel { padding-left: 16px; padding-right: 16px; }
  .ws-top-inner { height: 56px; }
  .ws-runs { display: none; }
  .ws-search .ws-field-where { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .ws-search .ws-field-days { grid-column: 1; border-top: 0; }
  .ws-search .ws-field-sort { border-top: 0; }
  .ws-find-aux .ws-btn { flex: 1 1 100%; }
  .ws-btn { height: 44px; }
  .ws-btn-sm { height: 38px; }
  .ws-actionbar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,0.06); z-index: 5; }
  .ws-actionbar .ws-btn-primary, .ws-actionbar #ws-tailor-btn { flex: 1; }
  .ws-actionbar a.ws-btn, .ws-actionbar #ws-similar-btn, .ws-actionbar .ws-spacer { display: none; }
  .ws-mobile-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .ws-mobile-links .ws-link { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); }
  .ws-actionbar.stuck .ws-actionbar-title { display: none; }
  .ws-row-title { white-space: normal; }
  .ws-steps { grid-template-columns: 1fr; }
  .ws-resume-chip > span { max-width: 150px; }
  .ws-brand-sub { display: none; }
  .ws-split { grid-template-columns: minmax(0, 1fr); }
  .ws-job { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .ws-job .ws-avatar { width: 36px; height: 36px; font-size: 13px; }
  .ws-detail { position: fixed; inset: 0; top: 0; max-height: none; border-radius: 0; z-index: 30; display: none; border: 0; }
  .ws-detail.open { display: block; }
  .ws-detail-empty { display: none; }
  .ws-detail-back { display: inline-flex; margin: 10px 0 0 8px; }
  .ws-detail-inner { padding: 8px 16px 110px; }
  .ws-detail h2 { font-size: 21px; }
  .ws-detail-head { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .ws-detail-head .ws-avatar { width: 44px; height: 44px; font-size: 15px; }
  .ws-reqs-cols { grid-template-columns: 1fr; }
  .ws-fit-top { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .ws-ring.lg { width: 64px; height: 64px; }
  .ws-ring.lg b { font-size: 18px; }
  .ws-card { padding: 16px; }
  .ws-row, .ws-row-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ws-row-head { display: none; }
  .ws-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .ws-row-job { grid-column: 1 / -1; }
  .ws-row > div:nth-child(3) { padding-left: 44px; }
  .ws-row-score:has(.ws-row-review) { display: block; grid-column: 1 / -1; padding-left: 44px; margin: -4px 0 -2px; }
  .ws-row-review svg { opacity: 1; }
  .ws-row-review-lbl { display: inline; color: var(--accent, #2747a6); font-weight: 600; margin-left: 6px; }
  .ws-row-dl { justify-content: flex-end; }
  .ws-status-select { width: auto; }
  .ws-apps-tools, .ws-apps-tools input { width: 100%; }
  .ws-stats { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }
  .ws-drawer { padding: 20px 18px 36px; }
  .ws-dl > .ws-btn { flex: 1 1 auto; }
  .ws-dl select { flex: 1 1 100%; }
  .ws-person-top { grid-template-columns: 32px minmax(0, 1fr); }
  .ws-person-top .ws-conf { grid-column: 2; }
  .ws-li-upload { grid-template-columns: 1fr; }
  .ws-li-grid { grid-template-columns: 1fr; }
  .ws-li-side { position: static; order: 0; }
  #ws-people { border: 0; padding: 0; background: transparent; }
  .ws-hero-row { min-height: 44px; }
  .ws-icon-btn { width: 40px; height: 40px; }
  .ws-detail-inner { padding-bottom: 130px; }
  .ws-li-kw { grid-template-columns: 1fr; }
  .ws-li-skill { grid-template-columns: 1fr; }
  .ws-li-skill small { grid-column: 1; }
  .ws-li-role-head .ws-li-done { margin-left: 0; }
  .ws-foot { padding-bottom: 96px; }
  .ws-tabs { overflow-x: auto; scrollbar-width: none; gap: 0; }
  .ws-fit-verdict .sep { display: none; }          /* two short lines instead of a dot stranded at a wrap */
  .ws-fit-verdict .nw { display: block; }
  .ws-tab { padding-left: 8px; padding-right: 8px; font-size: 14.5px; }
  .ws-tab .ws-count { margin-left: 3px; }
  .ws-tab .ws-count-new { font-size: 0; width: 7px; height: 7px; min-width: 0; padding: 0; border-radius: 50%; vertical-align: 6px; }
}
@media (max-width: 380px) { .ws-tab { padding-left: 6px; padding-right: 6px; font-size: 14px; } }
.nw { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ fit card: tailoring adds */
.ws-req.add svg { color: var(--accent); stroke-width: 2.4; }
.ws-req .must.key { color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------------------ review: what tailoring changed */
.ws-noscroll { overflow: hidden; }
.ws-review { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; }
.ws-review[hidden] { display: none; }
.ws-rv-bar { display: flex; align-items: center; gap: 14px; padding: 10px 24px; min-height: 64px; border-bottom: 1px solid var(--line);
  background: var(--surface); flex: none; }
.ws-rv-close { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; color: var(--ink-2); }
.ws-rv-close svg, .ws-rv-undo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ws-rv-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ws-rv-title b { font-size: 16px; letter-spacing: -0.01em; }
.ws-rv-title span { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-rv-dl .ws-dl { margin: 0; flex-wrap: nowrap; }
.ws-rv-body { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 320px minmax(0, 820px); justify-content: center;
  gap: 32px; padding: 28px 24px 80px; align-items: start; }
.ws-rv-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
.ws-rv-score { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); }
.ws-ring.xl { width: 84px; height: 84px; }
.ws-ring.xl::before { width: calc(100% - 12px); height: calc(100% - 12px); }
.ws-ring.xl b { font-size: 21px; }
.ws-rv-label { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.ws-rv-from { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.ws-rv-from s { text-decoration-color: var(--line-2); }
.ws-rv-stats { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.ws-rv-hint { margin: -6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ws-rv-kwbox { display: flex; flex-direction: column; gap: 14px; }
.ws-rv-kwbox > summary { font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; padding: 10px 0 0; border-top: 1px solid var(--line); }
.ws-rv-kwbox > summary::-webkit-details-marker { display: none; }
.ws-rv-kwbox > summary span { color: var(--ink-3); font-weight: 600; margin-left: 4px; }
.ws-rv-kwbox[open] > summary svg { transform: rotate(180deg); }
.ws-rv-kwbox .ws-rv-kwgroup { margin-top: 12px; }
.ws-rv-kwgroup { border-top: 1px solid var(--line); padding-top: 12px; }
.ws-rv-kwhead { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; display: flex; gap: 6px; }
.ws-rv-kwhead span { color: var(--ink-3); font-weight: 600; }
.ws-rv-kwlist { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-rv-kw { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13px; line-height: 1.2; padding: 5px 9px 5px 7px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.ws-rv-kw svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; }
.ws-rv-kw small { font-size: 11px; color: var(--warn); font-weight: 700; margin-left: 2px; }
.ws-rv-kwgroup.added .ws-rv-kw { background: var(--good-soft); border-color: transparent; color: var(--good); font-weight: 600; }
.ws-rv-kwgroup.had .ws-rv-kw svg { color: var(--ink-3); }
.ws-rv-kwgroup.missing .ws-rv-kw { color: var(--ink-2); border-style: dashed; }
.ws-rv-kw:hover { border-color: var(--line-2); }

/* the page */
.ws-paper { background: #fff; color: #1d232b; border-radius: 6px; padding: 48px 56px 56px; min-height: 900px;
  box-shadow: 0 1px 2px rgba(19,26,34,.06), 0 12px 40px rgba(19,26,34,.10); font-size: 14px; line-height: 1.55; }
.ws-paper header { text-align: center; margin-bottom: 18px; }
.ws-paper header h3 { font-size: 24px; margin: 0; color: #1f3a5f; letter-spacing: -0.01em; }
.ws-paper header p { margin: 4px 0 0; font-size: 12.5px; color: #5b6673; }
.ws-rv-sec { margin-top: 18px; }
.ws-rv-sec h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #1f3a5f;
  padding-bottom: 4px; border-bottom: 1.5px solid #1f3a5f; }
.ws-paper p { margin: 0; }
.ws-paper ul { list-style: none; margin: 4px 0 0; padding: 0; }
.ws-rv-role { margin-top: 12px; }
.ws-rv-role-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ws-rv-role-head b { font-size: 14.5px; }
.ws-rv-role-head span { color: #5b6673; }
.ws-rv-role-head em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #5b6673; white-space: nowrap; }
.ws-rv-line { position: relative; padding: 3px 34px 3px 16px; margin: 1px -10px 1px -10px; border-radius: 6px; }
.ws-paper ul .ws-rv-line::before { content: ''; position: absolute; left: 4px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #1d232b; }
.ws-rv-line.changed { background: rgba(31, 122, 77, 0.06); box-shadow: inset 2px 0 0 #2f9e68; }
.ws-rv-line.added { background: rgba(31, 122, 77, 0.10); }
.ws-rv-line ins { text-decoration: none; background: rgba(47, 158, 104, 0.20); color: #0f5132; border-radius: 3px; padding: 0 2px; }
.ws-rv-line del { color: #b04848; text-decoration-color: rgba(176, 72, 72, .6); opacity: .75; font-size: .94em; }
.ws-rv-was { margin-top: 3px; font-size: 12.5px; color: #6b7480; }
.ws-rv-was summary { cursor: pointer; color: #5b6673; font-weight: 600; width: max-content; }
.ws-rv-was[open] { padding-bottom: 2px; }
.ws-rv-new { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: #2f9e68; border-radius: 4px; padding: 1px 5px; vertical-align: 1px; margin-right: 2px; }
.ws-rv-kws { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; }
.ws-rv-kws span { font-size: 11.5px; font-weight: 600; color: #1f7a4d; }
.ws-rv-undo { position: absolute; top: 3px; right: 4px; width: 26px; height: 26px; border-radius: 6px; border: 1px solid #d5dbe1;
  background: #fff; color: #5b6673; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s; padding: 0; }
.ws-rv-undo svg { width: 14px; height: 14px; }
.ws-rv-line:hover .ws-rv-undo, .ws-rv-undo:focus-visible, .ws-rv-skill:hover .ws-rv-undo { opacity: 1; }
.ws-rv-undo:hover { color: #a43a3a; border-color: #e3b5b5; background: #fbefef; }
.ws-rv-line.undone .ws-rv-text { color: #8a939c; }
.ws-rv-meta { display: block; font-size: 12px; color: #8a939c; margin-top: 2px; }
.ws-rv-restore { font-size: 12px; color: #2446a6; }
.ws-rv-skillrow { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.ws-rv-skillrow b { font-size: 13px; }
.ws-rv-skillrow > span { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ws-rv-skill { position: relative; font-size: 13px; }
.ws-rv-skill:not(:last-child)::after { content: ','; }
.ws-rv-skill.added { background: rgba(47, 158, 104, 0.18); color: #0f5132; border-radius: 4px; padding: 0 4px; padding-right: 22px; }
.ws-rv-skill.added::after { content: ''; }
.ws-rv-skill .ws-rv-undo { top: -2px; right: -2px; width: 22px; height: 22px; border: 0; background: transparent; }
.ws-rv-skillrow.undone { color: #8a939c; }
.ws-rv-plain { white-space: normal; }
.ws-rv-hit { outline: 2px solid #2446a6; outline-offset: 2px; transition: outline-color .3s; }
.ws-rv-dl-side { display: none; }
.ws-rv-dl-side .ws-dl { margin: 0; }
@media (max-width: 1080px) { .ws-rv-dl-side { display: block; } }
.ws-drawer-review { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-3); font-size: 14px; color: var(--ink-2); }
.ws-drawer-review b { color: var(--ink); }

@media (max-width: 1080px) {
  .ws-rv-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 16px 80px; }
  .ws-rv-side { position: static; }
  .ws-rv-dl { display: none; }
}
@media (max-width: 760px) {
  .ws-rv-bar { padding: 8px 12px; min-height: 56px; }
  .ws-paper { padding: 24px 18px 32px; min-height: 0; font-size: 13.5px; }
  .ws-rv-undo { opacity: 1; }
  .ws-rv-skillrow { grid-template-columns: 1fr; gap: 2px; }
  .ws-rv-role-head em { margin-left: 0; width: 100%; }
}


/* ------------------------------------------------------------------ result card (v2) */
.ws-result { margin-top: 18px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: var(--shadow); position: relative; }
.ws-result::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 3px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 40%, var(--accent))); }
.ws-result-head { display: flex; align-items: center; gap: 10px; }
.ws-result-head .ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; flex: none; }
.ws-result-head .ok svg { width: 14px; height: 14px; stroke-width: 2.8; }
.ws-result-head h3 { font-size: 16px; margin: 0; flex: 1; }
.ws-result-time { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ws-result-body { display: flex; align-items: center; gap: 28px; margin: 18px 0 20px; flex-wrap: wrap; }
.ws-result-scorebox { display: flex; flex-direction: column; gap: 2px; padding-right: 28px; border-right: 1px solid var(--line); }
.ws-result-delta { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.ws-result-delta .from { font-size: 18px; color: var(--ink-3); font-weight: 700; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--line-2); }
.ws-result-delta svg { width: 16px; height: 16px; color: var(--ink-3); align-self: center; }
.ws-result-delta .to { font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -0.035em; color: var(--good); }
.ws-result-label { font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 2px; }
.ws-result-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 4px 26px; }
.ws-result-stats li { display: flex; flex-direction: column; }
.ws-result-stats b { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); }
.ws-result-stats span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.ws-result-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.ws-result-actions .ws-spacer { flex: 1; }
.ws-result-actions .ws-btn-quiet svg { width: 14px; height: 14px; margin-left: 2px; }

/* download menu */
.ws-dlmenu { position: relative; display: inline-flex; }
.ws-dlmenu > .ws-btn { gap: 7px; }
.ws-dlmenu > .ws-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws-dlmenu > .ws-btn .chev { width: 14px; height: 14px; margin-left: -2px; opacity: .7; transition: transform .15s; }
.ws-dlmenu > .ws-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ws-dlpop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 80; width: 280px; padding: 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 10px; }
.ws-dlpop[hidden] { display: none; }
.ws-dlpop-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; }
.ws-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; gap: 3px; border-radius: 10px; background: var(--surface-2); }
.ws-seg button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.ws-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(19,26,34,.12); }
.ws-dlpop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ws-rv-dl .ws-dlpop, .ws-rv-bar .ws-dlpop { left: auto; right: 0; }

/* help button + guided tours */
.ws-help { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ws-help svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ws-help:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ws-tour-spot { position: fixed; z-index: 500; border-radius: 12px; pointer-events: none; transition: all .22s var(--ease);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(9, 13, 19, .55); }
.ws-tour-card { position: fixed; z-index: 501; width: 320px; max-width: calc(100vw - 32px); padding: 16px 18px 14px; border-radius: 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(9, 13, 19, .35);
  transition: top .22s var(--ease), left .22s var(--ease); }
.ws-tour-step { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.ws-tour-card h4 { margin: 4px 0 4px; font-size: 16px; letter-spacing: -0.01em; }
.ws-tour-card p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.ws-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ws-tour-dots { display: flex; gap: 5px; flex: 1; }
.ws-tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.ws-tour-dots i.on { background: var(--accent); width: 16px; border-radius: 99px; }
.ws-tour-skip { font: inherit; font-size: 13px; color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: 6px 4px; }
@media (max-width: 760px) {
  .ws-result-body { gap: 16px; }
  .ws-result-scorebox { padding-right: 0; border-right: 0; }
  .ws-result-stats { grid-template-columns: repeat(2, auto); }
  .ws-result-actions .ws-spacer { display: none; }
  .ws-result-actions > .ws-btn-primary { flex: 1; }
  .ws-help span { display: none; }
  .ws-help { padding: 0 8px; }
  .ws-tour-card { left: 16px !important; right: 16px; width: auto; top: auto !important; bottom: 16px; }
}
.ws-runs[data-tip] { cursor: help; }

/* ------------------------------------------------------------------ review v2: reads like a résumé */
.ws-rv-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ws-rv-mode { align-self: center; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); }
.ws-rv-mode button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.ws-rv-mode button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(19,26,34,.12); }
.ws-paper { padding: 52px 64px 60px; }
.ws-rv-line { margin: 1px 0; padding: 2px 0 2px 14px; border-radius: 0; position: relative; }
.ws-paper ul .ws-rv-line::before { left: 2px; top: 10px; }
.ws-rv-line.changed, .ws-rv-line.added { background: none; box-shadow: none; }
.ws-rv-line.changed::after { content: ''; position: absolute; left: -16px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: #2f9e68; }
p.ws-rv-line { padding-left: 0; }
.ws-rv-line mark.ins, .ws-rv-skill mark.ins { background: rgba(47, 158, 104, 0.17); color: inherit; border-radius: 3px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ws-rv-line.added .ws-rv-text { background: rgba(47, 158, 104, 0.10); border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ws-rv-line[data-tip] { cursor: default; }
/* undo lives in the page's right margin: always visible, quiet until hovered */
.ws-rv-undo { top: 1px; right: -46px; opacity: .5; width: 28px; height: 28px; border-color: #e1e6eb; }
.ws-rv-line:hover .ws-rv-undo, .ws-rv-undo:hover, .ws-rv-undo:focus-visible { opacity: 1; }
.ws-rv-skill { white-space: nowrap; }
.ws-rv-skill:not(:last-child)::after { content: none; }
.ws-rv-skill.added { background: none; padding: 0; }
.ws-rv-skillx { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 -1px 0 3px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: #8a939c; cursor: pointer; vertical-align: -3px; }
.ws-rv-skillx svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ws-rv-skillx:hover { color: #a43a3a; background: #fbefef; }
.ws-rv-skillrow > span { display: block; line-height: 1.75; }
.ws-rv-nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 22px; }
.ws-rv-nums div { display: flex; flex-direction: column; }
.ws-rv-nums b { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.ws-rv-nums span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ws-rv-from { font-size: 13px; }
.ws-rv-kwbox > summary { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.ws-rv-kwbox > summary::after { content: none; }
.ws-rv-kwbox > summary svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-3); stroke-width: 2; transition: transform .15s; }
.ws-rv-kwbox[open] > summary svg { transform: rotate(180deg); }
.ws-rv-kwbox .ws-rv-kwgroup { border-top: 0; padding-top: 0; }
.ws-rv-kwgroup.added .ws-rv-kw svg { stroke-width: 2.8; }
@media (max-width: 1080px) {
  .ws-rv-dl { display: block; }
  .ws-rv-dl .ws-dlmenu > .ws-btn { height: 38px; padding: 0 12px; }
}
@media (max-width: 760px) {
  .ws-paper { padding: 24px 40px 32px 22px; }
  .ws-rv-undo { right: -36px; opacity: .8; width: 26px; height: 26px; }
  .ws-rv-line.changed::after { left: -12px; }
  .ws-rv-mode { align-self: stretch; }
  .ws-rv-nums { gap: 4px 16px; }
}

.ws-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.ws-ring-wrap small { font-size: 11px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.ws-fit-more > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent); margin-top: 12px; width: max-content; }
.ws-fit-more[open] > summary { margin-bottom: 10px; }

.ws-paper header p span { white-space: nowrap; }
.ws-paper header p i { font-style: normal; }
@media (max-width: 640px) { .ws-paper header p i { display: none; } .ws-paper header p span { display: block; } }
.ws-fit-lift { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ws-fit-lift svg { width: 14px; height: 14px; fill: none; stroke: var(--good, #1f7a4d); stroke-width: 2.4; }
.ws-fit-lift b { color: var(--ink); font-weight: 700; }
.ws-job-score { display: inline-flex; flex: none; }
.ws-flag-mode { background: var(--accent-soft); color: var(--accent); }

/* People panel: hide / show */
.ws-rail-head { position: relative; padding-right: 38px; }
.ws-people-hide { position: absolute; top: -3px; right: -2px; border-color: transparent; background: transparent; }
.ws-people-hide:hover { background: var(--surface-2); border-color: var(--line); }
#ws-people .ws-people-hide svg { transform: rotate(180deg); }
.ws-rail.collapsed { overflow: visible; background: transparent; border: 0; box-shadow: none; }
.ws-people-tab { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 14px; font: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); color: var(--ink-2); cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.ws-people-tab:hover, .ws-people-tab:focus-visible { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow); }
.ws-people-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ws-people-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.ws-people-tab-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: 11.5px; font-weight: 750;
  background: var(--accent-soft); color: var(--accent); }
.ws-people-collapsed { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 14px 16px; }
.ws-people-collapsed > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.8; }
.ws-people-collapsed > span:first-of-type { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ws-people-collapsed b { font-size: 14px; }
.ws-people-collapsed small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-people-collapsed:hover { border-color: var(--line-2); }

/* Brand mark (Cut T, ink + coral) */
.ws-brand .tt-mark { width: 24px; height: 24px; flex: none; stroke: none; }
.tt-mark .p { fill: #15181d; } .tt-mark .a { fill: #ff5a3c; }
@media (prefers-color-scheme: dark) { .tt-mark .p { fill: #f1f3f6; } .tt-mark .a { fill: #ff7a5e; } }

/* ===================================================================== Get found (LinkedIn), Oct 28 2026 */
/* Mode switch: Apply (find, applications, saved) | Get found (the tuned profile) */
.ws-mode { display: inline-flex; align-self: center; flex: none; padding: 3px; gap: 2px; margin-right: 14px; border-radius: 10px; background: var(--surface-2); }
.ws-mode-btn { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2); border: 0; background: transparent; border-radius: 8px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ws-mode-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 26, 34, .14); }
.ws-mode-new { font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #ff5a3c; border-radius: 99px; padding: 1px 6px; }
.ws-tabs.found .ws-tab { display: none; }
.ws-tabs.found { padding-top: 8px; padding-bottom: 8px; }

.gf-setup { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; }
.gf-hero h2, .gf-head h2 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.25; }
.gf-hero p { color: var(--ink-2); margin: 6px 0 0; }
.gf-form { display: grid; gap: 14px; padding: 22px 24px; }
.gf-step { display: flex; align-items: center; gap: 10px; }
.gf-step h3 { font-size: 16px; }
.gf-step + .gf-fields { margin-top: -2px; }
.gf-form .gf-step:not(:first-child) { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.gf-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.gf-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gf-source { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; }
.gf-source input { position: absolute; opacity: 0; pointer-events: none; }
.gf-source b { font-size: 14.5px; }
.gf-source span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.gf-source.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gf-source-ext { cursor: default; background: var(--surface-3); }
.gf-source-ext .ws-btn { margin-top: 8px; justify-self: start; }
.gf-source-ext .ws-btn svg, .gf-banner svg, [data-gf-install] svg { width: 16px; height: 16px; }
.gf-captured { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--good-soft); }
.gf-captured > svg { width: 20px; height: 20px; color: var(--good); stroke-width: 2.4; }
.gf-captured b { display: block; font-size: 14px; }
.gf-captured span { font-size: 12.5px; color: var(--ink-2); }
.gf-pdf { justify-self: start; font-size: 13px; }
.gf-run { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.gf-run small { color: var(--ink-3); font-size: 12.5px; }
.gf-run .ws-btn-primary svg { width: 17px; height: 17px; }

.gf-progress { padding: 22px 24px; }
.gf-progress h3 { font-size: 17px; }
.gf-progress ol { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 10px; }
.gf-progress li { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-weight: 600; font-size: 14px; }
.gf-progress li svg { width: 18px; height: 18px; color: var(--good); stroke-width: 2.4; }
.gf-progress li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.gf-progress li.now { color: var(--ink); }
.gf-progress li.now i { border-color: var(--accent); border-right-color: transparent; animation: gf-spin .9s linear infinite; }
.gf-progress li.done { color: var(--ink-2); }
@keyframes gf-spin { to { transform: rotate(360deg); } }

.gf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.gf-head > div:first-child { min-width: 0; flex: 1 1 420px; }
.gf-sub { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.gf-sub .ws-link { margin-left: 8px; font-size: 13.5px; }
.gf-views { width: 260px; flex: none; }
.gf-views button[disabled] { opacity: .45; cursor: not-allowed; }
.gf-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border-radius: 10px; background: var(--accent-soft); color: var(--ink-2); font-size: 13.5px; }
.gf-banner > svg { color: var(--accent); }
.gf-banner span { flex: 1 1 260px; }

.gf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.gf-main { min-width: 0; }
.gf-side { position: sticky; top: 118px; display: grid; gap: 14px; min-width: 0; }
.gf-side .ws-card { margin: 0; }
.gf-side h3 { font-size: 15px; line-height: 1.35; }

/* The rebuilt profile: our own visual language, laid out the way a profile reads */
.gf-profile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); overflow: hidden; }
.gf-profile h3, .gf-profile h4, .gf-profile h5 { margin: 0; }
.gf-cover { height: 96px; background: linear-gradient(120deg, #15181d 0%, #2b3240 55%, #ff5a3c 140%); }
.gf-id { padding: 0 26px 20px; position: relative; }
.gf-avatar { width: 96px; height: 96px; margin-top: -48px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--surface-2); border: 4px solid var(--surface); color: var(--ink-2); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.gf-otw-ring { position: absolute; inset: -4px; border-radius: 50%; border: 4px solid transparent; border-bottom-color: var(--good); border-left-color: var(--good); }
.gf-id-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 10px; }
.gf-id-row > div:first-child { min-width: 0; }
.gf-name { font-size: 22px; letter-spacing: -0.02em; }
.gf-headline { font-size: 15.5px; line-height: 1.5; margin-top: 4px; color: var(--ink); }
.gf-headline span { display: block; }
.gf-loc { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }
.gf-was { display: block; color: var(--ink-3); text-decoration-color: var(--bad); font-weight: 500; font-size: .92em; margin-bottom: 2px; }
.gf-role-body h5 .gf-was { display: inline; margin: 0 6px 0 0; }
mark.gf-kw { background: var(--good-soft); color: inherit; border-radius: 4px; padding: 0 2px; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--good) 45%, transparent); }
.gf-otw { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--good-soft); font-size: 13.5px; }
.gf-otw b { color: var(--good); }
.gf-otw > span { color: var(--ink); font-weight: 600; flex: 1 1 200px; min-width: 0; }
.gf-otw small { color: var(--ink-2); font-weight: 600; }
.gf-otw .gf-tools { margin-left: auto; }
.gf-block { border-top: 1px solid var(--line); padding: 18px 26px 20px; }
.gf-block > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.gf-block h4 { font-size: 17px; letter-spacing: -0.01em; }
.gf-text { font-size: 14.5px; line-height: 1.62; color: var(--ink); }
.gf-text p { margin: 0 0 8px; }
.gf-text p:last-child { margin-bottom: 0; }
.gf-role { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.gf-role + .gf-role { border-top: 1px solid var(--line); }
.gf-co { width: 44px; height: 44px; }
.gf-role-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gf-role-top > div:first-child { min-width: 0; }
.gf-role-body h5 { font-size: 15.5px; line-height: 1.4; }
.gf-role-meta { font-size: 13.5px; color: var(--ink-2); margin: 2px 0 8px; }
.gf-more { margin: 6px 0 0 58px; font-size: 13px; color: var(--ink-3); }
.gf-skill-group { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; }
.gf-label { font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.gf-skill-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.gf-skill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.gf-skill svg { width: 13px; height: 13px; stroke-width: 2.6; }
.gf-skill.top { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.gf-skill.add { border-color: color-mix(in srgb, var(--good) 50%, transparent); background: var(--good-soft); color: var(--good); }
.gf-skill.drop { text-decoration: line-through; color: var(--ink-3); }
.gf-skill.more { border-style: dashed; color: var(--ink-3); }
.gf-profile[data-view="tuned"] .gf-skill.add { color: var(--ink-2); background: var(--surface); border-color: var(--line-2); }

/* Per-section tools: Copy + Done, quiet until hovered on desktop */
.gf-tools { display: inline-flex; gap: 4px; flex: none; }
.gf-tool { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gf-tool:hover { border-color: var(--line-2); color: var(--ink); }
.gf-tool svg { width: 14px; height: 14px; }
.gf-done input { position: absolute; opacity: 0; pointer-events: none; }
.gf-done svg { color: var(--ink-3); stroke-width: 2.4; }
.gf-done.on { background: var(--good-soft); border-color: transparent; color: var(--good); }
.gf-done.on svg { color: var(--good); }
.gf-done:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }

.gf-profile-empty .gf-empty { padding: 28px 26px 30px; display: grid; gap: 10px; justify-items: start; }
.gf-profile-empty h3 { font-size: 17px; }
.gf-profile-empty p { color: var(--ink-2); margin: 0; max-width: 52ch; }

/* Side cards */
.gf-cov-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.gf-cov-delta { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gf-cov-delta .from { color: var(--ink-3); font-weight: 700; }
.gf-cov-delta .to { color: var(--good); font-weight: 800; }
.gf-cov-delta svg { width: 14px; height: 14px; color: var(--ink-3); }
.gf-kws { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.gf-kws li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink-3); }
.gf-kws li svg { width: 15px; height: 15px; color: var(--line-2); stroke-width: 2.2; }
.gf-kws li.have { color: var(--ink); }
.gf-kws li.have svg { color: var(--good); }
.gf-kws li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-kws em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--good); background: var(--good-soft); border-radius: 99px; padding: 1px 7px; }
.gf-kws small { font-size: 12px; color: var(--ink-3); min-width: 18px; text-align: right; }
.gf-next .ws-run-bar { margin: 10px 0 8px; }
.gf-next .ws-btn { margin-top: 10px; }
.gf-seen-num { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.gf-seen-num b { font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.gf-seen-num span { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.gf-seen-num span.up { color: var(--good); }
.gf-seen-num span.down { color: var(--bad); }
.gf-spark { width: 100%; height: 54px; margin-top: 8px; overflow: visible; }
.gf-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.gf-spark circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; cursor: pointer; }
.gf-spark circle:hover { fill: var(--accent); }
.gf-seen-form { display: flex; gap: 8px; margin-top: 12px; }
.gf-seen-form input { flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; height: 34px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; }

/* Install dialog */
.ws-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 20, 26, .42); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; }
.ws-modal-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 24px 26px; box-shadow: var(--shadow-pop); }
.ws-modal-x { position: absolute; top: 12px; right: 12px; }
.gf-install h3 { font-size: 19px; padding-right: 32px; }
.gf-install-steps { margin: 16px 0; padding-left: 20px; display: grid; gap: 12px; font-size: 14.5px; }
.gf-install-steps .ws-btn { margin-right: 6px; }
.gf-install-steps .ws-btn svg { width: 15px; height: 15px; }

@media (max-width: 1080px) {
  .gf-grid { grid-template-columns: minmax(0, 1fr); }
  .gf-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); order: -1; }
}
.gf-after { display: none; }
.gf-side-more { display: grid; gap: 14px; }
@media (max-width: 1080px) {
  .gf-side-more { display: none; }
  .gf-after { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
  .gf-after .ws-card { margin: 0; }
}
@media (max-width: 760px) {
  .ws-mode { margin-right: 8px; }
  .ws-mode-btn { padding: 5px 10px; }
  .gf-hero h2, .gf-head h2 { font-size: 20px; }
  .gf-form { padding: 18px 16px; }
  .gf-fields, .gf-sources { grid-template-columns: minmax(0, 1fr); }
  .gf-views { width: 100%; }
  .gf-side { grid-template-columns: minmax(0, 1fr); }
  .gf-cover { height: 72px; }
  .gf-id { padding: 0 16px 16px; }
  .gf-avatar { width: 76px; height: 76px; margin-top: -38px; font-size: 24px; }
  .gf-id-row, .gf-role-top { flex-direction: column; gap: 8px; }
  .gf-block { padding: 16px 16px 18px; }
  .gf-role { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .gf-co { width: 36px; height: 36px; font-size: 12px; }
  .gf-more { margin-left: 48px; }
  .gf-skill-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gf-tool span { display: inline; }
  .gf-otw .gf-tools { margin-left: 0; }
  .gf-sub .sep { display: none; }
  .gf-sub > span:first-child { display: block; width: 100%; }
  .gf-banner { display: none; }                    /* extensions don't run on phones */
  .gf-head { margin-bottom: 10px; }
}
/* Tools stay quiet until the section is hovered or focused (always shown on touch screens); a done tick stays */
@media (hover: hover) and (min-width: 761px) {
  .gf-profile .gf-tool { opacity: 0; transition: opacity .15s var(--ease); }
  .gf-profile .gf-done.on { opacity: 1; }
  .gf-id-row:hover .gf-tool, .gf-otw:hover .gf-tool, .gf-block > header:hover .gf-tool, .gf-block:hover > header .gf-tool,
  .gf-role:hover .gf-tool, .gf-profile .gf-tool:focus-visible, .gf-profile .gf-tools:focus-within .gf-tool { opacity: 1; }
}

/* Homepage workspaces (Oct 2026): plans, saving */
.ws-runs .ws-btn-sm { height: 30px; padding: 0 11px; font-size: 13px; }
.ws-plans-h { font-size: 20px; margin: 0 32px 4px 0; letter-spacing: -.01em; }
.ws-plans-sub { color: var(--ink-2); margin: 0 0 18px; font-size: 14.5px; }
.ws-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ws-plan { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ws-plan.pick { border: 2px solid var(--accent); }
.ws-plan-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ws-plan-h b { font-size: 15.5px; }
.ws-plan-amt { font-size: 24px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.ws-plan-amt small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ws-plan p { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); flex: 1; }
.ws-plan .ws-btn { width: 100%; justify-content: center; }
#ws-plans .ws-error, .ws-modal .ws-error { margin-top: 12px; }
.ws-save-form { display: flex; gap: 8px; }
.ws-save-form input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; background: var(--surface); color: var(--ink); }
.ws-save-nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.ws-gate .ws-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 760px) {
  .ws-plans { grid-template-columns: 1fr; }
  .ws-save-form { flex-direction: column; }
  .ws-save-form .ws-btn { height: 44px; justify-content: center; }
  .ws-save-nudge { flex-direction: column; align-items: stretch; }
  .ws-save-btn { display: none; }
}

.ws-plan-strip { display: none; }
@media (max-width: 760px) {
  .ws-plan-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 16px; font-size: 13.5px; color: var(--ink-2); background: var(--surface-2); border-top: 1px solid var(--line); }
  .ws-plan-strip b { color: var(--ink); }
  .ws-plan-strip-acts { display: flex; gap: 16px; }
  .ws-plan-strip .ws-link { font-weight: 700; min-height: 32px; }
}

/* ---------- first run (Nov 2026): the first matching minute, shown as what's happening ---------- */
.ws-fr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 16px; box-shadow: var(--shadow); }
.ws-fr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ws-fr-head h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.ws-fr-time { font-size: 13px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ws-fr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ws-fr-step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; color: var(--ink-3); }
.ws-fr-step:last-child { padding-bottom: 4px; }
.ws-fr-step::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.ws-fr-step:last-child::before { display: none; }
.ws-fr-step.done::before { background: var(--good); opacity: .45; }
.ws-fr-step b { display: block; font-size: 14.5px; line-height: 22px; font-weight: 700; }
.ws-fr-step.on b, .ws-fr-step.done b { color: var(--ink); }
.ws-fr-dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); }
.ws-fr-step.on .ws-fr-dot { border-color: var(--accent); border-top-color: transparent; animation: ws-fr-spin .9s linear infinite; }
.ws-fr-step.done .ws-fr-dot { border-color: var(--good); background: var(--good) no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
@keyframes ws-fr-spin { to { transform: rotate(360deg); } }
.ws-fr-body:empty { display: none; }
.ws-fr-body { margin-top: 8px; display: grid; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.ws-fr-file { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.ws-fr-file svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.ws-fr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-fr-chips span { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; animation: ws-fr-in .35s var(--ease) both; }
.ws-fr-where { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-3); }
.ws-fr-where svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ws-fr-count { font-weight: 600; }
.ws-fr-cos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.ws-fr-co { display: flex; align-items: center; gap: 8px; min-width: 0; animation: ws-fr-in .4s var(--ease) both; }
.ws-fr-co .ws-avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }
.ws-fr-co > span:last-child { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.ws-fr-co em { display: block; font-style: normal; font-weight: 500; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
@keyframes ws-fr-in { from { opacity: 0; transform: translateY(4px); } }
.ws-fr-bar { display: block; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; max-width: 260px; }
.ws-fr-bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: var(--accent); animation: ws-fr-slide 1.4s var(--ease) infinite; }
@keyframes ws-fr-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.ws-fr-note { margin: 4px 0 0 34px; font-size: 12.5px; color: var(--ink-3); }
.ws-fr-coach { display: flex; align-items: flex-start; gap: 10px; background: var(--good-soft); color: var(--ink); border-radius: var(--radius); padding: 12px 14px; font-size: 14px; line-height: 1.45; animation: ws-fr-in .4s var(--ease) both; }
.ws-fr-coach svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--good); stroke-width: 2.6; }
.ws-fr-coach b { font-weight: 800; }
.ws-job.ws-job-first { border-color: var(--good); box-shadow: 0 0 0 3px var(--good-soft), var(--shadow); }
.ws-job.ws-job-first[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.ws-plans-manage { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ws-fr *, .ws-fr-coach { animation: none !important; } .ws-fr-step.on .ws-fr-dot { border-top-color: var(--accent); } }
@media (max-width: 760px) {
  .ws-fr { padding: 16px 14px 12px; }
  .ws-fr-cos { grid-template-columns: minmax(0, 1fr); }
  .ws-fr-cos .ws-fr-co:nth-child(n+5) { display: none; }
}
.ws-fr-bar.fill i { animation: none; transition: width .5s var(--ease); }
@media (max-width: 760px) { .ws-fr-mode #ws-search, .ws-fr-mode .ws-find-aux { display: none; } }
/* round 2 */
.ws-fr-stage { padding: 8px; }
.ws-fr-stage .ws-fr { border: 0; box-shadow: none; padding: 18px 18px 8px; }
.ws-fr-stage .ws-fr-head h2 { font-size: 22px; }
.ws-fr-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ws-fr-stack > span { animation: ws-fr-in .4s var(--ease) both; }
.ws-fr-stack .ws-avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.ws-fr-stack em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-3); margin-left: 2px; }
.ws-fr-bar { height: 6px; border-radius: 6px; max-width: 320px; }
.ws-fr-coach > span { display: block; min-width: 0; }
.ws-fr-for { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.ws-fr-for .ws-link { font-size: 13px; }
.ws-job.ws-job-first { border-color: var(--line); box-shadow: var(--shadow-1); }
.ws-job.ws-job-first[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.ws-job-start { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 800; color: #fff; background: var(--good); border-radius: 8px; padding: 6px 11px; }
.ws-fr-stage .ws-fr { max-width: 640px; margin: 0 auto; padding-top: 28px; padding-bottom: 20px; }
.ws-job-start svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- round 4: the first minute on the homepage's stage, one score jump, colour rules ---------- */
/* green means words added to a resume, nothing else; company tiles are neutral */
.ws-avatar { color: var(--ink); background: var(--surface-2); border-color: transparent; }
@media (prefers-color-scheme: dark) { .ws-avatar { color: var(--ink); background: var(--surface-2); border-color: transparent; } }
.ws-flag-pay { background: var(--surface-2); color: var(--ink); }
.ws-mode-new { background: none; color: var(--ink-3); padding: 0; font-weight: 700; }

/* first-run mode: only the logo, the resume chip and Help stay */
.ws-fr-mode #ws-search, .ws-fr-mode .ws-find-aux, .ws-fr-mode .ws-split, .ws-fr-mode .ws-tabs, .ws-fr-mode #ws-runs,
.ws-fr-mode #ws-plan-strip, .ws-fr-mode #ws-rail { display: none !important; }

.ws-fr-stage { margin: 8px 0 0; }
.ws-frs { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: center; min-height: 440px; padding: 40px 48px; border-radius: 28px; color: #fff; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 0%, rgba(120,150,255,.13), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 1.3px) 0 0 / 20px 20px, linear-gradient(180deg, #151a22, #0e1116);
  box-shadow: 0 0 0 1px rgba(15,18,23,.9), 0 30px 70px -24px rgba(15,18,23,.5); }
.ws-frs-me { display: grid; justify-items: center; gap: 16px; text-align: center; }
.ws-frs-me b { font-size: 15px; font-weight: 700; color: #c3ccd7; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-gl { display: block; width: 104px; height: 140px; border-radius: 14px; background:
  linear-gradient(#d5dbe2 0 0) 50% 26% / 58% 6% no-repeat, linear-gradient(#d5dbe2 0 0) 50% 40% / 58% 6% no-repeat,
  linear-gradient(#d5dbe2 0 0) 50% 54% / 58% 6% no-repeat, linear-gradient(#d5dbe2 0 0) 30% 68% / 18% 6% no-repeat, #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 20px 40px -12px rgba(0,0,0,.55), 0 0 60px rgba(140,165,255,.22); animation: ws-glow 2.4s ease-in-out infinite; }
@keyframes ws-glow { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 20px 40px -12px rgba(0,0,0,.55), 0 0 80px rgba(140,165,255,.38); } }
.ws-frs-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ws-frs-num { font-size: 96px; font-weight: 800; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.ws-frs-lab { font-size: 21px; font-weight: 600; color: #c3ccd7; }
.ws-frs-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; margin: 22px 0 22px; }
.ws-frs-roles span { font-size: 15px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; animation: ws-fr-in .4s var(--ease) both; }
.ws-frs-roles em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 15px; color: #8b96a3; margin-left: 6px; animation: ws-fr-in .4s var(--ease) both; }
.ws-frs-roles em svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ws-frs-field { position: relative; display: flex; flex-wrap: wrap; gap: 8px; min-height: 92px; align-content: flex-start; }
.ws-frs-tile { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; letter-spacing: -.02em;
  color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); animation: ws-fr-in .35s var(--ease) both; transition: all .45s var(--ease); }
.ws-frs-tile.read { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.ws-frs-tile.best { color: #bff5d6; background: rgba(63,201,128,.2); box-shadow: inset 0 0 0 1.5px rgba(79,220,147,.9), 0 0 16px rgba(63,201,128,.3); transform: translateY(-4px); }
.ws-frs-tile.dim { opacity: .28; }
.ws-frs-beam { position: absolute; top: -6px; bottom: -6px; left: 0; width: 80px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(110,140,255,.32), transparent); }
.ws-frs-field.scan .ws-frs-beam { opacity: 1; animation: ws-beam 1.8s var(--ease) infinite; }
@keyframes ws-beam { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw * .6)); } }
.ws-frs-status { margin: 22px 4px 0; font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ws-steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 4px 0; }
.ws-steps4 span { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ws-steps4 span::before { content: ""; display: block; height: 3px; border-radius: 3px; background: var(--line); margin-bottom: 8px; transition: background .4s; }
.ws-steps4 .done { color: var(--ink-2); }
.ws-steps4 .done::before { background: var(--ink); }
.ws-steps4 .on { color: var(--ink); font-weight: 800; }
.ws-steps4 .on::before { background: linear-gradient(90deg, var(--ink) var(--p, 10%), var(--line) 0); }

/* after: the stage folds into one ink band above the results */
.ws-fr-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 18px 24px; border-radius: 18px; color: #c3ccd7; font-size: 15px;
  background: linear-gradient(180deg, #151a22, #0e1116); animation: ws-fr-in .4s var(--ease) both; }
.ws-fr-band b { color: #fff; font-weight: 800; font-size: 17px; }
.ws-fr-band .ws-link { color: #fff; flex: none; font-size: 15px; }
.ws-job-start { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--accent); background: none; padding: 0; }

/* the list's one number */
.ws-job-score2 { display: grid; justify-items: end; align-self: start; text-align: right; }
.ws-job-score2 b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ws-job-score2 small { font-size: 12.5px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }

/* the job panel's score jump */
.ws-jump2 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ws-jump2 > svg { width: 24px; height: 24px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 22px; }
.ws-jump2 .n b { display: block; font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--ink); }
.ws-jump2 .n b.was { color: var(--ink-3); }
.ws-jump2 .n b.now { color: var(--good); }
.ws-jump2 .n small { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.ws-jump2-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; align-self: flex-start; }
.ws-fit-verdict2 { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.ws-key { white-space: nowrap; margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }

@media (max-width: 760px) {
  .ws-frs { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 24px 20px 22px; border-radius: 22px; }
  .ws-frs-me { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 14px; }
  .ws-gl { width: 48px; height: 64px; border-radius: 8px; }
  .ws-frs-num { font-size: 64px; }
  .ws-frs-lab { font-size: 16px; }
  .ws-frs-roles { margin: 14px 0 16px; }
  .ws-frs-roles span { font-size: 13.5px; }
  .ws-frs-tile { width: 34px; height: 34px; font-size: 11px; border-radius: 8px; }
  .ws-frs-status { font-size: 18px; }
  .ws-steps4 span { font-size: 12.5px; }
  .ws-fr-band { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
  .ws-jump2 .n b { font-size: 44px; }
  .ws-jump2-meta { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ws-gl, .ws-frs-field.scan .ws-frs-beam { animation: none; } }
@media (max-width: 760px) { .ws-fr-after #ws-search, .ws-fr-after .ws-find-aux { display: none; } .ws-fr-after .ws-fr-band { margin-top: 4px; } }

/* round 5: the first-minute stage on a light surface (Khalid: no near-black panels on the light UI) */
.ws-frs { min-height: 0; padding: 36px 44px 30px; align-items: start; color: var(--ink);
  background: radial-gradient(70% 60% at 50% 0%, rgba(36,70,166,.07), transparent 70%), radial-gradient(circle at 1px 1px, rgba(36,70,166,.09) 1px, transparent 1.3px) 0 0 / 22px 22px, linear-gradient(180deg, #f9fbfe, #eef3fa);
  box-shadow: inset 0 0 0 1px rgba(36,70,166,.09); }
@media (prefers-color-scheme: dark) { .ws-frs { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } }
.ws-frs-me { padding-top: 6px; }
.ws-frs-me b { color: var(--ink-2); }
.ws-gl { box-shadow: 0 0 0 1px rgba(21,24,29,.08), 0 18px 40px -16px rgba(19,26,34,.28); animation: none; }
.ws-frs-head { align-items: baseline; margin-bottom: 4px; }
.ws-frs-head.pop .ws-frs-num { animation: ws-pop .35s var(--ease); }
@keyframes ws-pop { from { opacity: .3; transform: translateY(6px); } }
.ws-frs-num { font-size: 80px; color: var(--ink); }
.ws-frs-lab { color: var(--ink-2); }
.ws-frs-status { margin: 6px 0 0; font-size: 21px; color: var(--ink); }
.ws-frs-roles { margin: 18px 0 18px; min-height: 0; }
.ws-frs-roles span { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.ws-frs-roles em { color: var(--ink-3); }
.ws-frs-field { min-height: 0; margin-bottom: 26px; }
.ws-frs-tile { position: relative; width: 44px; height: 44px; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.ws-frs-tile em { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-style: normal; font-size: 11.5px; font-weight: 800; line-height: 18px; text-align: center; background: var(--ink); color: #fff; }
.ws-frs-tile.read { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-3); background: #fff; }
.ws-frs-tile.best { color: #135c39; background: var(--good-soft); box-shadow: inset 0 0 0 1.5px var(--good), 0 0 0 3px rgba(47,191,113,.12); transform: translateY(-3px); }
.ws-frs-tile.dim { opacity: .35; }
.ws-frs .ws-steps4 { margin: 0; }
.ws-fr-band { background: var(--accent-soft); color: var(--ink-2); }
.ws-fr-band b { color: var(--ink); }
.ws-fr-band .ws-link { color: var(--accent); }
@media (prefers-color-scheme: dark) { .ws-fr-band { background: var(--surface-2); } }
@media (max-width: 760px) {
  .ws-frs { padding: 20px 18px 18px; }
  .ws-frs-head { display: grid; gap: 2px; }
  .ws-frs-num { font-size: 56px; }
  .ws-frs-status { font-size: 17px; }
  .ws-frs-tile { width: 38px; height: 38px; }
  .ws-fr-band { flex-direction: row; align-items: center; padding: 14px 16px; }
  .ws-fr-band-more { display: none; }
}

/* round 6 */
.ws-frs { min-height: calc(100vh - 140px); align-content: center; box-shadow: 0 1px 2px rgba(19,26,34,.04), 0 24px 60px -28px rgba(36,70,166,.28);
  background: radial-gradient(70% 60% at 50% 0%, rgba(36,70,166,.09), transparent 70%), radial-gradient(circle at 1px 1px, rgba(36,70,166,.1) 1px, transparent 1.3px) 0 0 / 22px 22px, linear-gradient(180deg, #f5f8fe, #e9effa); }
.ws-job-score2 em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--good); white-space: nowrap; margin-top: 2px; }
.ws-jump2 .n.add { margin-left: 18px; }
@media (max-width: 760px) { .ws-frs { min-height: calc(100vh - 120px); align-content: start; } }
.ws-job-score2 b.add { color: var(--good); }
.ws-job-score2 em { color: var(--ink-3); font-weight: 600; }

/* ── Result card, round 7 (2026-11-11): the file is the payoff ─────────────────────────────────────────── */
.ws-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-3); }
.ws-file-ico { width: 30px; height: 38px; }
.ws-file-ico svg { display: block; width: 100%; height: 100%; fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; stroke-linejoin: round; }
.ws-file-ico svg .fold { fill: none; }
.ws-file-ico svg .ln { fill: none; stroke: var(--good); stroke-width: 2; stroke-linecap: round; }
.ws-file-name { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-file-style { display: flex; }
.ws-seg-sm { display: inline-grid; padding: 2px; gap: 2px; border-radius: 8px; background: var(--surface-2); }
.ws-seg-sm button { font-size: 12.5px; padding: 5px 10px; border-radius: 6px; }
.ws-file-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ws-file-btns .ws-btn { gap: 7px; height: 44px; }
.ws-file-btns .ws-btn-secondary { padding: 0 20px; }
.ws-file-btns .ws-btn svg, .ws-actionbar-dl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ws-btn.ws-done, .ws-btn.ws-done:hover { background: var(--good-soft); color: var(--good); border-color: transparent; box-shadow: none; opacity: 1; }
.ws-result .ws-result-body { margin: 18px 0; }
.ws-result .ws-result-actions { border-top: 0; padding-top: 10px; margin: 0 -10px -8px; gap: 2px; }
.ws-result .ws-result-actions .ws-next { margin-right: 10px; gap: 6px; }
.ws-result .ws-result-actions .ws-next svg { width: 14px; height: 14px; }
.ws-result-review, .ws-result-again { color: var(--accent); }
.ws-actionbar-dl { display: none; }
.ws-actionbar.has-file #ws-tailor-btn { display: none; }        /* "Tailor again" spends a resume: it lives in the card as a link */
/* under a result the keyword card drops its own copy of the score */
.ws-fit-after .ws-jump2 .n, .ws-fit-after .ws-jump2 > svg, .ws-fit-after .ws-fit-verdict2 { display: none; }
.ws-fit-after .ws-jump2 { min-height: 0; margin: 0 0 4px; justify-content: flex-end; }
.ws-fit-after { padding-top: 14px; padding-bottom: 14px; }
/* round 7 polish across the workspace */
.ws-reveal { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }             /* was near-black on a light UI */
.ws-reveal:hover:not([disabled]) { filter: none; background: var(--surface-3); }
.ws-jump2 .n:first-child b:not(.now) { color: var(--ink-2); font-size: 44px; }                            /* the starting score is a starting point, not a grade */
.ws-plans-h { text-wrap: balance; }
.ws-fr-band-more + .ws-tip, #ws-fr-band .ws-tip { vertical-align: -5px; }
@media (max-width: 760px) {
  .ws-result-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; width: 100%; }
  .ws-result-stats span { white-space: normal; line-height: 1.25; }
  .ws-file { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .ws-file-style { grid-column: 1 / -1; }
  .ws-file-btns { display: none; }                 /* the bar at the bottom carries the download on phones */
  .ws-seg-sm { flex: 1; display: grid; }
  .ws-seg-sm button { padding: 9px 4px; font-size: 13.5px; }
  .ws-result .ws-result-actions { justify-content: space-between; margin: 4px -8px -8px; }
  .ws-result .ws-result-actions [data-apply] { flex: 1 1 100%; justify-content: center; margin: 6px 8px 8px; }
  .ws-result .ws-result-actions [data-apply]:not(.ws-next) { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
  .ws-actionbar.has-file .ws-actionbar-dl { display: flex; flex: 1; gap: 8px; }
  .ws-actionbar.has-file .ws-actionbar-dl .ws-btn-primary { flex: 1; gap: 7px; }
  .ws-actionbar.has-file .ws-actionbar-dl .ws-btn-secondary { flex: 0 0 auto; padding: 0 22px; }
  .ws-actionbar.has-file #ws-save-btn { display: none; }
  /* tab row: everything fits a 390 screen, nothing clipped or hidden off the edge */
  .ws-tabs { justify-content: space-between; }
  .ws-mode { margin-right: 4px; }
  .ws-mode-btn { padding: 5px 8px; font-size: 13px; }
  .ws-mode-new { display: none; }
  .ws-tab { padding-left: 7px; padding-right: 7px; font-size: 14px; }
  .ws-row-dl .ws-btn { height: 44px; padding: 0 18px; border: 1px solid var(--line-2); background: var(--surface); }
  .ws-plans-h { font-size: 21px; padding-right: 44px; }
}

.ws-search-toggle { display: none; }
@media (max-width: 760px) {
  .ws-tab { padding-left: 5px; padding-right: 5px; font-size: 13.5px; }
  .ws-tab .ws-count { margin-left: 2px; padding: 1px 6px; }
  .ws-mode-btn { padding: 5px 7px; }
  .ws-mode { margin-right: 2px; }
  .has-results .ws-search-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-bottom: 14px;
    font: inherit; font-size: 15px; font-weight: 700; color: var(--accent); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; }
  .ws-search-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .has-results:not(.search-open) #ws-search, .has-results:not(.search-open) .ws-find-aux { display: none; }
  .has-results.search-open .ws-search-toggle { margin-bottom: 10px; color: var(--ink-2); }
}
.ws-fr-mode .ws-search-toggle { display: none !important; }
@media (max-width: 760px) {
  .has-results [data-fr-exit] { display: none; }          /* the folded search row above already does this */
  .ws-result-time { display: none; }
}
/* phones, final: the download sits in the card with the apply step right under it; no bottom bar once a resume exists */
@media (max-width: 760px) {
  .ws-file-btns { display: grid; }
  .ws-actionbar.has-file { display: none; }
  .ws-plans-h { line-height: 1.25; }
}
@media (max-width: 760px) { .ws-tabs { padding-left: 12px; padding-right: 4px; overflow-x: hidden; } .ws-tabs .ws-tab .ws-count { padding: 1px 5px; } }