/* ============================================
   DubaiKar Smart Resume Builder v9 — Design System
   ============================================ */
:root {
  --orange: #FF6B35; --orange-light: #FF8F5E; --orange-glow: rgba(255,107,53,0.12);
  --gold: #F5A623; --teal: #00B4A6; --teal-dark: #009688;
  --navy: #1A1D3E; --navy-light: #2A2D5E;
  --green: #22C55E; --green-light: rgba(34,197,94,0.08);
  --red: #EF4444; --red-light: rgba(239,68,68,0.06);
  --amber: #F59E0B; --amber-light: rgba(245,158,11,0.08);
  --text: #2D2B3A; --text-light: #6B6880;
  --bg-gray: #F0F2F5; --border: rgba(26,29,62,0.08); --border-strong: rgba(26,29,62,0.14);
  --radius: 14px; --radius-sm: 8px;
  --shadow: 0 2px 12px rgba(26,29,62,0.05); --shadow-lg: 0 12px 40px rgba(26,29,62,0.12);
  --accent: var(--orange);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--bg-gray); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5 { font-family:'Outfit',sans-serif; }

/* ---- 2-ROW NAVBAR ---- */
.navbar { background:rgba(255,255,255,0.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.nav-row { display:flex; justify-content:space-between; align-items:center; padding:0 20px; }
.nav-row-primary { padding:8px 20px; border-bottom:1px solid var(--border); }
.nav-row-toolbar { padding:5px 20px; background:rgba(0,0,0,0.015); }
.nav-group { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nav-separator { width:1px; height:20px; background:var(--border-strong); margin:0 4px; flex-shrink:0; }
.logo { font-family:'Outfit',sans-serif; font-weight:900; font-size:20px; background:linear-gradient(135deg,var(--orange),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.logo span { -webkit-text-fill-color:var(--navy); }

/* ---- BUTTONS ---- */
.btn { padding:7px 14px; border-radius:7px; font-weight:600; cursor:pointer; border:none; font-family:'DM Sans'; transition:all .2s; font-size:12px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.btn-sm { padding:5px 10px; font-size:11px; }
.btn-primary { background:linear-gradient(135deg,var(--orange),var(--orange-light)); color:#fff; box-shadow:0 3px 10px rgba(255,107,53,0.2); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(255,107,53,0.3); }
.btn-outline { background:transparent; border:1.5px solid var(--border-strong); color:var(--navy); }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); }
.btn-toggle { background:#fff; border:1.5px solid var(--border-strong); color:var(--text); border-radius:50px; font-weight:700; cursor:pointer; transition:all .2s; }
.btn-toggle.active { border-color:var(--orange); background:var(--orange-glow); color:var(--orange); }
.btn-ghost { background:rgba(0,180,166,0.08); border:1.5px solid rgba(0,180,166,0.2); color:var(--teal-dark); border-radius:8px; font-weight:700; cursor:pointer; transition:all .2s; }
.btn-ghost:hover { background:rgba(0,180,166,0.15); }

/* ---- ATS MINI PILL ---- */
.ats-mini-pill { display:flex; align-items:center; gap:5px; background:#fff; padding:4px 10px; border-radius:50px; border:1px solid var(--border); cursor:pointer; font-size:11px; font-weight:700; color:var(--text-light); }
.ats-mini-pill .score-num { font-family:'Outfit'; font-weight:900; font-size:14px; }
.ats-mini-pill .score-num.high { color:var(--green); }
.ats-mini-pill .score-num.mid { color:var(--amber); }
.ats-mini-pill .score-num.low { color:var(--red); }

/* ---- COLOR PICKER (Enhanced with Wheel) ---- */
.color-picker-group { display:flex; gap:5px; align-items:center; }
.color-swatch { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,0.12); transition:all .2s; }
.color-swatch:hover { transform:scale(1.2); }
.color-swatch.active { transform:scale(1.25); box-shadow:0 0 0 2px var(--navy); }
.color-wheel-wrap { position:relative; display:flex; align-items:center; gap:4px; margin-left:2px; padding-left:6px; border-left:1px solid var(--border); }
.custom-color-input { width:26px; height:26px; border:none; border-radius:50%; cursor:pointer; background:none; padding:0; vertical-align:middle; }
.custom-color-input::-webkit-color-swatch-wrapper { padding:0; }
.custom-color-input::-webkit-color-swatch { border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.15); }
.color-wheel-label { font-size:9px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:0.3px; }

/* ---- SCALE ---- */
.scale-control { display:flex; align-items:center; gap:6px; padding:0 8px; border-left:1px solid var(--border); }
.scale-control label { font-size:10px; font-weight:700; color:var(--text-light); }
.scale-control input[type="range"] { width:70px; accent-color:var(--orange); cursor:pointer; }
.scale-control .scale-val { font-size:11px; font-weight:800; color:var(--orange); min-width:28px; }

/* ---- WIZARD ---- */
.wizard-overlay { position:fixed; inset:0; background:rgba(26,29,62,0.85); backdrop-filter:blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; }
.wizard-modal { background:#fff; width:100%; max-width:580px; border-radius:22px; box-shadow:var(--shadow-lg); padding:32px; max-height:92vh; overflow-y:auto; }
.wizard-step { display:none; } .wizard-step.active { display:block; animation:wizFade .3s ease; }
@keyframes wizFade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.wizard-header { text-align:center; margin-bottom:24px; }
.wizard-header .step-label { font-size:10px; font-weight:800; color:var(--orange); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; }
.wizard-header h2 { font-size:24px; color:var(--navy); margin-bottom:6px; line-height:1.2; }
.wizard-header p { color:var(--text-light); font-size:13px; line-height:1.5; }
.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.option-card { border:2px solid var(--border); border-radius:12px; padding:16px 12px; text-align:center; cursor:pointer; transition:all .2s; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.option-card:hover { border-color:var(--teal); background:rgba(0,180,166,0.02); transform:translateY(-1px); }
.option-card.selected { border-color:var(--orange); background:var(--orange-glow); }
.option-card.selected::after { content:'✓'; position:absolute; top:6px; right:8px; background:var(--orange); color:#fff; width:18px; height:18px; border-radius:50%; font-size:10px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.option-icon { font-size:24px; margin-bottom:8px; } .option-title { font-weight:700; color:var(--navy); font-size:14px; margin-bottom:2px; }
.option-desc { font-size:11px; color:var(--text-light); line-height:1.3; }
.wizard-footer { display:flex; margin-top:14px; }
.config-item { padding:8px 12px; background:var(--green-light); border-radius:6px; margin-bottom:6px; font-weight:600; font-size:12px; display:flex; align-items:center; gap:6px; border:1px solid rgba(34,197,94,0.12); }
.config-toggle-list { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.config-toggle-item { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#F8F9FA; border-radius:8px; border:1px solid var(--border); font-size:13px; font-weight:600; }
.config-toggle-item .rec { font-size:10px; color:var(--teal); font-weight:700; margin-left:6px; }
.software-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.software-chip { padding:10px 8px; border:2px solid var(--border); border-radius:8px; text-align:center; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; }
.software-chip:hover { border-color:var(--teal); }
.software-chip.selected { border-color:var(--orange); background:var(--orange-glow); color:var(--orange); }

/* ---- BUILDER LAYOUT ---- */
.builder-container { display:flex; height:calc(100vh - 80px); }
.editor-panel { background:#FAFAFA; overflow-y:auto; overflow-x:hidden; padding:14px; min-width:320px; position:relative; }
.preview-panel { background:#E6E8EC; display:flex; flex-direction:column; align-items:center; padding:20px; overflow-y:auto; gap:12px; position:relative; }
.resizer { width:8px; background:#E2E4E8; cursor:ew-resize; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s; flex-shrink:0; }
.resizer:hover,.resizer.dragging { background:#D0D3D9; }
.resizer-icon { color:#999; font-size:14px; user-select:none; font-weight:900; }

/* ======== FLOATING SIDE RAIL ======== */
.floating-rail { position:sticky; top:0; z-index:20; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); margin:-14px -14px 12px -14px; padding:6px 10px; display:flex; gap:2px; align-items:center; flex-wrap:nowrap; overflow-x:auto; }
.rail-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:6px 10px; border-radius:8px; cursor:pointer; transition:all .2s; border:none; background:transparent; font-family:'DM Sans',sans-serif; min-width:48px; position:relative; }
.rail-tab:hover { background:var(--orange-glow); }
.rail-tab.active { background:var(--orange-glow); color:var(--orange); }
.rail-tab .rail-icon { font-size:16px; line-height:1; }
.rail-tab .rail-label { font-size:8px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap; }
.rail-tab.active .rail-label { color:var(--orange); }
.rail-tab .rail-dot { position:absolute; top:4px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--green); display:none; }
.rail-tab .rail-dot.filled { display:block; }

/* ======== COLLAPSED CARDS (left drag handle, click header to toggle) ======== */
.dynamic-item { display:flex; flex-direction:row; border:1px solid var(--border); border-radius:8px; position:relative; background:#FCFCFC; transition:all .2s; overflow:hidden; padding:0 !important; margin-bottom:2px; }
.dynamic-item .drag-grip { width:22px; min-height:100%; background:var(--bg-gray); border-right:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:grab; flex-shrink:0; color:#bbb; font-size:12px; font-weight:900; user-select:none; letter-spacing:1px; transition:background .15s; }
.dynamic-item .drag-grip:hover { background:#E2E4E8; color:#888; }
.dynamic-item .drag-grip:active { cursor:grabbing; }
.dynamic-item .card-body { flex:1; min-width:0; }
.dynamic-item .card-summary { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; transition:background .15s; }
.dynamic-item .card-summary:hover { background:rgba(0,0,0,0.02); }
.dynamic-item .card-summary .card-icon { font-size:14px; flex-shrink:0; }
.dynamic-item .card-summary .card-title { font-size:12px; font-weight:700; color:var(--navy); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dynamic-item .card-summary .card-subtitle { font-size:10px; color:var(--text-light); flex-shrink:0; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dynamic-item .card-summary .card-date { font-size:9px; color:var(--text-light); flex-shrink:0; white-space:nowrap; }
.dynamic-item .card-summary .card-expand-icon { font-size:10px; color:var(--text-light); transition:transform .2s; flex-shrink:0; }
.dynamic-item .card-summary .btn-delete-card { background:none; border:none; color:var(--red); cursor:pointer; font-size:13px; padding:2px 4px; border-radius:4px; opacity:0.5; transition:opacity .15s; flex-shrink:0; }
.dynamic-item .card-summary .btn-delete-card:hover { opacity:1; background:var(--red-light); }
.dynamic-item.collapsed .card-form-content { display:none; }
.dynamic-item.collapsed .card-expand-icon { transform:rotate(-90deg); }
.dynamic-item.expanded .card-form-content { display:block; padding:10px 12px 12px; border-top:1px solid var(--border); }
.dynamic-item.expanded .card-expand-icon { transform:rotate(0deg); }
.dynamic-item.dragging { opacity:0.4; border:2px dashed var(--teal); }
/* Simple items (projects, certs, etc.) that don't use card system */
.item-drag-bar { display:none !important; }
.dynamic-item .btn-remove-item { position:absolute; top:6px; right:6px; background:none; border:none; color:var(--red); cursor:pointer; font-size:16px; line-height:1; opacity:0.5; z-index:5; }
.dynamic-item .btn-remove-item:hover { opacity:1; }

/* ---- ACCORDION ---- */
.accordion { margin-bottom:8px; border:1px solid var(--border); border-radius:10px; background:#fff; overflow:hidden; transition:border-color .2s; }
.accordion:hover { border-color:var(--border-strong); }
.accordion-header { display:flex; align-items:center; padding:10px 14px; cursor:pointer; user-select:none; gap:8px; background:#FAFBFC; border-bottom:1px solid transparent; transition:background .15s; }
.accordion-header:hover { background:#F0F2F5; }
.accordion-header h3 { font-size:13px; color:var(--navy); flex:1; display:flex; align-items:center; gap:6px; }
.acc-chevron { font-size:10px; color:var(--text-light); transition:transform .2s; flex-shrink:0; width:14px; }
.accordion.open > .accordion-header { border-bottom-color:var(--border); }
.accordion.open > .accordion-header .acc-chevron { transform:rotate(0deg); }
.accordion:not(.open) > .accordion-header .acc-chevron { transform:rotate(-90deg); }
.accordion-body { padding:12px 14px; display:none; }
.accordion.open > .accordion-body { display:block; animation:accFade .2s ease; }
@keyframes accFade { from{opacity:0} to{opacity:1} }
.acc-count { font-size:10px; font-weight:800; background:var(--bg-gray); color:var(--text-light); padding:1px 6px; border-radius:10px; }
.accordion-controls { display:flex; gap:6px; margin-bottom:10px; }

/* ---- LAYOUT TOGGLES ---- */
.layout-toggle-bar { display:flex; align-items:center; gap:4px; margin-bottom:10px; padding:4px; background:#F0F2F5; border-radius:6px; }
.layout-label { font-size:10px; font-weight:700; color:var(--text-light); margin-right:4px; padding-left:4px; }
.layout-btn { padding:4px 10px; font-size:10px; font-weight:700; border:none; background:transparent; border-radius:4px; cursor:pointer; color:var(--text-light); transition:all .15s; }
.layout-btn.active { background:#fff; color:var(--orange); box-shadow:0 1px 3px rgba(0,0,0,0.08); }

/* ---- FORM ELEMENTS ---- */
.form-row { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.form-row > .form-group { flex:1; min-width:130px; }
.form-group { display:flex; flex-direction:column; gap:3px; position:relative; }
.form-group.full { width:100%; flex-basis:100%; }
.form-group label { font-size:10px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:0.3px; }
.form-group input,.form-group select,.form-group textarea { padding:8px 10px; border:1.5px solid var(--border); border-radius:6px; font-family:'DM Sans'; font-size:12px; transition:border .2s,box-shadow .2s; background:#FCFCFC; width:100%; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-glow); }
.form-group textarea { resize:vertical; min-height:50px; }
.char-count { font-size:9px; color:var(--text-light); text-align:right; margin-top:1px; }
.char-count.warn { color:var(--amber); } .char-count.over { color:var(--red); font-weight:700; }
.dynamic-list { display:flex; flex-direction:column; gap:6px; }
.btn-add { display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-weight:700; font-size:11px; background:transparent; border:none; cursor:pointer; padding:4px 0; }
.smart-tip { display:flex; align-items:flex-start; gap:6px; background:var(--orange-glow); border-left:3px solid var(--orange); padding:8px 12px; border-radius:0 6px 6px 0; font-size:10px; color:var(--text); line-height:1.4; }
.verb-suggestion { display:inline-flex; align-items:center; gap:3px; background:var(--amber-light); border:1px solid rgba(245,158,11,0.2); border-radius:4px; padding:2px 6px; font-size:10px; color:var(--amber); font-weight:600; margin:2px; }
.hidden { display:none !important; }

/* ---- PHOTO UPLOAD (Editor Panel — Enhanced Design) ---- */
.photo-upload-section { margin-bottom:10px; }
.photo-main-row { display:flex; gap:10px; align-items:center; padding:10px 12px; background:linear-gradient(135deg, #F8F9FA 0%, #F0F2F5 100%); border:1px solid var(--border); border-radius:10px; transition:border-color .2s; }
.photo-main-row:hover { border-color:var(--border-strong); }
.photo-preview-wrap { width:48px; height:48px; border-radius:50%; border:2px dashed var(--border-strong); display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; flex-shrink:0; transition:all .2s; background:#fff; position:relative; box-sizing:border-box; }
.photo-preview-wrap:hover { border-color:var(--orange); background:var(--orange-glow); }
.photo-preview-wrap.oval { border-radius:50%; }
.photo-preview-wrap.square { border-radius:6px; }
.photo-placeholder { font-size:18px; color:var(--text-light); }
.photo-preview-img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-inline-ctrls { flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.photo-ctrl-compact { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.photo-shape-btns { display:flex; gap:2px; }
.photo-shape-btn { width:28px; height:26px; font-size:12px; border:1.5px solid var(--border-strong); border-radius:5px; cursor:pointer; background:#fff; color:var(--text); transition:all .15s; display:flex; align-items:center; justify-content:center; padding:0; }
.photo-shape-btn.active { border-color:var(--orange); background:var(--orange-glow); color:var(--orange); }
.photo-shape-btn:hover { border-color:var(--orange); }
.photo-border-toggle { display:flex; align-items:center; gap:4px; font-size:9px; font-weight:700; color:var(--text-light); cursor:pointer; text-transform:uppercase; letter-spacing:.3px; padding:3px 6px; border-radius:4px; transition:all .15s; }
.photo-border-toggle:hover { background:var(--orange-glow); }
.photo-border-toggle input { width:14px; height:14px; accent-color:var(--orange); cursor:pointer; margin:0; }
.photo-adjust-toggle, .photo-remove-btn { width:26px; height:26px; border:1px solid var(--border); border-radius:5px; cursor:pointer; background:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0; transition:all .15s; }
.photo-adjust-toggle:hover { border-color:var(--orange); background:var(--orange-glow); }
.photo-adjust-toggle.active { border-color:var(--orange); background:var(--orange-glow); }
.photo-remove-btn:hover { border-color:var(--red); background:var(--red-light); }
.photo-size-row { display:flex; align-items:center; gap:6px; }
.photo-size-row label { font-size:8px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.3px; }
.photo-size-row input[type="range"] { flex:1; accent-color:var(--orange); cursor:pointer; height:3px; }

/* Border Controls Panel */
.photo-border-panel { margin-top:6px; padding:10px 12px; background:linear-gradient(135deg, #FFF5F0 0%, #F8F0FF 100%); border:1px solid rgba(255,107,53,0.15); border-radius:8px; animation:accFade .25s ease; }
.photo-border-grid { display:flex; flex-direction:column; gap:8px; }
.photo-border-ctrl { display:flex; align-items:center; gap:8px; }
.photo-border-ctrl label { font-size:8px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.3px; min-width:32px; }
.photo-border-ctrl input[type="range"] { flex:1; accent-color:var(--orange); cursor:pointer; height:3px; max-width:100px; }
.photo-border-ctrl span { font-size:9px; font-weight:700; color:var(--orange); min-width:22px; text-align:right; }
.photo-border-colors { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.photo-bcolor-swatch { width:16px; height:16px; border-radius:50%; cursor:pointer; transition:all .15s; box-shadow:0 1px 2px rgba(0,0,0,0.12); flex-shrink:0; }
.photo-bcolor-swatch:hover { transform:scale(1.2); box-shadow:0 1px 4px rgba(0,0,0,0.2); }
.photo-bcolor-swatch.active { box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--orange); transform:scale(1.1); }
.photo-bcolor-custom-wrap { width:16px; height:16px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,0.12); }
.photo-bcolor-custom-wrap input[type="color"] { width:24px; height:24px; border:none; padding:0; cursor:pointer; margin:-4px; }
.photo-bcolor-custom-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.photo-bcolor-custom-wrap input[type="color"]::-webkit-color-swatch { border:none; border-radius:50%; }

/* Adjust panel (collapsible — Crop & Position) */
.photo-adjust-panel { margin-top:6px; padding:8px 12px 10px; background:#F1F3F6; border:1px solid var(--border); border-radius:8px; animation:accFade .25s ease; }
.photo-adjust-header { display:flex; align-items:center; margin-bottom:6px; }
.photo-adjust-title { font-size:9px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.5px; }
.photo-adjust-grid { display:flex; flex-direction:column; gap:5px; }
.photo-adj-item { display:flex; align-items:center; gap:6px; }
.photo-adj-item label { font-size:8px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.3px; min-width:34px; }
.photo-adj-item input[type="range"] { flex:1; accent-color:var(--orange); cursor:pointer; height:3px; }
.photo-adj-item span { font-size:9px; font-weight:700; color:var(--orange); min-width:28px; text-align:right; }

/* ---- PROFILE PHOTO (Resume Preview) ---- */
.profile-photo-wrap { display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.profile-photo { display:block; object-fit:cover; }

/* ---- HEADER TOP (Photo + Name side by side in ALL templates) ---- */
.tpl-header-top { display:flex; align-items:center; gap:12px; }
.tpl-header-top .profile-photo-wrap { margin-bottom:0; }
.tpl-header-top .tpl-header-text { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
/* Reduce name size in sidebar when photo is showing to prevent line wraps */
.tpl-sidebar .tpl-header-top h1, .tpl-sidebar-dark .tpl-header-top h1 { font-size:20px; line-height:1.15; }
.tpl-sidebar .tpl-header-top .job-title, .tpl-sidebar-dark .tpl-header-top .job-title { font-size:11px; margin-bottom:0; }

/* Sidebar-specific adjustments */
.tpl-sidebar .tpl-header-top, .tpl-sidebar-dark .tpl-header-top { gap:10px; align-items:center; }
.tpl-sidebar .profile-photo-wrap { border-color:rgba(0,0,0,0.06); }
.tpl-sidebar-dark .profile-photo-wrap { border-color:rgba(255,255,255,0.25); }

/* ---- COMPLETION BAR ---- */
.completion-bar { width:100%; background:#fff; border-radius:8px; padding:10px 14px; box-shadow:var(--shadow); border:1px solid var(--border); margin-bottom:10px; }
.completion-bar .label { display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:var(--text-light); margin-bottom:4px; }
.completion-bar .label .pct { color:var(--orange); font-size:13px; }
.progress-track { width:100%; height:5px; background:#EAECEF; border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--orange),var(--gold)); transition:width .4s; }

/* ---- ACTIVE RESUME BAR ---- */
.active-resume-bar { display:flex; align-items:center; gap:8px; padding:7px 12px; background:linear-gradient(90deg,rgba(0,180,166,0.06),rgba(255,107,53,0.06)); border:1px solid rgba(0,180,166,0.12); border-radius:8px; margin-bottom:10px; }
.active-resume-name { font-size:12px; font-weight:700; color:var(--navy); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-rename { background:none; border:none; cursor:pointer; font-size:13px; padding:2px; }
.resume-count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; background:var(--orange); color:#fff; border-radius:50%; font-size:10px; font-weight:800; margin-left:4px; }

/* ---- RESTORE BAR ---- */
.restore-bar { padding:8px 14px; background:linear-gradient(90deg,rgba(0,180,166,0.08),rgba(245,166,35,0.08)); border:1px solid rgba(0,180,166,0.15); border-radius:8px; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:12px; font-weight:600; gap:8px; }
.restore-bar .restore-actions { display:flex; gap:6px; }

/* ---- DRAG SECTIONS ---- */
.sm-list { display:flex; flex-direction:column; gap:4px; padding:0; }
.sm-item { display:flex; align-items:center; font-size:11px; font-weight:600; color:var(--text); padding:6px 8px; background:#F8F9FA; border:1px solid var(--border); border-radius:6px; transition:all .15s; list-style:none; }
.sm-item.dragging { opacity:0.4; } .sm-item.locked { color:var(--text-light); background:#F0F0F0; }
.drag-handle { font-size:14px; color:#bbb; cursor:grab; padding-right:6px; font-weight:900; }
.sm-item-content { flex:1; display:flex; align-items:center; justify-content:space-between; }
.switch { position:relative; display:inline-block; width:32px; height:18px; margin-left:6px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background:#D1D5DB; transition:.3s; border-radius:18px; }
.slider:before { position:absolute; content:""; height:12px; width:12px; left:3px; bottom:3px; background:#fff; transition:.3s; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,0.15); }
input:checked+.slider { background:var(--orange); }
input:checked+.slider:before { transform:translateX(14px); }

/* ---- SIMPLE ITEM LAYOUT (no card-body structure) ---- */
.dynamic-item:not(:has(.card-body)) { padding:10px 12px 10px 12px !important; }
.dynamic-item:not(:has(.card-body)).expanded { padding:10px 12px !important; }

/* ---- ATS DRAWER ---- */
.ats-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:2000; display:none; }
.ats-drawer-overlay.open { display:block; }
.ats-drawer { position:fixed; top:0; right:-440px; width:420px; height:100vh; background:#fff; box-shadow:-4px 0 30px rgba(0,0,0,0.12); z-index:2001; overflow-y:auto; padding:28px; transition:right .35s cubic-bezier(0.22,1,0.36,1); }
.ats-drawer.open { right:0; }
.ats-drawer h3 { font-size:18px; color:var(--navy); margin-bottom:16px; }
.ats-drawer .close-btn,.resume-drawer .close-btn { position:absolute; top:16px; right:16px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-light); }
.ats-score-big { display:flex; align-items:center; gap:16px; margin-bottom:24px; padding:16px; background:#F8F9FA; border-radius:12px; }
.ats-circle-big { width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:26px; font-family:'Outfit'; border:4px solid; }
.ats-circle-big.high { border-color:var(--green); color:var(--green); background:var(--green-light); }
.ats-circle-big.mid { border-color:var(--amber); color:var(--amber); background:var(--amber-light); }
.ats-circle-big.low { border-color:var(--red); color:var(--red); background:var(--red-light); }
.ats-score-meta { flex:1; } .ats-score-meta .grade { font-size:16px; font-weight:800; }
.ats-score-meta .grade-desc { font-size:12px; color:var(--text-light); }
.ats-section { margin-bottom:20px; }
.ats-section h4 { font-size:13px; font-weight:800; color:var(--navy); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px; }
.ats-check { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--text); margin-bottom:6px; line-height:1.4; }
.ats-check .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.ats-check .dot.pass { background:var(--green); } .ats-check .dot.warn { background:var(--amber); } .ats-check .dot.fail { background:var(--red); }
.kw-bar { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:11px; }
.kw-bar .kw-name { min-width:100px; font-weight:600; } .kw-bar .kw-track { flex:1; height:6px; background:#EAECEF; border-radius:3px; overflow:hidden; }
.kw-bar .kw-fill { height:100%; border-radius:3px; transition:width .4s; }
.kw-bar .kw-fill.found { background:var(--green); } .kw-bar .kw-fill.missing { background:var(--red); width:100%; opacity:0.3; }

/* ---- RESUME MANAGER DRAWER ---- */
.resume-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:2000; display:none; }
.resume-drawer-overlay.open { display:block; }
.resume-drawer { position:fixed; top:0; left:-440px; width:420px; height:100vh; background:#fff; box-shadow:4px 0 30px rgba(0,0,0,0.12); z-index:2001; overflow-y:auto; padding:28px; transition:left .35s cubic-bezier(0.22,1,0.36,1); }
.resume-drawer.open { left:0; }
.resume-drawer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.resume-drawer-header h3 { font-size:18px; color:var(--navy); }
.resume-limit-info { font-size:11px; color:var(--text-light); margin-bottom:14px; padding:6px 10px; background:#F8F9FA; border-radius:6px; border:1px solid var(--border); }
.resume-list { display:flex; flex-direction:column; gap:10px; }
.resume-card { border:2px solid var(--border); border-radius:12px; padding:14px 16px; background:#fff; transition:all .2s; cursor:pointer; }
.resume-card:hover { border-color:var(--teal); } .resume-card.active { border-color:var(--green); background:var(--green-light); }
.resume-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.resume-card-name { font-size:14px; font-weight:700; color:var(--navy); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resume-card-badge { font-size:9px; font-weight:800; color:#fff; padding:2px 8px; border-radius:4px; background:var(--teal); margin-left:8px; }
.resume-card-meta { font-size:10px; color:var(--text-light); margin-bottom:8px; }
.resume-card-actions { display:flex; gap:6px; flex-wrap:wrap; }
.resume-card-actions button { padding:4px 10px; font-size:10px; font-weight:700; border-radius:5px; cursor:pointer; border:1px solid var(--border); background:#F8F9FA; color:var(--text); transition:all .15s; }
.resume-card-actions button:hover { background:var(--orange-glow); border-color:var(--orange); color:var(--orange); }
.resume-card-actions button.delete-btn:hover { background:var(--red-light); border-color:var(--red); color:var(--red); }

/* ---- ROLE CONVERTER & JD MODALS ---- */
.role-modal-overlay,.jd-modal-overlay { position:fixed; inset:0; background:rgba(26,29,62,0.85); backdrop-filter:blur(8px); z-index:3000; display:none; align-items:center; justify-content:center; }
.role-modal-overlay.open,.jd-modal-overlay.open { display:flex; }
.role-modal,.jd-modal { background:#fff; width:95%; max-width:640px; border-radius:22px; padding:32px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:wizFade .3s; }
.role-modal h2,.jd-modal h2 { font-size:22px; color:var(--navy); margin-bottom:6px; }
.role-modal p,.jd-modal p { font-size:13px; color:var(--text-light); margin-bottom:18px; line-height:1.5; }
.role-domain-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
.role-profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.jd-modal textarea { width:100%; min-height:140px; padding:14px; border:2px solid var(--border); border-radius:10px; font-family:'DM Sans'; font-size:13px; resize:vertical; }
.jd-modal textarea:focus { outline:none; border-color:var(--orange); }
.jd-modal .jd-actions { display:flex; gap:10px; margin-top:14px; justify-content:flex-end; }
.jd-results { margin-top:20px; }
.jd-match-score { display:flex; align-items:center; gap:16px; padding:16px; background:#F8F9FA; border-radius:12px; margin-bottom:16px; }
.jd-match-circle { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:22px; font-family:'Outfit'; border:4px solid; }
.jd-found,.jd-missing { margin-bottom:12px; }
.jd-found h4,.jd-missing h4 { font-size:12px; font-weight:800; margin-bottom:6px; text-transform:uppercase; }
.jd-found h4 { color:var(--green); } .jd-missing h4 { color:var(--red); }
.kw-chips { display:flex; flex-wrap:wrap; gap:4px; }
.kw-chip { padding:4px 10px; border-radius:4px; font-size:11px; font-weight:700; }
.kw-chip.found { background:var(--green-light); color:var(--green); border:1px solid rgba(34,197,94,0.2); }
.kw-chip.missing { background:var(--red-light); color:var(--red); border:1px solid rgba(239,68,68,0.15); }
.jd-tailor-btn { margin-top:16px; width:100%; padding:12px; font-size:14px; }

/* ---- DIFF PREVIEW ---- */
.role-diff-preview { max-height:50vh; overflow-y:auto; }
.diff-section { margin-bottom:16px; }
.diff-label { font-size:10px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.diff-badge { font-size:9px; padding:1px 6px; border-radius:3px; font-weight:700; }
.diff-badge.changed { background:var(--amber-light); color:var(--amber); } .diff-badge.added { background:var(--green-light); color:var(--green); }
.diff-old { background:var(--red-light); border:1px solid rgba(239,68,68,0.12); border-radius:6px; padding:8px 12px; font-size:11px; color:var(--red); margin-bottom:4px; text-decoration:line-through; line-height:1.5; }
.diff-new { background:var(--green-light); border:1px solid rgba(34,197,94,0.12); border-radius:6px; padding:8px 12px; font-size:11px; color:var(--green); line-height:1.5; }
.diff-new textarea,.diff-new input { width:100%; border:1.5px solid rgba(34,197,94,0.2); border-radius:6px; padding:8px; font-family:'DM Sans'; font-size:11px; resize:vertical; background:var(--green-light); color:var(--text); }
.diff-skills-list { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.diff-skills-list .kw-chip.new { background:var(--green-light); color:var(--green); border:1px solid rgba(34,197,94,0.2); }
.diff-skills-list .kw-chip.existing { background:#F0F0F0; color:var(--text-light); border:1px solid var(--border); }

/* ---- UPLOAD ZONE ---- */
.upload-zone { border:2.5px dashed var(--border-strong); border-radius:16px; padding:40px 24px; text-align:center; cursor:pointer; transition:all .3s; background:#FAFBFC; }
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--orange); background:var(--orange-glow); }
.upload-zone .upload-icon { font-size:40px; margin-bottom:12px; }
.upload-zone .upload-text { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.upload-zone .upload-hint { font-size:11px; color:var(--text-light); }
.upload-progress { margin-top:16px; }
.upload-progress-bar { width:100%; height:8px; background:#EAECEF; border-radius:4px; overflow:hidden; }
.upload-progress-fill { height:100%; background:linear-gradient(90deg,var(--orange),var(--gold)); border-radius:4px; transition:width .5s ease; width:0%; }
.upload-status { font-size:12px; font-weight:600; color:var(--text-light); margin-top:8px; text-align:center; }
.upload-error { margin-top:12px; padding:10px 14px; background:var(--red-light); border:1px solid rgba(239,68,68,0.15); border-radius:8px; font-size:12px; color:var(--red); font-weight:600; }
.parsed-review { max-height:50vh; overflow-y:auto; }
.parsed-field { padding:10px 14px; background:#F8F9FA; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; }
.parsed-field-label { font-size:10px; font-weight:800; color:var(--teal); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.parsed-field textarea,.parsed-field input { width:100%; border:1.5px solid var(--border); border-radius:6px; padding:8px; font-family:'DM Sans'; font-size:12px; }
.parsed-field textarea:focus,.parsed-field input:focus { outline:none; border-color:var(--orange); }

/* ======== RESUME PAPER — A4 FIXED ======== */
.resume-paper {
  width:210mm;
  min-height:297mm;
  height:max-content;
  background-color:#fff;
  box-shadow:0 3px 24px rgba(0,0,0,0.07);
  border-radius:2px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:visible;
  transition:transform .3s;
  transform-origin:top center;
}
.page-break-indicator { display:none; }

/* Multi-page visual separator in continuous paper */
.page-break-line {
  position:relative; width:calc(100% + 48px); margin-left:-24px; margin-right:-24px;
  height:28px; z-index:10;
  background:var(--bg-gray, #E6E8EC);
  box-shadow:inset 0 4px 8px rgba(0,0,0,0.06), inset 0 -4px 8px rgba(0,0,0,0.06);
  border-top:1.5px solid #C0C4CC; border-bottom:1.5px solid #C0C4CC;
  display:flex; align-items:center; justify-content:center;
  margin-top:8px; margin-bottom:8px;
}
.page-break-label {
  background:var(--orange, #FF6B35); color:#fff; font-size:10px; font-weight:700;
  padding:2px 12px; border-radius:10px; font-family:'DM Sans',sans-serif;
  letter-spacing:0.3px;
}
/* Page break CSS for multi-page */
.resume-page-break {
  page-break-before:always;
  break-before:page;
  width:100%;
  height:0;
  border:none;
  margin:0;
  padding:0;
}
.exp-item { page-break-inside:avoid; break-inside:avoid; margin-bottom:14px; }
.section-title { page-break-after:avoid; break-after:avoid; font-family:'Outfit'; }
.resume-paper h1 { font-size:28px; margin-bottom:2px; font-weight:800; line-height:1.1; font-family:'Outfit'; }
.resume-paper .job-title { font-size:13px; font-weight:600; margin-bottom:16px; letter-spacing:.5px; }
.resume-paper .section-title { font-size:12px; font-weight:800; border-bottom:2px solid #D0D3D9; padding-bottom:4px; margin:18px 0 10px; text-transform:uppercase; letter-spacing:1.5px; }
.contact-item { display:flex; align-items:center; gap:7px; font-size:10.5px; margin-bottom:5px; color:#555; }
.contact-item a { color:inherit; text-decoration:none; cursor:pointer; }
.contact-item a:hover { text-decoration:underline; color:var(--teal-dark); }
.exp-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
.exp-title { font-weight:800; font-size:12px; color:#1a1a1a; } .exp-date { font-size:10px; color:#888; font-weight:500; white-space:nowrap; }
.exp-company { font-weight:700; font-size:11px; margin-bottom:4px; }
.exp-desc { font-size:10.5px; color:#333; margin-left:12px; } .exp-desc li { margin-bottom:3px; line-height:1.5; }
.summary-text { font-size:11px; color:#333; line-height:1.6; }
.skill-tags { display:flex; flex-wrap:wrap; gap:4px; }
.skill-tag { background:#E4E7EB; padding:3px 8px; border-radius:3px; font-size:9.5px; font-weight:700; color:#444; }
.hl-keyword { font-weight:800; color:#000; }
.accent-color { color:var(--accent, var(--orange)) !important; }

/* ---- EDUCATION TABLE ---- */
.edu-table { width:100%; border-collapse:collapse; font-size:10px; margin-bottom:10px; }
.edu-table th { background:var(--accent,#4472C4); color:#fff; padding:5px 8px; text-align:left; font-weight:700; font-size:9px; text-transform:uppercase; letter-spacing:.5px; }
.edu-table td { padding:4px 8px; border-bottom:1px solid #E4E7EB; font-size:10px; }
.edu-table tr:last-child td { border-bottom:none; }

/* ---- SKILLS GROUPED ---- */
.skill-group { margin-bottom:8px; }
.skill-group-label { font-size:10px; font-weight:800; color:var(--accent,#1A1D3E); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.skill-group-items { font-size:10.5px; color:#333; line-height:1.5; }

/* ---- LANGUAGE DOTS ---- */
.lang-dot-row { display:flex; align-items:center; gap:10px; margin-bottom:4px; font-size:10.5px; }
.lang-dot-name { font-weight:700; min-width:80px; color:#333; }
.lang-dots { display:flex; gap:2px; }
.lang-dot { width:8px; height:8px; border-radius:50%; background:#D0D3D9; }
.lang-dot.filled { background:var(--accent,#4472C4); }

/* ---- TEMPLATE 1: MODERN ---- */
.tpl-modern { flex:1; display:flex; font-family:'DM Sans',sans-serif; color:#333; line-height:1.5; }
.tpl-modern .tpl-sidebar { width:34%; background:#F4F5F7; padding:28px 20px; border-right:1px solid #E2E4E8; }
.tpl-modern .tpl-main { width:66%; padding:28px 24px; }
.tpl-modern h1 { color:var(--accent); } .tpl-modern .job-title { color:var(--accent); }
.tpl-modern .section-title { color:var(--navy); }

/* ---- TEMPLATE 2: CLASSIC ATS ---- */
.tpl-classic { flex:1; display:flex; flex-direction:column; font-family:'DM Sans',sans-serif; color:#333; line-height:1.5; padding:32px 36px; }
.tpl-classic .tpl-header-classic { border-bottom:3px solid var(--accent,#1A1D3E); padding-bottom:14px; margin-bottom:18px; }
.tpl-classic .tpl-header-classic .tpl-header-top { justify-content:center; }
.tpl-classic .tpl-header-classic .tpl-header-text { text-align:center; flex:unset; }
.tpl-classic h1 { color:var(--accent,#1A1D3E); font-size:30px; }
.tpl-classic .job-title { color:var(--accent,#1A1D3E); opacity:.7; }
.tpl-classic .contact-row { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.tpl-classic .section-title { color:var(--accent,#1A1D3E); border-bottom-color:var(--accent,#1A1D3E); }

/* ---- TEMPLATE 3: EXECUTIVE ---- */
.tpl-executive { flex:1; display:flex; flex-direction:column; font-family:'DM Sans',sans-serif; color:#333; line-height:1.5; }
.tpl-executive .tpl-header-exec { background:var(--accent,#1A1D3E); color:#fff; padding:24px 28px; }
.tpl-executive .tpl-header-exec h1 { color:#fff !important; font-size:28px; }
.tpl-executive .tpl-header-exec .job-title { color:rgba(255,255,255,.75) !important; }
.tpl-executive .tpl-header-exec .contact-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.tpl-executive .tpl-header-exec .contact-item { color:rgba(255,255,255,.8); }
.tpl-executive .tpl-header-exec .profile-photo-wrap { border-color:rgba(255,255,255,0.4); }
.tpl-executive .tpl-body-exec { flex:1; display:flex; }
.tpl-executive .tpl-main { flex:1; padding:24px 28px; }
.tpl-executive .tpl-sidebar-right { width:30%; background:#F7F8FA; padding:20px 16px; border-left:1px solid #E2E4E8; }
.tpl-executive .section-title { color:var(--accent,#1A1D3E); border-bottom-color:var(--accent,#1A1D3E); }

/* ---- TEMPLATE 4: MINIMAL ---- */
.tpl-minimal { flex:1; display:flex; flex-direction:column; font-family:'DM Sans',sans-serif; color:#333; line-height:1.6; padding:36px 40px; }
.tpl-minimal .tpl-header-minimal { border-bottom:1px solid #333; padding-bottom:12px; margin-bottom:20px; }
.tpl-minimal h1 { color:#333; font-size:26px; letter-spacing:2px; text-transform:uppercase; }
.tpl-minimal .job-title { color:var(--accent,#888); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.tpl-minimal .contact-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:10px; }
.tpl-minimal .section-title { color:#333; border-bottom:1px solid #333; font-size:11px; letter-spacing:2px; }

/* ---- TEMPLATE 5: BOLD ---- */
.tpl-bold { flex:1; display:flex; font-family:'DM Sans',sans-serif; color:#333; line-height:1.5; }
.tpl-bold .tpl-sidebar-dark { width:34%; background:var(--accent,#1A1D3E); padding:28px 18px; color:#fff; }
.tpl-bold .tpl-sidebar-dark h1 { color:#fff !important; } .tpl-bold .tpl-sidebar-dark .job-title { color:rgba(255,255,255,.7) !important; }
.tpl-bold .tpl-sidebar-dark .contact-item { color:rgba(255,255,255,.8); }
.tpl-bold .tpl-sidebar-dark .section-title { color:#fff; border-bottom-color:rgba(255,255,255,.3); }
.tpl-bold .tpl-sidebar-dark .skill-tag { background:rgba(255,255,255,.15); color:#fff; }
.tpl-bold .tpl-sidebar-dark .summary-text { color:rgba(255,255,255,.85); }
.tpl-bold .tpl-sidebar-dark .profile-photo-wrap { border-color:rgba(255,255,255,0.4); }
.tpl-bold .tpl-main { width:66%; padding:28px 24px; } .tpl-bold .section-title { color:var(--accent,#1A1D3E); }

/* ---- TEMPLATE 6: AIR 1 (Table-based, Professional) ---- */
.tpl-air1 { flex:1; display:flex; flex-direction:column; font-family:'DM Sans',sans-serif; color:#333; line-height:1.4; padding:0; }
.tpl-air1 .air1-header { padding:20px 28px 12px; }
.tpl-air1 .air1-header h1 { font-size:26px; color:#1a1a1a; margin-bottom:2px; }
.tpl-air1 .air1-header .job-title { font-size:12px; color:#555; font-weight:600; letter-spacing:.3px; margin-bottom:0; }
.tpl-air1 .air1-contact { position:absolute; top:20px; right:28px; text-align:right; }
.tpl-air1 .air1-contact .contact-item { justify-content:flex-end; font-size:10px; }
.tpl-air1 .air1-body { padding:0 28px 28px; flex:1; }
.tpl-air1 .section-bar { background:var(--accent,#4472C4); color:#fff; font-family:'Outfit'; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; padding:5px 12px; margin:14px 0 10px; border-radius:2px; }
.tpl-air1 .section-title { display:none; }
.tpl-air1 .edu-table th { background:var(--accent,#4472C4); }
.tpl-air1 .exp-item { margin-bottom:12px; }
.tpl-air1 .exp-header { margin-bottom:1px; }
.tpl-air1 .exp-desc { font-size:10px; } .tpl-air1 .exp-desc li { margin-bottom:2px; line-height:1.4; }
.tpl-air1 .summary-text { font-size:10.5px; line-height:1.5; }
.tpl-air1 .skill-tags { gap:3px; } .tpl-air1 .skill-tag { font-size:9px; padding:2px 7px; }

/* ---- TEMPLATE DROPDOWN ---- */
.tpl-dropdown-wrap { position:relative; }
.tpl-dropdown { display:none; position:absolute; top:100%; left:0; margin-top:6px; background:#fff; border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow-lg); z-index:200; min-width:200px; overflow:hidden; animation:wizFade .2s; }
.tpl-dropdown.open { display:block; }
.tpl-dd-item { padding:10px 16px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background .15s; }
.tpl-dd-item:hover { background:var(--orange-glow); }
.tpl-dd-item.active { background:var(--orange-glow); color:var(--orange); border-left:3px solid var(--orange); }
.tpl-dd-tag { font-size:9px; font-weight:700; color:var(--text-light); background:var(--bg-gray); padding:2px 6px; border-radius:4px; }
.tpl-dd-divider { height:1px; background:var(--border); margin:4px 0; }

/* ---- SCROLLBARS ---- */
.editor-panel::-webkit-scrollbar,.preview-panel::-webkit-scrollbar,.ats-drawer::-webkit-scrollbar,.resume-drawer::-webkit-scrollbar { width:5px; }
.editor-panel::-webkit-scrollbar-thumb,.preview-panel::-webkit-scrollbar-thumb,.ats-drawer::-webkit-scrollbar-thumb,.resume-drawer::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }

/* ---- MANUAL HL ---- */
.manual-hl-mode { cursor:text !important; } .manual-hl-mode * { cursor:text !important; }

/* ---- UNDO/REDO ---- */
.btn-undo-redo { padding:4px 8px; font-size:14px; background:transparent; border:1.5px solid var(--border-strong); border-radius:6px; cursor:pointer; color:var(--text-light); transition:all .15s; line-height:1; }
.btn-undo-redo:hover:not(:disabled) { border-color:var(--orange); color:var(--orange); }
.btn-undo-redo:disabled { opacity:0.3; cursor:not-allowed; }

/* ---- SKILL GROUP BUILDER ---- */
.skill-group-builder { display:flex; flex-direction:column; gap:8px; }
.skill-group-item { background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.skill-group-item .sg-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.skill-group-item .sg-name-input { flex:1; padding:5px 8px; border:1.5px solid var(--border); border-radius:4px; font-size:11px; font-weight:700; font-family:'DM Sans'; }
.skill-group-item .sg-name-input:focus { outline:none; border-color:var(--orange); }
.skill-group-item .sg-remove { background:none; border:none; color:var(--red); cursor:pointer; font-size:13px; opacity:0.5; padding:2px; }
.skill-group-item .sg-remove:hover { opacity:1; }
.skill-group-item .sg-skills-input { width:100%; padding:5px 8px; border:1.5px solid var(--border); border-radius:4px; font-size:11px; font-family:'DM Sans'; }
.btn-add-group { display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-weight:700; font-size:11px; background:transparent; border:none; cursor:pointer; padding:4px 0; }

/* ---- SKILLS: BAR LAYOUT ---- */
.skill-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.skill-bar-name { min-width:90px; font-size:10px; font-weight:700; color:#333; }
.skill-bar-track { flex:1; height:6px; background:#E4E7EB; border-radius:3px; overflow:hidden; }
.skill-bar-fill { height:100%; background:var(--accent,#4472C4); border-radius:3px; transition:width .3s; }

/* ---- SKILLS: PILL LAYOUT ---- */
.skill-pill { display:inline-flex; align-items:center; padding:4px 12px; border-radius:50px; font-size:10px; font-weight:600; background:var(--accent,#4472C4); color:#fff; margin:2px; }

/* ---- SKILLS: RATING LAYOUT ---- */
.skill-rating-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.skill-rating-name { min-width:90px; font-size:10px; font-weight:700; color:#333; }
.skill-rating-stars { display:flex; gap:1px; }
.skill-star { font-size:10px; color:#D0D3D9; }
.skill-star.filled { color:var(--accent,#F5A623); }

/* ---- LANGUAGES: BAR LAYOUT ---- */
.lang-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:10.5px; }
.lang-bar-name { min-width:80px; font-weight:700; color:#333; }
.lang-bar-track { flex:1; height:6px; background:#E4E7EB; border-radius:3px; overflow:hidden; }
.lang-bar-fill { height:100%; background:var(--accent,#4472C4); border-radius:3px; }

/* ---- LANGUAGES: TAGS LAYOUT ---- */
.lang-tag { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:50px; font-size:10px; font-weight:600; background:#F0F2F5; color:#333; margin:2px; border:1px solid var(--border); }
.lang-tag .lang-level { font-size:8px; color:var(--text-light); font-weight:700; text-transform:uppercase; }

/* ---- PREVIEW RESIZE HANDLES ---- */
.preview-resize-handle { position:absolute; background:transparent; z-index:50; transition:background .2s, height .2s; }
.preview-resize-handle:hover { background:rgba(255,107,53,0.15); }
.preview-resize-handle.col-handle { width:8px; top:0; bottom:0; cursor:ew-resize; }
.preview-resize-handle.col-handle::after { content:'⋮'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--orange); font-size:14px; font-weight:900; opacity:0.4; transition:opacity .2s; }
.preview-resize-handle:hover.col-handle::after { opacity:1; }
.preview-resize-handle.section-handle { height:10px; left:0; right:0; cursor:ns-resize; bottom:-5px; border-radius:0 0 2px 2px; border-top:1px dashed transparent; transition:border-color .2s, background .2s; }
.preview-resize-handle.section-handle::after { content:'⋯ drag to adjust spacing ⋯'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--orange); font-size:8px; font-weight:700; opacity:0; transition:opacity .2s; letter-spacing:1px; white-space:nowrap; }
.preview-section-wrapper:hover .section-handle { border-top-color:rgba(255,107,53,0.3); }
.preview-section-wrapper:hover .section-handle::after { opacity:0.6; }
.preview-resize-handle:hover.section-handle { border-top-color:var(--orange); background:rgba(255,107,53,0.08); }
.preview-resize-handle:hover.section-handle::after { opacity:1; }
.resume-paper .section-title, .resume-paper .section-bar { position:relative; }
.resume-paper .exp-item, .resume-paper .edu-table, .resume-paper .skill-tags, .resume-paper .skill-group, .resume-paper .summary-text { position:relative; }
.tpl-modern .tpl-sidebar, .tpl-bold .tpl-sidebar-dark, .tpl-executive .tpl-sidebar-right { position:relative; transition:width .2s; }

/* ---- TOAST NOTIFICATIONS ---- */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:13px; color:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.15); transform:translateX(120%); transition:transform .3s cubic-bezier(0.22,1,0.36,1), opacity .3s; opacity:0; max-width:400px; }
.toast.show { transform:translateX(0); opacity:1; }
.toast-info { background:var(--navy, #1A1D3E); }
.toast-success { background:var(--green, #22C55E); }
.toast-warning { background:var(--orange, #FF6B35); }
.toast-msg { flex:1; line-height:1.4; }
.toast-action { background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4); color:#fff; padding:4px 12px; border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:'DM Sans',sans-serif; }
.toast-action:hover { background:rgba(255,255,255,0.3); }
.toast-close { background:none; border:none; color:rgba(255,255,255,0.6); font-size:14px; cursor:pointer; padding:0 0 0 4px; line-height:1; }
.toast-close:hover { color:#fff; }

/* ---- FIELD VISIBILITY EYE ICON ---- */
.field-eye-btn { background:none; border:none; cursor:pointer; font-size:12px; padding:0 2px; vertical-align:middle; opacity:1; transition:opacity .2s; line-height:1; }
.field-eye-btn:hover { transform:scale(1.15); }

/* ---- RICH TEXT TOOLBAR ---- */
.desc-toolbar { display:flex; gap:2px; margin-bottom:4px; padding:3px 4px; background:#f5f5f5; border-radius:6px 6px 0 0; border:1px solid #e0e0e0; border-bottom:none; }
.tb-btn { background:#fff; border:1px solid #ddd; border-radius:4px; width:26px; height:24px; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:'DM Sans',sans-serif; color:var(--navy, #1A1D3E); transition:background .15s, border-color .15s; }
.tb-btn:hover { background:#eee; border-color:#bbb; }
.tb-btn.tb-italic { font-style:italic; }
.tb-btn.tb-underline { text-decoration:underline; }

/* ---- INTERACTIVE SKILL STARS ---- */
.skill-star { cursor:pointer; transition:color .15s, transform .15s; }
.skill-star:hover { transform:scale(1.3); }
.skill-bar-track { cursor:pointer; }
.skill-bar-track:hover .skill-bar-fill { opacity:0.8; }

/* ---- AI LOADING SPINNER ---- */
.ai-spinner { display:inline-block; width:20px; height:20px; border:3px solid rgba(255,107,53,0.2); border-top-color:var(--orange, #FF6B35); border-radius:50%; animation:aiSpin .7s linear infinite; }
@keyframes aiSpin { to { transform:rotate(360deg); } }
.ai-loading { display:flex; align-items:center; gap:10px; padding:20px; justify-content:center; color:var(--text-light); font-size:13px; font-family:'DM Sans',sans-serif; }
.ai-suggestion-card { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:12px; margin-top:10px; }
.ai-suggestion-card h4 { font-size:12px; font-weight:700; color:var(--navy, #1A1D3E); margin:0 0 8px; }
.ai-suggestion-card p, .ai-suggestion-card textarea { font-size:12px; line-height:1.5; color:#333; }
.ai-suggestion-card textarea { width:100%; border:1px solid #ddd; border-radius:6px; padding:8px; font-family:'DM Sans',sans-serif; resize:vertical; }
.ai-suggestion-card .ai-apply-btn { display:inline-block; margin-top:6px; padding:4px 12px; font-size:11px; font-weight:700; background:var(--green, #22C55E); color:#fff; border:none; border-radius:6px; cursor:pointer; font-family:'DM Sans',sans-serif; }
.ai-suggestion-card .ai-apply-btn:hover { opacity:0.85; }
.ai-chip-list { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.ai-chip { font-size:11px; padding:2px 8px; border-radius:10px; font-family:'DM Sans',sans-serif; }
.ai-chip.add { background:#dcfce7; color:#166534; }
.ai-chip.remove { background:#fef2f2; color:#991b1b; }

/* ---- MULTI-PAGE BREAK INDICATORS ---- */
/* page-break-label defined in .page-break-line block near .resume-paper */
.preview-section-wrapper, .edu-table, .cert-item, .achv-item, .afl-item, .trn-item { page-break-inside:avoid; break-inside:avoid; }

/* ============================================
   MOBILE RESPONSIVE UI
   ============================================ */

/* ---- MOBILE TAB SWITCHER (Editor/Preview toggle) ---- */
.mobile-tab-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:#fff; border-top:2px solid var(--border); padding:6px 12px; gap:6px; }
.mobile-tab-bar button { flex:1; padding:10px; border:none; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; background:var(--bg-gray); color:var(--text-light); }
.mobile-tab-bar button.active { background:var(--orange); color:#fff; box-shadow:0 2px 8px rgba(255,107,53,0.3); }

/* ---- TABLET (max-width: 1024px) ---- */
@media (max-width: 1024px) {
  .nav-row { padding:0 12px; }
  .nav-row-primary { padding:6px 12px; flex-wrap:wrap; gap:6px; }
  .nav-group { gap:4px; }
  .nav-separator { display:none; }
  .color-picker-group { display:none; }
  .color-wheel-wrap { display:none; }
  .scale-control { display:none; }
  .editor-panel { min-width:280px !important; width:40% !important; }
}

/* ---- MOBILE (max-width: 768px) ---- */
@media (max-width: 768px) {
  /* Navbar: compact single row */
  .navbar { position:sticky; top:0; }
  .nav-row-primary { padding:6px 10px; justify-content:center; gap:4px; }
  .nav-row-toolbar { padding:4px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav-row-toolbar::-webkit-scrollbar { display:none; }
  .nav-row-toolbar .nav-group { flex-wrap:nowrap; }
  .logo { font-size:16px; }
  .btn { padding:5px 8px; font-size:10px; }
  .btn-sm { padding:4px 7px; font-size:9px; }
  #btnChooseTemplate, #btnDownload { padding:5px 8px; font-size:10px; }
  #authWrap { gap:4px !important; }
  #btnLogin { padding:4px 8px !important; font-size:9px !important; }
  .tpl-dropdown-wrap { position:static; }
  .tpl-dropdown { position:fixed; left:10px; right:10px; top:auto; bottom:60px; z-index:300; max-width:none; }
  .resume-count-badge { font-size:9px; padding:1px 5px; }

  /* Wizard: full-width */
  .wizard-modal { max-width:100%; border-radius:16px; padding:20px 16px; margin:8px; }
  .wizard-header h2 { font-size:18px; }
  .wizard-header p { font-size:12px; }
  .option-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .option-grid[style*="1fr 1fr 1fr"] { grid-template-columns:1fr 1fr !important; }
  .option-icon { font-size:20px; margin-bottom:4px; }
  .option-title { font-size:12px; }
  .option-desc { font-size:10px; }
  .software-grid { grid-template-columns:repeat(2, 1fr); }
  .upload-zone { padding:24px 16px; }

  /* Builder: stacked layout with tab switching */
  .builder-container { flex-direction:column; height:auto; min-height:calc(100vh - 80px); padding-bottom:56px; }
  .resizer { display:none !important; }
  .editor-panel { width:100% !important; min-width:0 !important; max-height:none; padding:10px; order:1; }
  .preview-panel { width:100% !important; padding:10px; order:2; display:none; }
  .preview-panel.mobile-active { display:flex; }
  .editor-panel.mobile-hidden { display:none; }

  /* Floating rail: horizontal at top */
  .floating-rail { position:sticky; top:80px; z-index:50; display:flex; flex-direction:row; gap:2px; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); padding:6px; border-radius:10px; margin-bottom:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; left:0; right:0; }
  .floating-rail::-webkit-scrollbar { display:none; }
  .rail-tab { flex-direction:row; padding:6px 10px; min-width:auto; gap:4px; }
  .rail-label { font-size:10px; display:inline; }
  .rail-icon { font-size:12px; }

  /* Mobile tab bar: show */
  .mobile-tab-bar { display:flex; }

  /* Form adjustments */
  .form-row { flex-direction:column; gap:8px; }
  .form-group { width:100%; }
  .form-group label { font-size:11px; }
  .form-group input, .form-group textarea, .form-group select { font-size:14px; padding:10px; }
  .accordion-header h3 { font-size:14px; }
  .dynamic-item { margin-bottom:8px; }
  .card-summary { padding:8px; }

  /* Resume preview scaling */
  .resume-paper { transform:scale(0.45) !important; transform-origin:top center; margin-bottom:-55%; }

  /* Drawers: full screen on mobile */
  .ats-drawer { width:100% !important; max-width:100%; }
  .resume-drawer { width:100% !important; max-width:100%; }
  .role-modal { max-width:100%; margin:8px; border-radius:16px; }
  .jd-modal { max-width:100%; margin:8px; border-radius:16px; }
  .role-domain-grid { grid-template-columns:1fr 1fr !important; }

  /* Active resume bar */
  .active-resume-bar { padding:6px 10px; }
  .restore-bar { padding:8px 10px; font-size:11px; }

  /* Section manager */
  .sm-list { font-size:11px; }

  /* Page break indicator */
  .page-break-label { font-size:7px; padding:1px 4px; }
}

/* ---- SMALL MOBILE (max-width: 480px) ---- */
@media (max-width: 480px) {
  .nav-row-primary { padding:4px 6px; }
  .logo { font-size:14px; }
  #btnMyResumes span:not(.resume-count-badge) { display:none; }
  .btn { padding:4px 6px; font-size:9px; gap:2px; }
  .wizard-modal { padding:16px 12px; }
  .wizard-header h2 { font-size:16px; }
  .option-grid { gap:6px; }
  .option-card { padding:12px 8px; }
  .resume-paper { transform:scale(0.38) !important; margin-bottom:-60%; }
  .desc-toolbar .tb-btn { width:22px; height:20px; font-size:10px; }
}

/* ---- PRINT / PDF ---- */
@media print {
  .navbar,.editor-panel,.resizer,.page-break-indicator,.floating-rail,.preview-resize-handle,.page-break-line { display:none !important; }
  .builder-container { display:block !important; }
  .preview-panel { padding:0 !important; overflow:visible !important; }
  .resume-paper { box-shadow:none !important; width:100% !important; transform:none !important; min-height:auto !important; }
  .resume-page-break { page-break-before:always; }
}