:root {
    --primary: #4f46e5;
    --dark: #0f172a;
    --border: #e5e7eb;
    --background: #f8fafc;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--background);
    color:#1f2937;
    font-family:Inter,sans-serif;
}

.navbar{
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.sidebar{

    min-height:100vh;

    background:#fff;

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

    position:sticky;

    top:56px;

    padding:30px;

}

.sidebar h5{

    font-weight:700;

}

.sidebar ul{

    padding-left:0;

}

.sidebar li{

    list-style:none;

    margin-bottom:10px;

}

.sidebar a{

    display:block;

    padding:10px 14px;

    border-radius:8px;

    color:#475569;

    text-decoration:none;

    transition:.2s;

}

.sidebar a:hover{

    background:#eef2ff;

    color:var(--primary);

}

section{

    scroll-margin-top:90px;

}

section h2{

    font-weight:700;

    margin-bottom:20px;

}

.code-block{

    background:#0f172a;

    color:#e2e8f0;

    padding:20px;

    border-radius:12px;

    overflow:auto;

    font-size:14px;

    line-height:1.7;

}

.language-tabs{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.lang-btn{

    border:none;

    padding:10px 18px;

    border-radius:8px;

    background:#e2e8f0;

    cursor:pointer;

    transition:.2s;

    font-weight:600;

}

.lang-btn:hover{

    background:#cbd5e1;

}

.lang-btn.active{

    background:var(--primary);

    color:#fff;

}

.table{

    background:#fff;

}

.table thead{

    background:#0f172a;

    color:#fff;

}

.accordion-item{

    border-radius:10px;

    overflow:hidden;

    margin-bottom:12px;

}

.accordion-button{

    font-weight:600;

}

pre{

    margin-bottom:0;

}

@media(max-width:991px){

.sidebar{

    position:relative;

    min-height:auto;

    top:0;

    border-right:none;

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

}

}
.sidebar a.active{

    background:#4f46e5;

    color:white;

}

#codeExample{

    min-height:320px;

    white-space:pre-wrap;

}