:root{
  --brand:#2563eb; --text:#111827; --muted:#6b7280; --bg:#f6f7fb; --paper:#fff;
  --base-font:"Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --size:16px; --leading:1.45; --gap:14px;
  --paper-w:794px; --paper-h:1123px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;padding:0;background:var(--bg);color:var(--text);font:400 var(--size)/var(--leading) var(--base-font)}

.nk-resume-builder.app{min-height:100vh;display:grid;grid-template-columns:30% 70%;gap:18px}
.pad{padding:18px}

.sidebar{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(17,24,39,.06);display:flex;flex-direction:column}
.brand{padding:14px 16px;border-bottom:1px solid #eef2f7;display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.brand h1{margin:0;font-weight:800;font-size:16px}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px;border-bottom:1px solid #eef2f7}
.tab{padding:.55rem .4rem;border-radius:10px;text-align:center;font-weight:600;font-size:13px;cursor:pointer;background:#f3f4f6}
.tab.active{background:var(--brand);color:#fff}
.pane{display:none;padding:14px 14px 18px 14px;overflow:auto}
.pane.active{display:block}
.group{margin-bottom:14px}
label{font-size:12px;font-weight:700;color:#374151;margin:0 0 6px}
.form-control,.form-select{border-radius:10px;border-color:#e5e7eb}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .25rem rgba(37,99,235,.18)}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-soft{background:#1118270d;border:0}
.muted{color:var(--muted);font-size:12px}
.divider{height:1px;background:#eef2f7;margin:12px -14px}

/* ===== Templates gallery: ALWAYS 3 per row ===== */
.thumb-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.thumb{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .2s}
.thumb:hover{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.thumb .ph{width:100%;aspect-ratio:3/4;background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}
.thumb .cap{padding:.5rem .75rem;font-size:12px;font-weight:700;text-align:center}
.thumb.active{outline:3px solid var(--brand)}

/* ===== Preview Pane ===== */
.preview-wrap{display:flex;flex-direction:column;gap:12px}
.preview-viewport{position:relative;display:flex;justify-content:center;align-items:flex-start;overflow:auto;width:100%;height:calc(100vh - 70px)}
.paper{
  width:var(--paper-w); height:var(--paper-h);
  background:var(--paper); border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 10px 30px rgba(17,24,39,.08);
  margin:0 auto; position:relative; overflow:hidden;
  padding:34px;
}
.paper-inner{transform-origin: top left;}
.scaled{transform-origin: top center;}
.toolbar > *{ margin-right:.5rem }

/* ===== Resume primitives ===== */
.hdr{display:flex;gap:18px;align-items:center}
.avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;border:3px solid var(--brand)}
.name{font-size:36px;font-weight:800;margin:0;letter-spacing:.4px}
.title{font-size:16px;margin:2px 0 0;color:var(--muted);font-weight:600}
.section{margin-top:20px}
.section h3{margin:0 0 8px;font-size:13px;color:#374151;letter-spacing:.18em;text-transform:uppercase}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sidecard{padding:14px;background:#f9fafb;border-radius:10px;border:1px solid #eef2f7}
.kw{display:inline-block;border:1px solid #e5e7eb;border-radius:999px;padding:4px 12px;margin:4px 6px 6px 0;font-size:12px;white-space:nowrap;width:auto}
.section .card{display:flex;flex-wrap:wrap;gap:6px;}
.bullet{margin:0 0 6px 18px}
.hl{height:4px;background:var(--brand);width:64px;border-radius:4px;margin:8px 0 14px}

/* ===== Template skins ===== */
.tpl-dark-sidebar .wrap{display:grid;grid-template-columns:260px 1fr;gap:22px}
.tpl-dark-sidebar .left{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:18px}
.tpl-dark-sidebar .left h4{margin:14px 0 8px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#93c5fd}
.tpl-dark-sidebar .left .muted{color:#a5b4fc}
.tpl-dark-sidebar .name{color:#0f172a}

.tpl-beige-accent .header-card{background:#f1e6d9;border-radius:14px;padding:18px}
.tpl-beige-accent .title{color:#6b4f3b}

.tpl-teacher-soft .header{display:flex;gap:14px;align-items:center}
.tpl-teacher-soft .rail{border-left:6px solid var(--brand);padding-left:12px;margin:8px 0 12px}
.tpl-teacher-soft .contact{display:flex;gap:12px;align-items:center;color:#0ea5e9;font-weight:600;margin-top:4px}
.tpl-teacher-soft .title{color:#0ea5e9}

.tpl-card-grid .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
.tpl-card-grid .grid .card{border-radius:12px;border:1px solid #e5e7eb;padding:14px}
.tpl-card-grid .badge{display:inline-block;background:#eef2ff;color:#1d4ed8;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;margin-bottom:8px}

.tpl-slate-minimal .name{font-family:"Merriweather",serif;font-weight:700}
.tpl-slate-minimal .title{color:#334155}
.tpl-slate-minimal .rule{height:1px;background:#e2e8f0;margin:14px 0}
.tpl-slate-minimal .kw{border-color:#94a3b8;color:#334155}

/* Print A4 */
@media print{
  @page{size:A4;margin:0}
  .pad{padding:0}
  .sidebar,.toolbar{display:none!important}
  .preview-viewport{overflow:visible;height:auto}
  .paper{width:210mm;height:297mm;box-shadow:none;border:0;margin:0;padding:12mm}
}

/* Responsive shell */
@media (max-width:1024px){
  .nk-resume-builder.app{grid-template-columns:1fr}
  .preview-viewport{height:auto}
  .sidebar {max-width:100%; width:100%;}
  .paper {width:100%; max-width: var(--paper-w); height:auto;}
}
@media (max-width:820px){
  .preview-viewport{padding-bottom:18px}
  .paper.scaled{transform:scale(var(--scale,1))}
  .tabs {grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));}
  .paper {padding: 20px;}
}
@media (max-width:576px){
  .hdr {flex-direction: column; align-items: flex-start;}
  .avatar {width: 70px; height: 70px;}
  .name {font-size: 28px;}
  .title {font-size: 14px;}
  .two-col {grid-template-columns: 1fr;}
  .form-control, .form-select {font-size: 14px;}
  .btn {font-size: 14px; padding: 8px 12px;}
  .paper {padding: 15px;}
}
@media (max-width:480px){
  .tabs {grid-template-columns: 1fr;}
  .tab {font-size: 12px; padding: 8px;}
  .brand h1 {font-size: 14px;}
  .group {margin-bottom: 10px;}
  .paper {padding: 10px;}
  .preview-viewport {height: auto;}
}