:root{
    --ink:#0f172a;
    --muted:#64748b;
    --line:#e2e8f0;
    --surface:#fff;
    --canvas:#f5f7fb;
    --accent:#2563eb
}

*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--canvas)
}
.field{
    width:100%;
    border:1px solid var(--line);
    border-radius:.7rem;
    padding:.68rem .8rem;
    background:#fff;
    color:#0f172a;
    outline:none;
    transition:border-color .15s,box-shadow .15s,background .15s
}
.field:focus{
    border-color:#93c5fd;
    box-shadow:0 0 0 3px rgb(59 130 246/.10)
}
.card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:1rem;
    box-shadow:0 1px 2px rgb(15 23 42/.025),0 8px 24px rgb(15 23 42/.025)
}
.btn-primary{
    border-radius:.7rem;
    background:#0f172a;
    color:#fff;
    padding:.65rem .9rem;
    font-size:.875rem;
    font-weight:700;
    transition:.15s
}
.btn-primary:hover{
    background:#1e293b;
    transform:translateY(-1px)
}
.app-sidebar{
    width:264px;
    background:#fff;
    border-right:1px solid var(--line)
}
.nav-section{
    padding:1rem .75rem
}
.nav-caption{
    padding:.45rem .7rem;
    color:#94a3b8;
    font-size:.68rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em
}
.nav-item{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.65rem .7rem;
    border-radius:.7rem;
    font-size:.875rem;
    font-weight:600;
    color:#64748b;
    transition:.15s
}
.nav-item:hover{
    background:#f8fafc;
    color:#0f172a
}
.nav-item.active{
    background:#0f172a;
    color:#fff;
    box-shadow:0 4px 12px rgb(15 23 42/.12)
}
.nav-icon{
    width:18px;
    height:18px;
    opacity:.85;
    flex:none
}
.sidebar-footer{
    margin-top:auto;
    padding:.75rem;
    border-top:1px solid var(--line)
}
.topbar{
    background:rgb(245 247 251/.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line)
}
.page-wrap{
    max-width:1680px;
    margin:0 auto
}
.mobile-nav{
    display:none
}
.mobile-menu-backdrop{
    display:none
}
.mobile-menu-backdrop.open{
    display:block
}
.mobile-menu-panel{
    transform:translateY(110%);
    transition:transform .22s ease;
    /* display: none; */
}
.mobile-menu-panel.open{
    transform:translateY(0)
}
.mobile-menu-link{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.8rem .85rem;
    border-radius:.85rem;
    font-size:.9rem;
    font-weight:700;
    color:#475569
}
.mobile-menu-link:hover,.mobile-menu-link.active{
    background:#f1f5f9;
    color:#0f172a
}
.mobile-menu-caption{
    padding:.3rem .85rem;
    color:#94a3b8;
    font-size:.68rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em
}
.table-wrap table thead th{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.045em;
    color:#64748b;
    font-weight:800
}
.table-wrap table tbody tr{
    transition:background .12s
}
.table-wrap table tbody tr:hover{
    background:#f8fafc
}
.table-wrap table td,.table-wrap table th{
    white-space:nowrap
}
@media(max-width:1023px){
    
    .desktop-sidebar{
        display:none
        
    }
    .mobile-nav{display:flex}
    .main-content{padding-left:0!important}
    .page-wrap{max-width:none}
    .mobile-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:40;
        background:rgb(255 255 255/.96);

        backdrop-filter:blur(14px);
        border-top:1px solid var(--line);
        padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
        justify-content:space-around
    }
    .mobile-nav a,.mobile-nav button{
        font:inherit;
        font-size:.65rem;
        font-weight:700;
        color:#64748b;
        text-align:center;
        padding:.35rem .45rem;
        border-radius:.65rem;
        background:transparent;
        border:0
    }
    .mobile-nav a.active,.mobile-nav button.active{
        background:#0f172a;
        color:#fff
    }
    .mobile-nav svg{
        display:block;
        margin:0 auto .15rem;
        width:17px;
        height:17px
    }
    .mobile-menu-backdrop{
        position:fixed;
        inset:0;
        z-index:50;
        background:rgb(15 23 42/.38);
        backdrop-filter:blur(2px)
    }
    .mobile-menu-panel{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:51;
        background:#fff;
        border-radius:1.25rem 1.25rem 0 0;
        box-shadow:0 -12px 40px rgb(15 23 42/.18);
        padding:1rem .75rem calc(1rem + env(safe-area-inset-bottom));
        max-height:82vh;overflow:auto
    }
    .mobile-menu-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:.35rem
    }
    .content-area{
        padding-bottom:5rem!important
    }
}
@media print{
    .no-print{
        display:none!important
    }
    body{
        background:#fff
    }
    .print-card{border:0;box-shadow:none}
}