:root {
    --white-100: #fff;
    --GrayScale-50: #F6F7F8;
    --GrayScale-100: #EDEEEF;
    --GrayScale-200: #E1E2E3;
    --GrayScale-300: #CFD0D1;
    --GrayScale-400: #AAABAC;
    --GrayScale-500: #898A8B;
    --GrayScale-600: #626364;
    --GrayScale-700: #4F5051;
    --GrayScale-800: #313233;
    --GrayScale-900-F: #111213;
    --Violet-500: #8B5CF6;
    --Violet-900: #6628f7;
    --Violet-400: #A78BFA;
    --Violet-50: #F5F3FF;
    --Violet-100: #EDE9FE;
    --Violet-200: #DDD6FE;
    --darkViolet: #101826;
    --Blue-50: #E7E9FF;
    --Error-600-F: #F04438;
    --Success-600-F: #12B76A;
    --menu-icon: url(../images/bulletMenu.svg);
    --body-bg: #fff;
    --body-color: #221b1c;
    --header-bg: #fff;
    --header-border: #ebe6e7;
    --card-bg: #fff;
    --sidebar-bg: #fff;
    --code-bg: var(--Violet-100);
    --code-border: var(--Violet-500);
    --border-color: #e5e7eb;
    --link-color: var(--Violet-500);
    --table-header-bg: var(--Violet-100);
    --table-border: var(--GrayScale-200);
    --search-bg: #fff;
    --scrollbar-thumb: var(--Violet-200);
}

[data-theme="dark"] {
    --white-100: #1b1824;
    --GrayScale-50: #1b1824;
    --GrayScale-100: #282528;
    --GrayScale-200: #3f3c3f;
    --GrayScale-300: #575457;
    --GrayScale-400: #918f96;
    --GrayScale-500: #918f96;
    --GrayScale-600: #bbb9bf;
    --GrayScale-700: #d4d2d8;
    --GrayScale-800: #e8e6ec;
    --GrayScale-900-F: #f5f3f9;
    --Violet-500: #6a59e9;
    --Violet-900: #816dec;
    --Violet-400: #9681f0;
    --Violet-50: #1b1824;
    --Violet-100: #302d39;
    --Violet-200: #46444e;
    --darkViolet: #0f0d14;
    --Blue-50: #1e2240;
    --Error-600-F: #d94a4a;
    --Success-600-F: #47d5a6;
    --body-bg: #121212;
    --body-color: #e5e7eb;
    --header-bg: #1b1824;
    --header-border: #302d39;
    --card-bg: #1b1824;
    --sidebar-bg: #1b1824;
    --code-bg: #302d39;
    --code-border: #46444e;
    --border-color: #302d39;
    --link-color: #9681f0;
    --table-header-bg: #302d39;
    --table-border: #46444e;
    --search-bg: #282528;
    --scrollbar-thumb: #46444e;
}

body{ margin: 0; padding: 0; font-family: "Inter", sans-serif; color: var(--body-color); background-color: var(--body-bg); line-height: 1.3; overflow-x: hidden; transition: background-color 0.3s, color 0.3s;}
h1,h2,h3,h4,h5,h6,p{ margin: 0;}
h1{ font-size: 36px; font-weight: 400;}


.pageContent, .headerSection .containers{ display: flex; max-width: 1600px; margin: 0 auto; box-sizing: border-box;}
.headerSection{ border-bottom: 1px solid var(--header-border); position: sticky; top: 0; background-color: var(--header-bg); z-index: 2; padding:10px 30px; transition: background-color 0.3s;max-width: 1600px;margin: auto;}
.headerSection .containers{ justify-content: space-between; align-items: center; }
.pageContent .rightSection{ flex: 1;}
.leftNavigation{padding:30px 20px;  max-width: 310px; min-width: 310px; margin-right: 19px;  position: sticky; top: 55px; height: fit-content; background-color: var(--sidebar-bg); transition: background-color 0.3s;}
.rightSection{padding:30px 20px; max-width: calc(100% - 310px);}
.navigationSection{  height: calc(100vh - 115px); overflow: auto; padding-right: 10px;}
.headerSection .logo img{ height: 32px; width: 32px;}
.headerSection .logo a{ display: flex; gap: 10px; font-weight: 600; align-items: center; font-size: 18px; text-decoration: none; color: var(--body-color);} 
.headerSection .logo { display: flex; align-items: center; gap: 15px;}

.serchSection{ width: auto; flex-shrink: 0; }
.searchInput{ padding: 6px 10px; border: 1px solid var(--Violet-200); border-radius: 6px; position: relative; display: flex; justify-content: flex-start; gap: 0px; align-items: center; transition: all 0.2s linear; cursor: pointer; background-color: var(--search-bg);}
.searchInput:hover{ box-shadow: 0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a); background-color: var(--Violet-100); transform: translateY(-1px);}
.searchInput input{border: none; padding: 0; font-size: 14px; width: 100%; background-color: transparent; color: var(--body-color);}

/* Dark mode toggle */
.theme-toggle{ background: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 8px; cursor: pointer; display: flex; align-items: center; color: var(--body-color); transition: all 0.2s;}
.theme-toggle:hover{ background: var(--Violet-100); }
.theme-toggle svg{ width: 16px; height: 16px; }
.searchInput:has(input:focus){gap: 8px; outline: 2px solid var(--Violet-200); box-shadow: 0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a); transform: translateY(-1px);}
.searchInput input:focus-visible{ outline: none;}
.searchInput input:focus{ width: 130px;}
.searchInput input::-webkit-search-cancel-button{ display: none;}
.searchInput img{ height: 12px; width: 12px;}
.searchInput .text{font-family: "IBM Plex Mono", monospace; font-size: 12px; gap: 2px; display: flex; align-items: center;}
.searchInput .text span{ background-color: transparent; border: 1px solid #c8b6f4; padding: 2px 5px; border-radius: 4px;}
.search_result{ position: fixed; display: flex; flex-direction: column; gap: 10px; padding: 10px; width: 100%; top: 50px;right: 30px; max-width: 500px; background-color: var(--white-100); border: 1px solid var(--Violet-500); border-radius: 8px; max-height: 500px; overflow: auto;     box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.1);}
.search_result_Text { position: relative; display: flex; flex-direction: column; gap: 10px; }
.search_result_Text .title{background-color: var(--Violet-100); padding: 10px; border-radius: 4px; display: flex; align-items: center;  gap: 15px;}
.search_result_Text .title i{ color: var(--Violet-500);}
.search_result_Text .title .text{ display: flex; flex-direction: column; gap: 5px;}
.search_result_Text .title p{font-size: 12px; color: var(--GrayScale-500); }
.search_result_Text .title h6{font-size: 16px; color: var(--GrayScale-900-F); }
.search_result_Text .subText{     margin-left: 40px; border-left: 1px solid var(--Violet-200); padding-left: 20px; color: var(--GrayScale-900-F); font-size: 16px; margin-right: 20px;}
.search_result_Text a { position: absolute;  width: 100%; height: 100%; }
.navigationSection::-webkit-scrollbar {width: 6px;}
.navigationSection::-webkit-scrollbar-track {background: var(--white-100); border-radius: 10px; }
.navigationSection::-webkit-scrollbar-thumb { background: var(--white-100); border-radius: 10px; transition: background 0.3s;}
.leftNavigation:hover .navigationSection::-webkit-scrollbar-thumb{ background-color: var(--Violet-200);}
.divineDocumentation .ck-content .table{ width: 100%; display: block; overflow: auto;}

.navigationSection ul{ list-style: none; padding: 0; margin: 0; font-size: 14px;}
.navigationSection ul a{ text-decoration: none; color: #707070; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; padding: 6px 12px; font-weight: 400 !important; gap: 10px;}
.navigationSection ul a.externallink.active i { transform: rotate(0deg);}
.navigationSection ul a:hover{background-color:transparent; color: #221b1c;}
.navigationSection ul .nav-link-wrap{ border-radius: 4px;}
.navigationSection ul .nav-link-wrap:hover{background-color:var(--Violet-100); color: #221b1c;}
.navigationSection ul a.active{ color: #8b5cf6; font-weight: 600;}
.navigationSection ul a i{ transition: all 0.2s linear; height: 20px; width: 20px; display: flex; align-items: center; justify-content: center;}
.navigationSection ul a.active i{ transform: rotate(90deg);}
.navigationSection ul.navigationMain .navigationSub {display: none;margin-left: 20px;border-left: 1px solid #c8b6f4;}
.navigationSection ul a.active + .navigationSub { display: block;}
.navigationSection ul.navigationMain .navigationSub a{ padding-left: 20px; }

.docSection{ display: flex; gap: 48px;}
.docSection .divineDocumentation { width: calc(100% - 224px); max-width: 100%;}
.docSection .rightNavSection{ max-width: 224px; min-width: 224px; width: 100%; position: sticky; top: 85px; height: fit-content;}
.rightNavSection ul{ margin: 0; padding: 0; list-style: none; font-size: 14px;}
.rightNavSection ul li a{ text-decoration: none; color: #221b1c; padding: 6px 12px; display: flex; border-radius: 4px;}
.rightNavSection ul li a:hover{background-color: var(--Violet-100); color: #221b1c;}
.rightNavSection ul li a.active{ color:var(--Violet-100);font-weight: 600; }
.rightNavSection ul li + li{ margin-top: 10px;}


.divineDocumentation p{line-height: 1.6;}
.divineDocumentation{ max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;}
.divineDocumentation .mainTitle .title{ display: flex; align-items: center; gap: 10px; justify-content: space-between;}
.divineDocumentation .mainTitle{ display: flex; flex-direction: column; gap: 10px;}
.divineDocumentation .mainTitle p{ font-size: 18px; color: #7039a2;} 
.copyButton{ display: flex;  border-radius: 4px; border: 1px solid var(--Violet-200); position: relative;}
.copyButton button{ background-color: transparent; padding: 4px 8px; border: none; display: flex; align-items: center; gap: 10px; font-size: 14px;} 
.copyButton button + button{ border-left: 1px solid var(--Violet-200);}
.copyButton #copyDropdownBtn i{ transition: all 0.3s linear;}
.copyButton #copyDropdownBtn.show i{ transform: rotate(180deg); }
.copyButton button:hover{ background-color:var(--Violet-100) ;}
.copyButton .copydropdown{ z-index: 1; position: absolute; top: calc(100% + 10px); right: 0; background-color: var(--white-100); padding: 8px; border: 1px solid var(--Violet-200); width: 260px; border-radius: 8px; display: none; flex-direction: column; gap: 5px;}
.copyButton .copydropdown hr{ margin: 0; opacity: 1; border-top: 1px solid var(--Violet-200);}
.copyButton .copydropdown .copydropdownText{ position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; padding: 8px; border-radius: 4px;}
.copyButton .copydropdown.show{ display: flex;}
.copyButton .copydropdown .copydropdownText a{ position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; z-index: 1;}
.copyButton .copydropdown .copydropdownText:hover{ background-color: var(--Violet-100);}
.copyButton .copydropdown .copydropdownText p{ font-size: 14px; color: var(--GrayScale-900-F); line-height: 1;}
.copyButton .copydropdown .copydropdownText .text{ display: flex; flex-direction: column; gap: 5px;}
.copyButton .copydropdown .copydropdownText p.small{ font-size: 12px; color: var(--GrayScale-600);}
.copyButton .copydropdown .copydropdownText .icon{ color: var(--GrayScale-600); width: 16px;}
.copyButton .copydropdown .copydropdownText .icon svg{ height: 15px; width: 15px;}
.gettongStartSection{ display: flex; flex-direction: column; gap: 20px; margin-top: 20px;}
.gettongStartSection a{ display: inline-flex; align-items: center; color: #8b5cf6;     white-space: normal;  word-wrap: break-word;overflow-wrap: anywhere;}
.gettongStartSection a svg{ height: 10px; object-fit: cover; width: 20px;}
.gettongStartSection ul, .gettongStartSection ol{ margin: 0;    padding-left: 1.2rem;}
.gettongStartSection ul li + li, .gettongStartSection ol li + li{ margin-top: 10px;}

.postLink{ position: relative; padding: 8px 16px; background-color: var(--Violet-100); border: 1px solid var(--Violet-200); border-radius: 6px; font-family: "IBM Plex Mono", monospace; font-size: 14px;}
.postLink button, .copy-btn{opacity: 0; z-index: 1; cursor: pointer; color: var(--Violet-500); background-color: var(--Violet-100); border: 1px solid var(--Violet-400);border-radius: 6px; position: absolute; inset: 0; margin: auto; right: 16px; width: fit-content; height: fit-content; left: auto; }
.copy-btn{ inset: unset; top: 12px; right: 16px; z-index: 0;}
.postLink:hover button, .code-block:hover .copy-btn { opacity: 1;}
.token{ padding: 4px; border-radius: 4px; font-family: "IBM Plex Mono", monospace; font-size: 14px; background-color: var(--Violet-100); border: 1px solid var(--Violet-200);}

.nextStepBtn{ display: flex; text-decoration: none; color: #333; background-color: transparent; text-align: left; justify-content: space-between; align-items: center; padding: 16px; border: 1px solid var(--Violet-500); border-radius: 4px; }
.nextStepBtn span{ display: flex; flex-direction: column; gap: 5px; font-size: 16px; }
.nextStepBtn span span{ font-size: 12px; color: var(--GrayScale-500);}
.nextStepBtn i{ font-size: 24px; color: var(--Violet-500);}
.f14{ font-size: 14px;}
.nextStepBtn:hover span{ color: var(--Violet-500);}
.nextStepBtn.previousBox{ text-align: right;}
.nextStepBtn.previousBox i{ transform: rotate(180deg);}


.toggleBtn{ display: none;}


.service-box {display: block;background: var(--white-100);border: 1px solid var(--Violet-400);padding: 12px 20px;border-radius: 8px;text-decoration: none;transition: 0.3s;}
.service-box:hover {background: var(--Violet-100);}
.box-content {display: flex;justify-content: space-between;align-items: center;font-size: 16px;color: #333;}
.arrow {font-size: 18px;color: var(--GrayScale-600);font-weight: bold;} 

.divineDocumentation .ck-content{ display: flex; flex-direction: column; gap: 20px;}
.divineDocumentation .ck-content h2{ font-size: 24px; font-weight: 400;}
.divineDocumentation .ck-content h3{ font-size: 19px; font-weight: 400;}
.divineDocumentation .ck-content pre{ margin: 0; background-color: var(--Violet-100); border-color: var(--Violet-500); border-radius: 4px; }
.divineDocumentation .ck-content pre.expand::after{ content: ""; position: absolute; width: 100%; height: 100px; background: linear-gradient(0deg, var(--Violet-100) 0%, transparent 100%); bottom: 0; left: 0;}
.divineDocumentation .ck-content pre .toggle-btn{ z-index: 1; position: absolute; width: fit-content; left: 0; right: 0; bottom: 10px; margin: auto; padding: 8px 12px; background-color: var(--Violet-100); color: var(--Violet-500); font-weight: 600; box-shadow: 0 0 #0000 0 #0000,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); border-radius: 8px; border: 1px solid var(--Violet-500); font-size: 12px; line-height: 1;}
.divineDocumentation .ck-content pre::-webkit-scrollbar {width: 6px; height: 6px;}
.divineDocumentation .ck-content pre::-webkit-scrollbar-track {background: transparent; border-radius: 10px; }
.divineDocumentation .ck-content pre::-webkit-scrollbar-thumb { background: var(--Violet-500); border-radius: 10px; transition: background 0.3s;}
.divineDocumentation .ck-content .table{ margin: 0;}
.divineDocumentation .ck-content .table table th{ background-color: var(--Violet-100); font-size: 14px; font-weight: 500; padding: 8px 12px;} 
.divineDocumentation .ck-content .table table td{font-size: 14px; font-weight: 400; padding: 8px 12px; }
.divineDocumentation .ck-content a{ color: var(--Violet-500) !important; font-weight: 400 !important; text-decoration-color: var(--Violet-500) !important;}
.divineDocumentation .ck-content a strong{ font-weight: 400 !important;}

.divineDocumentation .ck-content code {  color: var(--Violet-500) !important; font-weight: 400 !important; background-color: var(--Violet-100) !important; box-shadow: none !important;}
.breadCurmbSection{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; max-width: 767px;}

i.fa.fa-external-link {
    width: 9px;
    height: 8px;
    font-size: 14px;
}
.postLink {
    overflow-x: auto;
}
@media(max-width:991px){
    .toggleBtn{ padding: 0; height: 15px; width: 20px; border: 0;  border-radius: 0;display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;}
    .toggleBtn span{ height: 1.5px; width: 100%; background-color: #221b1c; border-radius: 5px; display: block; transition: all 0.5s linear;}

    .toggleBtn.open{ justify-content: flex-start; position: relative;}
    .toggleBtn.open span{  position: absolute; top: 0; bottom: 0; margin: auto; width: 80%;}
    .toggleBtn.open span:first-child{ transform: rotate(-45deg);}
    .toggleBtn.open span:nth-child(2){ opacity: 0;}
    .toggleBtn.open span:nth-child(3){ transform: rotate(45deg); width: 80%;}
    .pageContent{ flex-direction: column;}
    .leftNavigation{ max-width: 100%; display: none;}
    .leftNavigation.show{ display: block;}
    .docSection .rightNavSection{ display: none;}
    .divineDocumentation .mainTitle .title{    flex-direction: column-reverse; align-items: flex-start;}
    .divineDocumentation .copyButton{ margin-left: auto;}
    .searchInput input{ display: none;}
    .serchSection{ max-width: fit-content;}
    .serchSection:has(.searchInput.show){ height: 30px; width: 5px;}
    .searchInput .text{ display: none;}
    .searchInput.show input{ display: block; width: 100%;}
    .searchInput.show{ position: absolute; right: 30px; top: 8px; background-color: #fff; right: 30px; top: 8px; width:300px;}
    body:has(.leftNavigation.show){ overflow: hidden;}
    .leftNavigation{ margin: 0;}
    .headerSection{ padding: 10px 20px; overflow: hidden;}
    .leftNavigation{ padding: 30px 10px;}
    .header-btn-text { display: none; }
    .serchSection { gap: 8px !important; }

    .rightSection {
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media(max-width:567.98px){
    .divineDocumentation .ck-content h1, h1{ font-size: 24px;}
    .divineDocumentation .ck-content h2{ font-size: 20px;}
    .divineDocumentation .ck-content h3{ font-size: 16px;}
    .searchInput.show{width: calc(100% - 56px);}
    .search_result{ width: calc(100% - 60px);}
    .divineDocumentation .ck-content{ gap: 10px;}
    .divineDocumentation p{ font-size: 14px;}
}
@media(max-width:400.98px){
    .breadCurmbSection{gap: 5px; }
}

/* ========== MEDIUM SCREEN: HIDE RIGHT TOC (992px–1200px) ========== */
@media(max-width:1200px){
    .docSection .rightNavSection { display: none; }
    .docSection .divineDocumentation { width: 100%;max-width: 100%;}
}

/* ========== MOBILE OVERLAY BACKDROP ========== */
.mobileOverlay {
    display: none;
    position: fixed;
    top: 55px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 49;
}
.mobileOverlay.show { display: block; }

/* ========== MOBILE SIDEBAR AS FIXED DRAWER ========== */
@media(max-width:991px){
    .leftNavigation { min-width: unset; }
    .leftNavigation.show {
        position: fixed;
        top: 55px;
        left: 0;
        width: 300px;
        max-width: 85vw;
        height: calc(100vh - 55px);
        z-index: 50;
        overflow-y: auto;
        padding: 20px 15px 30px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    }
}

/* ========== HEADER BUTTONS: ICON-ONLY ON SMALL SCREENS ========== */
@media(max-width:576px){
    .header-btn-text { display: none; }
    .header-btn { padding: 8px 10px !important; gap: 0 !important; }
}
@media(max-width:380px){
    .header-btn-getkey { display: none !important; }
}

/* ========== CONTENT AREA: REDUCE PADDING ON SMALL SCREENS ========== */
@media(max-width:567.98px){
    .rightSection { padding: 20px 12px; }
    .headerSection { padding: 10px 12px; }
}





.breadcrumb { 
    font-family: 'Poppins', sans-serif; 
    font-size: 12px; 
    text-transform: uppercase; 
    font-weight: 400; 
    color: var(--Violet-500);  
    letter-spacing: 0.5px; margin: 0; }

.breadcrumb a {
    color:var(--Violet-500);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--Violet-900); /* slightly darker pink on hover */
    text-decoration: underline;
}

.breadcrumb span {
    color:var(--Violet-500);
}

.breadcrumb .separator {
    margin: 0 6px;
    color: var(--GrayScale-500);
}

.breadcrumb .current {
    color:var(--Violet-500);
}

/* ========== DARK MODE OVERRIDES ========== */
[data-theme="dark"] .navigationSection a { color: var(--GrayScale-600); }
[data-theme="dark"] .navigationSection a:hover,
[data-theme="dark"] .navigationSection a.active { color: var(--Violet-500); }
[data-theme="dark"] .divineDocumentation { color: var(--body-color); }
[data-theme="dark"] .divineDocumentation .ck-content h1,
[data-theme="dark"] .divineDocumentation .ck-content h2,
[data-theme="dark"] .divineDocumentation .ck-content h3,
[data-theme="dark"] .divineDocumentation .ck-content h4 { color: var(--body-color); }
[data-theme="dark"] .divineDocumentation .ck-content a,
[data-theme="dark"] .divineDocumentation .ck-content a span,
[data-theme="dark"] .divineDocumentation .ck-content a * { color: #9681f0 !important; text-decoration-color: #9681f0 !important; }
[data-theme="dark"] .divineDocumentation .ck-content code { color: #bba9f6 !important; background-color: #302d39 !important; border: 1px solid #46444e; }
[data-theme="dark"] .divineDocumentation .ck-content pre { background-color: var(--code-bg); border-color: var(--code-border); }
[data-theme="dark"] .divineDocumentation .ck-content table { border-color: var(--table-border); }
[data-theme="dark"] .divineDocumentation .ck-content table,
[data-theme="dark"] .divineDocumentation .ck-content figure.table { background-color: var(--card-bg); }
[data-theme="dark"] .divineDocumentation .ck-content th { background-color: var(--table-header-bg) !important; color: var(--body-color) !important; border-color: var(--table-border) !important; }
[data-theme="dark"] .divineDocumentation .ck-content td { background-color: var(--card-bg) !important; border-color: var(--table-border) !important; color: var(--body-color) !important; }
[data-theme="dark"] .divineDocumentation .ck-content tr { background-color: var(--card-bg) !important; }
[data-theme="dark"] .divineDocumentation .ck-content tr:nth-child(even) td { background-color: #22202a !important; }
[data-theme="dark"] .divineDocumentation .ck-content hr { border-color: var(--border-color); }
[data-theme="dark"] .divineDocumentation .ck-content blockquote { border-left-color: var(--Violet-500); background: var(--code-bg); color: var(--body-color); }
[data-theme="dark"] .divineDocumentation .ck-content pre code { color: #e5e7eb !important; }
[data-theme="dark"] .divineDocumentation .ck-content pre { color: #e5e7eb; }
[data-theme="dark"] .postLink p { color: #e5e7eb !important; }
[data-theme="dark"] .divineDocumentation .ck-content p,
[data-theme="dark"] .divineDocumentation .ck-content li,
[data-theme="dark"] .divineDocumentation .ck-content span { color: var(--body-color); }
[data-theme="dark"] .divineDocumentation .ck-content strong { color: var(--body-color); }
[data-theme="dark"] .divineDocumentation .ck-content figure.table table { border: 1px solid var(--table-border); }
[data-theme="dark"] .rightNavSection a { color: var(--GrayScale-500); }
[data-theme="dark"] .rightNavSection a:hover { color: var(--Violet-500); }
[data-theme="dark"] .copydropdown { background: var(--header-bg); border-color: var(--border-color); }
[data-theme="dark"] .copydropdownText:hover { background: var(--Violet-100); }
[data-theme="dark"] .search_result { background-color: var(--header-bg); border-color: var(--Violet-500); }
[data-theme="dark"] .search_result a { color: var(--body-color); }
[data-theme="dark"] .postLink { background-color: var(--code-bg); border-color: var(--code-border); }
[data-theme="dark"] .postLink p { color: var(--Violet-500); }
[data-theme="dark"] .navigationSection::-webkit-scrollbar-track { background: var(--sidebar-bg); }
[data-theme="dark"] .mobileOverlay { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .toggleBtn span { background-color: var(--body-color); }
[data-theme="dark"] .nextStepBtn { background: var(--code-bg); color: var(--body-color); border-color: var(--border-color); }
[data-theme="dark"] img { opacity: 0.9; }
[data-theme="dark"] .divineDocumentation .mainTitle p { color: #9681f0; }
[data-theme="dark"] .box-content { color: var(--body-color); }
[data-theme="dark"] .box-content .arrow { color: var(--body-color); }
[data-theme="dark"] .service-box { background: var(--card-bg); border-color: var(--Violet-200); }
[data-theme="dark"] .service-box:hover { background: var(--Violet-100); }
[data-theme="dark"] .nextStepBtn,
[data-theme="dark"] .previousBtn { background: var(--card-bg) !important; color: var(--body-color) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .nextStepBtn span,
[data-theme="dark"] .previousBtn span { color: var(--body-color); }
[data-theme="dark"] .nextStepBtn .small,
[data-theme="dark"] .previousBtn .small { color: var(--GrayScale-500); }
[data-theme="dark"] .copyMarkdownBtn,
[data-theme="dark"] #copyDropdownBtn { color: var(--body-color); border-color: var(--border-color); background: var(--card-bg); }
[data-theme="dark"] .breadCurmbSection a { color: var(--GrayScale-500); }
[data-theme="dark"] .breadCurmbSection .current { color: var(--Violet-500); }