*{box-sizing:border-box}
body{margin:0;background:#f6f7f9;color:#111827;font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
h1{font-size:18px;margin:0}
a{color:var(--accent)}
.muted{color:#6b7280;font-size:12px}
.warn{color:#b45309;font-weight:600}
.error{color:#b91c1c}
button{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:7px 14px;font:inherit;cursor:pointer}
button.plain{background:none;color:#374151;border:1px solid #d1d5db}
input,select{font:inherit;padding:6px 8px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:inherit;max-width:100%}
.login{max-width:340px;margin:12vh auto;background:#fff;padding:24px;border-radius:10px;border:1px solid #e5e7eb}
.login form{display:grid;gap:12px;margin-top:16px}
.login label{display:grid;gap:4px}
.top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;padding:10px 16px;border-bottom:1px solid #e5e7eb}
.top form{margin-left:auto}
main{padding:12px 16px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.table{background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-weight:600;color:#374151;background:#f9fafb;white-space:nowrap}
th,td{padding:6px 10px;border-bottom:1px solid #eef0f3;vertical-align:top}
tr:last-child td{border-bottom:0}
td input[data-field=note]{width:100%;min-width:150px}
.saved{outline:2px solid #16a34a}
.failed{outline:2px solid #dc2626}
.times{background:#eef2ff;color:var(--accent);border-radius:9px;padding:0 7px;font-size:12px;white-space:nowrap}
.empty{text-align:center;color:#6b7280;padding:28px}
.events{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;min-width:240px}
summary{cursor:pointer;color:var(--accent)}
.add{margin-top:14px}
.add form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
@media (max-width:760px){
  .table{background:none;border:0}
  thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tr{background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px;padding:6px 0}
  td{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;border:0;padding:4px 12px;overflow-wrap:anywhere}
  td::before{content:attr(data-label);color:#6b7280;font-size:12px}
  td:has(> div:empty){display:none}
  td.empty{display:block}
  td.empty::before{content:none}
}