/* ===== GBResume Builder CSS ===== */
:root{
  --gold:#ffaa17;--gold-d:#e09200;
  --navy:#1A2E4A;--navy-l:#253F5F;
  --dark:#0D1421;--white:#fff;--off:#F8FAFC;
  --gray:#64748B;--light:#E2E8F0;--border:#E8ECF0;
  --header-h:56px;--r:10px;--r-sm:7px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--off);color:var(--navy);height:100vh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}

/* HEADER */
.builder-header{height:var(--header-h);background:var(--dark);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06)}
.builder-header-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.back-btn{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;text-decoration:none}
.back-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.back-btn svg{width:16px;height:16px}
.header-logo{display:flex;align-items:baseline;gap:1px;flex-shrink:0}
.logo-gb{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:800;color:var(--gold)}
.logo-res{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:#fff}
.resume-title-input{background:transparent;border:none;color:#fff;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;outline:none;max-width:180px;padding:4px 8px;border-radius:5px;transition:background .2s}
.resume-title-input:hover,.resume-title-input:focus{background:rgba(255,255,255,.08)}

.builder-header-center{display:flex;gap:3px;background:rgba(255,255,255,.07);padding:3px;border-radius:8px;flex-shrink:0}
.tab-btn{padding:5px 18px;border:none;background:transparent;color:rgba(255,255,255,.55);font-size:13px;font-weight:600;cursor:pointer;border-radius:6px;transition:all .2s;font-family:inherit}
.tab-btn.active{background:#fff;color:var(--navy)}
.tab-btn:not(.active):hover{color:rgba(255,255,255,.9)}

.builder-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.save-status{font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap}
.btn-upload{display:flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(124,58,237,.8);border:none;color:#fff;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-upload svg{width:13px;height:13px}
.btn-upload:hover{background:#7C3AED}
.btn-score{display:flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8);border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-score svg{width:13px;height:13px}
.btn-score:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-save{padding:6px 16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-save:hover{background:rgba(255,255,255,.18)}
.btn-pdf{display:flex;align-items:center;gap:5px;padding:6px 14px;background:var(--gold);border:none;color:var(--dark);border-radius:7px;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-pdf svg{width:13px;height:13px}
.btn-pdf:hover{background:var(--gold-d);box-shadow:0 2px 10px rgba(255,170,23,.4)}

/* BUILDER BODY */
.builder-body{display:flex;flex:1;overflow:hidden}

/* FORM PANEL */
.form-panel{width:380px;flex-shrink:0;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.form-scroll{flex:1;overflow-y:auto;padding-bottom:32px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.form-scroll::-webkit-scrollbar{width:4px}
.form-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* FORM SECTIONS */
.form-section{border-bottom:1px solid var(--border)}
.form-section-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;user-select:none;transition:background .15s}
.form-section-header:hover{background:var(--off)}
.form-section-left{display:flex;align-items:center;gap:9px}
.sec-icon{font-size:16px;line-height:1}
.sec-title{font-size:14px;font-weight:600;color:var(--navy)}
.sec-arrow{width:16px;height:16px;color:var(--gray);transition:transform .2s;flex-shrink:0}
.form-section-body{padding:8px 16px 16px;overflow:hidden}
.form-section-body.collapsed{display:none}
.form-section.open .sec-arrow{transform:rotate(180deg)}

/* FIELDS */
.photo-upload-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px;background:var(--off);border-radius:var(--r-sm)}
.photo-preview{width:58px;height:58px;border-radius:50%;background:var(--light);border:2px dashed var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;transition:border-color .2s}
.photo-preview:hover{border-color:var(--gold)}
#photoPlaceholder{font-size:10px;color:var(--gray);text-align:center;line-height:1.3}
.photo-hint{font-size:13px;font-weight:600;color:var(--navy)}
.photo-sub{font-size:11px;color:var(--gray);margin-top:2px}
.btn-remove-photo{margin-top:5px;font-size:11px;color:#EF4444;background:none;border:none;cursor:pointer;padding:0;font-family:inherit}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:5px}
.field-full{grid-column:1/-1}
.field label{font-size:11px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.5px}
.grb-input{padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:inherit;color:var(--navy);background:var(--white);outline:none;transition:border-color .2s;width:100%}
.grb-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,170,23,.1)}
.grb-textarea{resize:vertical;min-height:90px}
.ai-suggest-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(124,58,237,.08);border:1.5px solid rgba(124,58,237,.2);border-radius:var(--r-sm);color:#7C3AED;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;margin-top:8px}
.ai-suggest-btn svg{width:14px;height:14px}
.ai-suggest-btn:hover{background:rgba(124,58,237,.15)}

/* REPEATER ITEMS */
.repeater-item{background:var(--off);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;margin-bottom:10px;position:relative}
.repeater-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.repeater-item-title{font-size:12px;font-weight:700;color:var(--navy)}
.remove-item-btn{width:24px;height:24px;border-radius:5px;background:#FEF2F2;border:none;color:#EF4444;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s}
.remove-item-btn:hover{background:#EF4444;color:#fff}
.add-item-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1.5px dashed var(--border);border-radius:var(--r-sm);background:transparent;color:var(--gray);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;width:100%;margin-top:4px}
.add-item-btn svg{width:14px;height:14px;flex-shrink:0}
.add-item-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,170,23,.04)}

/* STYLE TAB */
.style-section{padding:16px;border-bottom:1px solid var(--border)}
.style-heading{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);margin-bottom:12px}
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:300px;overflow-y:auto;padding:2px}
.tpl-thumb{border:2px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;position:relative}
.tpl-thumb:hover,.tpl-thumb.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,170,23,.2)}
.tpl-thumb-inner{height:70px;padding:6px}
.tpl-thumb-name{font-size:9px;font-weight:600;text-align:center;padding:4px 4px 5px;color:var(--navy);line-height:1.2}
.tpl-thumb.active::after{content:'✓';position:absolute;top:4px;right:4px;width:14px;height:14px;background:var(--gold);color:var(--dark);border-radius:50%;font-size:8px;font-weight:900;display:flex;align-items:center;justify-content:center;line-height:14px;text-align:center}
.color-themes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.color-chip{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .2s}
.color-chip:hover,.color-chip.active{border-color:var(--navy);transform:scale(1.15)}
.custom-color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.custom-color-row label{font-size:11px;font-weight:600;color:var(--gray)}
.custom-color-row input[type=color]{width:36px;height:30px;border:1.5px solid var(--border);border-radius:6px;cursor:pointer;padding:2px}
.font-options{display:flex;flex-wrap:wrap;gap:7px}
.font-btn{padding:7px 13px;border:1.5px solid var(--border);border-radius:7px;background:#fff;font-size:12px;font-weight:600;cursor:pointer;color:var(--gray);transition:all .2s;font-family:inherit}
.font-btn:hover,.font-btn.active{border-color:var(--gold);background:var(--gold);color:var(--dark)}

/* PREVIEW PANEL */
.preview-panel{flex:1;display:flex;flex-direction:column;background:#CBD5E1;overflow:hidden;position:relative}
.preview-topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)}
.preview-label{font-size:12px;color:rgba(255,255,255,.6)}
.preview-tpl-name{font-size:12px;font-weight:700;color:var(--gold);background:rgba(255,170,23,.1);padding:2px 10px;border-radius:20px}
.preview-zoom{display:flex;align-items:center;gap:8px}
.preview-zoom button{width:24px;height:24px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;border-radius:5px;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s}
.preview-zoom button:hover{background:rgba(255,255,255,.18)}
.preview-zoom span{font-size:12px;color:rgba(255,255,255,.6);min-width:36px;text-align:center}
.preview-scroll{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:24px;scrollbar-width:thin}
.preview-wrap{display:flex;justify-content:center}
.resume-preview{background:#fff;width:794px;min-height:1123px;box-shadow:0 8px 40px rgba(0,0,0,.25);transform-origin:top center;transition:transform .2s;font-family:'Poppins',sans-serif;font-size:10px;color:#1E293B;position:relative}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.modal{background:#fff;border-radius:18px;padding:32px;max-width:420px;width:90%;box-shadow:0 24px 60px rgba(0,0,0,.3);position:relative}
.modal-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:var(--off);border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--gray);transition:all .2s}
.modal-close:hover{background:var(--border);color:var(--navy)}
.modal h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;text-align:center;color:var(--navy);margin-bottom:6px}
.modal p{font-size:13px;color:var(--gray);text-align:center;margin-bottom:20px;line-height:1.6}
.upload-icon{font-size:44px;text-align:center;margin-bottom:14px}
.dropzone{border:2px dashed #C4B5FD;border-radius:12px;padding:28px;background:#FAF5FF;cursor:pointer;text-align:center;transition:all .2s;margin-bottom:14px}
.dropzone:hover,.dropzone.dragover{border-color:#7C3AED;background:#EDE9FE}
.dropzone-text{font-size:13px;font-weight:600;color:#7C3AED;margin-top:10px}
.dropzone-sub{font-size:11px;color:var(--gray);margin-top:4px}
.upload-status{padding:10px 14px;border-radius:8px;background:var(--off);font-size:13px;color:var(--navy);border:1px solid var(--border)}
.modal-actions{display:flex;gap:10px;justify-content:center}
.btn-ghost{padding:10px 24px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--gray);font-family:inherit;transition:all .2s}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-primary{padding:10px 24px;border:none;border-radius:8px;background:var(--gold);color:var(--dark);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-primary:hover{background:var(--gold-d)}

/* SCORE MODAL */
.score-modal{text-align:center}
.score-circle-wrap{position:relative;width:140px;height:140px;margin:16px auto}
.score-circle{width:140px;height:140px}
.score-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:34px;font-weight:800;color:var(--navy)}
.score-tips{text-align:left;margin-top:16px;display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto}
.score-tip{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.5}
.score-tip.good{background:#F0FDF4;color:#15803D}
.score-tip.warn{background:#FFFBEB;color:#92400E}
.score-tip.bad{background:#FEF2F2;color:#991B1B}
.score-tip-icon{font-size:14px;flex-shrink:0;margin-top:1px}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:var(--navy);color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);border-left:4px solid var(--gold);transform:translateY(80px);opacity:0;transition:all .3s;z-index:9999;max-width:320px}
.toast.show{transform:translateY(0);opacity:1}

@media(max-width:900px){
  .form-panel{width:320px}
  .builder-header-center{display:none}
  .save-status{display:none}
}
@media(max-width:640px){
  .form-panel{position:fixed;left:-100%;top:var(--header-h);bottom:0;z-index:50;width:320px;transition:left .3s;box-shadow:4px 0 20px rgba(0,0,0,.15)}
  .form-panel.open{left:0}
  .preview-panel{flex:1}
}