:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #282828;
  background: #f4f5f6;
  font-synthesis: none;
}
* {box-sizing: border-box;}
body {margin: 0; line-height: 1.5;}
button, input {font: inherit;}
button {cursor: pointer;}
button:disabled {opacity: .65; cursor: wait;}
button:focus-visible, input:focus-visible {outline: 3px solid #957400; outline-offset: 3px;}
.shell {width: min(1080px, calc(100% - 40px)); margin: 0 auto;}
.topbar {background: #282828; border-top: 5px solid #ffc800; color: white;}
.topbar-inner {min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.brand {display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 800; letter-spacing: -.7px;}
.brand-mark {width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; background: #ffc800; color: #282828; font-size: 24px;}
.brand-blox {color: #ffc800;}
.lab-flag {padding: 7px 11px; border: 1px solid #696969; border-radius: 99px; font-size: 11px; letter-spacing: 1.2px; font-weight: 800;}
.intro {padding-top: 51px; padding-bottom: 24px;}
.eyebrow {color: #8a6a00; font-size: 11px; letter-spacing: 1.5px; font-weight: 800; display: flex; gap: 9px; align-items: center;}
.tiny-dot {display: inline-block; background: #ffc800; height: 7px; width: 7px; border-radius: 50%;}
h1 {font-size: clamp(34px, 6vw, 52px); line-height: 1.1; letter-spacing: -2px; margin: 13px 0 15px;}
h1 span {color: #997500;}
.intro > p {margin: 0; max-width: 740px; color: #5d636b; font-size: 16px;}
.notice {display: flex; gap: 13px; align-items: start; padding: 16px 19px; background: #fff7d9; border: 1px solid #efd36f; border-radius: 12px; margin-bottom: 24px;}
.notice-icon {width: 23px; height: 23px; flex: 0 0 23px; border-radius: 100%; background: #282828; color: #ffc800; font-weight: 700; text-align: center; line-height: 23px;}
.notice p {font-size: 13px; margin: 0; color: #5b4e22;}
.columns {display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px;}
.panel {background: #fff; border: 1px solid #dce0e3; border-radius: 14px; padding: 27px 27px 25px; box-shadow: 0 7px 24px rgb(17 24 39 / 3%);}
.section-top {display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;}
.section-kicker {color: #947100; letter-spacing: 1.2px; font-size: 11px; font-weight: 800;}
h2 {font-size: 22px; line-height: 1.2; margin: 7px 0 0; letter-spacing: -.6px;}
.panel-description {color: #656b71; font-size: 13px; margin: 18px 0 23px; min-height: 38px;}
.status {display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; background: #f0f2f4; color: #5b6571; border-radius: 100px; padding: 7px 11px; font-size: 11px; font-weight: 800;}
.status[data-state="success"] {background: #dff4e8; color: #17613e;}
.status[data-state="error"] {background: #fde9e9; color: #9c2929;}
.status[data-state="pending"] {background: #fff1cb; color: #8a6500;}
.state-dot {width: 7px; height: 7px; border-radius: 50%; background: currentColor;}
.endpoint {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 11px 0; border-top: 1px solid #e8e9ec;}
.endpoint span, .field-label {font-size: 10px; letter-spacing: 1px; color: #6c737a; font-weight: 800;}
.endpoint code {font-size: 12px; color: #252525; overflow-wrap: anywhere;}
.button {display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 44px; border: 1px solid transparent; border-radius: 8px; padding: 0 17px; font-size: 13px; font-weight: 800; transition: filter .15s, transform .15s;}
.button:not(:disabled):hover {filter: brightness(.95); transform: translateY(-1px);}
.button-primary {background: #ffc800; color: #282828; width: 100%; margin-top: 17px;}
.button-dark {background: #282828; color: #fff;}
.button-outline {background: #fff; color: #282828; border-color: #bfc5ca;}
.field-label {display: block; margin-bottom: 9px;}
input[type="text"] {height: 45px; padding: 0 12px; width: 100%; border: 1px solid #cbd0d6; border-radius: 8px; color: #282828; outline-offset: 2px;}
.actions {display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px;}
.fine-print {font-size: 11px; color: #767b81; margin: 17px 0 0;}
.fine-print code {color: #383838;}
.result-panel {margin-bottom: 22px;}
.result-top {align-items: center;}
.meta-row {display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; font-size: 12px; color: #6b7179; padding: 17px 0 11px;}
.code-output {margin: 0; min-height: 170px; max-height: 370px; overflow: auto; border: 1px solid #363a40; background: #282828; color: #f3f4f6; border-radius: 10px; padding: 20px; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;}
footer {border-top: 1px solid #dce0e3; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 17px 0 35px; color: #7b8086; font-size: 11px;}
@media(max-width: 840px) {.columns {grid-template-columns: 1fr;} .panel-description {min-height: 0;}}
@media(max-width: 550px) {.shell {width: min(100% - 24px, 1080px);} .topbar-inner {min-height: 64px;} .brand {font-size: 20px;} .lab-flag {font-size: 9px; padding: 7px;} .intro {padding-top: 32px;} .panel {padding: 20px;} .section-top {flex-wrap: wrap;} .actions .button {flex: 1 1 100%;} footer {flex-direction: column;}}
/* D.4B: selecao de modo fetch, sem alterar a interface D.2. */
.input {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 6px 0 10px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #282828;
  font: inherit;
}
.input:focus-visible { outline: 2px solid #c39100; outline-offset: 2px; }