.api-portal {
  --api-bg: #f8fafc;
  --api-panel: #fff;
  --api-text: #17212b;
  --api-muted: #485569;
  --api-border: #d7dfe7;
  --api-blue: #1d4ed8;
  --api-green: #067647;
  background: var(--api-bg);
  color: var(--api-text);
  min-height: 65vh;
}

.api-portal--dark {
  --api-bg: #101416;
  --api-panel: #191f22;
  --api-text: #f4f7f6;
  --api-muted: #bdc9c6;
  --api-border: #3b484a;
  --api-green: #8ce0a9;
}

.api-portal--plans, .api-portal--console { font-family: Inter, system-ui, sans-serif; }
.api-portal--plans.api-portal--dark { --api-bg: #09090b; --api-panel: #0f0f10; --api-border: #27272a; --api-green: #cf0; }
.api-portal--plans h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
.api-portal--plans .api-portal__intro p { color: var(--api-muted); font-size: .875rem; }
.api-portal [hidden] { display: none !important; }
.api-portal__inner { max-width: 76rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem); }
.api-portal h1, .api-portal h2 { color: var(--api-text); font-weight: 700; line-height: 1.15; }
.api-portal h1 { font-size: clamp(2.25rem, 4.5vw, 4.25rem); margin: .4rem 0 1rem; }
.api-portal h2 { font-size: clamp(1.25rem, 2.25vw, 1.75rem); margin: 0 0 .7rem; }
.api-portal p { margin: .65rem 0; }
.api-portal__eyebrow { color: var(--api-green); font-size: .875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.api-portal__lede { color: var(--api-muted); font-size: 1.125rem; max-width: 40ch; }
.api-portal__hero { display: grid; gap: 2rem; align-items: start; }
.api-portal__intro { margin-bottom: 2rem; }
.api-portal__steps { list-style: decimal inside; margin: 1.25rem 0; }
.api-portal__steps li { margin-bottom: .55rem; }
.api-portal__steps li::marker { color: var(--api-green); font-weight: 700; }
.api-portal__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.api-portal__navigation--top { justify-content: flex-end; margin: 0 0 1.25rem; }
.api-portal .btn-outline { color: var(--api-text); border-color: var(--api-border); }
.api-portal .btn-outline:hover:not(:disabled) { background: var(--api-text); color: var(--api-bg); }
.api-portal .btn.api-portal__blue { color: #fff; background: var(--api-blue); border-color: var(--api-blue); }
.api-portal .btn.api-portal__blue:hover { background: #1e40af; border-color: #1e40af; }
.api-portal .btn:disabled { color: var(--api-muted); cursor: default; opacity: .75; }
.api-portal__section { margin-top: 1.5rem; scroll-margin-top: 5rem; }
.api-portal__panel, .api-portal__dialog { position: relative; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--api-border); border-radius: .5rem; background: var(--api-panel); }
.api-portal__panel > .btn { margin-top: .5rem; }
.api-portal__panel > [data-api-request-status] { margin-top: .75rem; }
.api-portal__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.25rem; }
.api-portal__tabs button { color: var(--api-muted); padding: .6rem .75rem; border: 1px solid var(--api-border); border-radius: .5rem; text-align: left; font-weight: 600; }
.api-portal__tabs button[aria-selected="true"] { border-color: var(--api-green); color: var(--api-green); }
.api-portal__plans { display: grid; gap: 1.125rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.api-portal__plan { display: grid; align-content: space-between; gap: 1.25rem; min-width: 0; border-radius: .875rem; padding-top: 3.25rem; }
.api-portal__plan-actions > .btn, .api-portal__plan-actions form > .btn, .api-portal__plan-actions [data-api-request-status] > .btn { width: 100%; }
.api-portal__plan-actions > .btn { line-height: 1.15; }
.api-portal--dark .api-portal__plan { grid-template-rows: 1fr auto; }
.api-portal--dark .api-portal__plan-actions { display: grid; grid-template-rows: auto 5rem; align-items: start; }
.api-portal__pill { position: absolute; top: .85rem; right: .85rem; border-radius: 999px; padding: .2rem .65rem; background: #e5e7eb; color: #374151; font-weight: 650; font-size: .75rem; }
.api-portal__pill--approval { background: #fee2e2; color: #991b1b; }
.api-portal__pill--approved { background: #dcfce7; color: #166534; }
.api-portal__plan--review { border-style: dashed; }
.api-portal__plan-content h2 { margin-bottom: .25rem; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.01em; }
.api-portal .api-portal__plan-subtitle { color: var(--api-muted); margin-top: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.api-portal__plan-price { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.15; }
.api-portal--dark .api-portal__plan-price { color: var(--api-green); }
.api-portal__plan-price small, .api-portal__tier small { font: 400 .8rem/1.35 Inter, sans-serif; color: var(--api-muted); }
.api-portal__tiers { display: grid; gap: .45rem; margin: 1rem 0; }
.api-portal__tiers label { cursor: pointer; }
.api-portal__tier {
  display: flex; justify-content: space-between; align-items: center; gap: .65rem;
  padding: .55rem .7rem; border: 1px solid var(--api-border); border-radius: .625rem; background: var(--api-panel);
}
.api-portal__tier > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.api-portal__tier small { display: block; }
.api-portal__tier-price { text-align: right; white-space: nowrap; font-weight: 700; }
.api-portal__tiers input:checked + .api-portal__tier { border-color: var(--api-blue); background: #eef4ff; }
.api-portal__tiers input:focus-visible + .api-portal__tier { outline: 2px solid var(--api-blue); outline-offset: 2px; }
.api-portal__plan-features { display: grid; gap: .5rem; margin-top: 1rem; color: var(--api-muted); font-size: .875rem; }
.api-portal__plan-features li { display: flex; align-items: baseline; gap: .45rem; }
.api-portal__plan-features li::before { content: "✓"; color: var(--api-green); }
.api-portal__plan-fineprint { display: flex; align-items: baseline; gap: .45rem; color: var(--api-muted); font-size: .8rem; }
.api-portal__plan-fineprint::before { content: "●"; color: var(--api-green); }
.api-portal__note { color: var(--api-muted); font-size: .875rem; }
.api-portal__preview { min-width: 0; scroll-margin-top: 5rem; }
.api-portal__search { display: flex; gap: .5rem; margin: 1rem 0; }
.api-portal input:not([type="checkbox"], [type="hidden"]), .api-portal select {
  min-width: 0; width: 100%; background: var(--api-panel); color: var(--api-text);
  border: 1px solid var(--api-border); border-radius: .5rem; padding: .65rem .75rem;
}
.api-portal__console-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; }
.api-portal__console-heading h1 { margin: 0; font: 700 clamp(1.85rem, 4vw, 2.5rem)/1.15 Gustavo, Inter, sans-serif; }
.api-portal__console-heading .api-portal__actions { margin-top: 0; }
.api-portal__usage { margin-bottom: 1rem; border-radius: 1rem; }
.api-portal .api-portal__usage p { margin: 0 0 .9rem; color: var(--api-muted); }
.api-portal__usage strong { display: block; color: var(--api-text); }
.api-portal__usage dl { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.api-portal__usage dl > div { flex: 1 0 7.5rem; }
.api-portal__usage dt, .api-portal__usage-label { color: var(--api-muted); }
.api-portal__usage dd { font-size: clamp(1.25rem, 2.8vw, 1.75rem); font-weight: 700; }
.api-portal__usage-label { display: flex; justify-content: space-between; margin-top: 1rem; }
.api-portal__usage progress { display: block; width: 100%; height: .5rem; margin-top: .35rem; accent-color: var(--api-text); }
.api-portal__console { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.api-portal__endpoints { display: grid; gap: .5rem; margin: 0; }
.api-portal__endpoints button, .api-portal__console-pane { background: #f3f4f6; border-radius: .5rem; }
.api-portal__endpoints button { min-width: 0; padding: .8rem 1rem; border: 0; color: var(--api-text); }
.api-portal__endpoints button[aria-selected="true"] { color: var(--api-text); box-shadow: inset 0 0 0 2px #cf0; }
.api-portal__endpoints strong { display: flex; align-items: center; gap: .45rem; }
.api-portal__endpoints strong span { padding: .1rem .4rem; border-radius: .3rem; background: var(--api-panel); font-size: .7rem; }
.api-portal__endpoints code { display: block; margin-top: .2rem; font-size: .75rem; color: var(--api-muted); }
.api-portal__console-panes, .api-portal__recognition-controls { min-width: 0; }
.api-portal__console-pad, .api-portal__recognition-photos, .api-portal__recognition-controls { padding: 1rem; }
.api-portal__console-pane .api-portal__preview { background: transparent; border: 0; padding: 1rem; }
.api-portal__console-pane .api-portal__search { background: var(--api-panel); border-radius: .5rem; margin-top: 0; padding: .35rem .45rem .35rem .75rem; align-items: center; flex-wrap: nowrap; }
.api-portal__console-pane .api-portal__search input { border: 0; }
.api-portal__console-pane .api-portal__search svg, .api-portal__console-pane .api-portal__search button { flex: none; }
.api-portal__console-pane .api-portal__key { padding: .5rem .7rem; background: var(--api-panel); border-radius: .5rem; }
.api-portal__recognition { display: grid; grid-template-columns: minmax(12rem, .85fr) minmax(0, 1.65fr); }
.api-portal__card-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.api-portal__card-slot { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 7; overflow: hidden; background: var(--api-panel); border-radius: .4rem; color: var(--api-muted); }
.api-portal__card-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.api-portal__sample-rotate, .api-portal__sample-picker { display: flex; flex-wrap: wrap; gap: .55rem; margin: .7rem 0 1rem; }
.api-portal__sample-picker button { border-radius: .4rem; background: var(--api-panel); overflow: hidden; }
.api-portal__sample-picker button[aria-pressed="true"] { outline: 2px solid #cf0; }
.api-portal__sample-picker img { width: 3.375rem; height: 4.75rem; object-fit: contain; }
.api-portal__match-status { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin: 1rem 0 .5rem; }
.api-portal__match-status strong { color: var(--api-green); }
.api-portal__match-status span, .api-portal__sample-label, .api-portal__card-details dt { color: var(--api-muted); font-size: .85rem; }
.api-portal__sample-label { margin-top: 1rem; font-weight: 700; }
.api-portal .api-portal__sample-title { margin: .25rem 0 .7rem; font-weight: 700; }
.api-portal__card-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .45rem; margin-top: .45rem; }
.api-portal__card-details > div { padding: .45rem .65rem; border-radius: .4rem; background: var(--api-panel); }
.api-portal__card-details dd { font-weight: 600; }
.api-portal__export-banner { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: .5rem; background: #e0ecff; }
.api-portal__export-banner strong { padding: .2rem .5rem; border-radius: 1rem; background: var(--api-blue); color: #fff; font-size: .7rem; text-transform: uppercase; }
.api-portal__sample-table { border-radius: .5rem; background: var(--api-panel); }
.api-portal__sample-table th { background: #e5e7eb; }
.api-portal__sample-table th, .api-portal__sample-table td { white-space: nowrap; }
.api-portal__sample-table img { max-width: none; object-fit: contain; }
.api-portal__table { overflow-x: auto; }
.api-portal__table th, .api-portal__table td { border-color: var(--api-border); color: var(--api-text); }
.api-portal__key { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.api-portal__key code { overflow-wrap: anywhere; }
.api-portal__dialog { width: min(38rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); margin: auto; overflow: auto; color: var(--api-text); }
.api-portal__dialog::backdrop { background: rgb(15 23 42 / 62%); }
.api-portal__dialog h2 { padding-right: 2rem; }
.api-portal__dialog-close { position: absolute; right: .5rem; top: .5rem; }
.api-portal__dialog form { display: grid; gap: .45rem; }
.api-portal__dialog label { font-weight: 600; }
.api-portal__fields { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.api-portal__checkbox { display: flex; align-items: start; gap: .6rem; font-size: .9rem; margin: .6rem 0 0; }
.api-portal__checkbox input { margin-top: .25rem; accent-color: var(--api-green); }
.api-portal__error { color: #b91c1c; }
.api-portal__error:empty { display: none; }
.api-portal__notice, .api-portal pre { padding: .8rem; background: var(--api-panel); border: 1px solid var(--api-border); border-radius: .5rem; overflow-x: auto; }
.api-portal a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }

@media (min-width: 54rem) {
  .api-portal__hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

@media (max-width: 54rem) {
  .api-portal__console, .api-portal__recognition { grid-template-columns: minmax(0, 1fr); }
  .api-portal__endpoints { display: flex; flex-wrap: nowrap; overflow-x: auto; }
  .api-portal__endpoints button { flex: 1 0 auto; }
  .api-portal__card-slots { max-width: 22rem; }
  .api-portal--light .api-portal__plans { grid-template-columns: 1fr; }
  .api-portal--dark .api-portal__plans { overflow-x: auto; grid-template-columns: repeat(3, minmax(12rem, 1fr)); }
}

@media (max-width: 32rem) {
  .api-portal__fields { grid-template-columns: 1fr; }
  .api-portal__search { flex-wrap: wrap; }
}