:root{--navy:#1A2E4A;--month:#2C3E50;--bg:#f6f5f1;--ink:#1d2430;--mute:#6b7280}
*{box-sizing:border-box}
body{margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}
header{background:var(--navy);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:5}
h1{margin:0 0 8px;font-size:20px}
.bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chk{font-size:13px;display:flex;gap:4px;align-items:center}
button{font:inherit;padding:7px 14px;border:0;border-radius:6px;background:#2A78D6;color:#fff;cursor:pointer}
button.quiet{background:transparent;color:inherit;border:1px solid currentColor;opacity:.8}
button.danger{background:#E74C3C}
#legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12px}
#legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;background:var(--c)}
#list{max-width:900px;margin:0 auto;padding:0 8px 40px}
h2.month{background:var(--month);color:#fff;margin:16px 0 0;padding:6px 12px;font-size:15px;border-radius:6px 6px 0 0}
.ev{display:flex;gap:10px;padding:8px 12px;background:#fff;border-left:6px solid var(--c);border-bottom:1px solid #e5e3dc;cursor:pointer}
.ev:hover{background:#faf9f6}
.ev .d{min-width:104px;font-weight:600;font-size:13px}
.ev .n{font-weight:600}
.ev .s{display:inline-block;font-size:11px;padding:1px 7px;border-radius:9px;background:var(--c);color:#fff;margin-left:6px;vertical-align:1px}
.ev .t{color:var(--mute);font-size:13px}
.ev.free{background:#f0efe9;border-left-color:#d8d6cc;cursor:default;color:var(--mute);font-size:13px}
.ev.potential{background:#fbfaf7}
.ev.past{opacity:.55}
.ev.today{outline:2px solid #1A6E9F}
#login{display:grid;place-items:center;min-height:100vh}
#login-form{background:#fff;padding:24px;border-radius:10px;width:min(340px,92vw);display:grid;gap:10px}
input,select,textarea{font:inherit;padding:7px;border:1px solid #c9c7be;border-radius:6px;width:100%}
label{display:grid;gap:3px;font-size:13px}
.chk input{width:auto}
.error{color:#c0392b;min-height:1em;margin:4px 12px;font-size:13px}
dialog{border:0;border-radius:10px;padding:18px;width:min(460px,94vw)}
dialog::backdrop{background:#0006}
#event-form{display:grid;gap:10px}
#event-form h2{margin:0}
.row{display:flex;gap:10px}.row>*{flex:1}
.row.end{justify-content:flex-end}.row.end button{flex:0 0 auto}
#delete-btn{margin-right:auto}
[hidden]{display:none!important}