.api-portal { display: flex; flex-direction: column; height: 100%; padding: 1.2em 1.4em 1.4em; background: var(--app-bg); }
.api-hero > .browser { display: flex; flex-direction: column; }
.api-hero > .browser > .api-portal { flex: 1; }
.api-hero .k-table th, .api-hero .k-table td { white-space: normal; }
.api-hero .k-table .badge, .api-hero .k-table .k-btn { white-space: nowrap; }
.api-hero-key > * { transition: background-color 0.4s; }
.js [data-step="1"] .api-hero-key > *, .js [data-step="2"] .api-hero-key > *, .js [data-step="3"] .api-hero-key > *, .js [data-step="4"] .api-hero-key > *, [data-steps]:not([data-step]) .api-hero-key > * { background: var(--orange-tint); }
.api-hero-key-note { margin-top: 0.9em; }
.api-hero-note { margin-top: auto; }
.api-hero-key-note + .api-hero-note { margin-top: 0.7em; }
.api-hero .ft-code { display: flex; flex-direction: column; }
.api-hero .ft-code .code-body { flex: 1; }
.api-docs { display: grid; background: var(--app-bg); font-size: 12px; }
@media (min-width: 40em) { .api-docs { grid-template-columns: 11em 1fr; } }
.api-docs-nav { display: none; padding: 1.2em 0.8em; border-right: 1px solid var(--app-border); background: var(--card); }
@media (min-width: 40em) { .api-docs-nav { display: grid; align-content: start; gap: 0.15em; } }
.api-docs-nav li { padding: 0.45em 0.8em; border-radius: 0.5em; color: var(--app-text-2); }
.api-docs-nav li.on { font-weight: 600; color: var(--orange-text); background: var(--orange-wash); }
.api-docs-main { padding: 1.2em; min-width: 0; }
.api-docs-title { margin-bottom: 0.7em; font-size: 1.4em; font-weight: 700; letter-spacing: -0.02em; color: var(--app-text); }
.api-eps { display: grid; gap: 0.35em; }
.api-eps li { display: grid; grid-template-columns: auto auto 1fr; gap: 0.8em; align-items: center; padding: 0.5em 0.7em; border-radius: 0.7em; background: var(--card); border: 1px solid var(--app-border); }
.api-eps b { font-family: var(--font-code); font-weight: 600; font-size: 0.95em; color: var(--app-text); white-space: nowrap; }
.api-eps li > span:last-child { color: var(--app-text-3); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-m { flex: none; display: inline-block; min-width: 3.6em; padding: 0.15em 0.5em; border-radius: 0.45em; text-align: center; font-family: var(--font-code); font-size: 0.8em; font-weight: 700; color: var(--blue-text); background: var(--blue-bg); }
.api-m--post { color: var(--green-text); background: var(--green-bg); }
.api-m--patch { color: var(--amber-text); background: var(--amber-bg); }
@media (max-width: 39.99em) { .api-eps li { grid-template-columns: auto 1fr; } .api-eps li > span:last-child { grid-column: 1 / -1; text-align: left; white-space: normal; } }
.api-outcomes > li { padding: 0.85em 0; }
.api-scope { display: grid; gap: 0.5em; }
@media (min-width: 40em) { .api-scope { grid-template-columns: 1fr 1fr; } }
.api-scope > span { display: block; padding: 0.7em 0.85em; border-radius: 0.7em; border: 1px solid var(--app-border); background: var(--card); font-size: 0.88em; line-height: 1.4; color: var(--app-text-3); }
.api-scope > span b { display: block; margin-bottom: 0.15em; color: var(--app-text); }
.api-scope > span.on { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-wash); }
.api-once { margin-top: 0.9em; padding: 0.9em 1em; border-radius: 0.9em; background: var(--green-bg); color: var(--green-text); }
.api-once b { margin-right: 0.4em; }
.api-secret { display: flex; align-items: center; gap: 0.3em; margin-top: 0.6em; padding: 0.5em 0.6em; border-radius: 0.6em; background: var(--card); }
.api-secret i { flex: 1; height: 0.55em; border-radius: 1em; background: var(--app-border); }
.api-secret i:nth-child(odd) { background: var(--ink-faint); opacity: 0.55; }
.api-secret .k-btn { margin-left: 0.5em; }
.js [data-step="2"] .api-create { animation: kPress 0.5s var(--ease-out) both; }
.api-newkey .k-form-foot { margin-top: 0.9em; }
.api-revoked > * { transition: opacity 0.4s var(--ease-smooth); }
.js [data-step="2"] .api-revoked > :not(:last-child), .js [data-step="3"] .api-revoked > :not(:last-child), [data-steps]:not([data-step]) .api-revoked > :not(:last-child) { opacity: 0.5; }
.api-refused { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7em; margin-top: 0.8em; padding: 0.7em 0.9em; border-radius: 0.8em; background: var(--red-bg); color: var(--red-text); }
.api-refused b { font-family: var(--font-code); font-weight: 600; }
.api-refused .badge { margin-left: auto; background: var(--card); }
.page-api .k-toast--stop .k-tick { background: var(--red-text); }
.page-api .k-toast--stop .k-tick::before { content: "!"; }
.page-api .fhero { padding-top: clamp(1.25rem, 1rem + 1.4vw, 2rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.page-api .fhero .crumbs ol { margin-bottom: var(--space-3); }
.page-api .fhero--wide .fhero-grid { gap: var(--space-8); }
.api-hero-copy .fhero-actions { margin-top: var(--space-2); }
.api-hero-copy .fhero-facts { margin-top: var(--space-2); padding-top: var(--space-4); gap: var(--space-3) var(--space-6); }
.api-hero-copy .fhero-facts b { font-size: var(--text-lg); }
@media (min-width: 64em) {
  .api-hero-copy .lede { font-size: var(--text-base); }
  .api-hero-copy .fhero-actions { margin-top: 0; align-self: end; }
  .api-hero-copy .fhero-facts { margin-top: 0; align-self: end; }
}
.page-api .fhero .hero-stage { padding: clamp(0.6rem, 0.4rem + 1vw, 1rem); }
.page-api .fhero .mock-note { margin-top: 0; }
.page-api .jp--row .jp-prob { margin-bottom: calc(var(--space-2) * -1); }
.page-api .jp .body b { color: var(--ink); }
.page-api .jp .body + .body { margin-top: calc(var(--space-1) * -1); }
.page-api .jp-screen .code.ft-code { box-shadow: var(--shadow); }
.page-api .jp-screen .code-body { padding-block: var(--space-4); }
.page-api .jp-stack { max-width: 34rem; }
.jp-screen .api-newkey { max-width: 36rem; }
.jp-screen .api-docs-browser { max-width: 42rem; }
.jp-screen .api-eps li { padding-block: 0.42em; }
.api-send { --a: 0.82fr; --b: 1.18fr; align-items: center; }
.api-call { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.8em; }
.api-call b { font-family: var(--font-code); font-weight: 600; color: var(--app-text); }
.api-entries > li { padding: 0.6em 0.6em; border-radius: 0.6em; }
.api-entries > li.is-pick { background: var(--orange-tint); border-bottom-color: transparent; }
.api-codes { display: grid; }
.api-codes li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.8em; padding: 0.5em 0; border-bottom: 1px solid var(--app-bg-alt); color: var(--app-text-2); }
.api-codes li:first-child { padding-top: 0; }
.api-codes li:last-child { border-bottom: 0; padding-bottom: 0; }
.api-codes b { font-family: var(--font-code); font-weight: 600; font-size: 0.92em; color: var(--app-text); }
@media (max-width: 29.99em) { .api-codes li { grid-template-columns: minmax(0, 1fr) auto; } .api-codes b { grid-column: 1; grid-row: 2; } .api-codes .badge { grid-row: 1 / span 2; grid-column: 2; } }
.api-keys { max-width: 34rem; }
.api-keys .ft-rows > li { flex-wrap: wrap; gap: 0.5em 0.8em; }
.api-keys .ft-rows > li > div { flex: 1 1 12em; }
.api-hash { margin-top: 0.8em; }
.jp-screen .api-mail { max-width: none; }
.jd-body .ft-nots { margin-top: 0; }
.jd-body .ft-more { margin-top: var(--space-6); }
.jd-body .ft-mini-screen { min-height: 8rem; }
.api-hero .k-table tbody th, .api-hero .k-table tbody td { padding-block: 1.05em; }
.jx--side .jp-screen .ft-code .code-body { font-size: 0.72rem; }
.api-entries > li:first-child { padding-top: 0.6em; }
.api-entries > li:last-child { padding-bottom: 0.6em; }
@media (min-width: 60em) { .jp--row .jp-screen .screen.api-keys, .jp--row .jp-screen .screen.api-log, .jp--row .jp-screen .screen.api-queue { font-size: 13px; } }
@media (max-width: 39.99em) {
  .api-hero > .browser { display: none; }
  .api-hero-copy .lede { font-size: var(--text-base); }
}
@media (max-width: 39.99em) {
  .jp-screen .api-eps li > span:last-child { display: none; }
  .api-keys .ft-rows > li > div { flex: 1 1 100%; }
}
@media (min-width: 60em) { .jp-screen .api-log .k-table th, .jp-screen .api-log .k-table td { padding-inline: 0.6em; } }
.jp-screen .api-mail .k-email { width: 100%; }
@media (max-width: 39.99em) {
  .api-nl { white-space: pre; }
  .api-nl::before { content: "\A   "; }
}
@media (max-width: 39.99em) {
  .api-nl--in::before { content: "\A      "; }
  .jx--side .jp-screen .api-yaml .code-body { font-size: 0.64rem; }
  .jp-screen .api-eps li { grid-template-columns: auto auto minmax(0, 1fr); }
  .jp-screen .api-eps li > span:last-child { display: block; grid-column: auto; text-align: right; white-space: nowrap; }
}
.api-made { margin-top: 0.9em; }
.api-made > .api-once, .api-newkey .api-made > .k-form-foot { margin-top: 0; }
.api-made > .k-form-foot { align-self: end; }
.jd-body .ft-mini .screen { --step: 0.03s; }
@media (max-width: 39.99em) {
  .js .api-hero[data-step] .code-bar [data-at], .js .api-hero[data-step] .code-body [data-at] { opacity: 1; transform: none; }
}
@media (min-width: 60em) { .page-api #more-scope .jp-screen > .screen, .page-api #more-log .jp-screen > .screen { font-size: 13.5px; } }