:root {
    --ink: #17211f;
    --muted: #6d7875;
    --line: #dfe7e3;
    --soft: #f5f8f6;
    --cream: #fbfcfa;
    --green: #0f8b68;
    --green-dark: #08664e;
    --green-soft: #e8f6ef;
    --orange: #c97929;
    --red: #c45555;
    --navy: #172c3b;
    --mono: "DM Mono", monospace;
    --sans: "Inter", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: var(--sans);
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.topbar {
    align-items: center;
    background: rgba(251, 252, 250, .94);
    border-bottom: 1px solid var(--line);
    display: flex;
    height: 76px;
    justify-content: space-between;
    padding: 0 4vw;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(14px);
}
.brand { align-items: center; display: flex; font-size: 15px; font-weight: 800; gap: 11px; letter-spacing: -.03em; }
.brand small { color: var(--muted); display: block; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.brand-mark { align-items: center; background: var(--green); border-radius: 9px; color: white; display: flex; font-size: 18px; height: 36px; justify-content: center; width: 36px; }
.topbar-actions { align-items: center; display: flex; gap: 20px; }
.status-pill { align-items: center; border: 1px solid var(--line); border-radius: 30px; color: var(--muted); display: flex; font-size: 11px; gap: 8px; padding: 8px 13px; }
.status-dot { background: #3bb879; border-radius: 50%; box-shadow: 0 0 0 4px #e5f7ec; height: 7px; width: 7px; }
.menu-toggle { background: none; border: 0; display: none; font-size: 23px; }
.docs-layout { display: flex; max-width: 1500px; margin: auto; }
.sidebar { border-right: 1px solid var(--line); flex: 0 0 252px; min-height: calc(100vh - 76px); padding: 34px 25px; position: sticky; top: 76px; height: calc(100vh - 76px); }
.sidebar-search label, .nav-label, .rail-label { color: #8a9691; display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; margin-bottom: 10px; }
.search-box { align-items: center; border: 1px solid var(--line); border-radius: 7px; color: #a3ada9; display: flex; gap: 8px; padding: 7px 9px; }
.search-box input { background: none; border: 0; font: 12px var(--sans); min-width: 0; outline: 0; width: 100%; }
kbd { background: var(--soft); border: 1px solid var(--line); border-radius: 4px; font: 10px var(--mono); padding: 2px 5px; }
.docs-nav { margin-top: 39px; }
.nav-label { margin-top: 25px; }
.nav-link { border-left: 2px solid transparent; color: var(--muted); display: block; font-size: 12px; margin-left: -25px; padding: 9px 0 9px 23px; transition: .2s; }
.nav-link:hover, .nav-link.active { background: #edf7f2; border-left-color: var(--green); color: var(--green-dark); font-weight: 600; }
.method { border-radius: 3px; font: 9px var(--mono); margin-right: 8px; padding: 2px 4px; }
.method.post, .method-badge.post { background: #e3f5ed; color: var(--green-dark); }
.method.get, .method-badge.get { background: #e8effa; color: #4571a9; }
.sidebar-footer { align-items: flex-start; border-top: 1px solid var(--line); bottom: 28px; display: flex; gap: 10px; left: 25px; padding-top: 18px; position: absolute; right: 25px; }
.help-icon { align-items: center; background: var(--green-soft); border-radius: 50%; color: var(--green); display: flex; font-weight: 700; height: 25px; justify-content: center; width: 25px; }
.sidebar-footer strong, .sidebar-footer a { display: block; font-size: 11px; }
.sidebar-footer a { color: var(--green); margin-top: 2px; }
.content { flex: 1; min-width: 0; padding: 0 5vw; }
.hero { max-width: 870px; padding: 104px 0 83px; }
.eyebrow { color: var(--green); font: 700 10px var(--mono); letter-spacing: .15em; }
.eyebrow span { background: var(--green); border-radius: 50%; display: inline-block; height: 6px; margin-right: 8px; width: 6px; }
h1 { font-size: clamp(42px, 5.4vw, 76px); letter-spacing: -.075em; line-height: 1.05; margin: 20px 0; }
h1 em { color: var(--green); font-style: normal; }
.hero-copy { color: var(--muted); font-size: 17px; max-width: 590px; }
.hero-actions { display: flex; gap: 10px; margin-top: 30px; }
.button { border-radius: 6px; font-size: 12px; font-weight: 700; padding: 12px 17px; }
.button.primary { background: var(--green); color: #fff; }
.button.primary span { font-size: 17px; margin-left: 8px; }
.button.secondary { border: 1px solid var(--line); }
.quick-stats { border-top: 1px solid var(--line); display: flex; gap: 55px; margin-top: 62px; padding-top: 20px; }
.quick-stats strong, .quick-stats span { display: block; }
.quick-stats strong { font: 13px var(--mono); }
.quick-stats span { color: var(--muted); font-size: 11px; margin-top: 4px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 820px) 150px; gap: 80px; }
.doc-section { border-top: 1px solid var(--line); padding: 68px 0 74px; scroll-margin-top: 95px; }
.section-heading { align-items: flex-start; display: flex; gap: 18px; margin-bottom: 28px; }
.section-number { color: #a0aba7; font: 11px var(--mono); padding-top: 9px; }
h2 { font-size: 27px; letter-spacing: -.045em; line-height: 1.2; margin: 0; }
.title-line { align-items: center; display: flex; gap: 10px; }
.section-heading p { color: var(--muted); font-size: 13px; margin: 7px 0 0; }
.method-badge { border-radius: 4px; font: 10px var(--mono); padding: 5px 7px; }
h3 { font-size: 12px; margin: 28px 0 10px; }
.api-tester-section { background: linear-gradient(180deg, rgba(232, 246, 239, .42), transparent 280px); }
.tester-form { margin-top: 20px; }
.tester-panels { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.tester-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.tester-panel-heading { align-items: center; display: flex; justify-content: space-between; }
.tester-panel-heading h3 { margin: 0; }
.form-field { margin-top: 15px; }
.form-field-wide { margin-top: 0; }
.form-field label { color: var(--muted); display: block; font-size: 10px; font-weight: 700; margin-bottom: 6px; }
.form-field input { border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font: 12px var(--sans); padding: 10px 11px; width: 100%; }
.input-with-action { display: flex; }
.input-with-action input { border-radius: 5px 0 0 5px; }
.input-action { background: var(--soft); border: 1px solid var(--line); border-left: 0; border-radius: 0 5px 5px 0; color: var(--green-dark); cursor: pointer; font: 10px var(--mono); padding: 0 12px; }
.input-action:hover { background: var(--green-soft); }
=======
.form-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 139, 104, .12); outline: 0; }
.form-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.tester-submit { border: 0; cursor: pointer; margin-top: 20px; width: 100%; }
.tester-submit:disabled { cursor: wait; opacity: .65; }
.tester-help { color: var(--muted); font-size: 12px; margin: 24px 0 0; }
.tester-result { background: var(--navy); border-radius: 7px; color: #dbe9e6; margin-top: 20px; overflow: hidden; }
.tester-result-heading { align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; padding: 10px 15px; }
.tester-result-actions { align-items: center; display: flex; gap: 8px; }
.tester-result-heading h3 { color: #91aba5; margin: 0; }
#tester-status { color: #9fd9be; font: 10px var(--mono); }
.tester-result pre { min-height: 90px; }
p { font-size: 13px; }
code, .endpoint, .link-example { font-family: var(--mono); }
code { font-size: .9em; }
.notice { align-items: flex-start; border: 1px solid; border-radius: 7px; display: flex; gap: 13px; margin: 24px 0; padding: 15px 17px; }
.notice.warning { background: #fff9ee; border-color: #f0ddba; }
.notice.timeout { background: #f4faf7; border-color: #c9eadb; }
.notice-icon { align-items: center; border-radius: 50%; display: flex; flex: 0 0 22px; font-weight: 800; height: 22px; justify-content: center; }
.warning .notice-icon { background: #f7d898; color: #7b531c; }
.timeout .notice-icon { background: #c8eada; color: var(--green-dark); }
.notice strong { font-size: 12px; }
.notice p { color: #717873; margin: 3px 0 0; }
.endpoint { align-items: center; background: var(--navy); border-radius: 6px; color: #e4f0ed; display: flex; font-size: 11px; gap: 12px; margin: 19px 0 27px; overflow: auto; padding: 14px; white-space: nowrap; }
.endpoint .copy-button { margin-left: auto; }
.copy-button { background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; color: inherit; cursor: pointer; font: 10px var(--mono); padding: 5px 8px; }
.copy-button:hover { background: rgba(255,255,255,.1); }
.code-card { background: var(--navy); border-radius: 7px; color: #dbe9e6; overflow: hidden; }
.code-header { align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); color: #91aba5; display: flex; font: 9px var(--mono); justify-content: space-between; letter-spacing: .1em; padding: 10px 15px; }
pre { font: 11px/1.8 var(--mono); margin: 0; overflow-x: auto; padding: 17px 19px; }
.key { color: #9fd9be; }
.string { color: #e8c681; }
.boolean { color: #cf9ae2; }
.response-success { border-left: 3px solid #51c798; }
.response-error { border-left: 3px solid #d77979; }
.response-error .code-header { color: #e29a9a; }
.response-columns { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.response-columns pre { font-size: 10px; }
.table-wrap { border: 1px solid var(--line); border-radius: 7px; overflow-x: auto; }
table { border-collapse: collapse; font-size: 12px; min-width: 620px; text-align: left; width: 100%; }
th { background: var(--soft); color: #78837f; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
td, th { border-bottom: 1px solid var(--line); padding: 13px 15px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td code { color: var(--green-dark); }
.optional { color: var(--muted); font-size: 11px; }
.link-example { background: var(--green-soft); border-radius: 6px; color: var(--green-dark); font-size: 11px; margin-top: 20px; padding: 14px; }
.link-example span { color: var(--muted); display: block; font: 9px var(--sans); letter-spacing: .1em; margin-bottom: 5px; text-transform: uppercase; }
.http-code { border-radius: 4px; font: 10px var(--mono); padding: 4px 6px; }
.http-code.success { background: #e3f5ed; color: var(--green-dark); }
.http-code.client { background: #fff0df; color: #9b5b1e; }
.http-code.limit, .http-code.server { background: #fae7e7; color: #a44848; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 18px; padding: 18px 0; }
.checklist li > span { color: var(--green); font: 11px var(--mono); padding-top: 3px; }
.checklist strong { font-size: 13px; }
.checklist p { color: var(--muted); margin: 3px 0 0; }
.right-rail { padding-top: 77px; }
.right-rail a { border-left: 1px solid var(--line); color: var(--muted); display: block; font-size: 10px; padding: 6px 0 6px 12px; }
.right-rail a:hover { border-color: var(--green); color: var(--green); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 11px; justify-content: space-between; padding: 25px 0 35px; }
.toast { background: var(--ink); border-radius: 5px; bottom: 25px; color: white; font-size: 12px; opacity: 0; padding: 10px 15px; position: fixed; right: 25px; transform: translateY(10px); transition: .25s; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 950px) {
    .sidebar { flex-basis: 220px; }
    .content { padding: 0 4vw; }
    .content-grid { gap: 35px; grid-template-columns: minmax(0, 1fr) 125px; }
}
@media (max-width: 720px) {
    .topbar { height: 64px; }
    .status-pill { display: none; }
    .menu-toggle { display: block; }
    .sidebar { background: var(--cream); display: none; height: auto; min-height: auto; padding: 25px; position: absolute; top: 64px; width: 100%; z-index: 9; }
    .sidebar.open { display: block; }
    .sidebar-footer { display: none; }
    .docs-layout { display: block; }
    .content { padding: 0 20px; }
    .hero { padding: 70px 0 55px; }
    .quick-stats { gap: 20px; justify-content: space-between; }
    .quick-stats span { font-size: 9px; }
    .content-grid { display: block; }
    .right-rail { display: none; }
    .doc-section { padding: 48px 0 55px; }
    .response-columns { display: block; }
    .tester-panels { display: block; }
    .tester-panel + .tester-panel { margin-top: 18px; }
    .form-row { display: block; }
    .response-columns > div + div { margin-top: 25px; }
    .site-footer { display: block; }
    .site-footer span { display: block; margin: 5px 0; }
}