/* ================================================
   docs.css — Premium Dark Glass for /docs/ pages
   Loaded AFTER style.css + page inline <style>
   ================================================ */

/* ── Page background ─── */
body {
    background:
        radial-gradient(ellipse 1200px 800px at 20% -10%, rgba(34, 197, 94, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 900px 600px at 80% 110%, rgba(14, 165, 233, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #0f1b35, #0b1220) !important;
    color: #e5e7eb;
}

/* ── Hero text ─── */
.doc-hero h1 {
    color: #f1f5f9;
}

.doc-hero p {
    color: #94a3b8 !important;
}

/* ── Cards ─── */
.doc-card {
    background: rgba(16, 26, 51, 0.65) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px !important;
}

.doc-card h2 {
    color: #f1f5f9 !important;
}

.doc-card h3 {
    color: #e2e8f0 !important;
}

.doc-card p {
    color: #94a3b8 !important;
}

.doc-card ul,
.doc-card ol {
    color: #94a3b8;
}

.doc-card li {
    color: #94a3b8;
}

.doc-card strong {
    color: #e2e8f0;
}

.doc-card a {
    color: #22d3ee !important;
    text-decoration: none;
    transition: color 0.2s;
}

.doc-card a:hover {
    color: #67e8f9 !important;
}

/* ── Steps ─── */
.step {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    border-radius: 14px !important;
}

.step div[style*="color:#0f172a"],
.step div[style*="color: #0f172a"] {
    color: #e2e8f0 !important;
}

.n {
    background: rgba(34, 197, 94, 0.14) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    color: #bbf7d0 !important;
}

.mini {
    color: #94a3b8 !important;
}

/* ── Note callout (green) ─── */
.note {
    background: rgba(34, 197, 94, 0.08) !important;
    border-left: 4px solid #22c55e !important;
    color: #bbf7d0 !important;
    border-radius: 12px !important;
}

.note a {
    color: #22d3ee !important;
}

/* ── Warning callout (amber) ─── */
.warn {
    background: rgba(245, 158, 11, 0.08) !important;
    border-left: 4px solid #f59e0b !important;
    color: #fde68a !important;
    border-radius: 12px !important;
}

/* ── Code blocks ─── */
pre {
    background: #0d1526 !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 14px !important;
}

code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Inline code */
:not(pre)>code {
    background: rgba(255, 255, 255, 0.07);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.9em;
    color: #e2e8f0;
}

/* ── Sidebar links ─── */
.side a {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: #22d3ee !important;
    border-radius: 14px !important;
    transition: all 0.2s ease;
}

.side a:hover {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.20) !important;
}

.side a i {
    margin-right: 8px;
    color: #94a3b8;
}

.side .hint {
    color: #64748b !important;
}

.side .hint a {
    color: #22d3ee !important;
}

/* ── KV grid (key-value tables) ─── */
.doc-kv .k {
    color: #e2e8f0 !important;
}

.doc-kv .v {
    color: #94a3b8 !important;
}

.doc-kv .v code {
    color: #67e8f9;
}

/* ── Mini links ─── */
.mini-links a {
    color: #22d3ee !important;
    transition: color 0.2s;
}

.mini-links a:hover {
    color: #67e8f9 !important;
}

/* ── Param tables ─── */
.params th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
}

.params td {
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06) !important;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    padding: 10px 14px;
    text-align: left;
}

/* ── Responsive ─── */
@media (max-width: 980px) {
    .doc-grid {
        grid-template-columns: 1fr !important;
    }
}