.ap-card-head p {
      font-size: .78rem;
      color: var(--ap-secondary);
      margin: .15rem 0 0;
    }

    .ap-card-body {
      padding: 1.35rem;
    }

    /* Section jump nav */
    .ap-jump-nav {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-bottom: 1.25rem;
    }

    .ap-jump-chip {
      border: 1px solid var(--ap-border);
      background: var(--ap-surface);
      color: var(--ap-text-strong);
      border-radius: 20px;
      padding: .35rem .85rem;
      font-size: .78rem;
      font-weight: 600;
    }

    .ap-jump-chip:hover {
      background: var(--ap-primary-100);
      color: var(--ap-primary);
      border-color: var(--ap-primary-100);
    }

    /* Accordion */
    .accordion-item {
      background: var(--ap-surface);
      border: 1px solid var(--ap-border) !important;
      border-radius: var(--ap-radius-sm) !important;
      margin-bottom: .6rem;
      overflow: hidden;
    }

    .accordion-item:last-child {
      margin-bottom: 0;
    }

    .accordion-button {
      background: var(--ap-surface);
      color: var(--ap-text-strong);
      font-weight: 600;
      font-size: .87rem;
      box-shadow: none !important;
    }

    .accordion-button:not(.collapsed) {
      background: var(--ap-primary-100);
      color: var(--ap-primary);
    }

    .accordion-button::after {
      filter: var(--ap-icon-filter, none);
    }

    .accordion-body {
      font-size: .85rem;
      color: var(--ap-text);
      background: var(--ap-surface);
    }

    /* Buttons demo */
    .ap-btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      align-items: center;
    }

    .btn-ap-success {
      background: var(--ap-success);
      border-color: var(--ap-success);
      color: #fff;
      font-weight: 600;
      font-size: .85rem;
    }

    .btn-ap-info {
      background: var(--ap-info);
      border-color: var(--ap-info);
      color: #fff;
      font-weight: 600;
      font-size: .85rem;
    }

    .btn-ap-warning {
      background: var(--ap-warning);
      border-color: var(--ap-warning);
      color: #fff;
      font-weight: 600;
      font-size: .85rem;
    }

    .btn-ap-danger {
      background: var(--ap-danger);
      border-color: var(--ap-danger);
      color: #fff;
      font-weight: 600;
      font-size: .85rem;
    }

    .btn-outline-ap-primary {
      background: transparent;
      border: 1px solid var(--ap-primary);
      color: var(--ap-primary);
      font-weight: 600;
      font-size: .85rem;
    }

    .btn-outline-ap-primary:hover {
      background: var(--ap-primary);
      color: #fff;
    }

    /* Cards demo */
    .ap-demo-card {
      border: 1px solid var(--ap-border);
      border-radius: var(--ap-radius-sm);
      overflow: hidden;
      height: 100%;
    }

    .ap-demo-card img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }

    .ap-demo-card .body {
      padding: 1rem;
    }

    .ap-demo-card .body h6 {
      font-size: .9rem;
      margin-bottom: .35rem;
    }

    .ap-demo-card .body p {
      font-size: .8rem;
      color: var(--ap-text);
      margin-bottom: .7rem;
    }

    /* Carousel */
    .ap-carousel-slide {
      aspect-ratio: 21/9;
      background-size: cover;
      background-position: center;
      border-radius: var(--ap-radius-sm);
      display: flex;
      align-items: flex-end;
      position: relative;
    }

    .ap-carousel-slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 60%);
      border-radius: var(--ap-radius-sm);
    }

    .ap-carousel-caption {
      position: relative;
      z-index: 1;
      color: #fff;
      padding: 1.5rem;
    }

    .carousel-indicators [data-bs-target] {
      background: #fff;
    }

    /* Progress */
    .ap-progress-row {
      margin-bottom: 1.1rem;
    }

    .ap-progress-row:last-child {
      margin-bottom: 0;
    }

    .ap-progress-label {
      display: flex;
      justify-content: space-between;
      font-size: .8rem;
      margin-bottom: .4rem;
      color: var(--ap-text-strong);
      font-weight: 600;
    }

    .progress {
      background: var(--ap-bg);
      border-radius: 10px;
    }

    /* Spinners */
    .ap-spinner-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      align-items: center;
    }

    /* Tabs (bootstrap nav-tabs restyle) */
    .nav-tabs {
      border-bottom: 1px solid var(--ap-border);
    }

    .nav-tabs .nav-link {
      color: var(--ap-secondary);
      font-weight: 600;
      font-size: .85rem;
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
    }

    .nav-tabs .nav-link.active,
    .nav-tabs .nav-link:hover {
      color: var(--ap-primary);
      background: transparent;
      border-color: transparent transparent var(--ap-primary);
    }

    .nav-pills .nav-link {
      color: var(--ap-text-strong);
      font-weight: 600;
      font-size: .85rem;
      border-radius: 20px;
    }

    .nav-pills .nav-link.active {
      background: var(--ap-primary);
      color: #fff;
    }

    .tab-content {
      padding-top: 1rem;
      font-size: .85rem;
      color: var(--ap-text);
    }

    /* Typography */
    .ap-type-sample {
      border-bottom: 1px solid var(--ap-border);
      padding-bottom: 1rem;
      margin-bottom: 1rem;
    }

    .ap-type-sample:last-child {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    blockquote {
      border-left: 3px solid var(--ap-primary);
      padding-left: 1rem;
      font-style: italic;
      color: var(--ap-text);
    }

    code {
      color: var(--ap-danger);
      background: var(--ap-bg);
      padding: .1rem .35rem;
      border-radius: 4px;
      font-size: .85em;
    }

    /* Utilities swatches */
    .ap-util-swatch {
      padding: .7rem 1rem;
      border-radius: var(--ap-radius-sm);
      font-size: .78rem;
      font-weight: 700;
      color: #fff;
      text-align: center;
    }

    .ap-util-box {
      width: 100%;
      height: 60px;
      border-radius: var(--ap-radius-sm);
      border: 1px dashed var(--ap-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      color: var(--ap-secondary);
      background: var(--ap-bg);
    }

    [data-bs-toggle="tooltip"] {
      cursor: pointer;
    }

    /* ============ Utility classes (extracted from inline styles) ============ */

    /* Font sizes */
    .ap-fs-13 {
      font-size: 1.3rem;
    }

    .ap-fs-06 {
      font-size: .6rem;
    }

    .ap-color-strong {
      color: var(--ap-text-strong);
    }

    .ap-color-secondary {
      color: var(--ap-secondary);
    }

    /* Transparent button */
    .ap-btn-transparent {
      background: transparent;
    }

    /* Small dropdown menu */
    .ap-menu-sm {
      font-size: .85rem;
    }

    /* ---------- Badge background variants ---------- */
    .ap-bg-primary {
      background: var(--ap-primary);
    }

    .ap-bg-secondary {
      background: var(--ap-secondary);
    }

    .ap-bg-success {
      background: var(--ap-success);
    }

    .ap-bg-danger {
      background: var(--ap-danger);
    }

    .ap-bg-warning {
      background: var(--ap-warning);
    }

    .ap-bg-info {
      background: var(--ap-info);
    }

    /* ---------- Status pills ---------- */
    .ap-pill {
      font-weight: 700;
    }

    .ap-pill-success {
      background: var(--ap-success-100);
      color: var(--ap-success);
    }

    .ap-pill-warning {
      background: var(--ap-warning-100);
      color: var(--ap-warning);
    }

    .ap-pill-danger {
      background: var(--ap-danger-100);
      color: var(--ap-danger);
    }

    .ap-pill-info {
      background: var(--ap-info-100);
      color: var(--ap-info);
    }

    /* ---------- Icon button (square) ---------- */
    .btn-ap-square {
      width: 38px;
      height: 38px;
      padding: 0;
    }

    /* ---------- Horizontal card image ---------- */
    .ap-card-h-img {
      width: 110px;
      aspect-ratio: auto;
      height: auto;
      object-fit: cover;
    }

    /* ---------- Carousel ---------- */
    .ap-carousel-subtitle {
      opacity: .85;
    }

    .ap-slide-q3 {
      background-image: url('https://picsum.photos/seed/slide1/1200/500');
    }

    .ap-slide-launch {
      background-image: url('https://picsum.photos/seed/slide2/1200/500');
    }

    .ap-slide-milestone {
      background-image: url('https://picsum.photos/seed/slide3/1200/500');
    }

    /* ---------- Progress ---------- */
    .ap-progress-h-8 {
      height: 8px;
    }

    .ap-progress-h-10 {
      height: 10px;
    }

    .ap-w-72 {
      width: 72%;
    }

    .ap-w-45 {
      width: 45%;
    }

    .ap-w-100 {
      width: 100%;
    }

    .ap-w-88 {
      width: 88%;
    }

    .ap-w-63 {
      width: 63%;
    }

    .ap-fill-danger {
      background: var(--ap-danger);
    }

    /* ---------- Spinner colors ---------- */
    .ap-spin-primary {
      color: var(--ap-primary);
    }

    .ap-spin-info {
      color: var(--ap-info);
    }

    .ap-spin-success {
      color: var(--ap-success);
    }

    .ap-spin-warning {
      color: var(--ap-warning);
    }

    .ap-spin-danger {
      color: var(--ap-danger);
    }

    /* ---------- Misc ---------- */
    .ap-hr {
      border-color: var(--ap-border);
    }

    .ap-icon-btn-bordered {
      border: 1px solid var(--ap-border);
    }

    /* ---------- Typography utilities ---------- */
    .ap-type-h1 {
      font-size: 2rem;
    }

    .ap-type-h2 {
      font-size: 1.6rem;
    }

    .ap-type-h3 {
      font-size: 1.35rem;
    }

    .ap-type-h4 {
      font-size: 1.15rem;
    }

    .ap-type-h5 {
      font-size: 1rem;
    }

    .ap-type-h6 {
      font-size: .87rem;
    }

    .ap-type-lead {
      font-size: 1.05rem;
      color: var(--ap-text-strong);
    }

    .ap-type-body {
      font-size: .87rem;
      color: var(--ap-text);
    }

    .ap-type-small {
      color: var(--ap-secondary);
    }

    /* Code block */
    .ap-code-block {
      background: var(--ap-bg);
      border: 1px solid var(--ap-border);
      border-radius: var(--ap-radius-sm);
      padding: 1rem;
      font-size: .8rem;
      color: var(--ap-text-strong);
      overflow-x: auto;
    }

    /* ---------- Utilities demo ---------- */
    .ap-util-label {
      font-size: .78rem;
      font-weight: 700;
      color: var(--ap-text-strong);
      text-transform: uppercase;
      letter-spacing: .03em;
    }

    .ap-swatch-primary {
      background: var(--ap-primary);
    }

    .ap-swatch-secondary {
      background: var(--ap-secondary);
    }

    .ap-swatch-success {
      background: var(--ap-success);
    }

    .ap-swatch-danger {
      background: var(--ap-danger);
    }

    .ap-swatch-warning {
      background: var(--ap-warning);
    }

    .ap-swatch-info {
      background: var(--ap-info);
    }

    .ap-util-box-60 {
      width: 60px;
    }

    .ap-util-box-70 {
      width: 70px;
    }

    .ap-util-box-80 {
      width: 80px;
    }

    .ap-flex-demo {
      border: 1px dashed var(--ap-border);
      border-radius: var(--ap-radius-sm);
    }

    .ap-radius-0 {
      border-radius: 0;
    }

    .ap-radius-2 {
      border-radius: 6px;
    }

    .ap-radius-4 {
      border-radius: 14px;
    }

    .ap-radius-circle {
      border-radius: 50%;
    }