:root{
  --bg:#0f172a; --panel:#1e293b; --card:#16213a; --ink:#e8eefc; --muted:#94a3b8;
  --accent:#2563eb; --accent2:#38bdf8; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;background:linear-gradient(180deg,#0b1226,#0f172a 30%);color:var(--ink);min-height:100vh}
h2{font-size:1.05rem;margin:.2rem 0 .8rem}
.muted{color:var(--muted)}
.fineprint{color:var(--muted);font-size:.82rem}

/* ---------- top bar ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.4rem;background:rgba(15,23,42,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;border-bottom:1px solid #243352}
.brand{display:flex;gap:.7rem;align-items:center}
.brand .logo{font-size:1.7rem}
.brand strong{font-size:1.25rem;display:block;line-height:1}
.brand small{color:var(--muted);font-size:.75rem}
.topbar-right{display:flex;gap:.8rem;align-items:center}
.price-pill{background:#052e1b;border:1px solid #14532d;color:#4ade80;border-radius:999px;padding:.35rem .9rem;font-weight:700}
.price-pill em{font-style:normal;font-weight:400;font-size:.75rem;opacity:.85}

.hero-strip{background:linear-gradient(90deg,#1d4ed8,#0ea5e9);padding:.65rem 1.4rem;font-size:.92rem;text-align:center}
.hero-strip p{margin:0}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:minmax(340px,430px) 1fr;gap:1.2rem;padding:1.2rem 1.4rem;max-width:1500px;margin:0 auto;align-items:start}
@media(max-width:1020px){.layout{grid-template-columns:1fr}}

/* ---------- editor ---------- */
.editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.editor-actions{display:flex;gap:.5rem}
.card{background:var(--panel);border:1px solid #2a3c5f;border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:.9rem}
.card summary{font-weight:700;cursor:pointer;font-size:1rem;margin:-.2rem 0 .6rem}
.card label{display:block;font-size:.83rem;color:var(--muted);margin:.55rem 0}
.card input[type=text],.card input[type=email],.card input:not([type]),.card textarea{
  width:100%;margin-top:.25rem;background:#0d1628;border:1px solid #334155;color:var(--ink);
  border-radius:8px;padding:.55rem .7rem;font-size:.92rem;font-family:inherit}
.card input:focus,.card textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 2px rgba(56,189,248,.25)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.dyn{border:1px dashed #334155;border-radius:10px;padding:.7rem;margin-bottom:.7rem;position:relative;background:#0d1628}
.dyn .rm{position:absolute;top:.4rem;right:.5rem;background:none;border:none;color:var(--err);cursor:pointer;font-size:1rem}
.dyn h4{margin:.1rem 0 .4rem;font-size:.85rem;color:var(--accent2)}
.tpl-row{display:flex;align-items:center;gap:.8rem;margin-top:.7rem}
.tpl-row .lbl{font-size:.83rem;color:var(--muted);min-width:70px}
.tpl-pick{display:flex;gap:.5rem}
.tpl-btn{background:#0d1628;border:1px solid #334155;color:var(--ink);border-radius:8px;padding:.45rem .9rem;cursor:pointer;font-size:.85rem}
.tpl-btn em{font-style:normal;font-size:.68rem;background:#14532d;color:#4ade80;border-radius:4px;padding:.05rem .3rem;margin-left:.2rem}
.tpl-btn.active{border-color:var(--accent2);background:#0c2a4a;box-shadow:0 0 0 2px rgba(56,189,248,.25)}
input[type=color]{width:44px;height:32px;border:1px solid #334155;border-radius:8px;background:#0d1628;cursor:pointer;padding:2px}
.unlock-banner{background:#052e1b;border:1px solid #14532d;color:#bbf7d0;border-radius:var(--radius);padding:.8rem 1rem;font-size:.9rem}

/* ---------- buttons ---------- */
.btn{border:none;border-radius:9px;padding:.55rem 1.1rem;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .06s,filter .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(90deg,#2563eb,#0ea5e9);color:#fff}
.btn-primary:hover{filter:brightness(1.12)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{background:#0d1628;border:1px solid #334155;color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent2)}
.btn-big{font-size:1rem;padding:.7rem 1.4rem}
.btn-block{width:100%;margin-top:.7rem;padding:.75rem}

/* ---------- preview ---------- */
.preview-wrap{position:sticky;top:76px}
.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;flex-wrap:wrap;gap:.6rem}
.sheet-scale{display:flex;justify-content:center;overflow:auto;max-height:calc(100vh - 220px);padding:.4rem;background:#0a0f1e;border:1px solid #243352;border-radius:var(--radius)}
.sheet{background:#fff;color:#1e293b;width:794px;min-height:1123px;flex-shrink:0;box-shadow:0 12px 40px rgba(0,0,0,.5);font-size:13.5px;line-height:1.45}

/* template: apex */
.tpl-apex .r-head{background:var(--rac,#2563eb);color:#fff;padding:28px 34px}
.tpl-apex .r-head h1{margin:0;font-size:30px;letter-spacing:.5px}
.tpl-apex .r-head .r-title{font-size:15px;opacity:.92;margin-top:2px}
.tpl-apex .r-head .r-contact{font-size:11.5px;opacity:.9;margin-top:8px}
.tpl-apex .r-body{display:grid;grid-template-columns:1fr 225px;gap:0}
.tpl-apex .r-main{padding:24px 28px}
.tpl-apex .r-side{background:#f1f5f9;padding:24px 20px}
.tpl-apex h3.sec{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:var(--rac,#2563eb);border-bottom:2px solid var(--rac,#2563eb);padding-bottom:4px;margin:18px 0 10px}
.tpl-apex h3.sec:first-child{margin-top:0}
.tpl-apex .job{margin-bottom:12px}
.tpl-apex .job .j-head{display:flex;justify-content:space-between;font-weight:700;font-size:13.5px}
.tpl-apex .job .j-co{color:#475569;font-size:12.5px}
.tpl-apex .job ul{margin:6px 0 0;padding-left:18px;font-size:12.8px;color:#334155}
.tpl-apex .edu{margin-bottom:10px;font-size:12.8px}
.tpl-apex .skill-tag{display:inline-block;background:#e2e8f0;border-radius:6px;padding:2px 9px;margin:0 5px 6px 0;font-size:12px}

/* template: classic */
.tpl-classic{padding:40px 48px;font-family:Georgia,"Times New Roman",serif}
.tpl-classic .r-head{text-align:center;border-bottom:3px double #334155;padding-bottom:14px;margin-bottom:16px}
.tpl-classic .r-head h1{margin:0;font-size:30px}
.tpl-classic .r-head .r-title{font-style:italic;color:#475569;margin-top:4px}
.tpl-classic .r-head .r-contact{font-size:11.5px;color:#64748b;margin-top:6px}
.tpl-classic h3.sec{font-size:14px;text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid #94a3b8;padding-bottom:4px;margin:20px 0 10px}
.tpl-classic .job{margin-bottom:12px}
.tpl-classic .job .j-head{display:flex;justify-content:space-between;font-weight:700}
.tpl-classic .job .j-co{font-style:italic;color:#475569;font-size:12.5px}
.tpl-classic .job ul{margin:6px 0 0;padding-left:20px;font-size:13px}
.tpl-classic .edu{margin-bottom:8px}

/* template: slate (ATS minimal) */
.tpl-slate{padding:38px 44px;font-family:Arial,Helvetica,sans-serif}
.tpl-slate .r-head h1{margin:0;font-size:26px}
.tpl-slate .r-head .r-contact{font-size:12px;color:#475569;margin-top:6px}
.tpl-slate h3.sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:#f1f5f9;padding:6px 10px;margin:18px 0 10px;border-left:4px solid var(--rac,#2563eb)}
.tpl-slate .job{margin-bottom:12px}
.tpl-slate .job .j-head{display:flex;justify-content:space-between;font-weight:700;font-size:13.5px}
.tpl-slate .job .j-co{color:#475569;font-size:12.5px}
.tpl-slate .job ul{margin:6px 0 0;padding-left:18px;font-size:12.8px}
.tpl-slate .edu{margin-bottom:8px;font-size:12.8px}
.tpl-slate .skills-line{font-size:12.8px}

/* ---------- footer ---------- */
.footer{text-align:center;padding:1.6rem;color:var(--muted);border-top:1px solid #243352;margin-top:1rem}
.footer p{margin:.3rem 0}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,17,.78);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal-backdrop[hidden]{display:none}
.modal{background:#131f38;border:1px solid #2a3c5f;border-radius:18px;max-width:520px;width:100%;padding:1.8rem;position:relative;max-height:92vh;overflow:auto}
.modal h2{margin-top:0;font-size:1.3rem}
.modal-close{position:absolute;top:.8rem;right:1rem;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer}
.pay-tabs{display:flex;gap:.5rem;margin:1rem 0}
.pay-tab{flex:1;background:#0d1628;border:1px solid #334155;color:var(--ink);border-radius:10px;padding:.65rem;cursor:pointer;font-size:.92rem;font-weight:600}
.pay-tab.active{border-color:var(--accent2);background:#0c2a4a}
.steps{padding-left:1.2rem;font-size:.92rem}
.addr-box{display:flex;gap:.5rem;align-items:center;background:#0d1628;border:1px solid #334155;border-radius:10px;padding:.7rem .8rem;margin:.6rem 0}
.addr-box code{font-size:.78rem;word-break:break-all;flex:1;color:var(--accent2)}
.warn{background:#3a2a08;border:1px solid #92400e;color:#fcd34d;border-radius:10px;padding:.6rem .8rem;font-size:.82rem}
.status{margin-top:.7rem;font-size:.9rem;min-height:1.4em}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}
.status.busy{color:var(--accent2)}
.pay-pane label{font-size:.85rem;color:var(--muted)}
.pay-pane input{width:100%;margin-top:.3rem;background:#0d1628;border:1px solid #334155;color:var(--ink);border-radius:8px;padding:.6rem .7rem;font-family:monospace;font-size:.8rem}

/* ---------- print: only the sheet ---------- */
@page{size:A4;margin:0}
@media print{
  body{background:#fff}
  body *{visibility:hidden}
  #resume-sheet,#resume-sheet *{visibility:visible}
  #resume-sheet{position:absolute;left:0;top:0;width:210mm;min-height:297mm;box-shadow:none;margin:0;--rac:var(--rac,#2563eb)}
  .sheet{font-size:12.5px}
}