/* ============================================================
   CVEDO — CV analysis app (Direction 05 · Redline)
   ============================================================ */
:root{
  --paper:#F5F4F1; --bone:#EAE8E1; --forest:#166B3F; --pine:#0C3D24;
  --sage:#2FA56B; --sage-2:#6FC79A; --ink:#16201B;
  --signal:#D9623A; --signal-ink:#B14A28;
  --hl:rgba(217,98,58,.20); --hl-good:rgba(47,165,107,.22);
  --line:rgba(20,32,27,.12); --line-soft:rgba(20,32,27,.07);
  --card:#ffffff;
  --shadow:0 1px 2px rgba(20,32,27,.04), 0 8px 26px rgba(20,32,27,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
.mono{font-family:"JetBrains Mono",monospace}

/* ---------- wordmark + mark ---------- */
.wm{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.05em;color:var(--forest);line-height:1;white-space:nowrap}
.wm.rev{color:var(--paper)}
.wm .swipe{background:var(--signal);color:var(--paper);padding:0 .05em;
  border-radius:46% 54% 58% 42%/64% 46% 54% 36%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.squircle{border-radius:27%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.squircle.forest{background:var(--forest)} .squircle.clay{background:var(--signal)}

/* ---------- app shell ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  height:64px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;background:rgba(245,244,241,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:11px}
.nav{display:flex;align-items:center;gap:8px}
.navlink{font-size:13.5px;font-weight:500;color:rgba(22,32,27,.55);padding:8px 12px;border-radius:8px;text-decoration:none;white-space:nowrap}
.navlink:hover{color:var(--ink);background:rgba(20,32,27,.04)}
.navlink.active{color:var(--forest);font-weight:600}

/* ---------- buttons ---------- */
.btn{border:none;border-radius:11px;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:12px 20px;transition:transform .12s ease, filter .15s ease, background .15s}
.btn:active{transform:translateY(1px)}
.btn-forest{background:var(--forest);color:var(--paper)}
.btn-forest:hover{filter:brightness(1.12)}
.btn-clay{background:var(--signal);color:#fff}
.btn-clay:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--forest);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(20,32,27,.04)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:9px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- generic ---------- */
.kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--signal)}
.h1{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.02;color:var(--forest)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}

/* ================= SCREEN 1 — UPLOAD ================= */
.center-wrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.upload{width:100%;max-width:760px;text-align:center}
.upload .kicker{margin-bottom:18px;display:inline-block}
.upload h1{font-size:52px;margin:0 0 16px}
.upload .lede{font-size:18px;line-height:1.55;color:rgba(22,32,27,.62);max-width:54ch;margin:0 auto 34px}
.upload .lede b{color:var(--ink);font-weight:600}
.dropzone{
  background:var(--card);border:1.6px dashed rgba(22,107,63,.35);border-radius:18px;
  padding:42px 32px;display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;box-shadow:var(--shadow);
}
.dropzone:hover{border-color:var(--signal);transform:translateY(-2px)}
.dropzone.drag{border-color:var(--signal);background:#fff}
.dz-ico{width:60px;height:60px;border-radius:16px;background:rgba(22,107,63,.06);display:flex;align-items:center;justify-content:center}
.dz-title{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:19px;color:var(--forest);white-space:nowrap}
.dz-sub{font-size:13.5px;color:rgba(22,32,27,.5)}
.dz-sub a{color:var(--signal);font-weight:600;text-decoration:none}
.or{display:flex;align-items:center;gap:14px;color:rgba(22,32,27,.4);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:22px 0}
.or::before,.or::after{content:"";height:1px;background:var(--line);flex:1}
.paste{width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  font-family:inherit;font-size:14.5px;line-height:1.5;color:var(--ink);resize:vertical;min-height:120px;box-shadow:var(--shadow)}
.paste:focus{outline:none;border-color:var(--sage)}
.role-row{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;margin:26px 0 30px}
.role-row .lbl{font-size:13.5px;color:rgba(22,32,27,.55)}
.role-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:500;color:rgba(22,32,27,.7);transition:.14s;white-space:nowrap}
.pill:hover{border-color:var(--sage)}
.pill.on{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.trust{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:8px;color:rgba(22,32,27,.45);font-size:12.5px;flex-wrap:wrap}
.trust span{display:flex;align-items:center;gap:7px}

/* ================= SCREEN 2 — SCANNING ================= */
.scan{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:48px 24px;text-align:center}
.scan-mark{position:relative;width:120px;height:120px;border-radius:30px;background:var(--forest);display:flex;align-items:center;justify-content:center;overflow:hidden}
.scan-mark .sweep{position:absolute;left:0;right:0;height:34%;background:linear-gradient(180deg,rgba(217,98,58,0),rgba(217,98,58,.55),rgba(217,98,58,0));animation:sweep 1.5s ease-in-out infinite}
@keyframes sweep{0%{top:-34%}100%{top:100%}}
.scan h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:26px;color:var(--forest);margin:0;letter-spacing:-.02em}
.scan .file{font-size:13.5px;color:rgba(22,32,27,.5)}
.scan-steps{display:flex;flex-direction:column;gap:11px;width:100%;max-width:340px;text-align:left}
.scan-step{display:flex;align-items:center;gap:11px;font-size:14px;color:rgba(22,32,27,.4);transition:color .25s}
.scan-step .tick{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.25s}
.scan-step.done{color:var(--ink)}
.scan-step.done .tick{background:var(--sage);border-color:var(--sage)}
.scan-step.active{color:var(--forest);font-weight:600}
.scan-step.active .tick{border-color:var(--signal)}
.progress{width:100%;max-width:340px;height:6px;border-radius:999px;background:var(--bone);overflow:hidden}
.progress i{display:block;height:100%;background:var(--signal);border-radius:999px;transition:width .3s ease}

/* ================= SCREEN 3 — RESULTS ================= */
.results{flex:1 1 auto;width:100%;max-width:1180px;margin:0 auto;padding:26px 24px 60px;display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}
@media(max-width:920px){.results{grid-template-columns:1fr}}

/* left rail */
.rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:88px}
@media(max-width:920px){.rail{position:static}}
.scorecard{padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.ring{position:relative;width:188px;height:188px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px 0 4px}
.ring::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:var(--card)}
.ring-num{position:relative;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:58px;color:var(--forest);line-height:1;letter-spacing:-.03em}
.ring-den{position:relative;font-size:13px;color:rgba(22,32,27,.4);margin-top:2px}
.score-state{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:17px;color:var(--forest)}
.score-pot{font-size:13.5px;color:rgba(22,32,27,.55)}
.score-pot b{color:var(--signal)}
.cats{padding:20px 22px;display:flex;flex-direction:column;gap:15px}
.cats h3,.panel h3,.advice-head h3{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:rgba(22,32,27,.5);margin:0}
.cat{display:flex;flex-direction:column;gap:6px}
.cat-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
.cat-top .cn{color:var(--ink);font-weight:500;white-space:nowrap}
.cat-top .cv{font-family:"JetBrains Mono",monospace;font-size:12px;color:rgba(22,32,27,.55)}
.bar{height:7px;border-radius:999px;background:var(--bone);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.bar i.lo{background:var(--signal)} .bar i.mid{background:var(--sage-2)} .bar i.hi{background:var(--sage)}

/* main column */
.main{display:flex;flex-direction:column;gap:18px;min-width:0}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.result-head .file-chip{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(22,32,27,.7)}
.result-head .file-chip .fi{width:34px;height:34px;border-radius:9px;background:rgba(22,107,63,.07);display:flex;align-items:center;justify-content:center}
.result-head .file-chip b{color:var(--ink);font-weight:600}
.tabs{display:flex;gap:6px;background:var(--bone);padding:5px;border-radius:13px;width:fit-content}
.tab{border:none;background:transparent;border-radius:9px;padding:9px 16px;font-size:13.5px;font-weight:600;color:rgba(22,32,27,.55);display:flex;align-items:center;gap:8px;white-space:nowrap}
.tab.on{background:var(--card);color:var(--forest);box-shadow:0 1px 3px rgba(20,32,27,.1)}
.tab .badge{font-family:"JetBrains Mono",monospace;font-size:11px;background:var(--signal);color:#fff;border-radius:999px;padding:1px 7px}
.tab.on .badge{}

/* redline list */
.panel{padding:6px 0}
.panel-intro{font-size:14px;color:rgba(22,32,27,.6);line-height:1.5;margin:2px 4px 16px}
.rl-list{display:flex;flex-direction:column;gap:14px}
.rl{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transition:.2s}
.rl.accepted{border-color:var(--sage);background:linear-gradient(0deg,rgba(47,165,107,.05),rgba(47,165,107,.05)),var(--card)}
.rl.dismissed{opacity:.5}
.rl-top{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line-soft);gap:10px}
.rl-where{display:flex;align-items:center;gap:9px;font-size:12px}
.rl-sec{font-family:"JetBrains Mono",monospace;letter-spacing:.04em;color:rgba(22,32,27,.5);text-transform:uppercase}
.rl-cat{background:var(--hl);color:var(--signal-ink);font-weight:700;border-radius:999px;padding:2px 9px;font-size:11px}
.rl-gain{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--sage);font-weight:600}
.rl-body{padding:15px 16px;display:flex;flex-direction:column;gap:11px}
.rl-line{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.rl-line .mk{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.rl-line .mk.bad{background:var(--hl);color:var(--signal-ink);font-weight:700;font-size:12px}
.rl-line .mk.good{background:var(--forest)}
.rl-before{color:rgba(22,32,27,.5);text-decoration:line-through;text-decoration-color:var(--signal);text-decoration-thickness:1.5px}
.rl-after{color:var(--ink)}
.rl-after mark{background:var(--hl-good);color:inherit;padding:0 3px;border-radius:2px;font-weight:600}
.rl-why{font-size:12.5px;color:rgba(22,32,27,.55);padding:0 16px 14px 47px;line-height:1.45}
.rl-why b{color:var(--forest)}
.rl-actions{display:flex;gap:9px;padding:0 16px 15px 47px}
.rl-done{display:flex;align-items:center;gap:8px;padding:0 16px 15px 47px;color:var(--sage);font-weight:600;font-size:13.5px}

/* keywords */
.kw-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.kw-wrap{grid-template-columns:1fr}}
.kw-col{padding:20px}
.kw-col h4{font-family:"Space Grotesk",sans-serif;margin:0 0 4px;font-size:15px;color:var(--forest)}
.kw-col .sub{font-size:12.5px;color:rgba(22,32,27,.5);margin-bottom:14px}
.kw-tags{display:flex;flex-wrap:wrap;gap:8px}
.kw{border-radius:8px;padding:6px 11px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.kw.have{background:var(--hl-good);color:var(--forest)}
.kw.miss{background:var(--hl);color:var(--signal-ink);cursor:pointer;transition:.14s}
.kw.miss:hover{filter:brightness(.97)}
.kw.miss.added{background:var(--hl-good);color:var(--forest);text-decoration:none}

/* advice */
.advice{display:flex;flex-direction:column;gap:14px}
.advice-card{padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.advice-card .an{width:38px;height:38px;border-radius:11px;background:var(--forest);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:"Space Grotesk",sans-serif;font-weight:700;flex:0 0 auto}
.advice-card .at{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:16.5px;color:var(--forest);margin:0 0 5px;display:flex;align-items:center;gap:10px}
.advice-card .at .tg{font-family:"Hanken Grotesk",sans-serif;font-size:11px;font-weight:600;background:var(--hl);color:var(--signal-ink);border-radius:999px;padding:2px 9px;text-transform:uppercase;letter-spacing:.04em}
.advice-card .ad{font-size:14px;line-height:1.55;color:rgba(22,32,27,.65);margin:0}

/* export banner */
.export-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
  background:var(--forest);border-radius:16px;color:var(--paper);flex-wrap:wrap}
.export-bar .eb-l{display:flex;flex-direction:column;gap:3px}
.export-bar .eb-t{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:17px}
.export-bar .eb-s{font-size:13px;color:rgba(245,244,241,.7)}

.fade-in{animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}