: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: 26px; font-weight: 400;}
h2{ font-size: 20px; font-weight: 400;}
h3{ font-size: 18px; font-weight: 400;}
p{
    font-size: 15px; 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 4px;  max-width: 250px; min-width: 250px; margin-right: 0;  position: sticky; top: 55px; height: fit-content; background-color: var(--sidebar-bg); transition: background-color 0.3s;}
.rightSection{padding:30px 20px 30px 20px; max-width: calc(100% - 250px);}
.navigationSection{  height: calc(100vh - 115px); overflow-y: auto;overflow-x: hidden; 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; }
/* ── Search trigger button ── */
.searchInput {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--Violet-200);
    border-radius: 6px;
    cursor: pointer;
    background-color: var(--search-bg);
    transition: background .15s, transform .1s, box-shadow .15s;
    user-select: none;
}
.searchInput:hover { background-color: var(--Violet-100); box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
.searchInput img { height: 12px; width: 12px; }
.searchInput .search-trigger-label { font-size: 14px; color: var(--GrayScale-500); }
.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; }

/* 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; }

/* ── Search Overlay ── */
.search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: flex-start;
    justify-content: center;
}
.search-overlay.open { display: flex; }
.search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 22, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.search-overlay-panel {
    position: relative;
    z-index: 1;
    width: min(680px, calc(100% - 32px));
    margin-top: 80px;
}
.search-overlay-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white-100, #fff);
    border: 1.5px solid var(--Violet-300, #a78bfa);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 8px 40px rgba(79,70,229,.22), 0 2px 8px rgba(0,0,0,.12);
}
.search-overlay-icon { color: var(--Violet-500, #7c3aed); font-size: 16px; flex-shrink: 0; }
#searchInput {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--body-color);
    outline: none;
}
#searchInput::placeholder { color: var(--GrayScale-400, #9ca3af); }
.search-overlay-esc {
    background: var(--Violet-100, #ede9fe);
    color: var(--Violet-500, #7c3aed);
    border: 1px solid var(--Violet-200, #ddd6fe);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}
.search-overlay-results {
    margin-top: 8px;
    background: var(--white-100, #fff);
    border: 1px solid var(--Violet-200, #ddd6fe);
    border-radius: 10px;
    max-height: 460px;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.search-overlay-results .search_result_Text { position: relative; display: flex; flex-direction: column; gap: 6px; border-radius: 6px; overflow: hidden; }
.search-overlay-results .search_result_Text .title { background-color: var(--Violet-100); padding: 10px 12px; border-radius: 6px; display: flex; align-items: center; gap: 12px; transition: background .15s; }
.search-overlay-results .search_result_Text:hover .title { background-color: var(--Violet-200); }
.search-overlay-results .search_result_Text .title i { color: var(--Violet-500); }
.search-overlay-results .search_result_Text .title .text { display: flex; flex-direction: column; gap: 3px; }
.search-overlay-results .search_result_Text .title p { font-size: 11px; color: var(--GrayScale-500); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.search-overlay-results .search_result_Text .title h6 { font-size: 15px; color: var(--GrayScale-900-F); margin: 0; font-weight: 600; }
.search-overlay-results .search_result_Text .subText { margin-left: 40px; border-left: 2px solid var(--Violet-200); padding-left: 12px; color: var(--GrayScale-600); font-size: 13px; line-height: 1.5; margin-right: 8px; }
.search-overlay-results .search_result_Text a { position: absolute; inset: 0; }
.search-loading { display: flex; justify-content: center; align-items: center; padding: 28px; }
.search-loading-spinner { width: 22px; height: 22px; border: 2.5px solid #ede9fe; border-top-color: #7c3aed; border-radius: 50%; animation: search-spin .65s linear infinite; }
@keyframes search-spin { to { transform: rotate(360deg); } }
/* Dark mode */
[data-theme="dark"] .search-overlay-backdrop { background: rgba(6, 3, 14, 0.75); }
[data-theme="dark"] .search-overlay-input-wrap { background: var(--header-bg); border-color: var(--Violet-500); box-shadow: 0 8px 40px rgba(0,0,0,.5); }
[data-theme="dark"] #searchInput { color: var(--body-color); }
[data-theme="dark"] .search-overlay-esc { background: rgba(124,58,237,.2); color: #a78bfa; border-color: rgba(124,58,237,.4); }
[data-theme="dark"] .search-overlay-results { background: var(--header-bg); border-color: var(--border-color); }
[data-theme="dark"] .search-overlay-results .search_result_Text .title h6 { color: var(--body-color); }
[data-theme="dark"] .search-overlay-results .search_result_Text .subText { color: var(--GrayScale-400, #9ca3af); }
.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: 20px; font-weight: 400;}
.divineDocumentation .ck-content h3{ font-size: 18px; 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; }
/* CKEditor forces table-layout:fixed on resized tables, locking columns to saved pixel
   widths and squeezing the name column. Let columns size to their content instead. */
.divineDocumentation .ck-content .table .ck-table-resized { table-layout: unset !important; }
/* Keep the first column (parameter names) on one line so short names like api_key don't wrap. */
.divineDocumentation .ck-content .table table th:first-child,
.divineDocumentation .ck-content .table table td:first-child { white-space: nowrap; }
.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;}
    .serchSection{ max-width: fit-content;}
    .searchInput .search-trigger-label{ display: none;}
    .searchInput .text{ display: none;}
    .search-overlay-panel { margin-top: 40px; }
    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;
        padding: 20px 20px;
    }
}

@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;}
    .search-overlay-panel { width: calc(100% - 32px); }
    .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"] .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); }
/* ─────────────────────────────────────────────────
   API Code Examples — tab section
   ───────────────────────────────────────────────── */
/* ========== 3-COLUMN API DOC LAYOUT (prose + sticky code rail) ========== */
/* Default: single column (content-only pages, no curl_command).
   Scoped to the doc-page nesting (.docSection lives INSIDE .divineDocumentation there)
   so it never overrides the homepage, whose .docSection WRAPS .divineDocumentation and
   must stay flex to keep its right-nav (Quick Start …) as a sticky column. */
.divineDocumentation .docSection { display: block; }

/* When the page has a code rail, split into a responsive two-pane row. */
.docSection.has-code {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.docSection.has-code .docBody {
    flex: 1 1 0;
    min-width: 0;            /* let long code/tables shrink instead of overflowing */
    max-width: 100%;
}
.docSection.has-code .apiCodeColumn {
    flex: 0 1 clamp(340px, 41%, 460px);
    min-width: 0;           /* critical: allow the rail to shrink below its widest code line */
    position: sticky;
    top: 85px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    scrollbar-width: none;
}
.docSection.has-code .apiCodeColumn::-webkit-scrollbar { display: none; }
/* Keep the code panel inside the rail width; the <pre> scrolls internally. */
.docSection.has-code .apiCodeColumn .code-tabs-wrapper { max-width: 100%; }
/* No top margin needed inside the rail — it aligns to the top of the prose. */
.docSection.has-code .apiCodeColumn .api-code-examples { margin-top: 0; }
/* Let the code area breathe to the available rail height. */
.docSection.has-code .apiCodeColumn .code-tab-pane pre { max-height: calc(100vh - 210px); }
/* Breadcrumb now lives inside docBody — keep it flush to the top of the prose. */
.docSection.has-code .docBody .breadCurmbSection { margin-top: 0; }

/* Stack the rail under the prose once there isn't room for three columns. */
@media (max-width: 1100px) {
    .docSection.has-code { flex-direction: column; }
    .docSection.has-code .apiCodeColumn {
        flex-basis: auto;
        width: 100%;
        max-width: 100%;
        position: static;
        max-height: none;
        overflow: visible;
        margin-top: 24px;
    }
    .docSection.has-code .apiCodeColumn .code-tab-pane pre { max-height: 420px; }
}

.api-code-examples {
    margin-top: 40px;
    margin-bottom: 8px;
}
/* ── Light mode (default) ── */
.code-tabs-wrapper {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e3e8ee;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);
}
.code-tab-buttons {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
    border-bottom: 1px solid #ede9fe;
    padding: 0 6px;
}
.code-tab-buttons::-webkit-scrollbar { display: none; }
.code-tab-btn {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    outline: none;
}
.code-tab-btn:hover { color: #7c3aed; }
.code-tab-btn.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
    font-weight: 600;
}
.code-tab-pane {
    display: none;
    position: relative;
}
.code-tab-pane.active { display: block; }
.code-tab-pane pre {
    margin: 0;
    border-radius: 0;
    border: none;
    max-height: 420px;
    overflow: auto;
    background: #3e444f;
}
/* Slimmer scrollbars for these panels (~half the OS default). Dark box = light thumb. */
.code-tab-pane pre { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.code-tab-pane pre::-webkit-scrollbar { width: 8px; height: 8px; }
.code-tab-pane pre::-webkit-scrollbar-track { background: transparent; }
.code-tab-pane pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 8px; }
.code-tab-pane pre::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.38); }
/* Response box is light-gray in light mode → use a dark thumb so it stays visible. */
.api-example-response .code-tab-pane pre { scrollbar-color: rgba(0,0,0,.28) transparent; }
.api-example-response .code-tab-pane pre::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); }
.api-example-response .code-tab-pane pre::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.38); }
[data-theme="dark"] .api-example-response .code-tab-pane pre { scrollbar-color: rgba(255,255,255,.28) transparent; }
[data-theme="dark"] .api-example-response .code-tab-pane pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
[data-theme="dark"] .api-example-response .code-tab-pane pre::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.38); }
.code-tab-pane pre code {
    font-size: 13px;
    line-height: 1.65;
    display: block;
    padding: 18px 20px;
    background: #3e444f;
    color: #e6edf3;
}

/* ── Line numbers (custom, CSS counters) — Example Code only ── */
.api-code-examples .code-tab-pane pre code { counter-reset: ln; padding: 18px 20px 18px 0; }
.api-code-examples .cl { display: block; }
.api-code-examples .cl::before {
    counter-increment: ln;
    content: counter(ln, decimal-leading-zero);
    /* Fixed gutter that stays put while the code scrolls horizontally. */
    position: sticky;
    left: 0;
    display: inline-block;
    min-width: 22px;
    padding: 0 12px 0 16px;
    margin-right: 16px;
    text-align: right;
    color: rgba(255,255,255,.30);
    background: #3e444f;
    border-right: 1px solid rgba(255,255,255,.08);
    -webkit-user-select: none;
    user-select: none;
}

/* ── Syntax colors for Example Code (scoped; atom-one-dark-style on our slate) ── */
.api-code-examples .hljs-comment,
.api-code-examples .hljs-quote { color: #7d8590; font-style: italic; }
.api-code-examples .hljs-keyword,
.api-code-examples .hljs-doctag,
.api-code-examples .hljs-formula,
.api-code-examples .hljs-selector-tag { color: #c678dd; }
.api-code-examples .hljs-name,
.api-code-examples .hljs-section,
.api-code-examples .hljs-deletion,
.api-code-examples .hljs-subst,
.api-code-examples .hljs-variable,
.api-code-examples .hljs-template-variable { color: #e06c75; }
.api-code-examples .hljs-string,
.api-code-examples .hljs-regexp,
.api-code-examples .hljs-addition,
.api-code-examples .hljs-attribute,
.api-code-examples .hljs-meta .hljs-string { color: #98c379; }
.api-code-examples .hljs-attr,
.api-code-examples .hljs-number,
.api-code-examples .hljs-type,
.api-code-examples .hljs-selector-class,
.api-code-examples .hljs-selector-attr,
.api-code-examples .hljs-selector-pseudo { color: #d19a66; }
.api-code-examples .hljs-literal,
.api-code-examples .hljs-symbol,
.api-code-examples .hljs-bullet { color: #56b6c2; }
.api-code-examples .hljs-title,
.api-code-examples .hljs-title.function_,
.api-code-examples .hljs-meta,
.api-code-examples .hljs-selector-id,
.api-code-examples .hljs-link { color: #61afef; }
.api-code-examples .hljs-built_in,
.api-code-examples .hljs-title.class_,
.api-code-examples .hljs-class .hljs-title { color: #e5c07b; }
.api-code-examples .hljs-emphasis { font-style: italic; }
.api-code-examples .hljs-strong { font-weight: 700; }
.code-copy-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    padding: 4px 10px;
    font-size: 12px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1.5;
}
.code-copy-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.code-copy-btn:disabled { opacity: .6; cursor: default; }

/* ── Toolbar: language dropdown (left) + Copy (right). Slate chrome (Stripe-style). ── */
.code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #505865;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.code-lang-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.code-lang-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 6px 30px 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #e6edf3;
    background: #2b3039;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, background .15s;
}
.code-lang-select:hover { border-color: rgba(255,255,255,.28); }
.code-lang-select:focus { border-color: rgba(255,255,255,.4); }
.code-lang-select option { color: #e6edf3; background: #2b3039; }
.code-lang-caret {
    position: absolute;
    right: 10px;
    font-size: 12px;
    color: #9aa4b2;
    pointer-events: none;
}
/* Shared copy button sits inline in the toolbar (override the absolute default). */
.code-copy-btn-toolbar {
    position: static;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #2b3039;
    color: #c5ccd6;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    font-weight: 600;
}
.code-copy-btn-toolbar:hover { background: #363c47; color: #fff; }

/* Toolbar right-side actions (Copy + Try it in one row). */
.code-toolbar-actions { display: inline-flex; align-items: center; gap: 8px; }
.code-toolbar-actions .try-it-btn { margin: 0; }

/* ── Example Response panel — Stripe-style: light-gray in light mode ── */
.api-example-response { margin-top: 16px; }

/* Header bar: light gray in light mode (slate in dark, see dark block). */
.response-toolbar { background: #ecf1f6; border-bottom: 1px solid #e3e8ee; }
/* .code-block-title now belongs to the response header only → gray uppercase label. */
.code-block-title {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.response-title { display: inline-flex; align-items: center; gap: 8px; }
.response-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: #15803d;
    background: #dcfce7;
    border-radius: 20px;
    text-transform: none;
}
/* Response copy button — light chip in light mode. */
.response-toolbar .code-copy-btn-toolbar { background: #fff; color: #475569; border-color: #e3e8ee; }
.response-toolbar .code-copy-btn-toolbar:hover { background: #eef1f5; color: #1f2328; }

/* Response body — light-gray surface with dark JSON in light mode. */
.api-example-response .code-tab-pane pre,
.api-example-response .code-tab-pane pre code { background: #f4f7fa; color: #1f2328; }
/* Light syntax palette (highlight.js atom-one-dark is dark-only). */
.api-example-response .hljs-attr,
.api-example-response .hljs-attribute { color: #0550ae; }
.api-example-response .hljs-string { color: #0a7d22; }
.api-example-response .hljs-number,
.api-example-response .hljs-literal,
.api-example-response .hljs-keyword { color: #953800; }
.api-example-response .hljs-punctuation { color: #1f2328; }

/* Cap the response height so code + response both stay visible in the sticky rail. */
.docSection.has-code .apiCodeColumn .api-example-response .code-tab-pane pre { max-height: 340px; }

/* ── Dark page theme: code panel is already dark slate; adjust wrapper + response ── */
[data-theme="dark"] .code-tabs-wrapper { border-color: rgba(255,255,255,.10); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
[data-theme="dark"] .response-status-badge { color: #4ade80; background: rgba(34,197,94,.16); }

/* Response panel follows the page theme → slate in dark mode. */
[data-theme="dark"] .response-toolbar { background: #21252c; border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .response-toolbar .code-copy-btn-toolbar { background: rgba(255,255,255,.06); color: #c5ccd6; border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .response-toolbar .code-copy-btn-toolbar:hover { background: rgba(255,255,255,.12); color: #fff; }
[data-theme="dark"] .code-block-title { color: #9aa4b2; }
[data-theme="dark"] .api-example-response .code-tab-pane pre,
[data-theme="dark"] .api-example-response .code-tab-pane pre code { background: #1b1e25; color: #e6edf3; }
/* Restore atom-one-dark JSON colors in dark mode. */
[data-theme="dark"] .api-example-response .hljs-attr,
[data-theme="dark"] .api-example-response .hljs-attribute { color: #e06c75; }
[data-theme="dark"] .api-example-response .hljs-string { color: #98c379; }
[data-theme="dark"] .api-example-response .hljs-number,
[data-theme="dark"] .api-example-response .hljs-literal,
[data-theme="dark"] .api-example-response .hljs-keyword { color: #d19a66; }
[data-theme="dark"] .api-example-response .hljs-punctuation { color: #abb2bf; }

/* ============================================================
   API Playground Drawer
   ============================================================ */

/* "Try it" button — slate to match the code toolbar (always on a dark bar) */
.try-it-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.16);
    background: #2b3039;
    color: #e6edf3;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}
.try-it-btn:hover { background: #363c47; border-color: rgba(255,255,255,.30); transform: translateY(-1px); }

/* Backdrop */
.pg-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
    backdrop-filter: blur(2px);
}
.pg-backdrop.open { display: block; }
body.pg-open { overflow: hidden; }

/* Drawer panel */
.pg-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 48%;
    max-width: 640px;
    background: #fff;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
.pg-drawer.open { transform: translateX(0); }
@media (max-width: 768px) {
    .pg-drawer { width: 100%; max-width: 100%; }
}

/* Drawer header */
.pg-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
}
.pg-drawer-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pg-drawer-title .fa { color: #505865; }
[data-theme="dark"] .pg-drawer-title .fa { color: #9aa4b2; }
.pg-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}
.pg-close-btn:hover { background: #f3f4f6; color: #111; }

/* Sections */
.pg-section {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.pg-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    margin-bottom: 10px;
}
.pg-section-label small { text-transform: none; font-weight: 400; letter-spacing: 0; }

/* Input fields */
.pg-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.pg-field-row label {
    width: 90px;
    font-size: 13px;
    color: #374151;
    flex-shrink: 0;
}
.pg-input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-family: ui-monospace, monospace;
    background: #fafafa;
    color: #111;
    width: 100%;
    transition: border-color .15s;
}
.pg-input:focus { outline: none; border-color: #505865; background: #fff; }

/* Request info */
.pg-request-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px;
    overflow: hidden;
}
.pg-method-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.pg-method-get  { background: #d1fae5; color: #065f46; }
.pg-method-post { background: #dbeafe; color: #1e40af; }
.pg-method-put  { background: #fef3c7; color: #92400e; }
.pg-method-delete { background: #fee2e2; color: #991b1b; }
.pg-url-text {
    font-size: 12px;
    font-family: ui-monospace, monospace;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Params */
.pg-section-params { max-height: 280px; min-height: 200px; overflow-y: auto; }
.pg-param-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pg-param-key {
    width: 130px;
    font-size: 12px;
    font-family: ui-monospace, monospace;
    color: #6b7280;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-param-row .pg-input { font-size: 12px; }

/* Run button */
.pg-response-loading { opacity: 0.3; filter: blur(2px); pointer-events: none; transition: opacity 0.15s, filter 0.15s; }
.pg-translator-info { display: flex; align-items: flex-start; gap: 10px; margin: 0 20px 4px; padding: 12px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 13px; color: #1e40af; }
.pg-translator-info .fa { margin-top: 2px; flex-shrink: 0; color: #3b82f6; }
.pg-translator-info-text { display: flex; flex-direction: column; gap: 4px; }
.pg-translator-info-text a { color: #2563eb; font-weight: 500; text-decoration: underline; }
.pg-translator-info-text a:hover { color: #1d4ed8; }
[data-theme="dark"] .pg-translator-info { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }
[data-theme="dark"] .pg-translator-info-text a { color: #60a5fa; }
.pg-run-section { border-bottom: none; padding-top: 20px; padding-bottom: 20px; }
.pg-run-btn {
    width: 100%;
    padding: 10px;
    background: #3e444f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s;
}
.pg-run-btn:hover:not(:disabled) { background: #505865; }
.pg-run-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Response */
.pg-response-section { border-bottom: none; flex: 1; }
.pg-response-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pg-response-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}
[data-theme="dark"] .pg-response-label { color: #9aa4b2; }
.pg-status-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.pg-status-ok    { background: #d1fae5; color: #065f46; }
.pg-status-warn  { background: #fef3c7; color: #92400e; }
.pg-status-error { background: #fee2e2; color: #991b1b; }
.pg-time-badge {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 20px;
}
.pg-copy-response-btn {
    margin-left: auto;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
}
.pg-copy-response-btn:hover { background: #f3f4f6; }
.pg-response-pre {
    background: #3e444f;
    border-radius: 8px;
    padding: 14px;
    margin: 0;
    overflow-x: auto;
    max-height: 380px;
    overflow-y: auto;
}
.pg-response-pre code { font-size: 12px; white-space: pre-wrap; word-break: break-word; }

/* Dark mode */
[data-theme="dark"] .pg-drawer { background: #1b1e25; box-shadow: -4px 0 24px rgba(0,0,0,.4); }
[data-theme="dark"] .pg-drawer-header { border-bottom-color: rgba(255,255,255,.08); background: #21252c; }
[data-theme="dark"] .pg-drawer-title { color: #e6edf3; }
[data-theme="dark"] .pg-close-btn { color: #9ca3af; }
[data-theme="dark"] .pg-close-btn:hover { background: #2b3039; color: #e6edf3; }
[data-theme="dark"] .pg-section { border-bottom-color: #2b3039; }
[data-theme="dark"] .pg-section-label { color: #6b7280; }
[data-theme="dark"] .pg-field-row label { color: #d1d5db; }
[data-theme="dark"] .pg-input { background: #2b3039; border-color: #3e444f; color: #e6edf3; }
[data-theme="dark"] .pg-input:focus { border-color: rgba(255,255,255,.35); background: #2b3039; }
[data-theme="dark"] .pg-request-info { background: #2b3039; border-color: #3e444f; }
[data-theme="dark"] .pg-url-text { color: #d1d5db; }
[data-theme="dark"] .pg-param-key { color: #9ca3af; }
[data-theme="dark"] .pg-time-badge { background: #2b3039; color: #9ca3af; }
[data-theme="dark"] .pg-copy-response-btn { border-color: #3e444f; color: #9ca3af; }
[data-theme="dark"] .pg-copy-response-btn:hover { background: #2b3039; }
[data-theme="dark"] .try-it-btn { background: #2b3039; border-color: rgba(255,255,255,.16); color: #e6edf3; }
[data-theme="dark"] .try-it-btn:hover { background: #363c47; color: #fff; }

/* Playground response text always visible */
.pg-response-pre code { color: #e6edf3; }

/* Credential input wrapper + error */
.pg-input-wrap { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pg-field-err { font-size: 11px; color: #ef4444; font-weight: 500; }
.pg-input-error { border-color: #ef4444 !important; background: #fff5f5 !important; }
[data-theme="dark"] .pg-input-error { background: #2d1515 !important; }

/* Copy URL button in request row */
.pg-copy-url-btn {
    flex-shrink: 0;
    margin-left: auto;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    line-height: 1.4;
}
.pg-copy-url-btn:hover { background: #f3f4f6; color: #374151; }
[data-theme="dark"] .pg-copy-url-btn { border-color: #3e444f; color: #9ca3af; }
[data-theme="dark"] .pg-copy-url-btn:hover { background: #2b3039; color: #d1d5db; }