:root { --gap: 12px; --radius: 12px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#f6f7f9; color:#111; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#fff; border-bottom:1px solid #e6e6e6; position:sticky; top:0; }
.brand a { font-weight:700; text-decoration:none; color:#111;}
.nav a { margin-left:12px; text-decoration:none; color:#111; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }

.card { background:#fff; border:1px solid #e6e6e6; border-radius: var(--radius); padding:16px; }
.row { display:flex; gap: var(--gap); flex-wrap: wrap; }
.row > * { flex: 1; min-width: 220px; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius: 10px; border:1px solid #ddd; background:#fff; cursor:pointer; text-decoration:none; color:#111; }
.btn.primary { background:#111; color:#fff; border-color:#111; }
.btn.danger { border-color:#f0b4b4; background:#fff5f5; }
.btn:disabled { opacity:.6; cursor:not-allowed; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px; border-bottom:1px solid #eee; text-align:left; vertical-align: top; }
.badge { display:inline-block; padding:3px 8px; border-radius: 999px; border:1px solid #ddd; font-size: 12px; }

.tools { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.input { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; }

@media (max-width: 700px) {
  .table thead { display:none; }
  .table tr { display:block; background:#fff; border:1px solid #eee; border-radius: var(--radius); margin-bottom:12px; padding:10px; }
  .table td { display:flex; justify-content:space-between; border:none; padding:6px 0; }
  .table td::before { content: attr(data-label); color:#666; margin-right:10px; }
}

.modal.hidden { display:none; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal__card { width:min(520px, 100%); background:#fff; border-radius: 16px; padding:16px; border:1px solid #eee; }