/* ============================================================
   CV Editor - Canva-like Editor Stylesheet
   ============================================================ */

/* ---------- Editor Container ---------- */
.editor-body { margin: 0; padding: 0; overflow: hidden; }

.editor-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #f1f5f9;
}

/* ---------- Toolbar ---------- */
.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    z-index: 100;
    flex-shrink: 0;
}
.toolbar-left, .toolbar-center, .toolbar-right { display: flex; align-items: center; gap: 12px; }
.toolbar-left { flex: 1; }
.toolbar-center { flex: 0 0 auto; }
.toolbar-right { flex: 1; justify-content: flex-end; }

.toolbar-separator { width: 1px; height: 24px; background: #e2e8f0; }
.toolbar-label { font-size: 12px; color: #64748b; font-weight: 600; }
.toolbar-select { padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; background: #fff; }
.toolbar-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #475569; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.toolbar-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.toolbar-btn-label { display: inline; }

.btn-back { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; color: #475569; text-decoration: none; font-size: 14px; transition: all 0.2s; }
.btn-back:hover { background: #f1f5f9; color: #1e293b; }

.cv-title-input { border: 1px solid transparent; padding: 6px 12px; font-size: 15px; font-weight: 600; color: #1e293b; border-radius: 6px; background: transparent; min-width: 200px; }
.cv-title-input:hover { border-color: #e2e8f0; background: #f8fafc; }
.cv-title-input:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; text-decoration: none; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-outline { background: transparent; color: #475569; border: 1px solid #e2e8f0; }
.btn-outline:hover { background: #f1f5f9; border-color: #cbd5e1; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; margin-top: 8px; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.12); min-width: 160px; z-index: 200; overflow: hidden; }
.dropdown--open .dropdown-menu { display: block; animation: fadeInDown 0.15s ease; }
.dropdown-menu a, .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #334155; text-decoration: none; font-size: 14px; cursor: pointer; transition: background 0.15s; }
.dropdown-menu a:hover, .dropdown-item:hover { background: #f1f5f9; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Main Editor Area ---------- */
.editor-main { display: flex; flex: 1; overflow: hidden; }

/* ---------- Left Sidebar ---------- */
.editor-sidebar-left {
    width: 320px; background: #fff; border-right: 1px solid #e2e8f0;
    overflow-y: auto; flex-shrink: 0; transition: width 0.3s ease;
}
.editor-sidebar-left.collapsed { width: 0; overflow: hidden; }
.editor-sidebar-left .sidebar-header { padding: 16px 20px 12px; }
.editor-sidebar-left h3 { font-size: 14px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; margin: 0; }
.sidebar-scroll { overflow-y: auto; }

.sidebar-toggle-left, .sidebar-toggle-right { display: none; position: absolute; top: 50%; width: 24px; height: 48px; background: #fff; border: 1px solid #e2e8f0; align-items: center; justify-content: center; cursor: pointer; z-index: 50; }

/* Section Accordion */
.section-group { border-bottom: 1px solid #f1f5f9; }
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; cursor: pointer; font-weight: 600; font-size: 14px; color: #334155; transition: background 0.15s; user-select: none; }
.section-header:hover { background: #f8fafc; }
.section-header-left { display: flex; align-items: center; gap: 10px; }
.section-header-left i { width: 18px; color: #2563eb; font-size: 14px; }
.section-header-right { display: flex; align-items: center; gap: 8px; }
.section-chevron { font-size: 11px; color: #94a3b8; transition: transform 0.2s; }
.section-group--open .section-chevron { transform: rotate(180deg); }

.add-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #eff6ff; color: #2563eb; font-size: 12px; cursor: pointer; transition: all 0.15s; }
.add-btn:hover { background: #2563eb; color: #fff; }

.section-body { display: none; padding: 4px 20px 16px; }
.section-group--open .section-body { display: block; }

/* Form Fields */
.form-group { margin-bottom: 10px; }
.form-label-sm { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 3px; }
.form-input, .form-input-sm { width: 100%; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 7px; font-size: 13px; color: #1e293b; background: #f8fafc; transition: all 0.2s; font-family: 'Inter', sans-serif; box-sizing: border-box; }
.form-input:focus, .form-input-sm:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.form-textarea { resize: vertical; min-height: 60px; }

/* Entry Items */
.entry-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; margin-bottom: 10px; position: relative; }
.entry-item:hover { border-color: #cbd5e1; }
.entry-item-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.field-group { margin-bottom: 8px; flex: 1; min-width: 0; }
.field-group label { display: block; font-size: 11px; font-weight: 600; color: #64748b; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.field-group input, .field-group textarea, .field-group select { width: 100%; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12px; color: #1e293b; background: #fff; font-family: 'Inter', sans-serif; box-sizing: border-box; }
.field-group input:focus, .field-group textarea:focus, .field-group select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.1); }
.field-group textarea { resize: vertical; min-height: 50px; }

.remove-entry { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: transparent; color: #94a3b8; border: none; cursor: pointer; font-size: 11px; }
.remove-entry:hover { background: #fef2f2; color: #ef4444; }

/* ---------- Center Canvas ---------- */
.editor-canvas {
    flex: 1; overflow: auto; display: flex; flex-direction: column;
    align-items: center; padding: 20px; background: #e2e8f0; position: relative;
}
.canvas-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; background: #fff; padding: 6px 14px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.canvas-controls button, .canvas-control-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: transparent; color: #475569; cursor: pointer; }
.canvas-controls button:hover, .canvas-control-btn:hover { background: #f1f5f9; color: #1e293b; }
.zoom-level { font-size: 13px; font-weight: 600; color: #475569; min-width: 45px; text-align: center; }

/* A4 Page */
.a4-wrapper { transform-origin: top center; transition: transform 0.2s ease; }
.a4-page { width: 210mm; height: 297mm; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.12); border-radius: 2px; overflow: hidden; }

/* ---------- Right Sidebar ---------- */
.editor-sidebar-right {
    width: 280px; background: #fff; border-left: 1px solid #e2e8f0;
    overflow-y: auto; flex-shrink: 0; transition: width 0.3s ease;
}
.editor-sidebar-right.collapsed { width: 0; overflow: hidden; }
.editor-sidebar-right .sidebar-header { padding: 16px 20px 12px; }
.editor-sidebar-right h3 { font-size: 14px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; margin: 0; }

/* Style Sections */
.style-section { padding: 0 20px 16px; border-bottom: 1px solid #f1f5f9; margin-bottom: 12px; }
.style-section-title { font-size: 12px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.style-group { margin-bottom: 12px; }
.style-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 5px; }
.style-value { font-weight: 500; color: #2563eb; }
.style-select { width: 100%; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 7px; font-size: 13px; background: #f8fafc; }
.style-range { width: 100%; accent-color: #2563eb; }

/* Color Picker */
.color-picker-row { display: flex; align-items: center; gap: 10px; }
.color-input { width: 40px; height: 32px; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; padding: 1px; }
.color-value { font-size: 12px; color: #64748b; font-family: monospace; }

/* Color Presets */
.color-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.color-preset { display: flex; gap: 2px; padding: 4px; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; background: #fff; }
.color-preset:hover { border-color: #2563eb; }
.color-preset span { width: 18px; height: 18px; border-radius: 3px; display: block; }

/* Language Toggle */
.lang-toggle { display: flex; gap: 6px; }
.lang-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 7px; cursor: pointer; background: #f8fafc; font-size: 12px; font-weight: 500; color: #64748b; transition: all 0.2s; }
.lang-btn:hover { border-color: #94a3b8; background: #f1f5f9; }
.lang-btn.active { border-color: #2563eb; background: #eff6ff; color: #2563eb; font-weight: 600; }
.lang-btn img { border-radius: 2px; }

/* Photo Upload */
.photo-upload-area { cursor: pointer; border: 2px dashed #cbd5e1; border-radius: 12px; overflow: hidden; transition: all 0.2s; }
.photo-upload-area:hover { border-color: #2563eb; background: #eff6ff; }
.photo-preview { width: 100%; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #94a3b8; }
.photo-preview i { font-size: 28px; }
.photo-preview span { font-size: 12px; }
.photo-preview img { width: 100%; height: 140px; object-fit: cover; }

/* Save Indicator */
.save-indicator { position: fixed; bottom: 20px; right: 20px; padding: 8px 16px; background: #1e293b; color: #fff; border-radius: 8px; font-size: 13px; display: none; z-index: 300; }

/* ══════════════════════════════════════════════════════════════
   CV TEMPLATE STYLES (A4 preview)
   ══════════════════════════════════════════════════════════════ */

/* ---------- Common CV Styles ---------- */
.cv-template { width: 100%; height: 297mm; font-family: var(--cv-font-body, 'Inter', sans-serif); font-size: var(--cv-font-size, 10px); color: var(--cv-text, #1e293b); line-height: var(--cv-line-height, 1.45); box-sizing: border-box; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.cv-template * { box-sizing: border-box; }
.cv-template h1 { font-family: var(--cv-font-heading, 'Playfair Display', serif); font-size: 2.2em; font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: 0.3px; }
.cv-template h2 { font-family: var(--cv-font-heading, 'Playfair Display', serif); font-size: 1.05em; font-weight: 700; margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--cv-primary, #2563eb); text-transform: uppercase; letter-spacing: 1px; }
.cv-template h2:first-child { margin-top: 0; }
.cv-template h2 i { margin-right: 4px; font-size: 0.85em; }
.cv-template h3 { font-size: 1em; font-weight: 600; margin: 0; color: #1e293b; }
.cv-template p { margin: 2px 0; }
.cv-template ul { margin: 3px 0; padding-left: 18px; }
.cv-template li { margin-bottom: 2px; font-size: 0.9em; line-height: 1.45; }

/* Bullet list — div-based for html2canvas fidelity */
.bullet-list { margin: 4px 0 0; }
.bullet-line { display: flex; align-items: baseline; gap: 6px; font-size: 0.88em; line-height: 1.5; color: #334155; margin-bottom: 2px; }
.bullet-dot { flex-shrink: 0; font-size: 1em; line-height: 1; color: var(--cv-primary, #2563eb); }
.bullet-text { flex: 1; }

.photo-circle { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cv-primary, #2563eb); display: block; margin: 0 auto; }
.photo-placeholder { width: 110px; height: 110px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 36px; border: 3px solid var(--cv-primary, #2563eb); margin: 0 auto; }

/* Common entry/contact styles */
.exp-entry { margin-bottom: 11px; }
.exp-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.period { font-size: 0.85em; color: var(--cv-primary, #2563eb); font-weight: 600; }
.company, .school { font-size: 0.88em; color: #64748b; }
.location { font-size: 0.82em; color: #94a3b8; font-style: italic; }
.entry-desc { font-size: 0.88em; margin-top: 2px; line-height: 1.45; }
.summary-text { font-size: 0.9em; line-height: 1.55; text-align: justify; }
.sidebar-text { font-size: 0.85em; line-height: 1.45; text-align: justify; }
.contact-item { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 0.84em; }
.contact-item i { color: var(--cv-primary, #2563eb); width: 13px; font-size: 0.85em; }

.lang-item { margin-bottom: 6px; }
.lang-name { display: flex; justify-content: space-between; font-size: 0.88em; margin-bottom: 5px; }
.lang-level { font-size: 0.8em; color: #64748b; }
.lang-bar { height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; }
.lang-bar-fill { height: 100%; background: var(--cv-primary, #2563eb); border-radius: 2px; }
.lang-dot { display: none; }
.lang-simple { font-size: 0.88em; margin-bottom: 3px; }

.skill-list { margin: 0; padding: 0; }
.skill-item { display: flex; align-items: baseline; gap: 5px; padding: 2px 0; font-size: 0.88em; line-height: 1.5; }
.skill-item .bullet-dot { flex-shrink: 0; font-size: 0.9em; line-height: 1; }

.skill-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.skill-tag { padding: 5px 10px; font-size: 0.78em; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); }

.ref-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.ref-item { flex: 1; min-width: 140px; }
.ref-item h3 { font-size: 0.92em; }
.ref-title { font-size: 0.82em; color: #64748b; }
.ref-contact { font-size: 0.82em; }

.edu-entry { margin-bottom: 8px; }
.edu-entry h3 { font-size: 0.92em; overflow-wrap: break-word; word-break: break-word; }
/* Prevent parenthesized abbreviations from splitting across lines */
.cv-template .nowrap { white-space: nowrap; }

/* ── Classic Template ── */
.cv-classic { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr; gap: 0; }
.cv-classic .cv-header { grid-column: 1 / -1; padding: 22px 26px; display: flex; align-items: center; gap: 18px; border-bottom: 3px solid var(--cv-primary, #16a34a); }
.cv-classic .cv-header-info { flex: 1; }
.cv-classic .cv-header h1 { color: var(--cv-secondary, #1e293b); }
.cv-classic .subtitle { color: var(--cv-primary, #16a34a); font-size: 1.05em; margin-top: 2px; font-weight: 500; }
.cv-classic .contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 0.82em; color: #64748b; }
.cv-classic .contact-row i { color: var(--cv-primary, #16a34a); margin-right: 3px; }
.cv-classic .cv-sidebar { padding: 18px 16px; background: #f8fafc; border-right: 1px solid #e2e8f0; font-size: var(--cv-sidebar-font-size, 9px); line-height: var(--cv-sidebar-line-height, 1.35); }
.cv-classic .cv-sidebar h2 { font-size: 0.9em; color: var(--cv-primary, #16a34a); border-bottom-color: var(--cv-primary, #16a34a); }
.cv-classic .cv-main { padding: 18px 22px; }
.cv-classic .cv-main h2 { color: var(--cv-primary, #16a34a); border-bottom-color: var(--cv-primary, #16a34a); }

/* ── Modern Template ── */
.cv-modern { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.cv-modern .cv-sidebar { background: var(--cv-secondary, #1e293b); color: #e2e8f0; padding: 24px 16px; font-size: var(--cv-sidebar-font-size, 9px); line-height: var(--cv-sidebar-line-height, 1.35); }
.cv-modern .cv-sidebar .photo-section { text-align: center; margin-bottom: 20px; }
.cv-modern .cv-sidebar .photo-circle { border-color: var(--cv-primary, #0891b2); }
.cv-modern .cv-sidebar .photo-placeholder { border-color: var(--cv-primary, #0891b2); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
.cv-modern .cv-sidebar h2 { color: var(--cv-primary, #0891b2); border-bottom-color: var(--cv-primary, #0891b2); font-size: 0.9em; }
.cv-modern .cv-sidebar .sidebar-text { color: #cbd5e1; }
.cv-modern .cv-sidebar .contact-item { color: #cbd5e1; }
.cv-modern .cv-sidebar .contact-item i { color: var(--cv-primary, #0891b2); }
.cv-modern .cv-sidebar .skill-tag { background: rgba(255,255,255,0.08); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.12); }
.cv-modern .cv-sidebar .skill-item { color: #cbd5e1; }
.cv-modern .cv-sidebar .lang-bar { background: rgba(255,255,255,0.15); }
.cv-modern .cv-sidebar .lang-name { color: #cbd5e1; }
.cv-modern .cv-main { padding: 22px 22px; }
.cv-modern .name-section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #e2e8f0; }
.cv-modern .cv-main h1 { color: var(--cv-secondary, #1e293b); }
.cv-modern .subtitle { color: var(--cv-primary, #0891b2); font-size: 1.1em; }
.cv-modern .cv-main h2 { color: var(--cv-secondary, #1e293b); border-bottom-color: var(--cv-primary, #0891b2); }
.cv-modern .exp-entry { border-left: 3px solid var(--cv-primary, #0891b2); padding-left: 12px; }

/* ── Professional Template ── */
.cv-professional { display: grid; grid-template-columns: 210px 1fr; gap: 0; }
.cv-professional .cv-sidebar { background: #f8fafc; border-right: 1px solid #e2e8f0; }
.cv-professional .sidebar-header { background: var(--cv-primary, #1e40af); color: #fff; padding: 24px 18px; text-align: center; }
.cv-professional .sidebar-header .photo-circle { border-color: #fff; margin-bottom: 10px; }
.cv-professional .sidebar-header .photo-placeholder { border-color: #fff; background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); }
.cv-professional .sidebar-content { padding: 14px 16px; font-size: var(--cv-sidebar-font-size, 9px); line-height: var(--cv-sidebar-line-height, 1.35); }
.cv-professional .cv-sidebar h2 { font-size: 0.88em; color: var(--cv-primary, #1e40af); border-bottom-color: var(--cv-primary, #1e40af); }
.cv-professional .cv-sidebar .contact-item { color: #334155; }
.cv-professional .cv-sidebar .contact-item i { color: var(--cv-primary, #1e40af); }
.cv-professional .cv-sidebar .skill-item { color: #334155; }
.cv-professional .cv-sidebar .skill-item .bullet-dot { color: var(--cv-primary, #1e40af); }
.cv-professional .cv-sidebar .sidebar-text { color: #475569; }
.cv-professional .cv-sidebar .lang-name { color: #334155; }
.cv-professional .cv-sidebar .lang-level { color: #64748b; }
.cv-professional .cv-main { display: flex; flex-direction: column; }
.cv-professional .main-header { background: var(--cv-secondary, #0f172a); color: #fff; padding: 24px 26px; }
.cv-professional .main-header h1 { font-size: 2em; letter-spacing: 2px; color: #fff; }
.cv-professional .main-header .subtitle { color: var(--cv-accent, #06b6d4); font-size: 0.95em; margin-top: 3px; letter-spacing: 1px; }
.cv-professional .main-content { padding: 18px 24px; flex: 1; }
.cv-professional .cv-main h2 { color: var(--cv-secondary, #0f172a); border-bottom-color: var(--cv-primary, #1e40af); font-size: 1.05em; }
.cv-professional .exp-entry { padding-left: 12px; border-left: 3px solid var(--cv-primary, #1e40af); }

/* ── Elegant Template (Lorna Alvarado) ── */
.cv-elegant { display: flex; flex-direction: column; }
.cv-elegant .cv-accent-bar { height: 5px; width: 100%; flex-shrink: 0; }
.cv-elegant .cv-body { display: grid; grid-template-columns: 220px 1fr; gap: 0; flex: 1; min-height: 0; }
.cv-elegant .cv-sidebar { padding: 22px 18px; border-right: 1px solid #e2e8f0; font-size: var(--cv-sidebar-font-size, 9px); line-height: var(--cv-sidebar-line-height, 1.35); }
.cv-elegant .cv-sidebar .photo-section { text-align: center; margin-bottom: 16px; }
.cv-elegant .cv-sidebar .photo-circle { border-color: var(--cv-primary, #7c3aed); }
.cv-elegant .cv-sidebar .photo-placeholder { border-color: var(--cv-primary, #7c3aed); }
.cv-elegant .cv-sidebar h2 { color: var(--cv-secondary, #1e293b); border-bottom: 1px solid #d1d5db; font-size: 0.9em; letter-spacing: 0.5px; font-weight: 600; }
.cv-elegant .cv-sidebar .contact-item { color: #334155; }
.cv-elegant .cv-sidebar .contact-item i { color: var(--cv-primary, #7c3aed); }
.cv-elegant .cv-sidebar .skill-item { color: #334155; }
.cv-elegant .cv-sidebar .skill-item .bullet-dot { color: var(--cv-primary, #7c3aed); }
.cv-elegant .cv-sidebar .sidebar-text { color: #475569; }
.cv-elegant .cv-sidebar .lang-name { color: #334155; }
.cv-elegant .cv-sidebar .lang-level { color: #64748b; }
.cv-elegant .cv-main { padding: 22px 22px; }
.cv-elegant .name-section { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.cv-elegant .name-section h1 { letter-spacing: 3px; color: var(--cv-secondary, #1e293b); font-size: 2em; }
.cv-elegant .subtitle { color: var(--cv-primary, #7c3aed); font-size: 0.95em; margin-top: 3px; }
.cv-elegant .contact-cols { display: flex; gap: 14px; margin-top: 8px; }
.cv-elegant .contact-col { font-size: 0.82em; }
.cv-elegant .contact-col strong { display: block; font-size: 0.88em; color: var(--cv-secondary, #1e293b); margin-bottom: 1px; }
.cv-elegant .contact-col span { color: #64748b; }
.cv-elegant .cv-main h2 { color: var(--cv-secondary, #1e293b); border-bottom: 1px solid #d1d5db; font-size: 0.9em; letter-spacing: 0.5px; }

/* ── Minimalist Template (Olivia Wilson) ── */
.cv-minimalist { display: flex; flex-direction: column; }
.cv-minimalist .cv-header-gradient { height: 6px; width: 100%; flex-shrink: 0; }
.cv-minimalist .cv-header { padding: 18px 26px; display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.cv-minimalist .cv-header-info { flex: 1; }
.cv-minimalist .cv-header h1 { font-size: 2em; letter-spacing: 2px; color: var(--cv-secondary, #1e293b); }
.cv-minimalist .subtitle { color: #64748b; font-size: 0.95em; letter-spacing: 1px; margin-top: 2px; }
.cv-minimalist .contact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 0.82em; color: #64748b; }
.cv-minimalist .contact-row i { color: var(--cv-primary, #0d9488); margin-right: 3px; }
.cv-minimalist .cv-divider { height: 1px; background: #e2e8f0; margin: 0 26px; flex-shrink: 0; }
.cv-minimalist .cv-body { display: grid; grid-template-columns: 1.1fr 1.7fr; gap: 0; padding: 14px 26px; flex: 1; min-height: 0; }
.cv-minimalist .cv-left { padding-right: 18px; border-right: 1px solid #f1f5f9; }
.cv-minimalist .cv-right { padding-left: 18px; }
/* Fix #5: uniform section titles — all h2 share exact same size, weight, spacing, color */
.cv-minimalist h2 { color: var(--cv-primary, #0d9488); border-bottom-color: var(--cv-primary, #0d9488); font-size: 1.05em; font-weight: 700; letter-spacing: 1px; }
.cv-minimalist .skill-item { color: #334155; }
/* Fix #1: education entry names use global .nowrap for parenthesized abbreviations */

/* ── Creative Template ── */
.cv-creative { display: flex; flex-direction: column; }
.cv-creative .cv-header { color: #fff; padding: 24px 26px; flex-shrink: 0; }
.cv-creative .cv-header-content { display: flex; align-items: center; justify-content: space-between; }
.cv-creative .cv-header h1 { font-size: 2.2em; color: #fff; }
.cv-creative .cv-header .subtitle { color: rgba(255,255,255,0.9); font-size: 1.1em; margin-top: 3px; }
.cv-creative .cv-header .photo-circle { border-color: rgba(255,255,255,0.5); }
.cv-creative .cv-header .photo-placeholder { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
.cv-creative .cv-contact-bar { padding: 8px 26px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.82em; color: #64748b; flex-shrink: 0; }
.cv-creative .cv-contact-bar i { color: var(--cv-primary, #e11d48); margin-right: 3px; }
.cv-creative .cv-body { display: grid; grid-template-columns: 195px 1fr; gap: 0; flex: 1; min-height: 0; }
.cv-creative .cv-sidebar { padding: 14px 16px; font-size: var(--cv-sidebar-font-size, 9px); line-height: var(--cv-sidebar-line-height, 1.35); }
.cv-creative .cv-sidebar h2 { color: var(--cv-primary, #e11d48); border-bottom-color: var(--cv-primary, #e11d48); font-size: 0.9em; }
.cv-creative .cv-sidebar .skill-tag { background: rgba(225,29,72,0.08); color: var(--cv-primary, #e11d48); border: 1px solid rgba(225,29,72,0.18); }
.cv-creative .cv-sidebar .skill-item { color: #cbd5e1; }
.cv-creative .cv-main { padding: 14px 22px; }
.cv-creative .cv-main h2 { color: var(--cv-primary, #e11d48); border-bottom-color: var(--cv-primary, #e11d48); }
.cv-creative .exp-entry { border-left: 3px solid var(--cv-primary, #e11d48); padding-left: 10px; }

/* ── Executive Template ── */
.cv-executive { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.cv-executive .cv-sidebar { background: var(--cv-secondary, #0f172a); color: #e2e8f0; }
.cv-executive .photo-section { text-align: center; padding: 20px 0 10px; }
.cv-executive .sidebar-top { padding: 6px 18px 14px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cv-executive .sidebar-top h1 { color: #fff; font-size: 1.6em; letter-spacing: 1px; line-height: 1.2; }
.cv-executive .sidebar-top .subtitle { color: var(--cv-primary, #d97706); font-size: 0.78em; margin-top: 4px; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.4; word-break: break-word; }
.cv-executive .photo-circle { border-color: var(--cv-primary, #d97706); }
.cv-executive .photo-placeholder { border-color: var(--cv-primary, #d97706); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.3); }
.cv-executive .sidebar-content { padding: 0 18px 18px; font-size: var(--cv-sidebar-font-size, 9px); line-height: var(--cv-sidebar-line-height, 1.35); }
.cv-executive .cv-sidebar h2 { color: var(--cv-primary, #d97706); border-bottom-color: var(--cv-primary, #d97706); font-size: 0.82em; letter-spacing: 1px; }
.cv-executive .cv-sidebar .contact-item { color: #cbd5e1; }
.cv-executive .cv-sidebar .contact-item i { color: var(--cv-primary, #d97706); }
.cv-executive .cv-sidebar .skill-item { color: #cbd5e1; }
.cv-executive .cv-sidebar .lang-bar { background: rgba(255,255,255,0.12); }
.cv-executive .cv-sidebar .lang-name { color: #cbd5e1; }
.cv-executive .cv-main { padding: 20px 24px; }
.cv-executive .cv-main h2 { color: var(--cv-secondary, #0f172a); border-bottom-color: var(--cv-primary, #d97706); }
.cv-executive .exp-entry { border-left: 3px solid var(--cv-primary, #d97706); padding-left: 10px; }
.cv-executive .interest-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cv-executive .interest-tag { padding: 5px 12px; font-size: 0.8em; background: #fef3c7; border: 1px solid #fcd34d; color: var(--cv-secondary, #0f172a); font-weight: 500; }

/* ── Compact Template (ATS) ── */
.cv-compact { padding: 24px 28px; }
.cv-compact .cv-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--cv-primary, #475569); padding-bottom: 14px; margin-bottom: 14px; }
.cv-compact .cv-header-left { flex: 1; }
.cv-compact .cv-header-right { text-align: right; font-size: 0.82em; color: #64748b; }
.cv-compact .cv-header-right span { display: block; margin-bottom: 2px; }
.cv-compact .cv-header-right i { color: var(--cv-primary, #475569); margin-right: 3px; }
.cv-compact .cv-header h1 { color: var(--cv-secondary, #1e293b); font-size: 2em; }
.cv-compact .subtitle { color: var(--cv-primary, #475569); font-size: 1.05em; margin-top: 2px; }
.cv-compact h2 { color: var(--cv-primary, #475569); border-bottom-color: var(--cv-primary, #475569); }
.cv-compact .company-inline { font-weight: 400; color: #64748b; font-size: 0.9em; }
.cv-compact .skills-inline { font-size: 0.88em; line-height: 1.7; }
.cv-compact .skills-inline .sep { color: #94a3b8; }
.cv-compact .compact-bottom { display: flex; gap: 16px; margin-top: 8px; }
.cv-compact .compact-col { flex: 1; }
.cv-compact .compact-col--wide { flex: 2; }
.cv-compact .compact-item { font-size: 0.85em; margin-bottom: 2px; }

/* ── Infographic Template ── */
.cv-infographic { display: grid; grid-template-columns: 210px 1fr; gap: 0; min-height: 100%; }

/* Sidebar — full-height dark column */
.cv-infographic .ig-sidebar { background: var(--cv-secondary, #1e293b); color: #e2e8f0; padding: 22px 16px; display: flex; flex-direction: column; gap: 0; font-size: var(--cv-sidebar-font-size, 9px); line-height: var(--cv-sidebar-line-height, 1.35); min-height: 100%; }

/* Photo — centered, circular */
.cv-infographic .ig-photo-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.cv-infographic .ig-photo-img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cv-accent, #f472b6); display: block; }
.cv-infographic .ig-photo-initials { width: 90px; height: 90px; border-radius: 50%; border: 2px dashed var(--cv-accent, #f472b6); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); letter-spacing: 2px; }

/* Identity — centered name + title */
.cv-infographic .ig-identity { text-align: center; margin-bottom: 6px; }
.cv-infographic .ig-identity h1 { color: #fff; font-size: 1.5em; letter-spacing: 0.5px; line-height: 1.2; margin: 0; }
.cv-infographic .ig-jobtitle { color: var(--cv-accent, #f472b6); font-size: 0.82em; margin-top: 5px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }

/* Sidebar separators */
.cv-infographic .ig-sep { height: 1px; background: var(--cv-accent, #f472b6); opacity: 0.25; margin: 10px 0; flex-shrink: 0; }

/* Sidebar blocks */
.cv-infographic .ig-block { margin-top: 2px; }
.cv-infographic .ig-block-title { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cv-accent, #f472b6); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.cv-infographic .ig-block-title i { margin-right: 5px; font-size: 16px; width: 16px; text-align: center; vertical-align: middle; }
.cv-infographic .ig-contact-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; font-size: 0.8em; color: #cbd5e1; word-break: break-all; }
.cv-infographic .ig-contact-row i { color: var(--cv-accent, #f472b6); width: 16px; flex-shrink: 0; font-size: 16px; text-align: center; margin-top: 1px; }

/* Skill horizontal progress bars */
.cv-infographic .ig-skill-row { margin-bottom: 6px; }
.cv-infographic .ig-skill-info { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.cv-infographic .ig-skill-name { font-size: 0.82em; color: #e2e8f0; }
.cv-infographic .ig-skill-pct { font-size: 0.68em; color: #94a3b8; }
.cv-exporting .ig-skill-pct { display: none !important; }

/* html2canvas text baseline compensation — shifts text up during export */
.cv-exporting .skill-tag,
.cv-exporting .interest-tag,
.cv-exporting .ig-tag { padding-top: 1px !important; padding-bottom: 8px !important; }
.cv-infographic .ig-skill-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.cv-infographic .ig-skill-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }

/* Language segments */
.cv-infographic .ig-lang-row { margin-bottom: 8px; }
.cv-infographic .ig-lang-info { display: flex; justify-content: space-between; margin-bottom: 5px; }
.cv-infographic .ig-lang-name { font-size: 0.84em; color: #e2e8f0; }
.cv-infographic .ig-lang-level { font-size: 0.72em; color: #94a3b8; }
.cv-infographic .ig-seg-bar { display: flex; gap: 3px; }
.cv-infographic .ig-seg { flex: 1; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.cv-infographic .ig-seg--on { background: var(--cv-accent, #f472b6); }

/* Interest tags */
.cv-infographic .ig-tag-wrap { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; }
.cv-infographic .ig-tag { padding: 5px 10px; font-size: 0.72em; background: rgba(255,255,255,0.08); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1); }

/* Main content — tinted background, full-height */
.cv-infographic .ig-main { padding: 22px 22px; background: #F8F8FC; min-height: 100%; }
.cv-infographic .ig-main h2 { color: var(--cv-secondary, #1e293b); border-bottom-color: var(--cv-accent, #f472b6); }
.cv-infographic .ig-main h2 i { color: var(--cv-accent, #f472b6); font-size: 16px; width: 16px; text-align: center; vertical-align: middle; margin-right: 4px; }

/* Summary strip */
.cv-infographic .ig-summary { display: flex; gap: 0; margin-bottom: 14px; border-radius: 6px; overflow: hidden; background: #eef0f8; }
.cv-infographic .ig-summary-accent { width: 5px; flex-shrink: 0; background: var(--cv-accent, #f472b6); }
.cv-infographic .ig-summary-body { padding: 10px 14px; flex: 1; }
.cv-infographic .ig-summary-body h2 { margin-top: 0; font-size: 0.95em; border-bottom: none; padding-bottom: 0; margin-bottom: 4px; }
.cv-infographic .ig-summary-body p { font-size: 0.88em; line-height: 1.55; color: #475569; text-align: justify; }

/* Experience timeline */
.cv-infographic .ig-section { margin-bottom: 10px; }
.cv-infographic .ig-timeline { position: relative; padding-left: 18px; }
.cv-infographic .ig-timeline::before { content: ''; position: absolute; left: 4px; top: 2px; bottom: 2px; width: 2px; background: var(--cv-accent, #f472b6); border-radius: 1px; }
.cv-infographic .ig-tl-entry { position: relative; margin-bottom: 10px; }
.cv-infographic .ig-tl-dot { position: absolute; left: -18px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cv-accent, #f472b6); border: 2px solid #F8F8FC; box-shadow: 0 0 0 1px var(--cv-accent, #f472b6); z-index: 1; }
.cv-infographic .ig-tl-body {}
.cv-infographic .ig-tl-body .bullet-line { color: #475569; }
.cv-infographic .ig-tl-body .bullet-dot { color: var(--cv-accent, #f472b6); }
.cv-infographic .ig-tl-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.cv-infographic .ig-period { color: var(--cv-accent, #f472b6); font-size: 0.85em; font-weight: 600; }

/* Education cards */
.cv-infographic .ig-edu-card { padding: 10px 12px; margin-bottom: 8px; border-left: 3px solid var(--cv-accent, #f472b6); background: #eef0f8; border-radius: 0 6px 6px 0; }
.cv-infographic .ig-edu-card h3 { font-size: 0.92em; margin-bottom: 2px; }

/* References */
.cv-infographic .ig-ref-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-infographic .ig-ref-card { flex: 1; min-width: 140px; padding: 8px 10px; background: #eef0f8; border-radius: 6px; border: 1px solid #e2e8f0; }
.cv-infographic .ig-ref-card h3 { font-size: 0.9em; margin-bottom: 2px; }

/* ---------- Toast ---------- */
.editor-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 10px 24px; background: #1e293b; color: #fff; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 1000; opacity: 0; transition: all 0.3s ease; pointer-events: none; }
.editor-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.editor-toast.success { background: #16a34a; }
.editor-toast.error { background: #dc2626; }

/* ---------- Loading Overlay ---------- */
.loading-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 500; transition: opacity 0.3s; }
.loading-overlay--hidden { opacity: 0; pointer-events: none; }
.loading-spinner { text-align: center; color: #fff; font-size: 32px; }
.loading-spinner span { display: block; margin-top: 12px; font-size: 14px; }

/* ---------- Print ---------- */
@media print {
    .editor-toolbar, .editor-sidebar-left, .editor-sidebar-right, .canvas-controls, .editor-toast, .save-indicator, .loading-overlay { display: none !important; }
    .editor-container { height: auto; background: white; }
    .editor-canvas { padding: 0; background: white; overflow: visible; }
    .a4-wrapper { transform: none !important; }
    .a4-page { box-shadow: none; width: 100%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) { .editor-sidebar-right { width: 240px; } }
@media (max-width: 1024px) {
    .editor-sidebar-left { position: fixed; left: 0; top: 56px; bottom: 0; z-index: 90; box-shadow: 4px 0 20px rgba(0,0,0,0.1); width: 300px; transform: translateX(-100%); transition: transform 0.3s ease; }
    .editor-sidebar-left.open { transform: translateX(0); }
    .editor-sidebar-right { position: fixed; right: 0; top: 56px; bottom: 0; z-index: 90; box-shadow: -4px 0 20px rgba(0,0,0,0.1); width: 280px; transform: translateX(100%); transition: transform 0.3s ease; }
    .editor-sidebar-right.open { transform: translateX(0); }
    .sidebar-toggle-left, .sidebar-toggle-right { display: flex; }
    .toolbar-btn-label { display: none; }
}
@media (max-width: 768px) {
    .toolbar-center { display: none; }
    .a4-page { width: 100%; height: auto; }
    .editor-canvas { padding: 10px; }
}