/* Base */

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(81.02deg, rgb(250, 85, 96) -23.47%, rgb(177, 75, 244) 45.52%, rgb(77, 145, 255) 114.8%);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 20px;
}

.back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(250, 85, 96, 0.4);
}

body {
    margin:0;
    font-family:Arial,sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #232526, #414345);
    /* border-radius: 12px; */
        color:#fff;
    padding:20px;
  }
  .component-container {
    /* max-width:1000px; */
    margin:0 auto;
  }
  h2 { text-align:center; margin-bottom:20px; }
  
  /* Tabs */
  .tab-container {
    display:flex;
    justify-content:center;
    margin-bottom:20px;
  }
  .tab-btn {
    background:#222;
    color:#fff;
    border:1px solid #444;
    padding:8px 16px;
    margin:0 5px;
    border-radius:32px;
    cursor:pointer;
    transition:background .3s;
  }
  .tab-btn:hover,
  .tab-btn.active {
    background:linear-gradient(
      81.02deg,
      rgb(250, 85, 96) -23.47%,
      rgb(177, 75, 244) 45.52%,
      rgb(77, 145, 255) 114.8%
    );
  }
  
  /* Cards */
  .card-container {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
  }
  .component-card {
    background:#1e1e1e;
    border:2px solid #1abc9c;
    border-radius:8px;
    padding:15px;
    text-align:center;
    transition:transform .3s,box-shadow .3s;
  }
  .component-card:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 15px rgba(0,0,0,0.5);
  }
  .component-card h3 {
    margin-bottom:15px;
  }
  
  /* Preview */
  .preview {
    background:#000;
    padding:20px;
    border-radius:6px;
    margin-bottom:15px;
    min-height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  /* Buttons */
  .view-code-btn {
    background:linear-gradient(
      81.02deg,
      rgb(250, 85, 96) -23.47%,
      rgb(177, 75, 244) 45.52%,
      rgb(77, 145, 255) 114.8%
    );
    color:#fff;
    border:none;
    border-radius:5px;
    padding:8px 16px;
    cursor:pointer;
    transition:background .3s;
  }
  /* .view-code-btn:hover {
    background:#17a589;
  } */
  
  /* Modal */
  .modal {
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.7);
    z-index:9999;
  }
  .modal-content {
    background:#2a2a2a;
    margin:100px auto;
    padding:20px;
    max-width:600px;
    border-radius:8px;
    position:relative;
    color:#fff;
  }
  .close-btn {
    position:absolute;
    top:15px;right:15px;
    font-size:24px;
    color:#999;
    cursor:pointer;
    transition:color .3s;
  }
  .close-btn:hover {
    color:#ccc;
  }
  .modal-content h3 {
    margin-top:0;
    /* color:#1abc9c; */
  }
  .modal-content h4 {
    margin:10px 0 5px;
  }
  pre {
    background:#1e1e1e;
    padding:10px;
    border-radius:5px;
    max-height:150px;
    overflow:auto;
    white-space:pre-wrap;
    margin-bottom:10px;
  }
  .copy-btn {
    background:#1abc9c;
    color:#fff;
    border:none;
    padding:6px 12px;
    border-radius:4px;
    cursor:pointer;
    transition:background .3s;
    margin-bottom:10px;
  }
  .copy-btn:hover {
    background:#17a589;
  }