:root{
        --bg:#0d0d12;
        --panel:#12121a;
        --border:#22222e;

        --text:#e6e6eb;
        --muted:#a0a0b5;

        --accent:#7aa2ff;

        --success:#22c55e;
        --warning:#f59e0b;
        --danger:#ef4444;
    }

    *{
        box-sizing:border-box;
    }

    body{
        margin:0;

        background:
            radial-gradient(
                circle at top,
                #141420,
                #0a0a0f
            );

        color:var(--text);

        font-family:
            system-ui,
            -apple-system,
            Segoe UI,
            Roboto,
            sans-serif;
    }

    /*
    |--------------------------------------------------------------------------
    | Links
    |--------------------------------------------------------------------------
    */

    a{
        color:var(--accent);
        text-decoration:none;
    }

    a:hover{
        opacity:.9;
    }

    /*
    |--------------------------------------------------------------------------
    | Navigation
    |--------------------------------------------------------------------------
    */

    .nav{
        display:flex;
        justify-content:space-between;
        align-items:center;

        padding:18px 26px;

        border-bottom:1px solid var(--border);

        background:
            linear-gradient(
                180deg,
                #141420,
                #0d0d12
            );
    }

    .nav .brand{
        font-size:20px;
        font-weight:700;
        letter-spacing:.3px;
    }

    .nav .links{
        display:flex;
        gap:18px;
    }

    .nav .links a{
        font-size:14px;
    }

    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    */

    .container{
        max-width:1400px;

        margin:0 auto;

        padding:24px;

        display:grid;
        gap:18px;
    }

    /*
    |--------------------------------------------------------------------------
    | Cards
    |--------------------------------------------------------------------------
    */

    .card{
        background:var(--panel);

        border:1px solid var(--border);

        border-radius:8px;

        padding:20px;
    }

    .card h1{
        margin:0 0 16px 0;

        font-size:2rem;

        font-weight:700;
    }

    .card h2{
        margin:0 0 14px 0;

        font-size:15px;

        font-weight:600;

        color:var(--accent);
    }

    .card p{
        color:var(--muted);
        line-height:1.6;
    }

    /*
    |--------------------------------------------------------------------------
    | Forms
    |--------------------------------------------------------------------------
    */

    .form-group{
        margin-bottom:18px;
    }

    label{
        display:block;

        margin-bottom:6px;

        color:var(--muted);

        font-size:14px;
    }

    input,
    textarea,
    select{
        width:100%;

        padding:10px 12px;

        background:#0b0b12;

        border:1px solid var(--border);

        border-radius:6px;

        color:var(--text);

        font-size:14px;
    }

    input::placeholder,
    textarea::placeholder{
        color:#777;
    }

    input:focus,
    textarea:focus,
    select:focus{
        outline:none;

        border-color:var(--accent);
    }

    /*
    |--------------------------------------------------------------------------
    | Buttons
    |--------------------------------------------------------------------------
    */

    .btn,
    button{
        display:inline-flex;

        align-items:center;
        justify-content:center;

        padding:10px 14px;

        border:none;

        border-radius:6px;

        background:var(--accent);

        color:#fff;

        font-size:14px;
        font-weight:600;

        cursor:pointer;
    }

    .btn:hover,
    button:hover{
        opacity:.9;
    }

    /*
    |--------------------------------------------------------------------------
    | Stats
    |--------------------------------------------------------------------------
    */

    .stats{
        display:grid;

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(220px,1fr)
            );

        gap:18px;
    }

    .stat-card{
        background:var(--panel);

        border:1px solid var(--border);

        border-radius:8px;

        padding:16px;
    }

    .card,
    .stat-card{
        box-shadow:
            0 4px 12px rgba(0,0,0,.15);
    }

    .stat-label{
        color:var(--muted);

        font-size:13px;
    }

    .stat-value{
        margin-top:6px;
        font-size:28px;
        font-weight:700;
        color:var(--accent);
    }

    /*
    |--------------------------------------------------------------------------
    | Key / Value
    |--------------------------------------------------------------------------
    */

    .kv{
        display:grid;

        grid-template-columns:
            220px 1fr;

        row-gap:8px;

        font-size:14px;
    }

    .kv div:nth-child(odd){
        color:var(--muted);
    }

    /*
    |--------------------------------------------------------------------------
    | Tables
    |--------------------------------------------------------------------------
    */

    table{
        width:100%;

        border-collapse:collapse;

        font-size:14px;
    }

    thead{
        background:#161625;
    }

    th,
    td{
        padding:10px 12px;

        text-align:left;
    }

    th{
        color:var(--muted);

        font-weight:500;
    }

    tbody tr{
        border-top:1px solid var(--border);
    }

    tbody tr:hover{
        background:
            rgba(
                122,
                162,
                255,
                0.05
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Badges
    |--------------------------------------------------------------------------
    */

    .badge{
        display:inline-block;

        padding:4px 10px;

        border-radius:999px;

        font-size:12px;

        font-weight:600;
    }

    .badge-success{
        background:rgba(34,197,94,.15);
        color:var(--success);
    }

    .badge-warning{
        background:rgba(245,158,11,.15);
        color:var(--warning);
    }

    .badge-danger{
        background:rgba(239,68,68,.15);
        color:var(--danger);
    }

    /*
    |--------------------------------------------------------------------------
    | Code Blocks
    |--------------------------------------------------------------------------
    */

    .code{
        background:#0b0b12;

        border:1px solid var(--border);

        border-radius:6px;

        padding:12px;

        font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Consolas,
            monospace;

        font-size:13px;

        white-space:pre;

        overflow-x:auto;
        line-height:1.6;
    }

    /*
    |--------------------------------------------------------------------------
    | Responsive
    |--------------------------------------------------------------------------
    */

    @media (max-width:768px){

        .nav{
            flex-direction:column;
            gap:12px;
        }

        .kv{
            grid-template-columns:1fr;
        }

        .container{
            padding:16px;
        }

    }

    label span{
        cursor:help;
        color:var(--accent);
        margin-left:4px;
        font-weight:700;
    }

    /*
    |--------------------------------------------------------------------------
    | Navigation
    |--------------------------------------------------------------------------
    */

    .links{
        display:flex;
        align-items:center;
        gap:24px;
    }

    .links a{
        text-decoration:none;
    }

    .nav-item{
        position:relative;
    }

    .avatar-btn{
        width:38px;
        height:38px;
        border:none;
        border-radius:999px;
        background:#6f95f5;
        color:#fff;
        font-weight:700;
        cursor:pointer;
    }

    .nav-dropdown{
        display:none;
        position:absolute;
        top:100%;
        right:0;
        min-width:220px;
        background:#111426;
        border:1px solid rgba(255,255,255,.08);
        border-radius:12px;
        overflow:hidden;
        z-index:1000;
        box-shadow:0 10px 30px rgba(0,0,0,.35);
    }

    .nav-item:hover .nav-dropdown{
        display:block;
    }

    .nav-dropdown a{
        display:block;
        padding:12px 16px;
        color:#fff;
        text-decoration:none;
    }

    .nav-dropdown a:hover{
        background:rgba(255,255,255,.05);
    }

    .docs-layout{
        display:grid;
        grid-template-columns:260px 1fr;
        gap:24px;
        align-items:start;
    }

    .docs-sidebar{
        position:sticky;
        top:24px;
    }

    .docs-nav{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .docs-nav a{
        text-decoration:none;
    }

    .docs-content{
        display:flex;
        flex-direction:column;
        gap:24px;
    }

    @media (max-width: 960px){

        .docs-layout{
            grid-template-columns:1fr;
        }

        .docs-sidebar{
            position:static;
        }

    }

    .docs-layout{
        display:grid;
        grid-template-columns:280px 1fr;
        gap:24px;
    }

    .docs-sidebar{
        position:sticky;
        top:20px;
        height:fit-content;
    }

    .docs-nav{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .docs-nav a{
        padding:10px 12px;
        border-radius:8px;
        text-decoration:none;
    }

    .docs-nav a.active{
        background:rgba(75,76,184,.15);
    }

    .docs-grid{
        display:grid;
        grid-template-columns:1fr 420px;
        gap:24px;
    }

    .docs-endpoint-header{
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom:16px;
    }

    .method{
        padding:6px 10px;
        border-radius:6px;
        font-weight:700;
    }

    .method-get{
        background:#0f5132;
    }

    .method-post{
        background:#084298;
    }

    .method-put{
        background:#664d03;
    }

    .method-delete{
        background:#842029;
    }

    @media(max-width:900px){

        .docs-layout{
            grid-template-columns:1fr;
        }

        .docs-grid{
            grid-template-columns:1fr;
        }

    }

    .page-header{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        margin-bottom:24px;
        gap:24px;
    }

    .page-header .btn{
        flex-shrink:0;
        margin-left:auto;
    }

    .docs-form{
        max-width:1200px;
    }

    .form-row{
        display:grid;
        grid-template-columns:180px 1fr;
        gap:16px;
    }

    .docs-form textarea{
        width:100%;
        min-height:180px;
        font-family:monospace;
    }

    .form-actions{
        display:flex;
        gap:12px;
        margin-top:24px;
    }

    @media(max-width:900px){

        .form-row{
            grid-template-columns:1fr;
        }

    }

    .docs-document-header{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:20px;
    }

    .docs-actions{
        margin-left:auto;
    }

    .btn-danger{
        background:#990000;
        color:#fff;
    }

    .btn-danger:hover{
        background:#b30000;
    }

    .docs-content pre{
        margin:0;
        white-space:pre-wrap;
        word-break:break-word;
        overflow-wrap:anywhere;
        overflow-x:auto;
    }

    .docs-content code{
        white-space:pre-wrap;
        word-break:break-word;
        overflow-wrap:anywhere;
    }

    .docs-actions{
        display:flex;
        gap:10px;
        align-items:center;
    }