:root {
  --bg: #f7fafc;
  --card: #ffffff;
  --text: #1a202c;
  --muted: #718096;
  --border: #e2e8f0;
  --blue: #2563eb;
}
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}
.container { max-width: 1100px; margin: 40px auto; padding: 0 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 20px rgb(0 0 0 / 5%); padding: 20px; }
h1 { margin: 0 0 16px; font-size: 24px; }

.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 13px; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: #fafbfc; position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: #f9fafb; }

.btn { appearance: none; border: 1px solid transparent; cursor: pointer; padding: 8px 10px; font-size: 13px; border-radius: 10px; background: #f3f4f6; color: #111827; transition: transform .02s ease-in-out, box-shadow .15s; text-decoration: none; display: inline-block; }
.btn.ghost { background: transparent; border-color: var(--border); }

.actions { white-space: nowrap; }