:root{
  --bg:#f8fafc; /* slate-50 */
  --card:#ffffff; /* white */
  --muted:#6b7280; /* gray-500 */
  --text:#111827; /* gray-900 */
  --primary:#2563eb; /* blue-600 */
  --primary-600:#1d4ed8;
  --danger:#dc2626; /* red-600 */
  --success:#16a34a; /* green-600 */
  --warning:#d97706; /* amber-600 */
  --table-border:#e5e7eb; /* gray-200 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}

.container{max-width:1600px;margin:32px auto;padding:0 20px}
.card{background:var(--card);border:1px solid var(--table-border);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:20px}

.nav{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;border:1px solid transparent;transition:.2s}
.nav a:hover{color:var(--text);border-color:var(--table-border);background:#f3f4f6}
.title{display:flex;align-items:center;gap:10px;margin:4px 0 14px 0}
.title h2{font-size:20px;margin:0}
.title .hint{color:var(--muted);font-size:12px}

.input, textarea, input[type=text]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--table-border);background:#fff;color:var(--text)}
textarea{min-height:120px}

.btn{appearance:none;border:0;cursor:pointer;border-radius:10px;padding:9px 14px;background:var(--primary);color:white;transition:.2s}
.btn:hover{background:var(--primary-600)}
.btn.danger{background:var(--danger)}
.btn.success{background:var(--success)}
.btn.ghost{background:transparent;border:1px solid var(--table-border);color:var(--text)}

.toolbar{display:flex;gap:8px;align-items:center;margin-top:12px}
.switch{display:inline-flex;gap:8px;align-items:center}

table{border-collapse:collapse;width:100%;margin-top:12px;border:1px solid var(--table-border);overflow:hidden;border-radius:12px;background:#fff}
th,td{border-top:1px solid var(--table-border);padding:10px 12px}
thead th{background:#f9fafb;color:#374151;text-align:left}
tbody tr:nth-child(odd){background:#fff}
tbody tr:nth-child(even){background:#fafafa}
tbody tr:hover{background:#eef2ff}

.status-done{color:var(--success)}
.status-failed{color:var(--danger)}
.status-pending{color:var(--muted)}

.note{color:var(--muted);font-size:12px}

/* subtle grid bg */
/* inline svg referenced above */