*{box-sizing:border-box}body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;padding:16px;background:#f8fafc;color:#0f172a}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
h1{font-size:18px;margin:0}h2{font-size:16px;margin:0 0 8px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input,select,button{padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;font:inherit}
button{cursor:pointer;background:#0ea5e9;color:#fff;border-color:#0ea5e9}
button:hover{filter:brightness(.95)}
.tablewrap{overflow:auto;max-height:50vh;border:1px solid #e5e7eb;border-radius:8px}
table{border-collapse:collapse;width:100%}
th,td{font-size:14px;text-align:left;padding:8px;border-bottom:1px solid #f1f5f9;white-space:nowrap}
thead th{position:sticky;top:0;background:#f1f5f9;z-index:1}
.badge{padding:4px 8px;border-radius:999px;background:#fee2e2;color:#991b1b}
.badge.on{background:#dcfce7;color:#065f46}
.muted{opacity:.7}
.env code{background:#eef2ff;padding:2px 6px;border-radius:6px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}