/* ════════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════════ */
:root {
  --bg:       #0b0d14;
  --s0:       #0f111a;
  --s1:       #141720;
  --s2:       #191d2a;
  --s3:       #1e2333;
  --s4:       #242840;
  --bd:       rgba(255,255,255,0.055);
  --bd2:      rgba(255,255,255,0.1);
  --tx:       #dde1f0;
  --tx2:      #8890aa;
  --tx3:      #4a5070;
  --ac:       #7060f2;
  --ac2:      #9580ff;
  --acg:      rgba(112,96,242,0.2);
  --acs:      rgba(112,96,242,0.08);
  --cyan:     #00c8e0;
  --ok:       #2dd4a0;
  --err:      #f06b6b;
  --warn:     #f5a623;
  --ease:     cubic-bezier(.22,.68,0,1.2);
  --ease2:    cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;overflow:hidden}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--tx3)}

/* ════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════ */
#hdr {
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:52px;
  background:rgba(11,13,20,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;padding:0 1.1rem;gap:.6rem;
}
.logo {
  font-family:'DM Serif Display',serif;
  font-size:1.05rem;letter-spacing:-.02em;
  color:var(--tx);flex-shrink:0;
  display:flex;align-items:center;gap:1px;
}
.logo-dot {
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--ac),var(--cyan));
  margin-left:2px;margin-bottom:2px;flex-shrink:0;
}
.hdr-mid{flex:1;display:flex;justify-content:center}
.hdr-right{display:flex;gap:.35rem;flex-shrink:0;align-items:center}

/* ── Tab switcher ── */
.tabbar{
  display:flex;
  background:var(--s2);
  border:1px solid var(--bd2);
  border-radius:9px;padding:3px;gap:2px;
}
.tabbar button{
  padding:.3rem .95rem;
  border:none;background:none;
  font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:500;
  color:var(--tx3);border-radius:7px;cursor:pointer;
  transition:all .18s var(--ease2);white-space:nowrap;
}
.tabbar button.on{background:var(--ac);color:#fff;box-shadow:0 2px 10px var(--acg)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.42rem .85rem;border-radius:8px;
  font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:500;
  cursor:pointer;border:none;
  transition:all .16s var(--ease2);white-space:nowrap;
  line-height:1;
}
.btn-p{
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2) 100%);
  color:#fff;box-shadow:0 2px 14px var(--acg);
}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 5px 22px var(--acg)}
.btn-p:active{transform:translateY(0)}
.btn-g{background:var(--s2);color:var(--tx2);border:1px solid var(--bd2)}
.btn-g:hover{background:var(--s3);color:var(--tx)}
.btn-icon{padding:.42rem .5rem}
@media(max-width:600px){.btn .bl{display:none}.btn{padding:.42rem .5rem}}

/* ════════════════════════════════════════════════════
   APP BODY — 2-column split
════════════════════════════════════════════════════ */
#app {
  position:fixed;
  top:52px;left:0;right:0;
  bottom:0;
  display:grid;
  grid-template-columns:380px 1fr;
  overflow:hidden;
}
@media(max-width:1100px){#app{grid-template-columns:330px 1fr}}
@media(max-width:800px){
  #app{grid-template-columns:1fr;bottom:50px}
  #prevPane{display:none}
  #prevPane.mob-show{display:flex}
  #editPane.mob-hide{display:none}
}
@media(min-width:801px){
  #mobNav{display:none!important}
  #prevPane{display:flex!important}
  #editPane{display:flex!important}
}

/* ════════════════════════════════════════════════════
   EDITOR PANE
════════════════════════════════════════════════════ */
#editPane{
  background:var(--s1);
  border-right:1px solid var(--bd);
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;flex-direction:column;
  padding:.9rem;gap:.75rem;
}

/* Section cards */
.card{
  border:1px solid var(--bd);
  border-radius:11px;overflow:hidden;
  background:var(--s2);
  transition:border-color .2s;
}
.card:focus-within{border-color:rgba(112,96,242,.25)}
.card-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .85rem;
  background:var(--s3);
  border-bottom:1px solid var(--bd);
  cursor:pointer;user-select:none;gap:.5rem;
}
.card-hd h3{
  font-size:.65rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx2);
  display:flex;align-items:center;gap:.4rem;
}
.card-dot{
  width:5px;height:5px;border-radius:50%;
  background:linear-gradient(135deg,var(--ac),var(--cyan));flex-shrink:0;
}
.card-chev{
  width:14px;height:14px;color:var(--tx3);
  transition:transform .2s var(--ease2);flex-shrink:0;
}
.card-body{padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.card-body.collapsed{display:none}

/* Template picker */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.75rem}
.tpl{
  border:2px solid var(--bd2);border-radius:8px;
  padding:.4rem;cursor:pointer;
  transition:all .15s var(--ease2);text-align:center;
  background:var(--s1);
}
.tpl.on{border-color:var(--ac);background:var(--acs);box-shadow:0 0 0 1px var(--ac)}
.tpl:hover:not(.on){border-color:var(--tx3)}
.tpl-thumb{
  width:100%;aspect-ratio:3/4;
  border-radius:3px;margin-bottom:.25rem;
  display:flex;flex-direction:column;
  padding:4px;gap:2px;overflow:hidden;
}
.tl{height:3px;border-radius:2px;background:var(--s4)}
.tl.ac{background:linear-gradient(90deg,var(--ac),var(--cyan))}
.tl.thick{height:5px}
.tpl-name{font-size:.62rem;color:var(--tx3);font-weight:500}

/* Inputs */
label{
  display:block;font-size:.62rem;font-weight:600;
  color:var(--tx3);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:.22rem;
}
input,textarea,select{
  width:100%;
  padding:.45rem .65rem;
  border:1px solid var(--bd2);border-radius:7px;
  background:var(--s1);color:var(--tx);
  font-family:'DM Sans',sans-serif;font-size:.8rem;
  outline:none;-webkit-appearance:none;
  transition:border-color .18s,box-shadow .18s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--ac);box-shadow:0 0 0 3px var(--acs);
}
input::placeholder,textarea::placeholder{color:var(--tx3)}
textarea{resize:vertical;min-height:72px;line-height:1.5}
select{cursor:pointer}
select option{background:var(--s2)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media(max-width:340px){.r2{grid-template-columns:1fr}}
.ig{display:flex;flex-direction:column}

/* Item blocks */
.ilist{display:flex;flex-direction:column;gap:.6rem}
.iblk{
  border:1px solid var(--bd);border-radius:9px;
  padding:.75rem;background:var(--s1);
  position:relative;
  animation:fadeUp .18s var(--ease2);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.irem{
  position:absolute;top:.45rem;right:.45rem;
  width:22px;height:22px;border:none;background:none;
  color:var(--tx3);cursor:pointer;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;
  transition:background .14s,color .14s;
}
.irem:hover{background:rgba(240,107,107,.14);color:var(--err)}
.add-btn{
  display:flex;align-items:center;gap:.3rem;
  padding:.4rem .7rem;
  border:1px dashed rgba(112,96,242,.3);border-radius:7px;
  background:none;color:var(--ac);
  font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:500;
  cursor:pointer;width:100%;justify-content:center;
  transition:all .16s var(--ease2);
}
.add-btn:hover{background:var(--acs);border-color:var(--ac)}

/* Character counter */
.char-hint{font-size:.58rem;color:var(--tx3);text-align:right;margin-top:.15rem}
.char-hint.warn{color:var(--warn)}

/* ════════════════════════════════════════════════════
   PREVIEW PANE — FIXED, NO MOVEMENT
════════════════════════════════════════════════════ */
#prevPane{
  background:#1a1c26;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* prevent any scrolling of the pane itself */
}

/* Top bar inside preview */
.prev-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .9rem;
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
  background:var(--s1);
  gap:.5rem;
}
.prev-lbl{
  font-size:.62rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);
  display:flex;align-items:center;gap:.4rem;
}
.prev-lbl::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 6px var(--ok);
  animation:pulse 2s ease infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.prev-actions{display:flex;gap:.3rem;align-items:center}
.zoom-pill{
  display:flex;align-items:center;gap:2px;
  background:var(--s2);border:1px solid var(--bd2);
  border-radius:7px;padding:2px;
}
.zpx{
  width:24px;height:24px;border:none;background:none;
  color:var(--tx2);cursor:pointer;border-radius:5px;
  font-size:.85rem;display:flex;align-items:center;justify-content:center;
  transition:all .13s;
}
.zpx:hover{background:var(--s3);color:var(--tx)}
.zoom-val{font-size:.62rem;color:var(--tx2);padding:0 4px;min-width:30px;text-align:center}

/* Scroll container — this scrolls, not the pane */
#prevScroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.4rem 1rem;
  gap:0;
}

/* The scaler wrapper — this shifts, not position:absolute */
#prevScaler{
  flex-shrink:0;
  transform-origin:top center;
  /* width set dynamically */
}

/* ════════════════════════════════════════════════════
   DOCUMENT (white A4 page)
════════════════════════════════════════════════════ */
.doc-page{
  width:794px;
  background:#ffffff;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 4px 16px rgba(0,0,0,.4);
  border-radius:2px;
  padding:56px 60px 64px;
  position:relative;
  font-size:10.5pt;line-height:1.58;
  color:#18191f;
  font-family:'DM Sans',system-ui,sans-serif;
}

/* Resume document styles */
.R-hd{margin-bottom:22px;padding-bottom:18px;border-bottom:2.5px solid #18191f}
.R-name{font-family:'DM Serif Display',serif;font-size:27pt;line-height:1.08;letter-spacing:-.03em;color:#18191f;margin-bottom:3px}
.R-title{font-size:9.5pt;color:#7060f2;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:9px}
.R-contact{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:8.5pt;color:#64748b;font-family:'DM Mono',monospace}
.R-contact span::before{content:'· ';color:#9ca3af}
.R-contact span:first-child::before{content:''}
.R-sec{margin-bottom:20px}
.R-sec-t{font-size:7pt;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#7060f2;border-bottom:1px solid #e5e7eb;padding-bottom:3px;margin-bottom:11px}
.R-sum{font-size:9.5pt;color:#374151;line-height:1.65}
.E-item{margin-bottom:13px}.E-item:last-child{margin-bottom:0}
.E-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.E-co{font-weight:700;font-size:9.5pt;color:#18191f}
.E-dt{font-size:7.5pt;color:#9ca3af;font-family:'DM Mono',monospace;white-space:nowrap;flex-shrink:0}
.E-role{font-size:9pt;color:#7060f2;font-style:italic;margin:2px 0 3px}
.E-desc{font-size:8.5pt;color:#374151;line-height:1.55}
.E-desc ul{padding-left:13px;margin:0}.E-desc li{margin-bottom:1.5px}
.D-item{margin-bottom:11px}.D-item:last-child{margin-bottom:0}
.D-sch{font-weight:700;font-size:9.5pt;color:#18191f}
.D-deg{font-size:9pt;color:#7060f2;font-style:italic}
.D-yr{font-size:7.5pt;color:#9ca3af;font-family:'DM Mono',monospace}
.D-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.SK-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.SK-cn{font-size:7.5pt;font-weight:700;color:#18191f;margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.SK-ci{font-size:8.5pt;color:#374151;line-height:1.5}
.SK-tag{display:inline-block;background:#f1f5f9;border:1px solid #e2e8f0;padding:1px 7px;border-radius:20px;font-size:7.5pt;color:#475569;margin:1.5px 2px}

/* Cover letter styles */
.CL-bar{position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(180deg,#7060f2 0%,#00c8e0 100%);border-radius:2px 0 0 2px}
.CL-nm{font-family:'DM Serif Display',serif;font-size:13pt;color:#18191f;line-height:1.2}
.CL-info{font-size:8pt;color:#64748b;font-family:'DM Mono',monospace;margin-top:2px}
.CL-dt{font-size:8.5pt;color:#64748b;font-family:'DM Mono',monospace;margin-bottom:18px}
.CL-subj{font-size:10pt;font-weight:700;color:#18191f;border-bottom:1px solid #e5e7eb;padding-bottom:9px;margin-bottom:15px}
.CL-body p{font-size:9.5pt;color:#374151;line-height:1.72;margin-bottom:11px;text-align:justify}
.CL-sig{font-family:'DM Serif Display',serif;font-size:13pt;color:#18191f;font-style:italic;margin-top:3px}

/* ════════════════════════════════════════════════════
   PDF PREVIEW MODAL
════════════════════════════════════════════════════ */
#pdfModal{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease2);
}
#pdfModal.on{opacity:1;pointer-events:all}
.modal{
  background:var(--s2);
  border:1px solid var(--bd2);
  border-radius:14px;
  box-shadow:0 32px 80px rgba(0,0,0,.75);
  width:100%;max-width:880px;
  max-height:92vh;
  display:flex;flex-direction:column;
  transform:scale(.95) translateY(12px);
  transition:transform .22s var(--ease);
  overflow:hidden;
}
#pdfModal.on .modal{transform:scale(1) translateY(0)}
.m-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--bd);flex-shrink:0;
}
.m-title{font-size:.82rem;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:.4rem}
.m-badge{
  font-size:.58rem;padding:.1rem .45rem;
  background:rgba(45,212,160,.12);color:#2dd4a0;
  border-radius:20px;font-weight:600;letter-spacing:.04em;
}
.m-x{
  width:28px;height:28px;border:none;background:var(--s3);
  border-radius:6px;color:var(--tx2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:all .13s;
}
.m-x:hover{background:var(--s4);color:var(--tx)}
.m-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:1.2rem;
  display:flex;justify-content:center;
  background:#181a24;
}
.m-doc-wrap{
  flex-shrink:0;
  transform-origin:top center;
}
/* .m-foot, .m-info, .m-acts — see FORMAT DROPDOWN section */

/* ════════════════════════════════════════════════════
   LOADING SPINNER OVERLAY
════════════════════════════════════════════════════ */
#loadOv{
  position:fixed;inset:0;z-index:700;
  background:rgba(11,13,20,.95);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.8rem;
  backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
#loadOv.on{opacity:1;pointer-events:all}
.spinner{
  width:38px;height:38px;
  border:3px solid var(--s4);
  border-top-color:var(--ac);
  border-radius:50%;animation:spin .65s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-msg{font-size:.8rem;color:var(--tx2)}
.spin-sub{font-size:.7rem;color:var(--tx3)}

/* ════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════ */
#toast{
  position:fixed;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  right:1rem;z-index:800;
  background:var(--s4);color:var(--tx);
  padding:.6rem 1rem;border-radius:10px;
  font-size:.76rem;
  border:1px solid var(--bd2);
  box-shadow:0 8px 28px rgba(0,0,0,.55);
  display:flex;align-items:center;gap:.4rem;
  transform:translateY(60px);opacity:0;
  transition:all .26s var(--ease2);
  max-width:calc(100vw - 2rem);
  pointer-events:none;
}
#toast.on{transform:translateY(0);opacity:1}
@media(max-width:800px){#toast{bottom:calc(50px + .8rem + env(safe-area-inset-bottom))}}

/* ════════════════════════════════════════════════════
   MOBILE NAV
════════════════════════════════════════════════════ */
#mobNav{
  position:fixed;bottom:0;left:0;right:0;z-index:150;
  height:50px;
  background:rgba(11,13,20,.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--bd);
  display:none;align-items:stretch;
}
.mn-btn{
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:2px;
  border:none;background:none;
  color:var(--tx3);
  font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:500;
  cursor:pointer;padding:.5rem;
  transition:color .16s;
}
.mn-btn svg{width:17px;height:17px}
.mn-btn.on{color:var(--ac)}

/* Progress bar at top of page (for PDF gen) */
#progBar{
  position:fixed;top:52px;left:0;z-index:250;
  height:2px;width:0%;
  background:linear-gradient(90deg,var(--ac),var(--cyan));
  transition:width .3s var(--ease2);
  pointer-events:none;
}

/* Divider utility */
.mt{margin-top:.45rem}

/* Subtle section number badges */
.sec-count{
  margin-left:auto;
  font-size:.58rem;padding:.1rem .4rem;
  background:var(--s4);color:var(--tx3);
  border-radius:20px;font-weight:600;
}

/* ════════════════════════════════════════════════════
   MODAL FOOTER — FORMAT DROPDOWN + ACTIONS
════════════════════════════════════════════════════ */

/* Footer: info row on top, actions row on bottom */
.m-foot {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}
.m-info {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--tx3);
}
.m-info svg { flex-shrink: 0; color: var(--ok); }

/* Actions row: format picker LEFT, buttons RIGHT — always one line on desktop */
.m-acts {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;        /* single row on desktop */
}
.fmt-wrap {
  display: flex; align-items: center;
  gap: .4rem;
  flex: 1;                  /* takes remaining space */
  min-width: 0;
}
.fmt-label {
  font-size: .6rem; font-weight: 700;
  color: var(--tx3); letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
  flex-shrink: 0;
}
.fmt-sel-wrap {
  position: relative; display: flex; align-items: center;
  flex: 1; min-width: 0;
}
.fmt-indicator {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ac); pointer-events: none;
  transition: background .2s; flex-shrink: 0;
}
#fmtSelect {
  -webkit-appearance: none; appearance: none;
  width: 100%;                /* fills .fmt-sel-wrap */
  padding: .38rem 1.8rem .38rem 1.5rem;
  border-radius: 8px; border: 1px solid var(--bd2);
  background: var(--s3); color: var(--tx);
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem; font-weight: 600;
  cursor: pointer; outline: none;
  transition: border-color .15s, box-shadow .15s;
  /* No fixed min-width — let it shrink to fit */
}
#fmtSelect:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acs); }
#fmtSelect option { background: var(--s2); color: var(--tx); }
.fmt-chevron {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; color: var(--tx3); pointer-events: none;
}

/* Buttons — fixed size, never shrink */
.m-acts .btn { flex-shrink: 0; white-space: nowrap; }

/* Mobile: stack to two rows */
@media (max-width: 520px) {
  .m-acts {
    flex-wrap: wrap;
    gap: .45rem;
  }
  .fmt-wrap {
    width: 100%;
    flex: none;
    order: 0;               /* format row goes first */
  }
  .m-acts .btn-g { order: 1; flex: 1; justify-content: center; }
  .m-acts .btn-p { order: 2; flex: 1; justify-content: center; }
}

/* Extra small — shrink label text on download button */
@media (max-width: 360px) {
  #dlBtnLabel { display: none; }
  .m-acts .btn-p { padding: .42rem .7rem; }
}

#loadOv .spin-msg { font-size: .85rem; color: var(--tx2); }
.m-badge { padding: .1rem .5rem; }