* {
    box-sizing:border-box
}

body {
    margin:0;
    background:#f5f7fa;
    color:#172337;
    font:15px/1.5 system-ui,-apple-system,sans-serif
}

a {
    color:#2261bd;
    text-decoration:none
}

a:hover {
    text-decoration:underline
}

button,input,select,textarea {
    font:inherit
}

header {
    background:#122238;
    color:#fff;
    padding:18px 5%;
    display:flex;
    align-items:center;
    gap:32px
}

header strong {
    font-size:20px;
    letter-spacing:-.7px
}

header small {
    font-size:11px;
    font-weight:500;
    background:#29425e;
    border-radius:5px;
    padding:3px 7px;
    margin-left:8px;
    letter-spacing:1px
}

nav {
    display:flex;
    gap:22px;
    flex:1
}

nav a {
    color:#c1cede
}

nav a[aria-current=page] {
    color:white;
    font-weight:700
}

main {
    max-width:1180px;
    margin:36px auto;
    padding:0 24px
}

.heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px
}

h1 {
    font-size:28px;
    letter-spacing:-1px;
    margin:0 0 5px
}

h2 {
    font-size:19px;
    margin:0 0 18px
}

p {
    margin:0 0 18px
}

.muted {
    color:#66748a;
    font-size:14px
}

.card {
    background:white;
    border:1px solid #dfe5ed;
    border-radius:12px;
    padding:24px;
    margin-bottom:22px;
    box-shadow:0 3px 10px #17233704
}

.button,button {
    display:inline-block;
    padding:10px 17px;
    border:1px solid transparent;
    border-radius:7px;
    background:#225fbb;
    color:white;
    cursor:pointer;
    font-weight:600;
    font-size:14px
}

.button:hover,button:hover {
    background:#194d9c;
    text-decoration:none
}

.secondary {
    background:white;
    color:#30435c;
    border-color:#d1dae5
}

.secondary:hover {
    background:#edf2f8
}

.danger {
    background:#ab3c3c
}

.link-button {
    background:transparent;
    padding:0;
    color:#d1dbea
}

.filters {
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:14px
}

.field {
    flex:1;
    min-width:140px
}

label {
    display:block;
    font-size:13px;
    font-weight:600;
    margin:0 0 6px
}

input,select,textarea {
    width:100%;
    padding:10px 12px;
    border:1px solid #cad4e0;
    border-radius:6px;
    background:white;
    color:#182a43
}

input:focus,select:focus,textarea:focus {
    outline:2px solid #b9d2f8;
    border-color:#2261bd
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.actions {
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:24px
}

.alert {
    padding:15px 18px;
    border-radius:8px;
    background:#eaf6ef;
    color:#256443;
    border:1px solid #bbdfc9;
    margin-bottom:20px
}

.alert.error {
    background:#fff0ef;
    border-color:#ecc6c2;
    color:#923833
}

.notice {
    background:#fff8e5;
    border:1px solid #e8d79d;
    color:#755723;
    border-radius:8px;
    padding:16px;
    margin:16px 0
}

.table-wrap {
    overflow:auto
}

table {
    width:100%;
    border-collapse:collapse;
    text-align:left
}

th {
    font-size:11px;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:#738096;
    padding:13px 12px;
    background:#f7f9fc;
    white-space:nowrap
}

td {
    padding:16px 12px;
    border-top:1px solid #e8edf3;
    font-size:14px
}

td small {
    display:block;
    color:#768398
}

.badge {
    display:inline-block;
    border-radius:5px;
    padding:4px 8px;
    font-size:12px;
    font-weight:650;
    white-space:nowrap
}

.accepted {
    background:#e8f6ee;
    color:#26714a
}

.failed {
    background:#fceceb;
    color:#9e3838
}

.unknown {
    background:#fff3d9;
    color:#8b6418
}

.sending {
    background:#e9f0fc;
    color:#315d9d
}

.empty {
    text-align:center;
    padding:55px 20px;
    color:#738096
}

.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:18px;
    font-size:13px
}

.details {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

dl {
    margin:0
}

dt {
    color:#6e7b8f;
    font-size:12px;
    margin-bottom:4px
}

dd {
    margin:0 0 18px;
    overflow-wrap:anywhere
}

pre {
    background:#f5f7fb;
    padding:18px;
    border:1px solid #e0e7f0;
    border-radius:7px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:13px;
    max-height:420px;
    overflow:auto
}

.token {
    font-size:15px;
    color:#1c583c
}

.login {
    max-width:440px;
    margin:80px auto
}

.login .field {
    margin-bottom:18px
}

.login button {
    width:100%
}

.login-brand {
    font-size:25px;
    font-weight:700;
    letter-spacing:-1px;
    margin-bottom:30px
}

.help {
    font-size:12px;
    color:#758298;
    margin:6px 0 0
}

.nowrap {
    white-space:nowrap
}

@media(max-width:700px) {
    header {
    gap:18px;
    padding:15px 20px;
    flex-wrap:wrap
}

header small {
    display:none
}

main {
    padding:0 16px;
    margin-top:24px
}

.heading {
    align-items:start;
    flex-direction:column
}

.form-grid,.details {
    grid-template-columns:1fr
}

.card {
    padding:18px
}

.login {
    margin:40px auto
}

.filters .field {
    min-width:100%;
    
}

nav {
    gap:15px
}


}



.copy-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.copy-block { margin: 20px 0; }
.copy-block pre { margin: 10px 0 0; }
.copy-feedback { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 8px; background: #122238; color: #fff; box-shadow: 0 4px 20px #17233726; z-index: 5; }
.copy-feedback:empty { display: none; }
.integration-steps { padding-left: 22px; }
.integration-steps li { margin-bottom: 8px; }
summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 700px) { .copy-toolbar { flex-wrap: wrap; } }