html { scroll-behavior: smooth; }

:root {
    --bg: #f4f7fb;
    --panel: rgba(255,255,255,0.92);
    --text: #111827;
    --muted: #5b6475;
    --line: #e6eaf2;
    --shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
    --grad-1: #6257f6;
    --grad-2: #8a5cf6;
    --grad-3: #f472b6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top right, rgba(244,114,182,0.12), transparent 28%),
        radial-gradient(circle at top left, rgba(98,87,246,0.08), transparent 22%),
        var(--bg);
    color: var(--text);
}

.doc-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 100vh;
}

.doc-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    padding: 28px 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)),
        linear-gradient(180deg, #0f1838 0%, #312f81 52%, #6d28d9 100%);
    color: white;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.brand-wrap { display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.brand-logo {
    width:52px; height:52px; border-radius:16px; object-fit:cover;
    background:rgba(255,255,255,0.08); box-shadow:0 10px 24px rgba(0,0,0,0.22);
}
.doc-sidebar h1 { margin:0 0 6px; font-size:30px; letter-spacing:-0.03em; }
.doc-version { margin:0; color:rgba(255,255,255,0.82); font-size:14px; }

.sidebar-card {
    margin:22px 0 16px; padding:16px; border-radius:18px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
}
.sidebar-label {
    margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:0.14em;
    color:rgba(255,255,255,0.68);
}
.sidebar-mini { margin:10px 0 0; line-height:1.65; color:rgba(255,255,255,0.84); font-size:14px; }

.sidebar-search { margin: 0 0 16px; }
.sidebar-search input {
    width:100%; border:none; outline:none; padding:12px 14px; border-radius:14px;
    background:rgba(255,255,255,0.12); color:white;
}
.sidebar-search input::placeholder { color: rgba(255,255,255,0.72); }

.doc-sidebar nav { display:flex; flex-direction:column; gap:8px; }
.doc-sidebar nav a {
    color:white; text-decoration:none; padding:11px 14px; border-radius:14px;
    background:rgba(255,255,255,0.06); border:1px solid transparent; transition:.2s ease; font-size:14px;
}
.doc-sidebar nav a:hover,
.doc-sidebar nav a.active {
    background:rgba(255,255,255,0.16);
    border-color:rgba(255,255,255,0.16);
    transform:translateX(2px);
}

.sidebar-footer {
    margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.12);
    color:rgba(255,255,255,0.85); font-size:13px; line-height:1.7;
}

.doc-content { padding:34px; }

.doc-hero {
    display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:24px; padding:30px;
    border-radius:28px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.12), transparent 22%),
        linear-gradient(135deg, var(--grad-1), var(--grad-2) 48%, var(--grad-3));
    color:white; box-shadow:var(--shadow);
}
.hero-badge {
    display:inline-block; margin-bottom:14px; padding:8px 14px; border-radius:999px;
    background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.16);
    font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em;
}
.doc-hero h2 { margin:0 0 12px; font-size:46px; line-height:1.06; letter-spacing:-0.04em; color:white; max-width:900px; }
.doc-hero p { margin:0; color:rgba(255,255,255,0.92); font-size:18px; line-height:1.8; max-width:980px; }

.hero-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.hero-points span {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.16);
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.doc-content section {
    background: var(--panel); border:1px solid var(--line); border-radius:24px; padding:28px;
    margin-bottom:18px; box-shadow:var(--shadow); backdrop-filter: blur(10px);
}
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.doc-content h2 { margin:0; font-size:32px; letter-spacing:-0.03em; }
.doc-content h3 { margin-top:18px; margin-bottom:10px; font-size:20px; }
.doc-content p, .doc-content li { line-height:1.8; color:var(--muted); font-size:16px; }

.copy-btn {
    appearance:none; border:none; cursor:pointer;
    background: linear-gradient(135deg, #6257f6, #f472b6);
    color:white; padding:11px 16px; border-radius:999px; font-weight:700; font-size:14px;
    box-shadow: 0 10px 24px rgba(98,87,246,0.22);
}
.copy-btn.small { padding:9px 13px; font-size:13px; box-shadow:none; }
.copy-btn.copied { background: linear-gradient(135deg, #10b981, #34d399); }

.note {
    margin-top:14px; padding:14px 16px; border-radius:16px;
    background: linear-gradient(135deg, rgba(98,87,246,0.08), rgba(244,114,182,0.08));
    border: 1px solid rgba(98,87,246,0.14); color:#374151;
}
.feature-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:16px; }
.feature-box {
    padding:18px; border-radius:18px; background:linear-gradient(180deg, #ffffff, #f8faff);
    border:1px solid var(--line);
}
.feature-box strong { display:block; margin-bottom:8px; font-size:17px; }
.feature-box span { color:var(--muted); line-height:1.7; font-size:14px; }

.doc-shot {
    margin: 18px 0 0;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f8faff);
    border: 1px solid var(--line);
}
.doc-shot img {
    width: 100%;
    display: block;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
}
.doc-shot figcaption {
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.workflow-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    margin-top:16px;
}
.workflow-step {
    padding:18px;
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff, #f8faff);
    border:1px solid var(--line);
}
.workflow-step strong {
    display:block;
    margin-bottom:8px;
    font-size:17px;
}
.workflow-step span {
    color:var(--muted);
    line-height:1.7;
    font-size:14px;
}
.inline-code {
    margin-top:14px; padding:14px 16px; border-radius:16px; background:#0f172a; color:#e2e8f0;
    font-family:Consolas, Monaco, monospace; font-size:14px; overflow:auto;
}

@media (max-width:1200px) {
    .feature-grid { grid-template-columns: repeat(2,1fr); }
    .workflow-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:980px) {
    .doc-shell { grid-template-columns:1fr; }
    .doc-sidebar { position:relative; height:auto; overflow:visible; }
    .doc-content { padding:18px; }
    .doc-hero { padding:24px; }
    .doc-hero h2 { font-size:36px; }
    .feature-grid, .workflow-grid { grid-template-columns:1fr; }
}