/* ATS Resume Optimizer — styles.css
   Extracted from index.html's inline <style> in the modularization
   (Build 4.6.91 baseline). Loaded directly via <link> — no build step.
   The tiny login-gate hide stays inline in index.html so it applies
   before this file loads (prevents a flash of the login modal). */

/* ── RESET & TOKENS ───────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f6f8;
  --white:#ffffff;
  --surface:#f9fafb;
  --hover:#e4e6ea;
  --border:#e5e7eb;
  --border2:#d1d5db;
  --ink:#111827;
  --ink2:#374151;
  --muted:#6b7280;
  --dim:#9ca3af;
  --teal:#111111;
  --teal-lt:#f5f5f5;
  --teal-mid:#e5e5e5;
  --teal-dark:#000000;
  --teal-dim:#a0a0a0;
  --red:#dc2626;--red-lt:#fef2f2;
  --green:#16a34a;--green-lt:#f0fdf4;
  --amber:#d97706;--amber-lt:#fffbeb;
  --blue:#2563eb;--blue-lt:#eff6ff;
  --radius:8px;--radius-sm:6px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
}
html{font-size:14px;height:100%;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);height:100%;overflow:hidden;line-height:1.5;}

/* ── APP SHELL ───────────────────────────────────────── */
.app-shell{display:flex;flex-direction:column;height:100vh;}

/* ── TOP BAR ─────────────────────────────────────────── */
.topbar{
  height:52px;background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:16px;flex-shrink:0;
  position:relative;z-index:10;
}
.topbar-brand{
  font-weight:600;font-size:15px;color:var(--teal);letter-spacing:-.01em;
  display:flex;align-items:center;gap:6px;
}
.topbar-brand svg{width:18px;height:18px;}
.topbar-project{
  flex:1;font-size:13px;font-weight:500;color:var(--ink2);
  cursor:pointer;display:flex;align-items:center;gap:6px;min-width:0;
}
.topbar-project-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;}
.topbar-project-name.placeholder{color:var(--muted);font-weight:400;}
.topbar-project .edit-icon{color:var(--dim);font-size:12px;flex-shrink:0;}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
#api-saved{font-size:11px;color:var(--teal);display:none;white-space:nowrap;}

/* ── TAB BAR ─────────────────────────────────────────── */
/* ── Work row (4.6.187): score ring + stepper on the left, Editor/Template on
   the right above the resume. 4.6.190: 40/60 grid matching .main-layout so the
   right group starts exactly at the resume-panel's left edge. ── */
.workrow{
  display:grid;grid-template-columns:40% 60%;align-items:center;
  padding:10px 0;background:var(--white);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.crumb-sep{color:var(--muted);flex-shrink:0;font-weight:400;}
.workrow-left{display:flex;align-items:center;gap:20px;min-width:0;padding-left:20px;}
.workrow-right{display:flex;align-items:center;gap:8px;min-width:0;padding-right:20px;}
/* no score nav bar when no project is open */
body.no-proj .workrow{display:none !important;}
.work-score-ring{position:relative;width:120px;height:66px;flex-shrink:0;}
.work-score-ring svg{display:block;}
.work-score-num{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;line-height:1;pointer-events:none;
  padding-bottom:2px;
}
.work-score-num .n{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.work-score-num .l{font-size:11px;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);margin-top:3px;}
.worktab{
  display:inline-flex;align-items:center;gap:7px;height:40px;box-sizing:border-box;
  font-size:13px;font-weight:500;color:var(--muted);background:var(--white);
  border:1px solid transparent;border-radius:10px;padding:0 16px;position:relative;
  cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit;
}
.worktab:hover{color:var(--ink);background:var(--hover);}
.worktab.active{background:none;border-color:transparent;color:var(--ink);font-weight:600;}
/* 4.6.290: active tab indicator = a 4px black bar at the BOTTOM of the nav row
   (workrow), under the active tab. Tabs are 40px chips centred in the ~66px
   workrow with 10px padding, so the bar sits ~23px below the chip = nav bottom. */
.step-node.selected::after,.worktab.active::after{content:'';position:absolute;left:8px;right:8px;bottom:-23px;height:4px;background:#000;border-radius:2px;}

/* Dropdown / popover menu items (avatar menu + download menu). (4.6.208)
   Replaces the per-button inline styling + onmouseover/onmouseout handlers. */
.menu-item{
  display:block;width:100%;text-align:left;padding:10px 14px;font-size:13px;
  background:none;border:none;cursor:pointer;color:var(--ink);
  font-family:inherit;line-height:1.3;
}
.menu-item:hover{background:var(--hover);}
.menu-item.between{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.menu-item.sm{font-size:12px;padding:9px 14px;}

/* Score-row action buttons (4.6.209). Hover + disabled appearance live in CSS;
   JS only flips data-disabled on the download button. */
.icon-btn{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:var(--white);border:1px solid var(--border);border-radius:50%;
  cursor:pointer;transition:background .2s;padding:0;color:var(--ink);
}
.icon-btn:hover{background:var(--hover);}
.icon-btn svg{width:16px;height:16px;}
.btn-download{
  display:flex;align-items:center;gap:8px;height:40px;box-sizing:border-box;
  padding:0 22px;font-size:14px;
  font-weight:500;color:#fff;background:#111;border:none;border-radius:12px;
  cursor:pointer;transition:background .2s;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);font-family:inherit;
}
.btn-download:hover:not([data-disabled="1"]){background:#000;}
.btn-download[data-disabled="1"]{opacity:.5;cursor:not-allowed;}

/* Compact Day/Month spend pills next to the avatar (4.6.210) */
.spend-pill{display:flex;align-items:center;gap:4px;padding:0 8px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;font-size:10px;font-weight:500;height:22px;}
.spend-pill .lbl{color:var(--muted);}
.spend-pill .val{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}

/* 4.6.204: stepper as fully-round chips. Non-selected steps are grayed out
   (gray circle, muted text). The selected (current) step gets a light gray
   fill, a slightly darker gray outline, black text, and a black circle. */
.stepper-inline{
  display:flex;align-items:center;gap:0;margin-left:18px;
}
.step-node{
  display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;
  background:none;border:1px solid transparent;font-family:inherit;border-radius:12px;position:relative;
  height:40px;box-sizing:border-box;padding:0 18px 0 10px;white-space:nowrap;
  transition:background .15s, border-color .15s;
}
.step-circle{
  width:20px;height:24px;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:400;flex-shrink:0;
  border:none;background:none;color:var(--muted);transition:color .15s;
}
.step-text{display:flex;flex-direction:column;line-height:1.25;text-align:left;}
.step-label{font-size:12px;font-weight:600;color:var(--muted);transition:color .15s;}

/* non-selected glyphs are grayed (base color). Completed shows a check,
   pending a number — the glyph itself distinguishes them, no fill. */
/* hover (non-selected, enabled) — gray fill */
.step-node:not(.selected):not(.disabled):hover{background:var(--hover);}

/* selected (current tab) — light gray chip, darker gray outline, black text,
   black circle. Same node size as the others (all carry a 1px border). */
.step-node.selected{background:none;border-color:transparent;}
.step-node.selected .step-circle{color:var(--ink);}
.step-node.selected .step-label{color:var(--ink);}

/* locked until Job is completed */
.step-node.disabled{opacity:0.4;pointer-events:none;}

.step-connector{display:none;}
.step-connector.done{background:var(--teal);}
.score-pill:empty{display:none;}

/* 4.6.46: the flow nav is a FIXED footer — flex:1 fills the space below the
   content (white, not gray) and position:sticky keeps it pinned to the panel
   bottom while taller content scrolls. Buttons sit at the bottom-right. */
.panel-view.flow-view.active{display:flex;flex-direction:column;min-height:100%;}
.step-nav{
  flex:0 0 auto;
  position:sticky;top:-20px;z-index:6;
  margin:-20px -20px 20px;padding:14px 20px;
  background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,.05);
  display:flex;justify-content:flex-end;align-items:center;gap:10px;
}
.step-nav .btn{height:40px;min-width:132px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;}
#auto-opt-btn{min-width:200px;}
.step-nav .btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}

/* ── MAIN LAYOUT ─────────────────────────────────────── */
.main-layout{
  flex:1;display:grid;grid-template-columns:40% 60%;min-height:0;overflow:hidden;
}
@media(max-width:900px){.main-layout{grid-template-columns:1fr;} .resume-panel{display:none;}}

/* ── LEFT PANEL ──────────────────────────────────────── */
.left-panel{overflow-y:auto;padding:0 20px 20px;background:linear-gradient(180deg,#EFEFEF 0%,#E3E3EF 100%);}
.panel-view{display:none;animation:fadeIn .2s ease;}
.panel-view.active{display:block;}
.left-panel>.panel-view{padding-top:18px;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

/* ── RIGHT PANEL (RESUME) ────────────────────────────── */
.resume-panel{
  border-left:1px solid var(--border);background:var(--white);
  display:flex;flex-direction:column;overflow:hidden;
}
.resume-panel-head{
  padding:12px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;background:var(--surface);gap:8px;flex-wrap:wrap;
}
.resume-panel-head-left{display:flex;align-items:center;gap:8px;min-width:0;}
.resume-panel-title{font-size:12px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;}
.resume-panel-body{flex:1;overflow-y:auto;padding:16px;}
.resume-text-area{
  font-family:'Courier New',monospace;font-size:11.5px;line-height:1.7;
  color:var(--ink);white-space:pre-wrap;min-height:400px;
  outline:none;
}
.resume-text-area:focus{outline:none;}
.resume-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;color:var(--muted);padding:2rem;
}
.resume-empty-icon{font-size:2.5rem;margin-bottom:12px;opacity:.4;}
.resume-empty p{font-size:13px;line-height:1.6;}
.resume-panel-foot{
  padding:10px 14px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--surface);flex-shrink:0;
}

/* ── SCORE PILL ──────────────────────────────────────── */
.score-pill{
  display:none;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 8px;border-radius:20px;
}
.score-pill.show{display:inline-flex;}
.score-pill.high{background:var(--green-lt);color:var(--green);}
.score-pill.mid{background:var(--amber-lt);color:var(--amber);}
.score-pill.low{background:var(--red-lt);color:var(--red);}

/* ── CARDS ───────────────────────────────────────────── */
.card{background:var(--white);border:none;border-radius:16px;padding:20px;box-shadow:none;}
.left-panel .card{margin-bottom:20px;}

.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;flex-wrap:wrap;}
.card-title{font-size:20px;font-weight:600;color:var(--ink);font-family:'Prata',serif;}
.card-sub{font-size:12px;color:var(--muted);margin-top:2px;}

/* ── SECTION LABEL ───────────────────────────────────── */
.sec-label{
  font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:8px;margin-top:16px;
  display:flex;align-items:center;gap:8px;
}
.sec-label::after{content:'';flex:1;height:1px;background:var(--border);}
.sec-label:first-child{margin-top:0;}

/* ── FORMS ───────────────────────────────────────────── */
.field{margin-bottom:12px;}
.field:last-child{margin-bottom:0;}
label.fl{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:4px;letter-spacing:.02em;}
input[type=text],input[type=number],input[type=password],textarea,select{
  width:100%;font-family:'Inter',system-ui,sans-serif;font-size:13px;
  padding:7px 10px;background:var(--white);border:1px solid var(--border2);
  border-radius:var(--radius-sm);color:var(--ink);transition:border-color .15s,box-shadow .15s;
  appearance:none;line-height:1.5;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.1);
}
textarea{resize:vertical;min-height:80px;}
select option{background:var(--white);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
@media(max-width:600px){.two,.three{grid-template-columns:1fr;}}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{
  font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;
  padding:6px 12px;border-radius:12px;border:1px solid transparent;
  cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;line-height:1.4;
}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal);}
.btn-primary:hover{background:var(--teal-dark);}
.btn-secondary{background:var(--white);color:var(--ink2);border-color:var(--border2);}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);}
.btn-ghost{background:transparent;color:var(--muted);border:none;}
.btn-ghost:hover{color:var(--ink2);}
.btn-danger{background:var(--red-lt);color:var(--red);border-color:#fca5a5;}
.btn-danger:hover{background:#fee2e2;}
.btn-sm{font-size:11px;padding:4px 8px;}
.btn-lg{font-size:13px;padding:8px 16px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-icon{padding:5px 7px;}

/* ── BADGES ──────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:20px;}
.badge-teal{background:var(--teal-mid);color:var(--teal-dark);}
.badge-green{background:var(--green-lt);color:var(--green);}
.badge-red{background:var(--red-lt);color:var(--red);}
.badge-amber{background:var(--amber-lt);color:var(--amber);}
.badge-blue{background:var(--blue-lt);color:var(--blue);}
.badge-gray{background:var(--surface);color:var(--muted);border:1px solid var(--border);}

/* ── TAGS (keywords) ─────────────────────────────────── */
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.tag{font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--ink2);}
/* Optimize diff modal */
.diff-line{padding:2px 6px;border-radius:3px;white-space:pre-wrap;word-break:break-word;min-height:1.5em;}
.diff-add{background:#dcfce7;color:#14532d;}
.diff-del{background:#fee2e2;color:#7f1d1d;text-decoration:line-through;}
.diff-empty{background:#f9fafb;color:transparent;}
/* Post-Optimize "what changed" list */
.change-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:8px;border:1px solid transparent;background:transparent;cursor:pointer;transition:background .12s, border-color .12s;}
.change-item:hover{background:#f0fdfa;border-color:var(--teal);}
.change-item .change-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;}
.change-item.kind-add .change-dot{background:#22c55e;}
.change-item.kind-del .change-dot{background:#ef4444;}
.change-item.kind-edit .change-dot{background:#f59e0b;}
.change-item .change-title{font-size:13px;font-weight:600;color:var(--ink);}
.change-item .change-detail{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4;}
.change-ba{display:flex;flex-direction:column;gap:6px;}
.change-ba-row{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;}
.change-ba-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:4px;flex-shrink:0;min-width:55px;text-align:center;margin-top:1px;}
.change-ba-label.change-ba-add{background:#dcfce7;color:#166534;}
.change-ba-label.change-ba-del{background:#fee2e2;color:#991b1b;}
.change-ba-text{flex:1;color:var(--ink2);}
.change-ba-before-text{text-decoration:line-through;color:#991b1b;opacity:.7;}
.change-ba-after-text{color:#166534;font-weight:500;}
/* Preview highlight on hover-over-change */
.fmt-change-highlight{background:#fef9c3 !important;outline:2px solid #facc15;outline-offset:2px;border-radius:3px;transition:background .15s, outline-color .15s;}
.tag.required{background:var(--teal-mid);border-color:var(--teal-dim);color:var(--teal-dark);}
.tag.soft{background:var(--blue-lt);border-color:#bfdbfe;color:var(--blue);}
.tag.tool{background:var(--green-lt);border-color:#bbf7d0;color:var(--green);}
.tag.missing{background:var(--red-lt);border-color:#fca5a5;color:var(--red);}

/* ── SPINNER & LOADING ───────────────────────────────── */
.spin{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--teal);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-row{display:none;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:8px 0;}
.loading-row.show{display:flex;}

/* ── PROJECTS VIEW ───────────────────────────────────── */
.projects-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:8px;
}
.projects-header h2{font-size:17px;font-weight:600;}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
/* Confirmation modal */
.confirm-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;}
.confirm-modal.hidden{display:none;}
.confirm-box{background:var(--white);border-radius:12px;padding:28px 32px;max-width:380px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.confirm-box h3{font-size:16px;font-weight:700;margin-bottom:8px;}
.confirm-box p{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5;}
.confirm-box .flex-c{justify-content:flex-end;gap:8px;}
/* Ellipsis menu */
.proj-card-menu{position:relative;}
.proj-ellipsis{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;}
.proj-ellipsis:hover{background:var(--border);color:var(--ink);}
.proj-dropdown{position:absolute;top:100%;right:0;z-index:100;background:var(--white);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);min-width:130px;overflow:hidden;display:none;}
.proj-dropdown.open{display:block;}
.proj-dropdown button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 14px;font-size:12px;background:none;border:none;cursor:pointer;color:var(--ink);}
.proj-dropdown .menu-ico{width:15px;height:15px;flex-shrink:0;opacity:.85;}
#user-menu-status .menu-ico{width:15px;height:15px;flex-shrink:0;opacity:.85;}
.proj-dropdown .opt-label{flex:1;}
.proj-dropdown .opt-check{margin-left:auto;font-weight:700;visibility:hidden;}
.proj-dropdown .status-opt.current .opt-check{visibility:visible;}
.proj-dropdown button:hover{background:var(--surface);}
.proj-dropdown button.danger{color:var(--ink);}
/* Project logo */
.proj-logo{width:32px;height:32px;border-radius:6px;object-fit:contain;background:var(--surface);border:1px solid var(--border);padding:2px;}
.proj-logo-placeholder{width:32px;height:32px;border-radius:6px;background:var(--teal);border:1px solid var(--teal);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}

.proj-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;cursor:pointer;transition:all .15s;box-shadow:var(--shadow);
}
.proj-card:hover{border-color:var(--teal);box-shadow:var(--shadow-md);background:var(--teal-lt);cursor:pointer;}
.proj-card.active{border-color:#6E7BE8;box-shadow:0 0 0 1px #6E7BE8 inset;}
.proj-card.active:hover{border-color:#6E7BE8;background:var(--white);}
.proj-card.new-card{border-style:dashed;background:transparent;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:100px;color:var(--muted);}
.proj-card.new-card:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-lt);}
.proj-card-icon{font-size:1.4rem;margin-bottom:4px;}
.proj-card-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.proj-card-meta{font-size:11px;color:var(--muted);}
.proj-card-score{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;font-size:11px;font-weight:700;
  border:2px solid var(--border);color:var(--muted);float:right;margin:-2px -2px 4px 8px;
}
.proj-card-score.high{border-color:var(--green);color:var(--green);}
.proj-card-score.mid{border-color:var(--amber);color:var(--amber);}
.proj-card-score.low{border-color:var(--red);color:var(--red);}
.proj-card-actions{display:flex;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}

/* ── UPLOAD ZONE ─────────────────────────────────────── */
.upload-zone{
  border:2px dashed var(--border2);border-radius:var(--radius);
  padding:28px 20px;text-align:center;cursor:pointer;transition:all .2s;
  background:var(--surface);
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--teal);background:var(--teal-lt);}
.upload-zone input{display:none;}
.upload-zone-icon{font-size:2rem;margin-bottom:8px;}
.upload-zone h4{font-size:14px;font-weight:600;margin-bottom:4px;}
.upload-zone p{font-size:12px;color:var(--muted);}

/* ── PARSED FIELDS ───────────────────────────────────── */
.parsed-row{
  display:grid;grid-template-columns:120px 1fr auto;align-items:start;
  gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;
}
.parsed-row:last-child{border-bottom:none;}
.parsed-key{font-weight:500;color:var(--muted);padding-top:7px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
.parsed-val input,.parsed-val textarea{margin:0;font-size:12px;}
@media(max-width:500px){.parsed-row{grid-template-columns:1fr;}}

/* ── SCORE DASHBOARD ─────────────────────────────────── */
.score-ring-wrap{display:flex;flex-direction:column;align-items:center;padding:16px 0;}
.score-ring{position:relative;width:100px;height:100px;display:inline-block;}
.score-ring svg{transform:rotate(-90deg);}
.score-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.score-ring-num .n{font-size:1.8rem;font-weight:700;line-height:1;}
.score-ring-num .l{font-size:10px;color:var(--muted);}
.score-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0;}
/* ANALYZER MINIMAL VIEW (4.5.9) — hide everything except score ring,
   Strengths, Weaknesses, and the Optimize button. CSS class rules with
   !important beat JS-set inline `style.display = 'block'` from the
   render functions, so these stay hidden even when score / audit data
   would otherwise trigger them to appear.
   4.6.1: applied-fixes-card added (no longer used in the current UX). */
#score-summary,
#ats-audit-card,
#applied-fixes-card { display: none !important; }
.score-cell{background:transparent;border:none;box-shadow:none;border-radius:0;padding:8px 4px;text-align:left;}
.score-cell-val{font-size:1.2rem;font-weight:700;line-height:1;margin-bottom:2px;}
.score-cell-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
/* 4.6.250: metric tiles render as horizontal bar charts (label left, score% right, fill = score) */
.metric-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;}
.metric-bar-label{font-size:12px;color:var(--ink2);font-weight:500;text-transform:none;letter-spacing:0;}
.metric-bar-val{font-size:12px;font-weight:700;white-space:nowrap;}
.metric-bar-track{height:8px;border-radius:999px;background:var(--teal-mid);overflow:hidden;}
.metric-bar-fill{height:100%;border-radius:999px;transition:width .3s ease;}
/* 4.6.225: compact metrics strip (Questions tab) — smaller sibling of .score-cell */
.mini-metrics{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:620px;margin:20px auto 0;}
.mini-metric{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 10px;text-align:center;min-width:80px;}
.mini-metric-val{font-size:14px;font-weight:700;line-height:1;}
.mini-metric-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:3px;}

/* ── FIX ITEMS ───────────────────────────────────────── */
.fix-item{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px solid var(--border);}
.fix-item:last-child{border-bottom:none;}
.fix-item.applied{opacity:.4;}
.fix-num{display:none;}
.fix-cb{margin-top:3px;width:14px;height:14px;accent-color:var(--teal);flex-shrink:0;cursor:pointer;}
.fix-num{width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:0;}
.fix-body{flex:1;min-width:0;}
.fix-title{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:2px;}
.fix-desc{font-size:11px;color:var(--muted);}
.fix-diff{display:none;margin-top:6px;}
.fix-diff.show{display:block;}
.fix-before{font-size:10.5px;background:var(--red-lt);border:1px solid #fca5a5;border-radius:4px;padding:4px 6px;margin-bottom:4px;color:#991b1b;font-family:monospace;white-space:pre-wrap;word-break:break-word;}
.fix-after{font-size:10.5px;background:var(--green-lt);border:1px solid #86efac;border-radius:4px;padding:4px 6px;color:#14532d;font-family:monospace;white-space:pre-wrap;word-break:break-word;}
.fix-toggle{font-size:10px;color:var(--teal);cursor:pointer;text-decoration:underline;display:inline-block;margin-top:3px;}

/* ── APPLY BAR ───────────────────────────────────────── */
.apply-bar{
  position:sticky;bottom:0;background:var(--white);border-top:2px solid var(--teal);
  padding:10px 16px;display:none;align-items:center;justify-content:space-between;
  gap:8px;flex-wrap:wrap;margin:0 -20px -20px;box-shadow:0 -4px 12px rgba(0,0,0,.08);
}
.apply-bar.show{display:flex;}

/* ── WORKSPACE TABS ──────────────────────────────────── */
.ws-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;}
.ws-tab{font-size:12px;font-weight:500;padding:7px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;color:var(--muted);transition:all .15s;}
.ws-tab.active{border-bottom-color:var(--teal);color:var(--teal);font-weight:600;}
.ws-panel{display:none;}
.ws-panel.active{display:block;}

/* ── QUESTIONS ───────────────────────────────────────── */
.q-item{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:8px;transition:border-color .15s;}
.q-item.answered{border-color:var(--teal);background:var(--teal-lt);}
.q-priority{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;}
.q-text{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.5;}
.q-skip{font-size:11px;color:var(--muted);cursor:pointer;text-decoration:underline;margin-left:8px;}

/* ── ATS CHECKS ──────────────────────────────────────── */
.ats-row{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);}
.ats-row:last-child{border-bottom:none;}
.ats-icon{font-size:14px;flex-shrink:0;margin-top:1px;}
.ats-title{font-size:12px;font-weight:600;color:var(--ink);}
.ats-desc{font-size:11px;color:var(--muted);margin-top:2px;}

/* ── FORMAT MODAL ────────────────────────────────────── */
#fmt-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:flex-start;justify-content:center;overflow-y:auto;padding:2rem 1rem;}
#fmt-backdrop.show{display:flex;}
#fmt-modal{background:var(--white);border-radius:var(--radius);width:100%;max-width:900px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;}
#fmt-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;}
#fmt-head h3{font-size:15px;font-weight:600;}
.fmt-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);line-height:1;padding:2px 4px;}
#fmt-body{display:grid;grid-template-columns:180px 1fr;min-height:520px;}
#fmt-sidebar{border-right:1px solid var(--border);padding:12px;background:var(--surface);overflow-y:auto;}
.fmt-grp-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 5px;display:block;}
.fmt-grp-label:first-child{margin-top:0;}
.fmt-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent;background:transparent;font-family:inherit;font-size:12px;color:var(--ink);text-align:left;width:100%;transition:all .12s;margin-bottom:2px;}
.fmt-opt:hover{background:var(--white);border-color:var(--border);}
.fmt-opt.active{background:var(--white);border-color:var(--teal);color:var(--teal-dark);}
.fmt-thumb{width:28px;height:36px;border:1px solid var(--border);border-radius:2px;background:#fff;flex-shrink:0;overflow:hidden;padding:2px;}
.fmt-chip-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px;}
.fmt-chip{font-size:10px;font-weight:500;padding:2px 7px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;transition:all .12s;}
.fmt-chip:hover{border-color:var(--teal);color:var(--teal);}
.fmt-chip.active{background:var(--teal);color:#fff;border-color:var(--teal);}
#fmt-preview-area{background:linear-gradient(180deg,#EFEFEF 0%,#E3E3EF 100%);padding:16px;overflow-y:auto;display:flex;justify-content:center;}
#fmt-preview-frame{width:100%;background:#fff;box-shadow:var(--shadow-lg);min-height:740px;}
#fmt-preview-inner{padding:.65in;font-size:10.5pt;line-height:1.45;color:#111;min-height:740px;}
#fmt-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap;}
@media(max-width:580px){#fmt-body{grid-template-columns:1fr;}}

/* ── MODAL ───────────────────────────────────────────── */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;align-items:center;justify-content:center;}
.modal-backdrop.show{display:flex;}
.modal-box{background:var(--white);border-radius:var(--radius);padding:20px;max-width:420px;width:90%;box-shadow:var(--shadow-lg);}
.modal-box h3{font-size:15px;font-weight:600;margin-bottom:6px;}
.modal-box p{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.6;}

/* ── TOAST ───────────────────────────────────────────── */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ink);color:#fff;font-size:12px;padding:7px 14px;border-radius:var(--radius-sm);opacity:0;transition:all .2s;pointer-events:none;z-index:200000;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── FORMAT TAB ──────────────────────────────────────── */
.fmt-section-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px;display:block;}
.fmt-section-label:first-child{margin-top:0;}
.tmpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px;}
.tmpl-card{
  border:1.5px solid var(--border);border-radius:6px;
  cursor:pointer;background:var(--white);padding:0;overflow:hidden;
  transition:all .15s;position:relative;
  aspect-ratio:8.5/11;display:flex;flex-direction:column;
  max-width:120px;
}
.tmpl-card:hover{border-color:var(--teal);box-shadow:var(--shadow-md);}
.tmpl-card.active{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.15);}
.tmpl-card.active::after{content:'✓';position:absolute;top:3px;right:3px;background:var(--teal);color:#fff;font-size:8px;font-weight:700;width:13px;height:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;}
.tmpl-thumb{flex:1;padding:4px;overflow:hidden;background:var(--white);position:relative;}
.tmpl-name{font-size:9px;font-weight:600;color:var(--ink2);padding:3px 4px;border-top:1px solid var(--border);background:var(--surface);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* fmt preview in right panel */
#fmt-live-preview{display:none;flex:1;overflow-y:auto;padding:24px 8px;background:linear-gradient(180deg,#EFEFEF 0%,#E3E3EF 100%);}
#fmt-live-preview.show{display:block;}
/* Version pill row — lives in the resume-panel-head next to the "Resume"
   label. Lets the user view any previous draft. View-only: clicking a pill
   re-renders the preview with that version's text, but does not modify
   proj.drafts (the latest is always the canonical state for operations). */
/* ── Version tabs (4.6.204): fully-round chips. Non-selected = gray text,
   transparent. Hover = gray fill. Selected = light gray fill + slightly darker
   gray outline + black text. Score stays bold. ── */
.version-pill-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:sticky;top:0;z-index:5;background:#EFEFEF;margin:0 -20px 0;padding:20px 20px 12px;border-bottom:1px solid rgba(0,0,0,0.06);}
.version-pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  font-size:13px;font-weight:400;color:var(--muted);background:none;
  border:1px solid var(--border2);border-radius:999px;cursor:pointer;
  user-select:none;line-height:1.4;white-space:nowrap;
  transition:background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.version-pill:hover{background:var(--hover);color:var(--ink2);border-color:var(--border2);}
.version-pill.active{background:#d7dce3;border-color:#374151;color:var(--ink);}
.version-pill.active:hover{background:#d7dce3;color:var(--ink);}
.version-pill-score{font-weight:700;color:inherit;}
/* The pages wrapper holds the scaled fixed-size pages and centers them. */
#fmt-preview-pages-wrapper{display:flex;flex-direction:column;align-items:center;gap:24px;}
/* A page renders at literal US Letter dimensions. transform-origin top-center so scaled pages
   pin to the top of their wrapper slot. The .fmt-preview-page-slot wraps each page so we can
   reserve the right amount of vertical space after scaling (pages would otherwise overlap). */
.fmt-preview-page-slot{position:relative;}
.fmt-preview-page{width:8.5in;height:11in;background:#fff;box-shadow:var(--shadow-lg);font-size:10pt;line-height:1.35;color:#111;overflow:hidden;transform-origin:top left;}
/* Contact info must start exactly at the 0.5in padding boundary — zero out
   any default top margin on the first content block (contact header). Some
   template renderers emit a div with its own margin-top; this clamps it. */
.fmt-preview-page > *:first-child{margin-top:0!important;padding-top:0!important;}
.fmt-preview-page > *:first-child > *:first-child{margin-top:0!important;padding-top:0!important;}
/* Legacy id kept for compatibility — first page in the list */
#fmt-preview-page{width:8.5in;height:11in;background:#fff;box-shadow:var(--shadow-lg);font-size:10pt;line-height:1.35;color:#111;overflow:hidden;transform-origin:top left;}
.fmt-tab-opt{display:none;}/* hide old style */
.fmt-tab-label{display:none;}
.fmt-tab-sub{display:none;}

/* ── AUTO-FILL RESULT ────────────────────────────────── */
#autofill-result{background:var(--teal-lt);border:1px solid var(--teal-mid);border-radius:var(--radius-sm);padding:10px 12px;}

/* ── BOLD BUTTON ─────────────────────────────────────── */
#bold-btn{font-size:13px;font-weight:700;min-width:26px;}
#bold-btn.active{background:var(--teal-mid);color:var(--teal-dark);border:1px solid var(--teal-dim);border-radius:var(--radius-sm);}

/* ── CONTENT EDITOR ACCORDION ───────────────────────── */
.ce-section{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;background:var(--white);overflow:hidden;}
.ce-section-head{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;user-select:none;background:var(--white);}
.ce-section-head:hover{background:var(--surface);}
.ce-chevron{font-size:10px;color:var(--muted);transition:transform .2s;flex-shrink:0;}
.ce-section.open .ce-chevron{transform:rotate(90deg);}
.ce-section-title{font-size:13px;font-weight:600;flex:1;}
.ce-section-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.ce-section-body{display:none;border-top:1px solid var(--border);}
.ce-section.open .ce-section-body{display:block;}

/* ── ROLE CARD ───────────────────────────────────────── */
.role-card{padding:12px;border-bottom:1px solid var(--border);}
.role-card:last-child{border-bottom:none;}
.role-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.role-card-company{font-size:13px;font-weight:600;color:var(--ink);flex:1;cursor:pointer;}
.role-card-company.placeholder{color:var(--muted);font-weight:400;}
.role-fields{display:none;margin-top:8px;}
.role-card.expanded .role-fields{display:block;}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}

/* ── BULLET ROWS ─────────────────────────────────────── */
.bullet-list{margin-top:6px;}
.bullet-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:5px;}
.bullet-row textarea{flex:1;min-height:40px;font-size:12px;resize:vertical;line-height:1.5;}
.bullet-del{background:none;border:none;color:var(--dim);font-size:16px;cursor:pointer;padding:4px;line-height:1;flex-shrink:0;margin-top:4px;}
.bullet-del:hover{color:var(--red);}
.btn-add-bullet{font-size:11px;color:var(--teal);background:none;border:1px dashed var(--teal-dim);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;width:100%;margin-top:4px;font-family:inherit;transition:all .15s;}
.btn-add-bullet:hover{background:var(--teal-lt);}

/* ── SKILL GROUPS ────────────────────────────────────── */
.skill-group{padding:10px 12px;border-bottom:1px solid var(--border);}
.skill-group:last-child{border-bottom:none;}
.skill-group-head{display:flex;align-items:center;gap:6px;margin-bottom:7px;}
.skill-group-label{font-size:11px;font-weight:600;color:var(--ink2);background:transparent;border:none;font-family:inherit;flex:1;padding:2px 0;cursor:text;}
.skill-group-label:focus{outline:none;border-bottom:1px solid var(--teal);}
.skill-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.skill-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--ink2);}
.skill-chip-del{background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;padding:0;line-height:1;}
.skill-chip-del:hover{color:var(--red);}
.skill-chip-input{border:1px dashed var(--teal-dim);background:var(--teal-lt);color:var(--teal-dark);font-size:11px;padding:3px 8px;border-radius:20px;outline:none;font-family:inherit;width:100px;}
.skill-chip-input::placeholder{color:var(--teal-dim);}

/* ── EDUCATION ENTRY ─────────────────────────────────── */
.edu-card{padding:12px;border-bottom:1px solid var(--border);}
.edu-card:last-child{border-bottom:none;}

/* ── ADD ROLE BTN ────────────────────────────────────── */
.btn-add-role{width:100%;padding:8px;font-size:12px;color:var(--teal);background:var(--teal-lt);border:1px dashed var(--teal-dim);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s;}
.btn-add-role:hover{background:var(--teal-mid);}

/* ── DRAG HANDLES & REORDER ─────────────────────────── */
.drag-handle{cursor:grab;color:var(--dim);font-size:14px;padding:0 4px;flex-shrink:0;user-select:none;line-height:1;}
.contact-drag-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding:4px 0;border-radius:var(--radius-sm);}
.contact-drag-row.drag-over{border-top:2px solid var(--teal);}
.line-btns{display:flex;gap:2px;flex-shrink:0;}
.line-btn{width:22px;height:22px;border-radius:4px;border:1.5px solid var(--border);background:var(--surface);font-size:10px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .12s;}
.line-btn:hover{border-color:var(--teal);color:var(--teal);}
.line-btn.active{background:var(--teal);border-color:var(--teal);color:#fff;}
.drag-handle:active{cursor:grabbing;}
.dragging{opacity:.4;border:2px dashed var(--teal)!important;}
.drag-over{border-top:2px solid var(--teal)!important;}
.skill-chip.dragging{opacity:.3;}
.skill-chip[draggable]{cursor:grab;}

/* ── DEEP ANALYSIS ──────────────────────────────────── */
.analysis-section{margin-bottom:12px;}
.analysis-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink2);margin-bottom:6px;}
.analysis-item{display:flex;align-items:flex-start;gap:6px;padding:4px 0;border-bottom:1px solid var(--border);font-size:12px;}
.analysis-item:last-child{border-bottom:none;}
.analysis-badge{font-size:10px;padding:2px 6px;border-radius:10px;font-weight:600;white-space:nowrap;flex-shrink:0;}
.badge-gap{background:#fef2f2;color:#dc2626;}
.badge-weak{background:#fffbeb;color:#d97706;}
.badge-strong{background:#f0fdf4;color:#16a34a;}
.badge-keyword{background:#eff6ff;color:#2563eb;}
.badge-redundant{background:#faf5ff;color:#7c3aed;}
/* ── SKILL SUGGEST ───────────────────────────────────── */
.skill-suggest{position:relative;display:inline-block;}
.skill-suggest-drop{position:absolute;top:100%;left:0;z-index:200;background:var(--white);border:1px solid var(--teal);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:180px;overflow:hidden;margin-top:2px;}
.skill-suggest-item{padding:7px 12px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.skill-suggest-item:hover{background:var(--teal-lt);}
.skill-suggest-group{font-size:10px;color:var(--teal);font-weight:600;}
/* ── CHAR COUNTER ────────────────────────────────────── */
.char-count{font-size:10px;color:var(--muted);text-align:right;margin-top:2px;}
.char-count.over{color:var(--red);font-weight:600;}

/* ── FORMAT DROPDOWNS ───────────────────────────────── */
.fmt-row{display:grid;grid-template-columns:100px 1fr 64px;align-items:center;gap:8px;margin-bottom:8px;}
.fmt-row label{font-size:11px;color:var(--muted);font-weight:500;}
.fmt-size-input{font-size:12px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);font-family:inherit;color:var(--ink);width:100%;text-align:center;}
.fmt-size-input:focus{outline:none;border-color:var(--teal);}
.fmt-select{font-size:12px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);font-family:inherit;color:var(--ink);width:100%;cursor:pointer;}
.fmt-select:focus{outline:none;border-color:var(--teal);}
.fmt-color-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.fmt-color-row label{font-size:11px;color:var(--muted);font-weight:500;width:100px;flex-shrink:0;}
.fmt-color-input{width:36px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px;cursor:pointer;background:none;}
.fmt-color-presets{display:flex;gap:4px;flex-wrap:wrap;}
.fmt-color-swatch{width:22px;height:22px;border-radius:4px;border:2px solid transparent;cursor:pointer;flex-shrink:0;transition:border-color .12s;}
.fmt-color-swatch:hover,.fmt-color-swatch.active{border-color:var(--teal);}

/* ── PROJECT STATUS ─────────────────────────────────── */
/* Status indicator on a project tile — colored label, no dot, not a button.
   Status is SET from the tile's ··· menu (see .proj-dropdown .status-opt). */
.status-indicator{font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;color:#666;}
.status-indicator.none{color:#9aa0a6;}
.status-indicator.applied{color:#1d4ed8;}
.status-indicator.ready-to-send{color:#b45309;}
.status-indicator.interviewing{color:#15803d;}
.status-indicator.didnt-apply{color:#777;}
.status-indicator.not-pursuing{color:#92400e;}
/* Status options inside the ··· dropdown */
.proj-dropdown{min-width:160px;}
.proj-dropdown .dropdown-head{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9aa0a6;padding:8px 14px 4px;}
.proj-dropdown .status-opt.current{font-weight:700;}
.proj-dropdown .dropdown-sep{height:1px;background:var(--border);margin:4px 0;}

/* ── ANSWER WITH AI MODAL ────────────────────────────── */
.ai-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;}
.ai-modal.hidden{display:none;}
.ai-modal-box{background:var(--white);border-radius:14px;padding:28px;max-width:640px;width:95%;box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:90vh;overflow-y:auto;}
.ai-modal-box h3{font-size:16px;font-weight:700;margin-bottom:6px;}
.ai-modal-box .subtitle{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5;}
.ai-option{border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;margin-bottom:10px;transition:all .15s;}
.ai-option:hover{border-color:var(--teal);background:var(--teal-lt);}
.ai-option.selected{border-color:var(--teal);background:var(--teal-lt);}
.ai-option-title{font-size:13px;font-weight:700;margin-bottom:3px;}
.ai-option-desc{font-size:12px;color:var(--muted);}
.ai-panel{display:none;margin-top:16px;}
.ai-panel.show{display:block;}
.ai-instruction{font-size:12px;color:var(--ink2);line-height:1.7;background:var(--surface);border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.ai-instruction ol{margin:8px 0 0 16px;padding:0;}
.ai-instruction li{margin-bottom:4px;}

/* ── MISC ────────────────────────────────────────────── */
.flex{display:flex;}
.flex-c{display:flex;align-items:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-1{gap:4px;}.gap-2{gap:8px;}.gap-3{gap:12px;}
.mt-1{margin-top:4px;}.mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:16px;}
.mb-2{margin-bottom:8px;}.mb-3{margin-bottom:12px;}
.text-sm{font-size:12px;}.text-xs{font-size:11px;}.text-muted{color:var(--muted);}
.bold{font-weight:600;}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted);}
.empty-icon{font-size:2rem;margin-bottom:8px;opacity:.4;}
hr.dim{border:none;border-top:1px solid var(--border);margin:12px 0;}
.kw-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.match-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px;}
.match-row:last-child{border-bottom:none;}
/* Keyword Coverage — Concept C */
.kw-stat-row{background:var(--teal-lt);border:1px solid var(--teal-dim);border-radius:10px;padding:12px 14px;margin-bottom:12px;text-align:center;}
.kw-stat-big{font-size:22px;font-weight:700;color:var(--teal);line-height:1;}
.kw-stat-label{font-size:10px;color:var(--ink2);margin-top:3px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.kw-stat-bar{height:5px;background:#e5e5e5;border-radius:3px;margin-top:8px;overflow:hidden;}
.kw-stat-bar-fill{height:100%;background:var(--teal);border-radius:3px;transition:width .6s ease;}
.kw-missing-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:4px 0 8px;display:flex;align-items:center;gap:6px;}
.kw-missing-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;cursor:pointer;}
.kw-missing-row input{accent-color:var(--teal);cursor:pointer;flex-shrink:0;}
.kw-missing-row label{cursor:pointer;flex:1;color:var(--ink2);user-select:none;}
.kw-missing-row:hover label{color:var(--ink);}
.kw-apply-btn{margin-top:10px;background:var(--teal);color:#fff;border:none;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;width:100%;transition:background .12s;}
.kw-apply-btn:hover{background:var(--teal-dark);}
.kw-apply-btn:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;}
.kw-all-covered{font-size:12px;color:var(--green);text-align:center;padding:16px 0;font-weight:500;}

/* Full-screen blocking modal — blocks ALL interaction during long async operations */
.blocking-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.blocking-modal.show { display: flex; }
.blocking-modal-content {
  background: white;
  padding: 44px 36px;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  text-align: center;
  width: 360px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
.spin-lg {
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  border: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #EC6FC4, #B57ADF, #6E7BE8, #EC6FC4);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: spin 1s linear infinite;
}
.blocking-modal-title {
  font-family: 'Prata', serif;
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin-bottom: 10px;
}
.blocking-modal-sub {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* ── TEMPLATE TAB: COLORS-ONLY DEBUG MODE ──────────────────────
   When #view-format has the .debug-mode class, hide every direct
   child except the toggle bar, the Templates section (so users can
   pick between Standard and Professional), and the Colors section. */
#view-format.debug-mode > *:not(#fmt-debug-toggle-wrap):not(#fmt-templates-section):not(#fmt-colors-section) {
  display: none !important;
}
/* Toggle switch visual states */
#fmt-debug-toggle::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#fmt-debug-toggle:checked {
  background: #111111 !important;
}
#fmt-debug-toggle:checked::after {
  transform: translateX(16px);
}

/* ── Loading skeleton ─────────────────────────────────────── */
.skel{background:linear-gradient(90deg,var(--border) 25%,#e8e8e8 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Empty / signed-out states ─────────────────────────────
   Hide toolbar buttons, tabs, and the right resume panel whenever the
   user is either signed out or signed in without projects. The marketing
   page (or the login modal) takes the full canvas. */
body.app-empty #save-btn,
body.app-empty #download-menu-wrap,
body.app-empty .workrow,
body.app-empty .resume-panel,
body.app-empty .projects-header,
body.app-signed-out #save-btn,
body.app-signed-out #download-menu-wrap,
body.app-signed-out .workrow,
body.app-signed-out .resume-panel,
body.app-signed-out .projects-header { display: none !important; }

/* Loading state: signed in but project count not yet known. Hide the
   project-dependent chrome and the resume panel so the full UI never flashes
   before we resolve to either the homepage or the full app. The grid stays a
   grid here — showGridLoading paints shimmer cards into it. */
body.app-loading #save-btn,
body.app-loading #download-menu-wrap,
body.app-loading .workrow,
body.app-loading .resume-panel { display: none !important; }

/* When the marketing/empty state OR loading state is showing, collapse the
   two-column layout to a single column so content spans the full width
   instead of being squeezed into the left 40%. */
body.app-empty .main-layout,
body.app-loading .main-layout,
body.app-signed-out .main-layout { grid-template-columns: 1fr !important; }

/* Homepage (empty state) only: the grid container is normally a multi-column
   project grid (repeat(auto-fill, minmax(240px,1fr))), which would trap the
   marketing content in a single 240px cell on the left. Switch it to block so
   the centered, max-width hero spans the available width. */
body.app-empty #proj-grid { display: block !important; }

/* Always hide undo/redo — per 4.6.136 spec. */
#undo-btn, #redo-btn { display: none !important; }

/* ── Empty state marketing layout ─────────────────────────── */
.empty-state{max-width:920px;margin:0 auto;padding:56px 24px 80px;display:flex;flex-direction:column;gap:48px;}
.empty-hero{text-align:center;}
.empty-hero h1{font-size:64px;line-height:1.1;font-weight:600;color:var(--ink);margin:0 0 16px;letter-spacing:-0.02em;}
.empty-hero p{font-size:24px;color:var(--muted);margin:0;line-height:1.45;}
.empty-upload{background:var(--white);border:2px dashed var(--border);border-radius:20px;padding:56px 32px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:14px;transition:all 0.2s;}
.empty-upload:hover,.empty-upload.drag{border-color:var(--teal);background:#f0fdfa;}
.empty-upload svg{width:72px;height:72px;}
.empty-upload-title{font-size:18px;font-weight:600;color:var(--ink);}
.empty-upload-sub{font-size:13px;color:var(--muted);}
.empty-steps{background:var(--surface);border-radius:16px;padding:32px;}
.empty-steps h2{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin:0 0 20px;}
.step-tiles{display:flex;gap:16px;flex-wrap:wrap;}
.step-tile{flex:1 1 0;min-width:150px;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
.step-tile-icon{color:var(--ink);display:flex;align-items:center;justify-content:center;height:32px;}
.step-tile-icon svg{width:28px;height:28px;}
.step-tile-num{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;}
.step-tile-label{font-size:14px;font-weight:500;color:var(--ink);line-height:1.35;}

/* 4.6.256: collapsing sticky metrics card on the Optimizer view. Pins to the
   top of the scroll panel; once stuck, .collapsed hides everything except the
   Optimize button so only the button shows while content scrolls behind it. */


/* 4.6.268: Optimizer CTA card pins to the top of the scroll panel and, once
   stuck, collapses to a floating button bar (heading hidden, rounded bottom,
   shadow) while What Has Changed scrolls behind it. */
#optimize-cta-card{position:sticky;top:var(--pills-h,0px);z-index:4;transition:box-shadow .15s, border-radius .15s, padding .15s;}
#optimize-cta-card.floating{box-shadow:0 6px 16px rgba(0,0,0,.12);border-radius:0 0 16px 16px;padding-top:16px;padding-bottom:16px;}
#optimize-cta-card.floating #optimize-cta-title{display:none;}
#optimize-cta-card.floating .opt-cta-btn-wrap{margin-top:0;}

/* 0.1.2: UI-change motion. Word reveal (CTA phrase, questions title) + staggered version pills. */
@keyframes wordFadeIn{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:none;}}
@keyframes pillFadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.version-pill.intro{animation:pillFadeIn .26s ease both;}
@media (prefers-reduced-motion: reduce){ .version-pill.intro{animation:none;} }