:root{
  --navy:#221F1D;
  --gray:#6B655F;
  --line:#DAD5CD;
  --bg:#F1EFEA;
  --panel:#ffffff;
  --accent:#3B5D48;
  --accent-dark:#2C4636;
  --danger:#a8432c;
  --radius:10px;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Calibri','Segoe UI',Arial,sans-serif; background:var(--bg); color:#1a1f26;}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:32px 28px; width:100%; max-width:360px;}
.login-card h1{font-size:18px; color:var(--navy); margin:0 0 4px 0;}
.login-card p.sub{font-size:12.5px; color:var(--gray); margin:0 0 20px 0;}
.login-card input[type=password]{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; margin-bottom:12px;}
.login-card button{width:100%; padding:10px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-size:14px; cursor:pointer;}
.login-card button:hover{filter:brightness(1.08);}
.login-error{color:var(--danger); font-size:12.5px; margin-bottom:10px; min-height:16px;}

/* ---------- app shell ---------- */
header.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px; background:var(--navy); color:#fff; flex-wrap:wrap;
  position:sticky; top:0; z-index:50;
}
header.toolbar h1{font-size:17px; margin:0; font-weight:600;}
header.toolbar .sub{font-size:12px; color:#cfc7ba; margin-top:2px;}
.actions{display:flex; gap:8px; flex-wrap:wrap;}
button{font-family:inherit; font-size:13px; border:none; border-radius:8px; padding:9px 14px; cursor:pointer;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:#37423a; color:#fff;}
.btn-ghost:hover{filter:brightness(1.15);}
.save-indicator{font-size:11px; color:#a9c99a; min-width:120px;}

.workspace{display:flex; gap:20px; padding:20px; align-items:flex-start; max-width:1500px; margin:0 auto;}
.form-panel{flex:1 1 480px; min-width:360px; max-width:640px; display:flex; flex-direction:column; gap:14px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;}
.card h2{font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--navy); margin:0 0 12px 0; display:flex; align-items:center; justify-content:space-between;}
.card h2 .hint{font-size:10.5px; text-transform:none; letter-spacing:0; color:#9c948a; font-weight:400;}
.field{margin-bottom:10px;}
.field label{display:block; font-size:11.5px; color:#5b6472; margin-bottom:4px;}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-family:inherit; font-size:13px; background:#fbfcfd;
}
.field textarea{resize:vertical; min-height:60px; line-height:1.4;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}

.photo-row{display:flex; align-items:center; gap:14px; margin-bottom:8px;}
.photo-thumb{width:64px; height:64px; border-radius:8px; background:#e4e0d8 center/cover no-repeat; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:10px; color:#9c948a; text-align:center;}
.toggle{display:flex; align-items:center; gap:6px; font-size:12px; color:#3a352f;}
.thumb-actions{display:flex; gap:8px; margin-top:6px;}
.link-btn{background:none; border:none; padding:0; font-size:11.5px; color:var(--accent-dark); cursor:pointer; text-decoration:underline;}

.entry-block{border:1px dashed var(--line); border-radius:8px; padding:12px 12px 10px; margin-bottom:12px; background:#fafbfc;}
.entry-block .entry-top{display:flex; justify-content:flex-end; margin-bottom:4px;}
.icon-btn{background:none; border:none; cursor:pointer; color:#a3392a; font-size:12px; padding:2px 6px;}
.icon-btn:hover{text-decoration:underline;}
.bullet-row{display:flex; gap:6px; align-items:flex-start; margin-bottom:6px;}
.bullet-row .rte{flex:1; min-height:38px;}
.bullet-row .icon-btn{margin-top:6px;}
.add-btn{background:#eef3f0; color:var(--accent-dark); border:1px solid #cfe3d7; font-size:12.5px; padding:7px 12px; border-radius:7px; cursor:pointer; width:100%; margin-top:4px;}
.add-btn:hover{background:#e2ede6;}
.add-btn-sm{background:none; border:1px dashed #b9c6ce; color:#556170; font-size:12px; padding:5px 10px; border-radius:6px; cursor:pointer;}
.lang-row{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px;}

/* rich text */
.field-rte,.rte{width:100%; border:1px solid var(--line); border-radius:7px; font-family:inherit; font-size:13px; background:#fbfcfd; padding:8px 10px; line-height:1.4; outline:none;}
.field-rte{min-height:100px;}
.rte:focus{border-color:var(--accent); background:#fff;}
.field-rte:empty:before,.rte:empty:before{content:attr(data-placeholder); color:#a39c92;}
.rte-toolbar{position:sticky; top:64px; z-index:30; display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px 10px; flex-wrap:wrap;}
.rte-toolbar button{background:#eef0f3; border:1px solid var(--line); width:28px; height:28px; padding:0; border-radius:6px; font-size:13px; color:#2c333c;}
.rte-toolbar button:hover{background:#e2e6ea;}
.rte-toolbar .rte-sep{width:1px; height:20px; background:var(--line); margin:0 2px;}
.rte-toolbar .swatch{width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line);}
.rte-toolbar .btn-clear{width:auto; padding:0 10px; font-size:11.5px;}
.rte-hint{font-size:10.5px; color:#9c948a; margin-left:auto;}

/* cropper modal */
.crop-overlay{position:fixed; inset:0; background:rgba(15,18,22,.72); display:flex; align-items:center; justify-content:center; z-index:200;}
.crop-box{background:#fff; border-radius:12px; padding:18px; width:420px; max-width:92vw;}
.crop-box h3{margin:0 0 12px 0; font-size:14px; color:var(--navy);}
.crop-image-wrap{width:100%; height:320px; background:#20242c; border-radius:8px; overflow:hidden;}
.crop-image-wrap img{display:block; max-width:100%;}
.crop-controls{margin-top:12px;}
.crop-controls input[type=range]{width:100%;}
.crop-zoom-label{font-size:11px; color:#5b6472; margin-bottom:4px; display:block;}
.crop-buttons{display:flex; justify-content:flex-end; gap:8px; margin-top:10px;}

/* AI tailor panel */
.suggestion-block{border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; background:#fafbfc;}
.suggestion-block .sugg-label{font-size:11px; color:var(--gray); margin-bottom:4px;}
.suggestion-block .sugg-original{font-size:11.5px; color:#9c948a; text-decoration:line-through; margin-bottom:6px; line-height:1.4;}
.suggestion-block textarea.sugg-proposed{width:100%; min-height:50px; font-size:12.5px; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-family:inherit;}
.suggestion-block .sugg-reason{font-size:10.5px; color:var(--accent-dark); margin-top:4px; font-style:italic;}
.sugg-checkbox-row{display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:12px;}

/* preview */
.preview-wrap{flex:1 1 640px; position:sticky; top:76px;}
.cv-page{width:210mm; min-height:296mm; max-width:100%; margin:0 auto; background:#fff; box-shadow:0 4px 24px rgba(0,0,0,.12); padding:16mm 15mm; font-family:'Calibri','Segoe UI',Arial,sans-serif; color:#1a1a1a;}
.cv-header{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
.cv-name{font-size:28px; font-weight:700; color:var(--navy); margin:0;}
.cv-role{font-size:15px; color:var(--gray); margin:2px 0 8px 0;}
.cv-contact{font-size:11.5px; color:var(--gray);}
.cv-photo{width:90px; height:90px; border-radius:8px; object-fit:cover; flex-shrink:0; border:1px solid #d7dbe0;}
.cv-section-title{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:4px; margin:18px 0 8px 0;}
.cv-body-text{font-size:12px; line-height:1.5;}
.cv-job-header{display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-top:10px;}
.cv-job-header .dates{font-style:italic; color:var(--gray); white-space:nowrap;}
.cv-note{font-size:10.5px; font-style:italic; color:var(--gray); margin:1px 0 4px 0;}
.cv-bullets{margin:4px 0 0 0; padding-left:16px;}
.cv-bullets li{font-size:12px; line-height:1.45; margin-bottom:3px;}
.cv-edu-row{display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:3px;}
.cv-edu-row .dates{font-style:italic; color:var(--gray); white-space:nowrap;}
.cv-lang-line{font-size:12px; margin-top:2px;}
.cv-empty-hint{color:#b5ada2; font-style:italic; font-size:11.5px;}

@media (max-width:1050px){
  .workspace{flex-direction:column;}
  .preview-wrap{position:static; width:100%;}
  .cv-page{width:100%;}
}
@media print{
  body *{visibility:hidden;}
  #preview,#preview *{visibility:visible;}
  #preview{position:absolute; left:0; top:0; box-shadow:none; margin:0; padding:16mm 15mm; width:210mm; min-height:0;}
  @page{size:A4; margin:0;}
}