/* ==========================================================
   CV Dost — Builder UI, CV templates, print rules
   ========================================================== */
:root{
  --ink:#16123a;--ink-2:#3d3a5c;--muted:#6b6889;--line:#e6e4f0;
  --bg:#f1f0f6;--panel:#ffffff;--brand:#3b2fd9;--brand-2:#2a20b0;--brand-soft:#eeecff;
  --accent:#ff8a3d;--danger:#d92d20;
  --ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --topbar:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand)}

/* ---------- Top bar ---------- */
.topbar{height:var(--topbar);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 18px;position:relative;z-index:30}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.12rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em;flex-shrink:0}
.logo-mark{width:32px;height:32px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:.85rem;font-weight:800;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.logo b{color:var(--accent)}
.design-controls{display:flex;align-items:center;gap:14px;flex:1;justify-content:center;min-width:0}
.ctl{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--muted)}
.ctl select{padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-weight:600;color:var(--ink);cursor:pointer}
.colors{gap:6px}
.color-dot{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0}
.color-dot[aria-checked="true"]{box-shadow:0 0 0 2px var(--ink)}
.actions{display:flex;gap:8px;flex-shrink:0}
.tb-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .15s,border-color .15s}
.tb-btn:hover{border-color:var(--ink-2)}
.tb-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.tb-btn.primary:hover{background:var(--brand-2)}
.tb-btn.wide{width:100%;justify-content:center;padding:13px}
.menu-wrap{position:relative}
.dropdown{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(22,18,58,.14);padding:6px;min-width:220px;z-index:40}
.dropdown button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:.92rem}
.dropdown button:hover{background:var(--bg)}
.dropdown .danger{color:var(--danger)}
.dropdown hr{border:0;border-top:1px solid var(--line);margin:6px 0}

.mobile-tabs{display:none}

/* ---------- Workspace ---------- */
.workspace{display:grid;grid-template-columns:minmax(360px,460px) 1fr;height:calc(100vh - var(--topbar));height:calc(100dvh - var(--topbar))}
.editor{background:var(--bg);overflow-y:auto;padding:16px 16px 40px;border-right:1px solid var(--line)}
.save-state{font-size:.8rem;color:var(--muted);font-weight:600;margin:0 4px 12px;display:flex;align-items:center;gap:6px}
.save-state::before{content:"";width:8px;height:8px;border-radius:50%;background:#0f9d6b}
.save-state.saving::before{background:var(--accent)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.panel>summary{list-style:none;cursor:pointer;padding:15px 16px;font-weight:700;display:flex;align-items:center;gap:10px;user-select:none}
.panel>summary::-webkit-details-marker{display:none}
.panel>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.panel[open]>summary::after{transform:rotate(-135deg)}
.panel>summary .count{background:var(--brand-soft);color:var(--brand);font-size:.75rem;padding:2px 8px;border-radius:999px}
.pi{width:28px;height:28px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font-size:.95rem}
.panel-body{padding:2px 16px 16px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.grid2 .field{margin-bottom:0}
.field.full{grid-column:1/-1}
.field label{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.field label small{font-weight:500;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fbfbfd;font-size:.93rem;transition:border-color .15s,background .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);background:#fff}
.field textarea{resize:vertical;min-height:70px;line-height:1.5}
.hint{font-size:.8rem;color:var(--muted);margin-top:4px}
.hint.center{text-align:center;margin-top:10px}
.check{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;cursor:pointer;margin:6px 0 12px}
.check input{width:16px;height:16px;accent-color:var(--brand)}

.photo-row{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.photo-box{width:84px;height:84px;border-radius:50%;border:2px dashed #cfcce0;display:grid;place-items:center;overflow:hidden;cursor:pointer;flex-shrink:0;color:var(--muted);font-size:.8rem;font-weight:700;background:#fbfbfd}
.photo-box img{width:100%;height:100%;object-fit:cover}
.photo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.photo-actions .check{margin:2px 0 0}
.mini-btn{display:inline-block;padding:7px 12px;border-radius:8px;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:.82rem;border:0;cursor:pointer}
.mini-btn.ghost{background:none;color:var(--muted);padding:2px 0}

.item{border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff}
.item-head{display:flex;align-items:center;gap:6px;padding:10px 10px 10px 14px;cursor:pointer}
.item-title{flex:1;font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-title small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.icon-btn{width:30px;height:30px;border-radius:8px;border:0;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center;flex-shrink:0}
.icon-btn:hover{background:var(--bg);color:var(--ink)}
.icon-btn.del:hover{color:var(--danger);background:#fdecea}
.item-body{padding:0 14px 14px;display:none}
.item.open .item-body{display:block}
.add-btn{width:100%;padding:11px;border:1.5px dashed #c9c5e3;border-radius:12px;background:none;color:var(--brand);font-weight:700;cursor:pointer;font-size:.9rem}
.add-btn:hover{background:var(--brand-soft);border-color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{background:var(--brand-soft);color:var(--brand);font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px}
.editor-foot{padding:6px 2px}

/* ---------- Preview ---------- */
.preview{overflow:auto;padding:28px;display:flex;justify-content:center;align-items:flex-start;background:#e6e5ee;background-image:radial-gradient(#d4d2e2 1px,transparent 1px);background-size:18px 18px}
.preview-scale{transform-origin:top center;flex-shrink:0}

/* ---------- Modal / toast ---------- */
.modal{position:fixed;inset:0;background:rgba(22,18,58,.45);display:grid;place-items:center;z-index:100;padding:16px}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:18px;padding:26px;max-width:440px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-card h3{margin-bottom:12px;font-size:1.2rem}
.modal-card ol{padding-left:20px;margin-bottom:14px;color:var(--ink-2);font-size:.93rem;line-height:1.7}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:all .25s;z-index:120}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================
   CV DOCUMENT
   ========================================================== */
.cv{
  --c:#3b2fd9;            /* accent, set by JS */
  --c-soft:#eeecff;
  --cv-font:'Inter',Arial,sans-serif;
  --cv-head:'Inter',Arial,sans-serif;
  width:210mm;min-height:297mm;background:#fff;color:#1f2330;
  font-family:var(--cv-font);font-size:10pt;line-height:1.45;
  box-shadow:0 10px 40px rgba(22,18,58,.18);
  position:relative;word-wrap:break-word;overflow-wrap:anywhere;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.cv.font-serif{--cv-font:'Source Serif 4',Georgia,serif;--cv-head:'Source Serif 4',Georgia,serif}
.cv.font-round{--cv-font:'Poppins',Arial,sans-serif;--cv-head:'Poppins',Arial,sans-serif;font-size:9.6pt}
.cv h1,.cv h2,.cv h3{font-family:var(--cv-head);color:#11131c}
.cv a{color:inherit;text-decoration:none}
.cv p{margin:0 0 4px}
.cv ul{margin:3px 0 0 16px;padding:0}
.cv li{margin-bottom:2px}
.cv .muted{color:#5d6273}
.cv-empty{display:grid;place-items:center;min-height:297mm;color:#9a9db0;text-align:center;font-family:var(--ui);padding:40px}
.cv-empty b{display:block;font-size:1.3rem;color:#60637a;margin-bottom:6px}

/* page-break guides on screen */
.cv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(297mm - 1px),rgba(217,45,32,.35) calc(297mm - 1px),rgba(217,45,32,.35) 297mm)}

.cv-sec{margin-top:14px}
.cv-sec-title{font-size:10.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c);margin-bottom:7px}
.cv-item{margin-bottom:10px;break-inside:avoid;page-break-inside:avoid}
.cv-item-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cv-item-title{font-weight:700;font-size:10.5pt;color:#11131c}
.cv-item-sub{color:#4a4f60;font-weight:500}
.cv-date{white-space:nowrap;font-size:9pt;color:#5d6273;font-weight:600}
.cv-desc{margin-top:3px;color:#2f3342}
.cv-skills{display:flex;flex-wrap:wrap;gap:5px}
.cv-skill{background:var(--c-soft);color:#1f2330;padding:3px 9px;border-radius:4px;font-size:9pt;font-weight:500}
.cv-contact{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:9pt;color:#4a4f60}
.cv-contact span{display:inline-flex;align-items:center;gap:5px}
.cv-contact svg{width:11px;height:11px;flex-shrink:0;color:var(--c)}
.cv-photo{width:30mm;height:30mm;border-radius:50%;object-fit:cover;flex-shrink:0}
.cv-lang{display:flex;justify-content:space-between;gap:10px;margin-bottom:3px}
.cv-decl{margin-top:18px;break-inside:avoid}
.cv-decl-sign{display:flex;justify-content:space-between;margin-top:14px;font-size:9.5pt}

/* ----- Template: CLASSIC ----- */
.tpl-classic{padding:16mm 17mm}
.tpl-classic .cv-header{text-align:center;padding-bottom:12px;border-bottom:2px solid var(--c)}
.tpl-classic .cv-header.has-photo{display:flex;align-items:center;gap:18px;text-align:left}
.tpl-classic .cv-header.has-photo .cv-contact{justify-content:flex-start}
.tpl-classic h1{font-size:24pt;line-height:1.1;letter-spacing:-.01em}
.tpl-classic .cv-role{font-size:12pt;color:var(--c);font-weight:600;margin:4px 0 8px}
.tpl-classic .cv-contact{justify-content:center}
.tpl-classic .cv-sec-title{border-bottom:1px solid #e3e4ea;padding-bottom:4px}

/* ----- Template: MODERN (sidebar) ----- */
.tpl-modern{display:grid;grid-template-columns:70mm 1fr;background:linear-gradient(to right,#1c1f2e 70mm,#fff 70mm)}
.tpl-modern .cv-side{color:#e7e8ef;padding:16mm 8mm 14mm 9mm}
.tpl-modern .cv-main{padding:16mm 13mm 14mm 11mm}
.tpl-modern .cv-photo{width:36mm;height:36mm;margin:0 auto 12px;display:block;border:3px solid var(--c)}
.tpl-modern .cv-side .cv-sec-title{color:#fff;border-bottom:2px solid var(--c);padding-bottom:4px;font-size:9.5pt}
.tpl-modern .cv-side .cv-contact{flex-direction:column;color:#d6d8e3;gap:7px}
.tpl-modern .cv-side .cv-contact svg{color:var(--c);filter:brightness(1.6)}
.tpl-modern .cv-side .cv-skill{background:rgba(255,255,255,.1);color:#fff}
.tpl-modern .cv-side .cv-item-title{color:#fff;font-size:9.5pt}
.tpl-modern .cv-side .muted,.tpl-modern .cv-side .cv-item-sub,.tpl-modern .cv-side .cv-date{color:#b4b7c7}
.tpl-modern .cv-side p{color:#d6d8e3}
.tpl-modern h1{font-size:25pt;line-height:1.05;letter-spacing:-.02em}
.tpl-modern .cv-role{font-size:12pt;color:var(--c);font-weight:600;margin:5px 0 4px}
.tpl-modern .cv-main .cv-sec-title{display:flex;align-items:center;gap:8px}
.tpl-modern .cv-main .cv-sec-title::after{content:"";flex:1;height:1px;background:#e3e4ea}
.tpl-modern .cv-main .cv-item{padding-left:12px;border-left:2px solid var(--c-soft)}

/* ----- Template: MINIMAL ----- */
.tpl-minimal{padding:17mm 18mm}
.tpl-minimal .cv-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:6px}
.tpl-minimal h1{font-size:26pt;font-weight:800;letter-spacing:-.03em;line-height:1}
.tpl-minimal .cv-role{font-size:11.5pt;color:#5d6273;margin-top:6px}
.tpl-minimal .cv-header .cv-contact{flex-direction:column;align-items:flex-end;text-align:right;gap:2px}
.tpl-minimal .cv-header .cv-photo{width:24mm;height:24mm;border-radius:6px}
.tpl-minimal .cv-rule{height:3px;background:var(--c);width:40px;margin:10px 0 4px}
.tpl-minimal .cv-sec{display:grid;grid-template-columns:38mm 1fr;gap:12px;margin-top:16px}
.tpl-minimal .cv-sec-body{min-width:0}
.tpl-minimal .cv-sec-title{margin-bottom:0}
.tpl-minimal .cv-sec-title{color:#11131c;font-size:9.5pt;padding-top:1px}
.tpl-minimal .cv-sec-title::before{content:"";display:block;width:18px;height:2px;background:var(--c);margin-bottom:6px}
.tpl-minimal .cv-skill{background:none;border:1px solid #d5d7e0;border-radius:3px}

/* ----- Template: EXECUTIVE ----- */
.tpl-executive .cv-band{background:var(--c);color:#fff;padding:14mm 17mm 11mm;display:flex;align-items:center;gap:18px}
.tpl-executive .cv-band h1{color:#fff;font-size:25pt;line-height:1.08;letter-spacing:-.01em}
.tpl-executive .cv-band .cv-role{font-size:12pt;opacity:.9;margin-top:4px;font-weight:500}
.tpl-executive .cv-band .cv-photo{border:3px solid rgba(255,255,255,.7);width:28mm;height:28mm}
.tpl-executive .cv-strip{background:#f3f4f8;padding:3mm 17mm;border-bottom:1px solid #e3e4ea}
.tpl-executive .cv-strip .cv-contact{gap:4px 18px}
.tpl-executive .cv-body{display:grid;grid-template-columns:1fr 58mm;gap:9mm;padding:4mm 17mm 14mm}
.tpl-executive .cv-sec-title{display:flex;align-items:center;gap:8px}
.tpl-executive .cv-sec-title::before{content:"";width:6px;height:6px;background:var(--c);transform:rotate(45deg)}
.tpl-executive .cv-aside .cv-sec{background:#fafbfd;border:1px solid #eceef3;border-radius:6px;padding:10px 11px}
.tpl-executive .cv-decl{grid-column:1/-1}
.tpl-executive .cv-aside .cv-item-top{flex-direction:column;gap:1px}
.tpl-executive .cv-aside .cv-date{order:3;font-weight:500}
.tpl-executive .cv-aside .cv-sec:first-child{margin-top:14px}

/* ==========================================================
   Responsive builder
   ========================================================== */
@media (max-width:1180px){
  .design-controls .ctl>span{display:none}
  .hide-sm{display:none}
}
@media (max-width:900px){
  :root{--topbar:auto}
  body{overflow:auto}
  .topbar{flex-wrap:wrap;height:auto;padding:10px 12px;gap:10px}
  .design-controls{order:3;flex:1 1 100%;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
  .design-controls .ctl select{max-width:130px}
  .actions{margin-left:auto}
  .logo-text{display:none}
  .mobile-tabs{display:grid;grid-template-columns:1fr 1fr;position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
  .mobile-tabs button{padding:12px;border:0;background:none;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer}
  .mobile-tabs button.active{color:var(--brand);border-color:var(--brand)}
  .workspace{display:block;height:auto}
  .editor{border:0;overflow:visible}
  .preview{padding:14px 8px;overflow:hidden;min-height:60vh}
  .workspace[data-view="edit"] .preview{display:none}
  .workspace[data-view="preview"] .editor{display:none}
}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}

/* ==========================================================
   PRINT — only the CV is printed
   ========================================================== */
@page{size:A4;margin:12mm 0}
@page:first{margin-top:0}
@media print{
  html,body{background:#fff !important;height:auto;overflow:visible}
  .no-print,.mobile-tabs,.toast,.modal{display:none !important}
  .workspace{display:block !important;height:auto !important}
  .preview{display:block !important;padding:0 !important;background:none !important;overflow:visible !important}
  .preview-scale{transform:none !important;width:auto !important;height:auto !important}
  .cv{box-shadow:none;width:210mm;min-height:auto}
  .cv::after{display:none}
  .tpl-modern{min-height:auto}
  .cv-sec-title{break-after:avoid;page-break-after:avoid}
}