/* CV BUILDER PRO v5 — cv-builder.css */
:root {
  --a4-w: 794px; --a4-h: 1123px;
  --page-pt: 83px; --page-pr: 91px; --page-pb: 83px; --page-pl: 91px;
  --page-num-h: 24px;
  --safe-bottom: calc(var(--page-pb) + var(--page-num-h) + 1px);
  --accent: #4A90D9; --accent-light: #e8f0fb; --accent-dim: rgba(74,144,217,.06);
  --primary: #1a2b47; --bg: #f0f2f5; --surface: #fff; --text: #1a1a1a;
  --muted: #5a6775; --border: #d5dbe3;
  --nav-bg: rgba(255,255,255,.92); --nav-border: #e2e8f0;
  --font: 'Inter','Helvetica Neue',Helvetica,Roboto,Lato,sans-serif;
  --fs-name: 25px; --fs-section: 13px; --fs-role: 11.5px;
  --fs-body: 10.5px; --fs-meta: 10.5px; --fs-contact: 9.5px; --fs-page-num: 8.5px;
  --lh-body: 1.35; --lh-meta: 1.3; --lh-role: 1.25; --lh-section: 1.2;
  --sp-after-role: 5px; --sp-after-meta: 6px; --sp-between-bullets: 3px;
  --sp-after-bullet-group: 12px; --sp-after-section-title: 1px; --sp-after-paragraph: 5px;
  --bullet-text-indent: 14px; --tb-h: 48px; --tb-btn: 36px;
}
/* Color picker */
.color-pick-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; margin-left:6px; }
.color-input { position: absolute; width: 15px!important; height: 15px!important; opacity: 0; cursor: pointer; z-index: 2; }
.color-circle { width: 15px; height: 15px; border-radius: 100%; background: var(--accent); border: 0px solid rgba(0,0,0,.15); cursor: pointer; transition: transform .12s, box-shadow .12s; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.color-circle:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.025); }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;overflow:hidden;-webkit-text-size-adjust:100%}
body{height:100%;overflow:hidden;font-family:var(--font);font-size:var(--fs-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
i { font-weight: 100!important; font-size:125%!important; opacity: .88;} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; corner-shape: squircle; }
html { scroll-behavior: smooth!important; -webkit-text-size-adjust: 100%!important;}
body { -webkit-font-smoothing: antialiased!important; -moz-osx-font-smoothing: grayscale!important; text-rendering: optimizeLegibility!important; overflow-x: hidden!important; }
/* TOOLBAR */
.toolbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--tb-h);background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--nav-border);display:flex;align-items:center;padding:0 6px;gap:2px}
.tb-brand{display:flex;align-items:center;gap:5px;font-weight:700;font-size:12px;color:var(--primary);white-space:nowrap;user-select:none;padding:0 4px}
.tb-brand i{font-size:17px;color:var(--accent)}
.tb-sep{width:1px;height:22px;background:var(--border);margin:0 3px;flex-shrink:0}
.tb-spacer{flex:1;min-width:0}
.tb-info{font-size:10px;color:var(--muted);white-space:nowrap;padding:0 4px}
.tb-btn{font-height:100!important; position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--tb-btn);height:var(--tb-btn);border-radius:8px;border:0px solid transparent;background:transparent;color:var(--text);font-size:14.5px;cursor:pointer;transition:all .1s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.tb-btn:hover{background:rgba(0,0,0,.06);border-color:var(--border)}
.tb-btn:active{transform:scale(.9)}
.tb-btn--accent{background:rgba(0,0,0,.1);color:rgba(0,0,0,.8);border-color:rgba(0,0,0,.3)}
.tb-btn--accent:hover{filter:brightness(1.12);background:var(--accent);border-color:var(--accent)}
.tb-btn[data-tip]::after{content:attr(data-tip);position:absolute;bottom:-30px;left:50%;transform:translateX(-50%) translateY(4px);background:#1e293b;color:#fff;font-family:var(--font);font-size:10px;font-weight:600;padding:3px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;z-index:10}
.tb-btn[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
@media(hover:none){.tb-btn[data-tip]::after{display:none}}

/* (theme dots removed — using color picker) */

/* VIEWPORT */
.viewport{position:fixed;top:var(--tb-h);left:0;right:0;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:14px 4px 50px;gap:14px; overflow-x:hidden!important;}
.pages-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;transform-origin:top center;transition:transform .2s ease}

/* A4 PAGE */
.page{width:var(--a4-w);height:var(--a4-h);background:var(--surface);box-shadow:0 1px 10px rgba(0,0,0,.09),0 0 0 1px rgba(0,0,0,.03);position:relative;overflow:hidden;flex-shrink:0}
.page__inner{position:absolute;top:var(--page-pt);left:var(--page-pl);right:var(--page-pr);bottom:var(--safe-bottom);overflow:hidden}
.page__accent{position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--accent)}
.page__number{position:absolute;bottom:16px;right:var(--page-pr);font-size:var(--fs-page-num);color:var(--muted);font-weight:600;user-select:none}

/* CV CONTENT */
.cv-header{border-bottom:1px solid var(--accent);padding-bottom:8px;margin-bottom:10px}
.cv-name{font-size:var(--fs-name);font-weight:700;color:var(--primary);line-height:1;letter-spacing:-.3px;margin-bottom:2px}
.cv-subtitle{font-size:12.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.7px;line-height:1.5;margin-bottom:1px}
.cv-tagline{font-size:9.5px;color:rgba(0,0,0,.5);letter-spacing:.4px;line-height:1.5;margin-bottom:4px}
.cv-contact{font-size:var(--fs-contact);color:var(--muted);margin:6px auto 0;padding-top:4px;line-height:1.2;display:flex;flex-wrap:wrap;gap:1px 10px;align-items:center}
.cv-contact a{color:var(--muted);text-decoration:none}
.cv-contact a:hover{color:var(--accent)}
.cv-contact b{font-weight:700;color:var(--primary)}
.cv-contact i{font-size:11px;color:var(--accent);vertical-align:-1px;margin-right:2px}

.cv-section{margin-top:10px}
.cv-section__title{font-size:var(--fs-section);font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.6px;line-height:var(--lh-section);padding:2px 0 0 0;margin:4px 0px 3px 0px}
.cv-entry{margin-bottom:var(--sp-after-bullet-group)}
.cv-entry:last-child{margin-bottom:0}
.cv-entry__title{font-size:var(--fs-role);font-weight:700;color:var(--primary);line-height:var(--lh-role);margin-bottom:var(--sp-after-role)}
.cv-entry__meta{font-size:var(--fs-meta);color:var(--muted);line-height:var(--lh-meta);margin-bottom:var(--sp-after-meta)}
.cv-entry__meta strong{font-weight:600;color:var(--text)}
.cv-entry ul{margin:0;padding:0 0 0 var(--bullet-text-indent);list-style-position:outside}
.cv-entry li{font-size:var(--fs-body);line-height:var(--lh-body);margin-bottom:var(--sp-between-bullets);color:var(--text);padding-left:2px}
.cv-entry li:last-child{margin-bottom:0}
.cv-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);margin-bottom:var(--sp-after-paragraph)}
.cv-list{margin:0;padding:0 0 0 var(--bullet-text-indent);list-style-position:outside}
.cv-list li{font-size:var(--fs-body);line-height:var(--lh-body);margin-bottom:var(--sp-between-bullets);color:var(--text);padding-left:2px}
.cv-list li:last-child{margin-bottom:0}
.cv-list-item-wrap{margin-bottom:0}

[contenteditable="true"]{outline:none;transition:background .1s;border-radius:1px;min-height:1em}
[contenteditable="true"]:hover{background:var(--accent-dim)}
[contenteditable="true"]:focus{background:rgba(255,235,59,.10)}

/* MODAL (shared between import + DB) */
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border-radius:14px;box-shadow:0 16px 60px rgba(0,0,0,.25);width:92vw;max-width:700px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(12px);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.modal-overlay.open .modal{transform:translateY(0)}
.modal__header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.modal__header h2{font-size:14px;font-weight:700;color:var(--primary);flex:1}
.modal__close{width:30px;height:30px;border-radius:8px;border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.modal__close:hover{background:rgba(0,0,0,.06)}
.modal__body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 16px}
.modal__footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.modal-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
.modal-btn:hover{background:#f1f5f9}
.modal-btn--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.modal-btn--accent:hover{filter:brightness(1.1);background:var(--accent)}

.json-editor{width:100%;min-height:200px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:11px;line-height:1.5;padding:10px;border:1px solid var(--border);border-radius:8px;background:#f8fafc;color:var(--text);resize:vertical;outline:none;tab-size:2}
.json-editor:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,154,68,.08)}
.drop-zone{border:2px dashed var(--border);border-radius:10px;padding:18px;text-align:center;margin-bottom:10px;transition:all .2s;cursor:pointer}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:var(--accent-light)}
.drop-zone i{font-size:26px;color:var(--muted);display:block;margin-bottom:5px}
.drop-zone p{font-size:11px;color:var(--muted)}
.drop-zone strong{color:var(--accent)}

/* DB POPUP — role selector + JSON preview */
.db-controls{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.db-roles{display:flex;gap:5px;flex-wrap:wrap}
.db-role{padding:6px 13px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap}
.db-role:hover{border-color:var(--accent);color:var(--accent)}
.db-role.active{background:var(--accent);border-color:var(--accent);color:#fff}
.db-lang{padding:6px 13px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font);font-size:11px;font-weight:700;cursor:pointer;transition:all .12s;margin-left:auto}
.db-lang:hover{border-color:var(--accent)}
.db-preview-wrap{padding:12px 16px;overflow:auto;max-height:calc(88vh - 200px)}
.db-preview{font-family:'JetBrains Mono','Fira Code',monospace;font-size:10px;line-height:1.45;background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:12px;overflow:auto;white-space:pre-wrap;word-wrap:break-word;color:var(--text);max-height:50vh;margin:0}

/* TOAST */
.toast{position:fixed;bottom:14px;left:50%;transform:translateX(-50%) translateY(70px);padding:8px 16px;border-radius:8px;font-family:var(--font);font-size:11px;font-weight:600;color:#fff;z-index:3000;transition:transform .3s cubic-bezier(.22,1,.36,1);white-space:nowrap;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast--ok{background:#16a34a;box-shadow:0 4px 16px rgba(22,163,74,.3)}
.toast--err{background:#dc2626;box-shadow:0 4px 16px rgba(220,38,38,.3)}

/* RESPONSIVE */
@media(max-width:420px){.tb-brand-text{display:none}.tb-info{display:none}.toolbar{gap:1px;padding:0 3px}.tb-btn{width:32px;height:32px;font-size:15px}.theme-dot{width:13px;height:13px}.tb-sep{margin:0 2px}}
@media(min-width:768px){.toolbar{padding:0 12px;gap:4px}.viewport{overflow-x:hidden!important;padding:18px 12px 50px;gap:16px; }}
@media(min-width:1024px){.toolbar{padding:0 16px;gap:6px}.viewport{overflow-x:hidden!important;padding:22px 16px 60px}}

/* PRINT */
@page{size:A4;margin:0}
@media print{
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  .toolbar,.modal-overlay,.toast{display:none!important}
  .viewport{position:static!important;overflow-y:visible!important;overflow-x:hidden!important;padding:0!important;margin:0!important;background:none!important;display:block!important}
  .pages-wrap{transform:none!important;gap:0!important;display:block!important}
  .page{box-shadow:none!important;width:210mm!important;height:297mm!important;page-break-after:always;page-break-inside:avoid;margin:0!important;overflow:hidden!important}
  .page:last-child{page-break-after:auto}
  .page__accent,.cv-section__title,.cv-header,.cv-subtitle{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  [contenteditable="true"]:hover,[contenteditable="true"]:focus{background:transparent!important}
}
.page__number {margin: -8px -50px 8px 50px;}