:root { color-scheme: light; font-family: Inter, system-ui, sans-serif; background: #f6f7f9; color: #172033; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #174ea6; }
header { background: #101828; color: white; padding: 1rem 1.5rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
header a { color: white; text-decoration: none; }
header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
header form { margin-left: auto; }
header button { background: transparent; border: 1px solid #98a2b3; color: white; padding: .4rem .7rem; border-radius: .35rem; }
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.card, table { background: white; border: 1px solid #e4e7ec; border-radius: .6rem; box-shadow: 0 1px 2px #1018280d; }
.card { padding: 1rem; }
.metric { font-size: 2rem; font-weight: 700; margin: .25rem 0; }
table { border-collapse: collapse; width: 100%; overflow: hidden; }
th, td { padding: .7rem; text-align: left; border-bottom: 1px solid #eaecf0; vertical-align: top; }
th { color: #475467; font-size: .85rem; }
.muted { color: #667085; }
.badge { display: inline-block; border-radius: 999px; padding: .2rem .55rem; background: #eef2f6; font-size: .8rem; }
.review { background: #fff1d6; color: #7a4c00; }
.failed { background: #fee4e2; color: #b42318; }
.message { margin: 1rem 0; padding: 1rem; border-left: 4px solid #84adff; background: white; }
.message.inbound { border-left-color: #6ce9a6; }
.message.internal { border-left-color: #fdb022; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1.5rem; }
input, select { padding: .55rem; border: 1px solid #d0d5dd; border-radius: .35rem; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } table { display: block; overflow-x: auto; } }