.docs-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 56px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 32px 64px;
}

.docs-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 20px;
    border-right: 1px solid #262838;
}

.docs-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 24px;
    font-size: 14px;
    font-weight: 800;
}

.docs-brand > svg { color: #b5abfc; flex-shrink: 0; }
.docs-version { margin-left: auto; padding: 2px 7px; background: #262838; border-radius: 6px; color: #a5a5b8; font-size: 11px; }
.docs-nav-label { padding: 20px 10px 8px; color: #86869c; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.docs-sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 2px 0; border-radius: 8px; font-size: 12px; font-weight: 600; color: #a5a5b8; transition: background .15s, color .15s; }
.docs-sidebar nav a:hover, .docs-sidebar nav a:focus-visible { background: #262838; color: #f1f5f9; }
.docs-sidebar nav svg { flex-shrink: 0; }
.docs-nav-method { min-width: 34px; font: 700 10px ui-monospace, monospace; }
.docs-post { color: #34d399; }
.docs-get { color: #60a5fa; }
.docs-sidebar-note { border-top: 1px solid #262838; margin-top: 24px; padding: 20px 10px 0; font-size: 11px; color: #a5a5b8; }
.docs-sidebar-note p { color: #86869c; line-height: 1.7; margin-top: 10px; }
.docs-status-dot { display: inline-block; width: 6px; height: 6px; background: #34d399; border-radius: 50%; margin-right: 5px; }
.docs-content { min-width: 0; }
.docs-content section { scroll-margin-top: 96px; }
.docs-hero { padding: 12px 0 32px; }
.docs-hero h1 { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.2; letter-spacing: -.04em; font-weight: 800; }
.docs-hero h1 span { color: #b5abfc; }
.docs-hero-description { max-width: 620px; margin-top: 20px; font-size: 15px; color: #a5a5b8; line-height: 1.8; }
.docs-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.docs-base-url { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid #273244; border-radius: 10px; background: #14151f; }
.docs-base-url > span { color: #86869c; font-size: 10px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.docs-base-url code { color: #c3c3d1; font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.docs-base-url button { margin-left: auto; padding: 6px; color: #a5a5b8; flex-shrink: 0; }
.docs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #262838; border-radius: 12px; margin-bottom: 48px; background: #14151f; }
.docs-steps li { display: flex; gap: 12px; padding: 20px 16px; }
.docs-steps li + li { border-left: 1px solid #262838; }
.docs-steps li > span { color: #b5abfc; font: 600 12px ui-monospace, monospace; padding-top: 3px; }
.docs-steps h2 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.docs-steps p { color: #a5a5b8; font-size: 12px; line-height: 1.7; }
.docs-section { margin-bottom: 32px; padding: 28px; background: #14151f; border: 1px solid #262838; border-radius: 14px; }
.docs-section:target { border-color: #7d70c9; }
.docs-section-kicker { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #b5abfc; margin-bottom: 12px; }
.docs-section-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
.docs-section > p { line-height: 1.8; }
.docs-endpoint { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #111b2c; border: 1px solid #243047; border-radius: 8px; margin-bottom: 20px; }
.docs-endpoint code { font-size: 12px; color: #e2e8f0; min-width: 0; overflow-wrap: anywhere; }
.docs-method { padding: 4px 8px; border-radius: 5px; font: 700 11px ui-monospace, monospace; flex-shrink: 0; }
.docs-method.docs-post { background: #10352e; }
.docs-method.docs-get { background: #152f50; }
.docs-auth-options li { display: block; line-height: 2; overflow-wrap: anywhere; }
.docs-auth-options li > svg { display: none; }
.docs-auth-options strong { display: block; margin-top: 8px; }
.docs-code { overflow: hidden; border: 1px solid #253044; border-radius: 10px; background: #060d19; margin: 16px 0 24px; }
.docs-code:last-child { margin-bottom: 0; }
.docs-code-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; background: #111a2a; border-bottom: 1px solid #253044; color: #a5a5b8; font: 600 11px ui-monospace, monospace; }
.docs-code-toolbar button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; color: #c3c3d1; }
.docs-code-toolbar button:hover { background: #253044; color: #fff; }
.docs-code pre { margin: 0; padding: 20px; overflow-x: auto; font-size: 12px; line-height: 1.9; color: #c4d6ed; tab-size: 4; }
.docs-code-label { color: #86869c; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.docs-callout { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: #102a26; border: 1px solid #1b463c; border-radius: 8px; color: #a7d8c9; margin-bottom: 20px; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.docs-callout svg { flex-shrink: 0; margin-top: 2px; color: #34d399; }
.docs-errors > div { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid #262838; }
.docs-errors > div:last-child { border-bottom: 0; }
.docs-errors code { padding: 4px 9px; border-radius: 6px; background: #3a3560; color: #d2cefd; font-size: 12px; }
.docs-errors strong { display: block; font-size: 13px; margin-bottom: 4px; }
.docs-errors p span { color: #a5a5b8; font-size: 12px; }
.docs-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #86869c; font-size: 12px; padding: 8px 0; }
.docs-bottom a { color: #b5abfc; }
.docs-layout :focus-visible { outline: 2px solid #b5abfc; outline-offset: 3px; }

@media (max-width: 1100px) {
    .docs-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 28px; padding: 32px 24px; }
    .docs-steps { grid-template-columns: 1fr; }
    .docs-steps li + li { border-left: 0; border-top: 1px solid #262838; }
}

@media (max-width: 767px) {
    .docs-layout { display: block; padding: 20px 16px 40px; }
    .docs-sidebar { position: static; max-height: none; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid #262838; margin-bottom: 24px; }
    .docs-brand { padding-bottom: 12px; }
    .docs-sidebar nav { display: flex; overflow-x: auto; gap: 6px; padding: 4px; }
    .docs-sidebar nav a { flex-shrink: 0; border: 1px solid #262838; padding: 9px 12px; white-space: nowrap; }
    .docs-nav-label, .docs-sidebar-note { display: none; }
    .docs-section { padding: 20px 16px; border-radius: 12px; }
    .docs-base-url { gap: 10px; flex-wrap: wrap; }
    .docs-base-url > span { flex-basis: 100%; }
    .docs-base-url code { flex: 1; }
    .docs-code pre { padding: 16px; }
    .docs-hero-description { font-size: 14px; }
}