:root{
  --bg:#0b1220; --card:#0f172a; --muted:#94a3b8; --text:#e5e7eb;
  --primary:#0ea5e9; --danger:#f43f5e; --ring:rgba(14,165,233,0.4);
  --shadow: rgba(0,0,0,0.35); --radius:16px;
}
*{box-sizing:border-box} html, body{height:100%}
body{
  margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;
  background: radial-gradient(1200px 600px at 20% -10%, #0b2638 0%, #0b1220 55%);
  color:var(--text)
}
.wrap{ max-width:1100px; margin:0 auto; padding:16px }
.topbar{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(15,23,42,0.9), rgba(15,23,42,0.6));
  border-bottom:1px solid rgba(148,163,184,0.15)
}
.brand{ font-weight:800 }
.nav{ display:flex; gap:8px; align-items:center; justify-content:flex-end }

button,.btn{
  appearance:none; border:1px solid rgba(148,163,184,0.2);
  background: rgba(14,165,233,0.12); color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer;
  font-weight:600; font-size:14px; transition: transform .04s ease, background .2s ease, border-color .2s ease;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center
}
button:hover{ transform: translateY(-1px); border-color: rgba(148,163,184,0.36) }
button.primary{ background: #0ea5e9; border-color: #0ea5e9; color:#fff }
button.primary:hover{ background:#0284c7; border-color:#0284c7 }
button.danger{ background: #ef4444; border-color:#ef4444; color:#fff }
button.danger:hover{ background:#dc2626; border-color:#dc2626 }
button.ghost{ background: transparent }

input, select{
  width:100%; background: rgba(2,6,23,0.55); color:var(--text);
  border:1px solid rgba(148,163,184,0.2); border-radius:12px; padding:10px 12px; outline:none
}
input:focus, select:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring) }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border:1px solid rgba(148,163,184,0.15); border-radius:var(--radius);
  box-shadow: 0 10px 30px var(--shadow)
}
.toolbar{ display:grid; grid-template-columns: 1fr; gap:10px; margin:12px 0 }
@media(min-width: 820px){ .toolbar{ grid-template-columns: 1fr auto } }

.table{ overflow:auto; border-radius:var(--radius) }
table{ width:100%; border-collapse:collapse }
th,td{ padding:12px 10px; border-bottom:1px solid rgba(148,163,184,0.12) }
th{ text-align:left; color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em }
tbody tr:hover{ background: rgba(255,255,255,0.02) }

.qty{ font-variant-numeric: tabular-nums }
.value{ font-variant-numeric: tabular-nums; color:#e2e8f0; font-weight:600 }
.muted{ color:var(--muted) }
.footer{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:12px 16px; color: var(--muted); font-size:14px }
.grid{ display:grid; grid-template-columns:1fr; gap:12px }
@media(min-width:700px){ .grid{ grid-template-columns: repeat(3,1fr) } }
.toast{
  position: fixed; right:16px; bottom:16px; z-index:99;
  background: rgba(15,23,42,0.9); border:1px solid rgba(148,163,184,0.3);
  color:var(--text); padding:12px 14px; border-radius:12px; box-shadow: 0 10px 30px var(--shadow);
  transform: translateY(20px); opacity:0; transition:.25s ease
}
.toast.show{ transform: translateY(0); opacity:1 }

/* Dialogs */
dialog { border: none; border-radius: 16px; padding: 0; background: var(--card); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
dialog::backdrop { background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); }
dialog form menu { display: flex; gap: 12px; justify-content: flex-end; }
dialog form button { min-width: 100px; font-weight: 700; }

/* Filter row sizing */
.toolbar .grid select,
.toolbar .grid input { height: 40px; }
#admin-db-tools { display: none !important; }