*,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --brand: #6366f1;
            --brand-dark: #4f46e5;
            --brand-light: #eef2ff;
            --ok: #10b981;
            --ok-bg: #ecfdf5;
            --ok-bd: #a7f3d0;
            --warn: #f59e0b;
            --warn-bg: #fffbeb;
            --warn-bd: #fde68a;
            --info: #3b82f6;
            --info-bg: #eff6ff;
            --info-bd: #bfdbfe;
            --ink: #111827;
            --ink-2: #374151;
            --muted: #9ca3af;
            --line: #e5e7eb;
            --surface: #ffffff;
            --surface-2: #f9fafb;
            --code-bg: #0f172a;
            --code-2: #1e293b;
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: linear-gradient(160deg, #e9ecff 0%, #f0edff 40%, #e8faf4 100%);
            color: var(--ink);
            font-size: 14px;
            min-height: 100vh;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        body::before,
        body::after {
            content: '';
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }

        body::before {
            width: 680px;
            height: 680px;
            background: radial-gradient(circle, rgba(99, 102, 241, .2) 0%, transparent 65%);
            top: -240px;
            left: -200px;
        }

        body::after {
            width: 560px;
            height: 560px;
            background: radial-gradient(circle, rgba(16, 185, 129, .16) 0%, transparent 65%);
            bottom: -160px;
            right: -160px;
        }

        .page-wrap {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px 64px;
            position: relative;
            z-index: 1;
        }

        /*  HERO  */
        .hero {
            text-align: center;
            padding: 52px 0 40px;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: linear-gradient(135deg, #eef2ff, #e0e7ff);
            color: var(--brand-dark);
            border: 1px solid #c7d2fe;
            border-radius: 99px;
            padding: 6px 18px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 22px;
            letter-spacing: .04em;
            box-shadow: 0 2px 12px rgba(99, 102, 241, .18);
            position: relative;
            overflow: hidden;
        }

        .hero-badge::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 55%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
            animation: badgeShine 3.5s ease infinite;
        }

        @keyframes badgeShine {
            0% {
                left: -100%;
            }

            45% {
                left: 130%;
            }

            100% {
                left: 130%;
            }
        }

        .hero h1 {
            font-size: clamp(26px, 4.5vw, 46px);
            font-weight: 800;
            line-height: 1.13;
            margin-bottom: 14px;
            letter-spacing: -.5px;
        }

        .hero h1 .grad {
            background: linear-gradient(135deg, var(--brand), #a78bfa, #818cf8, var(--brand-dark), var(--brand));
            background-size: 250% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradShift 6s linear infinite;
        }

        @keyframes gradShift {
            to {
                background-position: 250% center;
            }
        }

        .hero-sub {
            font-size: 15px;
            color: var(--muted);
            max-width: 520px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /*  SECTION TITLE  */
        .sec-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 14px;
        }

        .sec-title i {
            width: 32px;
            height: 32px;
            background: var(--brand-light);
            color: var(--brand);
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex-shrink: 0;
        }

        /*  ENDPOINT CARDS  */
        .ep-card {
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(99, 102, 241, .14);
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .03);
            transition: box-shadow .18s, transform .18s;
        }

        .ep-card:hover {
            box-shadow: 0 8px 32px rgba(99, 102, 241, .14), 0 2px 8px rgba(0, 0, 0, .05);
            transform: translateY(-1px);
        }

        .ep-head {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid var(--line);
            background: linear-gradient(135deg, #f5f7ff, var(--surface-2));
            flex-wrap: wrap;
            gap: 10px;
        }

        .ep-body {
            padding: 18px 20px;
        }

        .ep-body+.ep-body {
            border-top: 1px dashed var(--line);
        }

        /* Method badges */
        .badge-method {
            display: inline-flex;
            align-items: center;
            border-radius: 7px;
            padding: 4px 11px;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .04em;
            flex-shrink: 0;
        }

        .badge-get {
            background: #dcfce7;
            color: #166534;
        }

        .badge-post {
            background: #dbeafe;
            color: #1e40af;
        }

        .badge-client {
            background: #fef9c3;
            color: #854d0e;
        }

        .ep-url {
            font-family: ui-monospace, 'Menlo', monospace;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--brand-dark);
            background: var(--brand-light);
            border: 1px solid #c7d2fe;
            border-radius: 7px;
            padding: 3px 10px;
        }

        .ep-title-text {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            flex: 1;
        }

        .ep-desc {
            font-size: 13px;
            color: var(--ink-2);
            line-height: 1.65;
            margin-bottom: 14px;
        }

        /* Param table */
        .param-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid var(--line);
            border-radius: 10px;
            overflow: hidden;
            font-size: 12.5px;
            margin-bottom: 16px;
        }

        .param-table th {
            background: linear-gradient(135deg, #f5f7ff, var(--surface-2));
            padding: 8px 14px;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--ink-2);
            border-bottom: 1px solid var(--line);
        }

        .param-table td {
            padding: 9px 14px;
            border-bottom: 1px solid #f3f4f6;
            vertical-align: middle;
        }

        .param-table tr:last-child td {
            border-bottom: none;
        }

        .param-table tr:hover td {
            background: #fafbff;
        }

        code.pk {
            background: #f3f4f6;
            color: #6366f1;
            border-radius: 5px;
            padding: 2px 7px;
            font-size: 12px;
            font-weight: 600;
        }

        .req {
            color: var(--brand);
            font-weight: 600;
            font-size: 11px;
        }

        .opt {
            color: var(--muted);
            font-weight: 500;
            font-size: 11px;
        }

        /* Code blocks */
        .code-wrap {
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 14px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
        }

        .code-label {
            background: var(--code-2);
            color: #94a3b8;
            font-family: ui-monospace, monospace;
            font-size: 11px;
            font-weight: 600;
            padding: 7px 16px;
            letter-spacing: .06em;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .code-label i {
            font-size: 12px;
        }

        pre.code-block {
            background: var(--code-bg);
            color: #e2e8f0;
            font-family: ui-monospace, 'Menlo', monospace;
            font-size: 12.5px;
            line-height: 1.75;
            padding: 16px 20px;
            margin: 0;
            overflow-x: auto;
            tab-size: 2;
        }

        pre.code-block .c-green {
            color: #86efac;
        }

        pre.code-block .c-blue {
            color: #93c5fd;
        }

        pre.code-block .c-yellow {
            color: #fde68a;
        }

        pre.code-block .c-purple {
            color: #c4b5fd;
        }

        pre.code-block .c-red {
            color: #fca5a5;
        }

        pre.code-block .c-teal {
            color: #5eead4;
        }

        pre.code-block .c-muted {
            color: #64748b;
        }

        pre.code-block .c-str {
            color: #a5f3fc;
        }

        /* Inline code endpoint example */
        .ep-example {
            background: var(--surface-2);
            border: 1px solid var(--line);
            border-radius: 9px;
            padding: 10px 14px;
            font-family: ui-monospace, monospace;
            font-size: 12.5px;
            color: var(--ink-2);
            margin-bottom: 14px;
            overflow-x: auto;
            white-space: nowrap;
        }

        /* Response box */
        .resp-label {
            font-size: 11.5px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .07em;
            margin-bottom: 6px;
        }

        /* Alert info */
        .doc-alert {
            display: flex;
            gap: 10px;
            padding: 12px 16px;
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.6;
            margin-bottom: 14px;
        }

        .doc-alert.info {
            background: var(--info-bg);
            border: 1px solid var(--info-bd);
            color: #1e40af;
        }

        .doc-alert.ok {
            background: var(--ok-bg);
            border: 1px solid var(--ok-bd);
            color: #065f46;
        }

        .doc-alert.warn {
            background: var(--warn-bg);
            border: 1px solid var(--warn-bd);
            color: #92400e;
        }

        .doc-alert i {
            font-size: 16px;
            flex-shrink: 0;
            margin-top: 1px;
        }

        /* Token section accent */
        .ep-card.token-card {
            border-color: rgba(245, 158, 11, .3);
            box-shadow: 0 4px 24px rgba(245, 158, 11, .1), 0 1px 4px rgba(0, 0, 0, .04);
        }

        .ep-card.token-card .ep-head {
            background: linear-gradient(135deg, #fffbeb, #fef3c7);
            border-bottom-color: #fde68a;
        }

        .ep-card.token-card .ep-url {
            background: #fef3c7;
            border-color: #fde68a;
            color: #92400e;
        }

        /* Divider */
        .section-sep {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--line), transparent);
            margin: 36px 0;
        }

        /* Quick ref table */
        .qr-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid var(--line);
            border-radius: 14px;
            overflow: hidden;
            font-size: 13px;
        }

        .qr-table thead th {
            background: linear-gradient(135deg, #f5f7ff, var(--surface-2));
            padding: 12px 18px;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--ink-2);
            border-bottom: 1px solid var(--line);
        }

        .qr-table tbody td {
            padding: 12px 18px;
            border-bottom: 1px solid #f3f4f6;
            vertical-align: middle;
        }

        .qr-table tbody tr:last-child td {
            border-bottom: none;
        }

        .qr-table tbody tr:hover td {
            background: #fafbff;
        }

        @media (max-width: 768px) {
            .page-wrap {
                padding: 0 14px 48px;
            }

            .ep-head {
                flex-wrap: wrap;
            }

            .hero {
                padding: 36px 0 28px;
            }

            .hero h1 {
                font-size: 26px;
            }

            pre.code-block {
                font-size: 11.5px;
            }
        }