/* ============================================
   WHATISMYIP.CODES — API Documentation Design System
   Dark hacker aesthetic, Stripe-docs inspired layout
   ============================================ */

/* --- Fonts (self-hosted, no external requests) --- */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* --- Design Tokens --- */
:root {
  --bg:        #08080F;
  --surface:   #0D0D18;
  --surface-2: #111122;
  --accent:    #00D4FF;
  --accent-dim:rgba(0,212,255,0.5);
  --success:   #22c55e;
  --warn:      #f59e0b;
  --danger:    #ef4444;
  --purple:    #6C63FF;

  --text-95:   rgba(255,255,255,0.95);
  --text-90:   rgba(255,255,255,0.9);
  --text-85:   rgba(255,255,255,0.85);
  --text-80:   rgba(255,255,255,0.8);
  --text-70:   rgba(255,255,255,0.7);
  --text-65:   rgba(255,255,255,0.65);
  --text-60:   rgba(255,255,255,0.6);
  --text-50:   rgba(255,255,255,0.5);
  --text-40:   rgba(255,255,255,0.4);
  --text-35:   rgba(255,255,255,0.35);
  --text-30:   rgba(255,255,255,0.3);
  --text-25:   rgba(255,255,255,0.25);
  --text-20:   rgba(255,255,255,0.2);
  --text-15:   rgba(255,255,255,0.15);
  --text-10:   rgba(255,255,255,0.10);

  --border-divider:     rgba(255,255,255,0.04);
  --border-card:        rgba(255,255,255,0.06);
  --border-interactive: rgba(255,255,255,0.08);
  --border-hover:       rgba(255,255,255,0.12);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --topbar-height: 48px;
  --sidebar-width: 260px;
  --sidebar-width-tablet: 220px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--bg);
  color: white;
  font-family: var(--font-sans);
  font-weight: 500;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

::selection { background: rgba(0,212,255,0.15); color: white; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.3); }

img { max-width: 100%; height: auto; }

/* --- Links --- */
a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: white; }

/* --- Typography --- */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-25);
}
.label-accent {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-dim);
}
.label-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-30);
}

h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-95);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-85);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-70);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-65);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.body-text { font-size: 15px; color: var(--text-65); line-height: 1.8; }
.body-sm { font-size: 13px; color: var(--text-40); line-height: 1.6; }
.mono { font-family: var(--font-mono); }

@media (min-width: 640px) {
  h1 { font-size: 48px; }
  h2 { font-size: 26px; }
}

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Layout Helpers --- */
.container      { max-width: 1152px; margin: 0 auto; padding: 0 16px; }
.container-sm   { max-width: 768px; margin: 0 auto; padding: 0 16px; }
.container-xs   { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.container-full { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

@media (min-width: 640px) {
  .container, .container-sm, .container-xs, .container-full { padding: 0 24px; }
}

/* ============================================
   TOP BAR (slim fixed navbar)
   ============================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--topbar-height);
  background: rgba(8,8,15,0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-divider);
  display: flex;
  align-items: center;
}

.topbar-inner {
  max-width: 100%;
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (min-width: 640px) {
  .topbar-inner { padding: 0 24px; }
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.topbar-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-40);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  border-radius: 6px;
}
.topbar-hamburger:hover { color: var(--text-70); background: rgba(255,255,255,0.04); }
.topbar-hamburger svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .topbar-hamburger { display: none; }
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-logo img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.topbar-logo-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-60);
}
.topbar-logo-text .accent { color: var(--accent); }
.topbar-logo-text .dim { color: var(--text-30); }

/* Top bar search */
.topbar-search {
  position: relative;
  flex: 1;
  max-width: 320px;
  display: none;
}
@media (min-width: 640px) {
  .topbar-search { display: block; }
}
.topbar-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-20);
  pointer-events: none;
}
.topbar-search input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-interactive);
  border-radius: 6px;
  color: var(--text-70);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.topbar-search input:focus {
  border-color: rgba(0,212,255,0.3);
  box-shadow: 0 0 0 2px rgba(0,212,255,0.06);
  background: var(--surface);
}
.topbar-search input::placeholder { color: var(--text-15); }
.topbar-search .shortcut-hint {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-20);
  padding: 2px 6px;
  border: 1px solid var(--border-card);
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  pointer-events: none;
}

/* Top bar right links */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.topbar-link {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-40);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.topbar-link:hover {
  color: var(--text-70);
  background: rgba(255,255,255,0.04);
}
.topbar-link.active {
  color: var(--accent);
}
.topbar-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topbar-link-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
}

/* Hide secondary links on small screens */
@media (max-width: 479px) {
  .topbar-link.hide-xs { display: none; }
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */
.sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg);
  border-right: 1px solid var(--border-divider);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  padding: 20px 0;
  display: none;
}
@media (min-width: 768px) {
  .sidebar { display: block; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: var(--sidebar-width-tablet); }
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }

/* Sidebar sections */
.sidebar-section {
  margin-bottom: 24px;
}
.sidebar-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-25);
  padding: 0 20px;
  margin-bottom: 8px;
}

/* Sidebar items */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-45, rgba(255,255,255,0.45));
  text-decoration: none;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
  position: relative;
}
.sidebar-item:hover {
  color: var(--text-70);
  background: rgba(255,255,255,0.02);
}
.sidebar-item.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(0,212,255,0.04);
}
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}

/* Method badges in sidebar */
.sidebar-method {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1;
}
.sidebar-method.get {
  color: var(--success);
  background: rgba(34,197,94,0.12);
}
.sidebar-method.post {
  color: #3b82f6;
  background: rgba(59,130,246,0.12);
}
.sidebar-method.put {
  color: var(--warn);
  background: rgba(245,158,11,0.12);
}
.sidebar-method.delete {
  color: var(--danger);
  background: rgba(239,68,68,0.12);
}
.sidebar-method.patch {
  color: var(--purple);
  background: rgba(108,99,255,0.12);
}

/* Sidebar sub-items (nested) */
.sidebar-sub {
  padding-left: 36px;
}
.sidebar-sub .sidebar-item {
  font-size: 12px;
  padding: 6px 20px 6px 36px;
  color: var(--text-30);
}
.sidebar-sub .sidebar-item:hover { color: var(--text-60); }
.sidebar-sub .sidebar-item.active { color: var(--accent); }

/* Sidebar version badge */
.sidebar-version {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-20);
  padding: 2px 8px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  margin: 0 20px 16px;
}

/* ============================================
   MOBILE SIDEBAR (slide-in overlay)
   ============================================ */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.sidebar-overlay.open { display: block; }

.mobile-sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--bg);
  border-right: 1px solid var(--border-divider);
  overflow-y: auto;
  z-index: 160;
  padding: 20px 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mobile-sidebar.open {
  transform: translateX(0);
}

.mobile-sidebar .sidebar-section,
.mobile-sidebar .sidebar-section-title,
.mobile-sidebar .sidebar-item,
.mobile-sidebar .sidebar-method,
.mobile-sidebar .sidebar-version {
  /* inherits sidebar styles */
}

/* Mobile search (shown inside mobile sidebar) */
.mobile-sidebar-search {
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--border-divider);
  margin-bottom: 12px;
}
.mobile-sidebar-search input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-interactive);
  border-radius: 6px;
  color: var(--text-70);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
}
.mobile-sidebar-search input:focus {
  border-color: rgba(0,212,255,0.3);
}
.mobile-sidebar-search input::placeholder { color: var(--text-15); }

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.docs-layout {
  padding-top: var(--topbar-height);
  min-height: 100vh;
}

.docs-main {
  padding: 32px 16px 80px;
  max-width: 800px;
}
@media (min-width: 640px) {
  .docs-main { padding: 40px 32px 96px; }
}
@media (min-width: 768px) {
  .docs-main {
    margin-left: var(--sidebar-width-tablet);
    padding: 40px 40px 96px;
  }
}
@media (min-width: 1024px) {
  .docs-main {
    margin-left: var(--sidebar-width);
    padding: 48px 48px 120px;
  }
}

/* ============================================
   PROSE (article/docs body text)
   ============================================ */
.prose h2 {
  color: var(--text-85);
  font-size: 22px;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-divider);
}
.prose h3 {
  color: rgba(255,255,255,0.75);
  font-size: 17px;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-65);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.prose p {
  color: var(--text-65);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.prose a:not(.doc-list-item):not(.endpoint-card):not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0,212,255,0.3);
  transition: text-decoration-color 0.2s;
}
.prose a:not(.doc-list-item):not(.endpoint-card):not(.btn):hover {
  color: white;
  text-decoration-color: white;
}
.prose .lead {
  font-size: 16px;
  color: var(--text-50);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.prose strong { color: var(--text-85); font-weight: 600; }
.prose em { color: var(--text-50); }
.prose code {
  color: var(--accent);
  background: rgba(0,212,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--font-mono);
}
.prose pre {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 20px;
  overflow-x: auto;
  margin: 1.5rem 0;
}
.prose pre code {
  background: none;
  padding: 0;
  color: var(--text-50);
  font-size: 13px;
}
.prose ul,
.prose ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose ul li,
.prose ol li {
  color: var(--text-60);
  padding-left: 4px;
  margin-bottom: 0.5rem;
  line-height: 1.7;
}
.prose ul li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
.prose blockquote {
  border-left: 2px solid rgba(0,212,255,0.3);
  padding-left: 16px;
  color: var(--text-50);
  font-style: italic;
  margin: 1.5rem 0;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--border-card);
  margin: 2.5rem 0;
}
.prose img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  margin: 1.5rem 0;
}

/* ============================================
   CODE BLOCKS (tabbed, with copy button)
   ============================================ */
.code-block {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1.5rem 0;
  position: relative;
}

/* Language tabs row */
.code-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-divider);
  overflow-x: auto;
  padding: 0 4px;
}
.code-tab {
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-30);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.code-tab:hover {
  color: var(--text-60);
}
.code-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Code content area */
.code-content {
  position: relative;
  padding: 16px 20px;
  overflow-x: auto;
}
.code-content pre {
  margin: 0;
  background: none;
  border: none;
  padding: 0;
}
.code-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-50);
  background: none;
  padding: 0;
}

/* Copy button */
.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-25);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 5;
}
.code-copy:hover {
  color: var(--text-60);
  background: rgba(255,255,255,0.08);
  border-color: var(--border-hover);
}
.code-copy.copied {
  color: var(--success);
  border-color: rgba(34,197,94,0.3);
}
.code-copy svg { width: 12px; height: 12px; }

/* Code pane (each language) */
.code-pane { display: none; }
.code-pane.active { display: block; }

/* Syntax highlighting tokens */
.code-content .token-keyword { color: #c678dd; }
.code-content .token-string { color: #98c379; }
.code-content .token-comment { color: var(--text-20); font-style: italic; }
.code-content .token-url { color: var(--accent); }
.code-content .token-number { color: #d19a66; }
.code-content .token-function { color: #61afef; }
.code-content .token-variable { color: #e06c75; }
.code-content .token-property { color: #56b6c2; }
.code-content .token-operator { color: var(--text-40); }
.code-content .token-punctuation { color: var(--text-30); }

/* Line numbers */
.code-lines {
  display: flex;
}
.code-line-numbers {
  flex-shrink: 0;
  padding-right: 16px;
  border-right: 1px solid var(--border-divider);
  margin-right: 16px;
  user-select: none;
  text-align: right;
  color: var(--text-15);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
}

/* ============================================
   ENDPOINT HEADERS
   ============================================ */
.endpoint-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-divider);
}

.method-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
}
.method-badge.get {
  color: var(--success);
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.2);
}
.method-badge.post {
  color: #3b82f6;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.2);
}
.method-badge.put {
  color: var(--warn);
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.2);
}
.method-badge.delete {
  color: var(--danger);
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.2);
}
.method-badge.patch {
  color: var(--purple);
  background: rgba(108,99,255,0.12);
  border: 1px solid rgba(108,99,255,0.2);
}

.endpoint-path {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  word-break: break-all;
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.auth-badge.no-auth {
  color: var(--success);
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.15);
}
.auth-badge.api-key {
  color: var(--warn);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.15);
}

/* ============================================
   PARAMETER TABLES
   ============================================ */
.param-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.param-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-25);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-card);
  white-space: nowrap;
}
.param-table td {
  font-size: 14px;
  color: var(--text-50);
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-divider);
  vertical-align: top;
}
.param-table tr:last-child td { border-bottom: none; }

.param-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.param-type {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-30);
}
.param-required {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.param-required.required {
  color: var(--danger);
  background: rgba(239,68,68,0.1);
}
.param-required.optional {
  color: var(--text-25);
  background: rgba(255,255,255,0.04);
}
.param-desc {
  font-size: 13px;
  color: var(--text-40);
  line-height: 1.6;
}
.param-default {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-25);
}
.param-default code {
  color: var(--text-40);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* Responsive param table */
@media (max-width: 639px) {
  .param-table,
  .param-table thead,
  .param-table tbody,
  .param-table th,
  .param-table td,
  .param-table tr {
    display: block;
  }
  .param-table thead { display: none; }
  .param-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-divider);
  }
  .param-table td {
    padding: 2px 0;
    border: none;
  }
  .param-table td::before {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-20);
    display: block;
    margin-bottom: 2px;
  }
}

/* ============================================
   RESPONSE FIELD TABLES
   ============================================ */
.response-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.response-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-25);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-card);
}
.response-table td {
  font-size: 14px;
  color: var(--text-50);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-divider);
  vertical-align: top;
}
.response-table tr:last-child td { border-bottom: none; }

.field-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-70);
}
.field-type {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-30);
}
.field-desc {
  font-size: 13px;
  color: var(--text-40);
  line-height: 1.6;
}
.field-nested {
  padding-left: 20px;
  position: relative;
}
.field-nested::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-card);
}

/* ============================================
   INTERACTIVE PLAYGROUND
   ============================================ */
.playground {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 2rem 0;
}
.playground-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-divider);
}
.playground-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-30);
  display: flex;
  align-items: center;
  gap: 6px;
}
.playground-title .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
}
.playground-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-20);
}

/* Playground input row */
.playground-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-divider);
}
.playground-method {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  background: rgba(34,197,94,0.1);
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.playground-url {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-interactive);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}
.playground-url:focus {
  border-color: rgba(0,212,255,0.3);
}
.playground-send {
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.playground-send:hover {
  background: white;
}
.playground-send:active {
  transform: scale(0.97);
}
.playground-send.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Playground response */
.playground-response {
  padding: 16px 20px;
  min-height: 120px;
}
.playground-response-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.playground-response-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.playground-response-status.ok {
  color: var(--success);
  background: rgba(34,197,94,0.1);
}
.playground-response-status.error {
  color: var(--danger);
  background: rgba(239,68,68,0.1);
}
.playground-response-time {
  color: var(--text-25);
}
.playground-response-size {
  color: var(--text-20);
}
.playground-response-body {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-sm);
  padding: 16px;
  overflow-x: auto;
}
.playground-response-body pre {
  margin: 0;
  background: none;
  border: none;
  padding: 0;
}
.playground-response-body code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-50);
  background: none;
  padding: 0;
}
.playground-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--text-20);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  gap: 8px;
}
.playground-empty svg {
  width: 24px;
  height: 24px;
  opacity: 0.3;
}
.playground-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-card);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin: 40px auto;
}

/* ============================================
   CALLOUT BOXES
   ============================================ */
.callout {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
  font-size: 14px;
  line-height: 1.7;
}
.callout-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.callout-title svg { width: 14px; height: 14px; flex-shrink: 0; }
.callout-info {
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.12);
  color: var(--text-60);
}
.callout-info .callout-title { color: var(--accent); }
.callout-warn {
  background: rgba(245,158,11,0.05);
  border: 1px solid rgba(245,158,11,0.12);
  color: var(--text-60);
}
.callout-warn .callout-title { color: var(--warn); }
.callout-tip {
  background: rgba(34,197,94,0.05);
  border: 1px solid rgba(34,197,94,0.12);
  color: var(--text-60);
}
.callout-tip .callout-title { color: var(--success); }
.callout-danger {
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.12);
  color: var(--text-60);
}
.callout-danger .callout-title { color: var(--danger); }

.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout code {
  font-size: 12px;
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-list {
  border-top: 1px solid var(--border-divider);
}
.faq-item {
  border-bottom: 1px solid var(--border-divider);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-70);
  font-family: var(--font-sans);
  transition: color 0.2s;
}
.faq-question:hover { color: var(--text-90); }
.faq-question svg {
  width: 16px;
  height: 16px;
  color: var(--text-25);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer-inner {
  padding-bottom: 20px;
  font-size: 14px;
  color: var(--text-40);
  line-height: 1.7;
}
.faq-item.open .faq-answer { max-height: 500px; }

/* ============================================
   HERO SECTION (homepage)
   ============================================ */
.api-hero {
  padding: 80px 0 64px;
  text-align: center;
  position: relative;
  overflow: visible;
}
@media (min-width: 640px) {
  .api-hero { padding: 100px 0 72px; }
}
@media (min-width: 768px) {
  .api-hero { margin-left: var(--sidebar-width-tablet); }
}
@media (min-width: 1024px) {
  .api-hero { margin-left: var(--sidebar-width); }
}

.api-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at center top, rgba(0,212,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.api-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.12);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-dim);
  margin-bottom: 24px;
}
.api-hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

.api-hero h1 {
  max-width: 640px;
  margin: 0 auto 16px;
}
.api-hero h1 .accent { color: var(--accent); }

.api-hero-desc {
  font-size: 15px;
  color: var(--text-40);
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

/* Live IP display area */
.hero-ip-display {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  font-family: var(--font-mono);
}
.hero-ip-label {
  font-size: 11px;
  color: var(--text-25);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hero-ip-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
@media (min-width: 640px) {
  .hero-ip-value { font-size: 22px; }
}

/* Curl command with copy */
.hero-curl {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 480px;
  margin: 0 auto 24px;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.hero-curl-prompt {
  padding: 10px 0 10px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-20);
  flex-shrink: 0;
  user-select: none;
}
.hero-curl code {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-60);
  white-space: nowrap;
  overflow-x: auto;
  background: none;
}
.hero-curl .code-copy {
  position: relative;
  top: auto;
  right: auto;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--border-divider);
  padding: 10px 12px;
}

/* JSON response preview */
.hero-response {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  position: relative;
}
.hero-response-label {
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-20);
  background: var(--bg);
  padding: 0 6px;
}
.hero-response pre {
  margin: 0;
  background: none;
  border: none;
  padding: 0;
}
.hero-response code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-50);
  background: none;
  padding: 0;
}

/* ============================================
   ENDPOINT CARDS GRID (homepage)
   ============================================ */
.endpoint-cards-section {
  padding: 56px 0;
  border-top: 1px solid var(--border-divider);
}
@media (min-width: 768px) {
  .endpoint-cards-section { margin-left: var(--sidebar-width-tablet); }
}
@media (min-width: 1024px) {
  .endpoint-cards-section { margin-left: var(--sidebar-width); }
}
@media (min-width: 640px) {
  .endpoint-cards-section { padding: 80px 0; }
}

.endpoint-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 480px) {
  .endpoint-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .endpoint-cards-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.endpoint-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.endpoint-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  opacity: 0;
  transition: opacity 0.25s;
}
.endpoint-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.endpoint-card:hover::before { opacity: 1; }

.endpoint-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.endpoint-card-path {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-70);
  transition: color 0.2s;
}
.endpoint-card:hover .endpoint-card-path { color: var(--accent); }

.endpoint-card p {
  font-size: 13px;
  color: var(--text-35);
  line-height: 1.6;
  margin: 0;
}
.endpoint-card .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-20);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-divider);
}

/* ============================================
   COMPARISON TABLE
   ============================================ */
.comparison-section {
  padding: 56px 0;
  border-top: 1px solid var(--border-divider);
}
@media (min-width: 768px) {
  .comparison-section { margin-left: var(--sidebar-width-tablet); }
}
@media (min-width: 1024px) {
  .comparison-section { margin-left: var(--sidebar-width); }
}

.comparison-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.comparison-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-30);
  text-align: left;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border-card);
  white-space: nowrap;
}
.comparison-table th:first-child { color: var(--text-50); }
.comparison-table th.highlight {
  color: var(--accent);
  background: rgba(0,212,255,0.04);
}
.comparison-table td {
  font-size: 13px;
  color: var(--text-50);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-divider);
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table td:first-child {
  font-weight: 600;
  color: var(--text-65);
}
.comparison-table td.highlight {
  background: rgba(0,212,255,0.02);
}
.comparison-table .check {
  color: var(--success);
  font-size: 16px;
}
.comparison-table .cross {
  color: var(--text-15);
  font-size: 16px;
}
.comparison-table .partial {
  color: var(--warn);
  font-size: 12px;
  font-family: var(--font-mono);
}

/* ============================================
   BADGES (general purpose)
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.badge-success { color: var(--success); background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); }
.badge-warn    { color: var(--warn); background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); }
.badge-danger  { color: var(--danger); background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); }
.badge-info    { color: var(--accent); background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.2); }
.badge-neutral { color: var(--text-40); background: rgba(255,255,255,0.04); border: 1px solid var(--border-card); }

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header { margin-bottom: 32px; }
.section-header .label,
.section-header .label-accent { margin-bottom: 12px; display: block; }
.section-header h2 {
  font-size: 28px;
  margin-top: 0;
  color: var(--text-90);
  border-bottom: none;
  padding-bottom: 0;
}
@media (min-width: 640px) {
  .section-header h2 { font-size: 36px; }
}
.section-header p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-35);
  max-width: 512px;
  line-height: 1.7;
}

/* Doc list (section pages) */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.doc-list-item {
  display: block;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  text-decoration: none !important;
  transition: border-color 0.2s, background 0.2s;
}
.doc-list-item:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.02);
  text-decoration: none !important;
}
.doc-list-item *,
.doc-list-item:hover * {
  text-decoration: none !important;
}
.doc-list-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-70);
  margin-bottom: 4px;
  transition: color 0.2s;
}
.doc-list-item:hover .doc-list-title { color: var(--accent); }
.doc-list-desc {
  display: block;
  font-size: 13px;
  color: var(--text-35);
  line-height: 1.5;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
}
.btn-primary:hover {
  background: white;
  color: var(--bg);
}
.btn-outline {
  background: transparent;
  color: var(--text-50);
  border: 1px solid var(--border-interactive);
}
.btn-outline:hover {
  color: var(--text-80);
  border-color: var(--border-hover);
}

/* Ecosystem */
.ecosystem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .ecosystem-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.ecosystem-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.2s;
}
.ecosystem-card:hover {
  border-color: var(--border-hover);
}
.ecosystem-card.current {
  border-color: rgba(0,212,255,0.15);
  background: rgba(0,212,255,0.03);
}
.ecosystem-card .label-accent { margin-bottom: 8px; display: block; }
.ecosystem-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-70);
  margin-bottom: 8px;
}
.ecosystem-card:hover h3 { color: white; }
.ecosystem-card .accent { color: var(--accent); }
.ecosystem-card p {
  font-size: 13px;
  color: var(--text-35);
  line-height: 1.5;
}

/* Container small */
.container-sm {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .container-sm { padding: 0 24px; }
}

/* Section (generic) */
.section {
  padding: 56px 0;
  border-top: 1px solid var(--border-divider);
}
@media (min-width: 640px) {
  .section { padding: 80px 0; }
}
@media (min-width: 768px) {
  .section { margin-left: var(--sidebar-width-tablet); }
}
@media (min-width: 1024px) {
  .section { margin-left: var(--sidebar-width); }
}

/* Container */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .container { padding: 0 24px; }
}

/* ============================================
   CARDS (generic)
   ============================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-25);
  margin-bottom: 24px;
}
.breadcrumbs a {
  color: var(--text-25);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--text-50); }
.breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }
.breadcrumbs .current { color: var(--text-40); }

/* ============================================
   TAGS
   ============================================ */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-card);
  color: var(--text-30);
  text-decoration: none;
  transition: all 0.2s;
}
.tag:hover {
  color: var(--accent);
  border-color: rgba(0,212,255,0.2);
  background: rgba(0,212,255,0.04);
}

/* ============================================
   STATUS CODES
   ============================================ */
.status-code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.status-2xx { color: var(--success); background: rgba(34,197,94,0.1); }
.status-3xx { color: var(--accent); background: rgba(0,212,255,0.1); }
.status-4xx { color: var(--warn); background: rgba(245,158,11,0.1); }
.status-5xx { color: var(--danger); background: rgba(239,68,68,0.1); }

/* ============================================
   RATE LIMIT BAR
   ============================================ */
.rate-limit-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  margin: 1rem 0;
}
.rate-limit-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-25);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rate-limit-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.rate-limit-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--success);
  transition: width 0.5s ease;
}
.rate-limit-fill.warning { background: var(--warn); }
.rate-limit-fill.danger { background: var(--danger); }
.rate-limit-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-40);
  white-space: nowrap;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  border-top: 1px solid var(--border-divider);
  background: var(--bg);
}
@media (min-width: 768px) {
  .footer { margin-left: var(--sidebar-width-tablet); }
}
@media (min-width: 1024px) {
  .footer { margin-left: var(--sidebar-width); }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 48px 0;
}
@media (min-width: 640px) {
  .footer-grid { gap: 48px; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
}

.footer-brand { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .footer-brand { grid-column: 1; }
}
.footer-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
}
.footer-brand-logo img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.footer-brand-logo span {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-50);
}
.footer-brand p {
  font-size: 13px;
  color: var(--text-30);
  line-height: 1.7;
  max-width: 280px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-30);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--text-40);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--text-80); }

.footer-bottom {
  border-top: 1px solid var(--border-divider);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}
.footer-bottom p,
.footer-bottom a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-20);
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}

/* ============================================
   ON THIS PAGE (right sidebar, optional)
   ============================================ */
.on-this-page {
  display: none;
}
@media (min-width: 1280px) {
  .on-this-page {
    display: block;
    position: fixed;
    top: calc(var(--topbar-height) + 32px);
    right: 24px;
    width: 200px;
  }
}
.on-this-page-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-20);
  margin-bottom: 12px;
}
.on-this-page ul {
  list-style: none;
  padding: 0;
}
.on-this-page li { margin-bottom: 6px; }
.on-this-page a {
  font-size: 12px;
  color: var(--text-30);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
  padding: 2px 0;
  border-left: 1px solid transparent;
  padding-left: 12px;
}
.on-this-page a:hover { color: var(--text-60); }
.on-this-page a.active {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ============================================
   SEARCH RESULTS DROPDOWN
   ============================================ */
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #08080F;
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: var(--radius-sm);
  max-height: 360px;
  overflow-y: auto;
  display: none;
  z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,212,255,0.1);
}
.search-results.active { display: block; }
.search-result-item {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--border-divider);
  transition: background 0.15s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(0,212,255,0.05); }
.search-result-item h4 {
  font-size: 13px;
  color: var(--text-90);
  font-weight: 600;
  margin: 0 0 2px 0;
}
.search-result-item:hover h4 { color: var(--accent); }
.search-result-item p {
  font-size: 12px;
  color: var(--text-40);
  margin: 0;
  line-height: 1.4;
}
.search-result-item .search-method {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 4px;
}

/* ============================================
   COPY URL / ANCHOR LINK
   ============================================ */
.anchor-link {
  opacity: 0;
  margin-left: 8px;
  color: var(--text-15);
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
  font-size: 0.85em;
}
h2:hover .anchor-link,
h3:hover .anchor-link {
  opacity: 1;
}
.anchor-link:hover { color: var(--accent); }

/* ============================================
   VERSION SELECTOR
   ============================================ */
.version-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-40);
  cursor: pointer;
  transition: all 0.2s;
}
.version-select:hover {
  border-color: var(--border-hover);
  color: var(--text-60);
}
.version-select select {
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
}

/* ============================================
   TABS (content tabs, not code tabs)
   ============================================ */
.content-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-divider);
  margin-bottom: 24px;
  overflow-x: auto;
}
.content-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-35);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.content-tab:hover { color: var(--text-60); }
.content-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.content-tab-pane { display: none; }
.content-tab-pane.active { display: block; }

/* ============================================
   CHANGELOG
   ============================================ */
.changelog-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-divider);
}
.changelog-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-20);
  margin-bottom: 6px;
}
.changelog-version {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-70);
  margin-bottom: 8px;
}
.changelog-changes {
  list-style: none;
  padding: 0;
}
.changelog-changes li {
  font-size: 13px;
  color: var(--text-40);
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}
.changelog-changes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}
.changelog-tag {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
}
.changelog-tag.added    { color: var(--success); background: rgba(34,197,94,0.1); }
.changelog-tag.changed  { color: var(--accent); background: rgba(0,212,255,0.1); }
.changelog-tag.fixed    { color: var(--warn); background: rgba(245,158,11,0.1); }
.changelog-tag.removed  { color: var(--danger); background: rgba(239,68,68,0.1); }

/* ============================================
   QUICK START STEPS
   ============================================ */
.steps {
  counter-reset: step;
  padding-left: 0;
  list-style: none;
}
.step {
  position: relative;
  padding-left: 48px;
  padding-bottom: 32px;
  border-left: 1px solid var(--border-card);
  margin-left: 16px;
}
.step:last-child { border-left: none; padding-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -16px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,0.2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-80);
  margin: 0 0 8px 0;
}
.step p {
  font-size: 14px;
  color: var(--text-40);
  line-height: 1.7;
  margin: 0;
}

/* ============================================
   INLINE JSON KEY HIGHLIGHTS
   ============================================ */
.json-key { color: #e06c75; }
.json-string { color: #98c379; }
.json-number { color: #d19a66; }
.json-boolean { color: #56b6c2; }
.json-null { color: var(--text-25); }
.json-bracket { color: var(--text-30); }

/* ============================================
   FEATURE GRID (homepage)
   ============================================ */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: all 0.25s ease;
}
.feature-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.feature-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.feature-card-icon svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.feature-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-70);
  margin: 0 0 6px 0;
}
.feature-card p {
  font-size: 13px;
  color: var(--text-35);
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   SDK CARDS
   ============================================ */
.sdk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .sdk-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .sdk-grid { grid-template-columns: repeat(6, 1fr); }
}
.sdk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.2s;
}
.sdk-card:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.02);
}
.sdk-card img, .sdk-card svg {
  width: 28px;
  height: 28px;
}
.sdk-card span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-40);
}
.sdk-card:hover span { color: var(--text-70); }

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.hidden { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* 480px — small phones */
@media (max-width: 479px) {
  .api-hero h1 { font-size: 24px; }
  .api-hero-desc { font-size: 13px; }
  .hero-ip-value { font-size: 16px; }
  .hero-curl { flex-direction: column; }
  .hero-curl code { padding: 8px 12px; overflow-x: auto; }
  .hero-curl .code-copy { border-left: none; border-top: 1px solid var(--border-divider); width: 100%; justify-content: center; }
  .playground-input { flex-direction: column; }
  .playground-url { width: 100%; }
  .playground-send { width: 100%; text-align: center; }
  .endpoint-header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* 640px — large phones */
@media (max-width: 639px) {
  .docs-main { padding: 24px 16px 64px; }
  .prose h2 { font-size: 18px; }
  .code-tabs { padding: 0 2px; }
  .code-tab { padding: 6px 10px; font-size: 10px; }
  .comparison-table-wrap { margin: 1rem -16px; border-radius: 0; border-left: none; border-right: none; }
}

/* 768px — tablets */
@media (max-width: 767px) {
  .sidebar { display: none; }
  .docs-main { margin-left: 0; }
  .api-hero { margin-left: 0; }
  .endpoint-cards-section { margin-left: 0; }
  .comparison-section { margin-left: 0; }
  .footer { margin-left: 0; }
}

/* 1024px — small desktops */
@media (min-width: 1024px) {
  .docs-main { max-width: 800px; }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .topbar,
  .sidebar,
  .mobile-sidebar,
  .sidebar-overlay,
  .topbar-hamburger,
  .on-this-page,
  .code-copy,
  .playground-send,
  .playground-input,
  .search-results,
  .topbar-search {
    display: none !important;
  }

  body {
    background: white;
    color: #111;
    font-size: 12pt;
  }

  .docs-main {
    margin-left: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .footer { margin-left: 0 !important; }

  .api-hero,
  .endpoint-cards-section,
  .comparison-section {
    margin-left: 0 !important;
  }

  .prose h2,
  .prose h3,
  .prose h4 {
    color: #111;
    page-break-after: avoid;
  }

  .prose p, .prose li {
    color: #333;
  }

  .prose pre,
  .code-block {
    background: #f5f5f5;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }

  .prose code,
  .code-content code {
    color: #333;
    background: #eee;
  }

  .param-table,
  .response-table,
  .comparison-table {
    page-break-inside: avoid;
  }

  .param-table th,
  .response-table th,
  .comparison-table th {
    color: #555;
    border-bottom: 2px solid #999;
  }

  .param-table td,
  .response-table td,
  .comparison-table td {
    color: #333;
    border-bottom: 1px solid #ddd;
  }

  .method-badge,
  .auth-badge,
  .badge,
  .status-code,
  .sidebar-method {
    border: 1px solid #999;
    background: #eee;
    color: #333;
  }

  .callout {
    border: 1px solid #ccc;
    background: #f9f9f9;
  }

  a { color: #111; text-decoration: underline; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  .prose a::after { content: " (" attr(href) ")"; }

  .endpoint-card,
  .feature-card,
  .card {
    border: 1px solid #ddd;
    background: #fafafa;
    break-inside: avoid;
  }
}

/* ============================================
   BUILT BY SECTION
   ============================================ */
.built-by {
  padding: 48px 0 0;
  margin-top: 32px;
}
.built-by-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-20);
  margin-bottom: 20px;
  text-align: center;
}
.built-by-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 32px;
  transition: border-color 0.3s ease;
}
.built-by-card:hover {
  border-color: var(--border-hover);
}
.built-by-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.built-by-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
}
.built-by-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-90);
  margin: 0 0 8px 0;
  border-bottom: none;
  padding-bottom: 0;
}
.built-by-since {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-20);
  letter-spacing: 0.1em;
  margin-left: 8px;
  vertical-align: middle;
}
.built-by-desc {
  font-size: 14px;
  color: var(--text-40);
  line-height: 1.7;
  margin: 0;
}
.built-by-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.built-by-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-40);
  text-decoration: none !important;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: rgba(255,255,255,0.02);
  transition: all 0.2s ease;
}
.built-by-links a:hover {
  color: var(--accent);
  border-color: rgba(0,212,255,0.25);
  background: rgba(0,212,255,0.04);
  text-decoration: none !important;
}
@media (max-width: 540px) {
  .built-by-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .built-by-card { padding: 24px; }
  .built-by-links { justify-content: center; }
}