.board{
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 12px;
  margin-bottom: 14px;
}
.grid-scroll{ overflow-x: auto; padding-bottom: 4px; }
.grid-area{ display:inline-flex; gap: 8px; }
.grid-corner{ flex:none; width: var(--labelw); }
.month-labels{
  display:grid; gap: var(--gap); height: 15px; margin-bottom: 6px;
  font-size: 10px; font-weight: 500; line-height: 15px;
  color: var(--label);
}
.month-labels span{ white-space: nowrap; }
.day-labels{
  flex:none; width: var(--labelw);
  display:grid; grid-template-rows: repeat(7, var(--cell));
  gap: var(--gap); align-items:center;
  font-size: 10px; font-weight: 500; color: var(--label);
}
.grid{
  display:grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--cell));
  gap: var(--gap);
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cell{
  width: var(--cell); height: var(--cell); border-radius: 2px; cursor: pointer;
  transition: background-color 0.3s ease;
}
.grid.painting .cell{ transition: none; }
.cell[data-level="0"]{ background: var(--l0); }
.cell[data-level="1"]{ background: var(--l1); }
.cell[data-level="2"]{ background: var(--l2); }
.cell[data-level="3"]{ background: var(--l3); }
.cell[data-level="4"]{ background: var(--l4); }
.cell.pulse{ transform: scale(1.3); }
@media (hover:hover){
  .cell:hover{ box-shadow: inset 0 0 0 1px rgba(233,238,242,0.55); }
}
.board-foot{
  display:flex; justify-content:flex-end; align-items:center;
  margin-top: 10px; padding: 0 2px;
  font-size: 12px; color: var(--muted);
}
.legend{
  display:flex; align-items:center; gap: 4px;
  font-size: 11px; color: var(--label);
}
.legend i{
  width: 11px; height: 11px; border-radius: 2px; display:inline-block;
}

.actions-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap: 16px 24px;
  margin: 0 0 26px;
}
.board-actions{ display:flex; gap: 22px; padding-top: 2px; }
.link-btn{
  background:none; border:0; padding: 4px 2px;
  font-family: inherit; font-size: 14px; color: var(--muted);
  cursor: pointer;
}
.link-btn:hover{ color: var(--text); }
.link-btn:disabled{ opacity: 0.4; cursor: default; }
.link-btn:disabled:hover{ color: var(--muted); }
.link-btn .key{ font-size: 12px; color: var(--label); }

.brush-group{ display:flex; gap: 16px; }
.sw{ display:flex; flex-direction:column; align-items:center; gap: 6px; }
.sw span{ font-size: 11px; color: var(--label); }
.swatch{
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer; padding: 0; display: block;
  transition: transform 0.1s ease;
}
.swatch:hover{ transform: scale(1.1); }
.swatch[data-level="0"]{ background: var(--l0); }
.swatch[data-level="1"]{ background: var(--l1); }
.swatch[data-level="2"]{ background: var(--l2); }
.swatch[data-level="3"]{ background: var(--l3); }
.swatch[data-level="4"]{ background: var(--l4); }
.swatch.active{
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #E9EEF2;
}

@media (max-width: 760px){
  .actions-row{ flex-direction: column; align-items: flex-start; }
}

@media (hover:hover) and (pointer:fine){
  .grid-scroll{ overflow: hidden; }
  .grid-area{ --cell: 14px; }
}
@supports (container-type: inline-size){
  @media (hover:hover) and (pointer:fine){
    .grid-scroll{ container-type: inline-size; }
    .grid-area{ --cell: min(18px, calc((100cqw - 199px) / 54)); }
  }
}