/* API documentation only. Existing chat, theme editor and admin views are untouched. */
body.api-page { display:block; min-height:100vh; padding:clamp(14px,3vw,40px); overflow-x:hidden; color:#edf5ff; font:15px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; }
.api-shell { position:relative; z-index:1; width:min(100%,1020px); margin:auto; display:grid; gap:24px; }
body.api-page .api-card { position:relative; width:100%; min-width:0; padding:clamp(20px,4vw,38px); border:1px solid var(--line); border-radius:24px; }
.api-topbar,.api-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.api-topbar .brand { padding:0; gap:12px; }
.api-topbar .brand strong { letter-spacing:-.045em; font-size:24px; }
.api-topbar .brand-mark::before { display:none; }
.api-badge { color:var(--cyan); font-size:11px; letter-spacing:.1em; padding:3px 9px; border:1px solid var(--line); border-radius:7px; }
.api-language-field,.api-model-field { display:grid; gap:5px; color:var(--muted); font-size:12px; }
.api-language-field select,.api-model-field select { max-width:100%; min-height:44px; padding:8px 30px 8px 12px; border:1px solid var(--line-strong); border-radius:10px; background:#0e1d38; color:var(--text); font-size:16px; }
.api-model-field { min-width:180px; }
.api-card .eyebrow { font-size:10px; letter-spacing:.16em; margin:0 0 8px; }
.api-intro > .eyebrow { margin-top:32px; }
.api-card h1 { margin:0 0 14px; font-size:clamp(32px,5vw,49px); line-height:1.15; letter-spacing:-.045em; color:var(--text); }
.api-card h2 { margin:0 0 22px; font-size:clamp(24px,3vw,32px); line-height:1.3; letter-spacing:-.035em; font-weight:600; }
.api-card h3 { font-size:16px; margin:24px 0 10px; font-weight:600; line-height:1.4; }
.api-card .api-lead { max-width:760px; margin:0 0 24px; font-size:16px; line-height:1.8; }
body.api-page .api-card p { color:var(--muted); }
.api-card .api-small { font-size:12px; line-height:1.7; }
.api-card .primary-button { min-height:48px; padding:12px 20px; width:auto; display:inline-flex; align-items:center; gap:16px; border-radius:12px; font-size:14px; cursor:pointer; }
.api-endpoint-row { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-top:24px; border:1px solid var(--line-strong); border-radius:12px; background:#07142dcc; }
.api-method { flex-shrink:0; color:var(--cyan); font:600 11px/1.5 ui-monospace,Consolas,monospace; }
body.api-page .api-card .api-endpoint-row code { flex:1; min-width:0; margin:0; padding:0; background:none; border:0; font-size:12px; color:var(--text); overflow-wrap:anywhere; }
.api-copy { min-height:44px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:10px; background:#9dbbff0d; color:var(--text); font-size:12px; cursor:pointer; }
.api-copy:hover { background:#9dbbff20; border-color:var(--cyan); }
.api-copy:focus-visible, .api-tabs button:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.api-navigation { display:flex; gap:12px 24px; flex-wrap:wrap; margin-top:24px; font-size:13px; }
.api-navigation a { color:var(--cyan); text-underline-offset:4px; }
.api-navigation a:hover { text-decoration:underline; }
.api-key-result { margin:24px 0; padding:20px; border:1px solid #b6a4ff70; border-radius:14px; background:#a69bff12; }
.api-key-result strong { font-size:16px; }
.api-key-result textarea { display:block; resize:vertical; width:100%; margin:12px 0; padding:13px; color:var(--text); background:#07142dcc; border:1px solid var(--line-strong); border-radius:10px; font:14px/1.6 ui-monospace,Consolas,monospace; }
.api-key-result p { font-size:13px; }
.api-error { border:1px solid #ff9cad66; color:#ffbcc8!important; background:#661b3926; padding:14px; border-radius:12px; }
.api-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; }
.api-steps li { min-width:0; }
.api-step-number { color:var(--violet); font:500 26px/1.4 ui-monospace,Consolas,monospace; }
.api-steps h3 { margin:12px 0 8px; font-size:15px; }
.api-steps p { margin:0; font-size:13px; line-height:1.8; }
.api-card .api-note { margin:24px 0 0; padding:13px 16px; border-left:2px solid var(--violet); border-radius:0 10px 10px 0; background:#ab92ff0a; font-size:12px; line-height:1.8; }
.api-section-heading h2 { margin-bottom:0; }
.api-section-heading + p { margin:16px 0 20px; }
.api-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0 0 16px; padding:5px; border:1px solid var(--line); border-radius:14px; }
.api-tabs button { min-width:0; min-height:46px; padding:9px 6px; color:var(--muted); border:1px solid transparent; border-radius:9px; background:transparent; font-weight:500; font-size:12px; line-height:1.4; cursor:pointer; }
.api-tabs button[aria-selected="true"] { color:var(--text); border-color:#9bccff50; background:linear-gradient(110deg,#82d2ff18,#b6a4ff20); }
.api-code-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:10px 14px; border:1px solid var(--line-strong); border-bottom:0; border-radius:14px 14px 0 0; background:#162442; }
.api-code-heading > span { font:12px/1.5 ui-monospace,Consolas,monospace; color:var(--muted); }
.api-code-actions { display:flex; flex-wrap:wrap; gap:8px; }
.api-code { max-height:520px; margin:0; padding:20px; overflow:auto; border:1px solid var(--line-strong); border-radius:0 0 14px 14px; background:#060f22; tab-size:4; }
body.api-page .api-card :is(.api-code,.api-mini-code,.api-run pre) code { display:block; padding:0; margin:0; border:0; border-radius:0; background:none; color:#deebff; font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; overflow-wrap:normal; }
.api-run { margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#8bbcff08; }
.api-run strong { font-size:13px; }
.api-run p { font-size:13px; margin:6px 0 12px; }
.api-run pre { overflow:auto; margin:0; }
.api-reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.api-reference-grid h3 { margin-top:0; }
.api-reference-grid p { font-size:13px; }
.api-mini-code { padding:14px; border:1px solid var(--line); border-radius:10px; background:#060f22; overflow:auto; }
.api-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
.api-table-wrap table { border-collapse:collapse; width:100%; text-align:left; font-size:13px; }
.api-table-wrap th,.api-table-wrap td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.api-table-wrap thead th { background:#8bbcff0b; color:var(--text); font-size:12px; font-weight:600; }
.api-table-wrap tbody th { font-weight:500; }
.api-table-wrap td { color:var(--muted); }
.api-table-wrap tr:last-child :is(td,th) { border-bottom:0; }
body.api-page .api-card .api-table-wrap code { display:inline; padding:0; margin:0; border:0; background:none; color:var(--cyan); font:12px/1.7 ui-monospace,Consolas,monospace; }
.api-troubleshooting { margin-top:24px; border-top:1px solid var(--line); padding-top:18px; }
.api-troubleshooting summary { min-height:44px; padding:8px 0; cursor:pointer; font-size:14px; color:var(--cyan); }
.api-troubleshooting dl { display:grid; grid-template-columns:110px minmax(0,1fr); gap:18px; margin:16px 0 0; font-size:13px; }
.api-troubleshooting dt { color:var(--violet); font:12px/1.6 ui-monospace,Consolas,monospace; }
.api-troubleshooting dd { margin:0; color:var(--muted); }
.api-footer { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:12px; padding:0 6px 12px; }
.api-toast { position:fixed; z-index:50; bottom:max(20px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); max-width:calc(100vw - 30px); padding:12px 18px; border:1px solid var(--line-strong); border-radius:12px; background:#14223e; color:var(--text); box-shadow:0 8px 30px #0005; font-size:13px; }
.api-toast[hidden] { display:none; }
@media (max-width:700px) { .api-steps { grid-template-columns:minmax(0,1fr); gap:22px; } .api-steps li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; } .api-steps h3 { margin-top:0; } .api-reference-grid { grid-template-columns:minmax(0,1fr); gap:22px; } }
@media (max-width:500px) { .api-shell { gap:16px; } .api-topbar { align-items:flex-start; gap:16px; } .api-language-field { max-width:150px; } .api-endpoint-row { flex-wrap:wrap; gap:8px; } .api-endpoint-row code { flex-basis:calc(100% - 54px)!important; } .api-endpoint-row > button { margin-left:auto; } .api-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } .api-model-field { width:100%; } .api-code { padding:14px; } .api-troubleshooting dl { grid-template-columns:minmax(0,1fr); gap:6px; } .api-troubleshooting dd { margin-bottom:12px; } .api-table-wrap th,.api-table-wrap td { padding:11px; } .api-code-heading { padding:10px; } body.api-page .api-card { -webkit-backdrop-filter:none; backdrop-filter:none; background:#101c36f2; } }
@media (prefers-reduced-motion:no-preference) { .api-copy,.api-tabs button { transition:background 150ms ease,border-color 150ms ease; } }