:root{
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #0f1721;
  --muted: #6b7280;
  --accent: #2b7cff;
  --accent-2: #7c3aed;
  --maxw: 1200px;
  --radius: 14px;
  --gap: 16px;
  --shadow: 0 10px 30px rgba(19,24,31,0.08);
  --glass-shadow: 0 6px 22px rgba(16,24,40,0.06);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(43,124,255,0.06), transparent), var(--bg);
  color:var(--text);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Topbar */
.topbar{max-width:var(--maxw);margin:0 auto;width:100%;padding:12px 18px}
.topbar-inner{background:linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0.55));border-radius:12px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--glass-shadow)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;fill:var(--accent);opacity:0.95}
.topbar h1{margin:0;font-size:18px}
.topbar p{margin:0;color:var(--muted);font-size:13px}

/* layout */
.container{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:420px 1fr;gap:22px;align-items:start}

/* controls */
.controls{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);position:relative;transition:transform .28s ease, box-shadow .28s ease}
.controls:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,24,40,0.08)}
.controls-header{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.controls h2{margin:0;font-size:18px}
.muted{color:var(--muted);font-size:13px}

/* form */
.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
.col{display:flex;flex-direction:column;gap:12px}
label{display:block;font-size:13px;color:var(--muted)}
input[type="text"], input[type="email"], input[type="tel"], textarea, select, input[type="url"], input[type="color"]{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e6e9ef;
  background:linear-gradient(180deg,#fff,#fbfdff);
  font-size:14px;
  color:var(--text);
  margin-top:8px;
  transition:box-shadow .18s, transform .12s;
  outline: none;
}
input:focus, textarea:focus, select:focus{box-shadow:0 6px 20px rgba(43,124,255,0.08);transform:translateY(-1px);border-color:var(--accent)}
textarea{min-height:88px;resize:vertical}

/* helpers */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.controls-mini{display:flex;gap:8px;align-items:center}
.template-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumb{cursor:pointer}
.thumb input{display:none}
.thumb .thumb-preview{width:84px;height:56px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:white;font-size:11px;box-shadow:0 8px 20px rgba(2,6,23,0.06);border:2px solid transparent}
.thumb .thumb-preview small{opacity:0.95}
.thumb input:checked + .thumb-preview{outline:3px solid rgba(0,0,0,0.04);transform:translateY(-4px)}
.classic-thumb{background:linear-gradient(90deg,#fff,#f7fbff);color:var(--accent);border-radius:8px;padding:8px;border:1px solid rgba(16,24,40,0.04)}
.modern-thumb{background:linear-gradient(90deg,var(--accent), var(--accent-2));}
.creative-thumb{background:linear-gradient(90deg,#ffefba,#fff1f0);color:#7c3aed}
.minimal-thumb{background:linear-gradient(90deg,#ffffff,#f8fafc);color:var(--muted);border:1px solid rgba(16,24,40,0.03)}

/* swatches */
.swatches{display:flex;gap:8px;align-items:center;margin-top:8px}
.swatch{width:36px;height:36px;border-radius:8px;border:0;cursor:pointer;box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.swatch:hover{transform:translateY(-4px)}
input[type="color"]{width:48px;height:36px;padding:0;border-radius:8px;border:1px solid #e6e9ef}

/* buttons */
.btn{border:1px solid rgba(16,24,40,0.06);background:var(--card);padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700;font-size:13px;display:inline-flex;gap:8px;align-items:center;justify-content:center}
.btn.ghost{background:transparent;border:1px solid rgba(16,24,40,0.04);color:var(--text)}
.btn.small{padding:6px 8px;border-radius:8px;font-size:13px;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent), var(--accent-2));color:white;border:0;box-shadow: 0 8px 30px rgba(43,124,255,0.12)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.icon{width:44px;height:44px;border-radius:10px;display:inline-grid;place-items:center}
.ripple{position:relative;overflow:hidden}

/* download row */
.download-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}
.download-actions{display:flex;gap:8px;align-items:center}

/* preview */
.preview-panel{min-height:360px}
.preview-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.preview-controls{display:flex;gap:8px;align-items:center}
.preview-wrapper{background:transparent;padding:12px;min-height:580px;display:flex;align-items:flex-start;justify-content:center}
.resume-template{width:100%;max-width:760px;background:var(--card);border-radius:12px;padding:22px;box-shadow:var(--shadow);color:var(--text);transition:transform .26s cubic-bezier(.2,.9,.3,1),box-shadow .26s;transform-origin:top center;--accent:var(--accent)}

/* Template variants & photo styles */

/* CLASSIC: circle photo top-left */
.resume-template.classic .r-header{display:flex;gap:16px;align-items:center;border-bottom:3px solid rgba(10,20,40,0.03);padding-bottom:12px;margin-bottom:12px}
.resume-template.classic .r-header .photo-slot{width:84px;height:84px;border-radius:999px;overflow:hidden;border:4px solid rgba(43,124,255,0.08);flex-shrink:0;background:#f3f6fb}
.resume-template.classic .r-left{display:flex;flex-direction:column}
.resume-template.classic .r-left h1{margin:0;font-size:22px}

/* MODERN: square photo top-right */
.resume-template.modern{display:block}
.resume-template.modern .r-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid rgba(10,20,40,0.03);padding-bottom:10px;margin-bottom:12px}
.resume-template.modern .r-header .photo-slot{width:96px;height:96px;border-radius:8px;overflow:hidden;border:0;background:#eee;flex-shrink:0}
.resume-template.modern .r-left h1{margin:0;font-size:22px}

/* CREATIVE: left vertical accent with rectangular photo */
.resume-template.creative{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;padding:18px;border-radius:12px}
.resume-template.creative .photo-slot{width:100%;height:160px;border-radius:8px;overflow:hidden;background:#f5f7ff}
.resume-template.creative .resume-inner{padding:6px 0}
.resume-template.creative .r-header{border-bottom:0;padding-bottom:0;margin-bottom:10px}

/* MINIMAL: centered header with small circle */
.resume-template.minimal .r-header{display:flex;flex-direction:column;align-items:center;text-align:center;border-bottom:3px solid rgba(10,20,40,0.03);padding-bottom:12px;margin-bottom:12px}
.resume-template.minimal .r-header .photo-slot{width:72px;height:72px;border-radius:999px;overflow:hidden;background:#f2f4f8;margin-bottom:8px}

/* common header and text */
.r-title{margin-top:6px;color:var(--muted);font-weight:700}
.r-right .contact{font-size:13px;color:var(--muted);text-align:right}
.r-section{margin-top:12px}
.r-section h3{margin:0 0 8px 0;font-size:13px;color:var(--accent);letter-spacing:0.3px;text-transform:uppercase;font-weight:800}
.exp-item{margin-bottom:12px;opacity:0;transform:translateY(8px);animation:slideIn .34s forwards}
@keyframes slideIn{to{opacity:1;transform:none}}
.skills-list{display:flex;gap:8px;flex-wrap:wrap}
.skills-list .skill{background:rgba(43,124,255,0.12);color:var(--accent);padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px}

/* experience edit control */
.exp-control{display:grid;grid-template-columns:1fr;gap:8px;border-radius:10px;padding:10px;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));box-shadow:var(--glass-shadow);border:1px solid rgba(16,24,40,0.03)}
.exp-control input, .exp-control textarea{padding:8px;border-radius:8px;border:1px solid #e6e9ef}

/* photo uploader styles */
.photo-uploader{display:flex;flex-direction:column;gap:8px}
.photo-drop{position:relative;border-radius:10px;border:2px dashed rgba(16,24,40,0.04);padding:10px;display:flex;align-items:center;justify-content:center;min-height:64px;background:linear-gradient(180deg,#fff,#fbfdff)}
.photo-drop .photo-placeholder{color:var(--muted);font-size:13px}
.photo-drop img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;border-radius:8px;display:none}
#photo-input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}

/* footer */
.footer{max-width:var(--maxw);margin:0 auto;padding:8px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}

/* ripple helper */
.ripple{position:relative;overflow:hidden}
.ripple span{position:absolute;border-radius:50%;transform:scale(0);opacity:.6;pointer-events:none;transition:transform .6s, opacity .9s;background:rgba(255,255,255,0.28)}

/* responsive */
@media (max-width:980px){
  .container{grid-template-columns:1fr;padding-bottom:40px}
  .preview-panel{order:2}
  .controls{order:1}
  .resume-template.creative{grid-template-columns:1fr}
}

/* hide preview on mobile toggle */
.preview-hidden{display:none !important}
/* ...existing code... */
.photo-uploader{display:flex;flex-direction:column;gap:8px; position:relative;}
/* ...existing code... */
/* ...existing code... */

/* Ensure experience items are fully visible when exporting/printing */
@media print {
  .exp-item,
  .skills-list .skill {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* toggleable helper to disable animations & force visible state during export */
.no-anim .exp-item,
.no-anim .skills-list .skill {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ...existing code... */