*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,sans-serif;
}

*{
    scrollbar-width:thin;
    scrollbar-color:rgba(148,163,184,0.42) rgba(15,23,42,0.28);
}

*::-webkit-scrollbar{
    width:10px;
    height:10px;
}

*::-webkit-scrollbar-track{
    background:rgba(15,23,42,0.28);
    border-radius:999px;
}

*::-webkit-scrollbar-thumb{
    background:
    linear-gradient(
        180deg,
        rgba(148,163,184,0.68),
        rgba(59,130,246,0.55)
    );
    border:2px solid rgba(15,23,42,0.72);
    border-radius:999px;
}

*::-webkit-scrollbar-thumb:hover{
    background:
    linear-gradient(
        180deg,
        rgba(226,232,240,0.82),
        rgba(96,165,250,0.78)
    );
}

*::-webkit-scrollbar-corner{
    background:transparent;
}

body{

    min-height:100vh;

    height:100vh;

    display:flex;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#1d4ed8,#020617 35%),
    #020617;

    color:white;
}

/* SIDEBAR */

.sidebar{

    width:78px;

    height:100vh;

    position:sticky;

    top:0;

    flex:0 0 auto;

    overflow-y:auto;

    background:rgba(15,23,42,0.82);

    backdrop-filter:blur(20px);

    border-right:1px solid rgba(255,255,255,0.06);

    padding:16px 12px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:0.28s ease;
}

.sidebar.expanded{

    width:240px;
}

.top-sidebar{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;
}

.logo{

    display:none;

    font-size:24px;

    font-weight:800;

    letter-spacing:0;

    white-space:nowrap;
}

.brand-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    object-fit:contain;
    filter:drop-shadow(0 10px 22px rgba(37,99,235,0.34));
}

.brand-wordmark{
    width:126px;
    height:auto;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 8px 18px rgba(37,99,235,0.2));
}

.logo span{

    color:#3b82f6;
}

.sidebar.expanded .logo{

    display:block;
}

.toggle-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:16px;

    background:rgba(255,255,255,0.05);

    color:#cbd5e1;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:0.22s;

    font-size:26px;

    line-height:1;

    flex-shrink:0;
}

.toggle-btn:hover{

    background:rgba(255,255,255,0.09);
}

.menu{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    margin-top:20px;
}

.menu button{

    width:48px;

    height:48px;

    border:none;

    border-radius:16px;

    background:rgba(255,255,255,0.05);

    color:#cbd5e1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:0.22s;

    position:relative;

    overflow:hidden;
}

.menu button:hover{

    background:rgba(255,255,255,0.1);
}

.menu button.active{

    background:
    linear-gradient(
        135deg,
        rgba(37,99,235,0.45),
        rgba(59,130,246,0.25)
    );

    color:white;

    box-shadow:
    0 6px 20px rgba(37,99,235,0.22);
}

.icon{

    font-size:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:18px;
}

.text{

    display:none;

    margin-left:14px;

    font-size:14px;

    white-space:nowrap;
}

.sidebar.expanded .menu button{

    width:100%;

    justify-content:flex-start;

    padding:0 16px;
}

.sidebar.expanded .text{

    display:block;
}

.bottom-sidebar{

    display:flex;

    justify-content:center;
}

.logout-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:16px;

    background:rgba(220,38,38,0.12);

    color:#fca5a5;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:0.22s;

    overflow:hidden;
}

.logout-btn:hover{

    background:rgba(220,38,38,0.18);
}

.sidebar.expanded .logout-btn{

    width:100%;

    justify-content:flex-start;

    padding:0 16px;
}

/* MAIN CONTENT */

.main-content{

    flex:1;

    min-width:0;
    width:100%;
    max-width:100%;

    height:100vh;

    overflow:auto;

    padding:45px;
}

.topbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:35px;
}

.topbar h1{

    font-size:42px;

    font-weight:700;

    letter-spacing:-1px;

    line-height:1.1;
}

.topbar p{

    color:#94a3b8;

    margin-top:8px;
}

.theme-toggle{

    width:48px;

    height:48px;

    border-radius:16px;

    background:rgba(255,255,255,0.06);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:20px;

    transition:0.22s;
}

.theme-toggle:hover{

    background:rgba(255,255,255,0.12);

    transform:translateY(-2px);
}

/* CARDS */

.glass-card{

    background:rgba(15,23,42,0.58);

    border:1px solid rgba(255,255,255,0.06);

    backdrop-filter:blur(20px);

    border-radius:28px;

    padding:30px;

    margin-bottom:30px;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.32);
}

.glass-card h2{

    font-size:24px;

    margin-bottom:10px;
}

.glass-card p{

    color:#94a3b8;

    line-height:1.6;
}

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(3,minmax(0,1fr));

    gap:22px;
    width:100%;
    min-width:0;
}

.stat-box{
    min-width:0;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.05);

    border-radius:24px;

    padding:25px;

    transition:0.22s;
}

.stat-box:hover{

    transform:translateY(-4px);

    background:rgba(255,255,255,0.06);
}

.stat-title{

    color:#94a3b8;

    margin-bottom:14px;
}

.stat-value{

    font-size:34px;

    font-weight:700;
}

/* LIGHT MODE */

body.light-mode{

    background:#f6f8fb;

    color:#0f172a;
}

body.light-mode .sidebar{

    background:rgba(255,255,255,0.9);

    border-right:1px solid #e2e8f0;
}

body.light-mode .logo{

    color:#0f172a;
}

body.light-mode .brand-icon,
body.light-mode .brand-wordmark{
    filter:drop-shadow(0 8px 18px rgba(37,99,235,0.14));
}

body.light-mode .toggle-btn{

    background:white;

    border:1px solid #eef2f7;

    color:#334155;

    box-shadow:none;
}

body.light-mode .toggle-btn:hover{

    background:#e2e8f0;
}

body.light-mode .menu button{

    background:white;

    border:1px solid #eef2f7;

    color:#334155;

    box-shadow:none;
}

body.light-mode .menu button.active{

    background:#dbeafe;

    color:#2563eb;

    box-shadow:none;
}

body.light-mode .logout-btn{

    background:white;

    border:1px solid #fee2e2;

    color:#dc2626;
}

body.light-mode .glass-card{

    background:white;

    border:1px solid #edf2f7;

    color:#0f172a;

    box-shadow:none;
}

body.light-mode .glass-card p{

    color:#64748b;
}

body.light-mode .stat-box{

    background:white;

    border:1px solid #edf2f7;

    color:#0f172a;

    box-shadow:none;
}

body.light-mode .stat-title{

    color:#64748b;
}

body.light-mode .topbar p{

    color:#64748b;
}

body.light-mode .theme-toggle{

    background:white;

    border:1px solid #e2e8f0;

    color:#0f172a;
}

body.light-mode .api-docs-toolbar,
body.light-mode .api-drawer,
body.light-mode .api-empty-state{
    background:white;
    border-color:#edf2f7;
    color:#0f172a;
    box-shadow:none;
}

body.light-mode .api-docs-toolbar p{
    color:#64748b;
}

body.light-mode .api-search{
    background:#f8fafc;
    border-color:#e2e8f0;
    color:#64748b;
}

body.light-mode .api-search input{
    color:#0f172a;
}

body.light-mode .api-search input::placeholder{
    color:#64748b;
}

body.light-mode .api-drawer:hover{
    background:#f8fafc;
    border-color:#bfdbfe;
}

body.light-mode .api-drawer-body{
    background:#f8fafc;
    border-top-color:#e2e8f0;
}

body.light-mode .doc-block label{
    color:#334155;
}

body.light-mode .doc-block pre{
    background:white;
    border-color:#e2e8f0;
    color:#334155;
}

body.light-mode *{
    scrollbar-color:rgba(37,99,235,0.48) rgba(226,232,240,0.8);
}

body.light-mode *::-webkit-scrollbar-track{
    background:rgba(226,232,240,0.8);
}

body.light-mode *::-webkit-scrollbar-thumb{
    background:
    linear-gradient(
        180deg,
        rgba(100,116,139,0.5),
        rgba(37,99,235,0.58)
    );
    border-color:rgba(248,250,252,0.92);
}

body.light-mode *::-webkit-scrollbar-thumb:hover{
    background:
    linear-gradient(
        180deg,
        rgba(71,85,105,0.62),
        rgba(37,99,235,0.72)
    );
}

.dashboard-layout{

    display:flex;

    width:100%;

    height:100vh;
}

.api-table tr:hover{

    background:
    rgba(255,255,255,0.03);
}

body.light-mode .table-wrapper{

    background:white;

    border:1px solid #e2e8f0;
}

body.light-mode .api-table th{

    background:#f8fafc;
}

body.light-mode .api-table td{

    border-top:1px solid #eef2f7;
}

/* PLAYGROUND */

.playground-container{

    margin-top:40px;
}

.playground-header{

    margin-bottom:24px;
}

.playground-header h2{

    font-size:32px;

    margin-bottom:8px;
}

.playground-header p{

    color:#94a3b8;
}

/* API LIST */

.api-list{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.api-docs-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-width:0;
    margin:28px 0 18px;
    padding:22px 24px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:24px;
    background:rgba(15,23,42,0.58);
    box-shadow:0 14px 42px rgba(0,0,0,0.22);
    backdrop-filter:blur(18px);
}

.api-docs-toolbar h2{
    font-size:22px;
    line-height:1.2;
}

.api-docs-toolbar p{
    margin-top:6px;
    color:#94a3b8;
    font-size:14px;
}

.api-search{
    width:min(360px,100%);
    flex:0 1 360px;
    min-width:240px;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    background:rgba(255,255,255,0.055);
    color:#94a3b8;
}

.api-search input{
    width:100%;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    color:white;
    font-size:14px;
}

.api-search input::placeholder{
    color:#94a3b8;
}

/* CARD */

.api-card{

    background:
    rgba(15,23,42,0.92);

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(14px);
}

/* HEADER */

.api-header{

    padding:26px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    transition:0.2s;
}

.api-header:hover{

    background:
    rgba(255,255,255,0.02);
}

.api-left{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.api-name{

    font-size:22px;

    font-weight:700;
}

.api-url{

    color:#94a3b8;

    font-size:14px;

    word-break:break-all;
}



/* METHOD BADGE */

.method{

    width:max-content;

    padding:6px 14px;

    border-radius:999px;

    background:
    rgba(34,197,94,0.14);

    color:#22c55e;

    font-size:13px;

    font-weight:700;
}

/* BODY */

.api-body{

    display:none;

    padding:26px;

    border-top:
    1px solid rgba(255,255,255,0.06);
}

/* TEXTAREA */

.api-body textarea{

    width:100%;

    min-height:220px;

    background:
    rgba(255,255,255,0.04);

    border:none;

    outline:none;

    border-radius:20px;

    padding:18px;

    color:white;

    resize:vertical;

    margin-bottom:20px;

    font-size:14px;

    line-height:1.5;
}

/* EXECUTE BUTTON */

.execute-btn{

    height:54px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:white;

    font-size:15px;

    font-weight:700;

    padding:0 24px;

    cursor:pointer;

    transition:0.2s;

    margin-bottom:22px;
}

.execute-btn:hover{

    transform:translateY(-1px);

    opacity:0.95;
}

/* RESPONSE */

.response-box{

    background:black;

    border-radius:20px;

    padding:20px;

    white-space:pre-wrap;

    overflow:auto;

    color:#22c55e;

    font-size:14px;

    line-height:1.5;

    max-height:400px;
}

.api-drawer{
    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.78),
        rgba(15,23,42,0.58)
    );
    border-radius:24px;
    margin-top:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:0 14px 38px rgba(0,0,0,0.24);
    backdrop-filter:blur(18px);
    transition:0.22s;
}

.api-drawer:hover{
    border-color:rgba(59,130,246,0.22);
    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,0.9),
        rgba(15,23,42,0.66)
    );
}

.api-drawer-header{
    padding:24px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
}

.api-drawer-header h2{
    font-size:20px;
    line-height:1.25;
}

.api-drawer-header p{
    margin-top:6px;
    width:max-content;
    padding:5px 11px;
    border-radius:999px;
    background:rgba(59,130,246,0.13);
    color:#93c5fd;
    font-size:12px;
    font-weight:700;
}

.drawer-arrow{
    font-size:18px;
    transition:0.3s;
}

.api-drawer-body{
    display:none;
    padding:24px;
    border-top:1px solid rgba(255,255,255,0.07);
    background:rgba(2,6,23,0.18);
}

.doc-block{
    margin-bottom:22px;
}

.doc-block label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:#e2e8f0;
}

.doc-block pre{
    background:rgba(2,6,23,0.72);
    padding:18px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.06);
    overflow:auto;
    color:#cbd5e1;
    font-size:13px;
    line-height:1.55;
}

.try-btn{
    background:
    linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );
    border:none;
    color:white;
    padding:14px 22px;
    border-radius:14px;
    cursor:pointer;
    font-weight:600;
    transition:0.2s;
}

.api-group{
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.api-group-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px;
    color: #dbeafe;
    font-weight: 900;
}

.api-group-header span{
    overflow-wrap: anywhere;
}

.api-group-header small{
    flex: 0 0 auto;
    color: #94a3b8;
    font-weight: 800;
}

.try-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(37,99,235,0.3);
}

.chatgpt-btn{
    margin-left:12px;
    background:rgba(34,197,94,0.14);
    border:1px solid rgba(34,197,94,0.28);
    color:#bbf7d0;
    padding:14px 22px;
    border-radius:14px;
    cursor:pointer;
    font-weight:700;
    transition:0.2s;
}

.chatgpt-btn:hover{
    transform:translateY(-1px);
    background:rgba(34,197,94,0.22);
    box-shadow:0 12px 28px rgba(34,197,94,0.18);
}

body.light-mode .chatgpt-btn{
    background:#dcfce7;
    border-color:#86efac;
    color:#15803d;
}

body.light-mode .chatgpt-btn:hover{
    background:#bbf7d0;
    box-shadow:0 12px 28px rgba(22,163,74,0.14);
}

.api-empty-state{
    padding:34px 24px;
    text-align:center;
    border:1px dashed rgba(148,163,184,0.24);
    border-radius:22px;
    color:#94a3b8;
    background:rgba(15,23,42,0.42);
}

.postman-toast{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:2000;
    max-width:min(360px,calc(100vw - 32px));
    padding:14px 18px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    background:rgba(15,23,42,0.92);
    color:#e2e8f0;
    box-shadow:0 18px 60px rgba(0,0,0,0.36);
    backdrop-filter:blur(18px);
    font-size:14px;
    line-height:1.45;
}

body.light-mode .postman-toast{
    background:rgba(255,255,255,0.94);
    border-color:rgba(37,99,235,0.12);
    color:#0f172a;
    box-shadow:0 18px 50px rgba(15,23,42,0.14);
}

.bonus-popup-overlay{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,6,23,0.72);
    backdrop-filter:blur(10px);
}

.bonus-popup{
    width:min(420px,100%);
    padding:34px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:24px;
    background:rgba(15,23,42,0.96);
    color:white;
    text-align:center;
    box-shadow:0 24px 80px rgba(0,0,0,0.46);
}

.bonus-popup-badge{
    width:92px;
    height:92px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:white;
    font-size:30px;
    font-weight:800;
}

.bonus-popup h2{
    font-size:28px;
    margin-bottom:12px;
}

.bonus-popup p{
    color:#cbd5e1;
    line-height:1.55;
    margin-bottom:24px;
}

.bonus-popup button{
    width:100%;
    min-height:50px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

body.light-mode .bonus-popup{
    background:white;
    color:#0f172a;
    border-color:#e2e8f0;
}

body.light-mode .bonus-popup p{
    color:#64748b;
}

@media (max-width:900px){

    body{
        min-height:100vh;
        height:auto;
        display:block;
        overflow:auto;
    }

    .sidebar{
        width:100%;
        height:auto;
        min-height:72px;
        position:sticky;
        top:0;
        z-index:50;
        flex-direction:row;
        align-items:center;
        padding:12px;
        overflow-x:auto;
        overflow-y:hidden;
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,0.06);
    }

    .sidebar.expanded{
        width:100%;
    }

    .sidebar > div{
        min-width:0;
    }


    .top-sidebar{
        display:none;
    }

    .menu{
        flex-direction:row;
        align-items:center;
        gap:10px;
        margin-top:0;
    }

    .menu button,
    .sidebar.expanded .menu button,
    .logout-btn,
    .sidebar.expanded .logout-btn{
        width:48px;
        height:48px;
        flex:0 0 48px;
        justify-content:center;
        padding:0;
    }

    .text,
    .sidebar.expanded .text{
        display:none;
    }

    .main-content{
        width:100%;
        max-width:100%;
        height:auto;
        min-height:calc(100vh - 72px);
        overflow:visible;
        padding:28px 18px;
    }

    .topbar{
        align-items:flex-start;
        gap:16px;
        margin-bottom:26px;
    }

    .topbar h1{
        font-size:clamp(30px,8vw,42px);
    }

    .api-docs-toolbar{
        align-items:flex-start;
        flex-direction:column;
        padding:20px;
    }

    .api-search{
        width:100%;
        min-width:0;
    }

    .stats-grid{
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
        gap:16px;
    }

    .glass-card,
    .stat-box,
    .api-card{
        border-radius:20px;
    }

    .glass-card,
    .stat-box,
    .api-header,
    .api-body{
        padding:22px;
    }
}

@media (max-width:560px){

    .sidebar{
        gap:10px;
    }

    .menu{
        flex:1;
    }

    .topbar{
        flex-wrap:wrap;
    }

    .theme-toggle{
        width:44px;
        height:44px;
        border-radius:14px;
    }

    .glass-card,
    .stat-box,
    .api-header,
    .api-body{
        padding:18px;
    }

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

    .api-header{
        align-items:flex-start;
        gap:14px;
        flex-direction:column;
    }

    .api-drawer-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .api-name{
        font-size:20px;
    }

    .execute-btn{
        width:100%;
    }

    .response-box{
        max-height:300px;
    }
}


.plan-status-panel{
    margin:22px 0;
    padding:22px;
    border:1px solid rgba(148,163,184,0.22);
    border-radius:24px;
    background:rgba(15,23,42,0.78);
    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;
    align-items:start;
}

.plan-status-panel span{
    color:#60a5fa;
    font-size:12px;
    text-transform:uppercase;
    font-weight:900;
}

.plan-status-panel h2{
    margin:6px 0;
}

.plan-status-panel p{
    color:#94a3b8;
}

.plan-status-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.plan-status-actions a,
.plan-status-actions button{
    border:0;
    border-radius:14px;
    padding:12px 14px;
    background:linear-gradient(135deg,#2563eb,#16a34a);
    color:white;
    font-weight:900;
    cursor:pointer;
    text-decoration:none;
}

.plan-rate-list{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:10px;
}

.plan-rate-list article{
    border:1px solid rgba(148,163,184,0.16);
    border-radius:16px;
    padding:13px;
    background:rgba(2,6,23,0.42);
}

.plan-rate-list strong{
    display:block;
    margin-bottom:5px;
}

.plan-rate-list small{
    color:#93c5fd;
}

@media (max-width:760px){
    .plan-status-panel{
        grid-template-columns:1fr;
    }
    .plan-status-actions{
        justify-content:flex-start;
    }
}