.error-strategy-card,
.error-trace-card,
.error-result-card,
.error-history-card { padding: 12px 14px; border: 1px solid #dbe2ec; border-radius: 8px; background: #fff; }
.error-strategy-card { border-color: #ef9dc7; background: #fff8fc; }
.error-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.error-section-heading h3, .error-section-heading p { margin: 0; }
.error-section-heading h3 { color: #202635; font-size: 13px; font-weight: 700; line-height: 1.3; }
.error-section-heading p { margin-top: 3px; color: #7c8798; font-size: 9px; line-height: 1.45; }
.error-section-heading > span, .error-section-heading div > span { flex: 0 0 auto; color: #75839a; font-size: 9px; font-weight: 700; }

.error-strategy-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.error-strategy-picker button { display: grid; justify-items: center; min-width: 0; gap: 3px; padding: 9px 5px; border: 1px solid #d8e0ea; border-radius: 7px; background: #fff; color: #18263a; text-align: center; }
.error-strategy-picker button:hover, .error-strategy-picker button.is-active { border-color: #ec168c; background: #fff1f8; }
.error-strategy-picker strong, .error-strategy-picker small { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.error-strategy-picker strong { font-size: 8px; }.error-strategy-picker small { color: #78869a; font-size: 7px; }
.error-strategy-icon { position: relative; display: block; width: 35px; height: 22px; border-radius: 5px; background: #edf3fa; }
.error-strategy-icon::before, .error-strategy-icon::after { position: absolute; content: ""; }
.error-strategy-icon::before { top: 10px; right: 5px; left: 5px; height: 2px; background: #8aa0b9; }
.error-strategy-icon::after { top: 7px; width: 7px; height: 7px; border: 2px solid #ec168c; border-radius: 50%; background: #fff; }
.error-strategy-icon--action::after { left: 5px; }.error-strategy-icon--global::after { left: 14px; }.error-strategy-icon--default::after { right: 5px; }

.error-request-preview { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 10px; border-radius: 6px; background: #f1f5fa; }
.error-request-preview div { display: grid; min-width: 0; gap: 2px; }.error-request-preview span { color: #76849a; font-size: 8px; }.error-request-preview code { overflow: hidden; color: #17243a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.error-request-preview i { position: relative; height: 2px; background: #9badc2; }.error-request-preview i::after { position: absolute; top: -3px; right: 0; border: 4px solid transparent; border-left-color: #9badc2; content: ""; }
.error-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

.error-trace { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.error-trace li { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 38px; padding: 6px 8px; border: 1px solid #e2e7ef; border-radius: 6px; background: #f9fbfd; }
.error-trace li > span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #c9d4e1; border-radius: 50%; color: #74849a; font-size: 8px; font-weight: 700; }
.error-trace li div { display: grid; min-width: 0; gap: 2px; }.error-trace strong { font-size: 9px; }.error-trace small { overflow: hidden; color: #7b889a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.error-trace li.is-active { border-color: #ef8bc0; background: #fff5fa; }.error-trace li.is-active > span { border-color: #ec168c; color: #c20d72; }
.error-trace li.is-success { border-color: #b8e3c9; background: #f0faf4; }.error-trace li.is-success > span { border-color: #43a874; background: #43a874; color: #fff; }
.error-trace li.is-error { border-color: #edc2c2; background: #fff4f4; }.error-trace li.is-error > span { border-color: #c86b6b; color: #b54747; }
.error-trace li.is-passed { border-color: #f0d5a6; background: #fff9ef; }.error-trace li.is-skipped { opacity: .58; }

.error-result-card { min-height: 96px; }.error-result-card:not(.is-empty) { border-color: #ef9dc7; box-shadow: 0 10px 30px rgba(26, 40, 61, .08); }
.error-result-empty { display: flex; align-items: center; gap: 10px; min-height: 68px; }.error-result-empty div { display: grid; gap: 2px; }.error-result-empty strong { font-size: 11px; }.error-result-empty small { color: #77859a; font-size: 9px; line-height: 1.4; }
.error-result-visual { display: grid; width: 44px; height: 34px; flex: 0 0 44px; place-items: center; border-radius: 6px; background: #eef4fb; color: #7690ad; font-size: 16px; font-weight: 700; }
.error-section-heading--result { align-items: center; }.error-section-heading--result h3 { margin-top: 2px; font-size: 14px; }.error-section-heading--result > span { padding: 4px 7px; border-radius: 999px; background: #fce6f2; color: #b00f68; }
.error-result-card.is-success .error-section-heading--result > span { background: #e8f7ef; color: #2c8258; }.error-result-card.is-warning .error-section-heading--result > span { background: #fff2da; color: #9a6612; }
.error-property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #e0e6ef; border-radius: 6px; background: #e0e6ef; }
.error-property-grid div { display: grid; min-width: 0; gap: 2px; padding: 8px 10px; background: #f9fbfd; }.error-property-grid span { color: #78869a; font-size: 8px; }.error-property-grid strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.error-payload-heading { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }.error-payload-heading span { color: #53647b; font-size: 9px; font-weight: 700; }.error-payload-heading small { color: #8994a5; font-size: 8px; }
.error-payload { max-height: 150px; margin: 5px 0 0; padding: 9px 10px; overflow: auto; border-radius: 6px; background: #1f2d43; }.error-payload code { color: #eef4fb; font-size: 8px; line-height: 1.5; }

.error-history { display: grid; gap: 6px; }.error-history > p { margin: 0; color: #7b889b; font-size: 9px; }
.error-history-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #e1e7ef; border-radius: 6px; background: #f9fbfd; }
.error-history-item > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e8eef6; color: #62758d; font-size: 8px; font-weight: 700; }
.error-history-item div { display: grid; min-width: 0; gap: 2px; }.error-history-item strong, .error-history-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.error-history-item strong { font-size: 9px; }.error-history-item small, .error-history-item time { color: #7b889a; font-size: 8px; }
.error-history-item.is-success > span { background: #dff3e8; color: #26794f; }.error-history-item.is-error > span { background: #fbe3e3; color: #aa4343; }.error-history-item.is-warning > span { background: #fff0d4; color: #95610e; }

@media (max-width: 620px) {
    .error-strategy-picker { grid-template-columns: 1fr; }
    .error-strategy-picker button { grid-template-columns: 37px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: 8px; text-align: left; }
    .error-strategy-icon { grid-row: 1 / 3; }.error-strategy-picker strong, .error-strategy-picker small { grid-column: 2; }
    .error-request-preview { grid-template-columns: 1fr; }.error-request-preview i { width: 18px; transform: rotate(90deg); }
}