/* =============================================
   CodeToFun — Resume Builder
   Self-contained, mobile-first responsive CSS
   ============================================= */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;color:#1e293b;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
code{font-family:"Courier New",Courier,monospace}
.container{max-width:1280px;margin:0 auto;padding:0 1rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.938rem;border-radius:.5rem;padding:.625rem 1.5rem;transition:all .2s ease;text-decoration:none;border:none;cursor:pointer;line-height:1.4}
a.btn-primary,button.btn-primary,.btn-primary{background:#2563eb;color:#fff}
a.btn-primary:hover,button.btn-primary:hover,.btn-primary:hover{background:#1d4ed8;color:#fff}
.btn-sm{padding:.5rem 1.25rem;font-size:.875rem}

/* ===================== HEADER ===================== */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:4rem}
.logo{display:flex;align-items:center;gap:.75rem}
.logo-icon{background:#2563eb;padding:.5rem;border-radius:.5rem;color:#fff;display:flex;align-items:center;justify-content:center}
.logo-text{display:flex;flex-direction:column;line-height:1.2}
.logo-name{font-size:1.125rem;font-weight:700;color:#0f172a}
.logo-tagline{font-size:.75rem;color:#64748b}
.desktop-nav{display:none;align-items:center;gap:2rem}
.desktop-nav a:not(.btn){color:#475569;font-weight:500;font-size:.938rem;transition:color .2s}
.desktop-nav a:not(.btn):hover{color:#2563eb}
.desktop-nav .btn-primary,.mobile-nav .btn-primary{background:#2563eb;color:#fff}
.desktop-nav .btn-primary:hover,.mobile-nav .btn-primary:hover{background:#1d4ed8;color:#fff}
.mobile-menu-btn{display:flex;padding:.5rem;color:#475569}
.mobile-nav{display:none;flex-direction:column;gap:1rem;padding:1rem;border-top:1px solid #e2e8f0;background:#fff}
.mobile-nav.open{display:flex}
.mobile-nav a:not(.btn){color:#475569;font-weight:500;font-size:.938rem;transition:color .2s}
.mobile-nav a:not(.btn):hover{color:#2563eb}

/* ===================== FOOTER ===================== */
.site-footer{background:#0f172a;color:#94a3b8;padding:3rem 0 0}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-bottom:3rem}
.footer-brand p{color:#94a3b8;line-height:1.6;margin:1rem 0 1.5rem}
.footer-brand .logo-name{color:#fff}.footer-brand .logo-tagline{color:#94a3b8}
.follow-heading{color:#fff;font-size:.875rem;font-weight:600;margin-bottom:.75rem}
.social-links{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.social-links a{background:#1e293b;padding:.625rem;border-radius:.5rem;transition:background .2s;display:flex;align-items:center;justify-content:center}
.social-links a:hover{background:#334155}
.trusted-badge{display:inline-flex;align-items:center;gap:.5rem;background:#1e293b;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;border:1px solid #334155}
.trusted-badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:#3b82f6}
.footer-links-col h4{color:#fff;font-size:.938rem;font-weight:600;margin-bottom:1rem}
.footer-links-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-links-col a{font-size:.875rem;transition:color .2s}
.footer-links-col a:hover{color:#60a5fa}
.footer-all-links ul{columns:2;column-gap:1.5rem}
.footer-all-links li{break-inside:avoid}
.footer-bottom{border-top:1px solid #1e293b;padding:2rem 0;display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.footer-bottom p{font-size:.875rem;color:#94a3b8;display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;justify-content:center}
.heart-icon{vertical-align:middle}
.footer-legal-links{display:flex;gap:1.5rem;font-size:.875rem}
.footer-legal-links a{transition:color .2s}.footer-legal-links a:hover{color:#60a5fa}

/* ===================== COOKIE NOTICE ===================== */
.cookie-notice{position:fixed;bottom:0;left:0;right:0;background:#0f172a;color:#cbd5e1;padding:1rem;display:flex;flex-direction:column;gap:.75rem;align-items:center;z-index:200;box-shadow:0 -4px 12px rgba(0,0,0,.15)}
.cookie-notice p{font-size:.813rem;text-align:center;line-height:1.5}
.cookie-notice a:not(.btn){color:#60a5fa;text-decoration:underline}
.cookie-notice .btn-primary{background:#2563eb;color:#fff}
.cookie-notice .btn-primary:hover{background:#1d4ed8;color:#fff}

/* =============================================
   RESUME BUILDER PAGE
   ============================================= */
.rb-page{background:linear-gradient(135deg,#f8fafc,#eff6ff);min-height:100vh}
.rb-body{padding:2rem 0}

/* --- Page Header --- */
.rb-header{text-align:center;margin-bottom:2rem}
.rb-badge{display:inline-flex;align-items:center;gap:.5rem;background:#dbeafe;color:#1d4ed8;padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:600;margin-bottom:1rem}
.rb-badge svg{width:1rem;height:1rem}
.rb-header h1{font-size:2rem;font-weight:800;color:#0f172a;margin-bottom:.5rem}
.rb-header p{font-size:1rem;color:#64748b;max-width:48rem;margin:0 auto;line-height:1.7}

/* --- Steps --- */
.rb-steps{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}
.step-pill{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;font-size:.813rem;font-weight:500;transition:all .2s}
.step-pill.active{background:#2563eb;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.3)}
.step-pill.done{background:#dbeafe;color:#1d4ed8}
.step-pill.pending{background:#f1f5f9;color:#94a3b8}
.step-num{width:1.25rem;height:1.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.688rem;font-weight:700}
.step-pill.active .step-num{background:rgba(255,255,255,.2)}
.step-label{display:none}
.step-arrow{color:#cbd5e1}
.step-arrow svg{width:1rem;height:1rem}

/* --- Notification --- */
.rb-notice{max-width:36rem;margin:0 auto 1.5rem;background:#dcfce7;border:1px solid #86efac;color:#166534;padding:.75rem 1.25rem;border-radius:.75rem;display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.875rem}
.rb-notice svg{width:1.25rem;height:1.25rem;flex-shrink:0}
.rb-notice.hidden{display:none}

/* =============================================
   STEP 1: TEMPLATE SELECTION
   ============================================= */
.step-panel{display:none}
.step-panel.active{display:block}

/* Saved resumes */
.saved-toggle{display:flex;align-items:center;gap:.5rem;color:#2563eb;font-weight:600;font-size:.938rem;margin-bottom:.75rem;cursor:pointer;background:none;border:none;font-family:inherit}
.saved-toggle:hover{color:#1d4ed8}
.saved-toggle svg{width:1rem;height:1rem;transition:transform .2s}
.saved-toggle.open svg:last-child{transform:rotate(90deg)}
.saved-list{display:none;margin-bottom:1.5rem}
.saved-list.open{display:grid;grid-template-columns:1fr;gap:1rem}
.saved-item{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:1rem;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:box-shadow .15s}
.saved-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.saved-item-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.5rem}
.saved-item h4{font-weight:600;color:#0f172a;font-size:.938rem}
.saved-item .meta{font-size:.75rem;color:#94a3b8}
.saved-item .meta.tmpl{color:#64748b}
.saved-del{color:#f87171;padding:.25rem;transition:color .15s;background:none;border:none;cursor:pointer}
.saved-del:hover{color:#dc2626}
.saved-del svg{width:1rem;height:1rem}
.saved-load{width:100%;padding:.5rem;background:#2563eb;color:#fff;border-radius:.5rem;font-weight:600;font-size:.813rem;border:none;cursor:pointer;transition:background .15s;margin-top:.5rem}
.saved-load:hover{background:#1d4ed8}

/* Template grid */
.tmpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.tmpl-card{position:relative;cursor:pointer;border-radius:1rem;border:2px solid #e2e8f0;overflow:hidden;transition:all .2s}
.tmpl-card:hover{border-color:#94a3b8;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.tmpl-card.selected{border-color:#93c5fd;box-shadow:0 8px 24px rgba(37,99,235,.15);transform:scale(1.02)}
.tmpl-card .tmpl-preview{padding:1rem;display:flex;justify-content:center}
.tmpl-card.premium-card .tmpl-preview{background:linear-gradient(180deg,#f0f9ff,#e0f2fe)}
.tmpl-card.classic-card .tmpl-preview{background:linear-gradient(180deg,#ecfdf5,#d1fae5)}
.tmpl-card.student-card .tmpl-preview{background:linear-gradient(180deg,#f0fdfa,#ccfbf1)}
.tmpl-card.professional-card .tmpl-preview{background:linear-gradient(180deg,#eef2ff,#e0e7ff)}

.mini-resume{background:#fff;border-radius:.5rem;box-shadow:0 1px 4px rgba(0,0,0,.08);overflow:hidden;width:100%;aspect-ratio:8.5/11}

/* Mini preview placeholders */
.mini-premium{display:flex;height:100%}
.mini-premium .mini-side{width:35%;background:linear-gradient(180deg,#0284c7,#075985);padding:.5rem;display:flex;flex-direction:column;align-items:center}
.mini-premium .mini-side .ph-circle{width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(255,255,255,.25);margin-bottom:.375rem}
.mini-premium .mini-side .ph-line{width:100%;height:2px;background:rgba(255,255,255,.15);border-radius:1px;margin-bottom:.25rem}
.mini-premium .mini-side .ph-line.short{width:70%}
.mini-premium .mini-side .ph-chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:.25rem}
.mini-premium .mini-side .ph-chip{width:.75rem;height:.375rem;border-radius:1px;background:rgba(255,255,255,.18)}
.mini-premium .mini-main{flex:1;padding:.5rem}
.mini-premium .mini-main .ph-title{width:75%;height:4px;background:#e2e8f0;border-radius:2px;margin-bottom:.25rem}
.mini-premium .mini-main .ph-sub{width:50%;height:3px;background:#bae6fd;border-radius:2px;margin-bottom:.5rem}
.mini-premium .mini-main .ph-text{width:100%;height:2px;background:#f1f5f9;border-radius:1px;margin-bottom:.125rem}
.mini-premium .mini-main .ph-text.w80{width:80%}
.mini-premium .mini-main .ph-section{width:60%;height:3px;background:#e0f2fe;border-radius:2px;margin:.375rem 0 .25rem}

.mini-classic{display:flex;flex-direction:column;height:100%}
.mini-classic .mini-hdr{background:#15803d;padding:.375rem .5rem;display:flex;align-items:center;gap:.375rem}
.mini-classic .mini-hdr .ph-circle{width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(255,255,255,.25)}
.mini-classic .mini-hdr .ph-title{width:70%;height:3px;background:rgba(255,255,255,.35);border-radius:2px;margin-bottom:.125rem}
.mini-classic .mini-hdr .ph-sub{width:45%;height:2px;background:rgba(255,255,255,.2);border-radius:2px}
.mini-classic .mini-body{flex:1;padding:.375rem;display:flex;gap:.375rem}
.mini-classic .mini-body .col-l{flex:1}
.mini-classic .mini-body .col-r{width:30%}
.mini-classic .ph-line{width:100%;height:2px;background:#dcfce7;border-radius:1px;margin-bottom:.25rem}
.mini-classic .ph-text{width:100%;height:2px;background:#f1f5f9;border-radius:1px;margin-bottom:.125rem}
.mini-classic .ph-text.w80{width:80%}
.mini-classic .ph-dot{display:flex;align-items:center;gap:2px;margin-bottom:.125rem}
.mini-classic .ph-dot::before{content:'';width:3px;height:3px;border-radius:50%;background:#22c55e;flex-shrink:0}

.mini-student{display:flex;flex-direction:column;height:100%}
.mini-student .mini-hdr{background:linear-gradient(to right,#14b8a6,#06b6d4);padding:.375rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.mini-student .mini-hdr .ph-circle{width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(255,255,255,.25);margin-bottom:.125rem}
.mini-student .mini-hdr .ph-title{width:60%;height:3px;background:rgba(255,255,255,.35);border-radius:2px;margin-bottom:.125rem}
.mini-student .mini-hdr .ph-sub{width:35%;height:2px;background:rgba(255,255,255,.2);border-radius:2px}
.mini-student .mini-body{flex:1;padding:.375rem;display:flex;gap:.375rem}
.mini-student .col-l{flex:1}
.mini-student .col-r{width:30%}
.mini-student .ph-line{width:100%;height:2px;background:#ccfbf1;border-radius:1px;margin-bottom:.25rem}
.mini-student .ph-text{width:100%;height:2px;background:#f1f5f9;border-radius:1px;margin-bottom:.125rem}

.mini-professional{display:flex;flex-direction:column;height:100%}
.mini-professional .mini-hdr{background:#1e293b;padding:.25rem .375rem;display:flex;align-items:center;justify-content:space-between}
.mini-professional .mini-hdr .ph-left{display:flex;align-items:center;gap:.25rem}
.mini-professional .mini-hdr .ph-circle{width:1rem;height:1rem;border-radius:50%;background:rgba(255,255,255,.15)}
.mini-professional .mini-hdr .ph-title{width:2rem;height:2px;background:rgba(255,255,255,.3);border-radius:1px;margin-bottom:.0625rem}
.mini-professional .mini-hdr .ph-sub{width:1.25rem;height:2px;background:rgba(165,180,252,.3);border-radius:1px}
.mini-professional .mini-hdr .ph-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.mini-professional .mini-hdr .ph-right .ph-text{width:1.5rem;height:2px;background:rgba(255,255,255,.15);border-radius:1px}
.mini-professional .mini-body{flex:1;display:flex}
.mini-professional .col-l{flex:1;padding:.375rem}
.mini-professional .col-r{width:30%;padding:.375rem;background:#f8fafc}
.mini-professional .ph-line{width:100%;height:2px;background:#e0e7ff;border-radius:1px;margin-bottom:.25rem}
.mini-professional .ph-text{width:100%;height:2px;background:#f1f5f9;border-radius:1px;margin-bottom:.125rem}
.mini-professional .ph-text.w80{width:80%}

.tmpl-card .tmpl-info{padding:1rem;background:#fff}
.tmpl-card .tmpl-info h3{font-size:1.125rem;font-weight:700;color:#0f172a}
.tmpl-card .tmpl-info p{font-size:.813rem;color:#64748b}
.tmpl-card .selected-badge{position:absolute;top:.75rem;right:.75rem;width:1.75rem;height:1.75rem;background:#2563eb;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(37,99,235,.4)}
.tmpl-card .selected-badge svg{width:1rem;height:1rem;color:#fff}

.customize-cta{text-align:center;margin-top:2rem}
.customize-cta button{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;background:#2563eb;color:#fff;border-radius:.75rem;font-weight:600;font-size:1.125rem;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(37,99,235,.25);transition:all .15s}
.customize-cta button:hover{background:#1d4ed8;transform:translateY(-1px)}
.customize-cta button svg{width:1.25rem;height:1.25rem}
.customize-cta p{font-size:.875rem;color:#94a3b8;margin-top:.5rem}

/* =============================================
   STEP 2: EDITOR
   ============================================= */

/* Editor toolbar */
.editor-bar{background:#fff;border-radius:.75rem;box-shadow:0 4px 16px rgba(0,0,0,.06);border:1px solid #e2e8f0;padding:.75rem 1.25rem;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.editor-bar-left,.editor-bar-right{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.eb-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:.5rem;font-weight:600;font-size:.75rem;border:none;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}
.eb-btn svg{width:1rem;height:1rem;flex-shrink:0}
.eb-back{background:#f1f5f9;color:#475569}.eb-back:hover{background:#e2e8f0}
.eb-tmpl{padding:.375rem .625rem;border-radius:.375rem;font-size:.688rem;background:#f1f5f9;color:#64748b}
.eb-tmpl.active{background:#2563eb;color:#fff}
.eb-tmpl:hover:not(.active){background:#e2e8f0}
.eb-example{background:#eff6ff;color:#1d4ed8}.eb-example:hover{background:#dbeafe}
.eb-clear{background:#fef2f2;color:#dc2626}.eb-clear:hover{background:#fee2e2}
.eb-save{background:#16a34a;color:#fff}.eb-save:hover{background:#15803d}
.eb-download{background:#2563eb;color:#fff}.eb-download:hover{background:#1d4ed8}
.eb-download:disabled{opacity:.6;cursor:wait}
.eb-divider{width:1px;height:1.5rem;background:#e2e8f0;margin:0 .25rem}

.coffee-link{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:#ffdd00;color:#1e293b;border-radius:.5rem;font-weight:600;font-size:.75rem;transition:background .15s;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.coffee-link:hover{background:#ffed4e}
.coffee-link svg{width:1rem;height:1rem}

/* Editing hint */
.edit-hint{background:#eff6ff;border:1px solid #bfdbfe;border-radius:.5rem;padding:.5rem 1rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.813rem;color:#1d4ed8;max-width:40rem;margin-left:auto;margin-right:auto;text-align:center}
.edit-hint svg{width:1rem;height:1rem;flex-shrink:0}

/* Resume document wrapper */
.resume-wrapper{display:flex;justify-content:center;margin-bottom:2rem}
.resume-doc{width:100%;max-width:680px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.12);overflow:hidden}

/* =============================================
   RESUME TEMPLATES (shared)
   ============================================= */
.resume-doc [contenteditable]{outline:none;cursor:text;transition:all .15s;border-radius:2px;min-width:20px}
.resume-doc [contenteditable]:hover{box-shadow:0 0 0 1px #93c5fd,0 0 0 2px rgba(147,197,253,.3)}
.resume-doc [contenteditable]:focus{box-shadow:0 0 0 2px #3b82f6,0 0 0 3px rgba(59,130,246,.3);background:rgba(219,234,254,.15)}

.resume-doc .section-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:.375rem;display:flex;align-items:center;gap:.25rem}
.resume-doc .section-title .bar{width:.75rem;height:2px;border-radius:1px}

.resume-doc .entry-group{margin-bottom:.625rem}
.resume-doc .entry{position:relative;padding-right:.75rem;margin-bottom:.5rem}
.resume-doc .entry:last-child{margin-bottom:0}
.resume-doc .entry-title{font-size:11px;font-weight:600;color:#0f172a}
.resume-doc .entry-sub{font-size:10px}
.resume-doc .entry-period{font-size:9px;color:#94a3b8;white-space:nowrap}
.resume-doc .entry-desc{font-size:10px;color:#64748b;line-height:1.5;margin-top:.125rem}

.resume-doc .remove-btn{position:absolute;top:-.125rem;right:-.125rem;opacity:0;transition:opacity .15s;color:#f87171;cursor:pointer;background:none;border:none;padding:0}
.resume-doc .entry:hover .remove-btn{opacity:1}
.resume-doc .remove-btn:hover{color:#dc2626}
.resume-doc .remove-btn svg{width:.75rem;height:.75rem}

.resume-doc .add-btn{display:inline-flex;align-items:center;gap:.25rem;font-size:10px;padding:.125rem .5rem;border-radius:.25rem;border:1px dashed;cursor:pointer;transition:all .15s;opacity:.6;background:none;font-family:inherit}
.resume-doc .add-btn:hover{opacity:1}
.resume-doc .add-btn svg{width:.75rem;height:.75rem}

/* Skill chips */
.chip-wrap{display:flex;flex-wrap:wrap;gap:.25rem}
.skill-chip{display:inline-flex;align-items:center;gap:.125rem;padding:.0625rem .375rem;border-radius:.25rem;font-size:10px}
.skill-chip .chip-x{opacity:0;transition:opacity .15s;cursor:pointer;background:none;border:none;padding:0;color:inherit;font-family:inherit;line-height:1}
.skill-chip:hover .chip-x{opacity:1}
.skill-chip .chip-x:hover{color:#dc2626}
.chip-add{display:inline-flex;align-items:center;gap:.125rem;padding:.0625rem .375rem;border-radius:.25rem;font-size:10px;border:1px dashed;cursor:pointer;background:none;transition:all .15s;font-family:inherit}
.chip-add:hover{opacity:1}
.chip-add svg{width:.625rem;height:.625rem}
.chip-input{width:3.5rem;padding:.0625rem .25rem;font-size:10px;border:1px solid #93c5fd;border-radius:.25rem;outline:none;font-family:inherit}
.chip-input:focus{box-shadow:0 0 0 1px #3b82f6}

/* Photo upload */
.photo-wrap{position:relative;display:inline-block}
.photo-wrap img{border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.photo-placeholder{border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.photo-placeholder svg{width:33%;height:33%;color:#94a3b8}
.photo-overlay{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;cursor:pointer}
.photo-wrap:hover .photo-overlay{opacity:1}
.photo-overlay svg{width:1.25rem;height:1.25rem;color:#fff}
.photo-remove{position:absolute;top:-2px;right:-2px;width:1.125rem;height:1.125rem;background:#ef4444;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.625rem;opacity:0;transition:opacity .15s;cursor:pointer;border:none;line-height:1}
.photo-wrap:hover .photo-remove{opacity:1}
.photo-remove:hover{background:#dc2626}
.photo-file{display:none}

/* --- Premium Template --- */
.tpl-premium{display:flex;aspect-ratio:8.5/11;font-size:11px;line-height:1.4}
.tpl-premium .side{width:35%;background:linear-gradient(180deg,#0284c7,#075985);color:#fff;padding:1.25rem;display:flex;flex-direction:column}
.tpl-premium .side .section-title{color:#bae6fd;border-bottom:1px solid rgba(56,189,248,.3);padding-bottom:.25rem}
.tpl-premium .side .contact-item{display:flex;align-items:flex-start;gap:.375rem;font-size:10px;margin-bottom:.375rem;color:rgba(255,255,255,.85)}
.tpl-premium .side .contact-icon{color:#7dd3fc;margin-top:.125rem;font-weight:700}
.tpl-premium .side .lang-row{display:flex;justify-content:space-between;font-size:10px;margin-bottom:.25rem;position:relative;padding-right:.75rem}
.tpl-premium .side .lang-level{color:#bae6fd;font-size:9px}
.tpl-premium .side .skill-chip{background:rgba(7,89,133,.5);color:#fff}
.tpl-premium .side .chip-add{color:#bae6fd;border-color:rgba(56,189,248,.4)}
.tpl-premium .side .chip-add:hover{background:rgba(7,89,133,.3)}
.tpl-premium .side .add-btn{color:#bae6fd;border-color:rgba(56,189,248,.4)}
.tpl-premium .side .add-btn:hover{background:rgba(7,89,133,.3)}
.tpl-premium .side .cert-item{font-size:10px;color:rgba(255,255,255,.85);margin-bottom:.25rem;position:relative;padding-right:.75rem}
.tpl-premium .main{flex:1;padding:1.25rem;overflow:hidden}
.tpl-premium .main .name{font-size:20px;font-weight:800;color:#0f172a;letter-spacing:-.02em}
.tpl-premium .main .title-line{color:#0284c7;font-size:12px;margin-top:.125rem}
.tpl-premium .main .name-block{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #bae6fd}
.tpl-premium .section-title{color:#0369a1}.tpl-premium .section-title .bar{background:#0284c7}
.tpl-premium .entry-sub{color:#0284c7}
.tpl-premium .add-btn{color:#0284c7;border-color:#7dd3fc}.tpl-premium .add-btn:hover{background:#f0f9ff}

/* --- Classic Template --- */
.tpl-classic{display:flex;flex-direction:column;aspect-ratio:8.5/11;font-size:11px;line-height:1.4}
.tpl-classic .cls-header{background:#15803d;color:#fff;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem}
.tpl-classic .cls-header .name{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em}
.tpl-classic .cls-header .title-line{color:#86efac;font-size:12px;margin-top:.125rem}
.tpl-classic .cls-header .contact-row{display:flex;flex-wrap:wrap;gap:.25rem .75rem;font-size:9px;color:#bbf7d0;margin-top:.375rem}
.tpl-classic .cls-header .contact-sep{color:#4ade80}
.tpl-classic .cls-body{flex:1;padding:1.25rem;overflow:hidden;display:flex;gap:1.25rem}
.tpl-classic .cls-left{flex:1}
.tpl-classic .cls-right{width:35%}
.tpl-classic .section-title{color:#166534;border-bottom:2px solid #bbf7d0;padding-bottom:.25rem}
.tpl-classic .timeline-entry{border-left:2px solid #bbf7d0;padding-left:.625rem;position:relative;margin-bottom:.5rem;padding-right:.75rem}
.tpl-classic .timeline-entry::before{content:'';position:absolute;left:-5px;top:.25rem;width:.5rem;height:.5rem;border-radius:50%;background:#22c55e}
.tpl-classic .entry-sub{color:#16a34a}
.tpl-classic .skill-chip{background:#dcfce7;color:#166534}
.tpl-classic .chip-add,.tpl-classic .add-btn{color:#16a34a;border-color:#86efac}
.tpl-classic .chip-add:hover,.tpl-classic .add-btn:hover{background:#f0fdf4}
.tpl-classic .interest-chip{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.tpl-classic .cert-item{font-size:10px;color:#475569;margin-bottom:.25rem;position:relative;padding-right:.75rem}
.tpl-classic .cert-bullet{color:#22c55e;margin-right:.25rem}

/* --- Student Template --- */
.tpl-student{display:flex;flex-direction:column;aspect-ratio:8.5/11;font-size:11px;line-height:1.4}
.tpl-student .stu-header{background:linear-gradient(to right,#14b8a6,#06b6d4);color:#fff;padding:1rem 1.5rem 1.25rem;text-align:center}
.tpl-student .stu-header .name{font-size:18px;font-weight:800;color:#fff;letter-spacing:.02em}
.tpl-student .stu-header .title-line{color:#99f6e4;font-size:11px;margin-top:.125rem}
.tpl-student .stu-header .contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .5rem;font-size:9px;color:#99f6e4;margin-top:.5rem}
.tpl-student .stu-header .contact-sep{color:#5eead4}
.tpl-student .stu-body{flex:1;padding:1.25rem;overflow:hidden;display:flex;gap:1.25rem}
.tpl-student .stu-left{flex:1}
.tpl-student .stu-right{width:35%}
.tpl-student .section-title{color:#0f766e;border-bottom:1px solid #99f6e4;padding-bottom:.25rem}
.tpl-student .entry-sub{color:#0d9488}
.tpl-student .skill-chip{background:#ccfbf1;color:#115e59}
.tpl-student .chip-add,.tpl-student .add-btn{color:#0d9488;border-color:#5eead4}
.tpl-student .chip-add:hover,.tpl-student .add-btn:hover{background:#f0fdfa}
.tpl-student .interest-chip{background:#f0fdfa;color:#0f766e;border:1px solid #99f6e4}
.tpl-student .cert-item{font-size:10px;color:#475569;margin-bottom:.25rem;position:relative;padding-right:.75rem}
.tpl-student .cert-bullet{color:#14b8a6;margin-right:.25rem}
.tpl-student .lang-row{display:flex;justify-content:space-between;font-size:10px;margin-bottom:.25rem;position:relative;padding-right:.75rem}
.tpl-student .lang-level{color:#94a3b8;font-size:9px}

/* --- Professional Template --- */
.tpl-professional{display:flex;flex-direction:column;aspect-ratio:8.5/11;font-size:11px;line-height:1.4}
.tpl-professional .pro-header{background:#1e293b;color:#fff;padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}
.tpl-professional .pro-header .name{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.02em}
.tpl-professional .pro-header .title-line{color:#a5b4fc;font-size:11px}
.tpl-professional .pro-header .contact-col{text-align:right;font-size:9px;color:#94a3b8;display:flex;flex-direction:column;gap:.125rem}
.tpl-professional .pro-body{flex:1;display:flex;overflow:hidden}
.tpl-professional .pro-left{flex:1;padding:1rem;border-right:1px solid #f1f5f9}
.tpl-professional .pro-right{width:33%;padding:1rem;background:rgba(248,250,252,.5)}
.tpl-professional .section-title{color:#4338ca;border-bottom:1px solid #c7d2fe;padding-bottom:.125rem}
.tpl-professional .entry-sub{color:#6366f1}
.tpl-professional .skill-chip{background:#e0e7ff;color:#3730a3}
.tpl-professional .chip-add,.tpl-professional .add-btn{color:#6366f1;border-color:#a5b4fc}
.tpl-professional .chip-add:hover,.tpl-professional .add-btn:hover{background:#eef2ff}
.tpl-professional .interest-chip{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}
.tpl-professional .cert-item{font-size:10px;color:#475569;margin-bottom:.25rem;position:relative;padding-right:.75rem}
.tpl-professional .cert-bullet{color:#818cf8;margin-right:.25rem}
.tpl-professional .lang-row{display:flex;justify-content:space-between;font-size:10px;margin-bottom:.25rem;position:relative;padding-right:.75rem}
.tpl-professional .lang-level{color:#94a3b8;font-size:9px}

/* =============================================
   SAVE MODAL
   ============================================= */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:1rem;box-shadow:0 20px 60px rgba(0,0,0,.2);padding:1.5rem;width:100%;max-width:28rem}
.modal-box h3{font-size:1.125rem;font-weight:700;color:#0f172a;margin-bottom:.25rem}
.modal-box .modal-desc{font-size:.875rem;color:#64748b;margin-bottom:1rem}
.modal-box input{width:100%;padding:.75rem 1rem;border:1px solid #cbd5e1;border-radius:.75rem;font-size:.938rem;outline:none;font-family:inherit;transition:border-color .15s}
.modal-box input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2)}
.modal-actions{display:flex;gap:.75rem;margin-top:1rem}
.modal-actions button{flex:1;padding:.625rem;border-radius:.75rem;font-weight:600;font-size:.938rem;border:none;cursor:pointer;transition:all .15s;font-family:inherit}
.modal-cancel{background:#f1f5f9;color:#475569}.modal-cancel:hover{background:#e2e8f0}
.modal-confirm{background:#16a34a;color:#fff}.modal-confirm:hover{background:#15803d}
.modal-confirm:disabled{opacity:.5;cursor:not-allowed}

/* =============================================
   BOTTOM ACTIONS & FEATURES
   ============================================= */
.bottom-actions{display:flex;justify-content:center;gap:1rem;margin:2rem 0}
.bottom-actions button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:.938rem;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:all .15s}
.bottom-actions .ba-save{background:#16a34a;color:#fff}.bottom-actions .ba-save:hover{background:#15803d}
.bottom-actions .ba-download{background:#2563eb;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.3)}.bottom-actions .ba-download:hover{background:#1d4ed8}
.bottom-actions .ba-download:disabled{opacity:.6;cursor:wait}

.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:3rem 0 2rem}
.feat-card{background:#fff;border-radius:.75rem;padding:1.25rem;box-shadow:0 2px 8px rgba(0,0,0,.05);border:1px solid #e2e8f0;text-align:center}
.feat-card .feat-icon{width:2.75rem;height:2.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}
.feat-card .feat-icon svg{width:1.25rem;height:1.25rem}
.feat-card .fi-blue{background:#dbeafe;color:#2563eb}
.feat-card .fi-green{background:#dcfce7;color:#16a34a}
.feat-card .fi-amber{background:#fef3c7;color:#d97706}
.feat-card .fi-purple{background:#f3e8ff;color:#9333ea}
.feat-card h3{font-size:.938rem;font-weight:700;color:#0f172a;margin-bottom:.25rem}
.feat-card p{font-size:.813rem;color:#64748b;line-height:1.6}

.tips-section{background:linear-gradient(to right,#eff6ff,#e0e7ff);border-radius:.75rem;padding:2rem;box-shadow:0 4px 16px rgba(0,0,0,.06);border:1px solid #bfdbfe;margin-bottom:2rem}
.tips-section h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}
.tips-section h2 svg{width:1.5rem;height:1.5rem;color:#2563eb}
.tips-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.tip-row{display:flex;align-items:flex-start;gap:.75rem}
.tip-row .tip-num{width:1.5rem;height:1.5rem;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.tip-row p{font-size:.875rem;color:#334155;line-height:1.6}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(min-width:640px){
  .rb-header h1{font-size:2.5rem}
  .step-label{display:inline}
  .tmpl-grid{grid-template-columns:1fr 1fr}
  .saved-list.open{grid-template-columns:1fr 1fr}
  .features-grid{grid-template-columns:repeat(4,1fr)}
  .tips-grid{grid-template-columns:1fr 1fr}
}

@media(min-width:768px){
  .desktop-nav{display:flex}
  .mobile-menu-btn{display:none}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .saved-list.open{grid-template-columns:1fr 1fr 1fr}
}

@media(min-width:1024px){
  .container{padding:0 2rem}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 2fr}
  .footer-all-links ul{columns:3}
  .tmpl-grid{grid-template-columns:repeat(4,1fr)}
}