body{
    position:relative;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
    linear-gradient(115deg,transparent 0%,rgba(255,255,255,0.035) 42%,transparent 64%);
    transform:translateX(-120%);
    animation:appPageSheen 9s ease-in-out infinite;
    z-index:0;
}

.sidebar,
.main-content{
    position:relative;
    z-index:1;
}

.sidebar{
    animation:sidebarEnter 0.58s ease both;
}

.topbar{
    animation:appSlideDown 0.62s ease both;
}

.stats-grid .stat-box,
.api-docs-toolbar,
.api-drawer,
.wallet-hero,
.wallet-stat-card,
.card,
.api-picker,
.page-form-card,
.result-panel,
.selected-api-panel{
    animation:appRise 0.64s ease both;
}

.api-list .api-drawer,
#apiList .api-drawer{
    position:relative;
    overflow:hidden;
    transform-origin:center top;
    animation:drawerLaunch 0.74s cubic-bezier(.2,.84,.2,1) both;
}

#apiList .api-drawer:nth-child(2){
    animation-delay:0.07s;
}

#apiList .api-drawer:nth-child(3){
    animation-delay:0.14s;
}

#apiList .api-drawer:nth-child(4){
    animation-delay:0.21s;
}

#apiList .api-drawer:nth-child(5){
    animation-delay:0.28s;
}

.api-drawer::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(59,130,246,0.2),transparent 34%),
    linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
    opacity:0;
    transition:opacity 0.26s ease;
}

.stat-box,
.wallet-hero,
.wallet-stat-card,
.card,
.api-picker,
.page-form-card,
.result-panel,
.selected-api-panel,
.api-page-option,
.result-card,
.result-section{
    position:relative;
    overflow:hidden;
}

.stat-box::before,
.wallet-hero::before,
.wallet-stat-card::before,
.card::before,
.api-picker::before,
.page-form-card::before,
.result-panel::before,
.selected-api-panel::before,
.api-page-option::before,
.result-card::before,
.result-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(59,130,246,0.18),transparent 34%),
    linear-gradient(90deg,transparent,rgba(255,255,255,0.045),transparent);
    opacity:0;
    transition:opacity 0.26s ease;
}

.stat-box::after,
.wallet-hero::after,
.wallet-stat-card::after,
.card::after,
.api-picker::after,
.page-form-card::after,
.result-panel::after,
.selected-api-panel::after,
.api-page-option::after,
.result-card::after,
.result-section::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    border:1px solid transparent;
    background:linear-gradient(135deg,rgba(59,130,246,0.34),rgba(34,197,94,0.16),transparent) border-box;
    mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
    mask-composite:exclude;
    opacity:0;
    transition:opacity 0.26s ease;
}

.stat-box:hover::before,
.stat-box:hover::after,
.wallet-hero:hover::before,
.wallet-hero:hover::after,
.wallet-stat-card:hover::before,
.wallet-stat-card:hover::after,
.card:hover::before,
.card:hover::after,
.api-picker:hover::before,
.api-picker:hover::after,
.page-form-card:hover::before,
.page-form-card:hover::after,
.result-panel:hover::before,
.result-panel:hover::after,
.selected-api-panel:hover::before,
.selected-api-panel:hover::after,
.api-page-option:hover::before,
.api-page-option:hover::after,
.api-page-option.active::before,
.api-page-option.active::after,
.result-card:hover::before,
.result-card:hover::after,
.result-section:hover::before,
.result-section:hover::after{
    opacity:1;
}

.stat-box > *,
.wallet-hero > *,
.wallet-stat-card > *,
.card > *,
.api-picker > *,
.page-form-card > *,
.result-panel > *,
.selected-api-panel > *,
.api-page-option > *,
.result-card > *,
.result-section > *{
    position:relative;
    z-index:1;
}

.api-drawer::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    border:1px solid transparent;
    background:linear-gradient(135deg,rgba(59,130,246,0.38),rgba(34,197,94,0.18),transparent) border-box;
    mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
    mask-composite:exclude;
    opacity:0;
    transition:opacity 0.26s ease;
}

.api-drawer:hover::before,
.api-drawer:hover::after,
.api-drawer.drawer-open::before,
.api-drawer.drawer-open::after{
    opacity:1;
}

.api-drawer:hover{
    transform:translateY(-7px) scale(1.01);
    box-shadow:
    0 24px 70px rgba(0,0,0,0.28),
    0 0 0 1px rgba(59,130,246,0.12);
}

.api-drawer.drawer-open{
    box-shadow:
    0 26px 80px rgba(0,0,0,0.34),
    0 0 34px rgba(37,99,235,0.12);
}

.api-drawer-header{
    position:relative;
    z-index:1;
}

.api-drawer-header h2{
    transition:transform 0.22s ease,color 0.22s ease;
}

.api-drawer:hover .api-drawer-header h2,
.api-drawer.drawer-open .api-drawer-header h2{
    transform:translateX(4px);
    color:#eff6ff;
}

.api-drawer-header p{
    transition:transform 0.22s ease,background 0.22s ease,color 0.22s ease;
}

.api-drawer:hover .api-drawer-header p,
.api-drawer.drawer-open .api-drawer-header p{
    transform:translateX(4px);
    background:rgba(59,130,246,0.22);
    color:#bfdbfe;
}

.drawer-arrow{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,0.05);
    transition:
    transform 0.28s cubic-bezier(.2,.84,.2,1),
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.api-drawer:hover .drawer-arrow{
    background:rgba(59,130,246,0.16);
    box-shadow:0 10px 28px rgba(37,99,235,0.18);
}

.api-drawer.drawer-open .drawer-arrow{
    transform:rotate(180deg) scale(1.08);
    background:rgba(34,197,94,0.14);
}

.api-drawer-body{
    position:relative;
    z-index:1;
    max-height:0;
    opacity:0;
    display:block !important;
    overflow:hidden;
    padding-top:0 !important;
    padding-bottom:0 !important;
    transform:translateY(-8px);
    transition:
    max-height 0.42s cubic-bezier(.2,.84,.2,1),
    opacity 0.26s ease,
    padding 0.32s ease,
    transform 0.32s ease;
}

.api-drawer.drawer-open .api-drawer-body{
    max-height:1400px;
    opacity:1;
    padding-top:24px !important;
    padding-bottom:24px !important;
    transform:translateY(0);
}

.api-drawer-body .doc-block{
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.28s ease,transform 0.28s ease;
}

.api-drawer.drawer-open .doc-block{
    opacity:1;
    transform:translateY(0);
}

.api-drawer.drawer-open .doc-block:nth-child(2){
    transition-delay:0.05s;
}

.api-drawer.drawer-open .doc-block:nth-child(3){
    transition-delay:0.1s;
}

.api-drawer.drawer-open .try-btn{
    animation:buttonPop 0.34s ease both;
    animation-delay:0.12s;
}

.doc-block pre{
    transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.doc-block pre:hover{
    transform:translateY(-2px);
    border-color:rgba(59,130,246,0.25);
    box-shadow:0 12px 30px rgba(0,0,0,0.18);
}

.stats-grid .stat-box:nth-child(2),
.wallet-stat-card:nth-child(2),
.api-drawer:nth-child(2){
    animation-delay:0.08s;
}

.stats-grid .stat-box:nth-child(3),
.wallet-stat-card:nth-child(3),
.api-drawer:nth-child(3){
    animation-delay:0.16s;
}

.menu button,
.logout-btn,
.theme-toggle,
.add-btn,
.try-btn,
.save-btn,
.recharge-btn,
.check-btn,
.secondary-action{
    transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.menu button:hover,
.logout-btn:hover,
.theme-toggle:hover{
    transform:translateY(-2px) scale(1.03);
}

.menu button.active{
    animation:activeGlow 2.8s ease-in-out infinite;
}

.stat-box,
.wallet-stat-card,
.api-drawer,
.card,
.api-page-option,
.result-card,
.result-section{
    transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.stat-box:hover,
.wallet-stat-card:hover,
.api-drawer:hover,
.api-page-option:hover,
.result-card:hover,
.result-section:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 44px rgba(0,0,0,0.22);
}

.wallet-hero:hover,
.card:hover,
.api-picker:hover,
.page-form-card:hover,
.result-panel:hover,
.selected-api-panel:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 44px rgba(0,0,0,0.22);
}

.api-page-option.active{
    animation:selectedGlow 2.7s ease-in-out infinite;
}

.table-action,
.edit-action,
.delete-action,
.close-btn{
    transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.table-action:hover,
.edit-action:hover,
.delete-action:hover,
.close-btn:hover{
    transform:translateY(-2px) scale(1.06);
    box-shadow:0 12px 28px rgba(0,0,0,0.18);
}

.api-table tbody tr{
    transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.api-table tbody tr:hover{
    transform:translateX(5px);
    box-shadow:inset 3px 0 0 rgba(59,130,246,0.72);
}

.wallet-table-header,
.modal-header,
.page-form-header,
.result-header{
    animation:appSlideDown 0.55s ease both;
}

body.light-mode::before{
    background:
    linear-gradient(115deg,transparent 0%,rgba(37,99,235,0.08) 42%,transparent 64%);
}

body.light-mode .api-drawer::before,
body.light-mode .stat-box::before,
body.light-mode .wallet-hero::before,
body.light-mode .wallet-stat-card::before,
body.light-mode .card::before,
body.light-mode .api-picker::before,
body.light-mode .page-form-card::before,
body.light-mode .result-panel::before,
body.light-mode .selected-api-panel::before,
body.light-mode .api-page-option::before,
body.light-mode .result-card::before,
body.light-mode .result-section::before{
    background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,0.18),transparent 38%),
    linear-gradient(90deg,transparent,rgba(37,99,235,0.08),transparent);
}

body.light-mode .api-drawer::after,
body.light-mode .stat-box::after,
body.light-mode .wallet-hero::after,
body.light-mode .wallet-stat-card::after,
body.light-mode .card::after,
body.light-mode .api-picker::after,
body.light-mode .page-form-card::after,
body.light-mode .result-panel::after,
body.light-mode .selected-api-panel::after,
body.light-mode .api-page-option::after,
body.light-mode .result-card::after,
body.light-mode .result-section::after{
    background:linear-gradient(135deg,rgba(37,99,235,0.42),rgba(22,163,74,0.24),rgba(148,163,184,0.16)) border-box;
}

body.light-mode .api-drawer:hover,
body.light-mode .api-drawer.drawer-open,
body.light-mode .stat-box:hover,
body.light-mode .wallet-hero:hover,
body.light-mode .wallet-stat-card:hover,
body.light-mode .card:hover,
body.light-mode .api-picker:hover,
body.light-mode .page-form-card:hover,
body.light-mode .result-panel:hover,
body.light-mode .selected-api-panel:hover,
body.light-mode .api-page-option:hover,
body.light-mode .result-card:hover,
body.light-mode .result-section:hover{
    box-shadow:
    0 18px 44px rgba(15,23,42,0.12),
    0 0 0 1px rgba(37,99,235,0.08);
}

body.light-mode .api-drawer:hover .api-drawer-header h2,
body.light-mode .api-drawer.drawer-open .api-drawer-header h2{
    color:#0f172a;
}

body.light-mode .api-drawer:hover .api-drawer-header p,
body.light-mode .api-drawer.drawer-open .api-drawer-header p{
    background:#dbeafe;
    color:#1d4ed8;
}

body.light-mode .drawer-arrow{
    background:#f1f5f9;
    color:#2563eb;
}

body.light-mode .api-drawer:hover .drawer-arrow{
    background:#dbeafe;
    box-shadow:0 10px 24px rgba(37,99,235,0.16);
}

body.light-mode .api-drawer.drawer-open .drawer-arrow{
    background:#dcfce7;
    color:#15803d;
}

body.light-mode .doc-block pre:hover{
    border-color:rgba(37,99,235,0.32);
    box-shadow:0 12px 30px rgba(15,23,42,0.1);
}

body.light-mode .api-page-option.active{
    background:#dbeafe;
    border-color:#93c5fd;
    color:#0f172a;
}

body.light-mode .api-table tbody tr:hover{
    background:#eff6ff;
    box-shadow:inset 3px 0 0 rgba(37,99,235,0.76);
}

body.light-mode .table-action:hover,
body.light-mode .edit-action:hover,
body.light-mode .delete-action:hover,
body.light-mode .close-btn:hover{
    box-shadow:0 12px 28px rgba(15,23,42,0.12);
}

body.light-mode .api-search:focus-within,
body.light-mode .field-row input:focus,
body.light-mode .flexible-field-row input:focus,
body.light-mode .modal-body input:focus,
body.light-mode .modal-body textarea:focus{
    box-shadow:0 0 0 4px rgba(37,99,235,0.14);
}

.stat-value,
.wallet-balance,
.wallet-stat-value{
    animation:numberPop 0.68s ease both;
}

.api-table tbody tr{
    animation:rowIn 0.48s ease both;
}

.api-table tbody tr:nth-child(2n){
    animation-delay:0.04s;
}

.api-table tbody tr:nth-child(3n){
    animation-delay:0.08s;
}

.api-search,
.field-row input,
.flexible-field-row input,
.modal-body input,
.modal-body textarea{
    transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.api-search:focus-within,
.field-row input:focus,
.flexible-field-row input:focus,
.modal-body input:focus,
.modal-body textarea:focus{
    transform:translateY(-1px);
    box-shadow:0 0 0 4px rgba(59,130,246,0.13);
}

.modal{
    animation:modalPop 0.28s ease both;
}

@keyframes appPageSheen{
    0%,44%{
        transform:translateX(-120%);
    }
    62%,100%{
        transform:translateX(120%);
    }
}

@keyframes sidebarEnter{
    from{
        opacity:0;
        transform:translateX(-18px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes drawerLaunch{
    from{
        opacity:0;
        transform:translateY(28px) scale(0.975);
        filter:blur(6px);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

@keyframes buttonPop{
    from{
        opacity:0;
        transform:translateY(8px) scale(0.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes appSlideDown{
    from{
        opacity:0;
        transform:translateY(-16px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes appRise{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes activeGlow{
    0%,100%{
        box-shadow:0 6px 20px rgba(37,99,235,0.22);
    }
    50%{
        box-shadow:0 10px 30px rgba(59,130,246,0.36);
    }
}

@keyframes selectedGlow{
    0%,100%{
        box-shadow:0 0 0 rgba(37,99,235,0);
    }
    50%{
        box-shadow:
        0 16px 38px rgba(37,99,235,0.2),
        0 0 0 1px rgba(59,130,246,0.2);
    }
}

@keyframes numberPop{
    from{
        opacity:0;
        transform:translateY(10px) scale(0.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes rowIn{
    from{
        opacity:0;
        transform:translateX(12px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes modalPop{
    from{
        opacity:0;
        transform:translateY(14px) scale(0.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@media (max-width:900px){
    .sidebar{
        animation:appSlideDown 0.58s ease both;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}