:root { color-scheme: light dark; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; }
.wrap { max-width: 980px; margin: 0 auto; padding: 18px; display: grid; gap: 14px; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
h1 { margin: 0; font-size: 20px; }
.sub { opacity: .75; font-size: 13px; }
.card { border: 1px solid rgba(127,127,127,.35); border-radius: 14px; padding: 14px; background: rgba(127,127,127,.06); }
.row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
label { display: grid; gap: 6px; font-size: 13px; opacity: .9; }
input, button, select, textarea {
  font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(127,127,127,.45); background: transparent;
}
button { cursor: pointer; }
button.primary { border-color: rgba(127,127,127,.65); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { padding: 12px; border-radius: 12px; border: 1px solid rgba(127,127,127,.35); background: rgba(127,127,127,.04); }
.stat .k { font-size: 12px; opacity: .7; margin-bottom: 6px; }
.stat .v { font-size: 18px; font-weight: 650; }
.grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
@media (max-width: 920px) { .grid { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr 1fr; } }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 8px; border-bottom: 1px solid rgba(127,127,127,.25); text-align: left; }
th { font-size: 12px; opacity: .7; }
.muted { opacity: .7; }
.pill { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(127,127,127,.35); font-size: 12px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; }
.actions button { padding: 8px 10px; }
.tiny { font-size: 12px; opacity: .75; }
.io { display: grid; gap: 10px; }
textarea { min-height: 90px; resize: vertical; }
.danger { border-color: rgba(220,80,80,.55); }