systemprompt-mcp 0.44.0

.card {
    border: 1px solid var(--mcpui-glass-border);
    border-radius: var(--mcpui-radius-card);
    overflow: hidden;
    background: var(--mcpui-glass-bg);
    background-image: var(--mcpui-glass-specular);
    box-shadow: var(--mcpui-shadow-raised), var(--mcpui-shadow-inset);
    -webkit-backdrop-filter: blur(var(--mcpui-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--mcpui-glass-blur)) saturate(140%);
}

.card-header {
    position: relative;
    padding: var(--mcpui-space-5) var(--mcpui-space-5) var(--mcpui-space-4);
    border-bottom: 1px solid var(--mcpui-border);
}

.card-header .mcp-app-description {
    margin-top: var(--mcpui-space-3);
}

.card-theme-gradient .card-header {
    background:
        radial-gradient(60% 140% at 12% 0%, var(--mcpui-accent-wash) 0%, transparent 70%);
}

/* The 1px gap is the grid background showing through, so section fills read as
 * hairline rules without a border on each cell. */
.card-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1px;
    background: var(--mcpui-border);
}

.card-section {
    padding: var(--mcpui-space-4) var(--mcpui-space-5);
    background: var(--mcpui-surface);
}

.card-section-heading {
    display: flex;
    align-items: center;
    gap: var(--mcpui-space-2);
    margin-bottom: var(--mcpui-space-2);
    color: var(--mcpui-ink-faint);
    font-size: var(--mcpui-text-xs);
    font-weight: 600;
    letter-spacing: var(--mcpui-tracking-wide);
    text-transform: uppercase;
}

.card-section-content {
    max-width: 60ch;
    color: var(--mcpui-ink);
    font-size: var(--mcpui-text-md);
}

.card-section-content p + p {
    margin-top: var(--mcpui-space-2);
}

.card-empty {
    padding: var(--mcpui-space-5);
    color: var(--mcpui-ink-dim);
}

.card-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mcpui-space-2);
    padding: var(--mcpui-space-4) var(--mcpui-space-5);
    border-top: 1px solid var(--mcpui-border);
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--mcpui-space-2);
    padding: var(--mcpui-space-2) var(--mcpui-space-4);
    border: 1px solid var(--mcpui-border-strong);
    border-radius: var(--mcpui-radius-inner);
    background: var(--mcpui-surface);
    color: var(--mcpui-ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--mcpui-duration) var(--mcpui-ease),
                background var(--mcpui-duration) var(--mcpui-ease);
}

.card-cta:hover {
    border-color: var(--mcpui-accent-rim);
    background: var(--mcpui-accent-wash);
}

.card-cta-primary {
    border-color: var(--mcpui-accent);
    background: var(--mcpui-accent);
    color: var(--mcpui-accent-ink);
}

.card-cta-primary:hover {
    border-color: var(--mcpui-accent);
    background: color-mix(in oklab, var(--mcpui-accent) 86%, var(--mcpui-ink));
    color: var(--mcpui-accent-ink);
}

.card-cta-status {
    flex-basis: 100%;
    margin-top: var(--mcpui-space-2);
    font-size: var(--mcpui-text-sm);
    color: var(--mcpui-ink-dim);
}

.card-cta-status[data-tone="success"] { color: var(--mcpui-success); }
.card-cta-status[data-tone="error"]   { color: var(--mcpui-danger); }

.card-cta:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* A "secondary" CTA was accepted by the model and had no rule here, so the
 * email draft's Discard button rendered as unstyled default chrome. */
.card-cta-secondary {
    border: 1px solid var(--mcpui-border-strong);
    background: var(--mcpui-surface);
    color: var(--mcpui-ink);
}

.card-cta-secondary:hover:not(:disabled) {
    border-color: var(--mcpui-accent-rim);
    background: var(--mcpui-accent-wash);
}

.card-cta-danger {
    border: 1px solid transparent;
    background: var(--mcpui-danger);
    color: var(--mcpui-surface);
}

.card-cta-danger:hover:not(:disabled) {
    background: color-mix(in oklab, var(--mcpui-danger) 86%, black);
}

.card-theme-plain .card-header {
    background: var(--mcpui-surface);
}

.card-theme-muted .card-header {
    background: var(--mcpui-surface-sunken);
    color: var(--mcpui-ink-dim);
}

/* An email body or a long URL is exactly what a card section carries. */
.card-section-content {
    overflow-wrap: anywhere;
}

.card-section-list {
    margin: 0;
    padding-left: var(--mcpui-space-4);
}

.card-section-pairs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--mcpui-space-1) var(--mcpui-space-3);
    margin: 0;
}

.card-section-pairs dt {
    color: var(--mcpui-ink-dim);
}

.card-section-pairs dd {
    margin: 0;
}

/* The section heading is an <h2> now, not a styled div; keep the same look. */
.card-section-heading {
    font-size: var(--mcpui-text-sm);
    font-weight: 600;
}