/* ============================================================
   RESPONSIVE CSS - Mobile-first, all devices
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#0d1221;color:#e2e8f0;min-height:100vh;overflow-x:hidden}

/* ============================================================
   APP HEADER
   ============================================================ */
.header{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;
  padding:8px 12px;gap:6px;
  background:#111827;border-bottom:1px solid #1e293b;
  position:sticky;top:0;z-index:50;
}
.logo{font-weight:800;font-size:1rem;color:#fff;letter-spacing:-.5px;white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.actions select{
  padding:5px 8px;border-radius:6px;
  border:1px solid #334155;background:#1e293b;
  color:#e2e8f0;font-size:.78rem;outline:none;min-width:90px;
}
.actions button{
  padding:5px 10px;border:none;border-radius:6px;
  cursor:pointer;font-weight:600;font-size:.75rem;
  background:#4f46e5;color:#fff;white-space:nowrap;touch-action:manipulation;
}
.actions button:hover{background:#6366f1}
.actions button:last-child{background:#059669}
.actions button:last-child:hover{background:#10b981}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main{display:flex;flex-direction:column;min-height:calc(100vh - 50px)}

/* EDITOR */
.editor{
  overflow-y:auto;overflow-x:hidden;
  padding:12px 14px;background:#0d1221;
  border-bottom:1px solid #1e293b;max-height:55vh;
  -webkit-overflow-scrolling:touch;
}
.editor h2{
  font-size:.82rem;font-weight:700;color:#67e8f9;
  text-transform:uppercase;letter-spacing:.5px;
  margin:14px 0 8px;padding-bottom:3px;
  border-bottom:1px solid #1e293b;
}
.editor h2:first-child{margin-top:0}

/* Fields */
.f{margin-bottom:8px}
.f label{display:block;font-size:.7rem;font-weight:500;color:#94a3b8;margin-bottom:2px;text-transform:uppercase;letter-spacing:.3px}
.f input,.f textarea,.f select{
  width:100%;padding:8px 10px;
  border:1px solid #1e293b;border-radius:5px;
  background:#111827;color:#e2e8f0;font-size:.88rem;
  outline:none;transition:border .15s;
  -webkit-appearance:none;appearance:none;
}
.f input:focus,.f textarea:focus,.f select:focus{border-color:#4f46e5}
.f textarea{min-height:50px;resize:vertical}
.f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.g2{display:grid;grid-template-columns:1fr;gap:8px}
.g3{display:grid;grid-template-columns:1fr;gap:8px}
.card{padding:10px;margin-bottom:8px;border-radius:8px;background:#111827;border:1px solid #1e293b}
.btn-sm{padding:6px 12px;border:none;border-radius:5px;cursor:pointer;font-weight:600;font-size:.75rem;background:#1e293b;color:#94a3b8;margin-right:4px;margin-top:6px;touch-action:manipulation;min-height:32px}
.btn-sm:hover{background:#334155;color:#e2e8f0}
.btn-add{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:.8rem;background:#4f46e5;color:#fff;margin-top:6px;touch-action:manipulation;min-height:36px;width:100%}
.btn-add:hover{background:#6366f1}
.btn-rm{background:transparent;border:1px solid #475569;color:#f87171}
.btn-rm:hover{background:#7f1d1d;color:#fca5a5;border-color:#f87171}

/* ============================================================
   RESUME PREVIEW - Beautiful Professional Resume
   ============================================================ */
.preview{overflow-y:auto;overflow-x:hidden;padding:20px;background:#d4d8e0;flex:1;-webkit-overflow-scrolling:touch}
.resume{
  width:100%;max-width:750px;margin:0 auto;
  background:#fff;color:#2c2c2c;
  border-radius:2px;
  box-shadow:0 2px 12px rgba(0,0,0,.08), 0 8px 40px rgba(0,0,0,.06);
  padding:36px 40px 32px;
  font-family:'Inter',Georgia,'Times New Roman',serif;
  font-size:10.5pt;line-height:1.5;
}

/* ---- HEADER ---- */
.resume-header{
  display:flex;gap:16px;
  padding-bottom:18px;margin-bottom:20px;
  border-bottom:2.5px solid #1a1a2e;
  align-items:center;
}
.photo-wrap{flex-shrink:0}
.resume-photo{width:70px;height:70px;border-radius:50%;object-fit:cover;border:2.5px solid #e0e0e0}
.header-info{flex:1}
.name{font-size:22pt;font-weight:800;color:#1a1a2e;line-height:1.05;letter-spacing:-.3px}
.title{font-size:11pt;color:#555;font-weight:500;margin-top:3px;letter-spacing:.2px}
.contact{margin-top:8px;font-size:8.5pt;color:#666;line-height:1.65}
.contact a{color:#333;text-decoration:none}
.contact-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.contact-line span{white-space:nowrap}
.contact-sep{color:#bbb;font-size:7pt}

/* ---- SECTIONS ---- */
.rs{margin-bottom:18px}
.rs:last-child{margin-bottom:0}
.rs h3{
  font-size:9pt;font-weight:700;
  text-transform:uppercase;letter-spacing:1.8px;
  color:#1a1a2e;
  padding-bottom:5px;margin-bottom:10px;
  border-bottom:1px solid #e0e0e0;
}
.summary{color:#444;font-size:10pt;line-height:1.65;text-align:justify}

/* ---- EXPERIENCE ---- */
.exp{margin-bottom:12px}
.exp:last-child{margin-bottom:0}
.exp-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px}
.exp-role{font-size:10.5pt;font-weight:700;color:#1a1a2e}
.exp-dates{font-size:8.5pt;color:#888;font-weight:400;white-space:nowrap}
.exp-company{font-size:9.5pt;color:#555;margin:1px 0 5px;font-weight:500}
.bullets{margin:0;padding-left:18px;list-style-type:disc}
.bullets li{margin-bottom:2px;color:#444;font-size:9.5pt;line-height:1.5}
.bullets li::marker{color:#999}

/* ---- EDUCATION ---- */
.edu{margin-bottom:10px}
.edu:last-child{margin-bottom:0}
.edu-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px}
.edu-degree{font-size:10.5pt;font-weight:700;color:#1a1a2e}
.edu-dates{font-size:8.5pt;color:#888;white-space:nowrap}
.edu-school{font-size:9.5pt;color:#555;margin:1px 0 2px;font-weight:500}
.edu-grade{color:#2d6a4f;font-size:9pt;font-weight:600;margin-top:2px}
.edu-achieve{color:#6b4c9a;font-size:9pt;font-style:italic;margin-top:1px}

/* ---- ACHIEVEMENTS ---- */
.achieve-list{margin:0;padding-left:18px;list-style-type:disc}
.achieve-list li{margin-bottom:3px;font-size:9.5pt;color:#444;line-height:1.5}
.achieve-list li::marker{color:#999}

/* ---- CERTIFICATIONS ---- */
.cert-list{margin:0;padding-left:18px;list-style-type:disc}
.cert-list li{margin-bottom:3px;font-size:9.5pt;color:#444;line-height:1.5}
.cert-list li::marker{color:#999}
.cert-name{font-weight:700;color:#1a1a2e}
.cert-issuer{color:#666}
.cert-date{color:#999;font-size:8.5pt}

/* ---- LANGUAGES ---- */
.lang-list{display:flex;flex-wrap:wrap;gap:6px}
.lang-item{font-size:9.5pt;color:#444;background:#f0f0f5;padding:3px 10px;border-radius:3px;font-weight:500}
.lang-name{font-weight:600;color:#1a1a2e}
.lang-level{color:#888;font-size:8.5pt;margin-left:2px}

/* ---- SKILLS ---- */
.skills-wrap{display:flex;flex-wrap:wrap;gap:6px}
.skill-tag{
  padding:3px 10px;font-size:8.5pt;
  background:#f0f0f5;color:#333;
  border-radius:3px;font-weight:500;
  letter-spacing:.2px;
}

/* ---- REFERENCES ---- */
.ref-grid{display:grid;grid-template-columns:1fr;gap:10px}
.ref-card{
  padding:8px 12px;
  border-left:3px solid #1a1a2e;
  background:#fafafa;
}
.ref-name{font-weight:700;font-size:10pt;color:#1a1a2e}
.ref-role{font-size:9pt;color:#555;margin:1px 0}
.ref-rel{font-size:8.5pt;color:#6b4c9a;font-style:italic}
.ref-contact{font-size:8.5pt;color:#888;margin-top:2px}

/* ============================================================
   TEMPLATE: CLASSIC
   ============================================================ */
.tpl-classic .resume-header{border-bottom:3px double #1a1a2e}
.tpl-classic .rs h3{text-transform:none;letter-spacing:0;font-size:11pt;border-bottom:2px solid #1a1a2e;font-weight:700}
.tpl-classic .skill-tag{background:#1a1a2e;color:#fff;border-radius:2px}
.tpl-classic .ref-card{border-left-color:#555}

/* ============================================================
   TEMPLATE: CORPORATE
   ============================================================ */
.tpl-corporate .resume-header{border-bottom:3px solid #1e40af}
.tpl-corporate .rs h3{color:#1e40af;border-bottom-color:#bfdbfe}
.tpl-corporate .skill-tag{background:#eff6ff;color:#1e40af}
.tpl-corporate .edu-grade{color:#1e40af}
.tpl-corporate .ref-card{border-left-color:#1e40af}

/* ============================================================
   TEMPLATE: MINIMAL
   ============================================================ */
.tpl-minimal .resume{box-shadow:none;border:1px solid #e5e7eb}
.tpl-minimal .resume-header{border-bottom:1px solid #e5e7eb}
.tpl-minimal .name{font-weight:600;letter-spacing:.5px}
.tpl-minimal .rs h3{text-transform:none;letter-spacing:.5px;font-weight:600;font-size:10.5pt;border-bottom:1px solid #e5e7eb}
.tpl-minimal .skill-tag{background:#f9fafb;color:#374151;border:1px solid #e5e7eb;border-radius:2px}
.tpl-minimal .ref-card{border-left-color:#d1d5db}

/* ============================================================
   SMALL PHONES (< 360px)
   ============================================================ */
@media(max-width:360px){
  html{font-size:13px}
  .header{padding:6px 8px}
  .logo{font-size:.9rem}
  .actions select{min-width:70px;font-size:.72rem}
  .actions button{padding:4px 8px;font-size:.7rem}
  .resume{padding:20px 16px;font-size:9.5pt}
  .resume-photo{width:50px;height:50px}
  .name{font-size:16pt}
  .title{font-size:9pt}
  .contact{font-size:7.5pt}
  .btn-add{font-size:.75rem;padding:7px 12px}
}

/* ============================================================
   TABLETS PORTRAIT (480px+)
   ============================================================ */
@media(min-width:480px){
  .g2{grid-template-columns:1fr 1fr}
  .resume{padding:36px 32px}
  .contact-line{justify-content:flex-start}
}

/* ============================================================
   TABLETS / SMALL LAPTOPS (768px+)
   ============================================================ */
@media(min-width:768px){
  .header{padding:10px 16px}
  .actions button{padding:6px 12px;font-size:.78rem}
  .main{flex-direction:row;height:calc(100vh - 48px)}
  .editor{width:45%;max-height:none;border-bottom:none;border-right:1px solid #1e293b;padding:16px}
  .preview{flex:1;padding:28px}
  .resume{padding:40px 44px}
  .resume-photo{width:75px;height:75px}
  .name{font-size:24pt}
  .btn-add{width:auto}
  .g3{grid-template-columns:1fr 1fr 1fr}
  .ref-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   DESKTOP (1024px+)
   ============================================================ */
@media(min-width:1024px){
  .header{padding:10px 20px}
  .logo{font-size:1.1rem}
  .editor{width:46%;padding:18px 20px}
  .editor h2{font-size:.85rem;margin:16px 0 10px}
  .preview{padding:32px}
  .resume{padding:44px 48px;font-size:10.5pt}
  .resume-photo{width:80px;height:80px}
  .name{font-size:26pt}
  .title{font-size:12pt}
  .chip{font-size:.76rem;padding:2px 9px}
}

/* ============================================================
   LARGE DESKTOP (1280px+)
   ============================================================ */
@media(min-width:1280px){
  .editor{width:48%}
  .resume{max-width:800px}
}

/* ============================================================
   LANDSCAPE PHONES
   ============================================================ */
@media(max-height:500px) and (orientation:landscape){
  .header{padding:4px 10px}
  .logo{font-size:.85rem}
  .actions button{padding:4px 8px;font-size:.7rem}
  .main{flex-direction:row;height:calc(100vh - 36px)}
  .editor{width:50%;max-height:none;border-bottom:none;border-right:1px solid #1e293b;padding:10px 12px}
  .preview{padding:12px}
  .resume{padding:16px 18px;font-size:9pt}
  .resume-photo{width:40px;height:40px}
  .name{font-size:14pt}
  .btn-add{width:auto;padding:5px 12px}
  .btn-sm{padding:3px 8px;font-size:.7rem;margin-top:4px}
}

/* ============================================================
   TOUCH DEVICES
   ============================================================ */
@media(hover:none) and (pointer:coarse){
  .btn-sm,.btn-add,.actions button{min-height:40px}
  .f input,.f textarea,.f select{min-height:40px;padding:10px}
  .actions select{min-height:36px;padding:8px 12px}
}

/* ============================================================
   PRINT - Professional clean resume, no branding
   ============================================================ */
@media print{
  @page{margin:30px 40px 40px 40px}
  @page{@bottom-right{content:counter(page);font-size:8pt;color:#999;font-family:'Inter',system-ui,sans-serif}}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff!important}
  .header,.editor{display:none!important}
  .main{display:block;height:auto!important}
  .preview{padding:0!important;background:#fff!important;overflow:visible!important;height:auto!important;position:static}
  .resume{
    box-shadow:none!important;border-radius:0;
    max-width:100%;padding:0;
    font-size:10pt;line-height:1.45;margin:0;
  }
  .resume-header{flex-direction:row!important;gap:14px!important;align-items:center!important}
  .resume-photo{width:60px;height:60px}
  .name{font-size:22pt!important;text-align:left!important}
  .title{text-align:left!important}
  .contact{text-align:left!important}
  .contact-line{justify-content:flex-start!important}
  .rs{page-break-inside:avoid}
  .exp,.edu,.ref-card{page-break-inside:avoid}
  a{text-decoration:none;color:inherit}
}