:root{
  --bg:#f5f6fb;--panel:#fff;--text:#0f172a;--muted:#94a3b8;
  --primary:#6d28d9;--success:#16a34a;--danger:#ef4444;--blue:#2563eb;
  --teal:#14b8a6;--amber:#f59e0b;--shadow:0 8px 24px rgba(15,23,42,.06);
  --radius:16px;
}
.accent-dashboard{--primary:#6d28d9;}
.accent-orders{--primary:#2563eb;}
.accent-products{--primary:#14b8a6;}
.accent-analytics{--primary:#f59e0b;}
.accent-messages{--primary:#10b981;}

*{box-sizing:border-box}
body{
  margin:0;
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  color:var(--text); background:var(--bg);
}
a{color:inherit; text-decoration:none}

/* ---------- LAYOUT: fixed sidebar ---------- */
.app{ display:block; min-height:100vh; }
.sidebar{
  position:fixed; left:0; top:0; z-index:1000;
  width:280px; height:100dvh; height:100vh; overflow-y:auto;
  background:var(--panel); padding:20px; box-shadow:var(--shadow);
}
.main{ margin-left:280px; padding:20px; min-height:100vh; }
.topbar{
  position:sticky; top:0; z-index:500;
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; background:var(--panel);
  border-bottom:1px solid #eef2f7; padding:10px 0;
}

/* ---------- SIDEBAR CONTENT ---------- */
.brand{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.logo{width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:700}
.brand-name{font-weight:700; letter-spacing:.3px}

.menu{display:flex; flex-direction:column; gap:8px}
.menu-section{margin-top:10px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px}
.menu-item{padding:12px 14px; border-radius:12px; color:#111827}
.menu-item.active{background:rgba(109,40,217,.12); color:var(--primary); font-weight:600; box-shadow:inset 0 0 0 1px rgba(109,40,217,.25)}
.menu-item.muted{color:var(--muted)}
.menu-item.danger{color:#ef4444}

/* ---------- TOPBAR / SEARCH ---------- */
.search{
  display:flex; gap:6px; background:var(--panel); border-radius:999px;
  padding:6px 10px; width:100%; max-width:420px; box-shadow:var(--shadow);
}
.search input{ border:0; outline:0; flex:1; background:transparent; padding:6px }
.search button{ border:0; background:#eef2ff; padding:8px 10px; border-radius:999px }
.actions{ display:flex; align-items:center; gap:16px }
.actions .balance strong{ color:var(--primary) }

/* ---------- CONTENT ---------- */
.content{ display:grid; gap:18px }

/* Cards never squish: they wrap automatically */
.cards{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card{ background:var(--panel); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow) }
.card .title{ font-size:12px; color:var(--muted); display:flex; justify-content:space-between; align-items:center }
.card .value{ font-size:28px; font-weight:800; margin-top:6px }
.badge-up{ color:var(--success); font-size:12px }
.badge-down{ color:var(--danger); font-size:12px }

/* Two-column panels */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.panel{ background:var(--panel); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow) }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; font-weight:600; border:0; cursor:pointer }
.btn-primary{ background:linear-gradient(180deg,#34d399,#10b981); color:#fff; box-shadow:0 8px 20px rgba(16,185,129,.35) }
.btn-outline{ background:#eef2ff; color:#3730a3 }
.btn-danger{ background:#fee2e2; color:#b91c1c }

/* Tables */
.table{ width:100%; border-collapse:collapse; font-size:14px }
.table th,.table td{ padding:10px 8px; border-bottom:1px solid #eef2f7 }
.table th{ text-align:left; color:#64748b; font-size:12px; text-transform:uppercase; letter-spacing:.5px }

/* Thumbnail grid never squishes */
.grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.thumb{ border-radius:12px; border:1px solid #eef2f7; overflow:hidden; background:#f8fafc }
.thumb img{ width:100%; height:140px; object-fit:cover; display:block }
.thumb .meta{ padding:8px; font-size:12px; color:#475569 }

/* Forms */
.flash{ background:#ecfeff; border:1px solid #a7f3d0; color:#065f46; padding:10px 12px; border-radius:10px }
.form{ display:grid; gap:10px }
.input,.select,.file{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff }
label{ font-size:12px; color:#64748b }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.form-actions{ display:flex; gap:10px; justify-content:flex-end }
.footer-note{ font-size:12px; color:#94a3b8 }
.auth-card{ max-width:420px; margin:60px auto; padding:22px; background:var(--panel); border-radius:18px; box-shadow:var(--shadow) }
.auth-title{ font-size:22px; font-weight:800; margin-bottom:6px }
.center{text-align:center}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .sidebar{
    width:78vw; transform:translateX(-100%); transition:transform .25s ease;
  }
  body.sidebar-open .sidebar{ transform:translateX(0); }
  .main{ margin-left:0; }
  .two-col{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .search{ max-width:100%; }
  .form-row{ grid-template-columns:1fr; }
}