:root{
    --dash-gradient:linear-gradient(257.29deg,#8035E8 10%,#BB29CC 30%,#F91BAC 52%,#FE1A4B 62%,#FD3748 79%,#FFBB41 93%);
    --dash-gradient-horizontal:linear-gradient(90deg,#FFBB41 0%,#FD3748 16%,#FE1A4B 35%,#F91BAC 57%,#BB29CC 76%,#8035E8 100%);
    --dash-title-gradient:linear-gradient(90deg,#FE1A4B 0%,#F91BAC 55%,#8035E8 100%);
    --dash-button-gradient:linear-gradient(90deg,#8035E8 0%,#A65AF4 100%);
    --dash-dot-left:url("../img/dashboards/auth-dots-left.png");
    --dash-dot-right:url("../img/dashboards/auth-dots-right.svg");
    --text:#1f1d24;
    --muted:#76717c;
    --line:#ded9e6;
    --soft:#f8f7fb;
    --panel-bg:#fff;
    --danger:#ff2d67;
    --success:#0ac044;
    --header-h:70px;
    --sidebar-w:92px;
    --content-w:1090px;
    --radius:8px;
    --font:Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-width:320px;
    font-family:var(--font);
    color:var(--text);
    background:#fff;
    line-height:1.35;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.7}
[hidden]{display:none!important}

.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

/* ───────────────────────────────── Dashboard header ───────────────────────────────── */
.dash-header{
    position:relative;
    z-index:60;
    height:var(--header-h);
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.04);
}
.dash-header__inner{
    height:100%;
    width:min(calc(100% - 96px),var(--content-w));
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.dash-brand{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    flex:0 0 auto;
}
.dash-brand img{width:146px;height:auto}
.dash-head-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:15px;
    min-width:0;
}
.dash-price-link{
    min-width:72px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    color:#ff2d67;
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    border:1px solid #ff2d67;
    border-radius:4px;
    background:#fff;
}
.dash-price-link:hover{color:#8035E8;border-color:#8035E8}
.dash-user{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-width:0;
    text-decoration:none;
}
.dash-avatar{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:inline-grid;
    place-items:center;
    color:#fff;
    font-size:22px;
    font-weight:800;
    border-radius:50%;
    background:var(--dash-gradient);
    box-shadow:0 8px 16px rgba(128,53,232,.18);
}
.dash-username{
    max-width:120px;
    color:#757575;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:700;
}
.dash-plan-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:28px;
    padding:0 6px 0 10px;
    color:#7c747e;
    text-decoration:none;
    font-size:11px;
    border:1px solid #ffb05d;
    border-radius:4px;
    background:#fff;
}
.dash-plan-pill strong{
    display:inline-flex;
    align-items:center;
    height:19px;
    padding:0 9px;
    color:#fff;
    font-size:10px;
    border-radius:3px;
    background:var(--dash-gradient-horizontal);
}
.dash-logout{margin:0}
.dash-logout button{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    padding:0;
    opacity:.9;
}
.dash-logout button:hover{opacity:1}
.dash-logout img{width:27px;height:27px}

/* Language dropdown copied intentionally close to auth screens for consistent behavior. */
.lang{position:relative;color:#1f1d24}
.lang summary{
    list-style:none;
    cursor:pointer;
    user-select:none;
    display:flex;
    align-items:center;
    gap:9px;
    padding:7px 6px;
    border-radius:10px;
    color:#1f1d24;
    font-size:14px;
    font-weight:500;
    line-height:1;
}
.lang summary::-webkit-details-marker{display:none}
.chev{
    width:8px;
    height:8px;
    display:inline-block;
    border:2px solid currentColor;
    border-top:0;
    border-left:0;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .15s ease;
}
.lang[open] .chev{transform:rotate(-135deg) translateY(-1px)}
.menu{
    position:absolute;
    right:0;
    top:calc(100% + 12px);
    background:#0f1512;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    box-shadow:0 20px 48px rgba(0,0,0,.45);
    padding:12px;
    min-width:min(92vw,340px);
    z-index:9999;
}
.menu-grid{display:grid;gap:10px;grid-template-columns:1fr}
.lang a{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#f8fff9;
    padding:12px 14px;
    border-radius:12px;
    background:linear-gradient(180deg,#111a17,#0c1210);
    border:1px solid rgba(255,255,255,.08);
    font-weight:700;
    transition:border-color .15s,background .15s,transform .06s;
}
.lang a:hover{border-color:rgba(249,27,172,.52)}
.lang a:active{transform:translateY(1px)}
.lang a[aria-current="true"]{border-color:rgba(249,27,172,.82);background:linear-gradient(180deg,rgba(249,27,172,.14),#0c1210)}
.flag{font-size:18px;line-height:1}
.lang[open]{isolation:isolate}

/* ───────────────────────────────── Sidebar ───────────────────────────────── */
.dash-sidebar{
    position:fixed;
    z-index:50;
    left:0;
    top:var(--header-h);
    bottom:0;
    width:var(--sidebar-w);
    background:#fff;
    border-right:1px solid rgba(0,0,0,.06);
}
.dash-sidebar__nav{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:31px;
    padding-top:86px;
}
.dash-sidebar__nav a{
    position:relative;
    width:100%;
    min-height:62px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    color:#67636d;
    text-decoration:none;
    font-size:12px;
    line-height:1;
}
.dash-sidebar__nav a::before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    width:4px;
    height:56px;
    border-radius:0 12px 12px 0;
    background:var(--dash-title-gradient);
    opacity:0;
}
.dash-sidebar__nav a.is-active::before{opacity:1}
.dash-sidebar__nav img{width:40px;height:40px;object-fit:contain}
.dash-sidebar__nav a:hover{color:#8035E8}

/* ───────────────────────────────── Main dashboard ───────────────────────────────── */
.dash-main{
    position:relative;
    min-height:890px;
    margin-left:var(--sidebar-w);
    overflow:hidden;
    background-color:#fbfbfc;
    background-image:var(--dash-dot-right),var(--dash-dot-left);
    background-repeat:no-repeat,no-repeat;
    background-size:min(31vw,520px) auto,min(31vw,520px) auto;
    background-position:right top,left bottom;
    border-bottom:1px solid rgba(0,0,0,.02);
}
.dash-content{
    position:relative;
    z-index:1;
    width:min(calc(100% - 96px),var(--content-w));
    margin:0 auto;
    padding:54px 0 58px;
}
.dash-title-block{margin:0 0 28px}
.dash-title-block h1{
    margin:0 0 10px;
    font-size:27px;
    line-height:1.1;
    letter-spacing:-.02em;
    color:#f91bac;
    background:var(--dash-title-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:800;
}
.dash-title-block p{
    margin:0;
    color:#757575;
    font-size:17px;
    font-weight:400;
}

.dash-search-panel{
    position:relative;
    min-height:98px;
    display:grid;
    grid-template-columns:1fr 134px;
    align-items:center;
    gap:20px;
    margin:0 0 18px;
    padding:22px 31px;
    border:1.5px solid transparent;
    border-radius:8px;
    background:linear-gradient(#fff,#fff) padding-box,var(--dash-gradient-horizontal) border-box;
}
.dash-search-panel input{
    width:100%;
    height:42px;
    color:#2d2931;
    font-size:16px;
    padding:0 20px;
    border:1px solid #e1dfe5;
    border-radius:4px;
    outline:none;
    background:#fff;
    transition:border-color .15s,box-shadow .15s;
}
.dash-search-panel input::placeholder{color:#7a747e;opacity:1}
.dash-search-panel input:focus{
    border-color:#9a55ee;
    box-shadow:0 0 0 3px rgba(128,53,232,.14);
}
.dash-search-panel button[type="submit"]{
    height:42px;
    border:0;
    border-radius:4px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#fff;
    font-weight:800;
    font-size:16px;
    background:var(--dash-button-gradient);
    box-shadow:0 14px 26px rgba(128,53,232,.13);
}
.dash-search-panel button[type="submit"]:hover{filter:saturate(1.06) brightness(1.02)}
.dash-search-error{
    position:absolute;
    left:31px;
    bottom:5px;
    margin:0;
    min-height:14px;
    color:#e23859;
    font-size:12px;
    line-height:1;
}
.dash-search-panel.is-loading button[type="submit"] span{opacity:.55}
.dash-search-panel.is-loading button[type="submit"]::after{
    content:"";
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,.48);
    border-top-color:#fff;
    border-radius:50%;
    animation:dash-spin .75s linear infinite;
}
@keyframes dash-spin{to{transform:rotate(360deg)}}

.dash-panel{
    border:1.5px solid transparent;
    border-radius:8px;
    background:linear-gradient(#fff,#fff) padding-box,var(--dash-gradient-horizontal) border-box;
    box-shadow:none;
}
.dash-panel__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:32px 31px 0;
}
.dash-panel h2{
    margin:0;
    color:#8035E8;
    font-size:16px;
    font-weight:800;
    line-height:1.2;
}
.dash-panel p{
    margin:10px 0 0;
    color:#8a8790;
    font-size:11px;
    line-height:1.3;
}
.dash-panel--recent{min-height:440px;margin-bottom:18px}
body[data-dashboard-state="list"] .dash-panel--recent{min-height:447px}
.dash-filter-trigger{
    min-width:86px;
    height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#8035E8;
    border:1px solid #8035E8;
    border-radius:4px;
    background:#fff;
    font-size:12px;
    font-weight:500;
}
.dash-filter-trigger:hover{background:rgba(128,53,232,.06)}
.dash-filter-trigger img{width:18px;height:18px}
body[data-dashboard-state="list"] .dash-filter-trigger{display:inline-flex}
body[data-dashboard-state="empty"] .dash-filter-trigger{display:none}

.recent-loading{
    min-height:340px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    color:#8035E8;
}
.recent-loading__spinner{
    width:46px;
    height:46px;
    border:4px solid rgba(128,53,232,.16);
    border-top-color:#8035E8;
    border-radius:50%;
    animation:dashboard-loading-spin .75s linear infinite;
}
.recent-loading strong{font-size:16px}
@keyframes dashboard-loading-spin{to{transform:rotate(360deg)}}

.recent-empty{
    min-height:340px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:20px 24px 56px;
    text-align:center;
}
.recent-empty img{width:137px;height:137px;margin-bottom:6px}
.recent-empty h3{
    margin:0 0 23px;
    color:#8035E8;
    font-size:34px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.02em;
}
.primary-action{
    min-width:251px;
    height:48px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#fff;
    font-weight:800;
    font-size:16px;
    border:0;
    border-radius:4px;
    background:var(--dash-button-gradient);
    box-shadow:0 14px 26px rgba(128,53,232,.13);
}
.primary-action:hover{filter:saturate(1.06) brightness(1.02)}
.primary-action img{width:17px;height:17px;margin:0}

body[data-dashboard-state="list"] [data-empty-state]{display:none}
body[data-dashboard-state="empty"] [data-list-state]{display:none!important}
body[data-dashboard-state="list"] [data-list-state]{display:block}
body[data-dashboard-loading="true"] [data-empty-state],
body[data-dashboard-loading="true"] [data-list-state]{display:none!important}
body[data-dashboard-loading="false"] [data-loading-state]{display:none}

.recent-list{padding:21px 31px 24px}
.recent-table-wrap{overflow-x:auto}
.recent-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
    table-layout:fixed;
}
.recent-table th{
    color:#7f7a85;
    font-size:11px;
    font-weight:500;
    text-align:left;
    padding:0 14px 19px;
    border-bottom:1px solid #edeaf1;
}
.recent-table th:first-child{width:31%}
.recent-table th:nth-child(2){width:22%}
.recent-table th:nth-child(3){width:21%}
.recent-table th:nth-child(4){width:16%}
.recent-table th:nth-child(5){width:20%;text-align:center}
.recent-table th button{
    position:relative;
    width:9px;
    height:12px;
    margin-left:5px;
    border:0;
    padding:0;
    background:transparent;
    vertical-align:-1px;
}
.recent-table th button::before,
.recent-table th button::after{
    content:"";
    position:absolute;
    left:2px;
    width:5px;
    height:5px;
    border:1px solid #a59dab;
    border-right:0;
    border-bottom:0;
}
.recent-table th button::before{top:0;transform:rotate(45deg)}
.recent-table th button::after{bottom:0;transform:rotate(225deg)}
.recent-table td{
    padding:17px 14px;
    vertical-align:middle;
    color:#52505a;
    font-size:12px;
}
.recent-table tbody tr{border-bottom:0}
.report-user{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
}
.report-avatar{
    width:50px;
    height:50px;
    flex:0 0 50px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:25px;
    font-weight:800;
    background:var(--dash-gradient);
}
.report-name strong{
    display:block;
    max-width:155px;
    color:#6a6670;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.report-name span{
    display:block;
    margin-top:3px;
    color:#85818a;
    font-size:11px;
}
.metric-cell{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.metric-value{
    min-width:48px;
    color:#59545f;
    font-size:13px;
    font-weight:500;
}
.metric-detail{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
}
.metric-delta{
    color:#ff2d67;
    font-size:10px;
    line-height:1;
    font-weight:800;
}
.sparkline{
    display:flex;
    align-items:flex-end;
    gap:2px;
    height:23px;
    min-width:54px;
    padding-bottom:2px;
}
.sparkline i{
    display:block;
    width:3px;
    min-height:4px;
    border-radius:2px 2px 0 0;
    background:#10c342;
}
.sparkline i:nth-child(1){height:5px}
.sparkline i:nth-child(2){height:8px}
.sparkline i:nth-child(3){height:6px}
.sparkline i:nth-child(4){height:11px}
.sparkline i:nth-child(5){height:8px}
.sparkline i:nth-child(6){height:13px}
.sparkline i:nth-child(7){height:18px}
.sparkline::before{
    content:"";
    display:block;
    width:3px;
    height:21px;
    margin-right:9px;
    border-radius:2px;
    background:#ff2d67;
}
.report-date{
    display:flex;
    flex-direction:column;
    color:#5d5963;
    font-size:11px;
    line-height:1.18;
    text-align:center;
}
.report-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.small-action{
    height:25px;
    min-width:78px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0 10px;
    color:#ff2d67;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
    border:1px solid #F91BAC;
    border-radius:4px;
    background:#fff;
}
.small-action:hover{background:rgba(249,27,172,.06)}
.small-action img{width:14px;height:14px}
.recent-pagination{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin-top:6px;
    color:#6f6a75;
    font-size:11px;
}
.recent-pagination button{
    min-width:12px;
    height:20px;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    font-size:11px;
}
.recent-pagination button.is-active{
    width:18px;
    height:18px;
    border-radius:50%;
    color:#fff;
    background:var(--dash-gradient-horizontal);
}
.mobile-report-list{display:none}

.dash-panel--usage{
    min-height:118px;
    padding:30px 31px 27px;
}
.usage-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}
.usage-head h2{
    color:#8035E8;
    font-size:16px;
}
.usage-head p{margin-top:8px;color:#8a8790;font-size:11px}
.usage-head > span{
    color:#76717c;
    font-size:12px;
    line-height:1.2;
    margin-top:14px;
}
.usage-track{
    width:100%;
    height:8px;
    border-radius:999px;
    background:#ecebed;
    overflow:hidden;
}
.usage-track span{
    display:block;
    height:100%;
    min-width:2px;
    border-radius:inherit;
    background:var(--dash-gradient-horizontal);
}
.usage-mobile-count{display:none}
body[data-dashboard-loading="true"] .usage-head > span,
body[data-dashboard-loading="true"] .usage-mobile-count{visibility:hidden}
body[data-dashboard-loading="true"] .usage-track span{
    width:32%!important;
    animation:dashboard-usage-loading 1.1s ease-in-out infinite alternate;
}
@keyframes dashboard-usage-loading{
    from{transform:translateX(-105%);opacity:.35}
    to{transform:translateX(320%);opacity:.8}
}

/* ───────────────────────────────── Footer (reused auth-style footer) ───────────────────────────────── */
.auth-footer{
    background:#fff;
    padding:48px 20px 30px;
    min-height:264px;
    text-align:center;
}
.dash-footer{margin-left:var(--sidebar-w)}
.auth-footer__inner{max-width:1120px;margin:0 auto}
.auth-footer__brand{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin-bottom:28px}
.auth-footer__logo{width:132px;height:auto;margin:0 auto}
.auth-footer__nav,
.auth-footer__utility{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    margin:0 auto;
    color:#151219;
}
.auth-footer__nav{font-size:16px;line-height:1.1;margin-bottom:24px}
.auth-footer__utility{font-size:14px;line-height:1.1;margin-bottom:16px}
.auth-footer__nav a,
.auth-footer__utility a{
    text-decoration:none;
    padding:0 13px;
    border-left:1px solid #d4d0d8;
}
.auth-footer__nav a:first-child,
.auth-footer__utility a:first-child{border-left:0}
.auth-footer__nav a:hover,
.auth-footer__utility a:hover{color:#8035E8;text-decoration:underline;text-underline-offset:3px}
.auth-footer__accent{
    width:116px;
    height:2px;
    margin:0 auto 25px;
    background:linear-gradient(90deg,#8035E8 0%,#F91BAC 55%,#FFBB41 100%);
}
.auth-footer__tagline{
    margin:0 0 29px;
    color:#17131b;
    font-size:14px;
    line-height:1.2;
}
.auth-footer__legal{
    margin:0 auto;
    max-width:1060px;
    color:#77727b;
    font-size:10px;
    line-height:1.3;
    font-weight:700;
}

/* ───────────────────────────────── Mobile bottom navigation ───────────────────────────────── */
.mobile-dash-nav{display:none}

/* ───────────────────────────────── Filter modal ───────────────────────────────── */
.filter-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,.78);
}
.filter-overlay[hidden]{display:none!important}
.filter-modal{
    width:min(100%,456px);
    margin:0;
    padding:21px 24px 24px;
    border:1.5px solid transparent;
    border-radius:8px;
    background:linear-gradient(#fff,#fff) padding-box,var(--dash-gradient-horizontal) border-box;
    box-shadow:0 26px 70px rgba(0,0,0,.32);
}
.filter-modal__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:12px;
}
.filter-modal h2{
    margin:0;
    color:#ff2d67;
    font-size:28px;
    line-height:1;
    font-weight:800;
    background:var(--dash-title-gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.filter-close{
    width:30px;
    height:30px;
    padding:0;
    border:0;
    color:#b3aeb8;
    background:transparent;
    font-size:32px;
    line-height:24px;
    font-weight:200;
}
.filter-close:hover{color:#8035E8}
.filter-group{margin:0 0 17px}
.filter-group label{
    display:block;
    margin-bottom:9px;
    color:#77727b;
    font-size:17px;
    line-height:1;
}
.filter-row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:11px;
}
.filter-row span{color:#bcb7c0;font-size:17px}
.filter-row input{
    width:100%;
    height:44px;
    padding:0 17px;
    color:#2d2931;
    font-size:16px;
    border:1px solid #dcd8e1;
    border-radius:4px;
    outline:none;
    background:#fff;
}
.filter-row input::placeholder{color:#8a8790;opacity:1}
.filter-row input:focus{
    border-color:#9a55ee;
    box-shadow:0 0 0 3px rgba(128,53,232,.14);
}
.filter-row--date input{
    padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f91bac' d='M5 1.4a.75.75 0 0 1 .75.75V3h6.5v-.85a.75.75 0 1 1 1.5 0V3H15a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1.25v-.85A.75.75 0 0 1 5 1.4ZM2.5 7.25V15c0 .28.22.5.5.5h12a.5.5 0 0 0 .5-.5V7.25h-13ZM3 4.5a.5.5 0 0 0-.5.5v.75h13V5a.5.5 0 0 0-.5-.5H3Z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 13px center;
}
.filter-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:23px;
}
.filter-actions button{
    height:43px;
    border-radius:4px;
    font-size:16px;
    font-weight:800;
}
.filter-reset{
    color:#8035E8;
    border:1px solid #8035E8;
    background:#fff;
}
.filter-apply{
    color:#fff;
    border:0;
    background:var(--dash-button-gradient);
}
.filter-reset:hover{background:rgba(128,53,232,.06)}
.filter-apply:hover{filter:saturate(1.06) brightness(1.02)}

@media (max-width:1260px){
    :root{--content-w:940px}
    .dash-header__inner,.dash-content{width:min(calc(100% - 72px),var(--content-w))}
    .recent-table th:first-child{width:30%}
    .small-action{min-width:72px;padding-inline:8px}
}

@media (max-width:1100px){
    :root{--header-h:58px;--sidebar-w:0px}
    body{background:#fff;padding-bottom:72px}
    .dash-header{height:var(--header-h);border-bottom:0}
    .dash-header__inner{
        width:100%;
        max-width:100%;
        padding:0 22px;
        justify-content:space-between;
    }
    .dash-brand img{width:128px}
    .dash-price-link,
    .dash-user,
    .dash-plan-pill,
    .dash-logout{display:none}
    .dash-head-actions{gap:0;margin-left:auto}
    .lang{position:static}
    .lang summary{font-size:14px;padding:8px 2px;gap:8px}
    .chev{width:8px;height:8px;border-width:1.7px}
    .menu{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        width:100%;
        min-width:100%;
        max-width:100%;
        border-radius:0 0 18px 18px;
        padding:14px;
        max-height:70vh;
        overflow:auto;
        margin-top:0;
    }
    .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dash-sidebar{display:none}

    .dash-main{
        margin-left:0;
        min-height:auto;
        background-size:260px auto,280px auto;
        background-position:right -116px top 0,left -118px bottom 2px;
    }
    .dash-content{
        width:100%;
        padding:23px 17px 32px;
    }
    .dash-title-block{margin-bottom:17px}
    .dash-title-block h1{font-size:25px;margin-bottom:5px}
    .dash-title-block p{font-size:13px}

    .dash-search-panel{
        min-height:54px;
        grid-template-columns:1fr 45px;
        gap:0;
        padding:9px 10px 9px 17px;
        margin-bottom:16px;
        border-radius:7px;
    }
    .dash-search-panel input{
        height:35px;
        padding:0 15px;
        font-size:12px;
        border-radius:4px 0 0 4px;
    }
    .dash-search-panel button[type="submit"]{
        width:45px;
        height:35px;
        border-radius:0 4px 4px 0;
        gap:0;
    }
    .dash-search-panel button[type="submit"] span{display:none}
    .dash-search-panel button[type="submit"] svg{width:20px;height:20px}
    .dash-search-error{left:18px;bottom:-14px;font-size:10px}

    .dash-panel{border-radius:7px}
    .dash-panel__head{padding:16px 17px 0;gap:12px}
    .dash-panel h2{font-size:14px}
    .dash-panel p{font-size:9px;margin-top:7px}
    .dash-panel--recent{min-height:260px;margin-bottom:15px}
    body[data-dashboard-state="list"] .dash-panel--recent{min-height:0}
    .dash-filter-trigger{
        min-width:30px;
        width:30px;
        height:30px;
        padding:0;
        gap:0;
    }
    .dash-filter-trigger span{display:none}
    .dash-filter-trigger img{width:18px;height:18px}

    .recent-empty{
        min-height:210px;
        padding:20px 16px 33px;
    }
    .recent-empty img{width:90px;height:90px;margin-bottom:2px}
    .recent-empty h3{font-size:18px;margin-bottom:17px}
    .primary-action{
        min-width:197px;
        height:34px;
        padding:0 14px;
        gap:8px;
        font-size:12px;
    }
    .primary-action img{width:14px;height:14px}

    .recent-list{padding:12px 15px 15px}
    .recent-table-wrap,.recent-pagination{display:none}
    .mobile-report-list{
        display:flex;
        flex-direction:column;
        gap:14px;
        padding-top:11px;
    }
    .mobile-report-card{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        border-bottom:1px solid rgba(222,217,230,.9);
        padding:0 0 13px;
    }
    .mobile-report-card:last-child{border-bottom:0;padding-bottom:0}
    .mobile-report-row{
        display:grid;
        grid-template-columns:76px 1fr;
        align-items:center;
        gap:10px;
        min-height:28px;
    }
    .mobile-report-label{
        color:#8a8790;
        font-size:10px;
        line-height:1;
    }
    .mobile-userline{
        display:flex;
        align-items:center;
        gap:9px;
        min-width:0;
    }
    .mobile-userline .report-avatar{
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:18px;
    }
    .mobile-userline .report-name strong{font-size:10px;max-width:90px}
    .mobile-userline .report-name span{font-size:8px;margin-top:1px}
    .mobile-report-row .metric-cell{gap:8px}
    .mobile-report-row .metric-value{min-width:40px;font-size:11px}
    .mobile-report-row .metric-delta{font-size:8px}
    .mobile-report-row .sparkline{height:20px;min-width:42px;transform:scale(.82);transform-origin:left center}
    .mobile-report-row .report-date{align-items:flex-start;text-align:left;font-size:10px}
    .mobile-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:13px;
        margin-top:1px;
    }
    .mobile-actions .small-action{height:24px;min-width:0;font-size:8px;gap:4px}
    .mobile-actions .small-action img{width:12px;height:12px}

    .dash-panel--usage{
        min-height:98px;
        padding:17px 16px 16px;
    }
    .usage-head{display:block;margin-bottom:13px}
    .usage-head h2{font-size:14px}
    .usage-head p{font-size:9px;margin-top:7px}
    .usage-head > span{display:none}
    .usage-track{height:6px;margin-bottom:12px}
    .usage-mobile-count{
        display:block;
        margin:0!important;
        color:#77727b!important;
        font-size:11px!important;
    }

    .dash-footer{
        margin-left:0;
        padding:43px 16px 22px;
        min-height:310px;
    }
    .auth-footer__brand{margin-bottom:28px}
    .auth-footer__logo{width:122px}
    .auth-footer__nav{
        max-width:270px;
        row-gap:9px;
        font-size:12px;
        line-height:1.1;
        margin-bottom:31px;
    }
    .auth-footer__nav a{padding:0 10px}
    .auth-footer__utility{
        max-width:270px;
        row-gap:11px;
        font-size:12px;
        margin-bottom:15px;
    }
    .auth-footer__utility a{padding:0 9px}
    .auth-footer__accent{width:104px;margin-bottom:27px}
    .auth-footer__tagline{font-size:12px;margin-bottom:24px}
    .auth-footer__legal{max-width:252px;font-size:7.4px;line-height:1.16}

    .mobile-dash-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:80;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        height:61px;
        background:#fff;
        border-top:1px solid rgba(0,0,0,.08);
        box-shadow:0 -10px 24px rgba(31,29,36,.08);
        padding:5px 7px 3px;
    }
    .mobile-dash-nav a{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        color:#4c4851;
        text-decoration:none;
        font-size:9px;
        line-height:1;
    }
    .mobile-dash-nav a.is-active::after{
        content:"";
        position:absolute;
        left:19px;
        right:19px;
        bottom:-3px;
        height:3px;
        border-radius:999px 999px 0 0;
        background:var(--dash-title-gradient);
    }
    .mobile-dash-nav img{width:22px;height:22px;object-fit:contain}

    .filter-overlay{
        align-items:flex-start;
        justify-content:flex-start;
        padding:104px 21px 24px;
    }
    .filter-modal{
        width:min(100%,292px);
        padding:14px 14px 15px;
        border-radius:7px;
    }
    .filter-modal__head{margin-bottom:8px}
    .filter-modal h2{font-size:15px}
    .filter-close{width:20px;height:20px;font-size:26px;line-height:18px}
    .filter-group{margin-bottom:12px}
    .filter-group label{font-size:11px;margin-bottom:6px}
    .filter-row{gap:6px}
    .filter-row span{font-size:10px}
    .filter-row input{
        height:34px;
        padding:0 12px;
        font-size:10px;
    }
    .filter-row--date input{
        padding-right:28px;
        background-size:13px 13px;
        background-position:right 9px center;
    }
    .filter-actions{gap:13px;margin-top:14px}
    .filter-actions button{height:35px;font-size:11px}
}

@media (max-width:380px){
    .dash-header__inner{padding:0 18px}
    .dash-content{padding-left:16px;padding-right:16px}
    .dash-brand img{width:122px}
    .recent-list{padding-left:13px;padding-right:13px}
    .mobile-report-row{grid-template-columns:70px 1fr}
    .mobile-actions{gap:9px}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

.dash-no-results{padding:38px 16px!important;text-align:center;color:#8a8590;font-size:13px;font-weight:700}
@media (max-width:900px){.dash-no-results{padding:20px 8px!important;font-size:11px}}

/* ───────────────────────────────── Dashboard refinements ───────────────────────────────── */
.dash-main{
    background-image:none;
}
.dash-main::before,
.dash-main::after{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    opacity:.10;
    background-repeat:no-repeat;
    background-size:contain;
}
.dash-main::before{
    top:0;
    right:0;
    width:min(31vw,520px);
    height:min(31vw,520px);
    background-image:var(--dash-dot-right);
    background-position:right top;
}
.dash-main::after{
    left:0;
    bottom:0;
    width:min(31vw,520px);
    height:min(31vw,520px);
    background-image:var(--dash-dot-left);
    background-position:left bottom;
}

.dash-panel p,
.usage-head p{
    font-size:13px;
    line-height:1.45;
}

.metric-detail{
    position:relative;
    min-width:72px;
}
.metric-delta.is-negative{color:#ff2d67}
.growth-sparkline{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:3px;
    height:28px;
    min-width:62px;
    outline:none;
}
.growth-sparkline::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 8px);
    transform:translateX(-50%) translateY(3px);
    width:max-content;
    max-width:190px;
    padding:6px 9px;
    color:#fff;
    background:rgba(31,29,36,.94);
    border-radius:7px;
    box-shadow:0 10px 22px rgba(31,29,36,.22);
    font-size:11px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
    z-index:20;
}
.growth-sparkline:hover::after,
.growth-sparkline:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}
.growth-candle{
    position:relative;
    display:block;
    width:4px;
    height:28px;
    flex:0 0 4px;
}
.growth-candle::before{
    content:"";
    position:absolute;
    left:0;
    width:4px;
    height:var(--h,8px);
}
.growth-candle.is-up::before{
    bottom:50%;
    border-radius:3px 3px 0 0;
    background:#10c342;
}
.growth-candle.is-down::before{
    top:50%;
    border-radius:0 0 3px 3px;
    background:#ff2d67;
}

.report-actions{
    gap:8px;
}
.small-action{
    min-width:96px;
    height:30px;
    padding:0 12px;
    gap:7px;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
    border-radius:5px;
}
.small-action span{white-space:nowrap}
.small-action img{
    flex:0 0 14px;
}

.recent-pagination{
    gap:12px;
    margin-top:18px;
    font-size:14px;
}
.recent-pagination button{
    min-width:30px;
    width:auto;
    height:30px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#757575;
    font-size:14px;
    line-height:1;
    transition:background .15s,color .15s,transform .08s;
}
.recent-pagination button:hover:not(:disabled){
    background:rgba(128,53,232,.08);
    color:#8035E8;
}
.recent-pagination button:active:not(:disabled){transform:translateY(1px)}
.recent-pagination button:disabled{opacity:.35;cursor:not-allowed}
.recent-pagination button.is-active{
    min-width:34px;
    width:34px;
    height:34px;
    border-radius:12px;
    color:#fff;
    font-size:18px;
    background:var(--dash-gradient-horizontal);
    box-shadow:0 10px 20px rgba(128,53,232,.18);
}
.recent-pagination .page-step{
    font-size:28px;
    font-weight:500;
    line-height:0;
}
.recent-pagination .page-edge img{
    width:12px;
    height:14px;
}
.recent-pagination .page-ellipsis{
    color:#757575;
    font-size:18px;
    line-height:1;
    padding:0 2px;
}

.filter-row input[type="date"]{
    color:#77727b;
    cursor:pointer;
}
.filter-row input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:0;
    cursor:pointer;
}

@media (max-width:1260px){
    .small-action{min-width:90px;padding-inline:10px;font-size:10.5px}
}

@media (max-width:1100px){
    .dash-main::before{
        width:280px;
        height:280px;
        right:-116px;
        top:0;
    }
    .dash-main::after{
        width:290px;
        height:290px;
        left:-118px;
        bottom:2px;
    }
    .dash-panel p,
    .usage-head p{
        font-size:12px;
        line-height:1.35;
        margin-top:8px;
    }
    .dash-search-panel.has-error{
        margin-bottom:34px;
    }
    .dash-search-error{
        left:20px;
        bottom:-24px;
        font-size:12px;
        line-height:1.15;
        min-height:16px;
    }
    .mobile-report-row .metric-detail{
        min-width:88px;
    }
    .mobile-report-row .growth-sparkline{
        min-width:70px;
        height:26px;
        gap:3px;
        transform:none;
    }
    .mobile-report-row .growth-candle{
        height:26px;
        width:4px;
        flex-basis:4px;
    }
    .mobile-actions{
        gap:16px;
        margin-top:8px;
    }
    .mobile-actions .small-action{
        height:44px;
        min-width:0;
        padding:0 10px;
        gap:8px;
        font-size:13px;
        line-height:1;
        border-radius:5px;
    }
    .mobile-actions .small-action img{
        width:16px;
        height:16px;
        flex-basis:16px;
    }
    .filter-overlay{
        align-items:flex-start;
        justify-content:center;
        padding:126px 16px 88px;
        overflow:auto;
    }
    .filter-modal{
        width:min(calc(100vw - 32px),520px);
        padding:26px 24px 24px;
        border-radius:8px;
    }
    .filter-modal__head{margin-bottom:18px}
    .filter-modal h2{font-size:28px}
    .filter-close{
        width:36px;
        height:36px;
        font-size:36px;
        line-height:30px;
    }
    .filter-group{margin-bottom:19px}
    .filter-group label{
        font-size:18px;
        margin-bottom:11px;
    }
    .filter-row{
        gap:12px;
    }
    .filter-row span{font-size:16px}
    .filter-row input{
        height:56px;
        padding:0 18px;
        font-size:18px;
    }
    .filter-row--date input{
        padding-right:40px;
        background-size:18px 18px;
        background-position:right 16px center;
    }
    .filter-actions{
        gap:20px;
        margin-top:24px;
    }
    .filter-actions button{
        height:56px;
        font-size:20px;
    }
}

@media (max-width:380px){
    .filter-overlay{padding-top:112px}
    .filter-modal{padding:22px 20px}
    .filter-row input{font-size:16px;height:52px;padding-inline:14px}
    .filter-actions{gap:14px}
    .filter-actions button{height:52px;font-size:18px}
    .mobile-actions{gap:10px}
    .mobile-actions .small-action{font-size:12px}
}
.filter-row input{min-width:0}
.date-picker{
    position:relative;
    display:block;
    width:100%;
    min-width:0;
    height:44px;
    border:1px solid #dcd8e1;
    border-radius:4px;
    background:#fff;
    background-image:url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f91bac' d='M5 1.4a.75.75 0 0 1 .75.75V3h6.5v-.85a.75.75 0 1 1 1.5 0V3H15a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1.25v-.85A.75.75 0 0 1 5 1.4ZM2.5 7.25V15c0 .28.22.5.5.5h12a.5.5 0 0 0 .5-.5V7.25h-13ZM3 4.5a.5.5 0 0 0-.5.5v.75h13V5a.5.5 0 0 0-.5-.5H3Z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 13px center;
    cursor:pointer;
}
.date-picker:focus-within{
    border-color:#9a55ee;
    box-shadow:0 0 0 3px rgba(128,53,232,.14);
}
.date-picker__text{
    position:absolute;
    left:17px;
    right:36px;
    top:50%;
    transform:translateY(-50%);
    color:#8a8790;
    font-size:16px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    pointer-events:none;
}
.date-picker input[type="date"]{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    opacity:0;
    cursor:pointer;
}
@media (max-width:1100px){
    .date-picker{
        height:56px;
        background-size:18px 18px;
        background-position:right 16px center;
    }
    .date-picker__text{
        left:18px;
        right:42px;
        font-size:18px;
    }
}
@media (max-width:380px){
    .date-picker{height:52px}
    .date-picker__text{font-size:16px;left:14px;right:38px}
}
.recent-table th:first-child{width:28%}
.recent-table th:nth-child(2){width:22%}
.recent-table th:nth-child(3){width:20%}
.recent-table th:nth-child(4){width:10%}
.recent-table th:nth-child(5){width:20%;text-align:center}
.small-action{min-width:82px;font-size:10px;padding-inline:9px}
@media (max-width:1260px){.small-action{min-width:78px;font-size:9.5px;padding-inline:8px}}
@media (max-width:1100px){.mobile-actions .small-action{min-width:0;font-size:13px;padding-inline:10px}}
@media (max-width:380px){.mobile-actions .small-action{font-size:12px;padding-inline:8px}}