| |
| |
| |
|
|
| .help-layout { |
| display: grid; |
| grid-template-columns: 240px 1fr; |
| gap: var(--space-5); |
| align-items: start; |
| } |
|
|
| @media (max-width: 900px) { |
| .help-layout { grid-template-columns: 1fr; } |
| .help-toc { position: static !important; } |
| } |
|
|
| .help-toc { |
| position: sticky; |
| top: 1rem; |
| background: var(--surface-glass, #f8fdfc); |
| border: 1px solid var(--border-subtle, rgba(20, 184, 166, 0.15)); |
| border-radius: var(--radius-lg, 12px); |
| padding: var(--space-4, 1rem); |
| } |
|
|
| .help-toc h3 { |
| font-size: 0.85rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: var(--text-muted, #64748b); |
| margin: 0 0 0.75rem; |
| } |
|
|
| .help-toc ul { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
|
|
| .help-toc li { margin-bottom: 0.35rem; } |
|
|
| .help-toc a { |
| color: var(--teal, #14b8a6); |
| text-decoration: none; |
| font-size: 0.9rem; |
| } |
|
|
| .help-toc a:hover { text-decoration: underline; } |
|
|
| .help-search-wrap { |
| margin-bottom: var(--space-4, 1rem); |
| } |
|
|
| .help-search-wrap input { |
| width: 100%; |
| max-width: 420px; |
| padding: 0.6rem 1rem; |
| border: 1px solid var(--border-subtle, #e2e8f0); |
| border-radius: 999px; |
| font-size: 0.95rem; |
| } |
|
|
| .live-stats { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.75rem; |
| margin: 1rem 0 1.5rem; |
| } |
|
|
| .stat-pill { |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(34, 211, 238, 0.08)); |
| border: 1px solid rgba(20, 184, 166, 0.2); |
| border-radius: 10px; |
| padding: 0.5rem 1rem; |
| min-width: 120px; |
| } |
|
|
| .stat-pill strong { |
| display: block; |
| font-size: 1.25rem; |
| color: var(--text-strong, #0f2926); |
| } |
|
|
| .stat-pill span { |
| font-size: 0.75rem; |
| color: var(--text-muted, #64748b); |
| } |
|
|
| .help-section { |
| background: var(--surface-glass, #fff); |
| border-radius: var(--radius-lg, 12px); |
| border: 1px solid var(--border-subtle, rgba(20, 184, 166, 0.12)); |
| padding: var(--space-6, 1.5rem); |
| margin-bottom: var(--space-5, 1.25rem); |
| } |
|
|
| .help-section h2 { |
| font-size: 1.35rem; |
| margin: 0 0 0.75rem; |
| color: var(--text-strong, #0f2926); |
| padding-bottom: 0.5rem; |
| border-bottom: 2px solid rgba(20, 184, 166, 0.25); |
| } |
|
|
| .help-section h3 { |
| font-size: 1.05rem; |
| margin: 1.25rem 0 0.5rem; |
| color: var(--text-strong, #0f2926); |
| } |
|
|
| .help-section p { |
| color: var(--text-muted, #475569); |
| line-height: 1.6; |
| margin-bottom: 0.75rem; |
| } |
|
|
| .help-list, .help-steps { |
| padding-left: 1.25rem; |
| margin: 0.5rem 0 1rem; |
| color: var(--text-weak, #334155); |
| line-height: 1.65; |
| } |
|
|
| .help-list li, .help-steps li { margin-bottom: 0.4rem; } |
|
|
| .help-note { |
| font-size: 0.9rem; |
| color: var(--text-muted, #64748b); |
| border-left: 3px solid var(--teal, #14b8a6); |
| padding: 0.75rem 1rem; |
| background: rgba(20, 184, 166, 0.06); |
| border-radius: 0 8px 8px 0; |
| margin: 1rem 0; |
| } |
|
|
| .api-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 0.88rem; |
| margin: 1rem 0; |
| } |
|
|
| .api-table th, .api-table td { |
| border: 1px solid var(--border-subtle, #e2e8f0); |
| padding: 0.5rem 0.75rem; |
| text-align: left; |
| } |
|
|
| .api-table th { |
| background: rgba(20, 184, 166, 0.08); |
| font-weight: 600; |
| } |
|
|
| .api-table code { font-size: 0.82rem; } |
|
|
| code { |
| background: rgba(15, 23, 42, 0.06); |
| border-radius: 4px; |
| padding: 0.1rem 0.35rem; |
| font-size: 0.88em; |
| } |
|
|
| .code-wrap { |
| position: relative; |
| margin: 0.75rem 0 1rem; |
| } |
|
|
| .code-wrap .copy-btn { |
| position: absolute; |
| top: 0.5rem; |
| right: 0.5rem; |
| padding: 0.25rem 0.6rem; |
| font-size: 0.75rem; |
| border: 1px solid var(--border-subtle, #cbd5e1); |
| border-radius: 6px; |
| background: #fff; |
| cursor: pointer; |
| } |
|
|
| .code-wrap .copy-btn:hover { background: #f1f5f9; } |
|
|
| .code-block { |
| background: #0f172a; |
| color: #e2e8f0; |
| border-radius: 10px; |
| padding: 1rem 1.25rem; |
| overflow-x: auto; |
| font-family: ui-monospace, 'Cascadia Code', monospace; |
| font-size: 0.82rem; |
| line-height: 1.55; |
| margin: 0; |
| } |
|
|
| .code-block code { |
| background: transparent; |
| color: inherit; |
| padding: 0; |
| } |
|
|
| .method-get { color: #22c55e; font-weight: 600; } |
| .method-post { color: #3b82f6; font-weight: 600; } |
|
|
