:root { --navy: #172033; --muted: #718096; --line: #e6eaf0; --purple: #6558d6; --bg: #f6f7f9; --green: #26875f; --red: #c6535c; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--navy); background: var(--bg); font: 14px "DM Sans", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; }.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100% - 1160px) / 2)); border-bottom: 1px solid var(--line); background: #fff; }.brand { display: flex; align-items: center; gap: 9px; color: var(--navy); font: 700 21px "Space Grotesk", sans-serif; text-decoration: none; }.mark { display: flex; align-items: flex-end; gap: 3px; height: 19px; }.mark i { width: 4px; border-radius: 4px; background: var(--purple); }.mark i:first-child { height: 10px; }.mark i:nth-child(2) { height: 18px; }.mark i:last-child { height: 14px; }.topbar-actions { display: flex; align-items: center; gap: 20px; }.environment { color: #909aaa; font-size: 11px; }.environment i, .health-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #d58e39; }.environment strong { color: var(--navy); font-weight: 600; }.icon-button { border: 0; color: #718096; background: transparent; font-size: 22px; }.icon-button:hover { color: var(--purple); }
main { max-width: 1160px; margin: 0 auto; padding: 48px 24px 30px; }.intro { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }.overline { margin: 0 0 10px; color: #909aaa; font-size: 10px; font-weight: 700; letter-spacing: .13em; }.intro h1 { margin: 0 0 8px; font: 700 29px "Space Grotesk", sans-serif; letter-spacing: -.6px; }.description { margin: 0; color: var(--muted); }.health-card { display: flex; align-items: center; padding: 10px 13px; border: 1px solid #f0dfe0; border-radius: 6px; color: var(--red); background: #fffafa; font-size: 12px; }.health-card.online { border-color: #d9eee4; color: var(--green); background: #f7fcf9; }.health-card.online .health-dot { background: #3aa274; }
.summary-row { display: grid; grid-template-columns: 220px 220px; gap: 14px; margin-bottom: 18px; }.summary-card { padding: 17px 19px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.summary-label, .summary-note { display: block; color: #8490a1; font-size: 11px; }.summary-card strong { display: block; margin: 5px 0 3px; font: 700 24px "Space Grotesk", sans-serif; }.summary-note { color: #a5adba; font-size: 10px; }
.workspace { margin-bottom: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 22px; }.section-heading h2 { margin: 0 0 5px; font: 600 15px "Space Grotesk", sans-serif; }.section-heading p { margin: 0; color: #8b96a7; font-size: 12px; }.button { padding: 9px 13px; border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-weight: 600; }.button.secondary { border-color: var(--line); color: #627086; background: #fff; }.button.secondary:hover { border-color: #c9cfe0; }.button.primary { color: #fff; background: var(--purple); }.button.primary:hover { background: #5548c3; }.button.small { padding: 6px 10px; color: var(--purple); background: #f3f1ff; }.button:disabled { cursor: wait; opacity: .55; }.feedback { margin: -5px 0 16px; padding: 10px 12px; border-radius: 5px; color: var(--red); background: #fff4f4; font-size: 12px; }.feedback.success { color: var(--green); background: #f1faf5; }.feedback.notice { color: #8e6d2c; background: #fff9ed; }
.table-container { overflow-x: auto; }table { width: 100%; border-collapse: collapse; text-align: left; }th { padding: 0 12px 11px; color: #97a1b0; font-size: 9px; font-weight: 700; letter-spacing: .06em; }td { padding: 13px 12px; border-top: 1px solid #eff1f4; color: #657287; font-size: 12px; }td code { color: #3e4b61; font: 600 12px "DM Sans", sans-serif; }.action-heading, .action-cell { text-align: right; }.status { padding: 4px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: capitalize; }.status.delivered { color: var(--green); background: #edf8f2; }.status.failed { color: var(--red); background: #fff0f1; }.loading { padding: 25px 0; color: #8d98a8; font-size: 12px; }.empty-state { padding: 35px 10px 18px; text-align: center; }.empty-icon { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 10px; border-radius: 50%; color: var(--green); background: #eaf7f0; font-weight: 700; }.empty-state h3 { margin: 0 0 5px; font-size: 14px; }.empty-state p { margin: 0; color: #8d98a8; font-size: 12px; }
.attempts-section { padding-bottom: 26px; }.lookup-form { max-width: 620px; margin-bottom: 20px; }.lookup-form label { display: block; margin-bottom: 7px; color: #647187; font-size: 11px; font-weight: 600; }.input-row { display: flex; gap: 8px; }.input-row input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid #dfe4eb; border-radius: 5px; outline: 0; color: var(--navy); background: #fff; font-size: 12px; }.input-row input:focus { border-color: #8f86e9; box-shadow: 0 0 0 3px #7569e815; }.attempts-feedback { margin-bottom: 14px; }.attempts-section .table-container { border-top: 1px solid #eff1f4; padding-top: 16px; }footer { display: flex; justify-content: space-between; max-width: 1160px; margin: 0 auto; padding: 0 24px 25px; color: #9aa4b2; font-size: 10px; }
@media (max-width: 650px) { .topbar { padding: 0 16px; }.environment { display: none; }main { padding: 30px 16px 20px; }.intro { align-items: flex-start; flex-direction: column; gap: 18px; }.intro h1 { font-size: 25px; }.summary-row { grid-template-columns: 1fr 1fr; }.workspace { padding: 17px 14px; }.section-heading { flex-direction: column; }.input-row { align-items: stretch; flex-direction: column; }.input-row .button { width: 100%; }.action-heading, .action-cell { text-align: left; }footer { padding-right: 16px; padding-left: 16px; } }