:root {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --accent: #2563eb;
  --danger: #dc2626;
  --warn: #d97706;
  --border: #e5e7eb;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.page { max-width: 1200px; margin: 0 auto; padding: 24px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.muted { color: var(--muted); margin: 4px 0; }
.actions button { margin-left:8px; }
button {
  background:#eef2ff; color:var(--text); border:1px solid #d1d5db; border-radius:8px;
  padding:10px 14px; cursor:pointer; transition:all .15s ease; font-weight:600;
}
button.primary { background:#2563eb; border-color:#2563eb; color:white; }
button.secondary { background:#e5e7eb; color:#111827; border-color:#d1d5db; }
button.success { background: var(--accent); border-color: var(--accent); color:#f8fafc; }
button.danger { background: var(--danger); border-color: var(--danger); color:#f8fafc; }
button:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }

.panel { background: var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:16px; box-shadow:0 10px 30px rgba(15,23,42,0.08); }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.card-list { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; }
.card h3 { margin:0 0 4px; }
.tag { display:inline-block; padding:4px 10px; border-radius:12px; background:#f3f4f6; color:var(--muted); border:1px solid var(--border); }
.tag.open { color: var(--accent); border-color: var(--accent); }
.tag.closed { color: var(--danger); border-color: var(--danger); }

.form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.form-row input { padding:10px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); }
.hint { color: var(--muted); font-size: 13px; margin-top:0; }

.table-scroll { overflow:auto; border:1px solid var(--border); border-radius:10px; }
table { width:100%; border-collapse:collapse; color:var(--text); }
th, td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }
th { background:#f3f4f6; position:sticky; top:0; }

.callout { padding:12px; border-radius:10px; margin:10px 0; }
.callout.warning { background: #fff7ed; border:1px solid var(--warn); color: #b45309; }
.callout.danger { background: #fef2f2; border:1px solid var(--danger); color: #b91c1c; }

.action-stack { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.toast-container { position:fixed; bottom:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:1000; }
.toast { padding:10px 14px; border-radius:10px; background:#ffffff; border:1px solid #d1d5db; min-width:240px; box-shadow:0 12px 30px rgba(0,0,0,0.12); }
.toast.success { border-color: var(--accent); }
.toast.error { border-color: var(--danger); }
.empty { color: var(--muted); }

@media (max-width: 720px) {
  .topbar { flex-direction:column; align-items:flex-start; }
  .action-stack { justify-content:flex-start; }
}