/* Header */
.header {
  position: sticky; top:0; z-index: 100;
  height: var(--header-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px; gap:20px;
}
.header-left { display:flex; align-items:center; gap:16px; }
.logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.15rem; }
.logo-icon { font-size:1.4rem; }
.logo-badge { background: var(--primary); color:white; font-size:0.55rem; padding:2px 6px; border-radius:var(--radius-pill); letter-spacing:0.06em; }
.header-center { flex:1; max-width:560px; }
.header-right { display:flex; align-items:center; gap:12px; }

.app-body { display:flex; min-height: calc(100vh - var(--header-h)); }

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display:flex; flex-direction:column; gap:24px;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y:auto;
}
.sidebar-nav { display:flex; flex-direction:column; gap:4px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); color:var(--text-2); font-weight:500; transition: var(--transition); }
.nav-item:hover { background: var(--bg-3); color: var(--text); text-decoration:none; }
.nav-item.active { background: var(--primary); color:white; }
.sidebar-title { font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); font-weight:600; margin-bottom:8px; }
.recent-list { display:flex; flex-direction:column; gap:8px; }
.recent-item { font-size:0.85rem; padding:8px 10px; border-radius:var(--radius-sm); background: var(--bg-3); cursor:pointer; transition: var(--transition); }
.recent-item:hover { background: var(--border); }
.quota-widget { background: var(--bg-3); padding:12px; border-radius:var(--radius-md); }
.quota-bar { height:6px; background: var(--border); border-radius:var(--radius-pill); overflow:hidden; margin-bottom:6px; }
.quota-fill { height:100%; background: var(--primary); transition: width 0.5s; }
.quota-text { font-size:0.8rem; color:var(--text-2); }
.sidebar-footer { margin-top:auto; }
.disclaimer { font-size:0.7rem; color:var(--text-3); line-height:1.3; }

/* Main */
.main { flex:1; padding:24px; max-width: calc(100vw - var(--sidebar-w) - var(--rail-w)); }
.right-rail {
  width: var(--rail-w);
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  padding:20px 16px;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y:auto;
}

/* Responsive */
@media (max-width: 1200px) {
  .right-rail { display:none; }
  .main { max-width: calc(100vw - var(--sidebar-w)); }
}
@media (max-width: 768px) {
  .sidebar { display:none; }
  .main { max-width:100vw; padding:16px; }
  .header-center { display:none; }
}

/* Grid */
.dashboard-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:24px; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .dashboard-grid { grid-template-columns: 1fr; } }

.products-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.products-table { width:100%; border-collapse:collapse; background:var(--bg-2); border-radius:var(--radius-md); overflow:hidden; }