:root{
  --ink:#0b1220; --ink2:#33455e; --muted:#6a7c93; --line:#e6ecf4; --wash:#f5f8fc;
  --blue:#1e5bff; --cyan:#12c0e8; --card:#fff; --radius:14px;
  --grad:linear-gradient(118deg,var(--blue),var(--cyan));
  font-family:'Space Grotesk','Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
@font-face{font-family:'Space Grotesk';src:url('./vendor/fonts/space-grotesk.woff2') format('woff2');font-weight:400 700;font-display:swap;}
@font-face{font-family:'Inter';src:url('./vendor/fonts/inter.woff2') format('woff2');font-weight:400 700;font-display:swap;}
*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none!important;}
body{background:var(--wash);color:var(--ink);font-family:'Inter',system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased;}

/* topbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 20px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.02em;}
.brand b{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.pro-badge{font-size:11px;font-weight:700;color:var(--blue);background:#eaf0ff;border:1px solid #d6e2ff;padding:4px 10px;border-radius:999px;letter-spacing:.02em;}
.seg{display:inline-flex;background:#eef2f8;border-radius:10px;padding:3px;}
.seg-btn{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--muted);padding:6px 14px;border-radius:8px;cursor:pointer;}
.seg-btn.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(11,18,32,.1);}
.btn{border:0;border-radius:10px;background:var(--grad);color:#fff;font:inherit;font-weight:700;font-size:14px;padding:10px 18px;cursor:pointer;}
.btn:hover{filter:brightness(1.05);}
.btn:disabled{opacity:.55;cursor:default;filter:none;}
.btn-block{width:100%;padding:13px;}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink2);font:inherit;font-weight:600;font-size:13px;padding:9px 14px;border-radius:10px;cursor:pointer;}
.btn-ghost:hover{border-color:#c7d3e3;}
.btn-ghost.sm{padding:5px 10px;font-size:12px;}
.link-btn{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;margin-top:6px;}

/* layout */
.studio{display:grid;grid-template-columns:minmax(360px,440px) 1fr;height:calc(100vh - 60px);}
.editor{overflow-y:auto;padding:18px;border-right:1px solid var(--line);background:#fbfdff;}
.preview{overflow-y:auto;background:#e9eef5;display:flex;flex-direction:column;}

/* editor cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.card.accent{border-color:#d6e2ff;background:linear-gradient(180deg,#f7faff,#fff);}
.card h3{font-family:'Space Grotesk',sans-serif;font-size:15px;letter-spacing:-.01em;margin-bottom:8px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.card-head h3{margin:0;}
.hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:2px 0 10px;}
.opt{color:var(--muted);font-weight:400;font-size:12px;}
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:10px 0 4px;}
input,textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit;font-size:14px;color:var(--ink);padding:9px 11px;resize:vertical;}
input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,91,255,.12);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid2 label:first-child{margin-top:0;}

/* upload card - the "do the majority of the work" on-ramp */
.upload-card{border-color:#d6e2ff;background:linear-gradient(180deg,#f4f8ff,#fff);}
.upload-inner{display:flex;align-items:center;gap:14px;}
.upload-icon{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 16px rgba(30,91,255,.28);}
.upload-copy{flex:1 1 auto;min-width:0;}
.upload-copy h3{margin:0 0 2px;}
.upload-copy .hint{margin:0;}
.upload-inner .btn{flex:0 0 auto;white-space:nowrap;}
.upload-after{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);flex-wrap:wrap;}
.btn-ghost.ai{display:inline-flex;align-items:center;gap:7px;}
@media (max-width:560px){.upload-inner{flex-direction:column;align-items:stretch;text-align:center;}.upload-inner .btn{width:100%;}.upload-icon{margin:0 auto;}}

/* AI button */
.row-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
.btn.ai{background:#0b1220;display:inline-flex;align-items:center;gap:8px;}
.btn.ai:hover{background:#1a2740;filter:none;}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 8px rgba(30,91,255,.8);}
.ai-status{font-size:12.5px;color:var(--muted);}
.ai-status.err{color:#d64545;}
.ai-status.ok{color:#1f9d63;}

/* experience entries */
.exp{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:#fcfdff;}
.exp .exp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.exp .exp-title{font-size:12px;font-weight:700;color:var(--muted);}
.exp .rm{border:0;background:none;color:#c05050;font-size:12px;cursor:pointer;}
.exp .grid2{margin-bottom:6px;}

/* preview */
.preview-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;background:rgba(233,238,245,.9);backdrop-filter:blur(6px);border-bottom:1px solid #d7deea;}
.preview-label{font-size:13px;font-weight:700;color:var(--ink2);}
.ats-chip{font-size:11.5px;font-weight:700;color:#1f9d63;background:#e7f7ee;border:1px solid #bfe8d0;padding:4px 10px;border-radius:999px;}
.paper-wrap{padding:24px;display:flex;justify-content:center;}
#paper{transform-origin:top center;}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(11,18,32,.55);backdrop-filter:blur(6px);padding:20px;}
.modal-card{background:#fff;border-radius:18px;max-width:420px;width:100%;padding:30px 30px 24px;text-align:center;box-shadow:0 30px 70px rgba(11,18,32,.4);}
.modal-card h2{font-family:'Space Grotesk',sans-serif;font-size:24px;margin:12px 0 8px;letter-spacing:-.02em;}
.modal-card p{color:var(--ink2);font-size:14.5px;line-height:1.55;}
.perks{list-style:none;text-align:left;margin:16px 0;display:grid;gap:8px;}
.perks li{position:relative;padding-left:26px;font-size:14px;color:var(--ink);}
.perks li::before{content:'\2713';position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--grad);color:#fff;font-size:11px;display:grid;place-items:center;}
.modal-fine{font-size:12px;color:var(--muted);margin-top:10px;}

@media (max-width:900px){
  .studio{grid-template-columns:1fr;height:auto;}
  .editor{border-right:0;border-bottom:1px solid var(--line);height:auto;}
  .preview{height:auto;}
}

/* fit status chip */
.preview-meta{display:flex;align-items:center;gap:10px;}
.fit-status{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;}
.fit-status.ok{color:#1f9d63;background:#e7f7ee;border:1px solid #bfe8d0;}
.fit-status.over{color:#c2410c;background:#fff2e8;border:1px solid #ffd7bd;}

/* PRINT: only the pages, full size, one Letter page per sheet, clean breaks */
@media print{
  @page{size:Letter;margin:0;}
  body{background:#fff;}
  .topbar,.editor,.preview-bar,.modal{display:none!important;}
  .studio{display:block;height:auto;}
  .preview{overflow:visible;background:#fff;}
  .paper-wrap{padding:0;display:block;}
  #paper{transform:none!important;zoom:1!important;}
  .page{box-shadow:none!important;margin:0!important;page-break-after:always;break-after:page;}
  .page:last-child{page-break-after:auto;break-after:auto;}
}