/* YalleryLabs console — dashboard, login and docs.
 *
 * Tokens are the landing's, unchanged: the two surfaces have to read as one product.
 * Layout is fluid rather than stepped — clamp() and auto-fit — so the whole file holds
 * exactly two media queries, both marked where they sit. */

:root {
  --bg: #07060d;
  --bg-deep: #05040a;
  --ink: #f4f2ff;
  --ink-72: rgba(244, 242, 255, 0.72);
  --ink-70: rgba(244, 242, 255, 0.7);
  --ink-66: rgba(244, 242, 255, 0.66);
  --ink-60: rgba(244, 242, 255, 0.6);
  --ink-55: rgba(244, 242, 255, 0.55);
  --ink-50: rgba(244, 242, 255, 0.5);
  --ink-45: rgba(244, 242, 255, 0.45);
  --ink-42: rgba(244, 242, 255, 0.42);
  --ink-35: rgba(244, 242, 255, 0.35);
  --on-accent: #0b0714;
  --cyan: #2de2e6;
  --violet: #8b5cf6;
  --magenta: #e64fd0;
  --code-ink: #c4bae4;
  --code-ink-dim: #b6acd8;

  --line: rgba(255, 255, 255, 0.08);
  --line-11: rgba(255, 255, 255, 0.11);
  --line-12: rgba(255, 255, 255, 0.12);
  --line-13: rgba(255, 255, 255, 0.13);
  --line-14: rgba(255, 255, 255, 0.14);
  --line-16: rgba(255, 255, 255, 0.16);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-05: rgba(255, 255, 255, 0.05);
  --field: rgba(7, 6, 13, 0.6);

  --grad-primary: linear-gradient(120deg, #2de2e6, #8b5cf6 60%, #e64fd0);
  --grad-text: linear-gradient(96deg, #2de2e6, #8b5cf6 42%, #e64fd0);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Sora, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pad-x: clamp(16px, 3vw, 32px);

  /* Written by a ResizeObserver on the sticky chrome. Sticky offsets must never be
     hardcoded: the header wraps to two rows on a narrow screen and every fixed top:56px
     silently points at the wrong place. */
  --yl-chrome: 152px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--violet); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
img { max-width: 100%; }
input, select, textarea, button { font-family: inherit; }
::selection { background: var(--violet); color: #fff; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.mono { font-family: var(--mono); }
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- page frame ---------- */

.page {
  min-height: 100vh;
  background:
    radial-gradient(900px 620px at 12% -6%, rgba(139, 92, 246, 0.4), transparent 62%),
    radial-gradient(760px 560px at 88% 4%, rgba(230, 79, 208, 0.22), transparent 60%),
    var(--bg);
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px) var(--pad-x) 80px;
}

/* ---------- chrome: header + tabs in one sticky box ---------- */

.chrome { position: sticky; top: 0; z-index: 60; }

.topbar {
  backdrop-filter: blur(18px);
  background: rgba(7, 6, 13, 0.74);
  border-bottom: 1px solid var(--line);
  padding: 13px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.lockup { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.lockup:hover { color: var(--ink); }
.lockup img { height: 30px; width: auto; display: block; }
.lockup__name { font-size: 18.5px; font-weight: 700; letter-spacing: -0.025em; }
.lockup__name span { font-weight: 300; color: var(--ink-70); }
.lockup__badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--cyan);
  border: 1px solid rgba(45, 226, 230, 0.4);
  border-radius: 5px;
  padding: 2px 6px;
}

.spacer { flex: 1 1 auto; }

.wallet { display: flex; flex-direction: column; line-height: 1.1; }
.wallet__cap { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-45); }
.wallet__sum { font-size: 17px; font-weight: 700; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-primary);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 13px;
}

.tabs {
  background: rgba(7, 6, 13, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--pad-x);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 13px 14px;
  font-size: 13.5px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-55);
  cursor: pointer;
  white-space: nowrap;
}
.tab[aria-selected='true'] { border-bottom-color: var(--cyan); color: var(--ink); font-weight: 600; }

/* Shown only when the balance is low AND nothing is set to fix it — see app.js. */
.lowbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px var(--pad-x);
  border-bottom: 1px solid rgba(230, 79, 208, 0.28);
  background: rgba(230, 79, 208, 0.09);
  font-size: 13.5px;
  color: var(--ink-72);
}
.lowbar__x {
  border: 0;
  background: none;
  color: var(--ink-40);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.lowbar__x:hover {
  color: var(--ink);
}

.lowbar__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--magenta);
  animation: ylPulse 1.8s ease-in-out infinite;
}

/* A select, not a row of buttons: five languages in a row would take more of the header
   than the navigation does. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-12);
  border-radius: 9px;
  padding: 0 10px 0 9px;
  color: var(--ink-60);
}

.lang:focus-within {
  border-color: rgba(45, 226, 230, 0.5);
  color: var(--ink);
}

.lang__icon {
  flex: 0 0 auto;
  opacity: 0.75;
}

.lang select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  color: var(--ink-70);
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 8px 14px 8px 0;
  cursor: pointer;
  /* the caret, drawn rather than left to the platform so it matches on every OS */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 4px top 55%, right 0px top 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.lang select:focus { outline: none; color: var(--ink); }

/* The list itself is drawn by the OS, so it needs its own colours to stay readable. */
.lang select option {
  background: #14111f;
  color: #f4f2ff;
}


.btn--sm {
  padding: 9px 15px;
  font-size: 13.5px;
  border-radius: 10px;
}

.btn--sm.btn--primary {
  box-shadow: var(--shadow-btn);
}

.btn--outline {
  border: 1px solid var(--line-14);
  background: none;
  color: var(--ink);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
}

/* ---------- buttons and fields ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn--primary { background: var(--grad-primary); color: var(--on-accent); box-shadow: 0 8px 26px rgba(139, 92, 246, 0.42); }
.btn--primary:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn--ghost { border: 1px solid var(--line-14); background: var(--surface); color: var(--ink); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.btn--danger { border: 1px solid rgba(230, 79, 208, 0.4); background: none; color: var(--magenta); }
.btn--danger:hover { background: rgba(230, 79, 208, 0.1); color: var(--magenta); }
.btn--sm { padding: 8px 12px; font-size: 12.5px; border-radius: 10px; }
.btn--wide { width: 100%; padding: 15px; border-radius: 12px; font-size: 14.5px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.field { display: block; margin-bottom: 14px; }
.field__label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-72);
  margin-bottom: 7px;
}
.field__label--mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-50);
  font-weight: 400;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line-13);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--violet);
  background: var(--field);
  outline: none;
}
.field__hint { margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--ink-45); }
.field--pw { position: relative; }
.field--pw input { padding-right: 46px; }
.field__eye {
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-50);
  cursor: pointer;
}
.field__eye:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

.err {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--magenta);
}

/* ---------- login ---------- */

.auth { display: flex; flex-wrap: wrap; min-height: 100vh; }

.auth__form {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 4vw, 56px);
}
.auth__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.auth__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth__card { width: 100%; max-width: 392px; margin-inline: auto; }
.auth h1 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.03em; }
.auth__sub { margin: 8px 0 26px; font-size: 14.5px; line-height: 1.55; color: rgba(244, 242, 255, 0.58); }
.auth__switch { margin-top: 18px; font-size: 13.5px; color: var(--ink-60); text-align: center; }
.auth__switch button {
  border: 0; background: none; padding: 0;
  font-size: 13.5px; font-weight: 600; color: var(--cyan); cursor: pointer;
}
.auth__foot {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-35);
  padding-top: 22px;
}
.auth__foot a { color: var(--ink-35); }
.auth__foot a:hover { color: var(--cyan); }

.auth__side {
  position: relative;
  flex: 1 1 420px;
  overflow: hidden;
  background: var(--bg-deep);
  min-height: 440px;
}
/* Deliberate overscan: rotated inside a landscape box, a tight collage leaves black
   wedges in the corners the moment the panel stacks. */
.collage {
  position: absolute;
  top: -32%; left: -14%;
  width: 136%; height: 172%;
  display: flex;
  gap: 18px;
  transform: rotate(-9deg);
}
.collage__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 18px; }
.collage__col:nth-child(1) { padding-top: 6%; }
.collage__col:nth-child(3) { padding-top: 12%; }
.collage img { width: 100%; object-fit: cover; border-radius: 16px; display: block; }

.auth__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 82% 8%, rgba(139, 92, 246, 0.34), transparent 70%),
    radial-gradient(520px 360px at 12% 40%, rgba(45, 226, 230, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(5, 4, 10, 0.34), rgba(5, 4, 10, 0.12) 34%, rgba(5, 4, 10, 0.86) 76%, #05040a);
}
.auth__pitch {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(28px, 3.4vw, 48px);
}
.auth__pitch h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.auth__pitch p { margin-top: 12px; font-weight: 300; font-size: clamp(15px, 1.7vw, 19px); color: rgba(244, 242, 255, 0.82); }

/* Only drawn when a Google client id is configured — an "or" above nothing reads as a
   broken page. */
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  font-size: 12px;
  color: var(--ink-42);
}
.or::before, .or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-12);
}
[data-google] { display: flex; justify-content: center; min-height: 0; }

/* ---------- cards, sections, tables ---------- */

.card {
  border: 1px solid var(--line-11);
  border-radius: 18px;
  background: var(--surface);
  padding: 20px;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-45);
}
.section-title { font-size: 17px; font-weight: 600; }
.row-gap { display: flex; flex-wrap: wrap; gap: 16px; }
.row-gap > * { flex: 1 1 300px; min-width: 0; }
.stack { display: grid; gap: 16px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: 14px;
}
.tile { border: 1px solid var(--line-11); border-radius: 18px; background: var(--surface); padding: 20px; }
.tile__value { margin-top: 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.tile__note { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-50); }
.tile__value--off { color: var(--ink-50); }

.balance-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.balance-hero__sum { font-size: clamp(38px, 5.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.balance-hero__note { margin-top: 10px; font-size: 13.5px; color: var(--ink-55); }
.balance-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.grid-table { border: 1px solid var(--line-11); border-radius: 14px; overflow: hidden; }
.grid-row {
  display: grid;
  gap: clamp(6px, 1.4vw, 14px);
  padding: 13px clamp(12px, 1.6vw, 18px);
  font-size: clamp(11px, 1.4vw, 13.5px);
  align-items: center;
  border-top: 1px solid var(--line);
}
.grid-row > *:not(:first-child) { text-align: right; }
.grid-head {
  border-top: 0;
  background: var(--surface-05);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-45);
  padding: 11px clamp(12px, 1.6vw, 18px);
}
.grid-row--total { border-top: 1px solid var(--line-14); background: var(--surface); font-weight: 600; }
.num { font-family: var(--mono); }
.num--in { color: var(--cyan); }
.num--out { color: var(--ink-50); }
.empty { padding: 26px 18px; text-align: center; font-size: 13.5px; color: var(--ink-45); }

/* ---------- keys ---------- */

.reveal {
  border: 1px solid rgba(45, 226, 230, 0.45);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(45, 226, 230, 0.12), rgba(139, 92, 246, 0.06));
  padding: 18px;
  margin-top: 16px;
}
.reveal__cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--cyan); }
.reveal code {
  display: block;
  margin: 12px 0;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--bg-deep);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--code-ink);
  word-break: break-all;
}
.reveal__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- billing ---------- */

.switch {
  width: 46px; height: 26px;
  border: 0; border-radius: 999px;
  padding: 3px;
  display: flex; justify-content: flex-start;
  background: var(--line-16);
  cursor: pointer;
  flex: 0 0 auto;
}
.switch[aria-checked='true'] { justify-content: flex-end; background: linear-gradient(120deg, #2de2e6, #8b5cf6); }
.switch span { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: block; }

.card-mask { font-family: var(--mono); font-size: 15px; letter-spacing: 0.08em; }
.summary { font-size: 14px; line-height: 1.6; color: var(--ink-66); }

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(3, 2, 7, 0.72);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
}
/* The dialogue never grows past the window: it scrolls inside itself, and the footer
   stays put. Letting it stretch put "Go to checkout" below the fold on a laptop — the one
   button the whole dialogue exists for. */
.modal__card {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--line-13);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), #0a0812);
  box-shadow: 0 50px 140px rgba(3, 2, 7, 0.8);
  overflow: hidden;
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px 14px;
  flex: 0 0 auto;
}
.modal__body { flex: 1 1 auto; overflow-y: auto; padding: 0 24px 24px; }
.modal__x { border: 0; background: none; color: var(--ink-50); font-size: 22px; cursor: pointer; line-height: 1; }

/* One joined control rather than five loose pills: the amounts are a single choice, and
   a segmented row says so. Wraps instead of scrolling, so "Other" never falls off. */
.seg {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-13);
  border-radius: 12px;
  overflow: hidden;
}
.seg button {
  flex: 1 1 62px;
  padding: 13px 8px;
  border: 0;
  border-left: 1px solid var(--line-13);
  background: none;
  color: var(--ink-70);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.seg button[aria-pressed='true'] { background: rgba(45, 226, 230, 0.12); color: var(--cyan); }

.seg--sm { flex: 0 0 auto; align-self: center; }
.seg--sm button { flex: 0 0 auto; min-width: 62px; padding: 9px 16px; font-size: 13.5px; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.split { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* Label left, value right — the shape the eye already knows from a receipt. */
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--ink-72); }
.amt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-13);
  border-radius: 10px;
  background: var(--field);
  padding: 0 12px;
  width: 132px;
}
.amt > span { color: var(--ink-45); font-size: 14px; }
.amt input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  padding: 11px 0;
  text-align: right;
}
.amt:focus-within { border-color: var(--violet); }
.amt input:focus { outline: none; }

/* Sticky inside the scroll area, with the card's own colour behind it so the content
   passes underneath instead of colliding with the buttons. */
.modal__foot {
  position: sticky;
  bottom: -24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 22px -24px -24px;
  padding: 16px 24px;
  background: #0a0812;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* The recharge rule sits inside the dialogue, set apart so it reads as a decision of its
   own rather than another field of the payment. */
.inset {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line-11);
  background: rgba(255, 255, 255, 0.02);
}
.inset__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.inset__title { font-size: 14px; font-weight: 600; }

/* Dimmed rather than removed: taking the panel out of the flow made the dialogue jump
   under the cursor every time the answer changed. */
.inset--off { opacity: 0.45; }
.inset--off .amt { background: none; }
.amt input:disabled { color: var(--ink-50); cursor: not-allowed; }
.inset b { color: var(--ink); font-weight: 600; }

/* ---------- playground ---------- */

.pg { display: flex; flex-wrap: wrap; gap: 18px; }
.pg__form { flex: 1 1 400px; min-width: 0; }
.pg__side { flex: 1 1 320px; min-width: 0; display: grid; gap: 16px; align-content: start; }

.grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); gap: 10px; }
.flex-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.flex-fields > .field:first-child { flex: 1 1 200px; min-width: 0; }
.flex-fields > .field { flex: 1 1 84px; min-width: 0; }

.quota {
  border: 1px solid rgba(45, 226, 230, 0.4);
  border-radius: 18px;
  background: rgba(45, 226, 230, 0.07);
  padding: 18px;
}
.quota__sum { margin-top: 8px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.quota__note { margin-top: 4px; font-size: 13px; color: var(--ink-60); }
.quota__src {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-42);
  word-break: break-all;
}

.pane { border: 1px solid var(--line-11); border-radius: 14px; background: var(--bg-deep); overflow: hidden; }
.pane__head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.pane pre {
  margin: 0;
  padding: 14px;
  font-family: var(--mono);
  font-size: clamp(10.5px, 1.2vw, 12px);
  line-height: 1.65;
  color: var(--code-ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}
.copy-btn {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--cyan);
  border: 1px solid rgba(45, 226, 230, 0.35);
  background: none; border-radius: 7px; padding: 4px 8px; cursor: pointer;
}
.result-media { display: block; max-width: 100%; max-height: 320px; border-radius: 12px; margin: 0 auto; }

.spinner {
  width: 30px; height: 30px; margin: 18px auto;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.25);
  border-top-color: var(--cyan);
  animation: ylSpin 0.9s linear infinite;
}

/* ---------- docs ---------- */

.docs { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); align-items: flex-start; }

.docs__nav {
  flex: 0 1 236px;
  position: sticky;
  top: calc(var(--yl-chrome, 152px) + 12px);
  align-self: flex-start;
  display: grid;
  gap: 6px;
  max-height: calc(100vh - var(--yl-chrome, 152px) - 32px);
  overflow-y: auto;
}
.docs__group { margin-top: 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-35); }
.docs__link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--ink-66);
  cursor: pointer;
  border: 0; background: none; text-align: left; width: 100%;
}
.docs__link:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.docs__link[aria-current='true'] { background: rgba(45, 226, 230, 0.1); color: var(--cyan); }

.docs__body { flex: 1 1 560px; min-width: 0; display: grid; gap: 34px; }
.docs__section { scroll-margin-top: calc(var(--yl-chrome, 152px) + 16px); }
.docs__section h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.docs__lead { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-66); }

.method {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 6px;
}
.method--get { color: var(--cyan); background: rgba(45, 226, 230, 0.12); border: 1px solid rgba(45, 226, 230, 0.35); }
.method--post { color: var(--magenta); background: rgba(230, 79, 208, 0.12); border: 1px solid rgba(230, 79, 208, 0.35); }
.ep__path { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep__path code { font-family: var(--mono); font-size: clamp(14px, 1.8vw, 18px); color: var(--ink); }

.param { padding: 13px 0; border-top: 1px solid var(--line); }
.param__row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.param__name { font-family: var(--mono); font-size: 13.5px; }
.param__type { font-family: var(--mono); font-size: 12px; color: var(--violet); }
.param__req { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--cyan); }
.param__opt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--ink-35); }
.param__desc { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ink-60); }
.param__enum { margin-top: 6px; font-size: 12px; color: var(--ink-45); }

.tabsline { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tabsline button {
  border: 1px solid transparent; background: none;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-55); padding: 5px 9px; border-radius: 8px; cursor: pointer;
}
.tabsline button[aria-selected='true'] { border-color: rgba(45, 226, 230, 0.5); background: rgba(45, 226, 230, 0.12); color: var(--cyan); }

.err-card { border: 1px solid var(--line-11); border-radius: 14px; padding: 16px; background: var(--surface); }
.err-card--loud { border-color: rgba(230, 79, 208, 0.35); background: rgba(230, 79, 208, 0.07); }
.err-card__code { font-family: var(--mono); font-size: 12px; color: var(--magenta); }

/* markdown out of the spec */
.md-p { margin: 12px 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-66); }
.md-h { margin: 22px 0 8px; font-size: 20px; font-weight: 700; }
.md-strong { color: var(--ink); font-weight: 600; }
.md-code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--cyan);
  background: rgba(45, 226, 230, 0.08);
  border: 1px solid rgba(45, 226, 230, 0.2);
  border-radius: 5px;
  padding: 1px 5px;
}
.md-codeblock { margin: 14px 0; border: 1px solid var(--line-11); border-radius: 12px; overflow: hidden; background: var(--bg-deep); }
.md-codeblock__lang {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-35); padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.md-codeblock pre {
  margin: 0; padding: 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--code-ink); white-space: pre-wrap; word-break: break-word;
}
.md-table { margin: 14px 0; border: 1px solid var(--line-11); border-radius: 12px; overflow: hidden; }
.md-tr {
  display: grid;
  gap: clamp(6px, 1.4vw, 14px);
  padding: 10px clamp(10px, 1.5vw, 16px);
  font-size: clamp(11px, 1.4vw, 13px);
  border-top: 1px solid var(--line);
  align-items: center;
}
.md-tr > *:not(:first-child) { text-align: right; }
.md-th { border-top: 0; background: var(--surface-05); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-45); }
.md-money { font-family: var(--mono); color: var(--cyan); }

/* ---------- motion ---------- */

@keyframes ylPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }
@keyframes ylSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- playground model picker ---------- */

.pgpick {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 4px;
}

.pgpick__dirs,
.pgpick__models {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pgdir {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--line-12);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-40);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.pgdir:hover { color: var(--ink-70); border-color: rgba(45, 226, 230, 0.3); }

.pgdir.is-on {
  border-color: rgba(45, 226, 230, 0.5);
  background: rgba(45, 226, 230, 0.08);
  color: var(--cyan);
}

.pgmodel {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--line-12);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.pgmodel:hover { border-color: rgba(45, 226, 230, 0.35); color: var(--ink); }

.pgmodel.is-on {
  border-color: var(--cyan);
  background: rgba(45, 226, 230, 0.1);
  color: var(--ink);
}

.pgmodel__id { font-family: var(--mono); font-size: 12.5px; }
.pgmodel__price { font-family: var(--mono); font-size: 11px; color: var(--ink-40); }
.pgmodel.is-on .pgmodel__price { color: var(--cyan); }

.auth__forgot {
  margin-top: 10px;
  font-size: 13px;
}

.auth__forgot button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink-40);
  cursor: pointer;
  font: inherit;
}

.auth__forgot button:hover { color: var(--cyan); }

/* The one screen a person reaches while locked out, so it says what happened in full
   rather than relying on a toast that a reload would erase. */
.auth__note {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(45, 226, 230, 0.3);
  background: rgba(45, 226, 230, 0.07);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-72);
}