/* Independent page; palette and typography match the serve admin panel. */
:root {
  color-scheme: light;
  --bg: light-dark(#F2F2F0, #0E0E0E); --panel: light-dark(#FFFFFF, #161616);
  --stripe: light-dark(#F7F7F5, #1B1B1B); --line: light-dark(#DCDCD8, #2A2A2A);
  --line-strong: light-dark(#9C9C97, #5C5C5C); --text: light-dark(#111111, #EDEDED);
  --muted: light-dark(#6B6B68, #9B9B9B); --title-bg: light-dark(#4A4444, #474747);
  --cmd-bg: light-dark(#E8E8E5, #1F1F1F); --hover: light-dark(#EDEDEA, #232323);
  --pos: light-dark(#1B7F3B, #4CC38A); --neg: light-dark(#B3261E, #FF7B72);
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
}
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 12px/1.5 var(--mono); }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; padding: 3px 10px; border: 1px solid var(--line-strong); background: var(--panel); font-weight: 700; letter-spacing: .04em; }
button:hover, a:hover { background: var(--hover); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { min-width: 0; width: 100%; border: 1px solid var(--line-strong); background: var(--panel); padding: 5px 7px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 5px 14px; background: var(--panel); border-bottom: 2px solid var(--title-bg); }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.brand-mark { background: var(--title-bg); color: #FFF; padding: 1px 6px; }
nav { display: flex; align-items: center; gap: 16px; font-size: 10px; letter-spacing: .04em; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; }
.theme-toggle svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
.authbar { padding: 10px 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--line-strong); background: var(--cmd-bg); }
.authbar label { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.authbar label span { display: block; color: var(--muted); }
#api-key { flex: 1; max-width: 520px; min-width: 200px; }
#auth-mode { width: auto; }
.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 242px minmax(0, 1fr); }
aside { overflow: auto; background: var(--panel); border-right: 1px solid var(--line-strong); }
.panel-title { padding: 5px 12px; background: var(--title-bg); color: #FFF; display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.search { padding: 12px; border-bottom: 1px solid var(--line); }
.search label { display: block; font-size: 10px; color: var(--muted); margin-bottom: 6px; letter-spacing: .06em; }
.directory-group { padding: 10px 12px 3px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.directory-link { display: flex; gap: 7px; padding: 5px 12px; text-decoration: none; overflow-wrap: anywhere; border-bottom: 1px dotted var(--line); font-size: 10px; }
.directory-link .method { width: 36px; flex-shrink: 0; font-size: 9px; }
main { overflow: auto; scroll-behavior: smooth; padding: 24px clamp(14px, 3vw, 44px) 48px; }
.intro { margin-bottom: 28px; max-width: 920px; }
.eyebrow { font-size: 10px; color: var(--muted); letter-spacing: .12em; }
h1 { font-size: 26px; font-weight: 500; letter-spacing: -.04em; margin: 8px 0 10px; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.group { margin-bottom: 24px; }
h2 { display: flex; gap: 12px; align-items: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 9px; }
h2 span { color: var(--muted); font-weight: 400; font-size: 10px; }
.endpoint { margin-bottom: 7px; border: 1px solid var(--line-strong); background: var(--panel); scroll-margin-top: 12px; }
.endpoint > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; cursor: pointer; padding: 9px 12px; list-style: none; }
.endpoint > summary::-webkit-details-marker { display: none; }
.endpoint > summary::before { content: "+"; color: var(--muted); }
.endpoint[open] > summary::before { content: "−"; }
.endpoint[open] > summary { background: var(--stripe); border-bottom: 1px solid var(--line); }
.method { font-weight: 700; font-size: 10px; letter-spacing: .04em; }
summary .method { border: 1px solid var(--line-strong); padding: 1px 5px; min-width: 43px; text-align: center; }
.method.post { color: var(--pos); }
.path { font-weight: 700; overflow-wrap: anywhere; }
.summary-text { color: var(--muted); font-size: 10px; }
.access { margin-left: auto; font-size: 9px; letter-spacing: .05em; color: var(--muted); }
.endpoint-body { padding: 14px; }
.endpoint-description { margin: 0 0 15px; color: var(--muted); max-width: 100ch; white-space: pre-wrap; }
.section-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; margin: 18px 0 8px; }
.parameters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px 16px; }
.field { display: grid; grid-template-rows: auto auto 1fr; gap: 4px; min-width: 0; align-content: start; }
.parameters > .field { grid-template-rows: subgrid; grid-row: span 3; }
.field-name { font-weight: 700; overflow-wrap: anywhere; align-self: end; }
.field-meta { display: block; font-weight: 400; color: var(--muted); font-size: 9px; }
.field small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.field textarea { min-height: 90px; resize: vertical; }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.send { background: var(--title-bg); color: #FFF; border-color: var(--title-bg); padding: 5px 16px; }
.send:hover { opacity: .85; background: var(--title-bg); }
.request-url { display: block; color: var(--muted); overflow-wrap: anywhere; margin: 12px 0; font-size: 10px; }
.response-status { font-size: 10px; font-weight: 700; }
.success { color: var(--pos); }
.error { color: var(--neg); }
.response { border: 1px solid var(--line); margin-top: 15px; }
.response-title { background: var(--cmd-bg); padding: 5px 9px; display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
pre { margin: 0; padding: 12px; overflow: auto; max-height: 420px; background: var(--stripe); font: 11px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.response details { border-top: 1px solid var(--line); }
.response details > summary { cursor: pointer; padding: 5px 9px; color: var(--muted); font-size: 10px; }
.download { margin-left: auto; }
.socket-message { width: 100%; min-height: 70px; resize: vertical; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
#load-error { border: 1px solid var(--neg); padding: 15px; color: var(--neg); }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 4px 14px; border-top: 2px solid var(--title-bg); background: var(--panel); font-size: 9px; letter-spacing: .04em; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 800px) {
  .workspace { grid-template-columns: 180px minmax(0, 1fr); }
  .summary-text { flex-basis: 100%; padding-left: 22px; }
  .access { margin-left: 0; }
  .parameters { grid-template-columns: 1fr; }
  footer span:last-child { display: none; }
}
@media (max-width: 580px) {
  body { height: auto; min-height: 100dvh; }
  .topbar { align-items: flex-start; flex-direction: column; }
  nav { width: 100%; justify-content: space-between; }
  .authbar { gap: 8px; }
  .authbar > label:first-child { width: 100%; }
  .authbar label span { display: inline; margin-left: 10px; }
  #api-key { min-width: 100%; max-width: none; }
  .workspace { display: block; }
  aside { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  #directory { max-height: 155px; overflow: auto; }
  main { overflow: visible; }
  h1 { font-size: 23px; }
  footer { margin-top: auto; }
}