/* =====================================================
       ROOT
    ====================================================== */

    :root {

        --bg: #ffffff;

        --sidebar: #f8fafc;

        --header: rgba(255,255,255,.92);

        --border: #e5e7eb;

        --text: #1e293b;

        --muted: #64748b;

        --primary: #6366f1;

        --primary-light: #eef2ff;

        --code-bg: #0f172a;

        --code-text: #e2e8f0;

        --note-bg: #eff6ff;

        --note-border: #3b82f6;

        --success-bg: #ecfdf5;

        --success-border: #10b981;

        --danger-bg: #fef2f2;

        --danger-border: #ef4444;

        --header-height: 68px;

        --sidebar-width: 265px;

    }


    /* =====================================================
       DARK MODE
    ====================================================== */

    body.dark {

        --bg: #0f172a;

        --sidebar: #111827;

        --header: rgba(15,23,42,.94);

        --border: #1e293b;

        --text: #e2e8f0;

        --muted: #94a3b8;

        --primary: #818cf8;

        --primary-light: #1e1b4b;

        --code-bg: #020617;

        --code-text: #e2e8f0;

        --note-bg: #172554;

        --note-border: #60a5fa;

        --success-bg: #052e16;

        --success-border: #34d399;

        --danger-bg: #450a0a;

        --danger-border: #f87171;

    }


    /* =====================================================
       GLOBAL
    ====================================================== */

    * {
        box-sizing: border-box;
    }


    html {
        scroll-behavior: smooth;
        scroll-padding-top: 90px;
    }


    body {

        margin: 0;

        padding: 0;

        background: var(--bg);

        color: var(--text);

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Helvetica,
            Arial,
            sans-serif;

        font-size: 16px;

        line-height: 1.75;

        transition:
            background .25s ease,
            color .25s ease;

    }


    a {
        color: inherit;
    }


    button,
    input {
        font-family: inherit;
    }


    /* =====================================================
       HEADER
    ====================================================== */

    .topbar {

        height: var(--header-height);

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        z-index: 1100;

        display: flex;

        align-items: center;

        gap: 20px;

        padding: 0 25px;

        background: var(--header);

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

        backdrop-filter: blur(12px);

    }


    /* =====================================================
       LOGO
    ====================================================== */

    .logo {

        width: 245px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        gap: 10px;

        color: var(--text);

        text-decoration: none;

        font-size: 22px;

        font-weight: 800;

    }


    .logo-icon {

        width: 36px;

        height: 36px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #fff;

        background:
            linear-gradient(
                135deg,
                #6366f1,
                #8b5cf6
            );

        border-radius: 9px;

        font-size: 17px;

        font-weight: 800;

    }


    /* =====================================================
       MOBILE MENU
    ====================================================== */

    .mobile-menu {

        width: 40px;

        height: 40px;

        flex-shrink: 0;

        display: none;

        align-items: center;

        justify-content: center;

        padding: 0;

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

        border-radius: 8px;

        background: transparent;

        color: var(--text);

        font-size: 22px;

        line-height: 1;

    }


    .mobile-menu:hover {

        background: var(--primary-light);

        color: var(--primary);

    }


    /* =====================================================
       SEARCH
    ====================================================== */

    .search-box {

        position: relative;

        width: 100%;

        max-width: 580px;

    }


    .search-box input {

        width: 100%;

        height: 42px;

        padding:
            0 70px
            0 40px;

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

        border-radius: 9px;

        outline: none;

        background: var(--sidebar);

        color: var(--text);

        font-size: 15px;

        transition: .2s;

    }


    .search-box input::placeholder {
        color: var(--muted);
    }


    .search-box input:focus {

        border-color: var(--primary);

        box-shadow:
            0 0 0 3px
            rgba(99,102,241,.12);

    }


    .search-icon {

        position: absolute;

        left: 13px;

        top: 50%;

        transform: translateY(-50%);

        color: var(--muted);

        font-size: 18px;

        pointer-events: none;

    }


    .search-shortcut {

        position: absolute;

        right: 10px;

        top: 8px;

        padding: 2px 7px;

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

        border-radius: 5px;

        background: var(--bg);

        color: var(--muted);

        font-size: 12px;

        line-height: 20px;

    }


    /* =====================================================
       HEADER ACTIONS
    ====================================================== */

    .header-actions {

        margin-left: auto;

        display: flex;

        align-items: center;

        gap: 9px;

        flex-shrink: 0;

    }


    .icon-btn {

        width: 40px;

        height: 40px;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

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

        border-radius: 8px;

        background: transparent;

        color: var(--text);

        font-size: 18px;

        transition: .2s;

    }


    .icon-btn:hover {

        background: var(--primary-light);

        color: var(--primary);

    }


    /* =====================================================
       LOGIN BUTTON
    ====================================================== */

    .login-btn {

        height: 40px;

        padding: 0 17px;

        border: 0;

        border-radius: 8px;

        background: var(--primary);

        color: #fff;

        font-size: 15px;

        font-weight: 600;

        white-space: nowrap;

        transition: .2s;

    }


    .login-btn:hover {

        opacity: .9;

        transform: translateY(-1px);

    }


    .login-btn.logged-in {
        background: var(--success-border);
    }


    /* =====================================================
       SIDEBAR
    ====================================================== */

    .sidebar {

        position: fixed;

        left: 0;

        top: var(--header-height);

        bottom: 0;

        width: var(--sidebar-width);

        z-index: 1050;

        padding: 30px 16px;

        overflow-y: auto;

        background: var(--sidebar);

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

        transition:
            transform .25s ease,
            background .25s ease;

    }


    .sidebar-section {
        margin-bottom: 30px;
    }


    .sidebar-title {

        margin-bottom: 9px;

        padding: 0 12px;

        color: var(--muted);

        font-size: 12px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: .09em;

    }


    .nav-item {

        display: flex;

        align-items: center;

        gap: 10px;

        margin: 2px 0;

        padding: 9px 12px;

        border-radius: 7px;

        color: var(--muted);

        text-decoration: none;

        font-size: 15px;

        line-height: 1.4;

        cursor: pointer;

        transition: .15s;

    }


    .nav-item:hover {

        background: var(--primary-light);

        color: var(--primary);

    }


    .nav-item.active {

        background: var(--primary-light);

        color: var(--primary);

        font-weight: 600;

    }


    .nav-icon {

        width: 21px;

        flex-shrink: 0;

        text-align: center;

        font-size: 15px;

    }


    .nav-sub {

        padding-left: 42px;

        font-size: 14px;

    }


    /* =====================================================
       SIDEBAR OVERLAY
    ====================================================== */

    .sidebar-overlay {

        position: fixed;

        inset: var(--header-height) 0 0 0;

        z-index: 1040;

        display: none;

        background: rgba(0,0,0,.5);

        opacity: 0;

        transition: opacity .25s ease;

    }


    .sidebar-overlay.show {

        display: block;

        opacity: 1;

    }


    /* =====================================================
       MAIN
    ====================================================== */

    .main {

        min-height: 100vh;

        margin-left: var(--sidebar-width);

        padding-top: var(--header-height);

    }


    /* =====================================================
       CONTENT WRAPPER
    ====================================================== */

    .content-wrapper {

        width: 100%;

        max-width: 1100px;

        margin: 0 auto;

        padding:
            48px
            55px
            85px;

    }


    /* =====================================================
       DOCUMENTATION + TOC
    ====================================================== */

    .documentation-layout {

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            190px;

        gap: 60px;

        align-items: start;

    }


    /* =====================================================
       BREADCRUMB
    ====================================================== */

    .breadcrumbs {

        margin-bottom: 27px;

        color: var(--muted);

        font-size: 14px;

    }


    .breadcrumbs span {
        margin: 0 7px;
    }


    /* =====================================================
       HEADINGS
    ====================================================== */

    h1 {

        margin-bottom: 17px;

        color: var(--text);

        font-size: 42px;

        font-weight: 700;

        line-height: 1.2;

        letter-spacing: -.03em;

    }


    h2 {

        margin-top: 48px;

        margin-bottom: 17px;

        color: var(--text);

        font-size: 28px;

        font-weight: 700;

        line-height: 1.3;

        scroll-margin-top: 95px;

    }


    h3 {

        margin-top: 30px;

        margin-bottom: 11px;

        color: var(--text);

        font-size: 20px;

        font-weight: 650;

        line-height: 1.4;

        scroll-margin-top: 95px;

    }


    .lead {

        max-width: 780px;

        margin-bottom: 38px;

        color: var(--muted);

        font-size: 19px;

        line-height: 1.7;

    }


    p {

        margin-bottom: 18px;

        color: var(--muted);

        font-size: 16px;

        line-height: 1.75;

    }


    /* =====================================================
       CALLOUT
    ====================================================== */

    .callout {

        margin: 24px 0;

        padding: 17px 20px;

        border-left: 4px solid;

        border-radius: 7px;

    }


    .callout strong {

        display: block;

        margin-bottom: 4px;

        color: var(--text);

        font-size: 16px;

    }


    .callout p {

        margin: 0;

        font-size: 15px;

        line-height: 1.7;

    }


    .note {

        background: var(--note-bg);

        border-color: var(--note-border);

    }


    .success {

        background: var(--success-bg);

        border-color: var(--success-border);

    }


    .danger {

        background: var(--danger-bg);

        border-color: var(--danger-border);

    }


    /* =====================================================
       CODE BLOCK
    ====================================================== */

    .code-wrapper {

        margin: 22px 0 27px;

        overflow: hidden;

        border: 1px solid #1e293b;

        border-radius: 10px;

        background: var(--code-bg);

    }


    .code-header {

        min-height: 44px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        padding: 0 15px;

        border-bottom: 1px solid rgba(255,255,255,.08);

        background: rgba(255,255,255,.04);

        color: #94a3b8;

        font-size: 13px;

    }


    .copy-btn {

        padding: 6px 9px;

        border: 0;

        border-radius: 5px;

        background: transparent;

        color: #94a3b8;

        font-size: 13px;

        cursor: pointer;

        transition: .2s;

    }


    .copy-btn:hover {

        background: rgba(255,255,255,.08);

        color: #fff;

    }


    pre {

        margin: 0;

        padding: 22px;

        overflow-x: auto;

        color: var(--code-text);

        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            Menlo,
            monospace;

        font-size: 14px;

        line-height: 1.75;

        white-space: pre;

    }


    code {

        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            Menlo,
            monospace;

    }


    .inline-code {

        padding: 3px 7px;

        border-radius: 5px;

        background: var(--primary-light);

        color: var(--primary);

        font-size: .92em;

    }


    /* =====================================================
       TABLE
    ====================================================== */

    .table-responsive {

        margin: 22px 0;

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

        border-radius: 8px;

    }


    .doc-table {

        width: 100%;

        min-width: 500px;

        margin: 0;

        border-collapse: collapse;

        font-size: 15px;

    }


    .doc-table th,
    .doc-table td {

        padding: 13px 15px;

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

        text-align: left;

    }


    .doc-table th {

        background: var(--sidebar);

        color: var(--text);

        font-size: 15px;

        font-weight: 600;

    }


    .doc-table td {
        color: var(--muted);
    }


    .doc-table code {
        color: var(--primary);
    }


    /* =====================================================
       RIGHT TOC
    ====================================================== */

    .toc {

        position: sticky;

        top: 105px;

        align-self: start;

    }


    .toc-title {

        margin-bottom: 13px;

        color: var(--muted);

        font-size: 12px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: .08em;

    }


    .toc a {

        display: block;

        padding: 6px 0 6px 13px;

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

        color: var(--muted);

        text-decoration: none;

        font-size: 13px;

        line-height: 1.5;

        transition: .15s;

    }


    .toc a:hover,
    .toc a.active {

        border-left-color: var(--primary);

        color: var(--primary);

    }


    /* =====================================================
       PAGE NAVIGATION
    ====================================================== */

    .page-navigation {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 16px;

        margin-top: 75px;

        padding-top: 27px;

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

    }


    .page-nav {

        padding: 17px;

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

        border-radius: 9px;

        color: var(--text);

        text-decoration: none;

        font-size: 15px;

        transition: .2s;

    }


    .page-nav:hover {

        border-color: var(--primary);

        background: var(--primary-light);

        color: var(--primary);

    }


    .page-nav small {

        display: block;

        margin-bottom: 5px;

        color: var(--muted);

        font-size: 13px;

    }


    .page-nav.next {
        text-align: right;
    }


    /* =====================================================
       LOGIN OVERLAY
    ====================================================== */

    .login-overlay {

        position: fixed;

        inset: 0;

        z-index: 2000;

        display: none;

        align-items: center;

        justify-content: center;

        padding: 20px;

        background: rgba(15,23,42,.58);

        backdrop-filter: blur(5px);

    }


    .login-overlay.show {
        display: flex;
    }


    /* =====================================================
       LOGIN MODAL
    ====================================================== */

    .login-modal {

        position: relative;

        width: 100%;

        max-width: 440px;

        padding: 34px;

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

        border-radius: 16px;

        background: var(--bg);

        box-shadow:
            0 25px 60px
            rgba(0,0,0,.25);

        animation:
            loginIn .2s ease;

    }


    @keyframes loginIn {

        from {

            opacity: 0;

            transform:
                translateY(10px)
                scale(.98);

        }

        to {

            opacity: 1;

            transform:
                translateY(0)
                scale(1);

        }

    }


    .login-close {

        position: absolute;

        top: 12px;

        right: 15px;

        width: 36px;

        height: 36px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 0;

        border-radius: 7px;

        background: transparent;

        color: var(--muted);

        font-size: 26px;

        cursor: pointer;

    }


    .login-close:hover {

        background: var(--primary-light);

        color: var(--primary);

    }


    .login-logo {

        width: 50px;

        height: 50px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 19px;

        border-radius: 12px;

        background:
            linear-gradient(
                135deg,
                #6366f1,
                #8b5cf6
            );

        color: #fff;

        font-size: 19px;

        font-weight: 800;

    }


    .login-modal h2 {

        margin: 0 0 7px;

        color: var(--text);

        font-size: 27px;

    }


    .login-description {

        margin-bottom: 27px;

        font-size: 15px;

    }


    .login-modal label {

        display: block;

        margin: 15px 0 7px;

        color: var(--text);

        font-size: 14px;

        font-weight: 600;

    }


    .login-modal input {

        width: 100%;

        height: 45px;

        padding: 0 13px;

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

        border-radius: 8px;

        outline: none;

        background: var(--sidebar);

        color: var(--text);

        font-size: 15px;

    }


    .login-modal input:focus {

        border-color: var(--primary);

        box-shadow:
            0 0 0 3px
            rgba(99,102,241,.12);

    }


    .login-submit,
    .demo-login {

        width: 100%;

        height: 45px;

        border-radius: 8px;

        cursor: pointer;

        font-size: 15px;

        font-weight: 600;

    }


    .login-submit {

        margin-top: 21px;

        border: 0;

        background: var(--primary);

        color: #fff;

    }


    .login-submit:hover {
        opacity: .9;
    }


    .login-divider {

        display: flex;

        align-items: center;

        gap: 12px;

        margin: 23px 0;

        color: var(--muted);

        font-size: 13px;

    }


    .login-divider::before,
    .login-divider::after {

        content: "";

        height: 1px;

        flex: 1;

        background: var(--border);

    }


    .demo-login {

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

        background: transparent;

        color: var(--text);

    }


    .demo-login:hover {

        background: var(--primary-light);

        color: var(--primary);

    }


    /* =====================================================
       SEARCH HIDDEN STATE
    ====================================================== */

    .documentation section.search-hidden {
        display: none !important;
    }


    /* =====================================================
       BOOTSTRAP RESPONSIVE
    ====================================================== */

    @media (max-width: 1199.98px) {

        .logo {
            width: 210px;
        }

        .topbar {
            gap: 15px;
        }

        .content-wrapper {
            padding-left: 35px;
            padding-right: 35px;
        }

        .documentation-layout {
            gap: 35px;
            grid-template-columns:
                minmax(0, 1fr)
                170px;
        }

    }


    /* =====================================================
       TABLET
    ====================================================== */

    @media (max-width: 991.98px) {

        .topbar {

            height: 68px;

            padding:
                0 16px;

            gap: 12px;

        }


        .mobile-menu {

            display: flex;

        }


        /* Tablet/mobile par logo hide */

        .logo {

            display: none;

        }


        .search-box {

            max-width: none;

            flex: 1;

        }


        .header-actions {

            gap: 7px;

        }


        .header-actions .github {

            display: none;

        }


        .sidebar {

            transform:
                translateX(-100%);

            box-shadow:
                10px 0 35px
                rgba(0,0,0,.08);

        }


        .sidebar.open {

            transform:
                translateX(0);

        }


        .main {

            margin-left: 0;

        }


        .content-wrapper {

            max-width: 100%;

            padding:
                40px
                28px
                75px;

        }


        .documentation-layout {

            display: block;

        }


        .toc {

            display: none;

        }

    }


    /* =====================================================
       MOBILE
    ====================================================== */

    @media (max-width: 575.98px) {

        :root {
            --header-height: 64px;
        }


        body {
            font-size: 15px;
        }


        .topbar {

            height: 64px;

            padding:
                0 10px;

            gap: 8px;

        }


        .mobile-menu {

            width: 38px;

            height: 38px;

            font-size: 21px;

        }


        .search-box input {

            height: 40px;

            padding:
                0 10px
                0 36px;

            font-size: 14px;

        }


        .search-icon {
            left: 11px;
            font-size: 17px;
        }


        .search-shortcut {
            display: none;
        }


        .header-actions {

            gap: 5px;

        }


        .header-actions .theme-btn {

            width: 38px;

            height: 38px;

        }


        .login-btn {

            height: 38px;

            padding:
                0 11px;

            font-size: 13px;

        }


        .sidebar {

            top: 64px;

            width:
                min(285px, 86vw);

            padding:
                25px 14px;

        }


        .sidebar-overlay {

            inset: 64px 0 0 0;

        }


        .content-wrapper {

            padding:
                30px
                16px
                60px;

        }


        .breadcrumbs {

            margin-bottom: 22px;

            font-size: 13px;

        }


        h1 {

            margin-bottom: 14px;

            font-size: 32px;

        }


        h2 {

            margin-top: 40px;

            margin-bottom: 15px;

            font-size: 24px;

        }


        h3 {

            font-size: 19px;

        }


        .lead {

            margin-bottom: 30px;

            font-size: 16px;

        }


        p {

            font-size: 15px;

            line-height: 1.7;

        }


        .callout {

            padding:
                15px 16px;

        }


        .callout p {

            font-size: 14px;

        }


        .code-wrapper {

            margin:
                18px 0 23px;

            border-radius: 8px;

        }


        .code-header {

            min-height: 42px;

            padding:
                0 12px;

            font-size: 12px;

        }


        .copy-btn {

            font-size: 12px;

        }


        pre {

            padding: 17px;

            font-size: 13px;

            line-height: 1.7;

        }


        .page-navigation {

            grid-template-columns: 1fr;

            gap: 12px;

            margin-top: 55px;

        }


        .page-nav.next {

            text-align: left;

        }


        .login-overlay {

            padding: 15px;

        }


        .login-modal {

            max-height: 90vh;

            overflow-y: auto;

            padding:
                28px 20px;

            border-radius: 14px;

        }


        .login-modal h2 {

            font-size: 24px;

        }

    }


    /* =====================================================
       VERY SMALL MOBILE
    ====================================================== */

    @media (max-width: 380px) {

        .header-actions .theme-btn {

            display: none;

        }


        .login-btn {

            padding:
                0 9px;

        }


        .content-wrapper {

            padding-left: 14px;

            padding-right: 14px;

        }


        h1 {
            font-size: 29px;
        }


        h2 {
            font-size: 22px;
        }

    }