.live-page{
    --live-top:52px;
    --live-side-w:272px;
    --card:var(--bg3,#151d2e);
    --accent-bg:rgba(99,102,241,.14);
    background:var(--bg,#080c14);
    color:var(--text,#c8d0ef);
    min-height:100vh;
    scrollbar-width:thin;
    scrollbar-color:rgba(99,102,241,.45) transparent;
}
.live-page::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(ellipse 55% 35% at 8% 0%,rgba(99,102,241,.09),transparent),
        radial-gradient(ellipse 45% 30% at 92% 85%,rgba(129,140,248,.06),transparent);
}
.live-page::-webkit-scrollbar,
.live-side::-webkit-scrollbar,
.live-main::-webkit-scrollbar{width:var(--scroll-size,10px);height:var(--scroll-size,10px)}
.live-page::-webkit-scrollbar-thumb,
.live-side::-webkit-scrollbar-thumb,
.live-main::-webkit-scrollbar-thumb{
    background:var(--scroll-thumb,linear-gradient(180deg,rgba(99,102,241,.5),rgba(79,70,229,.62)));
    border-radius:100px;border:2px solid rgba(8,12,20,.85);background-clip:padding-box;
}
.live-page::-webkit-scrollbar-thumb:hover,
.live-side::-webkit-scrollbar-thumb:hover,
.live-main::-webkit-scrollbar-thumb:hover{
    background:var(--scroll-thumb-hover,linear-gradient(180deg,rgba(129,140,248,.65),rgba(99,102,241,.75)));
}
.live-page::-webkit-scrollbar-button:single-button:vertical:decrement,
.live-side::-webkit-scrollbar-button:single-button:vertical:decrement,
.live-main::-webkit-scrollbar-button:single-button:vertical:decrement{
    height:14px;
    background:linear-gradient(180deg,rgba(20,20,30,.98),rgba(12,12,18,.98));
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:10px;
}
.live-page::-webkit-scrollbar-button:single-button:vertical:increment,
.live-side::-webkit-scrollbar-button:single-button:vertical:increment,
.live-main::-webkit-scrollbar-button:single-button:vertical:increment{
    height:14px;
    background:linear-gradient(180deg,rgba(20,20,30,.98),rgba(12,12,18,.98));
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:10px;
}

.live-top{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:var(--live-top);
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:0 18px;
    background:rgba(8,12,20,.9);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(99,102,241,.12);
    box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.live-brand{
    display:flex;align-items:center;gap:9px;
    color:var(--title);text-decoration:none;font-weight:700;font-size:14px;flex-shrink:0;
    letter-spacing:-.01em;
}
.live-brand:hover{text-decoration:none;color:var(--title-hover)}
.live-brand-ico{
    width:28px;height:28px;border-radius:8px;
    background:linear-gradient(145deg,#6366f1,#4f46e5);
    display:grid;place-items:center;color:var(--on-primary,#e0e7ff);
    box-shadow:0 4px 14px rgba(99,102,241,.35);
}
.live-brand-ico svg{width:13px;height:13px}
.live-top-mid{display:flex;align-items:center;gap:8px;min-width:0;flex:1;justify-content:center}
.live-base{
    font-size:12px;color:#93c5fd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.15);
    padding:5px 10px;border-radius:8px;
}
.live-top-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.live-top-right a{
    color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;
    padding:6px 10px;border-radius:8px;transition:color .15s,background .15s;
}
.live-top-right a:hover{color:var(--title);background:rgba(99,102,241,.1);text-decoration:none}
.live-theme{
    border:1px solid rgba(99,102,241,.2);background:var(--card);
    color:var(--title);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:14px;
    transition:border-color .15s,background .15s;
}
.live-theme:hover{border-color:rgba(129,140,248,.4);background:rgba(99,102,241,.1)}

.live-shell{display:flex;padding-top:var(--live-top);min-height:100vh;position:relative;z-index:1}
.live-side{
    position:fixed;top:var(--live-top);left:0;bottom:0;width:var(--live-side-w);
    overflow:auto;border-right:1px solid var(--border);
    background:linear-gradient(180deg,rgba(15,22,35,.98),rgba(8,12,20,.99));
    padding:14px 10px 48px;scrollbar-width:thin;
}
.live-search-wrap{margin-bottom:12px}
.live-search-wrap input{
    width:100%;padding:10px 12px;border-radius:10px;
    border:1px solid var(--border);background:var(--card);color:var(--text);font-size:13px;
    transition:border-color .15s,box-shadow .15s;
}
.live-search-wrap input::placeholder{color:var(--muted2)}
.live-search-wrap input:focus{
    outline:none;border-color:rgba(99,102,241,.45);
    box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.live-group{margin-bottom:14px}
.live-group-title{
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    color:var(--muted2);padding:6px 10px 8px;
}
.live-link{
    display:flex;align-items:center;gap:8px;
    padding:9px 10px;border-radius:10px;text-decoration:none;
    color:var(--muted);font-size:13px;font-weight:500;margin-bottom:2px;
    border:1px solid transparent;transition:all .15s;
}
.live-link span:last-child{flex:1;min-width:0}
.live-link:hover{
    background:rgba(99,102,241,.08);color:var(--title);text-decoration:none;
    border-color:rgba(99,102,241,.12);
}
.live-link.active{
    background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(79,70,229,.1));
    color:var(--title-hover);font-weight:600;
    border-color:rgba(99,102,241,.28);
    box-shadow:0 4px 16px rgba(49,46,129,.15);
}
.live-link.hidden{display:none}
.live-link-badge{
    font-size:9px;font-weight:800;padding:3px 6px;border-radius:5px;
    background:var(--post-bg);color:var(--post);flex-shrink:0;
    border:1px solid rgba(167,139,250,.22);
}
.live-side-foot{
    position:sticky;bottom:0;padding:12px 8px 0;
    border-top:1px solid var(--border);margin-top:8px;
    background:linear-gradient(180deg,transparent,rgba(8,12,20,.98) 24%);
}
.live-side-foot a{
    font-size:12px;color:var(--muted);text-decoration:none;font-weight:600;
    display:inline-flex;padding:6px 8px;border-radius:8px;
}
.live-side-foot a:hover{color:var(--title);background:rgba(99,102,241,.08);text-decoration:none}

.live-main{
    margin-left:var(--live-side-w);flex:1;
    width:calc(100% - var(--live-side-w));max-width:none;
    padding:28px 40px 72px;
    box-sizing:border-box;
}
.live-page .apidog-body{grid-template-columns:minmax(0,1fr) minmax(380px,480px)}
.live-page .apidog-col-right{
    top:calc(var(--live-top) + 18px);
    max-height:calc(100vh - var(--live-top) - 36px);
}
.live-page .callout-row,
.live-main>.callout{margin-bottom:16px}
.live-page .site-foot{display:none}
.live-page .apidog-hero{margin-top:0}
.live-main .apidog-cat{color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:12px}
.live-main .ep-desc{font-size:16px;color:var(--muted);max-width:720px}
.live-main .apidog-meta{color:var(--muted2)}
.live-main .apidog-meta code{color:#a5b4fc}
.live-main .callout{border-radius:12px}
.live-main .ep-btn{color:var(--title)}
.live-main .ep-btn.primary{
    background:linear-gradient(135deg,#4f46e5,#6366f1);color:var(--on-primary,#e0e7ff);
    border-color:transparent;box-shadow:0 4px 14px rgba(99,102,241,.28);
}
.live-main .ep-copy-url{color:var(--muted)}
.live-main .ep-copy-url:hover{color:var(--title);background:rgba(99,102,241,.12)}

@media(max-width:900px){
    .live-side{transform:translateX(-100%);transition:transform .22s;box-shadow:none}
    .live-side.open{transform:translateX(0);z-index:90;box-shadow:8px 0 32px rgba(0,0,0,.45)}
    .live-main{margin-left:0;width:100%;padding:22px 16px 56px}
    .live-page .apidog-body{grid-template-columns:1fr}
    .live-top-mid{display:none}
}