/* Reading surfaces use the shared site palette; syntax has its own contrast. */
.docs-content { --syntax-keyword: #c6a0ff; --syntax-string: #8fddbc; --syntax-number: #f5c78e; --syntax-function: #83caff; --syntax-comment: #8f9db5; --syntax-namespace: #f4a6cf; }
[data-theme="light"] .docs-content { --syntax-keyword: #7732bf; --syntax-string: #16764e; --syntax-number: #a55213; --syntax-function: #155ca8; --syntax-comment: #66738b; --syntax-namespace: #a63173; }
.docs-section { padding-bottom: 38px; margin-bottom: 38px; }
.docs-section h2 { display: flex; align-items: baseline; gap: 12px; }
.docs-section h2::before { content: ''; width: 4px; height: 1em; border-radius: 4px; background: linear-gradient(#9c65f6, #559def); flex-shrink: 0; }
.docs-section p { line-height: 1.9; font-size: .95rem; overflow-wrap: anywhere; }
.docs-section > div > p:first-child { color: var(--text-main); }
.docs-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 40px; }
.docs-shortcuts a { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--card-border); border-radius: 14px; background: linear-gradient(135deg, var(--accent-soft), transparent), var(--card-bg); font-size: .85rem; line-height: 1.5; }
.docs-shortcuts a:hover { border-color: var(--accent); background: var(--card-hover-bg); }
.docs-shortcuts .shortcut-symbol { font-size: 1.5rem; color: var(--accent); }
.docs-content pre { background: var(--card-bg); padding: 22px 24px; box-shadow: 0 8px 26px #10225208; line-height: 1.8; tab-size: 2; }
.docs-content code { font-family: Consolas, 'SFMono-Regular', 'Liberation Mono', monospace; font-variant-ligatures: none; }
.docs-content pre code { font-size: .85rem; }
.docs-content .code-header { padding: 10px 18px; background: linear-gradient(110deg, var(--accent-soft), transparent), var(--card-bg); color: var(--accent); font-weight: 600; }
.docs-content .code-header > span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 9px; }
.docs-content .copy-btn { background: var(--card-bg); border-radius: 6px; padding: 5px 10px; }
.docs-content .lua-keyword { color: var(--syntax-keyword); font-weight: 600; }
.docs-content .lua-string { color: var(--syntax-string); }
.docs-content .lua-number { color: var(--syntax-number); }
.docs-content .lua-function, .docs-content .lua-builtin { color: var(--syntax-function); }
.docs-content .lua-comment { color: var(--syntax-comment); font-style: italic; }
.docs-content .lua-namespace { color: var(--syntax-namespace); }
.docs-content .lua-operator { color: var(--accent); }
.docs-content p code, .docs-content li code, .docs-content td code { color: var(--accent); background: var(--accent-soft); padding: 3px 6px; border-radius: 5px; font-size: .85em; }
/* Generated references use table-container, not the old docs-table classes. */
.docs-content .table-container { width: 100%; overflow-x: auto; margin: 24px 0; border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg); }
.docs-content .table-container table { width: 100%; border-collapse: collapse; text-align: left; font-size: .87rem; line-height: 1.75; }
.docs-content .table-container th { background: var(--accent-soft); color: var(--text-main); font-weight: 600; }
.docs-content .table-container th, .docs-content .table-container td { padding: 13px 18px; border-bottom: 1px solid var(--card-border); vertical-align: top; }
.docs-content .table-container td { color: var(--text-muted); min-width: 160px; }
.docs-content .table-container td:first-child { color: var(--text-main); }
.docs-content .table-container tr:nth-child(even) td { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.docs-content .table-container tr:last-child td { border-bottom: 0; }
.docs-content .table-container td code { overflow-wrap: anywhere; }
.docs-content .callout { border: 1px solid var(--card-border); border-left: 3px solid var(--accent); box-shadow: 0 5px 18px #10225205; }
.docs-sidebar { padding-top: 8px; }
.docs-nav-link.active { box-shadow: inset 3px 0 var(--accent); }
@media (max-width: 640px) {
  .docs-shortcuts { grid-template-columns: minmax(0, 1fr); }
  .docs-shortcuts a { flex-direction: row; align-items: center; padding: 14px 18px; }
  .docs-content pre { padding: 18px; }
  .docs-content .table-container th, .docs-content .table-container td { padding: 11px 14px; }
}