* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; font-size: 13px; color: #e2e8f0; background: #121417; margin: 0; padding: 16px; }
.page { max-width: 1200px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.mb { margin-bottom: 12px; }
.muted { color: #94a3b8; font-size: 12px; }
.header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.banner { background: #3f1d1d; border: 1px solid #7f1d1d; color: #fca5a5; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.empty { background: #1a1d21; border: 1px dashed #2d333b; border-radius: 8px; padding: 24px; text-align: center; color: #94a3b8; margin-bottom: 12px; }
.pill { background: #1e2227; border: 1px solid #2d333b; border-radius: 999px; padding: 5px 12px; cursor: pointer; user-select: none; color: #e2e8f0; font-size: 12px; }
.pill.on { background: #2563eb; border-color: #2563eb; }
.pill:hover { border-color: #60a5fa; }
.tile { background: #1e2227; border: 1px solid #2d333b; border-radius: 8px; padding: 10px 12px; flex: 1; min-width: 180px; }
.tile b { font-size: 18px; display: block; margin: 2px 0; }
.card { background: #1a1d21; border: 1px solid #2d333b; border-radius: 8px; padding: 12px; }
.card.scroll { overflow-x: auto; }
h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
select, button { background: #2d333b; color: #fff; border: 1px solid #444c56; padding: 4px 8px; border-radius: 4px; font: inherit; }
button { cursor: pointer; }
table.hm { border-collapse: collapse; width: 100%; min-width: 760px; table-layout: fixed; }
table.hm td, table.hm th { padding: 0; height: 26px; font-size: 10px; text-align: center; font-weight: 500; }
table.hm th { color: #94a3b8; cursor: pointer; }
table.hm th.day { width: 48px; text-align: left; font-size: 12px; color: #e2e8f0; }
table.hm th.day.sel { color: #60a5fa; }
table.hm th.bestcol { width: 104px; text-align: left; padding-left: 8px; color: #4ade80; font-size: 11px; cursor: default; }
td.c { border: 1px solid #121417; position: relative; cursor: pointer; }
td.c:hover { outline: 2px solid #60a5fa; outline-offset: -2px; z-index: 2; }
td.c.lane::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.45) 0 3px, transparent 3px 7px); pointer-events: none; }
td.c.thin::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.5px) 0 0 / 5px 5px; pointer-events: none; }
td.c.closed { background: #181b1f !important; cursor: default; }
td.c.best { box-shadow: inset 0 3px 0 #4ade80, inset 0 -3px 0 #4ade80; }
td.c.best.bstart { box-shadow: inset 0 3px 0 #4ade80, inset 0 -3px 0 #4ade80, inset 3px 0 0 #4ade80; }
td.c.best.bend { box-shadow: inset 0 3px 0 #4ade80, inset 0 -3px 0 #4ade80, inset -3px 0 0 #4ade80; }
td.c.best.bstart.bend { box-shadow: inset 0 0 0 3px #4ade80; }
td.c.sel { outline: 2px solid #fff; outline-offset: -2px; z-index: 3; }
th.colsel { color: #fff !important; background: #2563eb; border-radius: 3px; }
.legend { display: flex; gap: 14px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.rank { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #2d333b; }
.rank:last-child { border-bottom: none; }
.bar { height: 8px; border-radius: 4px; margin-top: 4px; }
.tabs { display: flex; border: 1px solid #2d333b; border-radius: 8px; overflow: hidden; }
.tabs span { padding: 6px 14px; cursor: pointer; background: #1e2227; }
.tabs span.on { background: #2563eb; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: #3f2d12; color: #fbbf24; margin-left: 6px; }
.tag.thin { background: #1e293b; color: #94a3b8; }
svg.curve { width: 100%; height: auto; display: block; }
details { margin-top: 16px; }
summary { cursor: pointer; color: #94a3b8; }

.tile a { color: #60a5fa; }
table.hm th.hh { height: 22px; font-size: 11px; color: #cbd5e1; border-left: 1px solid #4b5563; white-space: nowrap; }
table.hm th.hh.even { background: #1e2227; }
table.hm th.hh.odd { background: #272d35; }
table.hm th.hh.colsel { background: #2563eb; color: #fff; border-radius: 0; }
td.c.hs { border-left-color: #4b5563; }
.cellinfo { margin-top: 10px; padding: 8px 10px; background: #1a1d21; border: 1px solid #2d333b; border-radius: 6px; font-size: 13px; color: #cbd5e1; }
.cellinfo .big { font-size: 15px; font-weight: 700; color: #fff; }