.live-petak-note { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #27644c; font-size: 12px; font-weight: 700; }
.live-petak-note:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #159765; box-shadow: 0 0 0 4px #d9f1e2; }
.block-card.block-empty { border-color: #e4d8c3; }
.block-empty .block-photo { filter: saturate(.72); }
.block-empty .block-progress { background: #eee9df; }
.block-empty .block-detail > p { color: #876a3f; }
.petak-empty { min-height: 135px; display: grid; place-items: center; text-align: center; border: 1px dashed #d7cbb6; border-radius: 8px; color: #876a3f; background: #faf7ef; font-size: 12px; }
.petak-map { max-height: 210px; }
.petak-cell { min-height: 24px; font-size: 9px; transition: background-color .2s; }
.petak-cell.status-terisi { background: #075c45; color: #fff; }
.petak-cell.status-tersedia { background: #bceac9; color: #134b32; }
.petak-cell.status-reservasi { background: #efbd55; color: #583b04; }
.petak-cell.status-tidak_layak, .petak-cell.status-ditutup { background: #aeb7b4; color: #243a34; }
.block-legend { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.block-legend > span { white-space: nowrap; }
.legend-dot.filled { background: #075c45; }
.legend-dot.free { background: #bceac9; }
.legend-dot.reserved { background: #efbd55; }
.legend-dot.closed { background: #aeb7b4; }
@media (max-width: 700px) { .petak-cell { min-height: 28px; } }