:root{--primary:#635bff;--ink:#101828;--muted:#667085;--bg:#f5f7fb;--card:#fff;--line:#eaecf0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:#101828;color:#fff;padding:22px 14px;z-index:1030;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:0 10px 24px}.brand>span,.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#7c73ff,#4f46e5);font-weight:800;font-size:20px}.brand b{display:block}.brand small{display:block;color:#98a2b3;font-size:11px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar nav{display:grid;gap:5px}.nav-link{color:#b9c0cc;text-decoration:none;border-radius:10px;padding:11px 12px;display:flex;align-items:center;gap:12px;font-size:14px}.nav-link:hover,.nav-link.active{background:#1d2939;color:#fff}.nav-link i{width:18px;text-align:center}.logout{margin-top:auto}.main{margin-left:260px;min-height:100vh}.topbar{height:88px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:10}.eyebrow{font-size:12px;color:var(--muted);margin-bottom:3px}.topbar h2{font-size:22px;margin:0}.top-actions{display:flex;align-items:center;gap:12px}.lang{border:1px solid var(--line);padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:13px}.avatar{width:38px;height:38px;border-radius:50%;background:#ede9fe;color:#5b21b6;display:grid;place-items:center;font-weight:700}.top-actions small{display:block;color:var(--muted);font-size:11px}.content{padding:28px}.stat-card,.panel-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 2px 5px rgba(16,24,40,.03)}.stat-card{height:100%;display:flex;align-items:center;gap:15px}.stat-icon{width:46px;height:46px;border-radius:12px;background:#eef2ff;color:var(--primary);display:grid;place-items:center}.stat-value{font-size:25px;font-weight:800}.stat-label{font-size:13px;color:var(--muted)}.page-tools{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px}.table-card{overflow:hidden}.table{margin:0}.table th{font-size:12px;color:var(--muted);font-weight:600;background:#f9fafb;border-bottom:1px solid var(--line)}.table td{vertical-align:middle;font-size:13px}.badge-soft{padding:6px 9px;border-radius:99px;background:#ecfdf3;color:#027a48;font-size:11px}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#eef2ff,transparent 35%),#f8fafc}.login-shell{width:min(410px,92vw);text-align:center}.login-shell .brand-mark{margin:0 auto 15px}.login-shell h1{font-size:24px}.login-shell .card{text-align:left;border:1px solid var(--line);border-radius:18px}.btn-primary{background:var(--primary);border-color:var(--primary)}@media(max-width:991px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.topbar{padding:0 18px}.content{padding:18px}}@media(max-width:575px){.content{padding:12px}.topbar{height:76px}.topbar h2{font-size:18px}.stat-card{padding:15px}.stat-value{font-size:21px}.page-tools{align-items:stretch;flex-direction:column}}

.sidebar-overlay{display:none}
/* =========================================================
   AyBay Universal Responsive Shell
   ========================================================= */
html{min-height:100%;overflow-x:hidden}
body{min-width:0;overflow-x:hidden}
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:260px;
    height:100dvh;
    margin:0;
    padding:18px 12px 12px;
    z-index:1030;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#101828;
    color:#fff;
}
.brand{flex:0 0 auto;padding:2px 9px 18px;margin:0;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#7c73ff,#4f46e5);font-weight:800;font-size:20px}
.brand-copy{min-width:0}
.brand-copy b{display:block}
.brand-copy small{display:block;color:#98a2b3;font-size:10px;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-nav{
    min-height:0;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:12px 2px 14px;
    scrollbar-width:thin;
}
.sidebar-section{flex:0 0 auto;padding:12px 10px 5px;color:#98a2b3;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.sidebar .nav-link{
    flex:0 0 auto;
    min-height:42px;
    color:#b9c0cc;
    text-decoration:none;
    border-radius:10px;
    padding:9px 11px;
    display:flex;
    align-items:center;
    gap:11px;
    font-size:13px;
    font-weight:650;
    transition:background .18s ease,color .18s ease,transform .18s ease;
}
.sidebar .nav-link:hover,.sidebar .nav-link.active{background:#1d2939;color:#fff}
.sidebar .nav-link.active{box-shadow:inset 3px 0 #7c73ff}
.sidebar .nav-link i{width:19px;flex:0 0 19px;text-align:center}
.nav-badge{margin-left:auto;font-size:8px;padding:3px 6px;border-radius:999px;background:#eef2ff;color:#4338ca;font-weight:800}
.sidebar-bottom{flex:0 0 auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-bottom .acting-return{background:rgba(99,91,255,.13);color:#c7d2fe}
.sidebar-bottom .logout{margin-top:4px;color:#fca5a5}
.sidebar-bottom .logout:hover{background:rgba(220,38,38,.12);color:#fecaca}

.main{margin-left:260px;width:calc(100% - 260px);min-width:0;min-height:100vh}
.topbar{
    width:100%;
    min-width:0;
    height:78px;
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
}
.topbar-title{min-width:0;overflow:hidden}
.topbar-title h2{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menuBtn{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:none;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid #e2e8f0;
    border-radius:11px;
    background:#fff;
    color:#334155;
    box-shadow:0 5px 16px rgba(15,23,42,.05);
    -webkit-tap-highlight-color:transparent;
}
#menuBtn:active{transform:scale(.96)}
.content{width:100%;min-width:0;padding:24px}
.table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
img,video,iframe{max-width:100%}
.sidebar-overlay{display:none}

@media (max-width:1199px) and (min-width:992px){
    .sidebar{width:235px}
    .main{margin-left:235px;width:calc(100% - 235px)}
    .topbar{padding:0 20px}
    .content{padding:20px}
}
@media (max-width:991px){
    .sidebar{
        width:min(300px,86vw);
        transform:translate3d(-105%,0,0);
        transition:transform .24s ease,box-shadow .24s ease;
        box-shadow:18px 0 45px rgba(15,23,42,.18);
    }
    .sidebar.open{transform:translate3d(0,0,0)}
    .main{margin-left:0;width:100%}
    #menuBtn{display:inline-flex}
    .topbar{height:70px;padding:0 16px;gap:12px}
    .content{padding:18px}
    .sidebar-overlay{
        position:fixed;
        inset:0;
        z-index:1020;
        display:block;
        background:rgba(15,23,42,.45);
        backdrop-filter:blur(2px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .2s ease,visibility .2s ease;
    }
    .sidebar-overlay.show{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }
    body.ay-menu-open{overflow:hidden}
}
@media (max-width:767px){
    .topbar{height:64px;padding:0 12px}
    .topbar-title .eyebrow{font-size:10px}
    .topbar-title h2{font-size:17px}
    .content{padding:14px}
    .top-actions{gap:5px}
    .lang{min-width:38px;height:38px;padding:0 8px}
    .user-menu-trigger .avatar{width:38px;height:38px;flex-basis:38px}
    .user-info{display:none}
    .user-menu-panel{right:-4px;width:min(260px,calc(100vw - 24px))}
    .billing-banner{align-items:flex-start;flex-direction:column}
}
@media (max-width:420px){
    .sidebar{width:min(286px,88vw)}
    .topbar{gap:8px}
    #menuBtn{width:40px;height:40px;flex-basis:40px}
    .content{padding:11px}
}
@media (prefers-reduced-motion:reduce){
    .sidebar,.sidebar-overlay,.sidebar .nav-link{transition:none!important}
}