.docs-shell { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 56px; align-items: start; padding: 54px 0 100px; }
.docs-sidebar { position: sticky; top: 92px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.docs-sidebar strong, .docs-sidebar a { display: block; }
.docs-sidebar strong { margin-bottom: 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.docs-sidebar a { padding: 7px 0; color: var(--muted); font-size: .86rem; }
.docs-sidebar a:hover { color: var(--blue-dark); }
.docs-content h1 { max-width: 680px; font-size: clamp(2.4rem, 6vw, 4.4rem); }
.docs-content h2 { margin: 64px 0 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: clamp(1.6rem, 4vw, 2.2rem); }
.docs-content h3 { margin-top: 30px; font-size: 1.15rem; }
.docs-content p, .docs-content li { color: var(--muted); }
.docs-content li + li { margin-top: 8px; }
.docs-lede { font-size: 1.16rem; line-height: 1.65; }
.docs-callout { margin: 24px 0; padding: 18px 20px; border-left: 4px solid var(--blue); border-radius: 0 8px 8px 0; background: var(--surface); }
.docs-callout.warning { border-color: var(--orange); background: var(--surface); }
.docs-callout strong { color: var(--ink); }
.docs-steps { padding-left: 22px; }
.docs-steps > li { padding-left: 8px; }
.docs-figure { margin: 24px 0 34px; }
.docs-placeholder { min-height: 260px; display: grid; place-items: center; padding: 28px; border: 2px dashed var(--surface-raised); border-radius: 10px; background: linear-gradient(135deg, var(--surface), var(--paper)); text-align: center; }
.docs-placeholder strong, .docs-placeholder span { display: block; }
.docs-placeholder strong { color: var(--blue-dark); }
.docs-placeholder span { margin-top: 8px; color: var(--muted); font-size: .82rem; }
.docs-figure figcaption { margin-top: 9px; color: var(--muted); font-size: .78rem; }
.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.docs-card { padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); }
.docs-card h3 { margin-top: 0; }
.docs-content pre { overflow-x: auto; padding: 16px; border-radius: 8px; background: #172033; color: #f3f7fb; font-size: .82rem; }
.docs-content code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.docs-content :not(pre) > code { padding: 2px 5px; border-radius: 4px; background: var(--paper); color: var(--blue-dark); }
.docs-next { margin-top: 56px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
@media (max-width: 820px) { .docs-shell { grid-template-columns: 1fr; gap: 28px; }.docs-sidebar { position: static; }.docs-grid { grid-template-columns: 1fr; } }