.support-card-grid {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.support-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.support-page-header-copy {
    display: grid;
    gap: 8px;
    flex: 1 1 420px;
}

.support-page-header-copy h1,
.support-page-header-copy p {
    margin: 0;
}

.support-page-header .button-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    align-self: flex-start;
}

@media (min-width: 940px) {
    .support-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.support-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(15, 61, 136, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    height: 100%;
}

.support-card-header {
    display: grid;
    gap: 6px;
}

.support-card-header h2 {
    margin: 0;
    font-size: 1.08rem;
}

.support-card-header p {
    margin: 0;
}

.support-kv {
    display: grid;
    gap: 10px;
}

.support-kv-item {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(15, 61, 136, 0.1);
}

.support-kv-label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.support-kv-value {
    color: var(--text);
    line-height: 1.55;
}

.support-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    background: var(--accent-soft);
    color: var(--accent);
}

.support-status-pill.status-pending {
    background: rgba(165, 124, 96, 0.16);
    color: #7a5944;
}

.support-status-pill.status-progress {
    background: rgba(91, 152, 185, 0.16);
    color: #1d4f69;
}

.support-status-pill.status-resolved {
    background: rgba(140, 165, 67, 0.16);
    color: #6b8529;
}

.support-history-list {
    display: grid;
    gap: 12px;
}

.support-history-item {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(15, 61, 136, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.support-history-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.support-history-top h3 {
    margin: 0;
    font-size: 1rem;
}

.support-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 0.92rem;
}

.support-history-message {
    margin: 0;
}

.support-history-feedback {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(15, 61, 136, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.support-actions button,
.support-actions .button-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.turnstile-block {
    max-width: 320px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 61, 136, 0.1);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.support-inline-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.support-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--accent);
    text-decoration: none;
    padding: 0;
}

.support-icon-link:hover,
.support-icon-link:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
}

.support-icon-link i {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 760px) {
    .support-page-header,
    .support-actions {
        align-items: stretch;
    }

    .support-page-header .button-link,
    .support-actions .button-link,
    .support-actions button {
        width: 100%;
    }

    .turnstile-block {
        max-width: none;
    }
}