:root { --bg:#fff; --text:#111; --muted:#666; --border:#e5e5e5; --accent:#111; --radius:10px; }
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.topbar h1 { font-size:20px; margin:0; font-weight:600; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
button {
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--text);
  padding:8px 12px; border-radius:8px; cursor:pointer; transition:transform .06s ease, box-shadow .06s ease;
  touch-action: manipulation; /* Improve touch responsiveness */
}
button:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
main { padding:18px 20px; }
.controls { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin-bottom:14px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field input { padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.field.grow { flex:1; }
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; }
thead th { text-align:left; font-weight:600; font-size:14px; padding:10px; border-bottom:1px solid var(--border); }
tbody td { padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:hover { background:#fafafa; }
td.actions { text-align:right; white-space:nowrap; }
.badge { font-size:12px; color:#fff; background:#111; display:inline-block; padding:2px 8px; border-radius:999px; }
.badge.muted { background:#999; }
.badge.success { background:#0b7; }
.badge.warn { background:#e67e22; }
.statusbar { padding:10px 20px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
dialog { border:none; border-radius:12px; padding:0; width:420px; max-width:calc(100% - 20px); }
.dialog-form { padding:16px; display:flex; flex-direction:column; gap:12px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
@media (max-width: 720px) {
  .actions { gap:6px; }
  .controls { flex-direction:column; align-items:stretch; }
  .table-wrap { overflow-x: auto; }
  table { min-width: 600px; }
  tbody td, thead th { font-size: 14px; padding: 8px; }
  dialog { width: 90%; max-width: 360px; }
  .dialog-form { padding: 12px; }
  .dialog-actions button { padding: 6px 10px; }
}
@media (max-width: 500px) {
  table { display: block; }
  thead { display: none; }
  tbody tr { 
    display: flex; 
    flex-direction: column; 
    border-bottom: 1px solid var(--border); 
    padding: 10px; 
    margin-bottom: 10px; 
  }
  tbody td { 
    display: flex; 
    justify-content: space-between; 
    padding: 5px 0; 
    border: none; 
  }
  tbody td:before { 
    content: attr(data-label); 
    font-weight: 600; 
    margin-right: 10px; 
  }
  td.actions { text-align: left; }
}