:root { --bg:#f6f7f9; --fg:#1f2937; --muted:#6b7280; --line:#e5e7eb; --accent:#1d4ed8; --card:#fff;
        --fest:#fff1f2; --sup:#fecdd3; --ok:#16a34a; --ko:#dc2626; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111827; --fg:#e5e7eb; --muted:#9ca3af; --line:#374151; --accent:#60a5fa; --card:#1f2937;
          --fest:#3b1d24; --sup:#6b2330; }
}
* { box-sizing: border-box; }
body { margin:0; font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
.hidden, [hidden] { display:none !important; }
h1 { font-size:18px; margin:0; } h2 { font-size:16px; margin:0; }
.muted { color:var(--muted); } .small { font-size:12px; } .grow { flex:1; }
.row { display:flex; gap:8px; align-items:center; } .wrap { flex-wrap:wrap; }
button { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button.ghost { background:transparent; color:var(--accent); }
button.small { padding:3px 8px; }
input, select { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
.card { max-width:360px; margin:12vh auto; padding:24px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.card label { display:block; margin:12px 0; } .card input { width:100%; margin-top:4px; }
.msg { min-height:1.2em; color:var(--ko); }
header { display:flex; gap:12px; align-items:center; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tabs { display:flex; gap:4px; } .tab { background:transparent; color:var(--fg); border-color:transparent; }
.tab.active { border-color:var(--accent); color:var(--accent); }
section { padding:12px 16px; }
.toolbar { display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.toolbar h2 { min-width:150px; text-align:center; font-size:18px; }
.legend { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.chip { padding:1px 8px; border-radius:10px; font-size:12px; border:1px solid var(--line); color:#111; }
.gridwrap { overflow:auto; max-height:calc(100vh - 230px); background:var(--card); border:1px solid var(--line); border-radius:8px; }
table#grid { border-collapse:separate; border-spacing:0; }
#grid th, #grid td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; text-align:center; min-width:30px; height:28px; font-size:12px; }
#grid thead th { position:sticky; top:0; background:var(--card); z-index:2; line-height:1.15; padding:2px 0; }
#grid .name { position:sticky; left:0; background:var(--card); z-index:1; text-align:left; padding:0 8px; white-space:nowrap; min-width:190px; }
#grid thead .name { z-index:3; }
#grid .fest { background:var(--fest); } #grid .sup { background:var(--sup); }
#grid th.fest, #grid th.sup { color:var(--ko); }
#grid td.cell { cursor:default; font-weight:600; color:#111; }
#grid.editable td.cell { cursor:pointer; } #grid.editable td.cell:hover { outline:2px solid var(--accent); outline-offset:-2px; }
#grid td.today, #grid th.today { box-shadow:inset 0 -3px 0 var(--accent); }
#grid .num { min-width:46px; font-variant-numeric:tabular-nums; background:var(--card); }
#grid tfoot td { position:sticky; bottom:0; background:var(--card); font-weight:700; }
.ok { color:var(--ok); } .ko { color:var(--ko); }
.menu { position:fixed; z-index:20; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; box-shadow:0 8px 24px #0004; max-width:260px; }
.menu button { color:#111; border-color:var(--line); padding:5px 4px; font-size:12px; }
.menu button.clear { grid-column:1/-1; background:var(--card); color:var(--fg); }
.toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:8px 14px; border-radius:8px; z-index:30; }
.toast.err { background:var(--ko); }
table.list { border-collapse:collapse; margin:8px 0 16px; background:var(--card); }
table.list th, table.list td { border-bottom:1px solid var(--line); padding:6px 10px; text-align:left; }
@media (max-width:640px) { section { padding:8px; } #grid .name { min-width:130px; } }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); padding:20px; min-width:300px; }
dialog::backdrop { background:#0006; }
dialog label { display:block; margin:10px 0; } dialog input { width:100%; margin-top:4px; }
.logo { vertical-align:middle; border-radius:50%; margin-right:6px; }