:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0b1020;
    color: #e8edf7;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    background: radial-gradient(circle at top, #17213d 0, #0b1020 46rem);
}

button, input, textarea { font: inherit; }

button {
    border: 1px solid #394765;
    border-radius: .55rem;
    padding: .65rem .9rem;
    color: #e8edf7;
    background: #1a243c;
    cursor: pointer;
}

button:hover:not(:disabled) { background: #24324f; }
button:disabled { cursor: not-allowed; opacity: .55; }
button.primary { border-color: #4f7cff; background: #315fd5; }
button.danger { border-color: #8f4650; background: #4a2329; }

a { color: #8eb1ff; }

.shell {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

h1, h2 { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: 1.35rem; }

.eyebrow {
    margin: 0 0 .35rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #8eb1ff;
    font-weight: 700;
    font-size: .78rem;
}

.muted { color: #aeb9cd; }
.endpoint-summary { display: grid; gap: .4rem; text-align: right; }

code {
    border: 1px solid #35415c;
    border-radius: .35rem;
    padding: .12rem .35rem;
    background: #11182a;
    color: #c9d8ff;
}

.tabs {
    display: flex;
    gap: .45rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #293550;
}

.tabs button {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: .45rem .45rem 0 0;
    background: transparent;
}

.tabs button.active {
    border-bottom-color: #6f92ff;
    background: #17213a;
}

.card {
    border: 1px solid #2a3651;
    border-radius: .9rem;
    padding: 1.25rem;
    background: rgba(15, 22, 39, .94);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
}

.stack { display: grid; gap: 1.15rem; }

label {
    display: grid;
    gap: .45rem;
    color: #d6deec;
    font-weight: 650;
}

input, textarea {
    width: 100%;
    border: 1px solid #34415e;
    border-radius: .5rem;
    padding: .7rem .8rem;
    background: #0c1323;
    color: #edf2fb;
}

textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
input:focus, textarea:focus { outline: 2px solid #5077df; outline-offset: 1px; }

.actions, .settings-toolbar { display: flex; gap: .65rem; flex-wrap: wrap; }

.status {
    border: 1px solid #3b4966;
    border-radius: .55rem;
    padding: .75rem .85rem;
}
.status.success { border-color: #356e58; background: #132d25; }
.status.error { border-color: #8c424c; background: #351a1f; }

.response-panel {
    border: 1px solid #2c3852;
    border-radius: .6rem;
    overflow: hidden;
}

.response-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    background: #131c30;
}

.headers {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) 1fr;
    margin: 0;
}
.headers dt, .headers dd { margin: 0; padding: .45rem .75rem; border-top: 1px solid #26314a; overflow-wrap: anywhere; }
.headers dt { color: #9fb0ca; }

.response-body {
    margin: 0;
    padding: .8rem;
    border-top: 1px solid #26314a;
    background: #0b1221;
    color: #dbe6fb;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.notice {
    margin: 0;
    border-left: 3px solid #c79a45;
    padding: .6rem .8rem;
    background: #2b2416;
    color: #e6d4ad;
}

.settings-table-wrap { overflow-x: auto; }
.settings-table { width: 100%; border-collapse: collapse; }
.settings-table th { text-align: left; color: #9facbf; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.settings-table th, .settings-table td { padding: .45rem; border-bottom: 1px solid #26314a; }
.settings-table th:last-child, .settings-table td:last-child { width: 1%; white-space: nowrap; }

@media (max-width: 760px) {
    .page-header { align-items: flex-start; flex-direction: column; }
    .endpoint-summary { text-align: left; }
    .headers { grid-template-columns: 1fr; }
    .headers dd { padding-top: 0; }
}