/* ============================================================
   NexaAPI Docs — Premium Gold × Black Theme  (Revised)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold-50:  #fffbeb;
  --gold-100: #fef3c7;
  --gold-200: #fde68a;
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --gold-700: #b45309;

  --dark-950: #080808;
  --dark-900: #0d0d0d;
  --dark-850: #111111;
  --dark-800: #161616;
  --dark-750: #1a1a1a;
  --dark-700: #202020;
  --dark-600: #2a2a2a;
  --dark-500: #363636;
  --dark-400: #484848;
  --dark-300: #666666;
  --dark-200: #888888;
  --dark-100: #aaaaaa;

  --green:  #22c55e;
  --red:    #ef4444;
  --orange: #f97316;
  --blue:   #3b82f6;

  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --sidebar-w: 256px;
  --header-h:  56px;
  --content-max: 860px;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--dark-900); }
::-webkit-scrollbar-thumb { background: var(--dark-500); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-600); }

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }

body {
  font-family: var(--font-body);
  background: var(--dark-950);
  color: #d4d4d4;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* ─── LOADER ─────────────────────────────────── */
#page-loader {
  position: fixed; inset: 0;
  background: var(--dark-950);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity .5s, visibility .5s;
}
#page-loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.loader-ring {
  width: 42px; height: 42px;
  border: 3px solid var(--dark-600);
  border-top-color: var(--gold-400);
  border-radius: 50%;
  animation: spin .85s linear infinite;
}
.loader-text {
  font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-500);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── LAYOUT SHELL ───────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ─── LEFT NAV SIDEBAR ────────────────────────── */
#nav-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--dark-900);
  border-right: 1px solid var(--dark-600);
  display: flex; flex-direction: column;
  z-index: 80;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
#nav-sidebar .nav-brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem 1.1rem .9rem;
  border-bottom: 1px solid var(--dark-600);
  text-decoration: none; flex-shrink: 0;
}
.nav-brand-logo {
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(245,158,11,.22);
}
.nav-brand-logo svg { width: 14px; height: 14px; fill: #000; }
.nav-brand-text strong { display: block; font-size: .88rem; color: #fff; font-weight: 700; }
.nav-brand-text small  { font-size: .62rem; color: var(--gold-500); font-weight: 600; letter-spacing: .05em; }

.nav-scroll { flex: 1; overflow-y: auto; padding: .8rem 0; }
.nav-section-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dark-300);
  padding: .55rem 1.1rem .3rem;
}
.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1.1rem;
  font-size: .8rem; color: var(--dark-100);
  text-decoration: none; cursor: pointer;
  transition: color .15s, background .15s;
  border-left: 2px solid transparent;
  background: none; border-right: none; border-top: none; border-bottom: none;
  width: 100%; text-align: left;
}
.nav-item .material-icons { font-size: 15px; flex-shrink: 0; }
.nav-item:hover  { color: var(--gold-400); background: rgba(245,158,11,.05); }
.nav-item.active { color: var(--gold-400); border-left-color: var(--gold-500); background: rgba(245,158,11,.07); }

.nav-tag-badge {
  margin-left: auto;
  background: var(--dark-600); color: var(--dark-200);
  font-size: .58rem; font-weight: 700; padding: 1px 5px; border-radius: 8px;
}

.nav-footer {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--dark-600);
  display: flex; gap: .5rem; flex-shrink: 0;
}
.nav-footer-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem;
  background: var(--dark-700); border: 1px solid var(--dark-500);
  border-radius: 6px; font-size: .7rem; color: var(--dark-200);
  cursor: pointer; text-decoration: none; transition: all .2s;
}
.nav-footer-btn:hover { background: rgba(245,158,11,.1); border-color: var(--gold-600); color: var(--gold-400); }
.nav-footer-btn .material-icons { font-size: 14px; }

/* ─── MAIN CONTENT ───────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  max-width: calc(100vw - var(--sidebar-w));
  overflow-x: hidden;
}

/* ─── TOP HEADER ─────────────────────────────── */
header.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: rgba(13,13,13,.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--dark-600);
  display: flex; align-items: center;
  padding: 0 1.25rem; gap: .85rem;
  overflow: hidden; min-width: 0;
}
.topbar-menu-btn {
  display: none;
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--dark-700); border: 1px solid var(--dark-500);
  color: var(--dark-100); cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.topbar-menu-btn .material-icons { font-size: 17px; }

/* Search bar — hidden for now */
.topbar-search {
  flex: 1;
  max-width: 440px;
  position: relative;
  visibility: hidden;
  pointer-events: none;
}
.topbar-search .material-icons {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--dark-300); font-size: 15px; pointer-events: none;
}
#searchInput {
  width: 100%;
  padding: .5rem .75rem .5rem 2.2rem;
  background: var(--dark-800); border: 1px solid var(--dark-500);
  border-radius: 7px; color: #d4d4d4; font-size: .81rem;
  font-family: var(--font-body); outline: none;
  transition: border-color .2s, box-shadow .2s;
  padding-right: 2rem;
}
#searchInput:focus { border-color: var(--gold-500); box-shadow: 0 0 0 2px rgba(245,158,11,.1); }
#searchInput::placeholder { color: var(--dark-400); }

.search-clear-btn {
  display: none;
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--dark-400); padding: 2px;
  align-items: center; justify-content: center;
  transition: color .15s;
}
.search-clear-btn:hover { color: var(--dark-100); }
.search-clear-btn .material-icons { font-size: 14px; }

.topbar-right { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.topbar-pill {
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem;
  background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.22);
  border-radius: 20px; font-size: .7rem; font-weight: 600;
  color: var(--gold-400); white-space: nowrap;
}
.topbar-pill .material-icons { font-size: 12px; }
.topbar-icon-btn {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--dark-700); border: 1px solid var(--dark-500);
  color: var(--dark-200); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all .2s;
}
.topbar-icon-btn:hover { background: rgba(245,158,11,.1); border-color: var(--gold-600); color: var(--gold-400); }
.topbar-icon-btn .material-icons { font-size: 16px; }

/* ─── PAGE CONTENT ───────────────────────────── */
.page-content {
  flex: 1;
  padding: 1.5rem 1.75rem 4rem;
  max-width: var(--content-max);
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* ─── HERO BANNER ────────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, var(--dark-800) 0%, var(--dark-850) 100%);
  border: 1px solid var(--dark-600);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
}
.hero-banner::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 280px; height: 100%;
  background: radial-gradient(ellipse at right center, rgba(245,158,11,.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero-banner h1 {
  font-size: 1.25rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .35rem;
}
.hero-title-icon {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(245,158,11,.28);
  flex-shrink: 0;
}
.hero-title-icon svg { width: 14px; height: 14px; fill: #000; }
.hero-banner p { font-size: .81rem; color: var(--dark-200); line-height: 1.6; max-width: 500px; }
.hero-stats {
  display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap;
}
.hero-stat {
  display: flex; align-items: center; gap: .35rem;
  background: var(--dark-700); border: 1px solid var(--dark-500);
  border-radius: 6px; padding: .4rem .75rem;
  font-size: .73rem;
}
.hero-stat strong { color: var(--gold-400); font-size: .87rem; }
.hero-stat span   { color: var(--dark-200); }

/* ─── NOTIFICATIONS ──────────────────────────── */
.notif-section { margin-bottom: 1.5rem; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.section-title {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--dark-200);
}
.section-title .material-icons { font-size: 14px; color: var(--gold-500); }
.notif-badge {
  background: var(--gold-500); color: #000;
  font-size: .58rem; font-weight: 800;
  padding: 1px 6px; border-radius: 10px; display: none;
}
.notif-card {
  background: var(--dark-800);
  border: 1px solid var(--dark-600);
  border-radius: 9px; padding: .8rem 1rem;
  margin-bottom: .45rem; font-size: .8rem;
  transition: border-color .2s;
  animation: fadeUp .4s ease forwards; opacity: 0;
}
.notif-card.unread { border-left: 2px solid var(--gold-500); }
.notif-card:hover  { border-color: var(--gold-700); }
.notif-title { font-weight: 600; color: #e0e0e0; margin-bottom: .2rem; }
.notif-msg   { color: var(--dark-200); line-height: 1.6; }
.notif-meta  { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; }
.notif-dot   { width: 5px; height: 5px; background: var(--gold-500); border-radius: 50%; flex-shrink: 0; }
.notif-date  { font-size: .68rem; color: var(--dark-300); }

/* ─── CATEGORY GROUP ─────────────────────────── */
.category-group {
  margin-bottom: 1.1rem;
  animation: fadeUp .4s ease forwards; opacity: 0;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.cat-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem;
  background: var(--dark-800);
  border: 1px solid var(--dark-600);
  border-radius: 8px;
  cursor: pointer; user-select: none;
  transition: background .15s;
}
.cat-header:hover { background: var(--dark-750); }
/* When expanded: square bottom corners */
.category-group.cat-expanded .cat-header {
  border-radius: 8px 8px 0 0;
  border-bottom-color: var(--dark-700);
}

.cat-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .73rem; flex-shrink: 0;
}
.cat-name  { font-weight: 700; font-size: .84rem; color: #e0e0e0; }
.cat-count {
  background: rgba(245,158,11,.1); color: var(--gold-400);
  font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 8px;
}
.cat-chevron { margin-left: auto; flex-shrink: 0; }

/* ─── SVG CHEVRON ────────────────────────────── */
.chevron-container {
  --color: var(--dark-300);
  --size: 14px;
  display: flex; justify-content: center; align-items: center;
  position: relative; cursor: pointer;
  font-size: var(--size); user-select: none;
  fill: var(--color);
  width: var(--size); height: var(--size);
  pointer-events: none;
}
.chevron-container .chevron-right {
  position: absolute; width: var(--size); height: var(--size);
  animation: keyframes-return .3s;
}
.chevron-container .chevron-down {
  position: absolute; display: none;
  width: var(--size); height: var(--size);
  animation: keyframes-fill .3s;
}
.chevron-container input:checked ~ .chevron-right { display: none; }
.chevron-container input:checked ~ .chevron-down  { display: block; }
.chevron-container input {
  position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;
}
@keyframes keyframes-fill   { 0% { transform: rotate(-90deg) scale(0); opacity:0; } 50% { transform: rotate(0deg) scale(1.2); } }
@keyframes keyframes-return { 0% { transform: rotate(90deg)  scale(0); opacity:0; } 50% { transform: rotate(0deg) scale(1.2); } }

.category-group.cat-expanded .cat-chevron { fill: var(--gold-500); --color: var(--gold-500); }
.api-item.expanded .api-chevron           { fill: var(--gold-500); --color: var(--gold-500); }

/* Category body */
.cat-body { display: none; }
.category-group.cat-expanded .cat-body { display: block; }
.cat-items {
  border: 1px solid var(--dark-600); border-top: none;
  border-radius: 0 0 8px 8px; overflow: hidden;
}

/* ─── API ITEM ───────────────────────────────── */
.api-item {
  border-bottom: 1px solid var(--dark-700);
  transition: background .1s;
}
.api-item:last-child { border-bottom: none; }

.api-item-head {
  padding: .75rem 1rem; cursor: pointer;
  display: flex; align-items: center; gap: .7rem;
  transition: background .15s;
}
.api-item-head:hover { background: rgba(245,158,11,.04); }
.api-item.expanded > .api-item-head { background: rgba(245,158,11,.06); }

/* Method badges */
.method-badge {
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .04em;
}
.method-badge.get    { background: rgba(34,197,94,.1);  color: #4ade80; border: 1px solid rgba(34,197,94,.2); }
.method-badge.post   { background: rgba(59,130,246,.1); color: #60a5fa; border: 1px solid rgba(59,130,246,.2); }
.method-badge.put    { background: rgba(249,115,22,.1); color: #fb923c; border: 1px solid rgba(249,115,22,.2); }
.method-badge.delete { background: rgba(239,68,68,.1);  color: #f87171; border: 1px solid rgba(239,68,68,.2); }
.method-badge.patch  { background: rgba(168,85,247,.1); color: #c084fc; border: 1px solid rgba(168,85,247,.2); }

.api-path    { font-family: var(--font-mono); font-size: .78rem; color: #c4c4c4; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.api-path em { color: var(--gold-400); font-style: normal; font-weight: 600; }
.api-summary { font-size: .75rem; color: var(--dark-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.api-chevron { margin-left: .5rem; flex-shrink: 0; }

/* ─── API BODY ───────────────────────────────── */
.api-body { display: none; background: var(--dark-850); border-top: 1px solid var(--dark-700); }
.api-item.expanded .api-body { display: block; }

.api-body-inner {
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  gap: 0;
}
.api-body-left {
  padding: 1.1rem 1.1rem 1.1rem 1rem;
  border-right: 1px solid var(--dark-700);
  min-width: 0;
}
.api-body-right {
  padding: 1.1rem 1rem 1.1rem 1.1rem;
  background: var(--dark-900);
  min-width: 0;
}

.api-desc {
  font-size: .79rem; color: var(--dark-200);
  line-height: 1.7; margin-bottom: 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--dark-700);
}

/* Block label */
.blk-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dark-300);
  margin-bottom: .55rem;
  display: flex; align-items: center; justify-content: space-between;
}
.blk-label .gold { color: var(--gold-500); }

/* ─── TRY-IT FORM ────────────────────────────── */
.try-form {
  background: var(--dark-800);
  border: 1px solid var(--dark-600);
  border-radius: 8px; padding: .9rem;
  margin-bottom: .9rem;
}
.no-params-msg { font-size: .75rem; color: var(--dark-400); margin-bottom: .6rem; }
.form-field { margin-bottom: .75rem; }
.form-field:last-of-type { margin-bottom: 0; }
.form-label {
  font-size: .7rem; font-weight: 600; color: var(--dark-200);
  margin-bottom: .35rem; display: flex; align-items: center; gap: .35rem;
}
.form-input, .form-select {
  width: 100%; padding: .5rem .75rem;
  background: var(--dark-900); border: 1px solid var(--dark-500);
  border-radius: 6px; color: #d4d4d4; font-size: .8rem;
  font-family: var(--font-body); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-select:focus {
  border-color: var(--gold-500); box-shadow: 0 0 0 2px rgba(245,158,11,.1);
}
.form-input::placeholder { color: var(--dark-400); }
.form-select { cursor: pointer; }
.form-select option { background: var(--dark-800); }

/* Badges */
.req-badge {
  font-size: .58rem; background: rgba(239,68,68,.1); color: #f87171;
  border: 1px solid rgba(239,68,68,.2); border-radius: 3px; padding: 1px 5px;
}
.opt-badge {
  font-size: .58rem; background: var(--dark-700); color: var(--dark-300);
  border: 1px solid var(--dark-500); border-radius: 3px; padding: 1px 5px;
}

.btn-row { display: flex; gap: .45rem; align-items: center; margin-top: .9rem; flex-wrap: wrap; }
.btn-execute {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem 1.15rem;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: #000; border: none;
  border-radius: 6px; font-size: .79rem; font-weight: 700;
  cursor: pointer; transition: all .2s;
  box-shadow: 0 2px 8px rgba(245,158,11,.22);
}
.btn-execute:hover  { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); box-shadow: 0 4px 12px rgba(245,158,11,.32); transform: translateY(-1px); }
.btn-execute:active { transform: none; }
.btn-execute i      { font-size: .7rem; }

.btn-clear {
  display: none;
  padding: .5rem .9rem;
  background: var(--dark-700); color: var(--dark-200);
  border: 1px solid var(--dark-500); border-radius: 6px;
  font-size: .79rem; font-weight: 500; cursor: pointer;
  transition: all .2s;
}
.btn-clear:hover { border-color: var(--dark-400); color: #e0e0e0; }



/* ─── RESPONSE PANEL ─────────────────────────── */
.response-block { display: none; margin-bottom: .9rem; }
.response-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem;
}
.status-pill {
  font-size: .63rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
}
.status-ok  { background: rgba(34,197,94,.13); color: #4ade80; }
.status-err { background: rgba(239,68,68,.13); color: #f87171; }

.response-wrap {
  position: relative;
  max-height: 210px; overflow: hidden;
  transition: max-height .3s ease;
  border-radius: 7px;
}
.response-wrap.resp-collapsed { max-height: 55px; }
.response-wrap::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(transparent, var(--dark-950));
  pointer-events: none; border-radius: 0 0 7px 7px;
}

.response-pre {
  background: var(--dark-950);
  border: 1px solid var(--dark-700);
  border-radius: 7px; padding: .75rem .9rem;
  font-family: var(--font-mono); font-size: .7rem;
  line-height: 1.7; color: #c8c8c8; overflow-x: auto;
  max-height: 210px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-all;
  max-width: 100%; margin: 0;
}
.resp-collapsed .response-pre { overflow-y: hidden; max-height: 55px; }

.resp-copy-btn {
  background: var(--dark-700); border: 1px solid var(--dark-500);
  cursor: pointer; font-size: .63rem; color: var(--dark-300);
  padding: 2px 8px; border-radius: 4px;
  transition: all .15s; margin-left: auto;
  display: flex; align-items: center; gap: .3rem;
}
.resp-copy-btn:hover  { background: rgba(245,158,11,.1); border-color: var(--gold-600); color: var(--gold-400); }
.resp-copy-btn.copied { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #4ade80; }

.toggle-resp-btn {
  background: var(--dark-700); border: 1px solid var(--dark-500);
  cursor: pointer; font-size: .63rem; color: var(--dark-300);
  padding: 2px 6px; border-radius: 4px;
  transition: all .15s; display: flex; align-items: center;
}
.toggle-resp-btn:hover { background: rgba(245,158,11,.1); border-color: var(--gold-600); color: var(--gold-400); }

/* ─── CURL SNIPPET ───────────────────────────── */
.curl-section { margin-top: .9rem; }
.curl-block {
  background: var(--dark-950);
  border: 1px solid var(--dark-700);
  border-radius: 7px;
  overflow: hidden;
  margin-top: .5rem; max-width: 100%;
}
.curl-block-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem .75rem;
  background: var(--dark-800);
  border-bottom: 1px solid var(--dark-700);
}
.curl-block-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dark-400);
}
.curl-copy-btn {
  background: var(--dark-700); border: 1px solid var(--dark-500);
  color: var(--dark-200); font-size: .62rem; padding: 2px 8px;
  border-radius: 4px; cursor: pointer; transition: all .15s; white-space: nowrap;
  display: flex; align-items: center; gap: .28rem;
}
.curl-copy-btn:hover  { background: rgba(245,158,11,.1); border-color: var(--gold-600); color: var(--gold-400); }
.curl-copy-btn.copied { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #4ade80; }
.curl-block-body {
  padding: .7rem .9rem;
  font-family: var(--font-mono); font-size: .68rem;
  color: #a0c4ff; line-height: 1.75; overflow-x: auto;
  overflow-y: hidden; word-break: break-all;
}

/* ─── RIGHT PANEL ────────────────────────────── */
.right-section { margin-bottom: 1rem; }
.right-section:last-child { margin-bottom: 0; }

.status-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.status-table th {
  background: var(--dark-800); padding: .4rem .7rem;
  text-align: left; font-size: .65rem; color: var(--dark-300);
  border: 1px solid var(--dark-600);
  text-transform: uppercase; letter-spacing: .05em;
}
.status-table td { padding: .45rem .7rem; border: 1px solid var(--dark-700); }
.code-2xx { color: #4ade80; font-family: var(--font-mono); font-weight: 700; }
.code-4xx { color: #f87171; font-family: var(--font-mono); font-weight: 700; }
.code-5xx { color: #fb923c; font-family: var(--font-mono); font-weight: 700; }

.base-url-box {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .71rem;
  background: var(--dark-950); border: 1px solid var(--dark-700);
  border-radius: 6px; padding: .55rem .8rem; word-break: break-all;
}
.base-url-method { color: var(--dark-300); flex-shrink: 0; }
.base-url-path   { color: var(--gold-400); }

/* ─── NO RESULTS ─────────────────────────────── */
#noResults {
  display: none; text-align: center; padding: 3rem;
  color: var(--dark-300); font-size: .83rem;
}
#noResults .material-icons { font-size: 2.2rem; display: block; margin-bottom: .65rem; color: var(--dark-500); }

/* ─── OVERLAY (mobile) ───────────────────────── */
#overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 70;
}
#overlay.show { display: block; }

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 900px) {
  .api-body-inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width: 768px) {
  #nav-sidebar { transform: translateX(-100%); }
  #nav-sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; max-width: 100vw; }
  .topbar-menu-btn { display: flex; }
  .api-body-inner { grid-template-columns: 1fr; }
  .api-body-left  { border-right: none; border-bottom: 1px solid var(--dark-700); }
  .page-content   { padding: 1.1rem .9rem 4rem; }
  .hero-banner    { padding: 1.1rem 1.25rem; }
  .topbar-pill    { display: none; }
}

@media (max-width: 480px) {
  .hero-stats  { gap: .5rem; }
  .hero-stat   { padding: .35rem .6rem; font-size: .68rem; }
  .api-item-head { flex-wrap: wrap; }
  .api-summary   { display: none; }
  .page-content  { padding: .9rem .75rem 4rem; }
}

.watermark {
  position: fixed;
  bottom: 20px;
  right: 25px;
  font-size: 14px;
  letter-spacing: 2px;
  color: rgba(255, 215, 0, 0.25);
  font-family: Arial, sans-serif;

  padding: 6px 12px;
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 8px;

  backdrop-filter: blur(3px);
  background: rgba(0, 0, 0, 0.15);

  pointer-events: none;
  z-index: 9999;

  transition: 0.3s ease;
}

.watermark:hover {
  color: rgba(255, 215, 0, 0.5);
  transform: scale(1.05);
}