.pap-module {
    color: var(--pap-color, currentColor);
    font: inherit;
}

.pap-module,
.pap-module * { box-sizing: border-box; }
.pap-module__heading { margin: 0 0 1em; color: inherit; font: inherit; font-size: 1.35em; font-weight: 800; }
.pap-module__grid { display: grid; grid-template-columns: var(--pap-columns, repeat(auto-fill, minmax(min(100%, 235px), 1fr))); gap: var(--pap-gap, 15px); }
.pap-module__card {
    position: relative;
    min-width: 0;
    min-height: 102px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 13px;
    padding: 15px;
    overflow: hidden;
    border: 2px solid var(--pap-border, currentColor);
    border-radius: var(--pap-radius, 12px);
    background: var(--pap-surface, transparent);
    box-shadow: 0 5px 0 var(--pap-shadow, color-mix(in srgb, currentColor 25%, transparent));
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.pap-module__card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--pap-accent, currentColor); }
.pap-module__card:nth-child(5n + 2) { --pap-accent: #1197a8; --pap-icon-background: #e5f7f8; }
.pap-module__card:nth-child(5n + 3) { --pap-accent: #e95e35; --pap-icon-background: #fff0ea; }
.pap-module__card:nth-child(5n + 4) { --pap-accent: #684bc6; --pap-icon-background: #f0ecff; }
.pap-module__card:nth-child(5n) { --pap-accent: #147653; --pap-icon-background: #e5f6ee; }
.pap-module__card:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #bcc7d6; background: #fbfcff; }
.pap-module__card:active { transform: translateY(3px); box-shadow: 0 2px 0 #bcc7d6; }
.pap-module__card:focus-visible { outline: 4px solid #ffbf19; outline-offset: 3px; }
.pap-module__icon { position: relative; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--pap-icon-background, color-mix(in srgb, currentColor 10%, transparent)); color: var(--pap-accent, currentColor); font: 900 18px/1 ui-monospace, "Cascadia Code", monospace; }
.pap-module__initial { grid-area: 1 / 1; }
.pap-module__image { grid-area: 1 / 1; z-index: 1; width: 100%; height: 100%; padding: 5px; background: var(--pap-icon-background, transparent); object-fit: contain; }
.pap-module__image[hidden] { display: none; }
.pap-module__content { min-width: 0; display: flex; flex-direction: column; }
.pap-module__name { overflow: hidden; color: inherit; font-size: 1.05em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pap-module__description { margin-top: 5px; color: var(--pap-muted); font-size: .9em; line-height: 1.35; }
.pap-module__host { margin-top: 5px; overflow: hidden; color: var(--pap-muted, color-mix(in srgb, currentColor 62%, transparent)); font: 700 .72em/1.35 ui-monospace, "Cascadia Code", monospace; text-overflow: ellipsis; white-space: nowrap; }
.pap-module__arrow { width: 22px; fill: none; stroke: var(--pap-border, currentColor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.pap-module__card:hover .pap-module__arrow { transform: translateX(3px); }
.pap-module__empty { margin: 0; padding: 20px; border: 2px dashed color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--pap-radius, 12px); color: var(--pap-muted, currentColor); background: var(--pap-surface, transparent); }

@media (max-width: 520px) { .pap-module__card { min-height: 88px; } }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .pap-module__card:nth-child(5n + 1),
    :root:not([data-theme]) .pap-module__card:nth-child(5n + 2),
    :root:not([data-theme]) .pap-module__card:nth-child(5n + 3),
    :root:not([data-theme]) .pap-module__card:nth-child(5n + 4),
    :root:not([data-theme]) .pap-module__card:nth-child(5n) { --pap-icon-background: color-mix(in srgb, currentColor 12%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .pap-module__card, .pap-module__arrow { transition: none; } }