/* Tessira — studio UI v2
   Implemented from the Claude Design handover: brand palette (#14A38E
   primary / #0E4B44 deep / #DFF4EF mint), Inter UI + Space Grotesk display,
   workspace + editor two-level IA, exact tokens and measurements. */

@font-face { font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Regular.ttf'); font-weight:400; }
@font-face { font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Medium.ttf'); font-weight:500; }
@font-face { font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Bold.ttf'); font-weight:700; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Regular.ttf'); font-weight:400; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Medium.ttf'); font-weight:500; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-SemiBold.ttf'); font-weight:600; }

:root{
  --ink:#1A2421; --body-muted:#5D6B66; --muted:#98A6A1; --faint:#B7C2BE;
  --hairline:#ECF0EF; --divider:#EEF3F1; --input-border:#E2E9E7;
  --wm-navy:#101826; --wm-gray:#9AA6B2;
  --deep:#0E4B44; --primary:#14A38E; --primary-hover:#0E8B77;
  --link:#128470; --link-hover:#0C6B59; --focus-accent:#1AA98C;
  --success:#2FB48C; --mint:#DFF4EF; --tip-tint:#E3F5F0;
  --amber:#E9B23D; --danger-h:#C0524D; --toggle-off:#CFD9D5; --grip:#C3CDC9;
  --page:#F5F7F7; --card:#FFFFFF;
  --ring:0 0 0 3px rgba(26,169,140,0.20);
  --card-shadow:0 1px 2px rgba(23,33,30,0.04);
  --btn-shadow:0 2px 6px rgba(14,75,68,0.28);
  --card-hover:0 10px 28px rgba(14,75,68,0.14);
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{font:400 14px/1.55 'Inter',system-ui,sans-serif;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--link);text-decoration:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

input,select,textarea{
  font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--input-border);border-radius:10px;padding:12px 14px;
  outline:none;width:100%;transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--focus-accent);box-shadow:var(--ring)}
textarea{resize:vertical;line-height:1.6}
select{appearance:none;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat}
::selection{background:var(--mint)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CBD6D2;border-radius:8px;border:2px solid var(--page)}
::-webkit-scrollbar-track{background:transparent}

/* ============================== shell ============================== */
.shell{display:flex;min-height:100vh}
.main{flex:1;min-width:0;padding:30px 40px 60px}

/* ============================== sidebar ============================== */
.side{
  width:302px;flex:none;background:var(--card);border-right:1px solid var(--hairline);
  padding:22px 20px 18px;position:sticky;top:0;height:100vh;overflow:auto;
  display:flex;flex-direction:column;
}
.lockup{display:flex;align-items:center;gap:12px;margin-bottom:26px;cursor:pointer}
.mark{height:50px;width:auto}
.wm-name{font:600 30px/1 'Inter';letter-spacing:-0.015em;color:var(--wm-navy)}
.wm-sub{font:500 8.5px/1 'Inter';letter-spacing:0.315em;text-transform:uppercase;color:var(--wm-gray);margin-top:5px}

.gnav{display:grid;gap:2px;margin-bottom:8px}
.gnav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  font-size:14.5px;font-weight:500;color:#3C4A45;text-align:left;transition:background .15s,color .15s}
.gnav-item svg{width:18px;height:18px;flex:none}
.gnav-item:hover{background:#F4F7F6}
.gnav-item.active{background:var(--mint);color:var(--deep);font-weight:600}

/* Sidebar flex model. NOTHING in the sidebar may shrink: previously every
   .rail-block had flex:1, so a short viewport squeezed them below their
   content height and the contents overlapped each other. Blocks keep their
   natural height and the SIDEBAR scrolls when the window is too short -
   one scrollbar, no nested scrollers, no clipped section list. The account
   chip still sits at the bottom whenever there is free space. */
.rail-block{margin-top:14px;flex:none}
.side > *{flex:none;min-height:auto}
.side{scrollbar-gutter:stable}
.side::-webkit-scrollbar{width:7px}
.side::-webkit-scrollbar-thumb{background:#DCE4E1;border-radius:99px}
.side::-webkit-scrollbar-track{background:transparent}
.rail-label{font:500 10.5px/1 'Space Grotesk';letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);margin:6px 0 10px;padding:0 12px}

.rail-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  font-size:14.5px;font-weight:500;color:#3C4A45;transition:background .15s;user-select:none;
  text-align:left;width:100%}
.rail-row:hover{background:#F4F7F6}
.rail-row.active{background:var(--mint);color:var(--deep);font-weight:600}
.rail-row.off{opacity:.5}
.rail-row.off .rail-name{text-decoration:line-through}
.rail-ic{width:17px;height:17px;flex:none;color:var(--focus-accent)}
.rail-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-align:left}
.rail-row.dragover{background:var(--mint)}

.ws-cv-row{width:100%}
.ws-cv-row .rail-ic{width:16px;height:16px;color:var(--muted)}
.ws-cv-row:hover .rail-ic{color:var(--focus-accent)}

/* grip: 2x3 dot grid, 9x14 */
.grip{display:grid;grid-template-columns:repeat(2,3px);grid-auto-rows:3px;gap:2px 3px;
  width:9px;height:14px;flex:none;cursor:grab;align-content:center}
.grip i{width:3px;height:3px;border-radius:50%;background:var(--grip)}
.grip.hiddengrip{visibility:hidden}
.exp-grip{cursor:grab}

/* status marks: 15px */
.status{width:16px;height:16px;flex:none;border-radius:50%;display:grid;place-items:center}
.status.done{background:var(--mint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FB48C' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.8 4.7L19.5 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:9.5px 9.5px}
.status.pending::after{content:'';width:6px;height:6px;border-radius:50%;background:#D5DEDB}

/* toggles: 32x19 pill, 15px knob */
.switch{position:relative;width:32px;height:19px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.switch i{position:absolute;inset:0;border-radius:20px;background:var(--toggle-off);transition:background .15s}
.switch i::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(23,33,30,.25)}
.switch input:checked+i{background:var(--primary)}
.switch input:checked+i::after{left:15px}
.switch input:focus-visible+i{box-shadow:var(--ring)}
.switch.locked{opacity:.45}
.switch.locked input{cursor:not-allowed}

.data-block{flex:none;border-top:1px solid var(--hairline);margin-top:10px;padding-top:12px}
.danger-row{color:var(--danger-h)}
.danger-row .rail-ic{color:var(--danger-h)}
.danger-row:hover{background:rgba(192,82,77,.08)}
.side-foot{margin-top:10px;padding-top:14px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--body-muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--success);flex:none;transition:background .2s}
.dot.saving{background:var(--amber)}
.dot.error{background:var(--danger-h)}

.back-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--link);
  padding:4px 2px;margin-bottom:16px}
.back-link svg{width:15px;height:15px}
.back-link:hover{color:var(--link-hover)}
.doc-meta{padding:0 2px 6px;border-bottom:1px solid var(--hairline);margin-bottom:6px}
.doc-name{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-sub{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================== page head ============================== */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}
.page-h1{font:600 26px/1.2 'Inter';letter-spacing:-0.01em}
.page-sub{font-size:14.5px;color:var(--body-muted);margin-top:8px}
.head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tpl-pick{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--body-muted)}
.tpl-pick select{width:170px;padding:9px 32px 9px 12px;border-radius:10px}

/* ============================== buttons ============================== */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px 'Inter';border-radius:12px;
  padding:12px 20px;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--primary);color:#fff;box-shadow:var(--btn-shadow)}
.btn.primary:hover{background:var(--primary-hover)}
.btn.secondary{background:var(--card);border-color:#E7EDEB;color:#3C4A45;padding:11px 18px}
.btn.secondary:hover{border-color:var(--primary);color:var(--deep)}
.btn.danger{color:var(--danger-h)}
.btn.danger:hover{background:rgba(192,82,77,.08)}
.btn.sm{padding:8px 14px;font-size:13px}
.link-btn{color:var(--link);font-weight:600;font-size:14.5px;padding:10px 4px;border-radius:8px}
.link-btn:hover{color:var(--link-hover)}
.link-btn.sm{font-size:13.5px;padding:8px 2px}
.rm-link{color:var(--muted);font-weight:500;font-size:13px;padding:4px 8px;border-radius:8px}
.rm-link:hover{color:var(--danger-h)}

/* ============================== cards ============================== */
.card{background:var(--card);border:1px solid var(--hairline);border-radius:16px;box-shadow:var(--card-shadow)}
.card-body{padding:30px 32px}
.card-title-row{display:flex;align-items:center;gap:14px;padding:22px 32px;border-bottom:1px solid var(--divider)}
.card-title{font:600 16.5px 'Inter'}
.ic-tile{width:38px;height:38px;border-radius:11px;background:var(--mint);color:var(--link);display:grid;place-items:center;flex:none}
.ic-tile svg{width:19px;height:19px}
.helper{font-size:13.5px;color:var(--body-muted);margin-bottom:14px}

/* ============================== editor layout ============================== */
.ts-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.col-forms{display:grid;gap:24px;min-width:0}
.col-panel{position:sticky;top:30px;display:grid;gap:24px}

.panel-card{padding:24px;text-align:center}
.panel-title{font-weight:600;font-size:15.5px;margin-top:14px}
.panel-sub{font-size:13px;color:var(--body-muted);margin-top:6px}
.ring-wrap{display:grid;place-items:center}
@property --ring-deg{syntax:'<angle>';initial-value:0deg;inherits:false}
.ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  --ring-deg:0deg;
  background:conic-gradient(var(--deep) var(--ring-deg), #E4EDEA 0deg);
  transition:--ring-deg .9s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion: reduce){ .ring{transition:none} }
.ring-inner{width:72px;height:72px;border-radius:50%;background:var(--card);display:grid;place-items:center}
.ring-inner span{font:700 18px 'Space Grotesk';color:var(--deep)}

.tip-card{background:var(--card);text-align:left;padding:26px 26px 22px}
.tip-head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink);margin-bottom:20px}
.tip-head svg{width:19px;height:19px;color:var(--primary)}
.tip-item{display:flex;gap:16px;align-items:flex-start}
.tip-item + .tip-item{margin-top:20px}
.tip-ic{width:46px;height:46px;flex:none;border-radius:14px;background:var(--mint);color:var(--link);display:grid;place-items:center}
.tip-ic svg{width:21px;height:21px}
.tip-body{min-width:0}
.tip-title{font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.35}
.tip-desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:3px}

/* forms */
.ts-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.f-field label{display:block;font:500 12.5px 'Inter';color:var(--body-muted);margin-bottom:7px}
.f-field .caps-label{font:500 10.5px/1 'Space Grotesk';letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
.f-span{grid-column:1/-1}
.photo-row{display:flex;gap:10px;align-items:center}

/* profile hero card */
.hero-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--hairline);
  border-radius:16px;box-shadow:var(--card-shadow);padding:30px 32px;display:flex;gap:26px;align-items:center}
.mint-corner{position:absolute;top:0;right:0;width:150px;height:150px;background:var(--mint);border-radius:0 0 0 150px}
.hc-photo-wrap{position:relative;z-index:1;flex:none}
.hc-photo{width:104px;height:104px;border-radius:50%;object-fit:cover;background:#EFF4F2;border:1px solid var(--input-border)}
.hc-photo.empty{display:grid;place-items:center;font-size:12px;color:var(--muted);text-align:center;line-height:1.3}
.hc-info{position:relative;z-index:1;min-width:0}
.hc-name{font:600 clamp(21px,2.4vw,28px)/1.2 'Inter';letter-spacing:-0.01em;overflow-wrap:break-word}
.hc-title{font-size:clamp(14.5px,1.3vw,16px);color:var(--body-muted);margin-top:4px;overflow-wrap:break-word}
.hc-contacts{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:16px;font-size:13.5px;color:#33443F}
.hc-contacts>span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cic{width:15px;height:15px;color:var(--focus-accent);flex:none}

/* summary */
.summary-ta{min-height:400px;border-radius:12px;padding:16px 18px;line-height:1.65}
.summary-foot{display:flex;align-items:center;gap:14px;margin-top:14px}
.len-pill{font:600 12px 'Inter';padding:5px 12px;border-radius:999px;background:#EFF3F2;color:var(--body-muted)}
.len-pill.good{background:var(--mint);color:var(--deep)}
.word-count{font-size:12.5px;color:var(--muted)}

/* experience */
.slim-bar{display:flex;align-items:center;gap:14px;border-radius:14px;padding:14px 20px}
.sort-ic{width:18px;height:18px;color:var(--focus-accent);flex:none}
.slim-label{font-weight:500;font-size:14px;flex:1}
.drag-hint{font-size:12.5px;color:var(--muted);margin-right:6px}
.exp-card{padding:24px 28px;margin-bottom:0}
#expList{display:grid;gap:24px}
.exp-card.dragover{outline:2px dashed var(--primary);outline-offset:4px}
.exp-head{display:flex;align-items:center;margin-bottom:14px}
.exp-spacer{flex:1}
.exp-form{gap:18px 26px}
.my-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.my-row select{width:auto;flex:1;min-width:86px;padding:11px 30px 11px 12px}
.my-row.present-on select{opacity:.45}
.present-chk{position:relative;display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--body-muted);
  padding:11px 16px;border:1px solid var(--input-border);border-radius:999px;cursor:pointer;flex:none;user-select:none;
  transition:border-color .15s,background .15s,color .15s,padding .15s}
.present-chk:hover{border-color:var(--primary);color:var(--deep)}
.present-chk input{position:absolute;opacity:0;pointer-events:none}
.present-chk span{display:inline-flex;align-items:center}
.present-chk span::before{content:'';width:0;height:0;opacity:0;margin-right:0;border-radius:50%;
  transition:width .15s,height .15s,opacity .15s,margin-right .15s;
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.8 4.7L19.5 7'/%3E%3C/svg%3E") center/8px no-repeat}
.present-chk:has(input:checked){background:var(--mint);border-color:var(--primary);color:var(--deep)}
.present-chk:has(input:checked) span::before{width:16px;height:16px;opacity:1;margin-right:8px}
.present-chk:has(input:focus-visible){box-shadow:var(--ring)}
.country-select{width:100%}

/* gap advisory — informative, never blocking */
.gap-card{display:flex;gap:16px;padding:20px 22px;background:#FDF8EE;border-color:#F1E3C4;
  opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease}
.gap-card.show{opacity:1;transform:none}
.gap-ic{width:40px;height:40px;flex:none;border-radius:12px;background:#F7ECD4;color:#B98A2B;display:grid;place-items:center}
.gap-ic svg{width:20px;height:20px}
.gap-title{font-weight:600;font-size:14.5px;color:#6E5514}
.gap-row{font-size:13px;color:#7A6428;margin-top:6px}
.gap-row b{font-weight:600}
.gap-note{font-size:12.5px;color:#9A8348;margin-top:10px;line-height:1.5}
.bullets{margin-top:20px;display:grid;gap:10px}
.bullet-row{display:flex;gap:10px;align-items:flex-start}
.b-mark{flex:none;width:9px;height:9px;margin-top:16px;border:1.5px solid var(--focus-accent);border-radius:2.5px}
.bullet-row textarea{min-height:52px;padding:12px 14px;font-size:13.5px}
.b-x{flex:none;color:var(--muted);font-size:16px;line-height:1;padding:10px 8px;border-radius:8px}
.b-x:hover{color:var(--danger-h)}

/* legacy hosts (undesigned sections, interim editors) */
.legacy-host .field label{display:block;font:500 12.5px 'Inter';color:var(--body-muted);margin-bottom:7px}
.legacy-host .grid{display:grid;gap:14px}
.legacy-host .g2{grid-template-columns:1fr 1fr}
.legacy-host .item{border:1px solid var(--hairline);border-radius:12px;background:#FAFCFB;padding:16px;margin-bottom:14px}
.legacy-host .item-head{display:flex;justify-content:flex-end;gap:2px;margin:-6px -6px 8px 0}
.legacy-host .item-head button{color:var(--muted);padding:4px 8px;border-radius:8px;font-size:12.5px}
.legacy-host .item-head button:hover{color:var(--deep);background:var(--mint)}
.legacy-host .item-head button.rm:hover{color:var(--danger-h);background:rgba(192,82,77,.08)}
.legacy-host .add-line{display:inline-flex;align-items:center;gap:7px;color:var(--link);font-weight:600;font-size:13.5px;padding:8px 4px;border-radius:8px}
.legacy-host .add-line::before{content:'+';font-size:15px}
.legacy-host .add-line:hover{color:var(--link-hover)}
.legacy-host .bullet{display:flex;gap:9px;margin-bottom:8px;align-items:flex-start}
.legacy-host .bullet .mark{flex:none;margin-top:16px;width:9px;height:9px;border:1.5px solid var(--focus-accent);border-radius:2.5px}
.legacy-host .bullet textarea{min-height:44px;padding:10px 12px;font-size:13.5px}
.legacy-host .bullet .x{flex:none;margin-top:8px;color:var(--muted);padding:4px 8px;border-radius:8px}
.legacy-host .bullet .x:hover{color:var(--danger-h)}
.legacy-host .chip-row{display:flex;flex-wrap:wrap;gap:6px;padding:9px;border:1px solid var(--input-border);border-radius:10px;background:var(--card)}
.legacy-host .chip-row:focus-within{border-color:var(--focus-accent);box-shadow:var(--ring)}
.legacy-host .chip{display:inline-flex;align-items:center;gap:6px;background:var(--mint);color:var(--deep);border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:500}
.legacy-host .chip button{color:inherit;opacity:.55}
.legacy-host .chip button:hover{opacity:1}
.legacy-host .chip-row input{border:none;box-shadow:none;padding:4px;width:130px;flex:1}
.legacy-host .lang-row{display:grid;grid-template-columns:1fr 1fr 150px 30px;gap:10px;align-items:center;margin-bottom:10px}
.legacy-host .score{display:flex;gap:6px}
.legacy-host .score button{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--input-border);background:var(--card)}
.legacy-host .score button:hover{border-color:var(--focus-accent)}
.legacy-host .score button.on{background:var(--primary);border-color:var(--primary)}
.legacy-host .rm-mini{color:var(--muted);padding:2px 8px;border-radius:8px}
.legacy-host .rm-mini:hover{color:var(--danger-h)}
.legacy-host .int-row{display:grid;grid-template-columns:118px 1fr 30px;gap:10px;align-items:start;margin-bottom:10px}
.legacy-host .icon-pick{position:relative}
.legacy-host .icon-pick .cur{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--input-border);border-radius:10px;background:var(--card);font-size:12.5px}
.legacy-host .icon-pick .cur:hover{border-color:var(--focus-accent)}
.legacy-host .icon-pick .cur svg,.legacy-host .icon-menu svg{width:16px;height:16px;color:var(--link)}
.legacy-host .icon-menu{position:absolute;z-index:20;top:calc(100% + 5px);left:0;width:238px;max-height:224px;overflow:auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:8px;background:var(--card);
  border:1px solid var(--hairline);border-radius:12px;box-shadow:0 12px 30px rgba(23,33,30,.14)}
.legacy-host .icon-menu button{display:grid;place-items:center;padding:9px 0;border-radius:8px}
.legacy-host .icon-menu button:hover{background:var(--mint)}
.legacy-host .empty{color:var(--muted);font-size:13px;padding:2px 0 8px}

/* ============================== workspace ============================== */
.hero{position:relative;overflow:hidden;border-radius:20px;padding:44px 48px;color:#fff;
  background:linear-gradient(115deg,#0E4B44,#126B5C,#17A08C);margin-bottom:34px}
.hero-blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.hero-blob.b1{width:280px;height:280px;right:-70px;top:-120px}
.hero-blob.b2{width:180px;height:180px;right:150px;bottom:-100px;background:rgba(255,255,255,.05)}
.hero-eyebrow{font:500 11px 'Space Grotesk';letter-spacing:0.26em;text-transform:uppercase;color:#8FD9C8;margin-bottom:14px}
.hero-h1{font:700 clamp(28px,5vw,40px)/1.12 'Space Grotesk';letter-spacing:-0.015em}
.hero-sub{font-size:15.5px;line-height:1.6;color:#C8E9E0;margin-top:12px;max-width:520px}
.hero-cta{margin-top:24px;background:#fff;color:var(--deep);border-radius:12px}
.hero-cta:hover{background:var(--mint)}

.ws-headrow{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.ws-h2{font:600 19px 'Inter'}
.ws-count{font-size:13.5px;color:var(--muted)}

.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.cv-card{position:relative;background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:16px;text-align:left;
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--card-shadow);cursor:pointer;
  transition:transform .15s,box-shadow .15s}
.cv-del{position:absolute;z-index:2;top:24px;right:24px;width:32px;height:32px;border-radius:10px;
  background:rgba(255,255,255,.92);color:var(--body-muted);display:grid;place-items:center;
  opacity:0;transition:opacity .15s,color .15s,background .15s;box-shadow:0 2px 8px rgba(23,33,30,.14)}
.cv-del svg{width:15px;height:15px}
.cv-card:hover .cv-del,.cv-del:focus-visible{opacity:1}
.cv-del:hover{color:#fff;background:var(--danger-h)}
.cv-card:hover{transform:translateY(-2px);box-shadow:var(--card-hover)}
.cv-thumb{height:142px;border-radius:12px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,var(--thumb-a,#E7F2EF),var(--thumb-b,#F2F7F5))}
.cv-sheet{width:96px;height:120px;background:#fff;border-radius:6px;box-shadow:0 4px 14px rgba(14,75,68,.14);
  padding:12px 12px;display:flex;flex-direction:column;gap:5px}
.cv-sheet i{display:block;border-radius:2px}
.s-dot{width:12px;height:12px;border-radius:50% !important;background:var(--thumb-accent,#14A38E);margin-bottom:2px}
.s-bar{height:5px;background:#E6ECEA}
.s-gap{height:4px}
.w45{width:45%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}
.cv-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-sub{font-size:12.5px;color:var(--muted);margin-top:-4px}
.cv-metarow{display:flex;align-items:center;gap:10px;margin-top:2px}
.pill{font:600 11.5px 'Inter';padding:4px 10px;border-radius:999px;background:#EFF3F2;color:var(--body-muted);flex:none}
.pill.full{background:var(--mint);color:var(--deep)}
.cv-new{border:1.5px dashed #BCD3CC;border-radius:16px;min-height:238px;display:grid;place-items:center;
  align-content:center;gap:14px;color:var(--body-muted);font-weight:600;font-size:14.5px;
  transition:border-color .15s,background .15s,color .15s}
.cv-new:hover{border-color:var(--primary);background:#FBFDFC;color:var(--deep)}
.cv-new-circle{width:44px;height:44px;border-radius:50%;background:var(--mint);color:var(--deep);display:grid;place-items:center}
.cv-new-circle svg{width:20px;height:20px}

/* ============================== templates page ============================== */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;align-items:stretch}
.tpl-card{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:0;
  display:flex;flex-direction:column;box-shadow:var(--card-shadow);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.tpl-card:hover{transform:translateY(-3px);box-shadow:var(--card-hover)}
.tpl-body{padding:18px 22px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.tpl-card h3{font:600 16.5px 'Inter';display:flex;align-items:center;gap:10px}
.tpl-desc{color:var(--body-muted);font-size:13.5px;flex:1;line-height:1.55}
.tpl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

.tpl-new{border:1.5px dashed #BCD3CC;border-radius:16px;min-height:420px;display:grid;place-items:center;
  align-content:center;gap:14px;color:var(--body-muted);font-weight:600;font-size:14.5px;background:transparent;
  transition:border-color .15s,background .15s,color .15s}
.tpl-new:hover{border-color:var(--primary);background:#FBFDFC;color:var(--deep)}

.accent-ctl{display:flex;align-items:center;gap:9px;padding:10px 0 2px;border-top:1px solid var(--hairline)}
.accent-label{font-size:9.5px;font-weight:600;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-right:2px}
.tint-row{display:inline-flex;gap:6px}
.tint-swatch{width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(23,33,30,.12);transition:transform .12s,box-shadow .12s}
.tint-swatch:hover{transform:scale(1.15)}
.tint-swatch.on{box-shadow:inset 0 0 0 1px rgba(23,33,30,.12),0 0 0 2px #fff,0 0 0 3.5px var(--deep)}
.tint-custom{width:20px;height:20px;border-radius:50%;cursor:pointer;position:relative;border:none;padding:0;
  background:conic-gradient(#E8604C,#D99A2B,#8FBF5A,#14A38E,#4F5FD5,#8E4D9E,#E8604C);
  box-shadow:inset 0 0 0 1px rgba(23,33,30,.12);transition:transform .12s,box-shadow .12s;margin-left:2px}
.tint-custom:hover{transform:scale(1.15)}
.tint-custom.on{box-shadow:inset 0 0 0 1px rgba(23,33,30,.12),0 0 0 2px #fff,0 0 0 3.5px var(--deep)}
.tint-custom::after{content:'';position:absolute;inset:5.5px;border-radius:50%;background:#fff;opacity:.9}
.tint-custom.on::after{opacity:0}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.accent-reset{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--muted);background:none;padding:2px 4px}
.accent-reset:hover{color:var(--deep)}
.kebab-wrap{position:relative;margin-left:auto}
.kebab{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--body-muted);
  background:transparent;border:1px solid transparent;transition:background .12s,border-color .12s}
.kebab:hover{background:#F1F5F4;border-color:var(--hairline)}
.kebab svg{width:17px;height:17px}
.kebab-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:5;background:#fff;
  border:1px solid var(--hairline);border-radius:12px;padding:6px;min-width:150px;
  box-shadow:0 12px 32px rgba(23,33,30,.14);display:flex;flex-direction:column}
.kebab-menu button{text-align:left;font-size:13px;font-weight:500;padding:8px 12px;border-radius:8px;background:none;color:var(--body)}
.kebab-menu button:hover{background:#F1F5F4}
.kebab-menu .km-danger{color:var(--danger-h)}
.kebab-menu .km-danger:hover{background:rgba(192,82,77,.08)}

/* live first-page miniature: a real render of the sample CV, scaled */
.tpl-thumb{position:relative;display:block;width:100%;aspect-ratio:210/240;overflow:hidden;
  background:linear-gradient(110deg,#EEF2F1 30%,#F7FAF9 48%,#EEF2F1 62%);background-size:220% 100%;
  animation:thumbshimmer 1.4s ease-in-out infinite;border-bottom:1px solid var(--hairline);cursor:zoom-in;padding:0}
@keyframes thumbshimmer{0%{background-position:130% 0}100%{background-position:-90% 0}}
.tpl-thumb iframe{position:absolute;top:0;left:0;width:794px;height:1123px;border:0;
  transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .45s ease}
.tpl-thumb.loaded{animation:none;background:#fff}
.tpl-thumb.loaded iframe{opacity:1}
.tpl-thumb::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(23,33,30,.04),inset 0 -26px 26px -26px rgba(23,33,30,.10)}
.tpl-thumb:focus-visible{box-shadow:var(--ring)}
.accent-ctl{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--body-muted);margin-top:2px}
.accent-ctl input[type=color]{width:32px;height:26px;padding:2px;border-radius:8px;cursor:pointer;border:1px solid var(--input-border);background:var(--card)}
.accent-ctl input[type=color]::-webkit-color-swatch-wrapper{padding:1px}
.accent-ctl input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}
.accent-reset{margin-left:auto;color:var(--muted);font-size:11.5px;padding:4px 9px;border-radius:8px}
.accent-reset:hover{color:var(--deep);background:var(--mint)}

/* ============================== modals ============================== */
.modal{position:fixed;inset:0;z-index:50;background:rgba(20,32,29,.42);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px}
.modal-card{background:var(--card);border:1px solid var(--hairline);border-radius:16px;
  width:min(1020px,100%);max-height:94vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px rgba(14,75,68,.20);animation:pop .15s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.995)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.modal-head strong{font:600 15.5px 'Inter'}
.modal-actions{display:flex;gap:8px}
.preview-stage{position:relative}
.preview-card iframe{width:100%;height:min(82vh,1100px);border:none;background:#E9ECEB;display:block}
.preview-loading{position:absolute;inset:0;background:#F5F7F7;display:grid;place-content:center;gap:18px;justify-items:center}
.pl-spinner{width:38px;height:38px;border-radius:50%;border:3.5px solid #DCE7E3;border-top-color:var(--primary);animation:plspin .8s linear infinite}
@keyframes plspin{to{transform:rotate(360deg)}}
.pl-label{font-size:13.5px;font-weight:500;color:var(--body-muted)}
.pl-bar{width:240px;height:6px;border-radius:99px;background:#E4EDEA;overflow:hidden}
.pl-bar i{display:block;height:100%;width:40%;border-radius:99px;background:var(--primary);animation:plslide 1.2s ease-in-out infinite}
@keyframes plslide{0%{margin-left:-40%}100%{margin-left:100%}}
.pl-spin-wrap{display:grid;gap:18px;justify-items:center}
.pl-error{display:grid;gap:12px;justify-items:center;max-width:380px;text-align:center;padding:0 20px}
.pl-err-ic{width:46px;height:46px;border-radius:14px;background:#F7ECD4;color:#B98A2B;display:grid;place-items:center}
.pl-err-ic svg{width:22px;height:22px}
.pl-err-title{font-weight:600;font-size:15.5px}
.pl-err-msg{font-size:13.5px;color:var(--body-muted);line-height:1.55}
.pl-err-actions{display:flex;gap:10px;margin-top:4px}
.pl-err-note{font-size:12px;color:var(--muted);line-height:1.5}
.seg{display:flex;gap:2px;background:#EFF3F2;border:1px solid var(--hairline);border-radius:10px;padding:3px}
.seg button{padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--body-muted)}
.seg button.on{background:var(--card);color:var(--deep);box-shadow:0 1px 2px rgba(23,33,30,.10)}
.delete-card{width:min(460px,100%);padding:30px 30px 26px;text-align:center;display:block}
.del-icon{width:52px;height:52px;border-radius:16px;background:rgba(192,82,77,.10);color:var(--danger-h);
  display:grid;place-items:center;margin:0 auto 16px}
.del-icon svg{width:24px;height:24px}
.del-title{font:600 17px 'Inter';margin-bottom:8px}
.del-msg{font-size:13.5px;color:var(--body-muted);line-height:1.6;margin-bottom:22px}
.del-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn.danger-solid{background:var(--danger-h);color:#fff}
.btn.danger-solid:hover{background:#A8443F}
.editor-card textarea{flex:1;min-height:56vh;border:none;border-radius:0;background:#101715;color:#DCE7E3;
  caret-color:var(--focus-accent);font:12.5px/1.55 ui-monospace,'SF Mono',Menlo,Consolas,monospace;padding:16px}
.editor-card textarea:focus{box-shadow:none}
.editor-meta{display:flex;gap:8px;flex:1}
.editor-meta .in{padding:9px 12px;font-size:13px}
.editor-meta .in.wide{flex:1}
.editor-meta .in:first-child{width:200px;flex:none}
.editor-foot{padding:9px 16px;border-top:1px solid var(--hairline);font-size:11.5px;color:var(--body-muted);background:#F8FBFA}
.editor-foot code{color:var(--deep);background:var(--mint);border-radius:5px;padding:1px 5px;font-size:11px}

/* ============================== responsive ============================== */
@media (max-width:1180px){
  .ts-cols{grid-template-columns:1fr}
  .col-panel{position:static;grid-template-columns:1fr 1fr;order:2}
}
@media (max-width:1024px){
  .side{width:260px}
  .main{padding:24px}
}
@media (max-width:820px){
  .col-panel{grid-template-columns:1fr}
}
@media (max-width:760px){
  .shell{flex-direction:column}
  .side{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--hairline)}
  #wsCvRail,#jobsCvRail{display:none}
  #view-workspace .gnav,#view-jobs .gnav{display:flex;gap:6px}
  .main{padding:20px 16px 60px}
  .page-head{flex-direction:column;align-items:stretch}
  .ts-form{grid-template-columns:1fr}
  .hero-card{flex-direction:column;align-items:flex-start}
  .hero{padding:30px 24px}
  .legacy-host .g2,.legacy-host .lang-row,.legacy-host .int-row{grid-template-columns:1fr}
}
/* ============================== entrance choreography ============================== */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.main>*,
.col-forms>*, .col-panel>*,
.cv-grid>*, .tpl-grid>*,
#expList>*,
.rail-block .rail-row, .gnav-item{
  animation:rise .5s cubic-bezier(.16,1,.3,1) backwards;
}
.main>*:nth-child(1){animation-delay:.02s}
.main>*:nth-child(2){animation-delay:.10s}
.main>*:nth-child(3){animation-delay:.18s}
.col-forms>*:nth-child(1){animation-delay:.05s}
.col-forms>*:nth-child(2){animation-delay:.13s}
.col-forms>*:nth-child(3){animation-delay:.21s}
.col-forms>*:nth-child(4){animation-delay:.29s}
.col-panel>*:nth-child(1){animation-delay:.16s}
.col-panel>*:nth-child(2){animation-delay:.26s}
.cv-grid>*:nth-child(1),.tpl-grid>*:nth-child(1),#expList>*:nth-child(1){animation-delay:.06s}
.cv-grid>*:nth-child(2),.tpl-grid>*:nth-child(2),#expList>*:nth-child(2){animation-delay:.14s}
.cv-grid>*:nth-child(3),.tpl-grid>*:nth-child(3),#expList>*:nth-child(3){animation-delay:.22s}
.cv-grid>*:nth-child(4),.tpl-grid>*:nth-child(4),#expList>*:nth-child(4){animation-delay:.30s}
.cv-grid>*:nth-child(n+5),.tpl-grid>*:nth-child(n+5),#expList>*:nth-child(n+5){animation-delay:.38s}
.rail-block .rail-row:nth-child(1){animation-delay:.05s}
.rail-block .rail-row:nth-child(2){animation-delay:.10s}
.rail-block .rail-row:nth-child(3){animation-delay:.15s}
.rail-block .rail-row:nth-child(4){animation-delay:.20s}
.rail-block .rail-row:nth-child(n+5){animation-delay:.25s}
#railOptional .rail-row:nth-child(1){animation-delay:.22s}
#railOptional .rail-row:nth-child(2){animation-delay:.27s}
#railOptional .rail-row:nth-child(3){animation-delay:.32s}
#railOptional .rail-row:nth-child(n+4){animation-delay:.37s}
.gnav-item:nth-child(1){animation-delay:.03s}
.gnav-item:nth-child(2){animation-delay:.08s}
/* elements that choreograph themselves stay out of the stagger */
#gapCard{animation:none}
.preview-loading, .modal{animation-delay:0s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

.signout-row{display:flex;align-items:center;gap:9px;font:500 13px 'Inter';color:var(--body-muted);
  padding:8px 10px;border-radius:10px;margin-top:6px;transition:background .12s,color .12s}
.signout-row:hover{background:#F1F5F4;color:var(--deep)}
.signout-row svg{width:15px;height:15px}

/* ============================== account identity ============================== */
.avatar-btn{width:42px;height:42px;border-radius:50%;position:relative;overflow:hidden;cursor:pointer;flex:none;
  background:linear-gradient(135deg,#0E7263,#2FB48C);display:grid;place-items:center;padding:0;border:none;
  box-shadow:0 2px 8px rgba(14,75,68,.22),0 0 0 2px #fff;transition:transform .14s,box-shadow .14s}
.avatar-btn:hover{transform:scale(1.06);box-shadow:0 4px 14px rgba(14,75,68,.30),0 0 0 2px #fff}
.avatar-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-fallback{font:600 16px 'Inter';color:#fff;letter-spacing:.02em}
.avatar-btn.sm{width:32px;height:32px;box-shadow:0 1px 4px rgba(14,75,68,.18)}
.avatar-btn.sm .avatar-fallback{font-size:13px}
.avatar-btn.xl{width:96px;height:96px;cursor:default}
.avatar-btn.xl:hover{transform:none}
.avatar-btn.xl .avatar-fallback{font-size:34px}

.acct-corner{position:absolute;top:26px;right:34px;z-index:20}
#view-workspace .main{position:relative}
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:30;background:#fff;border:1px solid var(--hairline);
  border-radius:14px;min-width:210px;padding:6px;box-shadow:0 18px 44px rgba(23,33,30,.16);
  animation:rise .25s cubic-bezier(.16,1,.3,1)}
.acct-menu.up{top:auto;bottom:calc(100% + 10px);right:auto;left:0}
.am-head{padding:10px 12px 8px;border-bottom:1px solid var(--hairline);margin-bottom:5px}
.am-email{font:600 12.5px 'Inter';color:var(--body-muted);word-break:break-all}
.am-item{display:block;width:100%;text-align:left;font:500 13.5px 'Inter';color:var(--body);
  padding:9px 12px;border-radius:9px;background:none;transition:background .12s}
.am-item:hover{background:#F1F5F4}
.am-danger{color:var(--danger-h)}
.am-danger:hover{background:rgba(192,82,77,.08)}

.acct-chip-wrap{position:relative;margin-top:auto;padding-top:10px}
.acct-chip{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:12px;
  background:none;border:1px solid transparent;transition:background .12s,border-color .12s;cursor:pointer}
.acct-chip:hover{background:#F1F5F4;border-color:var(--hairline)}
.acct-email{font:500 12.5px 'Inter';color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}
.acct-chev{width:14px;height:14px;color:var(--muted);flex:none}

.one-col .acct-main{max-width:640px;margin:0 auto;padding:48px 24px 80px}
.acct-main .page-sub{color:var(--body-muted);margin:6px 0 30px}
.acct-card{padding:26px 28px;margin-bottom:20px}
.acct-avatar-row{display:flex;gap:22px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--hairline);margin-bottom:18px}
.aa-title{font:600 15.5px 'Inter'}
.aa-sub{font-size:13px;color:var(--body-muted);margin:4px 0 12px;line-height:1.55}
.aa-actions{display:flex;gap:10px;flex-wrap:wrap}
.acct-rows{display:grid;gap:12px}
.acct-row{display:flex;justify-content:space-between;font-size:13.5px}
.acct-row span{color:var(--body-muted)}
.acct-row b{font-weight:600}
.acct-msg{margin-top:14px;background:#E9F7F1;border:1px solid #CDEBE0;color:#0E5B4C;border-radius:10px;
  padding:11px 13px;font-size:13px}
.acct-msg a{color:inherit;font-weight:600}

/* ===================== My CVs — empty state ===================== */
.cv-empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:38px 24px 46px;background:var(--card);border:1px solid var(--hairline);
  border-radius:26px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(23,33,30,.04)}
.cv-empty::before{content:'';position:absolute;top:-140px;right:-120px;width:360px;height:360px;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--mint),transparent 70%);opacity:.75}
.cv-empty > *{position:relative}

.ce-art{width:190px;height:150px;position:relative;margin-bottom:26px}
.ce-sheet{position:absolute;border-radius:10px;background:#fff;border:1px solid var(--hairline);
  box-shadow:0 8px 24px rgba(23,33,30,.09)}
.ce-sheet.s1{left:38px;top:8px;width:104px;height:138px;padding:13px 12px;display:flex;
  flex-direction:column;gap:7px;z-index:3;animation:ceRise .7s cubic-bezier(.16,1,.3,1) both .1s}
.ce-sheet.s2{left:16px;top:18px;width:96px;height:124px;transform:rotate(-8deg);z-index:2;opacity:.9;
  animation:ceRise .7s cubic-bezier(.16,1,.3,1) both .04s}
.ce-sheet.s3{left:74px;top:20px;width:96px;height:124px;transform:rotate(8deg);z-index:1;opacity:.75;
  animation:ceRise .7s cubic-bezier(.16,1,.3,1) both 0s}
@keyframes ceRise{from{opacity:0;transform:translateY(14px) rotate(0)}}
.ce-band{height:15px;border-radius:4px;background:linear-gradient(120deg,var(--deep),var(--primary));margin-bottom:2px}
.ce-line{height:5px;border-radius:3px;background:#E7ECEA}
.ce-line.w85{width:85%}.ce-line.w75{width:75%}.ce-line.w70{width:70%}
.ce-line.w60{width:60%}.ce-line.w45{width:45%}
.ce-rule{height:1px;background:var(--hairline);margin:3px 0}
.ce-spark{position:absolute;width:12px;height:12px;background:var(--primary);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  animation:ceTwinkle 2.6s ease-in-out infinite}
.ce-spark.sp1{right:6px;top:2px;opacity:.85}
.ce-spark.sp2{left:2px;bottom:16px;width:9px;height:9px;opacity:.6;animation-delay:1.1s}
@keyframes ceTwinkle{0%,100%{transform:scale(.85);opacity:.35}50%{transform:scale(1.1);opacity:.9}}

.ce-title{font:600 25px/1.25 'Space Grotesk','Inter',sans-serif;letter-spacing:-.01em}
.ce-sub{max-width:470px;margin:10px 0 24px;color:var(--body-muted);font-size:14.5px;line-height:1.65}
.ce-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ce-actions .btn svg{width:16px;height:16px;margin-right:7px;vertical-align:-3px}
.ce-hints{list-style:none;margin-top:30px;padding-top:24px;border-top:1px solid var(--hairline);
  display:grid;gap:11px;text-align:left;max-width:470px;width:100%}
.ce-hints li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--body-muted);line-height:1.5}
.ce-dot{width:7px;height:7px;border-radius:2px;background:var(--primary);flex:none;margin-top:6px}
@media (prefers-reduced-motion: reduce){
  .ce-sheet,.ce-spark{animation:none !important}
}

/* ---------------- CV name: inline rename ---------------- */
.doc-name-wrap{display:flex;align-items:center;gap:6px}
.doc-name{flex:1;min-width:0;border-radius:8px;padding:2px 6px;margin:-2px -6px;
  cursor:text;transition:background .12s,box-shadow .12s;outline:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-name:hover{background:#F1F5F4}
.doc-name:focus{background:#fff;box-shadow:var(--ring);white-space:normal;overflow:visible}
.rename-btn{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  color:var(--muted);background:none;opacity:0;transition:opacity .12s,background .12s,color .12s}
.doc-name-wrap:hover .rename-btn{opacity:1}
.rename-btn:hover{background:#F1F5F4;color:var(--deep)}
.rename-btn svg{width:14px;height:14px}

/* ---------------- name-on-create modal ---------------- */
.name-modal #nameInput{width:100%;font:500 15px 'Inter';color:var(--ink);background:#fff;
  border:1px solid var(--input-border);border-radius:12px;padding:12px 14px;outline:none;margin:6px 0 18px}
.name-modal #nameInput:focus{border-color:var(--primary);box-shadow:var(--ring)}
.name-icon{color:var(--deep);background:var(--mint)}

/* ======================= CV OVERVIEW ======================= */
.overview-row{width:100%;display:flex;align-items:center;gap:10px;padding:11px 13px 11px 8px;
  border-radius:10px;background:none;text-align:left;transition:background .12s}
.overview-row:hover{background:#F4F8F7}
.overview-row{margin-bottom:18px}
.overview-row + .rail-label{margin-top:0;padding-top:14px;border-top:1px solid var(--hairline)}
.overview-row.on{background:var(--mint)}
.overview-row.on .rail-name{color:var(--deep);font-weight:600}
.ov-ic{width:17px;height:17px;display:grid;place-items:center;color:var(--primary);flex:none}
.ov-ic svg{width:17px;height:17px}

.ov-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.ov-h1{font:600 32px/1.15 'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em}
.ov-rule{width:1px;height:26px;background:var(--hairline)}
.ov-tpl{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--input-border);
  border-radius:11px;padding-left:14px;position:relative}
.ov-tpl > span{font-size:15px;color:var(--body-muted)}
.ov-tpl select{appearance:none;border:none;background:none;font:600 15px 'Inter';color:var(--ink);
  padding:11px 36px 11px 9px;outline:none;cursor:pointer;border-radius:11px}
.ov-tpl:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
.ov-chev{width:15px;height:15px;position:absolute;right:13px;pointer-events:none;color:var(--body-muted)}
.ov-head .btn svg{width:16px;height:16px;margin-right:7px;vertical-align:-3px}

.ov-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
.ov-card{padding:26px 28px}
.ov-c4{grid-column:span 4}.ov-c8{grid-column:span 8}
.ov-c3{grid-column:span 3}.ov-c12{grid-column:span 12}
.ov-card-title{font:600 18px 'Inter';letter-spacing:-.015em}
.ov-card-title.lg{font-size:20px}
.ov-card-sub{font-size:15px;color:var(--body-muted);line-height:1.6;margin-top:6px;max-width:660px}

.ov-comp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;
  height:100%;justify-content:center;flex-wrap:wrap;min-width:0}
.ov-ring{position:relative;width:132px;height:132px;flex:none}
.ov-ring svg{display:block}
#ovRingArc{transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1)}
.ov-ring-val{position:absolute;inset:0;display:grid;place-items:center;font:600 30px 'Inter';color:var(--ink)}
.ov-legend{list-style:none;display:grid;gap:10px;font-size:14px;max-width:210px;text-align:left;margin-top:13px}
.ov-legend li{display:flex;align-items:center;gap:9px;color:var(--body)}
.ov-legend li.muted{color:var(--muted)}
.ov-legend b{font-weight:600}
.lg-tick{width:15px;height:15px;color:var(--success);flex:none}
.lg-tick svg{width:15px;height:15px}
.lg-tile{width:9px;height:9px;border-radius:2.5px;box-shadow:inset 0 0 0 1.5px #D3DCD9;flex:none;margin:0 3px}
.lg-dash{width:9px;height:1.5px;background:#CBD5D1;flex:none;margin:0 3px}

.ov-todos{display:grid;gap:10px;margin-top:16px}
.ov-todo{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
  background:var(--row-tint,#F4F8F7);width:100%;text-align:left;transition:filter .12s}
.ov-todo:hover{filter:brightness(.985)}
.ov-todo.warn{background:#FDF6E7;color:#8A6410}
.ov-todo svg.ti{width:17px;height:17px;flex:none}
.ov-todo span{flex:1;font-size:14.5px}
.ov-todo .tchev{width:15px;height:15px;color:var(--muted);flex:none}
.ov-more{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font:600 14px 'Inter';
  color:var(--link);background:none;padding:4px 2px}
.ov-more svg{width:14px;height:14px;transition:transform .18s}
.ov-more.open svg{transform:rotate(180deg)}

.ov-stat{padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.ov-stat b{font:600 22px 'Inter'}
.ov-stat span{font-size:14px;color:var(--muted)}

/* ---- AI checks ---- */
.ov-tabs{display:inline-flex;gap:4px;background:#F1F4F4;border-radius:13px;padding:4px}
.ov-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:10px;
  font:600 14.5px 'Inter';color:var(--body-muted);background:transparent;transition:background .14s,color .14s}
.ov-tab svg{width:16px;height:16px}
.ov-tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(23,33,30,.12)}
.ov-mode-head{display:flex;gap:13px;align-items:flex-start;margin:20px 0 18px}
.ov-glyph{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--mint);color:var(--deep)}
.ov-glyph svg{width:17px;height:17px}
.ov-ai.review-mode .ov-glyph{background:#EDF1F2;color:#55697A}

.ov-quiet{background:#FBFCFC;border:1px solid var(--hairline);border-radius:14px;padding:20px 22px}
.ov-caps{font:500 12px 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#A0ACA8}
.ov-checks{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin-top:16px}
.ov-check{display:flex;gap:12px;align-items:flex-start}
.ov-check .ov-ctile{width:32px;height:32px;border-radius:9px;background:#EDF1F2;color:#55697A;
  display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.ov-check .ov-ctile svg{width:16px;height:16px;display:block}
.ov-check b{display:block;font:600 15px 'Inter'}
/* scoped to the text column: a bare ".ov-check span" also matched the icon
   tile and overrode its display/colour */
.ov-check .ov-cbody span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}

.ov-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ov-link{background:none;color:var(--link);font:600 14px 'Inter';padding:2px 4px;border-radius:8px}
.ov-link:hover{color:var(--link-hover)}
.ov-combo-wrap{position:relative}
.ov-combo{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;
  border:1.5px solid var(--input-border);background:#fff;text-align:left;transition:border-color .14s}
.ov-combo.open,.ov-combo:hover{border-color:var(--primary)}
.ov-doc{width:36px;height:36px;border-radius:10px;background:#F1F5F4;color:var(--body-muted);display:grid;place-items:center;flex:none}
.ov-doc svg{width:17px;height:17px}
.ov-combo-text{flex:1;min-width:0}
.ov-combo-text b{display:block;font:600 15px 'Inter';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-combo-text span{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.ov-chip{font:600 12px 'Inter';border-radius:99px;padding:4px 10px;background:var(--mint);color:#0E8B77;flex:none}
.ov-chip.none{background:#F1F4F3;color:var(--muted)}
.ov-pop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:21;background:#fff;
  border:1px solid var(--input-border);border-radius:14px;box-shadow:0 18px 44px rgba(16,40,34,.16);overflow:hidden}
.ov-backdrop{position:fixed;inset:0;z-index:20}
.ov-search{display:flex;align-items:center;gap:9px;padding:12px 14px;background:#F7F9F9}
.ov-search svg{width:15px;height:15px;color:var(--muted);flex:none}
.ov-search input{flex:1;border:none;background:none;outline:none;font:400 14.5px 'Inter';color:var(--ink)}
.ov-count{font-size:12.5px;color:var(--muted);flex:none}
.ov-caps.pop{padding:12px 14px 6px}
.ov-results{max-height:296px;overflow:auto}
.ov-jd{width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;text-align:left;background:none;transition:background .12s}
.ov-jd:hover{background:#F4F8F7}
.ov-jd.on{background:#F4FBF9}
.ov-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #D3DCD9;flex:none;display:grid;place-items:center}
.ov-jd.on .ov-radio{border-color:var(--primary)}
.ov-jd.on .ov-radio::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--primary)}
.ov-jd-text{flex:1;min-width:0}
.ov-jd-text b{display:block;font:600 14.5px 'Inter';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-jd-text span{display:block;font-size:13px;color:var(--muted)}
.ov-empty{padding:18px 14px;font-size:14px;color:var(--body-muted)}
.ov-pop-foot{width:100%;display:flex;align-items:center;gap:8px;padding:13px 14px;background:#FBFCFC;
  border-top:1px solid var(--hairline);font:600 14px 'Inter';color:var(--link)}
.ov-pop-foot svg{width:15px;height:15px}

.ov-fetch{background:#F7FBFA;border:1px solid #DDEDE8;border-radius:14px;padding:18px 20px;margin-bottom:18px}
.ov-fetch b{font:600 15.5px 'Inter'}
.ov-fetch p{font-size:13.5px;color:var(--body-muted);line-height:1.6;margin:5px 0 12px}
.ov-fetch-row{display:flex;gap:10px}
.ov-fetch-row input{flex:1;border:1px solid var(--input-border);border-radius:11px;padding:11px 14px;
  font:400 15px 'Inter';outline:none;background:#fff}
.ov-fetch-row input:focus{border-color:var(--primary);box-shadow:var(--ring)}
.ov-fetch-msg{margin-top:10px;font-size:13.5px;border-radius:10px;padding:10px 12px}
.ov-fetch-msg.ok{background:#E9F7F1;color:#0E5B4C}
.ov-fetch-msg.bad{background:#FCF1F0;color:#8E3B36}
.ov-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ov-fields label,.ov-field-full{display:block;margin-top:14px}
.ov-fields span,.ov-field-full span{display:block;font-size:14px;color:var(--body-muted);margin-bottom:6px}
.ov-fields input,.ov-field-full textarea{width:100%;border:1px solid var(--input-border);border-radius:11px;
  padding:13px 15px;font:400 15px 'Inter';outline:none;background:#fff;resize:vertical}
.ov-fields input:focus,.ov-field-full textarea:focus{border-color:var(--primary);box-shadow:var(--ring)}

.ov-loading{display:flex;align-items:center;justify-content:center;gap:14px;padding:44px 0 46px;
  font-size:15px;color:var(--body-muted)}
.ov-spinner{width:24px;height:24px;border-radius:50%;border:2.5px solid #E2E8EA;border-top-color:var(--primary);
  animation:ovSpin .8s linear infinite;flex:none}
.ov-ai.review-mode .ov-spinner{border-top-color:#55697A}
@keyframes ovSpin{to{transform:rotate(360deg)}}

#ovResult{animation:ovRise .35s cubic-bezier(.16,1,.3,1)}
@keyframes ovRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ov-source{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:12px;background:#F4F8F7;margin-bottom:22px}
.ov-ai.review-mode .ov-source{background:#F3F6F7}
.ov-source svg{width:16px;height:16px;color:var(--body-muted);flex:none}
.ov-source span{flex:1;font-size:14px;color:var(--body)}
.ov-scorewrap{display:flex;gap:34px;flex-wrap:wrap;min-width:0;padding-bottom:24px;border-bottom:1px solid var(--hairline)}
.ov-score-detail{flex:1;min-width:260px}
.ov-verdict{font:600 18px 'Inter'}
.ov-note{font-size:14.5px;color:var(--body-muted);line-height:1.6;margin:6px 0 16px;max-width:460px}
.ov-subs{display:grid;gap:9px;max-width:460px}
.ov-sub{display:grid;grid-template-columns:124px 1fr 34px;align-items:center;gap:10px;font-size:13.5px}
.ov-sub i{height:7px;border-radius:99px;background:var(--hairline);display:block;overflow:hidden}
.ov-sub i b{display:block;height:100%;border-radius:99px;background:var(--primary);transition:width .7s cubic-bezier(.22,1,.36,1)}
.ov-ai.review-mode .ov-sub i b{background:#55697A}
.ov-sub i b.weak{background:#E0A32E}
.ov-sub em{font-style:normal;text-align:right;color:var(--body-muted);font-weight:600}
.ov-ringbig{position:relative;width:140px;height:140px;flex:none}
.ov-ringbig span{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.ov-ringbig b{font:600 36px 'Inter';display:block}
.ov-ringbig i{font-style:normal;font:500 11px 'Inter';letter-spacing:.14em;color:var(--muted);display:block;margin-top:2px}
.ov-grade{width:140px;height:140px;border-radius:24px;background:#EDF1F2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;flex:none;gap:2px}
.ov-grade b{font:600 46px 'Inter';letter-spacing:-.03em;color:#2F3E46;line-height:1}
.ov-grade i{font-style:normal;font:500 11px 'Inter';letter-spacing:.14em;color:var(--muted)}
.ov-bands{display:flex;gap:4px;margin-top:10px}
.ov-bands u{display:block;width:16px;height:5px;border-radius:99px;background:#DDE3E5;text-decoration:none}
.ov-bands u.on{background:#55697A}
.ov-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:22px 0}
.ov-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ov-chips b{font:500 14px 'Inter';border-radius:9px;padding:7px 12px;background:var(--mint);color:#0E7A67}
.ov-chips b.miss{background:#FDF6E7;color:#8A6410}
.ov-advice-wrap{padding-top:6px}
.ov-adv{background:#FBFCFC;border:1px solid var(--hairline);border-radius:14px;padding:18px 20px;margin-top:12px}
.ov-adv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ov-adv-num{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font:600 13px 'Inter';
  background:var(--hairline);color:var(--body-muted);flex:none}
.ov-adv-num.high{background:#FBEBD0;color:#8A6410}
.ov-adv-head b{font:600 16px 'Inter';flex:1;min-width:0}
.ov-pill{font:600 11px 'Inter';letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:4px 9px;
  background:var(--hairline);color:var(--body-muted)}
.ov-pill.high{background:#FBEBD0;color:#8A6410}
.ov-adv p{font-size:14px;color:var(--body-muted);line-height:1.65;margin:9px 0 12px}
.ov-adv-acts{display:flex;gap:14px;align-items:center}
.ov-result-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--hairline);margin-top:6px}
.ov-stamp{font-size:13.5px;color:var(--muted)}
.ov-run{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.ov-hint{font-size:13.5px;color:var(--muted);flex:1;min-width:200px}
.ov-error{margin-top:14px;background:#FCF1F0;color:#8E3B36;border:1px solid #F2D7D4;border-radius:12px;padding:12px 14px;font-size:14px}

@media (max-width:1140px){
  .ov-c4,.ov-c8{grid-column:span 12 !important}
  .ov-c3{grid-column:span 6 !important}
  .ov-comp{flex-direction:row;text-align:left;justify-content:flex-start;gap:24px}
  .ov-legend{margin-top:10px}
}
@media (max-width:900px){
  .ov-checks,.ov-cols,.ov-fields{grid-template-columns:1fr}
  .ov-scorewrap{gap:22px}
}
@media (max-width:760px){
  .ov-grid{gap:16px}
  .ov-card{padding:22px 20px}
  .ov-h1{flex:1 1 100%}
  .ov-rule{display:none}
}
@media (max-width:520px){
  .ov-comp{flex-direction:column;text-align:center}
  .ov-tabs{display:flex;width:100%}
  .ov-tab{flex:1;justify-content:center}
  .ov-c3{grid-column:span 12 !important}
}

.ov-todo.done{background:var(--mint);color:var(--deep);cursor:default}
.ov-todo.done:hover{filter:none}
.ov-loading-text{display:flex;flex-direction:column;gap:4px;text-align:left}
.ov-loading-text b{font-weight:500;color:var(--body)}
.ov-loading-text i{font-style:normal;font-size:13px;color:var(--muted)}
.ov-stale-note{font-size:13px;color:var(--muted);background:#F4F8F7;border-radius:10px;padding:10px 12px;line-height:1.5}

@media (max-height:760px){
  /* tight windows: keep the chip after the content rather than pushed to a
     bottom the user has to scroll past empty space to reach */
  .acct-chip-wrap{margin-top:14px}
}

/* ============================================================
   AI working state — "The read-through"
   A miniature CV page being read top to bottom, with the four
   graded dimensions lighting up beside it. Two cycles run against
   each other (4.6s scan / 12s readout) so the composition never
   repeats identically inside a real wait. Nothing here implies
   progress: the app cannot know it.
   ============================================================ */
.cvo-loader.is-review{--cvoA:#55697A;--cvoSoft:rgba(85,105,122,.13);--cvoTile:#EDF1F2}
.cvo-loader.is-match{--cvoA:#12A38E;--cvoSoft:rgba(18,163,142,.13);--cvoTile:#E4F3EF}
.cvo-loader{padding:34px 0 38px;animation:cvoIn .38s ease both}
.cvo-loader.is-settling{animation:cvoOut .3s ease both}

.cvo-stage{display:flex;align-items:center;justify-content:center;column-gap:40px;row-gap:24px;flex-wrap:wrap}
.cvo-plinth{flex:none;width:232px;height:296px;border-radius:20px;background:#F7F9F9;display:grid;place-items:center}
.cvo-sheet{position:relative;width:208px;height:268px;border-radius:14px;background:#fff;
  border:1px solid #EFF2F1;box-shadow:0 1px 2px rgba(23,33,30,.05),0 10px 30px rgba(23,33,30,.07);
  overflow:hidden;animation:cvoFloat 6s ease-in-out infinite}
.cvo-sheet-pad{position:absolute;inset:0;padding:22px 20px}

.cvo-bar{border-radius:3px;background:#E4EAE8;display:block;
  animation:cvoRead 4.6s cubic-bezier(.4,0,.2,1) infinite}
.cvo-head{display:flex;align-items:center;gap:8px}
.cvo-tess{flex:none;width:7px;height:7px;border-radius:2px;background:var(--cvoA);opacity:.85}
.cvo-mark{position:absolute;right:16px;width:6px;height:6px;border-radius:2px;background:var(--cvoA);
  animation:cvoMark 4.6s ease-out infinite backwards}
.cvo-beam{position:absolute;left:0;right:0;top:-110px;height:110px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--cvoSoft) 76%,var(--cvoSoft) 100%);
  animation:cvoBeam 4.6s linear infinite}
.cvo-beam span{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--cvoA);opacity:.55}

.cvo-readout{width:236px;max-width:100%;display:flex;flex-direction:column;gap:15px}
.cvo-step{display:flex;align-items:center;gap:12px;animation:cvoStep 12s ease-in-out infinite backwards}
.cvo-tile{flex:none;width:22px;height:22px;border-radius:7px;background:var(--cvoTile);display:grid;place-items:center}
.cvo-tile span{width:8px;height:8px;border-radius:2px;background:var(--cvoA)}
.cvo-step-text{flex:1;min-width:0}
.cvo-step-label{display:block;font:500 14.5px 'Inter';color:#3C4A45}
.cvo-sweep{display:block;height:2px;border-radius:2px;margin-top:6px;background:var(--cvoA);
  animation:cvoSweep 12s ease-in-out infinite backwards}

.cvo-captions{margin-top:28px;text-align:center}
.cvo-cap-stack{position:relative;height:24px}
.cvo-cap{position:absolute;inset:0;font:500 15.5px/24px 'Inter';color:#3C4A45;
  animation:cvoCap 12s ease-in-out infinite backwards}
.cvo-sub{font:400 14.5px 'Inter';color:#98A6A1;margin-top:6px}

@keyframes cvoBeam{
  0%{transform:translateY(0);opacity:0}
  5%{opacity:1}
  74%{opacity:1}
  80%{transform:translateY(378px);opacity:0}
  100%{transform:translateY(378px);opacity:0}
}
@keyframes cvoRead{
  0%,10%{background:#E4EAE8;transform:scaleY(1)}
  15%{background:var(--cvoA);transform:scaleY(1.5)}
  40%,90%{background:#C6D0CD;transform:scaleY(1)}
  100%{background:#E4EAE8;transform:scaleY(1)}
}
@keyframes cvoMark{
  0%{opacity:0;transform:translateX(-6px) scale(.6)}
  7%{opacity:1;transform:none}
  74%{opacity:1}
  84%,100%{opacity:0}
}
@keyframes cvoStep{0%{opacity:.38}4%{opacity:1}25%{opacity:1}29%{opacity:.38}100%{opacity:.38}}
@keyframes cvoSweep{0%{width:0;opacity:0}4%{opacity:1}25%{width:100%;opacity:1}31%{width:100%;opacity:0}100%{width:100%;opacity:0}}
@keyframes cvoCap{
  0%{opacity:0;transform:translateY(5px)}
  3%{opacity:1;transform:none}
  30%{opacity:1;transform:none}
  33.4%{opacity:0;transform:translateY(-5px)}
  100%{opacity:0;transform:translateY(-5px)}
}
@keyframes cvoFloat{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes cvoIn{from{opacity:0;transform:translateY(10px) scale(.986)}to{opacity:1;transform:none}}
@keyframes cvoOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px) scale(.992)}}

@media (prefers-reduced-motion:reduce){
  .cvo-loader *,.cvo-loader{animation:none !important}
  .cvo-loader .cvo-beam{opacity:.6 !important;transform:translateY(150px) !important}
  .cvo-loader .cvo-cap{opacity:0 !important}
  .cvo-loader .cvo-cap:first-child{opacity:1 !important}
  .cvo-loader .cvo-step{opacity:1 !important}
  .cvo-loader .cvo-sweep{width:100% !important;opacity:.5 !important}
}

/* while a check runs the whole card is inert - no second run, no mode
   switch, no opening a stored result */
.ov-ai.is-busy .ov-tab,
.ov-ai.is-busy .ov-combo,
.ov-ai.is-busy .ov-link{opacity:.45;pointer-events:none}
.ov-ai.is-busy .btn:disabled{opacity:.55}
.ov-tab:disabled{cursor:default}
.cvo-loader.cvo-reset, .cvo-loader.cvo-reset *{animation:none !important}
.ov-stale{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;margin-bottom:14px;
  background:#FDF6E7;color:#8A6410;font-size:13.5px;line-height:1.5}
.ov-stale svg{width:16px;height:16px;flex:none}

/* ================= "Finish your CV" — finished state =================
   Trigger: completeness >= 100 (the same number the ring and rail read, so
   they cannot disagree). The tint lives on the card itself, so it can never
   get out of step with the state inside it. */
#ovFinishCard.is-done{background:#E8F4F0;box-shadow:inset 0 0 0 1px #D3E7E1}

.ov-done-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ov-done-text{flex:1 1 320px;min-width:0}
.ov-done-title{margin:0;font:600 21px/1.25 'Inter',system-ui,sans-serif;letter-spacing:-.015em;color:#0A4F4A}
.ov-done-body{margin:7px 0 0;font-size:15px;line-height:1.55;color:#41645D;max-width:58ch}
.ov-done-rule{height:1px;background:#D6E9E3;margin:24px 0 18px}

/* the seal: nested squircles, not circles - the tessera is a rounded square */
.cvo-seal{flex:none;position:relative;width:78px;height:78px}
.cvo-seal > span{position:absolute}
.cvo-seal .sl-plinth{inset:0;border-radius:26px;background:rgba(255,255,255,.72);
  animation:cvoPop .55s cubic-bezier(.34,1.4,.64,1) .04s both}
.cvo-seal .halo{inset:0;border-radius:26px;box-shadow:0 0 0 1px #BFDCD4;
  animation:cvoHalo 2.6s ease-out .5s 3 both}
.cvo-seal .sl-ring{inset:10px;border-radius:19px;background:#CFE6E0;
  animation:cvoPop .55s cubic-bezier(.34,1.4,.64,1) .12s both}
.cvo-seal .sl-core{inset:20px;border-radius:13px;background:#0E6E68;display:grid;place-items:center;
  animation:cvoPop .55s cubic-bezier(.34,1.4,.64,1) .2s both}
.cvo-seal path{animation:cvoDraw .5s cubic-bezier(.4,0,.2,1) .42s both}
@keyframes cvoPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes cvoDraw{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@keyframes cvoHalo{0%{opacity:0;transform:scale(.8)}40%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
/* replay only when the state is (re)entered, never on ordinary re-renders */
.cvo-seal.seal-reset,.cvo-seal.seal-reset *{animation:none !important}

.cvo-doneacts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cvo-doneacts button{display:flex;align-items:flex-start;gap:13px;text-align:left;
  padding:15px 16px;border-radius:14px;border:1px solid #DCEBE6;background:#fff;cursor:pointer;
  font-family:inherit;margin:0;transition:border-color .14s,background .14s}
.cvo-doneacts button:hover{border-color:#9FCCC2;background:#FDFFFE}
.cvo-doneacts button:focus-visible{outline:none;border-color:#9FCCC2;box-shadow:0 0 0 3px rgba(20,164,146,.22)}
.cvo-doneacts .da-well{flex:none;width:32px;height:32px;border-radius:10px;background:#EAF4F1;display:grid;place-items:center}
.cvo-doneacts .da-text{flex:1;min-width:0}
.cvo-doneacts .da-title{display:block;font:500 15px 'Inter',system-ui,sans-serif;color:#1A2421}
.cvo-doneacts .da-sub{display:block;font:400 13.5px/1.45 'Inter',system-ui,sans-serif;color:#98A6A1;margin-top:3px}
@media (max-width:900px){.cvo-doneacts{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .cvo-seal *{animation:none !important}
  .cvo-seal .halo{display:none !important}
  .cvo-seal path{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}

/* ==================================================================
   JOB DESCRIPTIONS  /jobs
   A standalone library page. Values follow the design handover.
   ================================================================== */

.jd-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#98A6A1;margin-bottom:18px}
.jd-crumb a{color:#98A6A1;text-decoration:none}
.jd-crumb a:hover{color:#5D6B66}
.jd-crumb svg{width:14px;height:14px;color:#C3D2CD;flex:none}
.jd-crumb span{color:#5D6B66}

.jd-title{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.jd-title-text{flex:1 1 420px;min-width:0}
.jd-title h1{font:600 30px/1.15 'Inter';letter-spacing:-.02em;margin:0}
.jd-title p{font-size:15px;line-height:1.6;color:#7B8884;margin:9px 0 0;max-width:60ch}

/* Filled mint: on its own page this is the primary action (on My CVs it was
   an outline button, because "Create a new CV" was primary there). */
.jd-add{display:inline-flex;align-items:center;gap:9px;background:#14A38E;border:none;
  border-radius:12px;padding:13px 20px;font:600 14.5px 'Inter';color:#fff;cursor:pointer;
  flex:none;box-shadow:0 3px 10px rgba(20,163,142,.24)}
.jd-add:hover{background:#0E8B77}
.jd-add:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(20,163,142,.28)}
.jd-add svg{width:16px;height:16px}
.jd-add.sm{padding:12px 20px;font-size:14px;box-shadow:none}

.jd-eyebrow{font:500 10.5px/1 'Space Grotesk';letter-spacing:.22em;text-transform:uppercase;
  color:#98A6A1;margin-bottom:16px}

/* ---------------- compose ---------------- */
.jd-compose{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(23,33,30,.04);
  padding:22px 24px 24px;margin-bottom:18px}
.jd-fetch{background:#F7FBFA;border:1px solid #DDEDE8;border-radius:12px;padding:14px 15px;margin-bottom:16px}
.jd-fetch-title{font:600 13.5px 'Inter';margin-bottom:3px}
.jd-fetch-sub{font-size:12.5px;color:#7B8884;margin:0 0 10px}
.jd-fetch-msg{font-size:12.5px;color:#8A6410;margin:10px 0 0}
.jd-fetch-msg.err{color:#8E3B36}
.jd-row2{display:flex;gap:10px}
.jd-pair{gap:14px;margin-bottom:14px}
.jd-pair label{flex:1;min-width:0}
.jd-compose label{display:block}
.jd-compose label > span{display:block;font-size:12.5px;color:#7B8884;margin-bottom:6px}
.jd-compose input,.jd-compose textarea{width:100%;background:#FBFCFC;border:1px solid #E7EDEB;
  border-radius:11px;padding:12px 14px;font:400 14px 'Inter';color:var(--ink);box-sizing:border-box}
.jd-compose textarea{font:400 14px/1.6 'Inter';border-radius:12px;padding:13px 15px;resize:vertical}
.jd-compose input:focus,.jd-compose textarea:focus{border-color:#14A38E;outline:none;background:#fff}
.jd-fetch input{flex:1;min-width:0;background:#fff;border-radius:11px;padding:11px 14px}
.jd-fetch input:focus{background:#fff}
.jd-fetch-btn{flex:none;background:#fff;border:1px solid #E7EDEB;border-radius:11px;padding:11px 19px;
  font:600 14px 'Inter';color:#3C4A45;cursor:pointer}
.jd-fetch-btn:hover{border-color:#14A38E;color:#0E4B44}
.jd-fetch-btn[disabled]{opacity:.55;cursor:default}
.jd-field{margin-bottom:0}
.jd-compose-acts{display:flex;align-items:center;gap:14px;margin-top:16px}
.jd-save{background:#14A38E;border:none;border-radius:12px;padding:12px 20px;font:600 14px 'Inter';
  color:#fff;cursor:pointer}
.jd-save:hover{background:#0E8B77}
.jd-cancel{background:none;border:none;font:500 13.5px 'Inter';color:#98A6A1;cursor:pointer;padding:4px 2px}
.jd-cancel:hover{color:#5D6B66}

/* ---------------- toolbar ---------------- */
.jd-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.jd-search{flex:1 1 320px;min-width:0;position:relative}
.jd-search input{width:100%;font:400 14px 'Inter';background:#fff;border:1px solid #E7EDEB;
  border-radius:12px;padding:12px 14px 12px 40px;color:var(--ink);box-sizing:border-box}
.jd-search input:focus{border-color:#14A38E;outline:none}
.jd-search svg{width:17px;height:17px;color:#A8B5B0;position:absolute;left:14px;top:13px;pointer-events:none}
.jd-search input::-webkit-search-cancel-button{cursor:pointer}

/* A native <select> with its chrome stripped, inside a frame we style. The
   open menu stays the OS's, so it is keyboard- and screen-reader-correct for
   free. appearance:none on BOTH properties or WebKit draws its own caret over
   ours; pointer-events:none on the caret or it swallows the click; and the
   focus ring lives on the frame via :focus-within, because the element the
   user actually focuses is the invisible select inside it. */
.jd-sort{flex:none;position:relative;display:flex;align-items:center;background:#fff;
  border:1px solid #E7EDEB;border-radius:12px;padding:0 12px 0 14px;cursor:pointer}
.jd-sort:hover{border-color:#CBDDD8}
.jd-sort:focus-within{border-color:#14A38E;box-shadow:0 0 0 3px rgba(20,163,142,.18)}
.jd-sort > svg:first-child{width:15px;height:15px;color:#A8B5B0;flex:none}
.jd-sort-label{font:500 13.5px 'Inter';color:#98A6A1;margin-left:9px;flex:none}
.jd-sort select{appearance:none;-webkit-appearance:none;border:none;background:none;
  font:600 13.5px 'Inter';color:#3C4A45;padding:12px 26px 12px 8px;margin:0;cursor:pointer;outline:none}
.jd-sort-caret{width:15px;height:15px;color:#8FA39D;position:absolute;right:12px;pointer-events:none}
.jd-count{flex:none;font-size:13px;color:#98A6A1}

/* ---------------- list ---------------- */
/* One container. Dividers are a border-top on the wrapper - never a
   gap-with-background, which paints a seam at the rounded corners. */
.jd-list{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(23,33,30,.04);overflow:hidden}
.jd-item + .jd-item{border-top:1px solid #F1F4F3}
.jd-rowbtn{width:100%;display:flex;align-items:center;gap:15px;padding:16px 20px;background:none;
  border:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.jd-rowbtn:hover{background:#FAFCFB}
.jd-well{flex:none;width:40px;height:40px;border-radius:12px;background:#F1F5F4;display:grid;place-items:center}
.jd-well svg{width:18px;height:18px;color:#5D6B66}
.jd-rowtext{flex:1;min-width:0}
.jd-rowtext b{display:block;font:600 15px 'Inter';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jd-rowtext span{display:block;font-size:12.5px;color:#98A6A1;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jd-chip{flex:none;font:600 11.5px 'Inter';padding:5px 10px;border-radius:99px;
  background:#F1F4F3;color:#98A6A1;white-space:nowrap}
.jd-chip.has{background:#DFF4EF;color:#0E8B77}
.jd-caret{width:17px;height:17px;color:#C3D2CD;flex:none;transition:transform .18s}
.jd-rowbtn[aria-expanded="true"] .jd-caret{transform:rotate(180deg)}

/* 75px left padding = 20 container + 40 icon + 15 gap, so the panel's text
   lines up with the row title and reads as belonging to its row. */
.jd-panel{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:24px;
  padding:4px 20px 22px 75px;animation:jdOpen .22s ease both}
@keyframes jdOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.jd-panel .jd-eyebrow{margin-bottom:10px}
.jd-panel-col{min-width:0}
/* pre-line is required: descriptions are pasted with their own line breaks
   and bullet characters, and re-flowing them destroys that structure. */
.jd-body{max-height:196px;overflow:auto;font:400 13.5px/1.65 'Inter';color:#41504B;
  background:#FBFCFC;border:1px solid #EEF2F1;border-radius:12px;padding:14px 16px;white-space:pre-line}
.jd-panel-acts{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.jd-edit{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #E7EDEB;
  border-radius:11px;padding:9px 15px;font:600 13.5px 'Inter';color:#3C4A45;cursor:pointer}
.jd-edit:hover{border-color:#14A38E;color:#0E4B44}
.jd-edit svg{width:15px;height:15px}
/* Destructive colour on hover only: a red control at rest in a quiet list is
   louder than the action deserves. */
.jd-delete{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  font:500 13.5px 'Inter';color:#98A6A1;cursor:pointer;padding:9px 2px}
.jd-delete:hover{color:#B4453C}
.jd-delete svg{width:15px;height:15px}
.jd-matches{display:grid;gap:8px}
.jd-matches:empty{display:none}
.jd-match{display:flex;align-items:center;gap:11px;background:#FBFCFC;border:1px solid #EEF2F1;
  border-radius:11px;padding:10px 12px;text-decoration:none;color:inherit}
.jd-match:hover{border-color:#BFE8DB;background:#fff}
.jd-match > span:first-child{flex:1;min-width:0;font:500 13.5px 'Inter';
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jd-score{flex:none;font:600 12px 'Inter';padding:3px 8px;border-radius:99px;
  background:#F1F4F3;color:#5D6B66}
.jd-score.good{background:#DFF4EF;color:#0E8B77}
.jd-nomatch{font-size:13px;color:#98A6A1;margin:0 0 12px}
.jd-matchlink{display:inline-flex;align-items:center;gap:8px;font:600 13.5px 'Inter';
  color:#128470;margin-top:12px;text-decoration:none;cursor:pointer}
.jd-matchlink svg{width:15px;height:15px}

/* ---------------- empty / no results ---------------- */
.jd-empty{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(23,33,30,.04);
  padding:56px 40px;text-align:center}
.jd-empty-well{width:58px;height:58px;border-radius:18px;background:#EAF4F1;display:inline-grid;
  place-items:center;margin-bottom:18px}
.jd-empty-well svg{width:24px;height:24px;color:#0E6E68}
.jd-empty h2{font:600 19px/1.3 'Inter';margin:0 0 8px}
.jd-empty p{font-size:14.5px;line-height:1.6;color:#7B8884;max-width:46ch;margin:0 auto 22px}
.jd-none{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(23,33,30,.04);
  padding:46px 30px;text-align:center}
.jd-none h2{font:600 16px 'Inter';margin:0 0 6px}
.jd-none p{font-size:14px;color:#98A6A1;margin:0}

@media (max-width:1024px){
  .jd-panel{grid-template-columns:1fr}
}
@media (max-width:760px){
  .jd-title{flex-direction:column;align-items:flex-start}
  .jd-toolbar{flex-direction:column;align-items:stretch}
  .jd-row2{flex-direction:column}
  .jd-rowbtn{flex-wrap:wrap}
  /* Kept at every width: reducing it makes the panel look detached from its
     row, which is worse than losing the icon alignment once the row wraps. */
  .jd-panel{padding-left:75px}
}
@media (prefers-reduced-motion:reduce){
  .jd-panel{animation:none}
  .jd-caret{transition:none}
}
.jd-body.is-loading{color:#98A6A1;font-style:italic}