:root {
  --accent:#2563eb;   /* brand blue */
  --ink:#1e293b;      /* slate (not black) */
  --card:#ffffff;
  --muted:#64748b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;
  background:#f1f5f9;
  color:var(--ink);
}
.wrap{max-width:1100px;margin:16px auto;padding:0 12px}
.card{
  background:var(--card);
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:16px;
  box-shadow:0 4px 16px rgba(15,23,42,.06);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;
  padding:10px 14px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;transition:.2s;
}
.btn:hover{background:#1e4ed8}
.btn.accent{background:var(--accent);color:#fff}
.btn.block{width:100%}
.btn.secondary{background:#e2e8f0;color:var(--ink)}

/* Inputs */
.input,.select,.textarea{
  width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;
}
.input:focus,.select:focus,.textarea:focus{outline:2px solid rgba(37,99,235,.25)}
.label{font-size:.9rem;color:#334155;margin-bottom:6px;display:block}

/* Layout */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(90deg,#2563eb,#1e40af);
  color:#fff;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar .mono{color:#fff}

/* Topnav chips */
.topnav{
  display:flex;gap:8px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;width:100%;
}
.topnav::-webkit-scrollbar{display:none}
.chip{
  scroll-snap-align:center;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-size:.9rem;color:#0f172a;background:#e2e8f0;border:1px solid #cbd5e1;text-decoration:none;white-space:nowrap;
}
.chip:hover{background:#dbeafe;border-color:#bfdbfe}

/* KPIs */
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .val{font-size:1.6rem;font-weight:800}

/* Alerts */
.alert{padding:10px 12px;border-radius:10px;background:#eff6ff;border:1px solid #bfdbfe}
.success{background:#ecfdf5;border-color:#a7f3d0}

.mono{font-family:ui-monospace, Menlo, Monaco, Consolas,"Courier New", monospace;}
.link{color:#2563eb;text-decoration:none}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #e2e8f0;text-align:left}
.table th{font-size:.9rem;color:#475569}

/* Dashboard header */
.header{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid #e2e8f0;background:#fff}
.badge{
  display:inline-block;padding:4px 10px;border-radius:999px;font-size:.8rem;border:1px solid #e2e8f0;
}
.badge.lock{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.badge.open{background:#fef2f2;color:#b91c1c;border-color:#fecaca}

/* Menu cards */
.menuCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.menuCard{
  border:1px solid #e2e8f0;border-radius:12px;padding:14px;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.muted{color:var(--muted)}

/* Horizontal slider (mobile swipe) */
.slider{
  display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px;
}
.slider>.card{scroll-snap-align:center}
@media(min-width:760px){
  .slider{grid-auto-columns:unset;grid-template-columns:repeat(3,1fr);overflow:visible}
}

/* Mobile adjustments */
@media (max-width: 820px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .menuCards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .wrap{margin:10px auto;padding:0 10px}
  .header{flex-direction:column;align-items:flex-start}
  .grid-3{grid-template-columns:1fr}
  .menuCards{grid-template-columns:1fr}
  .btn{width:100%}
  .table th,.table td{padding:8px}
}