:root{
  --bg:#ffffff; --panel:#ffffff; --text:#0f172a; --subtle:#475569;
  --accent:#0ea5e9; --accent-2:#10b981; --team1:#f59e0b; --team2:#8b5cf6; --gfl:#ef4444;
  --ring: rgba(14,165,233,.25); --radius:16px; --shadow: 0 10px 30px rgba(2,6,23,.06);
  --border: 1px solid rgba(2,6,23,.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,Noto Sans;
  background:var(--bg); color:var(--text); line-height:1.45;}
.wrap{max-width:1000px; margin:28px auto; padding:0 16px}
header{display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between; margin-bottom:12px}
h1{font-size:clamp(20px,3vw,28px); margin:0}
.legend{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--subtle); flex-wrap:wrap}
.dot{display:inline-flex; align-items:center; gap:6px}
.badge{display:inline-block; font-weight:700; font-size:12px; padding:2px 8px; border-radius:999px; letter-spacing:.02em; border:var(--border)}
.F{background:color-mix(in oklab, var(--accent) 15%, #fff); border-color:var(--accent)}
.V{background:color-mix(in oklab, var(--accent-2) 15%, #fff); border-color:var(--accent-2)}
.T1{background:color-mix(in oklab, var(--team1) 15%, #fff); border-color:var(--team1)}
.T2{background:color-mix(in oklab, var(--team2) 15%, #fff); border-color:var(--team2)}
.GFL{background:color-mix(in oklab, var(--gfl) 15%, #fff); border-color:var(--gfl)}
.N{background:#fff; border:var(--border); color:var(--subtle)}
.panel{background:var(--panel); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
form{display:grid; gap:10px; grid-template-columns:repeat(5,minmax(0,1fr)); padding:14px}
form>*{background:#fff; color:var(--text); border:var(--border); border-radius:12px; padding:10px 12px}
form select, form input[type=date]{cursor:pointer}
form button{border:none; background:var(--accent); color:#fff; font-weight:600; letter-spacing:.02em; border-radius:12px; padding:10px 12px; box-shadow:0 0 0 0 var(--ring); transition:box-shadow .15s ease, transform .06s ease}
form button:hover{box-shadow:0 0 0 4px var(--ring)}
form button:active{transform:translateY(1px)}
.monthbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px}
.monthtitle{font-weight:800; font-size:18px}
.navbtn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:10px; border:var(--border); background:#fff; cursor:pointer}
.navbtn:hover{box-shadow:0 0 0 3px var(--ring)}
.grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding:14px}
.dow{text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:11px; color:var(--subtle); text-align:center}
.cell{min-height:86px; border:1px dashed rgba(2,6,23,.1); border-radius:12px; padding:8px; position:relative; background:#fff}
.date{position:absolute; top:6px; right:8px; font-size:11px; color:#64748b}
.events{display:flex; flex-direction:column; gap:6px; margin-top:20px}
.event{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:10px; background:#fff; border:var(--border); cursor:pointer}
.event:hover{border-color:#94a3b8}
.event .kind{font-size:12px; color:#0f172a}
.event .label{font-size:12px; color:#334155}
.footer{margin-top:10px; font-size:12px; color:#475569; display:flex; gap:12px; align-items:center}
@media (max-width: 880px){form{grid-template-columns:1fr} .monthbar{flex-direction:column; align-items:stretch}}