:root {
  --bg: #0f172a;
  --panel: #111827;
  --line: #243044;
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #c59b5d;
  --danger: #dc2626;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  background: #f8fafc;
  color: #111827;
}
button, input, select { font: inherit; }
.wrap { max-width: 1180px; margin: auto; padding: 24px; }
.topbar {
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  margin-bottom:18px;
}
.card {
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:18px; box-shadow:0 8px 30px rgba(15,23,42,.06);
  margin-bottom:18px;
}
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
input, select {
  width:100%; padding:11px 12px; border:1px solid #d1d5db; border-radius:10px;
  background:white;
}
button {
  border:0; border-radius:10px; padding:10px 14px; cursor:pointer;
  background:var(--bg); color:white;
}
button.secondary { background:#475569; }
button.danger { background:var(--danger); }
button.accent { background:var(--accent); color:#111827; }
small, .muted { color:#64748b; }
.hidden { display:none !important; }
.table { width:100%; border-collapse:collapse; }
.table th,.table td { padding:10px; border-bottom:1px solid #e5e7eb; text-align:right; vertical-align:middle; }
.thumb { width:120px; height:68px; object-fit:cover; border-radius:8px; background:#e5e7eb; }
.actions { display:flex; flex-wrap:wrap; gap:6px; }
.login {
  max-width:420px; margin:10vh auto; background:white; border-radius:16px; padding:24px;
  box-shadow:0 15px 50px rgba(0,0,0,.12);
}
code { direction:ltr; display:inline-block; }