:root {
  --bg-0: #0a0d12;
  --bg-1: #11151c;
  --bg-2: #161b25;
  --bg-3: #1d2330;
  --line: #232a38;
  --line-strong: #2e3648;
  --text: #e7eaf0;
  --text-dim: #99a3b3;
  --text-mute: #5e6878;
  --accent: #7afcb1;
  --accent-2: #4ad7ff;
  --accent-warm: #ffb359;
  --danger: #ff6b6b;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  --radius: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}
img, video, canvas, pre, code, table { max-width: 100%; }
h1, h2, h3, h4, p { word-wrap: break-word; overflow-wrap: anywhere; }

/* ----- Custom scrollbars (dark, slim, on-hover) ----- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .15s;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.18);
  background-clip: padding-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
body {
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(122, 252, 177, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(74, 215, 255, 0.06), transparent 60%),
    var(--bg-0);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ----- Top bar ----- */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 13, 18, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  border-radius: 7px;
}
.brand-text b { font-weight: 700; }
.brand-by { color: var(--text-mute); font-size: 12px; margin-left: 4px; }

.nav {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.nav a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 14px;
  transition: all .15s ease;
}
.nav a:hover { color: var(--text); background: var(--bg-2); }
.nav a.active {
  color: var(--text);
  background: var(--bg-3);
}

.topbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
.lang-switch {
  display: flex;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-switch button {
  background: transparent;
  border: none;
  color: var(--text-mute);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all .15s ease;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active {
  background: var(--bg-3);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.api-key-pill {
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--bg-2);
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.api-key-pill input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  width: 220px;
}
.api-key-pill input::placeholder { color: var(--text-mute); }
.api-key-pill button {
  background: var(--accent);
  color: #0a0d12;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}
.api-key-pill button:hover { background: #93ffc4; }
.api-key-pill.saved #api-key-save { background: var(--accent-2); }

/* Icon-only buttons (eye / trash). Hidden until a key is saved. */
.api-key-pill .api-key-icon {
  background: transparent;
  color: var(--text-dim);
  padding: 4px;
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: color .12s ease, background .12s ease;
}
.api-key-pill .api-key-icon:hover {
  background: var(--bg-3);
  color: var(--text);
}
.api-key-pill #api-key-clear:hover { color: #ff7575; }

/* When a key is saved: show the icon buttons, hide the Save CTA. */
.api-key-pill.saved .api-key-icon { display: inline-flex; }
.api-key-pill.saved #api-key-save { display: none; }
.api-key-pill.saved input { color: var(--text-dim); cursor: default; }
.api-key-pill.saved.revealed input { color: var(--text); }

/* Click-to-reveal mask used inside generated code snippets. */
.api-key-mask {
  cursor: pointer;
  background: rgba(255, 200, 100, 0.10);
  border-radius: 4px;
  padding: 0 4px;
  border-bottom: 1px dashed rgba(255, 200, 100, 0.45);
  transition: background .12s ease, color .12s ease;
  user-select: none;
}
.api-key-mask:hover {
  background: rgba(255, 200, 100, 0.20);
}
.api-key-mask.revealed {
  background: rgba(120, 255, 170, 0.10);
  border-bottom-color: rgba(120, 255, 170, 0.45);
  user-select: text;
}

/* ----- Main view ----- */
main {
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px 32px 64px;
}

/* ----- Hero (landing) ----- */
.hero {
  display: grid;
  grid-template-columns: 1.4fr minmax(0, 1fr);
  gap: 36px;
  margin-bottom: 36px;
}
.hero > div { min-width: 0; }
.hero h1 {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 12px 0 18px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.55;
  max-width: 580px;
}
.hero-tag {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  background: rgba(122, 252, 177, 0.08);
  border: 1px solid rgba(122, 252, 177, 0.25);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.btn-primary, .btn-secondary {
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #0a0d12;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-secondary {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { background: var(--bg-3); }

/* ----- Stats grid ----- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0; width: 80px; height: 80px;
  background: radial-gradient(circle at 100% 0%, rgba(122,252,177,.1), transparent 70%);
  pointer-events: none;
}
.stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.stat-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

/* ----- Section panels ----- */
.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  min-width: 0;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.panel-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.panel-header .meta { color: var(--text-mute); font-size: 12px; }

.split-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

/* ----- Top models table ----- */
.tm-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 18px;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--line);
  align-items: center;
  font-size: 13px;
}
.tm-row:last-child { border-bottom: none; }
.tm-name { font-family: 'JetBrains Mono', monospace; color: var(--text); }
.tm-num { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.tm-bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  width: 120px;
}
.tm-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
}

/* ----- Recent feed ----- */
.feed-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  padding: 8px 4px;
  font-size: 12px;
  border-bottom: 1px dashed var(--line);
  align-items: center;
}
.feed-row:last-child { border-bottom: none; }
.feed-time { font-family: 'JetBrains Mono', monospace; color: var(--text-mute); }
.feed-model { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); }
.feed-status { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.feed-status.ok { background: rgba(122,252,177,.15); color: var(--accent); }
.feed-status.error { background: rgba(255,107,107,.15); color: var(--danger); }
.feed-status.submitted { background: rgba(74,215,255,.15); color: var(--accent-2); }
.feed-latency { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); }

/* ----- Empty state ----- */
.empty {
  text-align: center;
  padding: 30px;
  color: var(--text-mute);
  font-size: 13px;
}

/* ----- Playground ----- */
.pg-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
}
.pg-sidebar {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 10px 16px 16px;
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overflow-x: hidden;
}
.pg-sidebar::-webkit-scrollbar {
  width: 6px;
}
.pg-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.05);
  border: none;
}
.pg-sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
}
.pg-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  outline: none;
  font-size: 13px;
  margin-bottom: 14px;
}
.pg-section-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 14px 6px 8px;
}
.pg-model-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 9px 10px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  margin-bottom: 2px;
  transition: background .15s;
}
.pg-model-btn:hover { background: var(--bg-2); color: var(--text); }
.pg-model-btn.active {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--line-strong);
}
.pg-model-name {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}

.pg-main {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  min-height: 520px;
  min-width: 0;
  overflow: hidden;
}
.pg-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}
.pg-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}
.pg-title .badge {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.pg-id {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-mute);
  font-size: 12px;
  margin-bottom: 22px;
}

/* ----- Form ----- */
.field {
  display: block;
  margin-bottom: 14px;
  min-width: 0;
}
.field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.field-label > span:first-child {
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.field-label .req { color: var(--accent-warm); font-size: 10px; margin-left: 4px; }
.field-help {
  color: var(--text-mute);
  font-size: 11px;
  text-align: right;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.field input[type=text],
.field input[type=number],
.field textarea,
.field select {
  width: 100%;
  max-width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
}
.field textarea {
  resize: vertical;
  min-height: 84px;
  font-family: 'Space Grotesk', sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.field input[type=text] {
  text-overflow: ellipsis;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.array-field {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.array-field input { flex: 1; }
.array-field button {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line-strong);
  padding: 0 12px;
  border-radius: 8px;
}

.submit-row {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.submit-row button[type=submit] {
  flex: 1;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #0a0d12;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ----- Snippet panel ----- */
.snippet-panel {
  margin-top: 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.snippet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  flex-wrap: wrap;
}
.snippet-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.snippet-title > span:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.snippet-meta { color: var(--text-mute); font-size: 11px; }
.snippet-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-3);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.snippet-tabs button {
  background: transparent;
  border: none;
  color: var(--text-mute);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all .15s ease;
}
.snippet-tabs button:hover { color: var(--text); }
.snippet-tabs button.active {
  background: var(--bg-1);
  color: var(--text);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.04), inset 0 0 0 1px var(--line-strong);
}
.snippet-body {
  position: relative;
}
.snippet-body pre {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 0;
  max-height: 380px;
}
.snippet-copy {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  background: rgba(22, 27, 37, 0.92);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all .15s ease;
  backdrop-filter: blur(6px);
}
.snippet-copy:hover { border-color: var(--accent); color: var(--accent); }
.snippet-copy.ok { background: rgba(122, 252, 177, 0.18); color: var(--accent); border-color: var(--accent); }

/* ----- Result ----- */
.result {
  margin-top: 28px;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.result-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.result-status .pulse {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(74,215,255,0.7);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74,215,255,.7); }
  70% { box-shadow: 0 0 0 12px rgba(74,215,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,215,255,0); }
}
.result-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.result-media img, .result-media video, .result-media audio {
  width: 100%;
  border-radius: 8px;
  background: #000;
  display: block;
}
.result-error {
  color: var(--danger);
  font-size: 13px;
  padding: 10px 12px;
  background: rgba(255,107,107,.08);
  border-radius: 8px;
}

/* Live status line that sits between the Üret button and the snippet
   panel. Always visible after submit so the user can see the job is
   running without having to scroll past the code snippet. */
.pg-status {
  margin: 14px 0 18px;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-dim);
  transition: background .2s, border-color .2s, color .2s;
}
.pg-status[hidden] { display: none; }
.pg-status .pulse {
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(74,215,255,0.7);
  animation: pulse 1.5s infinite;
}
.pg-status .pg-status-text { flex: 1 1 auto; min-width: 0; }
.pg-status .pg-status-id {
  font-size: 11px;
  opacity: .7;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
}
.pg-status[data-kind="pending"],
.pg-status[data-kind="running"] {
  border-color: rgba(74,215,255,.35);
  background: rgba(74,215,255,.06);
  color: var(--text);
}
.pg-status[data-kind="success"] {
  border-color: rgba(102,210,150,.4);
  background: rgba(102,210,150,.08);
  color: var(--text);
}
.pg-status[data-kind="success"] .pulse { display: none; }
.pg-status[data-kind="error"] {
  border-color: rgba(255,107,107,.45);
  background: rgba(255,107,107,.08);
  color: var(--danger);
}
.pg-status[data-kind="error"] .pulse { display: none; }

/* ----- Docs ----- */
.docs-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
}
.docs-toc {
  position: sticky;
  top: 90px;
  align-self: start;
  font-size: 13px;
}
.docs-toc h4 {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 18px 0 6px;
  letter-spacing: 0.08em;
}
.docs-toc a {
  display: block;
  padding: 5px 8px;
  color: var(--text-dim);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.docs-toc a:hover { background: var(--bg-2); color: var(--text); }
.docs-section {
  margin-bottom: 56px;
  scroll-margin-top: 90px;
}
.docs-section h2 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.docs-section h3 {
  font-size: 18px;
  margin: 32px 0 8px;
  letter-spacing: -0.01em;
}
.docs-section p { color: var(--text-dim); line-height: 1.6; }
.docs-section code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-2);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 0.86em;
  border: 1px solid var(--line);
}
/* ----- Code blocks (highlight.js github-dark) ----- */
pre {
  background: #0d1117;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 12px 0 18px;
  max-width: 100%;
}
pre code,
pre code.hljs {
  display: block;
  padding: 16px 18px !important;
  background: transparent !important;
  border: none !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: #c9d1d9;
  white-space: pre;
}
.docs-section pre { margin: 10px 0 22px; }

table.params-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 22px;
  font-size: 13px;
}
.params-table th {
  text-align: left;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.params-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.params-table .pname {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}
.params-table .ptype {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-2);
  font-size: 12px;
}
.params-table .preq {
  font-size: 10px;
  color: var(--accent-warm);
  letter-spacing: 0.06em;
  margin-left: 6px;
}
.params-table .pdesc { color: var(--text-dim); }
/* ----- Plain text hint banner ----- */
.plain-text-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.plain-text-hint .pt-icon { font-size: 18px; opacity: .8; }
.plain-text-hint a { color: var(--text); border-bottom: 1px dashed var(--line-strong); }
.plain-text-hint a:hover { color: var(--accent); border-color: var(--accent); }
.plain-text-hint code {
  background: var(--bg-3);
  padding: 2px 8px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

/* ----- Collapsible model groups ----- */
.docs-model-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  margin: 14px 0 18px;
}
.docs-model-search:focus { border-color: var(--accent); }

.docs-type-group {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.docs-type-group > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  user-select: none;
  transition: background .12s ease;
}
.docs-type-group > summary:hover { background: var(--bg-2); }
.docs-type-group > summary::-webkit-details-marker { display: none; }
.docs-type-group > summary::before {
  content: '▸';
  color: var(--text-mute);
  font-size: 11px;
  transition: transform .15s ease;
  display: inline-block;
}
.docs-type-group[open] > summary::before { transform: rotate(90deg); }
.docs-type-group .t-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
  background: var(--bg-2);
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.docs-type-group .docs-type-body {
  padding: 14px 18px 8px;
  border-top: 1px solid var(--line);
  background: var(--bg-0);
}
.docs-type-group .docs-type-body .docs-model-card {
  background: var(--bg-1);
}

.recipe-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 22px;
}
.recipe-card h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.recipe-card > p {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.recipe-card pre { margin: 0; }

.docs-model-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.docs-model-card .head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.docs-model-card .head h4 {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: var(--text);
}
.docs-model-card .head .type-badge {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--bg-3);
  border-radius: 999px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ----- Footer ----- */
.footer {
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-mute);
}
.footer-status {
  font-family: 'JetBrains Mono', monospace;
}
.footer-status::before {
  content: '●';
  margin-right: 6px;
  color: var(--text-mute);
}
.footer-status.ok::before { color: var(--accent); }
.footer-status.err::before { color: var(--danger); }

/* ----- Mobile menu toggle (hidden on desktop) ----- */
.menu-toggle {
  display: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.menu-toggle svg { width: 18px; height: 18px; display: block; }

/* =========================================================================
   Responsive breakpoints
   1180  · laptop / smaller desktop
   1024  · tablet landscape
   860   · tablet portrait → start collapsing nav
   640   · phone landscape
   460   · phone portrait
   ========================================================================= */

@media (max-width: 1180px) {
  main { padding: 28px 24px 56px; }
  .hero h1 { font-size: 44px; }
  .pg-grid { grid-template-columns: 280px 1fr; gap: 18px; }
  .docs-grid { grid-template-columns: 220px 1fr; gap: 28px; }
}

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .split-2 { grid-template-columns: 1fr; gap: 16px; }
  .pg-grid, .docs-grid { grid-template-columns: 1fr; gap: 16px; }
  .docs-toc, .pg-sidebar { position: static; max-height: none; }
  .pg-sidebar {
    max-height: 320px;
    padding: 14px;
  }
  .docs-toc {
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 18px;
  }
  .docs-toc h4 { grid-column: 1 / -1; margin: 12px 0 4px; }
}

@media (max-width: 860px) {
  .topbar {
    /* brand | (right) | toggle  — nav becomes absolute popover */
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
  }
  .topbar > .brand { margin-right: auto; }
  /* Slide-down mobile nav */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    padding: 8px 16px 16px;
    gap: 2px;
    transform: translateY(-110%);
    transition: transform .25s ease;
    pointer-events: none;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    z-index: 60;
    visibility: hidden;
  }
  .nav.open {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }
  .nav a { padding: 12px 14px; }
  body.menu-open { overflow: hidden; }
  .menu-toggle { display: inline-flex; }

  /* Brand: hide tagline */
  .brand-by { display: none; }
  .brand { font-size: 16px; }

  /* Topbar right group */
  .topbar-right { gap: 8px; }
  .lang-switch button { padding: 4px 10px; font-size: 10px; }
  .api-key-pill {
    padding: 3px 3px 3px 10px;
  }
  .api-key-pill input {
    width: 130px;
    font-size: 11px;
  }
  .api-key-pill button { padding: 5px 12px; font-size: 11px; }
  .api-key-pill .api-key-icon { width: 24px; height: 24px; padding: 3px; }

  /* Hero */
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 15px; }
  .hero-cta { flex-wrap: wrap; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }

  /* Playground form rows */
  .field-row { grid-template-columns: 1fr; }
  .pg-main { padding: 20px; }
  .pg-title h2 { font-size: 19px; }

  /* Footer */
  .footer { flex-direction: column; gap: 6px; text-align: center; padding: 14px 18px; }

  /* Top models / recent feed: tighter rows */
  .tm-row { grid-template-columns: 1fr auto auto; gap: 10px; }
  .tm-bar { display: none; }
  .feed-row { grid-template-columns: auto 1fr auto; gap: 8px; }
  .feed-latency { display: none; }
}

@media (max-width: 640px) {
  main { padding: 22px 14px 48px; }

  .topbar { padding: 10px 14px; gap: 10px; }
  .api-key-pill input { width: 90px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px 16px; }
  .stat-value { font-size: 26px; }
  .stat-label { font-size: 11px; }

  .panel { padding: 16px; }
  .panel-header h2 { font-size: 16px; }

  .hero h1 { font-size: 30px; line-height: 1.1; }
  .hero p { font-size: 14px; }
  .hero-tag { font-size: 11px; padding: 5px 10px; }

  /* Wrap long code on phones instead of horizontal scroll */
  pre, pre code, pre code.hljs { font-size: 11px; }
  pre code, pre code.hljs {
    padding: 12px 14px !important;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Docs */
  .docs-section h2 { font-size: 22px; }
  .docs-section h3 { font-size: 16px; margin-top: 26px; }
  .docs-section pre { font-size: 11.5px; }
  .params-table { font-size: 12px; }
  .params-table th, .params-table td { padding: 8px 8px; }
  .params-table .pname { word-break: break-word; }
  .docs-toc { grid-template-columns: 1fr; }

  /* Result media: single column on phones */
  .result-media { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .topbar { grid-template-columns: auto auto auto; }
  .brand-text { display: none; }     /* keep just the logo */
  .lang-switch { display: none; }    /* save space, still in mobile menu via long-press if needed */
  .api-key-pill input { width: 70px; }
  .api-key-pill { padding: 3px 3px 3px 8px; }
  .api-key-pill button { padding: 4px 9px; }
  .api-key-pill .api-key-icon { width: 22px; height: 22px; padding: 2px; }

  .stats-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 26px; }

  .feed-row { grid-template-columns: 1fr auto; }
  .feed-time, .feed-model { font-size: 11px; }

  /* Generate button: full-width with breathing room */
  .submit-row button[type=submit] { padding: 14px; font-size: 14px; }
}

/* iOS safe-area */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding-top: max(14px, env(safe-area-inset-top)); }
}

/* Disable hover/animations on coarse pointers (touch) */
@media (hover: none) {
  .stat-card::after { display: none; }
  .btn-primary:hover { transform: none; }
}