:root{--sidebar-w:280px}
body{background:#f5f7fb;overflow-x:hidden}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:var(--sidebar-w);background:#0b1220;color:#cbd5e1;position:fixed;left:0;top:0;bottom:0;overflow-y:auto}
.sidebar a{color:#cbd5e1;text-decoration:none}
.sidebar .nav-link{border-radius:10px;padding:.55rem .75rem}
.sidebar .nav-link.active,.sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.main{flex:1;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid rgba(15,23,42,.08)}
.content{padding:1rem}
.card{border:0;box-shadow:0 8px 24px rgba(15,23,42,.06);border-radius:14px}
.chart-frame{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.table thead th{color:#475569;font-weight:600}
.footer{padding:1rem;color:#64748b}
.listing-cards{display:grid;gap:.75rem}
.listing-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:.85rem;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.listing-card .title{font-weight:700;color:#0f172a}
.listing-card .meta{color:#64748b;font-size:.875rem}
.kv{display:flex;justify-content:space-between;gap:.75rem}
.kv .k{color:#64748b;font-size:.875rem}
.kv .v{color:#0f172a;font-weight:600;text-align:right;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv-inline{justify-content:flex-start;gap:.4rem}
.kv-inline .v{max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;text-align:left}
.prod-head .title{word-break:break-word}
.prod-total{flex:0 0 auto;white-space:nowrap}
.listing-actions{display:flex;justify-content:flex-end;gap:.5rem}
.listing-actions .btn{white-space:nowrap}
.table-responsive{overflow-x:auto}
.no-xscroll{overflow-x:hidden}
.mobile-menu{background:#0b1220;color:#cbd5e1}
.mobile-menu .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu .nav-link{color:#cbd5e1;text-decoration:none;border-radius:10px;padding:.55rem .75rem}
.mobile-menu .nav-link:hover,.mobile-menu .nav-link.active{background:rgba(255,255,255,.08);color:#fff}
.mobile-menu .nav-link i{width:1.25rem;text-align:center}
@media (min-width: 992px){
  .main{margin-left:var(--sidebar-w)}
}