:root{--bg:#0f172a;--panel:#111827;--card:#0b1324;--ink:#e5e7eb;--muted:#94a3b8;--acc:#0ea5e9;--ok:#10b981}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans JP',sans-serif}
.top{padding:20px 16px 8px;max-width:980px;margin:0 auto}
.top h1{margin:0 0 6px;font-weight:800}
.sub{margin:0;color:var(--muted)}
main{max-width:980px;margin:0 auto;padding:8px 16px 24px}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 12px}
button{background:var(--acc);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.05)}
label{display:flex;gap:6px;align-items:center;background:#0b1324;padding:8px 10px;border-radius:10px}
input[type=date]{background:#0b1324;color:var(--ink);border:1px solid #1f2937;border-radius:8px;padding:6px}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0}
.cell{background:var(--panel);border:1px solid #1f2937;border-radius:12px;min-height:92px;padding:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;cursor:pointer}
.cell small{display:block;color:var(--muted);font-weight:600}
.cell.free{background:#172554;border-style:dashed}
.cell.checked{outline:3px solid var(--ok);background:#0e1a2e}
.status{display:flex;gap:12px;align-items:center;margin:4px 0 16px}
.hint{color:var(--muted)}
.share{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 8px}
.legend{display:flex;gap:14px;flex-wrap:wrap;opacity:.9;margin:6px 0 2px}
.legend-item{display:flex;align-items:center;gap:6px;color:var(--muted)}
.dot{width:12px;height:12px;border-radius:50%}
.badge{margin-left:8px;padding:2px 8px;border-radius:999px;background:#1f2937;color:#e5e7eb;font-weight:700;font-size:.9em}
.about{margin-top:10px}
.foot{max-width:980px;margin:0 auto 40px;padding:0 16px}
.foot a{color:var(--muted)}

/* Categories tint */
.cat-0{background:#3b82f6}
.cat-1{background:#f59e0b}
.cat-2{background:#10b981}
.cat-3{background:#e11d48}
.cat-4{background:#a855f7}
.cell.cat-0{box-shadow: inset 0 4px 0 0 rgba(59,130,246,.8)}
.cell.cat-1{box-shadow: inset 0 4px 0 0 rgba(245,158,11,.8)}
.cell.cat-2{box-shadow: inset 0 4px 0 0 rgba(16,185,129,.8)}
.cell.cat-3{box-shadow: inset 0 4px 0 0 rgba(225,29,72,.85)}
.cell.cat-4{box-shadow: inset 0 4px 0 0 rgba(168,85,247,.85)}