/*! HashBack API documentation — extracted from documentation.php */

/* The docs page does not load hashstyles.css, so the brand face is declared
   here too — otherwise --font-brand resolves to nothing and the page falls back
   to the browser default. Same two files, same weight ranges. */
@font-face {
    font-family: 'Century Gothic';
    src: url('../font/centurygothic.ttf') format('truetype');
    font-weight: 100 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century Gothic';
    src: url('../font/centurygothic_bold.ttf') format('truetype');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-brand: 'Century Gothic', CenturyGothic, 'URW Gothic', 'Jost', 'Questrial', AppleGothic, sans-serif;

    /* Brand colours matching main.css */
    --accent:  #41aa28;
    --accent2: #4154f1;
    --accent3: #febc2e;
    --bg:      #090b12;
    --bg2:     #0f1118;
    --bg3:     #161a28;
    --bg4:     #111520;
    --surface: #1a1f30;
    --border:  rgba(65,84,241,.16);
    --border-g: rgba(0,179,0,.18);
    --border-hi: rgba(255,255,255,.13);
    --txt:  #c2c8e8;
    --txt2: #7a85b0;
    --txt3: #4a5270;
    --white: #f0f2ff;
    --nav-h: 60px;
    --sidebar-w: 25%;
    --right-w: 25%;
    --radius: 10px;
    --font-mono: 'Space Mono', monospace;
    --font-head: var(--font-brand);
    --font-body: var(--font-brand);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body { font-family: var(--font-body); background: var(--bg); color: var(--txt); overflow-x: hidden; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent2), var(--accent)); border-radius: 3px; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; background: none; border: none; }

/* ── TOP NAV ── */
.topnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--nav-h); background: rgba(9,11,18,0.94);
    backdrop-filter: blur(18px); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px; padding: 0 24px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.nav-logo img { height: 36px; width: auto; }
.nav-tag { background: rgba(65,84,241,.12); border: 1px solid rgba(65,84,241,.25); color: var(--accent2); font-family: var(--font-mono); font-size: .6rem; padding: 2px 9px; border-radius: 100px; font-weight: 700; letter-spacing: .04em; }
.nav-search { flex: 1; max-width: 340px; margin: 0 auto; display: flex; align-items: center; gap: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; height: 36px; transition: border-color .2s; }
.nav-search:focus-within { border-color: var(--accent2); }
.nav-search i { color: var(--txt3); font-size: .8rem; }
.nav-search input { flex:1; background: none; border: none; outline: none; color: var(--txt); font-size: .83rem; font-family: var(--font-body); }
.nav-search input::placeholder { color: var(--txt3); }
.nav-tabs-top { display: flex; align-items: center; gap: 6px; margin-left: 14px; }
.nav-tab-top { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--txt2);
    padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(199,146,234,.28); background: rgba(199,146,234,.08); transition: .2s; }
.nav-tab-top:hover { color: var(--txt); border-color: rgba(199,146,234,.55); background: rgba(199,146,234,.16); }
.nav-tab-top i { color: #c792ea; }
.nav-tab-pill { font-family: var(--font-mono); font-size: .55rem; font-weight: 700; letter-spacing: .06em;
    padding: 2px 6px; border-radius: 100px; background: rgba(65,170,40,.14); color: var(--accent); border: 1px solid rgba(65,170,40,.2); }
@media(max-width:900px) { .nav-tabs-top { display: none; } }

/* Partner pricing highlight */
.partner-price { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; background: var(--bg3);
    border: 1px solid rgba(199,146,234,.28); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.partner-price-fig { font-family: var(--font-head); font-size: 2.1rem; font-weight: 800; color: var(--white); line-height: 1; }
.partner-price-fig small { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
    text-transform: uppercase; color: #c792ea; margin-top: 6px; font-weight: 700; }
.partner-price-copy { flex: 1; min-width: 220px; font-size: .87rem; line-height: 1.65; color: var(--txt2); }

.partner-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.btn-download { display: inline-flex; align-items: center; gap: 9px; background: rgba(199,146,234,.12);
    border: 1px solid rgba(199,146,234,.35); color: #e6d4f7; font-size: .84rem; font-weight: 600;
    padding: 10px 18px; border-radius: 9px; transition: .2s; }
.btn-download:hover { background: rgba(199,146,234,.22); border-color: rgba(199,146,234,.6); color: #fff; }
.btn-download i { color: #c792ea; }
.partner-actions-note { font-size: .76rem; color: var(--txt3); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn-wa { display: inline-flex; align-items: center; gap: 6px; background: rgba(65,170,40,.1); border: 1px solid rgba(65,170,40,.22); color: var(--accent); font-size: .78rem; font-weight: 600; padding: 7px 15px; border-radius: 8px; transition: background .2s; }
.btn-wa:hover { background: rgba(65,170,40,.18); }
.btn-back { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); color: var(--txt2); font-size: .78rem; font-weight: 500; padding: 7px 13px; border-radius: 8px; transition: border-color .2s; }
.btn-back:hover { border-color: var(--border-hi); color: var(--txt); }
.menu-btn { display: none; border: 1px solid var(--border); color: var(--txt2); border-radius: 7px; width: 36px; height: 36px; align-items: center; justify-content: center; font-size: .9rem; }

/* ── 3-COLUMN LAYOUT (3 / 6 / 3) ── */
.layout { display: grid; grid-template-columns: 25% 50% 25%; min-height: 100vh; padding-top: var(--nav-h); }

/* ── SIDEBAR ── */
.sidebar { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; background: var(--bg2); border-right: 1px solid var(--border); padding: 24px 0 48px; }
.sb-section { margin-bottom: 8px; }
.sb-section-label { font-family: var(--font-mono); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--txt3); padding: 16px 22px 7px; }
.sb-item, .sb-sub-item { display: flex; align-items: center; gap: 11px; padding: 10px 22px; font-size: .87rem; color: var(--txt2); border-left: 3px solid transparent; transition: all .15s; cursor: pointer; line-height: 1.4; }
.sb-item i, .sb-sub-item i { font-size: .82rem; width: 16px; text-align: center; flex-shrink: 0; }
.sb-item:hover, .sb-sub-item:hover { color: var(--white); background: rgba(65,84,241,.06); border-left-color: var(--border-hi); }
.sb-item.active, .sb-sub-item.active { color: var(--white); border-left-color: var(--accent); background: rgba(65,170,40,.07); font-weight: 600; }
.sb-item.active i, .sb-sub-item.active i { color: var(--accent); }
.sb-divider { height: 1px; background: var(--border); margin: 10px 22px; }
.sb-api-group { margin-bottom: 4px; }
.sb-api-group-header { display: flex; align-items: center; gap: 10px; padding: 11px 22px; font-size: .85rem; font-weight: 700; color: var(--txt); cursor: pointer; transition: background .15s; }
.sb-api-group-header:hover { background: rgba(65,84,241,.06); }
.sb-api-group-header i { font-size: .82rem; width: 16px; text-align: center; flex-shrink: 0; }
.sb-sub-item { padding-left: 38px; font-size: .83rem; }
.group-badge { font-family: var(--font-mono); font-size: .57rem; padding: 2px 8px; border-radius: 100px; margin-left: auto; background: rgba(65,84,241,.12); color: var(--accent2); border: 1px solid rgba(65,84,241,.2); }
.method-pill-sm { font-family: var(--font-mono); font-size: .55rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(65,170,40,.1); color: var(--accent); border: 1px solid rgba(65,170,40,.15); flex-shrink: 0; }
.sb-wa-card { margin: 20px 16px 0; background: rgba(65,170,40,.06); border: 1px solid rgba(65,170,40,.15); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; color: var(--accent); }
.sb-wa-card-text { font-size: .85rem; font-weight: 600; }
.sb-wa-card-sub { font-size: .75rem; color: var(--txt2); }
.sb-wa-card i { font-size: 1.3rem; flex-shrink: 0; }

/* ── CENTRE CONTENT ── */
.content { padding: 44px 52px 90px; border-right: 1px solid var(--border); min-width: 0; }

/* ── RIGHT PANEL ── */
.right-panel { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; background: var(--bg2); padding: 28px 18px; }

/* ── DOC SECTIONS ── */
.doc-section { padding-bottom: 64px; border-bottom: 1px solid var(--border); margin-bottom: 64px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.hero { margin-bottom: 48px; }
.hero h1 { font-family: var(--font-head); font-size: 2.3rem; font-weight: 800; color: var(--white); line-height: 1.15; }
.hero h1 span { color: var(--accent); }
.hero > p { font-size: .95rem; color: var(--txt2); line-height: 1.75; margin-top: 14px; max-width: 600px; }
.section-head { font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: var(--white); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.section-head i { color: var(--accent2); font-size: 1.1rem; }
.section-sub { font-size: .9rem; color: var(--txt2); line-height: 1.75; margin-bottom: 22px; }
.section-head-sm { font-size: .9rem; font-weight: 700; color: var(--txt); margin: 20px 0 10px; }
.bullet-list { margin: 0 0 18px 18px; padding: 0; list-style: disc; color: var(--txt2); font-size: .87rem; line-height: 1.75; }
.bullet-list li { margin-bottom: 6px; }
.bullet-list li::marker { color: var(--accent2); }
.api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 40px; }
.api-nav-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; display: flex; gap: 14px; align-items: flex-start; transition: .2s; }
.api-nav-card:hover { border-color: var(--accent2); background: var(--surface); }
.anc-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.anc-icon.green { background: rgba(65,170,40,.12); color: var(--accent); border: 1px solid rgba(65,170,40,.18); }
.anc-icon.blue  { background: rgba(65,84,241,.12);  color: var(--accent2); border: 1px solid rgba(65,84,241,.2); }
.anc-icon.orange{ background: rgba(254,188,46,.1);  color: var(--accent3); border: 1px solid rgba(254,188,46,.2); }
.anc-icon.purple{ background: rgba(199,146,234,.1); color: #c792ea; border: 1px solid rgba(199,146,234,.2); }
.anc-info h4 { font-size: .88rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.anc-info p  { font-size: .78rem; color: var(--txt2); line-height: 1.5; }

/* ── ENDPOINT BLOCKS ── */
.endpoint-block { margin-bottom: 32px; }
.endpoint-label { font-size: .78rem; font-weight: 700; color: var(--txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; font-family: var(--font-mono); }
.method-row { display: flex; align-items: center; gap: 10px; background: var(--bg4); border: 1px solid var(--border); border-radius: 8px; padding: 11px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.method-badge { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; padding: 4px 11px; border-radius: 5px; background: rgba(65,170,40,.12); color: var(--accent); border: 1px solid rgba(65,170,40,.2); }
.method-badge.post { background: rgba(65,170,40,.12); color: var(--accent); border-color: rgba(65,170,40,.2); }
.method-url { font-family: var(--font-mono); font-size: .78rem; color: #7dd3fc; word-break: break-all; flex:1; }
.copy-btn-sm { border: 1px solid var(--border); color: var(--txt3); border-radius: 5px; padding: 3px 8px; font-size: .7rem; display: flex; align-items: center; gap: 4px; transition: .15s; }
.copy-btn-sm:hover { border-color: var(--accent2); color: var(--accent2); }

/* ── TABLES ── */
.param-table { width: 100%; border-collapse: collapse; font-size: .83rem; background: var(--bg3); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.param-table th { background: var(--bg4); color: var(--txt3); font-size: .68rem; font-weight: 700; padding: 10px 16px; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.param-table td { padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.bt { font-family: var(--font-mono); font-size: .68rem; padding: 2px 8px; border-radius: 4px; }
.bt-str { background: rgba(65,84,241,.1); color: var(--accent2); }
.bt-req { background: rgba(224,108,117,.1); color: #e06c75; }
.bt-opt { background: rgba(254,188,46,.1); color: var(--accent3); }

/* ── CODE BLOCKS ── */
.code-block { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); margin: 12px 0 20px; }
.code-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--bg3); border-bottom: 1px solid var(--border); }
.code-lang-tag { display: flex; align-items: center; gap: 7px; font-size: .72rem; color: var(--txt3); font-family: var(--font-mono); }
.code-lang-tag i { font-size: .75rem; }
pre { padding: 18px; overflow-x: auto; font-family: var(--font-mono); font-size: .77rem; color: var(--txt2); white-space: pre; line-height: 1.65; }
.copy-code-btn { border: 1px solid var(--border); color: var(--txt3); border-radius: 5px; padding: 3px 10px; font-size: .7rem; display: flex; align-items: center; gap: 5px; transition: .15s; }
.copy-code-btn:hover { border-color: var(--accent2); color: var(--accent2); }

/* ── TABS ── */
.tabs { display: flex; background: var(--bg3); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.tab-btn { padding: 9px 16px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; color: var(--txt3); border-right: 1px solid var(--border); transition: .15s; }
.tab-btn:hover { color: var(--txt); background: rgba(255,255,255,.03); }
.tab-btn.active { color: var(--accent2); background: var(--bg); }
.tabs-body { background: var(--bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── CALLOUTS ── */
.callout { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; font-size: .87rem; line-height: 1.6; }
.callout i { margin-top: 2px; flex-shrink: 0; font-size: .9rem; }
.callout.info  { background: rgba(65,84,241,.07);  border: 1px solid rgba(65,84,241,.2);  color: var(--txt); }
.callout.info i { color: var(--accent2); }
.callout.warn  { background: rgba(254,188,46,.07); border: 1px solid rgba(254,188,46,.2); color: var(--txt); }
.callout.warn i { color: var(--accent3); }
.callout.success { background: rgba(65,170,40,.07); border: 1px solid rgba(65,170,40,.2); color: var(--txt); }
.callout.success i { color: var(--accent); }

/* ── HERO BADGES ── */
.hero-eyebrow { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--accent); font-weight: 600; margin-bottom: 14px; font-family: var(--font-mono); }
.live-ping { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; box-shadow: 0 0 0 3px rgba(65,170,40,.25); animation: ping 2s infinite; }
@keyframes ping { 0%,100%{box-shadow:0 0 0 3px rgba(65,170,40,.25)} 50%{box-shadow:0 0 0 6px rgba(65,170,40,.08)} }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hbadge { display: inline-flex; align-items: center; gap: 6px; background: var(--bg3); border: 1px solid var(--border); color: var(--txt2); font-size: .77rem; padding: 5px 12px; border-radius: 100px; }
.hbadge i { font-size: .75rem; color: var(--accent2); }

/* ── RIGHT PANEL ── */
.rp-label { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--txt3); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.rp-label i { font-size: .75rem; color: var(--accent2); }
.rp-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.rp-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.rp-title { font-size: .75rem; color: var(--txt2); font-weight: 600; }
.rp-copy { font-size: .67rem; color: var(--accent2); font-family: var(--font-mono); border: 1px solid rgba(65,84,241,.25); border-radius: 4px; padding: 2px 8px; transition: .15s; }
.rp-copy:hover { background: rgba(65,84,241,.12); }
.rp-pre { padding: 8px 12px; font-family: var(--font-mono); font-size: .73rem; color: var(--txt2); }

/* ── SUPPORT ── */
.support-card { background: linear-gradient(135deg, rgba(65,170,40,.06), rgba(65,84,241,.06)); border: 1px solid var(--border); border-radius: 14px; padding: 36px; text-align: center; }
.support-card h3 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.support-card p { font-size: .9rem; color: var(--txt2); line-height: 1.7; }
.btn-wa-lg { background: var(--accent); color: #000; font-weight: 700; padding: 11px 26px; border-radius: 10px; display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-size: .9rem; transition: opacity .2s; }
.btn-wa-lg:hover { opacity: .88; }

/* ── RESPONSIVE ── */
@media(max-width: 1200px) {
    .layout { grid-template-columns: 280px 1fr; }
    .right-panel { display: none; }
    .content { border-right: none; }
}
@media(max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left:0; top:var(--nav-h); width:280px; z-index:150; transform: translateX(-100%); transition: .3s; }
    .sidebar.open { transform: translateX(0); }
    .content { padding: 30px 22px 60px; }
    .menu-btn { display: flex; }
    .sidebar-overlay { display: none; position: fixed; inset:0; z-index:140; background:rgba(0,0,0,.6); }
    .sidebar-overlay.show { display: block; }
    .api-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) { .hero h1 { font-size:1.8rem; } .nav-search { display:none; } .content { padding: 24px 16px 60px; } }

/* ══════════════════════════════════════════════════════════════════════════
   UTILITIES
   These replace the style="" attributes that were scattered through the
   markup. Kept deliberately few: spacing on a fixed scale, and colour roles
   that already exist as custom properties.
   ══════════════════════════════════════════════════════════════════════════ */
.t-muted      { color: var(--txt2); }
.t-dim        { color: var(--txt3); }
.t-accent     { color: var(--accent);  font-weight: 600; }
.t-accent2    { color: var(--accent2); font-weight: 600; }
.t-blue       { color: var(--accent2); }
.t-warn       { color: #f9d56e; }
.t-err        { color: #ef9a9a; }
.t-note       { font-weight: 400; color: var(--txt3); font-size: .8rem; }
.i-lead       { color: var(--accent);  margin-right: 6px; }
.i-lead-blue  { color: var(--accent2); margin-right: 6px; }
.mono-accent  { font-family: var(--font-mono); color: var(--accent); font-size: .7rem; }

.mt-xs { margin-top: 2px; }
.mt-1  { margin-top: 10px; }
.mt-2  { margin-top: 12px; }
.mt-3  { margin-top: 14px; }
.mt-4  { margin-top: 16px; }
.mt-5  { margin-top: 18px; }
.mt-6  { margin-top: 20px; }
.mb-1  { margin-bottom: 6px; }
.mb-2  { margin-bottom: 14px; }
.mb-3  { margin-bottom: 16px; }
.ml-1  { margin-left: 6px; }
.is-hidden { display: none; }

.note-sm { margin-top: 10px; font-size: .82rem; color: var(--txt3); }
.note-md { margin-top: 16px; font-size: .82rem; color: var(--txt2); }

.group-badge.blue { background: rgba(65,84,241,.12); color: var(--accent2); border-color: rgba(65,84,241,.2); }

/* Payment-button demo */
.demo-card    { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 22px; max-width: 420px; }
.demo-pay-btn { width: 100%; padding: 13px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-size: .95rem; font-weight: 700; cursor: pointer; }
.demo-out     { font-size: .8rem; font-weight: 600; min-height: 18px; margin-top: 12px; color: var(--accent); }

/* Error-code section glyphs */
.err-glyph { font-size: 2.5rem; color: var(--accent); }
.err-emoji { font-size: 2rem; margin-bottom: 12px; }

.doc-footer {
    background: var(--bg2); border-top: 1px solid var(--border); padding: 16px 24px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; font-size: .77rem; color: var(--txt3);
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTHORIZE PANEL
   The permanent API key never reaches this page. Everything here is either a
   masked display value or a session-scoped flag; Execute is proxied server
   side. See api/docs-auth.php and api/docs-try.php.
   ══════════════════════════════════════════════════════════════════════════ */
.auth-panel {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px; margin-bottom: 22px;
}
.auth-panel.is-authorized { border-color: rgba(65,170,40,.35); background: rgba(65,170,40,.05); }

.auth-row      { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-state    { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--white); }
.auth-state i  { font-size: .95rem; }
.auth-state.ok i  { color: var(--accent); }
.auth-state.off i { color: var(--txt3); }

.auth-account  { font-family: var(--font-mono); font-size: .82rem; color: var(--txt); }
.auth-key      { font-family: var(--font-mono); font-size: .8rem; color: var(--txt2); letter-spacing: .04em; }
.auth-meta     { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.auth-meta-label { font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--txt3); }
.auth-actions  { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.auth-hint     { font-size: .84rem; color: var(--txt2); line-height: 1.65; margin-top: 10px; }

.btn-auth {
    display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600;
    padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(65,170,40,.3);
    background: rgba(65,170,40,.12); color: var(--accent); transition: .18s;
}
.btn-auth:hover { background: rgba(65,170,40,.22); border-color: rgba(65,170,40,.55); }
.btn-auth.secondary { background: transparent; border-color: var(--border); color: var(--txt2); }
.btn-auth.secondary:hover { border-color: var(--border-hi); color: var(--txt); background: rgba(255,255,255,.03); }
.btn-auth.danger { background: rgba(224,108,117,.1); border-color: rgba(224,108,117,.3); color: #e06c75; }
.btn-auth.danger:hover { background: rgba(224,108,117,.2); border-color: rgba(224,108,117,.55); }
.btn-auth[disabled] { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   TRY IT OUT
   ══════════════════════════════════════════════════════════════════════════ */
/* The one interactive thing in a wall of reference text: a mid-weight green
   outline, enough to draw the eye without the solid fill competing with the
   Execute button inside it. */
.tryit {
    border: 1px solid rgba(65,170,40,.38);
    background: rgba(65,170,40,.035);
    border-radius: var(--radius);
    margin: 14px 0 20px;
    overflow: hidden;
}
.tryit:hover { border-color: rgba(65,170,40,.6); }
.tryit.open  { border-color: rgba(65,170,40,.55); }

.tryit-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: rgba(65,170,40,.08);
    border-left: 3px solid var(--accent);
    border-bottom: 1px solid transparent; transition: .15s;
}
.tryit.open .tryit-head { border-bottom-color: rgba(65,170,40,.3); }
.tryit-head:hover { background: rgba(65,170,40,.15); }
.tryit-head .method-url { font-size: .74rem; color: var(--txt2); }
.tryit-toggle {
    display: inline-flex; align-items: center; gap: 8px; font-size: .78rem;
    font-weight: 700; color: var(--accent); font-family: var(--font-mono);
}
.tryit-toggle i { transition: transform .2s; font-size: .7rem; color: var(--accent); }
.tryit.open .tryit-toggle i { transform: rotate(90deg); }

.env-pill {
    margin-left: auto; font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
    letter-spacing: .09em; padding: 3px 9px; border-radius: 100px;
    background: rgba(224,108,117,.12); color: #e06c75; border: 1px solid rgba(224,108,117,.3);
}
.env-pill.safe { background: rgba(65,84,241,.12); color: var(--accent2); border-color: rgba(65,84,241,.25); }

.tryit-body { display: none; padding: 16px 18px; background: var(--bg4); }
.tryit.open .tryit-body { display: block; }

.tryit-auth {
    display: flex; align-items: center; gap: 8px; font-size: .8rem;
    padding: 9px 12px; border-radius: 8px; margin-bottom: 14px;
    background: rgba(65,170,40,.07); border: 1px solid rgba(65,170,40,.22); color: var(--txt);
}
.tryit-auth.off { background: rgba(254,188,46,.07); border-color: rgba(254,188,46,.25); }
.tryit-auth i { color: var(--accent); }
.tryit-auth.off i { color: var(--accent3); }
.tryit-auth code { font-family: var(--font-mono); font-size: .76rem; color: var(--accent); }

.tryit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tryit-field  { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tryit-field label { font-size: .74rem; font-weight: 600; color: var(--txt2); display: flex; align-items: center; gap: 6px; }
.tryit-field label .req { color: #e06c75; font-size: .7rem; }
.tryit-field input, .tryit-field select, .tryit-field textarea {
    background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
    padding: 9px 12px; color: var(--txt); font-family: var(--font-mono);
    font-size: .8rem; outline: none; transition: border-color .15s; width: 100%;
}
.tryit-field textarea { resize: vertical; min-height: 68px; line-height: 1.6; }
.tryit-field input:focus, .tryit-field select:focus, .tryit-field textarea:focus { border-color: var(--accent2); }
.tryit-field input::placeholder, .tryit-field textarea::placeholder { color: var(--txt3); }
.tryit-field .hint { font-size: .7rem; color: var(--txt3); line-height: 1.5; }

.tryit-confirm {
    display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; color: var(--txt);
    background: rgba(224,108,117,.07); border: 1px solid rgba(224,108,117,.25);
    border-radius: 8px; padding: 11px 13px; margin-bottom: 13px; line-height: 1.55; cursor: pointer;
}
.tryit-confirm input { margin-top: 2px; accent-color: #e06c75; flex-shrink: 0; }

.tryit-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-execute {
    display: inline-flex; align-items: center; gap: 8px; background: var(--accent);
    color: #04140a; font-weight: 700; font-size: .84rem; padding: 10px 22px;
    border-radius: 8px; transition: .18s;
}
.btn-execute:hover:not([disabled]) { opacity: .88; }
.btn-execute[disabled] { opacity: .4; cursor: not-allowed; }
.btn-clear { font-size: .78rem; color: var(--txt3); border: 1px solid var(--border); border-radius: 7px; padding: 8px 14px; transition: .15s; }
.btn-clear:hover { color: var(--txt); border-color: var(--border-hi); }

.tryit-status { font-size: .78rem; color: var(--txt3); font-family: var(--font-mono); }

.tryit-result { margin-top: 15px; display: none; }
.tryit-result.show { display: block; }
.tryit-result-head {
    display: flex; align-items: center; gap: 10px; padding: 8px 13px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap;
}
.status-chip { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 5px; }
.status-chip.ok   { background: rgba(65,170,40,.14);  color: var(--accent);  border: 1px solid rgba(65,170,40,.25); }
.status-chip.err  { background: rgba(224,108,117,.14); color: #e06c75;       border: 1px solid rgba(224,108,117,.3); }
.status-chip.warn { background: rgba(254,188,46,.14);  color: var(--accent3); border: 1px solid rgba(254,188,46,.3); }
.tryit-timing { font-size: .72rem; color: var(--txt3); font-family: var(--font-mono); margin-left: auto; }
.tryit-result pre {
    background: var(--bg); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius); max-height: 380px; overflow: auto; margin: 0;
}

/* JSON syntax colours for rendered responses */
.j-key  { color: #7dd3fc; }
.j-str  { color: #9ece6a; }
.j-num  { color: var(--accent3); }
.j-bool { color: #c792ea; }
.j-null { color: var(--txt3); }

/* GET verbs read blue against the green POST default */
.method-badge.get { background: rgba(65,84,241,.12); color: var(--accent2); border-color: rgba(65,84,241,.2); }

/* ══════════════════════════════════════════════════════════════════════════
   CODE SAMPLE TOKENS
   The markup in documentation.php has always carried these spans, but no
   stylesheet ever defined them — every sample rendered as flat grey text.
   Colours are chosen to survive on the near-black --bg that pre blocks use.
   ══════════════════════════════════════════════════════════════════════════ */
pre .cmd { color: var(--accent);  font-weight: 700; }  /* curl, php, python   */
pre .fl  { color: #c792ea; }                            /* -X, -H, --data     */
pre .s   { color: #9ece6a; }                            /* string literal     */
pre .k   { color: #7dd3fc; }                            /* JSON key           */
pre .kw  { color: #c792ea; font-weight: 600; }          /* const, true, null  */
pre .n   { color: var(--accent3); }                     /* number             */
pre .v   { color: #ffb86c; }                            /* $variable          */
pre .cm  { color: var(--txt3); font-style: italic; }    /* comment            */
pre .fn  { color: #7dd3fc; }                            /* function name      */

/* Empty remote-source: the console is blocked, and says how to unblock it */
.source-empty {
    display: flex; align-items: flex-start; gap: 7px; margin-top: 5px;
    font-size: .73rem; line-height: 1.5; color: var(--accent3);
}
.source-empty i { margin-top: 2px; flex-shrink: 0; }
.source-empty a { color: var(--accent3); text-decoration: underline; white-space: nowrap; }
.source-empty a:hover { color: var(--white); }

/* Carried over from a previous call in this session */
.prefill-note {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    padding: 8px 12px; border-radius: 8px; font-size: .78rem; color: var(--txt);
    background: rgba(65,84,241,.08); border: 1px solid rgba(65,84,241,.25);
}
.prefill-note i { color: var(--accent2); }
.prefill-note code { font-family: var(--font-mono); font-size: .74rem; color: var(--accent2); }

.tryit-status code { font-family: var(--font-mono); color: var(--accent); }
.tryit-status a { text-decoration: underline; }

select[data-source][disabled] { opacity: .6; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT TABS
   The page carries several products at once; this narrows it to one family so
   the sidebar stops being a wall.
   ══════════════════════════════════════════════════════════════════════════ */
.prod-tabs {
    display: flex; flex-wrap: wrap; gap: 7px;
    padding-bottom: 20px; margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
    position: sticky; top: var(--nav-h); z-index: 90;
    background: linear-gradient(var(--bg) 82%, transparent);
    padding-top: 6px;
}
.prod-tab {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .8rem; font-weight: 600; color: var(--txt2);
    padding: 8px 15px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg3);
    transition: color .16s, border-color .16s, background .16s;
}
.prod-tab i { font-size: .8rem; color: var(--txt3); transition: color .16s; }
.prod-tab:hover { color: var(--white); border-color: var(--border-hi); }
.prod-tab:hover i { color: var(--accent2); }
.prod-tab:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.prod-tab.active {
    color: var(--white); background: rgba(65,170,40,.1);
    border-color: rgba(65,170,40,.45);
}
.prod-tab.active i { color: var(--accent); }

@media(max-width:600px) {
    .prod-tabs { position: static; gap: 6px; padding-bottom: 14px; margin-bottom: 20px; }
    .prod-tab { font-size: .75rem; padding: 7px 12px; }
}