@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{--bg:#080b12;--side:#090d15;--surface:#0d121d;--surface2:#111827;--border:rgba(148,163,184,.12);--border2:rgba(148,163,184,.2);--text:#f8fafc;--muted:#97a3b6;--muted2:#607086;--purple:#8b5cf6;--purple2:#7c3aed;--soft:rgba(124,58,237,.13);--sidebar:286px;--toc:220px;--top:64px}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:radial-gradient(circle at 55% 0,rgba(91,33,182,.11),transparent 34%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}html[lang="ar"] body{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif}a{color:inherit}button,input{font:inherit}::selection{background:rgba(124,58,237,.38);color:#fff}.app{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);height:100vh;z-index:50;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(11,15,25,.99),rgba(8,11,18,.99));border-right:1px solid var(--border)}html[dir="rtl"] .sidebar{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--border)}.brand-row{height:var(--top);flex:0 0 var(--top);display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none}.logo{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,rgba(124,58,237,.23),rgba(124,58,237,.06));border:1px solid rgba(139,92,246,.28);overflow:hidden}.logo img{width:30px;height:30px;object-fit:contain}.brand>span:last-child{display:flex;align-items:baseline;gap:5px}.brand strong{font-size:14px}.brand small{font-size:10px;color:var(--muted2)}
.search-trigger{margin:14px 15px 5px;min-height:42px;display:flex;align-items:center;gap:9px;padding:0 9px 0 11px;color:var(--muted);background:rgba(2,6,12,.52);border:1px solid var(--border2);border-radius:10px;cursor:pointer}.search-trigger:hover{border-color:rgba(139,92,246,.38);background:rgba(18,24,38,.75)}.search-text{flex:1;text-align:left;font-size:12px}.search-trigger kbd,.command kbd{font-size:9px;font-weight:600;color:#8895a8;background:#111827;border:1px solid var(--border2);border-radius:5px;padding:3px 6px}html[dir="rtl"] .search-text{text-align:right}
.sidebar-nav{flex:1;overflow:auto;padding:4px 10px 24px;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.17) transparent}.nav-group{padding-top:13px}.nav-group-title{width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 9px;color:#65748b;background:none;border:0;cursor:pointer;font-size:9px;font-weight:800;letter-spacing:.12em;text-align:left}.nav-group-title b{font-size:13px;transition:transform .15s}.nav-group:not(.open) .nav-group-title b{transform:rotate(-90deg)}html[dir="rtl"] .nav-group:not(.open) .nav-group-title b{transform:rotate(90deg)}.nav-group:not(.open) .nav-group-items{display:none}.nav-item{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:0 9px;color:#9ba8bb;text-decoration:none;border-radius:8px;font-size:12.5px}.nav-item:hover{color:#fff;background:rgba(148,163,184,.055)}.nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(124,58,237,.18),rgba(124,58,237,.045));box-shadow:inset 0 0 0 1px rgba(139,92,246,.18)}.nav-item.active:before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;border-radius:99px;background:var(--purple);box-shadow:0 0 10px rgba(139,92,246,.65)}html[dir="rtl"] .nav-item.active:before{left:auto;right:-1px}.nav-icon{width:18px;flex:none;text-align:center;color:#7d8ba0;font-size:11px}.side-bottom{min-height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;color:#4e5c70;font-size:9px;border-top:1px solid var(--border)}
.shell{min-height:100vh;margin-left:var(--sidebar)}html[dir="rtl"] .shell{margin-left:0;margin-right:var(--sidebar)}.topbar{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 34px;background:rgba(8,11,18,.84);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}html[dir="rtl"] .topbar{padding:0 34px 0 24px}.top-left,.top-actions{display:flex;align-items:center;gap:9px}.crumb{display:flex;align-items:center;gap:7px;color:#718096;font-size:11px}.crumb b{color:#354154;font-weight:400}.crumb strong{color:#a7b2c2;font-weight:500}.dashboard-btn,.lang-btn{min-height:34px;display:flex;align-items:center;justify-content:center;padding:0 11px;color:#b8c1cf;background:rgba(15,20,31,.66);border:1px solid var(--border);border-radius:9px;text-decoration:none;font-size:11px}.dashboard-btn:hover,.lang-btn:hover{color:#fff;border-color:rgba(139,92,246,.28);background:rgba(124,58,237,.08)}
.layout{width:100%;max-width:1310px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--toc);gap:54px;padding:48px clamp(28px,4vw,62px) 70px}.content{min-width:0;max-width:850px}.hero{position:relative;margin-bottom:40px;padding-bottom:37px;border-bottom:1px solid var(--border)}.eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;color:#a78bfa;font-size:10px;font-weight:800;letter-spacing:.1em}.eyebrow:before{content:"";width:6px;height:6px;border-radius:99px;background:var(--purple);box-shadow:0 0 10px rgba(139,92,246,.75)}.hero h1{margin:0;max-width:780px;font-size:clamp(32px,4vw,48px);line-height:1.06;letter-spacing:-.045em}.hero p{max-width:760px;margin:17px 0 0;color:var(--muted);font-size:15px;line-height:1.76}html[lang="ar"] .hero h1{letter-spacing:0;line-height:1.3}
.doc-section{scroll-margin-top:calc(var(--top) + 28px);margin-top:40px}.doc-section h2{margin:0 0 12px;font-size:22px;line-height:1.35;letter-spacing:-.025em}.doc-section p,.doc-section li{color:#9aa7b8;font-size:14px;line-height:1.8}.doc-section p{margin:0 0 14px}.doc-section ul{margin:11px 0 17px;padding-inline-start:22px}.doc-section li{padding:3px 0}.callout{margin:18px 0;padding:14px 16px;border:1px solid rgba(139,92,246,.18);border-radius:10px;background:rgba(124,58,237,.06)}.callout strong{display:block;margin-bottom:4px;font-size:12px}.callout p{margin:0;font-size:12.5px}.callout.warning{border-color:rgba(251,191,36,.17);background:rgba(251,191,36,.04)}.callout.warning strong{color:#fde68a}.callout.tip strong{color:#c4b5fd}.codebox{margin:17px 0;overflow:hidden;background:#070a10;border:1px solid var(--border);border-radius:11px}.codebar{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#637187;background:rgba(15,20,31,.76);border-bottom:1px solid var(--border);font-size:10px}.copy-btn{color:#9ca8b8;background:none;border:0;cursor:pointer;font-size:10px}.codebox pre{margin:0;padding:15px;overflow:auto;color:#cbd5e1;font:12px/1.7 "SFMono-Regular",Consolas,monospace}
.toc-sticky{position:sticky;top:calc(var(--top) + 34px);padding-left:18px;border-left:1px solid var(--border)}html[dir="rtl"] .toc-sticky{padding-left:0;padding-right:18px;border-left:0;border-right:1px solid var(--border)}.toc-title{margin-bottom:12px;color:#617086;font-size:9px;font-weight:800;letter-spacing:.13em}.toc{display:flex;flex-direction:column}.toc a{position:relative;padding:6px 0;color:#7f8ca0;text-decoration:none;font-size:11px;line-height:1.45}.toc a:hover,.toc a.active{color:#c4b5fd}.toc a.active:before{content:"";position:absolute;left:-19px;top:4px;bottom:4px;width:2px;border-radius:99px;background:var(--purple);box-shadow:0 0 8px rgba(139,92,246,.55)}html[dir="rtl"] .toc a.active:before{left:auto;right:-19px}
.page-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:52px;padding-top:24px;border-top:1px solid var(--border)}.page-nav a{min-height:67px;display:flex;flex-direction:column;justify-content:center;padding:12px 14px;color:#cbd5e1;text-decoration:none;background:rgba(15,20,31,.48);border:1px solid var(--border);border-radius:10px}.page-nav a:hover{border-color:rgba(139,92,246,.25)}.page-nav small{margin-bottom:5px;color:#59677b;font-size:9px;text-transform:uppercase}.page-nav strong{font-size:12px}.page-nav .next{text-align:right}html[dir="rtl"] .page-nav .next{text-align:left}
.search-modal{position:fixed;inset:0;z-index:100;display:none}.search-modal.open{display:block}.search-backdrop{position:absolute;inset:0;background:rgba(2,5,10,.72);backdrop-filter:blur(5px)}.command{position:relative;width:min(620px,calc(100vw - 28px));max-height:min(620px,calc(100vh - 100px));display:flex;flex-direction:column;margin:8vh auto 0;overflow:hidden;background:#0d121c;border:1px solid rgba(148,163,184,.18);border-radius:15px;box-shadow:0 35px 100px rgba(0,0,0,.5)}.command-input{min-height:58px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border)}.command-input input{min-width:0;flex:1;padding:0;color:#edf2f7;background:none;border:0;outline:0;font-size:14px}.search-results{overflow:auto;padding:8px}.result-group{padding:8px 7px 4px;color:#536177;font-size:9px;font-weight:800;letter-spacing:.11em}.search-result{display:block;padding:11px 12px;color:#cdd5df;text-decoration:none;border-radius:9px}.search-result:hover{background:rgba(124,58,237,.1)}.search-result strong{display:block;margin-bottom:3px;font-size:12px}.search-result span{display:block;overflow:hidden;color:#7e8b9d;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}.search-empty{padding:44px 20px;color:#66758a;text-align:center;font-size:12px}.icon-btn{width:34px;height:34px;display:grid;place-items:center;padding:0;color:#a7b2c2;background:rgba(15,20,31,.65);border:1px solid var(--border);border-radius:9px;cursor:pointer}.mobile,.overlay{display:none}
@media(max-width:1100px){:root{--toc:190px}.layout{gap:34px;padding-left:34px;padding-right:34px}}
@media(max-width:960px){.mobile{display:grid}.sidebar{z-index:80;transform:translateX(-101%);transition:transform .2s ease}html[dir="rtl"] .sidebar{transform:translateX(101%)}.sidebar.open,html[dir="rtl"] .sidebar.open{transform:none}.overlay.open{display:block;position:fixed;inset:0;z-index:70;background:rgba(3,6,12,.7);backdrop-filter:blur(3px)}.shell,html[dir="rtl"] .shell{margin:0}.layout{grid-template-columns:1fr}.toc-wrap{display:none}.topbar{padding-left:18px;padding-right:18px}.dashboard-btn{display:none}}
@media(max-width:680px){.layout{padding:30px 18px 52px}.hero h1{font-size:34px}.hero p{font-size:14px}.page-nav{grid-template-columns:1fr}.page-nav .next{text-align:left}html[dir="rtl"] .page-nav .next{text-align:right}.crumb span:first-child{display:none}}



/* ============================================================
   Volyx Docs UI Patch
   ============================================================ */

.logo{
    width:28px !important;
    height:28px !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
    padding:0 !important;
}
.logo img{
    width:28px !important;
    height:28px !important;
    object-fit:contain !important;
}
.brand{
    gap:10px !important;
}
.brand-text{
    display:flex !important;
    flex-direction:column !important;
    line-height:1.05 !important;
}
.brand strong{
    font-size:14px !important;
    font-weight:700 !important;
}
.brand small{
    display:block !important;
    margin-top:3px !important;
    font-size:11px !important;
    color:#8fa1b8 !important;
    letter-spacing:0 !important;
}

.nav-group-title{
    pointer-events:none !important;
    cursor:default !important;
    padding:8px 9px 6px !important;
}
.nav-group-title b{
    display:none !important;
}
.nav-group-items{
    display:block !important;
}

.nav-item{
    gap:10px !important;
}
.nav-icon{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    display:grid !important;
    place-items:center !important;
    color:#7f8ea4 !important;
    flex:0 0 16px !important;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon{
    color:#cdb9ff !important;
}
.nav-icon svg{
    width:15px !important;
    height:15px !important;
    display:block !important;
    stroke:currentColor !important;
    fill:none !important;
    stroke-width:1.85 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.nav-group{
    padding-top:11px !important;
}
.nav-item{
    min-height:34px !important;
    font-size:12.5px !important;
}




/* ============================================================
   Premium Branding + Icons Patch
   ============================================================ */

.brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    text-decoration:none !important;
}

.logo{
    display:none !important;
}

.brand-logo{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    object-fit:contain !important;
    display:block !important;
    border:0 !important;
    outline:0 !important;
    background:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
}

.brand-text{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    line-height:1 !important;
}

.brand-text.single{
    gap:0 !important;
}

.brand-text strong{
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    color:#eef2ff !important;
}

.brand-text small{
    display:none !important;
}

.nav-group-title{
    pointer-events:none !important;
    cursor:default !important;
    padding:8px 9px 6px !important;
}

.nav-group-title b{
    display:none !important;
}

.nav-group-items{
    display:block !important;
}

.nav-icon{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    flex:0 0 17px !important;
    display:grid !important;
    place-items:center !important;
    color:#7f90a8 !important;
    transition:color .18s ease, transform .18s ease !important;
}

.nav-item:hover .nav-icon{
    color:#d8c7ff !important;
    transform:translateY(-.5px) !important;
}

.nav-item.active .nav-icon{
    color:#c8a8ff !important;
}

.nav-icon svg{
    width:17px !important;
    height:17px !important;
    display:block !important;
    stroke:currentColor !important;
    fill:none !important;
    stroke-width:1.7 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.nav-item{
    gap:10px !important;
}

.nav-item span:last-child{
    letter-spacing:0 !important;
}



.logo,
.logo img,
.plain-logo,
.plain-logo img{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
}



/* ============================================================
   Volyx Sidebar Minimal Guide Style
   ============================================================ */

:root{
    --volyx-purple:#8b5cf6;
    --volyx-purple-soft:#a78bfa;
    --volyx-sidebar-line:rgba(139,92,246,.18);
}

/* groups always open */
.nav-group-title{
    pointer-events:none !important;
    cursor:default !important;
    padding:10px 10px 8px !important;
    margin:0 !important;
    color:#7f8899 !important;
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
}
.nav-group-title b{
    display:none !important;
}
.nav-group-items{
    display:block !important;
    position:relative !important;
    margin:2px 0 8px 0 !important;
    padding:0 0 0 14px !important;
}
html[dir="rtl"] .nav-group-items{
    padding:0 14px 0 0 !important;
}

/* vertical line like guides sidebar */
.nav-group-items::before{
    content:"";
    position:absolute;
    left:4px;
    top:2px;
    bottom:2px;
    width:1px;
    background:var(--volyx-sidebar-line);
}
html[dir="rtl"] .nav-group-items::before{
    left:auto;
    right:4px;
}

.nav-item{
    position:relative !important;
    display:block !important;
    min-height:auto !important;
    padding:7px 10px 7px 14px !important;
    margin:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#b7c0cf !important;
    font-size:13px !important;
    line-height:1.45 !important;
    text-decoration:none !important;
}
html[dir="rtl"] .nav-item{
    padding:7px 14px 7px 10px !important;
}

.nav-item:hover{
    color:#f3f6fb !important;
    background:transparent !important;
}

.nav-item.active{
    color:var(--volyx-purple-soft) !important;
    background:transparent !important;
    box-shadow:none !important;
    font-weight:600 !important;
}

.nav-item.active::before{
    content:"";
    position:absolute;
    left:-10px;
    top:7px;
    bottom:7px;
    width:1px;
    background:var(--volyx-purple);
    border-radius:999px;
}
html[dir="rtl"] .nav-item.active::before{
    left:auto;
    right:-10px;
}

.nav-item::after,
.nav-item.active::after{
    display:none !important;
}

/* hide icons completely */
.nav-icon{
    display:none !important;
}
.nav-item span:last-child{
    display:block !important;
    margin:0 !important;
}

/* remove old pill/boxed styling */
.nav-item,
.nav-item:hover,
.nav-item.active{
    border:none !important;
    outline:none !important;
}

/* sidebar spacing */
.sidebar-nav{
    padding:8px 12px 26px !important;
}
.nav-group{
    padding-top:10px !important;
}

/* make top brand area cleaner with no framed logo box */
.logo{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
}
.brand-logo{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

/* mobile / desktop keep same clean style */
@media (max-width:960px){
    .nav-item{
        font-size:13px !important;
    }
}

/* End Volyx Sidebar Minimal Guide Style */




/* ============================================================
   Volyx TOC Purple Style
   ============================================================ */

.toc-sticky{
    border-left:1px solid rgba(139,92,246,.18) !important;
}

html[dir="rtl"] .toc-sticky{
    border-left:0 !important;
    border-right:1px solid rgba(139,92,246,.18) !important;
}

.toc-title{
    color:#7f8899 !important;
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
}

.toc{
    gap:0 !important;
}

.toc a{
    position:relative !important;
    display:block !important;
    padding:6px 0 !important;

    color:#8f9bb0 !important;

    font-size:12px !important;
    line-height:1.5 !important;

    text-decoration:none !important;

    transition:
        color .16s ease,
        transform .16s ease !important;
}

.toc a:hover{
    color:#c4b5fd !important;
}

.toc a.active{
    color:#a78bfa !important;
    font-weight:600 !important;
}

.toc a.active::before{
    content:"" !important;

    position:absolute !important;

    left:-19px !important;
    top:5px !important;
    bottom:5px !important;

    width:2px !important;

    background:#8b5cf6 !important;

    border-radius:999px !important;

    box-shadow:
        0 0 8px rgba(139,92,246,.35) !important;
}

html[dir="rtl"] .toc a.active::before{
    left:auto !important;
    right:-19px !important;
}

/* keep inactive entries clean */
.toc a:not(.active)::before{
    display:none !important;
}

/* End Volyx TOC Purple Style */




/* VOLYX_GLOBAL_TOC_START */

/* applies to every documentation page */
.toc-wrap{
    color:#8f9bb0 !important;
}

.toc-sticky{
    border-left:1px solid rgba(139,92,246,.20) !important;
}

html[dir="rtl"] .toc-sticky{
    border-left:0 !important;
    border-right:1px solid rgba(139,92,246,.20) !important;
}

.toc-title{
    margin-bottom:12px !important;
    color:#7f8899 !important;

    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.13em !important;
    line-height:1.4 !important;

    text-transform:uppercase !important;
}

.toc{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
}

.toc a{
    position:relative !important;
    display:block !important;

    padding:6px 0 !important;

    color:#8f9bb0 !important;

    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.5 !important;

    text-decoration:none !important;

    background:none !important;
    border:0 !important;
    box-shadow:none !important;

    transition:
        color .16s ease,
        opacity .16s ease !important;
}

.toc a:hover{
    color:#c4b5fd !important;
}

.toc a.active{
    color:#a78bfa !important;
    font-weight:600 !important;
}

.toc a.active::before{
    content:"" !important;

    position:absolute !important;

    left:-19px !important;
    top:5px !important;
    bottom:5px !important;

    width:2px !important;

    background:#8b5cf6 !important;

    border-radius:999px !important;

    box-shadow:
        0 0 8px rgba(139,92,246,.35) !important;
}

.toc a:not(.active)::before{
    display:none !important;
}

html[dir="rtl"] .toc a.active::before{
    left:auto !important;
    right:-19px !important;
}

/* Arabic spacing */
html[dir="rtl"] .toc a{
    text-align:right !important;
}

/* VOLYX_GLOBAL_TOC_END */




/* VOLYX_INTRODUCTION_V1_START */

.intro-hero{
    margin-bottom:42px !important;
}

.intro-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:20px;
}

.intro-feature{
    display:flex;
    align-items:flex-start;
    gap:14px;

    min-height:122px;

    padding:17px;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(17,23,36,.82),
            rgba(10,14,23,.72)
        );

    border:1px solid rgba(148,163,184,.10);
    border-radius:11px;

    transition:
        border-color .16s ease,
        transform .16s ease,
        background .16s ease;
}

.intro-feature:hover{
    transform:translateY(-1px);

    border-color:rgba(139,92,246,.28);

    background:
        linear-gradient(
            145deg,
            rgba(23,29,45,.92),
            rgba(12,16,27,.88)
        );
}

.intro-feature-number{
    flex:0 0 auto;

    color:#8b5cf6;

    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;

    padding-top:2px;
}

.intro-feature strong{
    display:block;

    margin-bottom:6px;

    color:#edf0f6;

    font-size:13px;
}

.intro-feature p{
    margin:0 !important;

    color:#8794a8 !important;

    font-size:12px !important;
    line-height:1.65 !important;
}

.intro-flow{
    position:relative;

    margin-top:19px;
}

.intro-flow-item{
    position:relative;

    display:grid;
    grid-template-columns:31px minmax(0,1fr);
    gap:14px;

    padding-bottom:22px;
}

.intro-flow-item:not(:last-child)::after{
    content:"";

    position:absolute;

    left:15px;
    top:32px;
    bottom:3px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .intro-flow-item:not(:last-child)::after{
    left:auto;
    right:15px;
}

.intro-flow-item > span{
    width:31px;
    height:31px;

    display:grid;
    place-items:center;

    color:#bfa7ff;

    background:rgba(124,58,237,.10);

    border:1px solid rgba(139,92,246,.20);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.intro-flow-item strong{
    display:block;

    margin:3px 0 4px;

    color:#e9edf4;

    font-size:13px;
}

.intro-flow-item p{
    margin:0 !important;

    font-size:12.5px !important;
}

.intro-doc-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 28px;

    margin-top:18px;
}

.intro-doc-list > div{
    padding:14px 0;

    border-bottom:1px solid rgba(148,163,184,.09);
}

.intro-doc-list strong{
    display:block;

    margin-bottom:4px;

    color:#dfe4ed;

    font-size:12.5px;
}

.intro-doc-list p{
    margin:0 !important;

    color:#8290a4 !important;

    font-size:12px !important;
    line-height:1.6 !important;
}

.intro-quick-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin-top:17px;
}

.intro-quick-links a{
    min-height:48px;

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

    padding:0 14px;

    color:#bfc8d6;

    text-decoration:none;

    background:rgba(15,20,31,.52);

    border:1px solid rgba(148,163,184,.10);
    border-radius:9px;

    font-size:12px;

    transition:
        color .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.intro-quick-links a:hover{
    color:#fff;

    background:rgba(124,58,237,.06);

    border-color:rgba(139,92,246,.26);
}

.intro-quick-links b{
    color:#8b5cf6;
    font-size:14px;
    font-weight:500;
}

@media(max-width:680px){

    .intro-feature-grid,
    .intro-doc-list,
    .intro-quick-links{
        grid-template-columns:1fr;
    }

    .intro-feature{
        min-height:auto;
    }
}

/* VOLYX_INTRODUCTION_V1_END */




/* VOLYX_FIRST_STEPS_START */

.first-links{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;

    margin-top:18px;
}

.first-links a{
    min-height:105px;

    padding:15px;

    text-decoration:none;

    background:rgba(15,20,31,.48);

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease;
}

.first-links a:hover{
    transform:translateY(-1px);

    background:rgba(124,58,237,.055);

    border-color:rgba(139,92,246,.26);
}

.first-links strong{
    display:block;

    margin-bottom:6px;

    color:#e8ecf3;

    font-size:12.5px;
}

.first-links span{
    color:#8290a3;

    font-size:11.5px;
    line-height:1.6;
}

.first-detail-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 28px;

    margin:17px 0;
}

.first-detail-list > div{
    padding:13px 0;

    border-bottom:1px solid rgba(148,163,184,.09);
}

.first-detail-list strong{
    display:block;

    margin-bottom:4px;

    color:#dfe5ed;

    font-size:12.5px;
}

.first-detail-list p{
    margin:0 !important;

    color:#8491a4 !important;

    font-size:12px !important;
    line-height:1.62 !important;
}

.first-methods{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;

    margin-top:18px;
}

.first-methods a{
    padding:15px;

    text-decoration:none;

    background:rgba(15,20,31,.48);

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;
}

.first-methods a:hover{
    border-color:rgba(139,92,246,.25);
}

.first-methods strong{
    display:block;

    margin-bottom:5px;

    color:#e7ebf1;

    font-size:12.5px;
}

.first-methods p{
    margin:0 !important;

    color:#8290a3 !important;

    font-size:11.5px !important;
    line-height:1.6 !important;
}

.first-check-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin-top:18px;
}

.first-check-grid > div{
    padding:15px;

    background:rgba(15,20,31,.42);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.first-check-grid strong{
    display:block;

    margin-bottom:5px;

    color:#e5e9ef;

    font-size:12.5px;
}

.first-check-grid p{
    margin:0 !important;

    color:#8290a3 !important;

    font-size:11.5px !important;
    line-height:1.6 !important;
}

.first-troubleshoot{
    margin-top:18px;
}

.first-troubleshoot > div{
    position:relative;

    display:grid;
    grid-template-columns:29px minmax(0,1fr);
    gap:13px;

    padding-bottom:19px;
}

.first-troubleshoot > div:not(:last-child)::after{
    content:"";

    position:absolute;

    left:14px;
    top:30px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.15);
}

html[dir="rtl"] .first-troubleshoot > div:not(:last-child)::after{
    left:auto;
    right:14px;
}

.first-troubleshoot > div > span{
    width:29px;
    height:29px;

    display:grid;
    place-items:center;

    color:#baa2fb;

    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.20);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.first-troubleshoot strong{
    display:block;

    margin:3px 0 3px;

    color:#e5e9f0;

    font-size:12.5px;
}

.first-troubleshoot p{
    margin:0 !important;

    font-size:12px !important;
}

.first-checklist{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;

    margin-top:18px;
}

.first-checklist label{
    min-height:43px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:0 12px;

    color:#aeb8c7;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:8px;

    font-size:12px;

    cursor:pointer;
}

.first-checklist input{
    width:14px;
    height:14px;

    accent-color:#8b5cf6;
}

@media(max-width:760px){

    .first-links,
    .first-methods{
        grid-template-columns:1fr;
    }

    .first-detail-list,
    .first-check-grid,
    .first-checklist{
        grid-template-columns:1fr;
    }
}

/* VOLYX_FIRST_STEPS_END */




/* VOLYX_FIRST_SERVER_START */

.first-server-checks{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;

    margin-top:18px;
}

.first-server-checks > div{
    display:flex;
    gap:11px;

    padding:15px;

    background:rgba(15,20,31,.44);

    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
}

.first-server-checks > div > span{
    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
}

.first-server-checks strong{
    display:block;

    margin-bottom:5px;

    color:#e4e9f0;
    font-size:12px;
}

.first-server-checks p{
    margin:0 !important;

    color:#8290a3 !important;
    font-size:11.5px !important;
    line-height:1.6 !important;
}


.first-server-map{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin-top:18px;
}

.first-server-map a{
    display:flex;
    gap:13px;

    min-height:100px;

    padding:15px;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(16,21,33,.70),
            rgba(10,14,23,.55)
        );

    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.first-server-map a:hover{
    transform:translateY(-1px);

    border-color:rgba(139,92,246,.28);

    background:
        linear-gradient(
            145deg,
            rgba(20,25,39,.85),
            rgba(13,17,28,.74)
        );
}

.first-server-map > a > span{
    flex:0 0 auto;

    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;

    padding-top:2px;
}

.first-server-map strong{
    display:block;

    margin-bottom:5px;

    color:#e7ebf2;

    font-size:12.5px;
}

.first-server-map p{
    margin:0 !important;

    color:#8290a4 !important;

    font-size:11.5px !important;
    line-height:1.62 !important;
}


.first-server-flow{
    margin-top:18px;
}

.first-server-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.first-server-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;

    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .first-server-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.first-server-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;

    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.first-server-flow strong{
    display:block;

    margin:3px 0 4px;

    color:#e5e9f0;

    font-size:12.5px;
}

.first-server-flow p{
    margin:0 !important;

    color:#8793a5 !important;

    font-size:12px !important;
}


.first-server-debug{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;

    margin-top:18px;
}

.first-server-debug > div{
    padding:14px;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.first-server-debug strong{
    display:block;

    margin-bottom:5px;

    color:#dfe4ec;

    font-size:12px;
}

.first-server-debug p{
    margin:0 !important;

    color:#8190a4 !important;

    font-size:11.5px !important;
    line-height:1.6 !important;
}


@media(max-width:760px){

    .first-server-checks{
        grid-template-columns:1fr;
    }

    .first-server-map,
    .first-server-debug{
        grid-template-columns:1fr;
    }

}

/* VOLYX_FIRST_SERVER_END */




/* VOLYX_CREATE_HOSTING_FINAL_START */

.create-step-heading{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:13px;
}

.create-step-heading > span{
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:grid;
    place-items:center;

    color:#c8b5ff;
    background:rgba(124,58,237,.11);
    border:1px solid rgba(139,92,246,.24);
    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.create-step-heading small{
    display:block;
    margin-bottom:2px;

    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
    letter-spacing:.13em;
}

.create-step-heading h2{
    margin:0 !important;
}

.create-points,
.create-grid,
.create-resource-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.create-points > div,
.create-grid > div,
.create-resource-grid > div{
    padding:14px;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.create-points strong,
.create-grid strong,
.create-resource-grid strong{
    display:block;
    margin-bottom:4px;

    color:#e4e9f0;
    font-size:12.5px;
}

.create-points p,
.create-grid p,
.create-resource-grid p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.7px !important;
    line-height:1.62 !important;
}


/* Screenshots */

.docs-screenshot{
    margin:25px 0 19px !important;
}

.docs-image-open{
    display:block;

    width:100%;
    padding:0;

    cursor:zoom-in;

    background:none;
    border:0;
    border-radius:12px;

    text-align:inherit;
}

.docs-screenshot img{
    display:block;

    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.11);
    border-radius:12px;

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

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.docs-image-open:hover img{
    transform:translateY(-1px);

    border-color:rgba(139,92,246,.30);

    box-shadow:
        0 22px 52px rgba(0,0,0,.32);
}

.docs-screenshot figcaption{
    margin-top:10px;

    color:#7f8da1;

    font-size:11.5px;
    line-height:1.6;
}


/* Final review */

.create-final-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;

    margin:18px 0;
}

.create-final-list > div{
    display:flex;
    align-items:center;
    gap:10px;

    min-height:46px;
    padding:0 12px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.08);
    border-radius:8px;
}

.create-final-list span{
    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
}

.create-final-list p{
    margin:0 !important;

    color:#b7c1cf !important;

    font-size:11.8px !important;
}


/* Lightbox */

.docs-lightbox{
    position:fixed;
    inset:0;
    z-index:999999;

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

    padding:34px;

    background:rgba(3,5,10,.92);
    backdrop-filter:blur(8px);
}

.docs-lightbox.open{
    display:flex;
}

.docs-lightbox-image{
    display:block;

    max-width:min(1500px,96vw);
    max-height:91vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border:1px solid rgba(139,92,246,.24);
    border-radius:12px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.6);
}

.docs-lightbox-close{
    position:fixed;

    top:18px;
    right:22px;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    cursor:pointer;

    color:#e8eaf1;
    background:rgba(17,22,34,.88);

    border:1px solid rgba(148,163,184,.16);
    border-radius:999px;

    font-size:21px;
}

html[dir="rtl"] .docs-lightbox-close{
    right:auto;
    left:22px;
}

body.docs-lightbox-lock{
    overflow:hidden !important;
}


@media(max-width:760px){

    .create-points,
    .create-grid,
    .create-resource-grid,
    .create-final-list{
        grid-template-columns:1fr;
    }

    .docs-lightbox{
        padding:12px;
    }

    .docs-lightbox-image{
        max-width:98vw;
        max-height:88vh;
        border-radius:8px;
    }

}

/* VOLYX_CREATE_HOSTING_FINAL_END */




/* VOLYX_SERVER_OVERVIEW_START */

.overview-grid,
.overview-resource-grid,
.overview-link-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:18px 0;
}

.overview-grid > div,
.overview-resource-grid > div{
    padding:14px;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.overview-grid strong,
.overview-resource-grid strong,
.overview-info-list strong{
    display:block;

    margin-bottom:4px;

    color:#e3e8ef;
    font-size:12.5px;
}

.overview-grid p,
.overview-resource-grid p,
.overview-info-list p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.63 !important;
}


.overview-action-list{
    display:grid;
    gap:8px;

    margin:18px 0;
}

.overview-action-list > div{
    display:grid;
    grid-template-columns:170px minmax(0,1fr);
    gap:18px;
    align-items:center;

    padding:13px 14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.overview-action-list > div.danger{
    border-color:rgba(244,63,94,.16);
}

.overview-action-name{
    display:flex;
    align-items:center;
    gap:10px;
}

.overview-action-name span{
    min-width:58px;

    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
}

.overview-action-list .danger .overview-action-name span{
    color:#fb7185;
}

.overview-action-name strong{
    color:#e6eaf1;
    font-size:12.5px;
}

.overview-action-list p{
    margin:0 !important;

    color:#8391a5 !important;
    font-size:11.8px !important;
}


.overview-info-list{
    margin:18px 0;

    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;

    overflow:hidden;
}

.overview-info-list > div{
    padding:14px 15px;

    background:rgba(15,20,31,.32);
}

.overview-info-list > div + div{
    border-top:1px solid rgba(148,163,184,.08);
}


.overview-link-grid a{
    display:block;

    min-height:100px;
    padding:15px;

    text-decoration:none;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;

    transition:
        border-color .16s ease,
        transform .16s ease,
        background .16s ease;
}

.overview-link-grid a:hover{
    transform:translateY(-1px);

    background:rgba(124,58,237,.045);

    border-color:rgba(139,92,246,.25);
}

.overview-link-grid strong{
    display:block;

    margin-bottom:5px;

    color:#e7ebf2;
    font-size:12.5px;
}

.overview-link-grid p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.7px !important;
    line-height:1.62 !important;
}


.overview-flow{
    margin-top:18px;
}

.overview-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.overview-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;

    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .overview-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.overview-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;

    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.overview-flow strong{
    display:block;

    margin:3px 0 4px;

    color:#e5e9f0;
    font-size:12.5px;
}

.overview-flow p{
    margin:0 !important;

    color:#8793a5 !important;
    font-size:12px !important;
}


@media(max-width:760px){

    .overview-grid,
    .overview-resource-grid,
    .overview-link-grid{
        grid-template-columns:1fr;
    }

    .overview-action-list > div{
        grid-template-columns:1fr;
        gap:6px;
    }

}

/* VOLYX_SERVER_OVERVIEW_END */


/* VOLYX_FILES_DOCUMENTATION_START */

.files-settings-list,
.files-option-list{
    margin:18px 0;
    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
    overflow:hidden;
}

.files-settings-list > div,
.files-option-list > div{
    padding:14px 15px;
    background:rgba(15,20,31,.32);
}

.files-settings-list > div + div,
.files-option-list > div + div{
    border-top:1px solid rgba(148,163,184,.08);
}

.files-settings-list strong,
.files-option-list strong{
    display:block;
    margin-bottom:4px;
    color:#e3e8ef;
    font-size:12.5px;
}

.files-settings-list p,
.files-option-list p{
    margin:0 !important;
    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.files-action-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:18px 0;
}

.files-action-grid > div{
    padding:14px;
    background:rgba(15,20,31,.40);
    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.files-action-grid strong{
    display:block;
    margin-bottom:4px;
    color:#e4e9f0;
    font-size:12.5px;
}

.files-action-grid p{
    margin:0 !important;
    color:#8290a4 !important;
    font-size:11.8px !important;
}

.files-editor-compare{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:18px 0;
}

.files-editor-compare > div{
    padding:17px;
    background:rgba(15,20,31,.40);
    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
}

.files-editor-compare small{
    display:block;
    margin-bottom:7px;
    color:#8b5cf6;
    font-size:9px;
    font-weight:700;
    letter-spacing:.10em;
}

.files-editor-compare strong{
    color:#e8ecf2;
    font-size:13px;
}

.docs-screenshot-narrow{
    max-width:520px;
}

.docs-screenshot-narrow img{
    width:auto !important;
    max-width:100% !important;
}

@media(max-width:760px){
    .files-action-grid,
    .files-editor-compare{
        grid-template-columns:1fr;
    }
}

/* VOLYX_FILES_DOCUMENTATION_END */


/* VOLYX_SETTINGS_DOCS_START */

.settings-shot{
    margin:18px 0 20px !important;
}

.settings-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}

.settings-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.settings-options > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.settings-options strong{
    display:block;
    margin-bottom:4px;

    color:#e3e8ef;
    font-size:12.5px;
}

.settings-options p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

@media(max-width:760px){

    .settings-options{
        grid-template-columns:1fr;
    }

}

/* VOLYX_SETTINGS_DOCS_END */


/* VOLYX_CONFIG_DOCS_START */

.config-shot{
    margin:18px 0 20px !important;
}

.config-shot img{
    display:block;

    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}

.config-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.config-options > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.config-options strong{
    display:block;
    margin-bottom:4px;

    color:#e3e8ef;
    font-size:12.5px;
}

.config-options p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.config-event-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;

    margin:14px 0 20px;
}

.config-event-grid > div{
    padding:12px;

    background:rgba(15,20,31,.34);

    border:1px solid rgba(148,163,184,.08);
    border-radius:8px;
}

.config-event-grid strong{
    display:block;

    margin-bottom:3px;

    color:#dddff0;
    font-size:11.8px;
}

.config-event-grid p{
    margin:0 !important;

    color:#7f8da1 !important;
    font-size:11px !important;
    line-height:1.55 !important;
}

@media(max-width:760px){

    .config-options{
        grid-template-columns:1fr;
    }

    .config-event-grid{
        grid-template-columns:1fr;
    }

}

/* VOLYX_CONFIG_DOCS_END */




/* VOLYX_CONFIG_IMAGE_SIZE_FIX_START */

/* Wider content area for screenshot-heavy pages */
.content-media-xl{
    max-width: 980px !important;
}

/* Make Config screenshots large and centered */
.content-media-xl .config-shot{
    max-width: 920px;
    margin: 22px auto 28px !important;
}

.content-media-xl .config-shot img{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    cursor: zoom-in;

    border: 1px solid rgba(148,163,184,.12);
    border-radius: 12px;

    box-shadow:
        0 16px 38px rgba(0,0,0,.26);

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.content-media-xl .config-shot img:hover{
    transform: translateY(-1px);
    border-color: rgba(139,92,246,.30);
    box-shadow:
        0 22px 50px rgba(0,0,0,.34);
}

/* Keep config cards readable under big images */
.content-media-xl .config-options{
    gap: 10px;
    margin: 18px 0 24px;
}

.content-media-xl .config-event-grid{
    gap: 10px;
}

/* Lightbox */
.docs-lightbox{
    position: fixed;
    inset: 0;
    z-index: 999999;

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

    padding: 28px;

    background: rgba(3,5,10,.92);
    backdrop-filter: blur(8px);
}

.docs-lightbox.open{
    display: flex;
}

.docs-lightbox-image{
    display: block;
    max-width: min(1600px, 96vw);
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;

    border: 1px solid rgba(139,92,246,.24);
    border-radius: 12px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.60);
}

.docs-lightbox-close{
    position: fixed;
    top: 18px;
    right: 22px;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    cursor: pointer;

    color: #eef2f7;
    background: rgba(17,22,34,.90);

    border: 1px solid rgba(148,163,184,.16);
    border-radius: 999px;

    font-size: 22px;
}

html[dir="rtl"] .docs-lightbox-close{
    right: auto;
    left: 22px;
}

body.docs-lightbox-lock{
    overflow: hidden !important;
}

@media(max-width:760px){

    .content-media-xl{
        max-width: 100% !important;
    }

    .content-media-xl .config-shot{
        max-width: 100%;
        margin: 18px 0 22px !important;
    }

    .docs-lightbox{
        padding: 12px;
    }

    .docs-lightbox-image{
        max-width: 98vw;
        max-height: 88vh;
        border-radius: 8px;
    }
}

/* VOLYX_CONFIG_IMAGE_SIZE_FIX_END */


/* VOLYX_METRICS_DOCS_START */

.metrics-shot{
    margin:18px 0 22px !important;
}

.metrics-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.20);
}

.metrics-grid,
.metrics-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.metrics-grid > div,
.metrics-options > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.metrics-grid strong,
.metrics-options strong{
    display:block;
    margin-bottom:4px;

    color:#e3e8ef;
    font-size:12.5px;
}

.metrics-grid p,
.metrics-options p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.metrics-flow{
    margin-top:18px;
}

.metrics-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.metrics-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;
    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;
    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .metrics-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.metrics-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;
    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.metrics-flow strong{
    display:block;
    margin:3px 0 4px;

    color:#e5e9f0;
    font-size:12.5px;
}

.metrics-flow p{
    margin:0 !important;
    color:#8793a5 !important;
    font-size:12px !important;
}

@media(max-width:760px){

    .metrics-grid,
    .metrics-options{
        grid-template-columns:1fr;
    }

}

/* VOLYX_METRICS_DOCS_END */


/* VOLYX_TERMINAL_DOCS_START */

.terminal-shot{
    margin:20px 0 24px !important;
}

.terminal-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 14px 34px rgba(0,0,0,.22);
}

.terminal-shot figcaption{
    margin-top:9px;

    color:#7f8da1;
    font-size:11.5px;
    line-height:1.55;
}

.terminal-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.terminal-options > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.terminal-options strong{
    display:block;
    margin-bottom:4px;

    color:#e4e9f0;
    font-size:12.5px;
}

.terminal-options p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}


.terminal-command-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.terminal-command-list > div{
    padding:15px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.terminal-command-list strong{
    display:block;

    margin-bottom:8px;

    color:#e4e9f0;
    font-size:12.5px;
}

.terminal-command-list code{
    display:block;

    width:max-content;
    max-width:100%;

    margin:4px 0;
    padding:4px 7px;

    color:#c8b5ff;
    background:rgba(124,58,237,.08);

    border:1px solid rgba(139,92,246,.13);
    border-radius:5px;

    font-size:10.8px;
    overflow-wrap:anywhere;
}

.terminal-command-list p{
    margin:9px 0 0 !important;

    color:#8290a4 !important;
    font-size:11.7px !important;
    line-height:1.6 !important;
}


.terminal-compare{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;

    margin:18px 0;
}

.terminal-compare > div{
    padding:17px;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
}

.terminal-compare small{
    display:block;

    margin-bottom:7px;

    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
    letter-spacing:.11em;
}

.terminal-compare strong{
    display:block;
    margin-bottom:10px;

    color:#e7ebf2;
    font-size:13px;
}


.terminal-flow{
    margin-top:18px;
}

.terminal-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.terminal-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;
    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .terminal-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.terminal-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;
    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.terminal-flow strong{
    display:block;

    margin:3px 0 4px;

    color:#e5e9f0;
    font-size:12.5px;
}

.terminal-flow p{
    margin:0 !important;

    color:#8793a5 !important;
    font-size:12px !important;
}


@media(max-width:760px){

    .terminal-options,
    .terminal-command-list,
    .terminal-compare{
        grid-template-columns:1fr;
    }

}

/* VOLYX_TERMINAL_DOCS_END */


/* VOLYX_DEPLOYMENTS_DOCS_START */

.deployment-shot{
    margin:20px 0 24px !important;
}

.deployment-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 14px 34px rgba(0,0,0,.22);
}

.deployment-shot figcaption{
    margin-top:9px;

    color:#7f8da1;
    font-size:11.5px;
    line-height:1.55;
}

.deployment-grid,
.deployment-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.deployment-grid > div,
.deployment-options > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.deployment-grid strong,
.deployment-options strong{
    display:block;

    margin-bottom:4px;

    color:#e4e9f0;
    font-size:12.5px;
}

.deployment-grid p,
.deployment-options p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.deployment-flow{
    margin-top:18px;
}

.deployment-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.deployment-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;

    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .deployment-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.deployment-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;
    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.deployment-flow strong{
    display:block;

    margin:3px 0 4px;

    color:#e5e9f0;
    font-size:12.5px;
}

.deployment-flow p{
    margin:0 !important;

    color:#8793a5 !important;
    font-size:12px !important;
}

@media(max-width:760px){

    .deployment-grid,
    .deployment-options{
        grid-template-columns:1fr;
    }

}

/* VOLYX_DEPLOYMENTS_DOCS_END */


/* VOLYX_SECRETS_DOCS_START */

.secrets-shot{
    margin:20px 0 24px !important;
}

.secrets-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 14px 34px rgba(0,0,0,.22);
}

.secrets-shot figcaption{
    margin-top:9px;

    color:#7f8da1;
    font-size:11.5px;
    line-height:1.55;
}

.secrets-shot-medium{
    max-width:720px;
}

.secrets-shot-small{
    max-width:430px;
}

.secrets-grid,
.secrets-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.secrets-grid > div,
.secrets-actions > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.secrets-actions > .danger{
    border-color:rgba(244,63,94,.16);
}

.secrets-grid strong,
.secrets-actions strong{
    display:block;

    margin-bottom:4px;

    color:#e4e9f0;
    font-size:12.5px;
}

.secrets-actions > .danger strong{
    color:#fb7185;
}

.secrets-grid p,
.secrets-actions p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.secrets-flow{
    margin-top:18px;
}

.secrets-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.secrets-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;
    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .secrets-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.secrets-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;
    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.secrets-flow strong{
    display:block;

    margin:3px 0 4px;

    color:#e5e9f0;
    font-size:12.5px;
}

.secrets-flow p{
    margin:0 !important;

    color:#8793a5 !important;
    font-size:12px !important;
}

@media(max-width:760px){

    .secrets-grid,
    .secrets-actions{
        grid-template-columns:1fr;
    }

    .secrets-shot-medium,
    .secrets-shot-small{
        max-width:100%;
    }

}

/* VOLYX_SECRETS_DOCS_END */


/* VOLYX_PORTS_DOCS_START */

.ports-shot{
    margin:20px 0 24px !important;
}

.ports-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 14px 34px rgba(0,0,0,.22);
}

.ports-shot figcaption{
    margin-top:9px;

    color:#7f8da1;
    font-size:11.5px;
    line-height:1.55;
}

.ports-shot-medium{
    max-width:760px;
}

.ports-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.ports-grid > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.ports-grid strong{
    display:block;
    margin-bottom:4px;

    color:#e4e9f0;
    font-size:12.5px;
}

.ports-grid p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.ports-compare{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;

    margin:18px 0;
}

.ports-compare > div{
    padding:17px;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
}

.ports-compare small{
    display:block;

    margin-bottom:7px;

    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
    letter-spacing:.11em;
}

.ports-compare strong{
    display:block;
    margin-bottom:10px;

    color:#e7ebf2;
    font-size:13px;
}

.ports-flow{
    margin-top:18px;
}

.ports-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.ports-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;

    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .ports-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.ports-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;
    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.ports-flow strong{
    display:block;

    margin:3px 0 4px;

    color:#e5e9f0;
    font-size:12.5px;
}

.ports-flow p{
    margin:0 !important;

    color:#8793a5 !important;
    font-size:12px !important;
}

@media(max-width:760px){

    .ports-grid,
    .ports-compare{
        grid-template-columns:1fr;
    }

    .ports-shot-medium{
        max-width:100%;
    }

}

/* VOLYX_PORTS_DOCS_END */


/* VOLYX_DOMAIN_DOCS_START */

.domain-shot{
    margin:20px 0 24px !important;
}

.domain-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 14px 34px rgba(0,0,0,.22);
}

.domain-shot figcaption{
    margin-top:9px;

    color:#7f8da1;
    font-size:11.5px;
    line-height:1.55;
}

.domain-shot-medium{
    max-width:780px;
}

.domain-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    margin:18px 0;
}

.domain-grid > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.domain-grid strong{
    display:block;
    margin-bottom:4px;

    color:#e4e9f0;
    font-size:12.5px;
}

.domain-grid p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.domain-compare{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;

    margin:18px 0;
}

.domain-compare > div{
    padding:17px;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
}

.domain-compare small{
    display:block;
    margin-bottom:7px;

    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
    letter-spacing:.11em;
}

.domain-compare strong{
    display:block;
    margin-bottom:10px;

    color:#e7ebf2;
    font-size:13px;
}

.domain-flow{
    margin-top:18px;
}

.domain-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.domain-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;
    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .domain-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.domain-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;
    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.domain-flow strong{
    display:block;

    margin:3px 0 4px;

    color:#e5e9f0;
    font-size:12.5px;
}

.domain-flow p{
    margin:0 !important;

    color:#8793a5 !important;
    font-size:12px !important;
}

@media(max-width:760px){

    .domain-grid,
    .domain-compare{
        grid-template-columns:1fr;
    }

    .domain-shot-medium{
        max-width:100%;
    }

}

/* VOLYX_DOMAIN_DOCS_END */


/* VOLYX_USERS_DOCS_START */

.users-shot{
    margin:20px 0 24px !important;
}

.users-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 14px 34px rgba(0,0,0,.22);
}

.users-shot figcaption{
    margin-top:9px;
    color:#7f8da1;
    font-size:11.5px;
    line-height:1.55;
}

.users-shot-medium{
    max-width:850px;
}

.users-grid,
.users-choice-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:18px 0;
}

.users-grid > div,
.users-choice-list > div{
    padding:14px;
    background:rgba(15,20,31,.38);
    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.users-grid strong,
.users-choice-list strong{
    display:block;
    margin-bottom:4px;
    color:#e4e9f0;
    font-size:12.5px;
}

.users-grid p,
.users-choice-list p{
    margin:0 !important;
    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.users-role-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:18px 0;
}

.users-role-grid > div{
    padding:16px;
    background:rgba(15,20,31,.40);
    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
}

.users-role-grid > div.danger{
    border-color:rgba(244,63,94,.16);
}

.users-role-grid small{
    display:block;
    margin-bottom:7px;
    color:#8b5cf6;
    font-size:9px;
    font-weight:700;
    letter-spacing:.10em;
}

.users-role-grid > div.danger small{
    color:#fb7185;
}

.users-role-grid strong{
    display:block;
    margin-bottom:6px;
    color:#e7ebf2;
    font-size:13px;
}

.users-role-grid p{
    margin:0 !important;
    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.users-permission-list{
    margin:18px 0;
    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
    overflow:hidden;
}

.users-permission-list > div{
    padding:14px 15px;
    background:rgba(15,20,31,.32);
}

.users-permission-list > div + div{
    border-top:1px solid rgba(148,163,184,.08);
}

.users-permission-list > div.danger{
    background:rgba(127,29,29,.045);
}

.users-permission-list strong{
    display:block;
    margin-bottom:4px;
    color:#e4e9f0;
    font-size:12.5px;
}

.users-permission-list > div.danger strong{
    color:#f0b3bd;
}

.users-permission-list p{
    margin:0 !important;
    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

@media(max-width:760px){

    .users-grid,
    .users-choice-list,
    .users-role-grid{
        grid-template-columns:1fr;
    }

    .users-shot-medium{
        max-width:100%;
    }

}

/* VOLYX_USERS_DOCS_END */


/* VOLYX_ACTIVITY_DOCS_START */

.activity-shot{
    margin:20px 0 24px !important;
}

.activity-shot img{
    display:block;
    width:100%;
    height:auto;

    border:1px solid rgba(148,163,184,.10);
    border-radius:10px;

    box-shadow:
        0 14px 34px rgba(0,0,0,.22);
}

.activity-shot figcaption{
    margin-top:9px;
    color:#7f8da1;
    font-size:11.5px;
    line-height:1.55;
}

.activity-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:18px 0;
}

.activity-grid > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.activity-grid strong{
    display:block;
    margin-bottom:4px;
    color:#e4e9f0;
    font-size:12.5px;
}

.activity-grid p{
    margin:0 !important;
    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.activity-category-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:18px 0;
}

.activity-category-grid > div{
    padding:12px;
    background:rgba(15,20,31,.34);
    border:1px solid rgba(148,163,184,.08);
    border-radius:8px;
}

.activity-category-grid strong{
    display:block;
    margin-bottom:3px;
    color:#dddff0;
    font-size:11.8px;
}

.activity-category-grid p{
    margin:0 !important;
    color:#7f8da1 !important;
    font-size:11px !important;
    line-height:1.55 !important;
}

.activity-flow{
    margin-top:18px;
}

.activity-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.activity-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;
    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;
    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .activity-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.activity-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;
    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.activity-flow strong{
    display:block;
    margin:3px 0 4px;
    color:#e5e9f0;
    font-size:12.5px;
}

.activity-flow p{
    margin:0 !important;
    color:#8793a5 !important;
    font-size:12px !important;
}

@media(max-width:760px){

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

    .activity-category-grid{
        grid-template-columns:1fr;
    }

}

/* VOLYX_ACTIVITY_DOCS_END */




/* VOLYX_ACCESS_DOCS_START */

.access-example-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:18px 0;
}

.access-example-grid > div{
    padding:14px;

    background:rgba(15,20,31,.38);

    border:1px solid rgba(148,163,184,.09);
    border-radius:9px;
}

.access-example-grid strong{
    display:block;
    margin-bottom:4px;

    color:#e4e9f0;
    font-size:12.5px;
}

.access-example-grid p{
    margin:0 !important;

    color:#8290a4 !important;
    font-size:11.8px !important;
    line-height:1.62 !important;
}

.access-compare{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;

    margin:18px 0;
}

.access-compare > div{
    padding:17px;

    background:rgba(15,20,31,.40);

    border:1px solid rgba(148,163,184,.09);
    border-radius:10px;
}

.access-compare small{
    display:block;
    margin-bottom:7px;

    color:#8b5cf6;

    font-size:9px;
    font-weight:700;
    letter-spacing:.11em;
}

.access-compare strong{
    display:block;
    margin-bottom:10px;

    color:#e7ebf2;
    font-size:13px;
}

.access-flow{
    margin-top:18px;
}

.access-flow > div{
    position:relative;

    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:13px;

    padding-bottom:20px;
}

.access-flow > div:not(:last-child)::after{
    content:"";

    position:absolute;
    left:14.5px;
    top:31px;
    bottom:2px;

    width:1px;

    background:rgba(139,92,246,.16);
}

html[dir="rtl"] .access-flow > div:not(:last-child)::after{
    left:auto;
    right:14.5px;
}

.access-flow > div > span{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    color:#bca6fb;
    background:rgba(124,58,237,.09);

    border:1px solid rgba(139,92,246,.19);
    border-radius:999px;

    font-size:10px;
    font-weight:700;
}

.access-flow strong{
    display:block;
    margin:3px 0 4px;

    color:#e5e9f0;
    font-size:12.5px;
}

.access-flow p{
    margin:0 !important;

    color:#8793a5 !important;
    font-size:12px !important;
}

@media(max-width:760px){

    .access-example-grid,
    .access-compare{
        grid-template-columns:1fr;
    }

}

/* VOLYX_ACCESS_DOCS_END */