/* ============================================================================
   HIREPATH — Design System
   Apple · Stripe · Linear · Framer inspired. Orange-led enterprise SaaS.
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ---- Brand palette ---- */
  --orange:#FF5A2C;
  --orange-600:#F2480F;
  --orange-700:#D63D08;
  --orange-soft:#FFEDE6;
  --ink:#111111;
  --white:#FFFFFF;
  --gray:#F5F5F5;
  --cream:#F8F5F2;

  /* ---- Semantic (light) ---- */
  --bg:#F8F5F2;
  --bg-2:#F2EEEA;
  --surface:#FFFFFF;
  --surface-2:#FBFAF9;
  --glass:rgba(255,255,255,0.65);
  --glass-brd:rgba(17,17,17,0.07);
  --border:#ECE7E2;
  --border-2:#E3DDD7;
  --text:#141210;
  --text-2:#6B635C;
  --text-3:#A39A92;
  --shadow-sm:0 1px 2px rgba(17,17,17,.04),0 1px 3px rgba(17,17,17,.05);
  --shadow:0 2px 8px rgba(17,17,17,.05),0 8px 24px rgba(17,17,17,.05);
  --shadow-lg:0 12px 32px rgba(17,17,17,.10),0 2px 8px rgba(17,17,17,.06);
  --ring:0 0 0 4px rgba(255,90,44,.15);

  /* status */
  --green:#16A34A;  --green-bg:#E7F6EC;
  --blue:#2563EB;   --blue-bg:#E8EFFE;
  --amber:#D97706;  --amber-bg:#FCF1DE;
  --red:#DC2626;    --red-bg:#FCE9E9;
  --violet:#7C3AED; --violet-bg:#F0E9FE;
  --teal:#0D9488;   --teal-bg:#DEF4F1;

  --r-xs:8px; --r-sm:10px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sidebar:256px;
  --topbar:64px;
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

[data-theme="dark"]{
  --bg:#0C0C0E;
  --bg-2:#121215;
  --surface:#161619;
  --surface-2:#1C1C20;
  --glass:rgba(22,22,25,0.66);
  --glass-brd:rgba(255,255,255,0.08);
  --border:#252529;
  --border-2:#2E2E34;
  --text:#F4F2F0;
  --text-2:#A7A29C;
  --text-3:#6F6A66;
  --orange-soft:#3A1d12;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 10px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.6);
  --green-bg:#10241a; --blue-bg:#121d33; --amber-bg:#2b2110;
  --red-bg:#2c1414; --violet-bg:#1f1530; --teal-bg:#0d2724;
}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;font-feature-settings:"cv11","ss01";
  transition:background .4s var(--ease),color .25s var(--ease);
}
h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;color:var(--text)}
.tnum{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg{display:block}
::selection{background:var(--orange);color:#fff}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

/* ============================ APP SHELL ============================ */
.app{display:flex;min-height:100dvh}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar);flex-shrink:0;position:fixed;inset:0 auto 0 0;z-index:60;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease);
}
.sb-brand{display:flex;align-items:center;gap:11px;padding:18px 20px 16px;}
.sb-logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--orange),#FF8A4C);
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(255,90,44,.35);flex-shrink:0}
.sb-logo svg{width:19px;height:19px;stroke:#fff;stroke-width:2.4;fill:none}
.sb-brand b{font-family:'Plus Jakarta Sans';font-weight:800;font-size:17px;letter-spacing:-.03em}
.sb-brand span{color:var(--orange)}
.sb-plan{font-size:10px;font-weight:600;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase;margin-top:1px}

.sb-nav{flex:1;overflow-y:auto;padding:6px 12px 16px}
.sb-group{margin-top:14px}
.sb-group-t{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);padding:6px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:var(--text-2);font-weight:500;font-size:13.5px;position:relative;
  transition:background .15s var(--ease),color .15s var(--ease);width:100%;text-align:left;
}
.nav-item svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;flex-shrink:0;opacity:.85}
.nav-item:hover{background:var(--bg-2);color:var(--text)}
.nav-item.active{background:var(--orange-soft);color:var(--orange-700);font-weight:600}
[data-theme="dark"] .nav-item.active{color:#FFB593}
.nav-item.active svg{opacity:1}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--orange)}
.nav-badge{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--orange);color:#fff;
  padding:1px 7px;border-radius:99px;min-width:18px;text-align:center}
.nav-item.active .nav-badge{background:var(--orange)}
.nav-item:not(.active) .nav-badge{background:var(--bg-2);color:var(--text-2)}

.sb-foot{padding:12px;border-top:1px solid var(--border)}
.sb-upgrade{background:linear-gradient(150deg,#191919,#2a2a2a);border-radius:14px;padding:14px;color:#fff;position:relative;overflow:hidden}
[data-theme="dark"] .sb-upgrade{background:linear-gradient(150deg,#FF5A2C,#D63D08)}
.sb-upgrade::after{content:"";position:absolute;right:-20px;top:-20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,44,.45),transparent 70%)}
[data-theme="dark"] .sb-upgrade::after{background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%)}
.sb-upgrade b{font-size:13px;font-family:'Plus Jakarta Sans';display:block}
.sb-upgrade p{font-size:11.5px;opacity:.7;margin:3px 0 10px}
.sb-upgrade .btn{width:100%;justify-content:center;background:var(--orange);color:#fff;font-size:12px;padding:7px}
[data-theme="dark"] .sb-upgrade .btn{background:#fff;color:var(--ink)}

/* ---- Main ---- */
.main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column}

/* ---- Topbar ---- */
.topbar{
  height:var(--topbar);position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:0 26px;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--glass-brd);
}
.hamb{display:none;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;background:var(--bg-2)}
.hamb svg{width:20px;height:20px;stroke:var(--text);stroke-width:2;fill:none}
.search{flex:1;max-width:440px;position:relative}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--text-3);stroke-width:2;fill:none}
.search input{width:100%;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);
  padding:0 70px 0 38px;color:var(--text);font-size:13.5px;transition:border .15s,box-shadow .15s}
.search input::placeholder{color:var(--text-3)}
.search input:focus{outline:none;border-color:var(--orange);box-shadow:var(--ring);background:var(--surface)}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:inherit;font-size:10.5px;font-weight:600;
  color:var(--text-3);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:2px 6px}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--border);transition:all .15s var(--ease);position:relative}
.icon-btn svg{width:18px;height:18px;stroke:var(--text-2);stroke-width:1.9;fill:none}
.icon-btn:hover{background:var(--bg-2);color:var(--text);transform:translateY(-1px)}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--orange);border:2px solid var(--surface)}
.btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:11px;font-weight:600;font-size:13px;
  transition:all .18s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px;stroke-width:2;fill:none}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 2px 10px rgba(255,90,44,.32)}
.btn-primary:hover{background:var(--orange-600);transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,90,44,.42)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-dark{background:var(--ink);color:#fff}
[data-theme="dark"] .btn-dark{background:#fff;color:var(--ink)}
.btn-sm{height:34px;padding:0 12px;font-size:12.5px;border-radius:9px}

.avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#FF5A2C,#FF9466);color:#fff;
  font-weight:700;display:grid;place-items:center;font-size:14px;cursor:pointer;border:2px solid var(--surface);box-shadow:var(--shadow-sm)}

/* ---- Page wrap ---- */
.page{padding:26px 30px 60px;max-width:1500px;width:100%;margin:0 auto;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:25px;font-weight:800}
.page-head p{color:var(--text-2);font-size:13.5px;margin-top:3px}
.crumb{font-size:11.5px;color:var(--text-3);font-weight:600;letter-spacing:.02em;margin-bottom:6px;display:flex;gap:7px;align-items:center}
.crumb svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}

/* ---- Cards ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-pad{padding:20px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-h h3{font-size:15px;font-weight:700}
.card-h .sub{font-size:12px;color:var(--text-3);margin-top:1px}
.link{color:var(--orange);font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:4px}
.link svg{width:14px;height:14px;stroke-width:2;fill:none}
.link:hover{gap:7px;transition:gap .15s}

.grid{display:grid;gap:18px}

/* ---- Stat cards ---- */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 18px 16px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.stat-top{display:flex;align-items:center;justify-content:space-between}
.stat-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.stat-ic svg{width:19px;height:19px;stroke-width:2;fill:none}
.stat-val{font-family:'Plus Jakarta Sans';font-weight:800;font-size:30px;letter-spacing:-.03em;margin-top:14px;line-height:1}
.stat-lbl{font-size:12.5px;color:var(--text-2);font-weight:500;margin-top:5px}
.trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;padding:3px 7px;border-radius:99px}
.trend svg{width:12px;height:12px;stroke-width:2.4;fill:none}
.trend.up{color:var(--green);background:var(--green-bg)}
.trend.down{color:var(--red);background:var(--red-bg)}
.stat-spark{position:absolute;right:0;bottom:0;left:0;height:34px;opacity:.55}

/* ---- Pills / chips ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;line-height:1.6}
.pill svg{width:11px;height:11px;stroke-width:2.4;fill:none}
.pill.gray{background:var(--bg-2);color:var(--text-2)}
.pill.green{background:var(--green-bg);color:var(--green)}
.pill.blue{background:var(--blue-bg);color:var(--blue)}
.pill.amber{background:var(--amber-bg);color:var(--amber)}
.pill.red{background:var(--red-bg);color:var(--red)}
.pill.violet{background:var(--violet-bg);color:var(--violet)}
.pill.teal{background:var(--teal-bg);color:var(--teal)}
.pill.orange{background:var(--orange-soft);color:var(--orange-700)}
[data-theme="dark"] .pill.orange{color:#FFB593}
.dotc{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ---- Tables ---- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.tbl th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);
  padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-2)}
.co{display:flex;align-items:center;gap:11px}
.co-logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.co b{font-size:13px;font-weight:600}
.co small{color:var(--text-3);font-size:11.5px}
.muted{color:var(--text-3)}

/* ---- Progress / match ---- */
.bar{height:6px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--orange)}
.match{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px}
.match .ring{--p:70;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:800;
  background:conic-gradient(var(--orange) calc(var(--p)*1%),var(--bg-2) 0)}
.match .ring span{width:26px;height:26px;border-radius:50%;background:var(--surface);display:grid;place-items:center}

/* ---- Kanban ---- */
.kan{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.kan-col{flex:0 0 268px;scroll-snap-align:start;background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:10px;display:flex;flex-direction:column;max-height:74vh}
.kan-col-h{display:flex;align-items:center;gap:8px;padding:4px 6px 10px}
.kan-col-h b{font-size:12.5px;font-weight:700}
.kan-col-h .cnt{font-size:11px;font-weight:700;color:var(--text-3);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:1px 7px}
.kan-col-h .add{margin-left:auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--text-3)}
.kan-col-h .add:hover{background:var(--surface);color:var(--orange)}
.kan-list{display:flex;flex-direction:column;gap:9px;overflow-y:auto;padding:2px}
.jcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;cursor:grab;
  box-shadow:var(--shadow-sm);transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s}
.jcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-2)}
.jcard:active{cursor:grabbing}
.jcard.drag{opacity:.4}
.jcard-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.jcard b{font-size:13px;font-weight:600;display:block;line-height:1.3}
.jcard .role{color:var(--text-2);font-size:11.5px}
.jcard-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--text-3)}
.jcard-meta span{display:inline-flex;align-items:center;gap:3px}
.jcard-meta svg{width:12px;height:12px;stroke-width:2;fill:none}
.kan-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px dashed var(--border)}

/* ---- AI panel ---- */
.ai-hero{background:
  radial-gradient(120% 120% at 0% 0%,rgba(255,90,44,.14),transparent 55%),
  radial-gradient(120% 120% at 100% 100%,rgba(124,58,237,.10),transparent 55%),
  var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;position:relative;overflow:hidden}
.ai-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.ai-spark{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--orange),#FF9466);display:grid;place-items:center;box-shadow:0 6px 18px rgba(255,90,44,.4)}
.ai-spark svg{width:24px;height:24px;stroke:#fff;stroke-width:2;fill:none}
.ai-steps{display:flex;flex-direction:column;gap:2px}
.ai-step{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;font-size:13px;transition:background .2s}
.ai-step .n{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--bg-2);color:var(--text-3);flex-shrink:0}
.ai-step.done .n{background:var(--green-bg);color:var(--green)}
.ai-step.active{background:var(--orange-soft)}
.ai-step.active .n{background:var(--orange);color:#fff}
.ai-step .n svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.6;fill:none}
.ai-step b{font-weight:600}.ai-step small{color:var(--text-3);font-size:11px;display:block}

/* match list (AI mapping) */
.mj{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:border .15s,box-shadow .15s}
.mj:hover{border-color:var(--orange);box-shadow:var(--shadow)}
.mj-body{flex:1;min-width:0}
.mj-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mj-actions{display:flex;gap:8px;flex-shrink:0}

/* ---- Segmented ---- */
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px}
.seg button{padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* ---- Resume styles ---- */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:11px}
.res-thumb{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);cursor:pointer;transition:all .18s var(--ease);position:relative}
.res-thumb:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--orange)}
.res-thumb.sel{border-color:var(--orange);box-shadow:var(--ring)}
.res-prev{aspect-ratio:1/1.18;padding:10px;background:var(--surface-2);font-size:5px;line-height:1.5;overflow:hidden}
.res-cap{padding:9px 11px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border)}
.res-cap b{font-size:12px;font-weight:600}
.res-tick{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--orange);display:none;place-items:center}
.res-tick svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none}
.res-thumb.sel .res-tick{display:grid}

/* gauge */
.gauge{width:120px;height:120px;position:relative;margin:0 auto}
.gauge .lbl{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.gauge .lbl b{font-family:'Plus Jakarta Sans';font-size:26px;font-weight:800}
.gauge .lbl small{font-size:10.5px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* activity feed */
.feed{display:flex;flex-direction:column}
.feed-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.feed-row:last-child{border:none;padding-bottom:0}
.feed-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.feed-ic svg{width:15px;height:15px;stroke-width:2;fill:none}
.feed-row p{font-size:12.5px;line-height:1.45}.feed-row b{font-weight:600}
.feed-row time{font-size:11px;color:var(--text-3);margin-top:2px;display:block}

/* timeline */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--border)}
.tl-row{position:relative;padding-bottom:16px}
.tl-row::before{content:"";position:absolute;left:-22px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--orange)}
.tl-row.muted::before{border-color:var(--border-2)}

/* segmented progress dots */
.steps-mini{display:flex;gap:4px}.steps-mini i{flex:1;height:4px;border-radius:99px;background:var(--bg-2)}.steps-mini i.on{background:var(--orange)}

/* integrations */
.intg{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.intg-logo{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;flex-shrink:0;font-size:16px}
.switch{width:42px;height:24px;border-radius:99px;background:var(--border-2);position:relative;transition:background .2s;flex-shrink:0;cursor:pointer}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--spring);box-shadow:var(--shadow-sm)}
.switch.on{background:var(--orange)}.switch.on::after{transform:translateX(18px)}

/* misc layout helpers */
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.gap8{gap:8px}.gap12{gap:12px}.gap6{gap:6px}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.scrim{position:fixed;inset:0;background:rgba(17,17,17,.5);backdrop-filter:blur(2px);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1100px){
  .ai-hero-grid{grid-template-columns:1fr}
}
@media(max-width:920px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-100%);width:256px}
  .sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .hamb{display:flex}
  .search kbd{display:none}
  .page{padding:20px 16px 50px}
}
@media(max-width:600px){
  .page-head h1{font-size:21px}
  .top-actions .btn span.lbl{display:none}
  .stat-val{font-size:26px}
}

/* ---- Resume builder ---- */
.rlbl{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:var(--text-2)}
.ritem{border:1px solid var(--border);border-radius:12px;padding:13px;margin-bottom:10px;background:var(--surface-2)}
.ritem .search input,.ritem input.search{height:38px}
.ritem input,.ritem textarea{width:100%;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;padding:8px 11px}
.ritem input:focus,.ritem textarea:focus{outline:none;border-color:var(--orange);box-shadow:var(--ring)}

/* ---- Profile chip pickers ---- */
.chips-pick{display:flex;flex-wrap:wrap;gap:8px}
.chip-pick{font:inherit;font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:all .15s}
.chip-pick:hover{border-color:var(--orange);color:var(--text)}
.chip-pick.on{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---- Document / cover viewer modal ---- */
.doc-modal-scrim{position:fixed;inset:0;background:rgba(17,17,17,.45);backdrop-filter:blur(3px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.doc-modal-scrim.on{display:flex}
.doc-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.25);width:100%;max-width:640px;padding:20px}
.doc-modal textarea{font-family:'Inter',system-ui,sans-serif}