:root{
      --pxc-gap: 16px;
      --pxc-radius: 12px;
      --pxc-border: #d8dadd;
      --pxc-muted: #666666;
      --pxc-bg-soft: #f6f7f8;
      --pxc-bg:#f6f7f8;
      --pxc-border:#d8dadd;
      --pxc-muted:#666666;
      --pxc-primary:#3D91A6;
      --pxc-primary-600:#0E8088;
      --pxc-success:#00c8c4;
      --pxc-note:#fff9e6;
      --pxc-note-border:#ffdbaf;
      --pxc-radius:12px;
      --pxc-gap:16px;
      --pxc-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06);
    }

    /* Layout */
    .layout{
      display:grid; gap:var(--pxc-gap);
      grid-template-columns: 1fr;
    }
    @media (min-width: 980px){
      .layout{ grid-template-columns: 280px 1fr; align-items:start; }
    }

    /* Sidebar */
    .sidebar{
      position:sticky; top:72px;
      background:var(--pxc-bg-soft);
      border:1px solid var(--pxc-border);
      border-radius:var(--pxc-radius);
      padding:12px;
    }
    .sidebar-toggle{
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      cursor:pointer; user-select:none; padding:8px 10px; border-radius:10px;
      background:#fff; border:1px solid var(--pxc-border);
    }
    /*@media (prefers-color-scheme:dark){ .sidebar-toggle{ background:#14171c; } }*/
    .sidebar nav{ margin-top:10px; }
    .sidenav-group h3{ margin:.6rem 0 .2rem; font-size:.95rem; opacity:.8; }
    .sidenav-group a{ display:block; padding:6px 8px; border-radius:8px; text-decoration:none; }
    .sidenav-group a:hover{ background:rgba(11,107,203,.08); }

    /* Controls row */
    .controls{
      display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px;
    }
    .search{
      flex:1 1 260px; display:flex; align-items:center; gap:8px;
      background:#fff; border:1px solid var(--pxc-border); border-radius:12px; padding:10px 12px;
    }
    /*@media (prefers-color-scheme:dark){ .search{ background:#14171c; } }*/
    .search input{ border:0; outline:0; background:transparent; width:100%; font-size:1rem; }
    .chips{ display:flex; flex-wrap:wrap; gap:8px; }
    .chip{
      padding:6px 10px; border-radius:999px; border:1px solid var(--pxc-border);
      background:#fff; cursor:pointer; font-size:.93rem;
    }
    .chip[aria-pressed="true"]{ background:var(--pxc-primary); color:#fff; border-color:var(--pxc-primary); }
    /*@media (prefers-color-scheme:dark){ .chip{ background:#14171c; } }*/

    /* Card grid */
    .grid{
      --min: 260px;
      display:grid; gap:var(--pxc-gap);
      grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
    }
    .card{
      border:1px solid var(--pxc-border); border-radius:14px; overflow:hidden; background:#fff;
      display:flex; flex-direction:column;
    }
    /*@media (prefers-color-scheme:dark){ .card{ background:#14171c; } }*/
    .card-body{ padding:14px 14px 12px; display:flex; flex-direction:column; gap:8px; }
    .card-title{ margin:0; font-size:1.05rem; }
    .card-meta{ color:var(--pxc-muted); font-size:.9rem; margin:0; }
    .steps{ margin:0; padding-left:1.1rem; color:var(--pxc-muted); }
    .card-actions{ display:flex; gap:8px; margin-top:auto; }
    .btn{ padding:10px 14px; border-radius:10px; border:1px solid var(--pxc-border); background:#fff; text-decoration:none; font-weight:600; }
    .btn.primary{ background:var(--pxc-primary); color:#fff; border-color:var(--pxc-primary); }
    .link{ text-decoration:none; color:var(--pxc-primary); }

    /* Section headers */
    .block > h2{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .count{ font-size:.85rem; color:var(--pxc-muted); }

    /* Utility */
    .muted{ color:var(--pxc-muted); }
    .callout{ margin-top:12px; padding:10px 12px; border:1px solid var(--pxc-border); border-radius:12px; background:var(--pxc-bg-soft); }

    @media (prefers-reduced-motion:no-preference){
      .fade-in{ animation:fade .18s ease-in both; }
      @keyframes fade{ from{opacity:.75; transform:translateY(2px)} to{opacity:1; transform:none} }
    }





    /* Make the card grid stretch cards to equal height */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch; /* important: stretch cards to same row height */
}

/* Let each card fill the available height */
.card {
  display: flex;
  height: 100%;
}

/* Turn the card body into a vertical layout with a flexible middle */
.card-body {
  display: grid;
  grid-template-rows: auto auto 1fr auto; 
  /* title | meta | (flexible) description | actions */
  padding: 16px;
  width: 100%;
}

/* Optional but helps keep title baselines aligned if lines wrap differently */
.card-title {
  margin: 0 0 6px 0;
  line-height: 1.2;
  min-height: 2.4em; /* ~2 lines of space for consistent title height */
}

/* Keep the category label close to the title */
.card-meta {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Let the description take up the remaining space */
.card-body > p:nth-of-type(2) {
  margin: 0 0 12px 0;
}

/* Pin buttons to the bottom of every card */
.card-actions {
  margin-top: 0;         /* grid handles spacing */
  align-self: end;       /* ensure it sits at the bottom of the grid area */
}

/* Make the button(s) consistent in size/appearance */
.btn.primary {
  display: inline-block;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
}

/* Small nicety: ensure equal heights hold on narrow screens too */
@media (max-width: 599px) {
  .grid {
    grid-template-columns: 1fr;
  }
}