:root{
      --accent:#007bff;
      --accent-dark:#0056b3;
      --bg:linear-gradient(135deg,#e3f2fd,#f8f9fa);
      --card-shadow: 0 6px 15px rgba(0,0,0,0.08);
      --radius:12px;
      --gap:20px;
      font-family: Inter, system-ui, -apple-system, "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    /* html,body{height:100%; margin:0; background:var(--bg); color:#222;} */
    .wrap{max-width:1800px; margin:-20px auto; padding:-20px; box-sizing:border-box;}

    h1{
      text-align:center; color:var(--accent); font-size:1.6rem; margin:0 0 18px;
    }

    /* GRID */
    /* .cv-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
      gap:var(--gap);
      align-items:start;
      width: 100%;
      margin-top: 50px;
    } */

    .cv-card{
      background:#fff;
      border-radius:var(--radius);
      overflow:hidden;
      border:2px solid #e6e9ee;
      box-shadow:var(--card-shadow);
      cursor:pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      display:flex; flex-direction:column; width:100%;
           

    }

    .cv-card img{ width:100%; height:300px; object-fit:cover; display:block; }
    .cv-card h3{ margin:0; padding:12px; font-size:1rem; text-align:center; color:#222; background:#fafafa; flex:0 0 auto; }

    .cv-card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.12); border-color:var(--accent); }
    .cv-card.selected{ border-color:var(--accent); box-shadow:0 0 18px rgba(0,123,255,0.22); background:#f0f7ff; }

    /* ACTIONS */
   .actions{ display:flex; justify-content:center; margin-top:70px; gap:12px; }
   .start-buttons{ display:flex; justify-content:center; margin-top:40px;margin-bottom:50px; gap:2px; }
    /*  .btn{
      background:var(--accent);
      color:#fff;
      border:none;
      padding:12px 26px;
      border-radius:10px;
      font-size:1rem;
      cursor:pointer;
      transition:background .15s ease, transform .08s ease;
    }
/* .btn { display:flex; gap:12px; justify-content:center; margin-top:2px; } */

.btn{
  border:none; border-radius:20px; padding:12px 22px; cursor:pointer; font-weight:600; color:#fff; transition:transform .18s ease, box-shadow .18s ease;
}

.btn{ background: linear-gradient(135deg,#5c8fff,#f78fb3); box-shadow:0 6px 18px rgba(91,140,255,0.15); }
    /* PREVIEW */
    .preview-wrap{ display:none; margin-top:20px; position:relative; width:100%; }
    .preview-top-left {
      position:absolute; left:14px; top:14px; z-index:30;
      display:flex; gap:8px; align-items:center;
    }
    .back02-btn{
      background:rgba(255,255,255,0.95);
      border:1px solid #ddd;
      color:#333;
      padding:8px 10px;
      border-radius:8px;
      cursor:pointer;
      box-shadow:0 6px 18px rgba(0,0,0,0.06);
    }
    /* .back02-btn:hover{ background:#fff; transform:translateY(-2px); } */

    .preview-iframe {
      width:100%;
      height:calc(100vh - 180px);
      min-height:420px;
      border-radius:12px;
      border:1px solid #ddd;
      overflow:hidden;
      box-shadow: 0 14px 40px rgba(0,0,0,0.08);
    }

    /* fallback message when iframe can't load */
    .preview-fallback{
      padding:24px;
      border-radius:12px;
      background:#fff;
      border:1px dashed #ddd;
      min-height:320px;
    }

.cv-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
  width: 100%;
  margin-top: 50px;
    padding-left: 20px;
    padding-right:20px;
}

/* ===== 2 CARDS AFTER 720px ===== */
@media (max-width: 720px){
  .cv-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== 1 CARD AFTER 500px ===== */
@media (max-width: 500px){
  .cv-grid{
    grid-template-columns: 1fr;
    max-width: 260px;
    margin: 0 auto;              /* centers the grid */
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 50px;
    justify-items: center;       /* centers card inside grid */
  }
}


@media (max-width: 500px){
  .cv-card{
    border-radius: 10px;
  }
}
@media (max-width: 600px){
  #cv .start-buttons #btnContinueSaved{
       margin-bottom: 20px;
  }
}


    /* Responsive tweaks */
    /* @media (max-width:500px){
      .cv-card img{ width:130px; }
      .preview-iframe{ height:60vh; min-height:360px; }
      .back02-btn{ padding:8px 10px; font-size:.95rem; }
      h1{ font-size:1.3rem; margin-bottom:14px; }
    } */