:root{
    --bg1:#f7c68d;
    --bg2:#f7e3c7;
    --bg3:#f4b57b;

    --panel-border:rgba(255,255,255,.42);
    --panel-bg:linear-gradient(180deg, rgba(255,251,245,.36), rgba(255,247,238,.26));
    --card-bg:linear-gradient(180deg, rgba(255,252,248,.72), rgba(255,248,242,.46));

    --text:#5f3b24;
    --text-strong:#54311d;
    --muted:#9c755d;
    --muted-2:#b08a72;

    --orange:#eb8a43;
    --orange2:#f3b05a;
    --green:#38be73;
    --pink:#eb5f83;
    --blue:#3f77ea;
    --red:#ef7a56;
    --gold:#eda542;

    --line:rgba(229,197,175,.48);
    --line-soft:rgba(255,255,255,.52);

    --shadow:0 22px 55px rgba(180,110,48,.13);
    --shadow-soft:0 14px 28px rgba(183,120,76,.08);
    --shadow-card:0 18px 34px rgba(178,114,64,.09);
    --shadow-hover:0 26px 46px rgba(183,110,55,.16);

    --radius-xl:30px;
    --radius-lg:24px;
    --radius-md:18px;
    --radius-sm:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    scroll-behavior:smooth;
}
body{
    min-height:100vh;
    font-family:"SF Pro Display","Inter","PingFang SC","Microsoft YaHei",sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 10% 20%, rgba(245,145,59,.55) 0%, rgba(245,145,59,0) 22%),
        radial-gradient(circle at 88% 88%, rgba(247,146,55,.38) 0%, rgba(247,146,55,0) 20%),
        linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 48%, var(--bg3) 100%);
    overflow-x:hidden;
}
body::before,
body::after{
    content:"";
    position:fixed;
    pointer-events:none;
    z-index:0;
    width:560px;
    height:560px;
    opacity:.26;
    border-radius:50%;
    background:
        repeating-radial-gradient(circle at center,
        rgba(230,132,48,.30) 0 2px,
        rgba(230,132,48,0) 2px 15px);
}
body::before{left:-150px;top:80px;transform:rotate(18deg)}
body::after{right:-180px;bottom:-100px;transform:rotate(-20deg)}

a{
    color:inherit;
    text-decoration:none;
}

.page-shell{
    position:relative;
    z-index:1;
    min-height:100vh;
    padding:18px;
}
.page-dashboard{
    width:calc(100vw - 36px);
    max-width:1720px;
    min-height:calc(100vh - 36px);
    margin:0 auto;
    border-radius:38px;
    background:var(--panel-bg);
    border:1px solid var(--panel-border);
    box-shadow:
        0 26px 70px rgba(177,108,51,.16),
        inset 0 1px 0 rgba(255,255,255,.45);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    overflow:hidden;
    display:grid;
    grid-template-columns:260px 1fr;
}

/* sidebar */
.agent-sidebar{
    padding:20px 18px;
    border-right:1px solid rgba(255,255,255,.24);
    background:linear-gradient(180deg, rgba(255,243,230,.24), rgba(255,243,230,.10));
    display:flex;
    flex-direction:column;
    position:relative;
}
.agent-brand{
    height:56px;
    border-radius:999px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(255,250,245,.82);
    border:1px solid rgba(255,255,255,.56);
    box-shadow:0 12px 24px rgba(183,115,62,.08);
    font-weight:900;
    color:#64412b;
    margin-bottom:26px;
}
.agent-brand-left{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16px;
    letter-spacing:.2px;
}
.agent-brand-icon{
    width:18px;
    height:18px;
    border-radius:6px;
    background:linear-gradient(135deg,#f4a04b,#f0c16b);
    box-shadow:0 4px 10px rgba(226,144,53,.25);
}
.agent-brand-arrow{
    color:#b99076;
    font-weight:800;
    font-size:14px;
}

.agent-nav{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:auto;
}
.agent-nav a{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:50px;
    padding:0 16px;
    border-radius:16px;
    color:#774d34;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    background:transparent;
    transition:all .18s ease;
}
.agent-nav a:hover{
    background:rgba(255,255,255,.18);
    transform:translateX(3px);
}
.agent-nav a.active{
    background:rgba(255,252,247,.92);
    box-shadow:0 10px 24px rgba(188,120,65,.10);
    color:#5f3822;
}
.agent-nav a.active::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--orange),var(--orange2));
}
.agent-nav a.active::after{
    content:"";
    position:absolute;
    right:10px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--orange),var(--orange2));
    box-shadow:0 0 0 4px rgba(235,138,67,.12);
}
.agent-nav-icon{
    width:16px;
    height:16px;
    border-radius:5px;
    border:1.6px solid rgba(154,117,93,.6);
    opacity:.85;
    flex:0 0 16px;
}

/* grouped sidebar */
.agent-nav-grouped{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.agent-nav-group{
    display:grid;
    gap:10px;
}
.agent-nav-group-title{
    padding:0 8px;
    font-size:12px;
    font-weight:900;
    color:#b28669;
    letter-spacing:.8px;
    text-transform:uppercase;
    opacity:.95;
}
.agent-nav-group-list{
    display:grid;
    gap:10px;
    padding:12px;
    border-radius:22px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.agent-nav-text{
    display:flex;
    flex-direction:column;
    min-width:0;
    line-height:1.15;
}
.agent-nav-main{
    font-size:14px;
    font-weight:900;
    color:inherit;
}
.agent-nav-sub{
    margin-top:3px;
    font-size:11px;
    font-weight:700;
    color:#b18a73;
    opacity:.9;
    white-space:nowrap;
}
.agent-nav a.active .agent-nav-sub{
    color:#c07a4d;
}

.agent-user-card{
    margin-top:20px;
    border-top:1px solid rgba(255,255,255,.22);
    padding-top:20px;
}
.agent-user-chip{
    min-height:72px;
    padding:12px 14px;
    border-radius:20px;
    background:rgba(255,250,245,.38);
    border:1px solid rgba(255,255,255,.36);
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:var(--shadow-soft);
}
.agent-user-left{
    display:flex;
    align-items:center;
    gap:12px;
}
.agent-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:linear-gradient(180deg,#f2d5c0,#b48f78);
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.agent-avatar::before{
    content:"";
    position:absolute;
    left:11px;
    top:7px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff6f0;
}
.agent-avatar::after{
    content:"";
    position:absolute;
    left:6px;
    bottom:-5px;
    width:28px;
    height:24px;
    border-radius:50%;
    background:#fff6f0;
}
.agent-user-meta{
    display:flex;
    flex-direction:column;
    gap:3px;
}
.agent-user-name{
    font-size:15px;
    font-weight:900;
    color:#71452e;
}
.agent-user-role{
    font-size:11px;
    color:#a27d65;
    font-weight:700;
}
.agent-user-more{
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.56);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#a57e66;
    font-weight:900;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

/* content */
.agent-content{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
    min-width:0;
}
.agent-topbar{
    min-height:76px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,253,250,.62), rgba(255,248,241,.40));
    border:1px solid rgba(255,255,255,.46);
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    padding:14px 24px;
    gap:18px;
    box-shadow:var(--shadow-soft);
}
.agent-topbar-title h1{
    margin:0;
    font-size:20px;
    color:#5a341f;
    font-weight:900;
}
.agent-topbar-title p{
    margin:4px 0 0;
    font-size:12px;
    color:var(--muted);
    font-weight:700;
}
.agent-center-logo{
    font-size:20px;
    font-weight:900;
    color:#d67c46;
    letter-spacing:.8px;
    white-space:nowrap;
}
.agent-top-account{
    font-size:13px;
    color:#8b6550;
    font-weight:800;
    white-space:nowrap;
}
.agent-top-account a{
    color:#d26431;
    text-decoration:none;
    font-weight:900;
}

.agent-glass-card{
    border-radius:26px;
    background:var(--card-bg);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:var(--shadow);
    min-width:0;
    transition:transform .22s ease, box-shadow .22s ease;
}
.agent-glass-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-hover);
}
.agent-card-pad{
    padding:22px;
}
.agent-section-title{
    font-size:18px;
    font-weight:900;
    color:#68402a;
    margin-bottom:16px;
    letter-spacing:.2px;
}

.agent-welcome{
    min-height:104px;
    border-radius:24px;
    padding:20px 24px;
    background:linear-gradient(135deg, rgba(226,108,49,.96), rgba(242,137,76,.86));
    color:#fff;
    box-shadow:0 16px 34px rgba(226,108,49,.18);
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    overflow:hidden;
}
.agent-welcome::after{
    content:"";
    position:absolute;
    right:-40px;
    top:-30px;
    width:140px;
    height:140px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
}
.agent-welcome h2{
    margin:0 0 8px;
    font-size:18px;
    font-weight:900;
    position:relative;
    z-index:1;
}
.agent-welcome p{
    margin:0;
    font-size:12px;
    opacity:.96;
    line-height:1.75;
    position:relative;
    z-index:1;
}

/* grid */
.agent-grid-2{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:18px;
    min-width:0;
}
.agent-grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.agent-grid-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}
.agent-grid-5{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}

/* metrics */
.agent-metric,
.agent-metric-card{
    position:relative;
    overflow:hidden;
    min-height:104px;
    border-radius:22px;
    padding:16px 18px;
    color:#fff;
    box-shadow:0 14px 28px rgba(180,109,56,.10);
    transition:transform .22s ease, box-shadow .22s ease;
}
.agent-metric:hover,
.agent-metric-card:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 42px rgba(180,109,56,.16);
}
.agent-metric::before,
.agent-metric-card::before{
    content:"";
    position:absolute;
    right:-18px;
    top:-18px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
}
.agent-metric:nth-child(1),
.agent-metric-card:nth-child(1){background:linear-gradient(135deg,#f28a5b,#ef7a56)}
.agent-metric:nth-child(2),
.agent-metric-card:nth-child(2){background:linear-gradient(135deg,#f0ac3f,#e49c33)}
.agent-metric:nth-child(3),
.agent-metric-card:nth-child(3){background:linear-gradient(135deg,#ef6f8c,#ea5a7d)}
.agent-metric:nth-child(4),
.agent-metric-card:nth-child(4){background:linear-gradient(135deg,#38be73,#2eaf67)}
.agent-metric:nth-child(5),
.agent-metric-card:nth-child(5){background:linear-gradient(135deg,#4c81ef,#3d73ea)}
.agent-metric-label{
    position:relative;
    z-index:1;
    font-size:12px;
    font-weight:800;
    opacity:.95;
    margin-bottom:12px;
}
.agent-metric-value{
    position:relative;
    z-index:1;
    font-size:34px;
    line-height:1;
    font-weight:900;
    letter-spacing:-1px;
}

/* forms */
.agent-form-group{
    margin-bottom:14px;
}
.agent-label{
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px;
    font-weight:800;
}
.agent-input,
.agent-select,
.agent-textarea{
    width:100%;
    border:1px solid rgba(219,183,155,.42);
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,249,243,.84));
    color:var(--text);
    outline:none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        0 8px 18px rgba(183,120,76,.06);
    transition:all .18s ease;
}
.agent-input,
.agent-select{
    height:52px;
    border-radius:16px;
    padding:0 16px;
    font-size:14px;
    font-weight:700;
}
.agent-textarea{
    min-height:100px;
    border-radius:16px;
    padding:14px 16px;
    font-size:14px;
    font-weight:700;
    resize:vertical;
}
.agent-input::placeholder,
.agent-textarea::placeholder{
    color:#ba927b;
    font-weight:600;
}
.agent-input:focus,
.agent-select:focus,
.agent-textarea:focus{
    border-color:rgba(228,144,83,.86);
    box-shadow:
        0 0 0 4px rgba(235,138,67,.10),
        0 14px 28px rgba(185,114,60,.10);
    transform:translateY(-1px);
}

.agent-btn{
    position:relative;
    overflow:hidden;
    height:50px;
    border:none;
    border-radius:16px;
    padding:0 22px;
    background:linear-gradient(135deg,var(--orange),var(--orange2));
    color:#fff;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 12px 22px rgba(255,106,61,.16);
    transition:all .18s ease;
}
.agent-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 30px rgba(255,106,61,.20);
}
.agent-btn:active{
    transform:translateY(0);
}
.agent-btn.secondary{
    background:rgba(255,255,255,.88);
    color:var(--orange);
    border:1px solid rgba(255,200,170,.8);
    box-shadow:none;
}
.agent-btn.full{
    width:100%;
}
.btn-ripple{
    position:absolute;
    width:10px;
    height:10px;
    background:rgba(255,255,255,.65);
    border-radius:50%;
    transform:scale(0);
    animation:btnRipple .6s linear;
    pointer-events:none;
}
@keyframes btnRipple{
    to{
        transform:scale(20);
        opacity:0;
    }
}

.agent-inline-tools{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:14px;
}
.agent-mini-select{
    height:40px;
    border-radius:12px;
    border:1px solid rgba(219,183,155,.42);
    background:#fff;
    padding:0 12px;
    font-size:13px;
}
.agent-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:12px;
    background:#fff7f3;
    border:1px solid #f3ddd2;
    font-size:13px;
    color:#6b5148;
}

.agent-tip-box{
    background:#fff9f6;
    border:1px solid #f3ddd2;
    border-radius:22px;
    padding:18px;
    margin-bottom:14px;
    box-shadow:var(--shadow-soft);
}
.agent-tip-title{
    font-size:15px;
    font-weight:900;
    color:var(--orange);
    margin-bottom:8px;
}
.agent-tip-text{
    font-size:13px;
    color:#6b5148;
    line-height:1.9;
}

.agent-result-box{
    margin-top:14px;
    padding:16px;
    border-radius:18px;
    background:#fff8f4;
    border:1px solid #f3ddd2;
    display:none;
}
.agent-result-title{
    font-size:14px;
    font-weight:900;
    color:var(--orange);
    margin-bottom:8px;
}
.agent-result-text{
    font-size:14px;
    color:#5c463c;
    line-height:1.9;
}

/* tables */
.agent-table-wrap{
    overflow:auto;
    border-radius:20px;
    background:rgba(255,255,255,.34);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:var(--shadow-soft);
}
.agent-table{
    width:100%;
    min-width:680px;
    border-collapse:collapse;
}
.agent-table thead th{
    text-align:left;
    padding:13px 14px;
    font-size:12px;
    color:#8c6954;
    font-weight:900;
    background:rgba(255,248,241,.72);
    border-bottom:1px solid rgba(220,189,170,.35);
    white-space:nowrap;
}
.agent-table tbody td{
    padding:12px 14px;
    font-size:13px;
    color:#634330;
    border-bottom:1px solid rgba(233,209,194,.28);
    white-space:nowrap;
    vertical-align:middle;
}
.agent-table tbody tr{
    transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.agent-table tbody tr:hover{
    background:rgba(255,255,255,.20);
}
.agent-table tbody tr.row-new{
    animation:rowFlash 1.2s ease;
}
@keyframes rowFlash{
    0%{background:rgba(243,176,90,.26)}
    100%{background:transparent}
}

.agent-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:72px;
    height:34px;
    padding:0 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.2px;
}
.agent-status.success{
    color:#1f8f55;
    background:rgba(56,190,115,.12);
    border:1px solid rgba(56,190,115,.22);
}
.agent-status.fail{
    color:#df6544;
    background:rgba(239,122,86,.12);
    border:1px solid rgba(239,122,86,.22);
}
.agent-status.pending{
    color:#d48f1d;
    background:rgba(243,176,90,.14);
    border:1px solid rgba(243,176,90,.24);
}
.agent-status.live{
    position:relative;
}
.agent-status.live::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#d48f1d;
    margin-right:8px;
    box-shadow:0 0 0 0 rgba(212,143,29,.45);
    animation:livePulse 1.8s infinite;
}
@keyframes livePulse{
    0%{box-shadow:0 0 0 0 rgba(212,143,29,.45)}
    70%{box-shadow:0 0 0 10px rgba(212,143,29,0)}
    100%{box-shadow:0 0 0 0 rgba(212,143,29,0)}
}
.agent-money{
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

/* product cards */
.product-preview-card{
    transition:all .2s ease;
}
.product-preview-card:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.65);
    box-shadow:0 18px 32px rgba(183,120,76,.12);
}
.product-preview-card.active{
    border:1px solid rgba(235,138,67,.42) !important;
    box-shadow:0 14px 28px rgba(235,138,67,.14);
    background:linear-gradient(180deg, rgba(255,252,248,.92), rgba(255,246,238,.74));
}

/* skeleton */
.skeleton{
    position:relative;
    overflow:hidden;
    background:rgba(244,226,214,.75);
}
.skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    transform:translateX(-100%);
    animation:skeletonMove 1.15s linear infinite;
}
@keyframes skeletonMove{
    to{transform:translateX(100%)}
}

/* toast */
.toast-wrap{
    position:fixed;
    right:22px;
    top:22px;
    z-index:30;
    display:grid;
    gap:10px;
}
.toast-item{
    min-width:260px;
    max-width:360px;
    padding:14px 16px;
    border-radius:16px;
    color:#fff;
    font-size:13px;
    font-weight:900;
    box-shadow:0 18px 30px rgba(183,120,76,.18);
    animation:toastIn .28s ease, toastOut .28s ease 3.2s forwards;
}
.toast-item.ok{background:linear-gradient(135deg,#28b769,#49cc83)}
.toast-item.err{background:linear-gradient(135deg,#ec6f58,#f08c6d)}
.toast-item.info{background:linear-gradient(135deg,#4c81ef,#3d73ea)}
@keyframes toastIn{
    from{opacity:0;transform:translateY(-8px) translateX(10px)}
    to{opacity:1;transform:translateY(0) translateX(0)}
}
@keyframes toastOut{
    to{opacity:0;transform:translateY(-8px) translateX(10px)}
}

/* login */
.login-shell{
    position:relative;
    z-index:1;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.login-card{
    width:100%;
    max-width:520px;
    background:linear-gradient(180deg, rgba(255,252,248,.74), rgba(255,248,242,.48));
    border:1px solid rgba(255,255,255,.46);
    box-shadow:var(--shadow);
    border-radius:32px;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    padding:30px;
}
.login-brand{
    text-align:center;
    margin-bottom:22px;
}
.login-brand h1{
    margin:0;
    font-size:34px;
    font-weight:900;
    color:#d77943;
}
.login-brand p{
    margin:8px 0 0;
    color:var(--muted);
    font-size:14px;
}
.agent-msg{
    margin-bottom:14px;
    padding:14px 16px;
    border-radius:16px;
    font-size:14px;
    line-height:1.8;
    font-weight:800;
}
.agent-msg.ok{
    background:#ecfdf3;
    color:#166534;
    border:1px solid #bbf7d0;
}
.agent-msg.err{
    background:#fff1f2;
    color:#be123c;
    border:1px solid #fecdd3;
}

.web-kf{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:999px;
    background:linear-gradient(135deg,#ff6a3d,#ff9a62);
    color:#fff;
    text-decoration:none;
    font-weight:900;
    box-shadow:0 14px 30px rgba(255,106,61,.28);
    transition:all .18s ease;
}
.web-kf:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 34px rgba(255,106,61,.32);
}
.web-kf-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
}

/* generic helper animation */
.fade-up{
    opacity:0;
    transform:translateY(18px);
    animation:agentFadeUp .65s ease forwards;
}
.fade-up.delay-1{animation-delay:.06s}
.fade-up.delay-2{animation-delay:.12s}
.fade-up.delay-3{animation-delay:.18s}
.fade-up.delay-4{animation-delay:.24s}
.fade-up.delay-5{animation-delay:.30s}
@keyframes agentFadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* scrollbar */
::-webkit-scrollbar{
    width:8px;
    height:8px;
}
::-webkit-scrollbar-thumb{
    background:#f1a060;
    border-radius:10px;
}
::-webkit-scrollbar-track{
    background:transparent;
}

/* responsive */
@media (max-width:1400px){
    .agent-grid-5{grid-template-columns:repeat(3,1fr)}
    .agent-grid-2{grid-template-columns:1fr}
}
@media (max-width:1000px){
    .page-shell{padding:10px}
    .page-dashboard{
        width:calc(100vw - 20px);
        min-height:calc(100vh - 20px);
        grid-template-columns:1fr;
    }
    .agent-sidebar{display:none}
    .agent-topbar{grid-template-columns:1fr}
    .agent-grid-5,
    .agent-grid-4,
    .agent-grid-3,
    .agent-grid-2{grid-template-columns:1fr}
}