*{box-sizing:border-box}
body{font-family:Arial,system-ui;background:#f4f7fb;margin:0;padding:18px;color:#222}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
h1{margin:0}
.btn{display:inline-block;background:#2e7d32;color:#fff;padding:8px 12px;border-radius:8px;text-decoration:none;border:none;cursor:pointer}
.btn.danger{background:#c0392b}
.grid{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.grid th,.grid td{border:1px solid #e6e6e6;padding:8px;text-align:center}
.grid th{background:#4CAF50;color:#fff}
.grid.small th,.grid.small td{padding:6px}
input[type="number"],input[type="text"],select{width:100%;padding:6px;border:1px solid #dcdcdc;border-radius:8px}
td.dot{position:relative;height:38px}
td.dot::after{content:"";display:inline-block;width:16px;height:16px;border-radius:50%;background:#c8c8c8}
td.dot.red::after{background:#e74c3c}
td.dot.green::after{background:#2ecc71}
td.dot.yellow::after{background:#f1c40f}