/* Только телефон. Чёрный фон, серые карточки, красные акценты. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: #000; color: #f2f2f2; }
body { font: 17px/1.35 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
main { max-width: 480px; margin: 0 auto; padding: 12px 12px 96px; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; }

.head { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.head h1 { flex: 1; margin: 0; font-size: 22px; font-weight: 700; text-align: center; }
.head .sub { display: block; font-size: 14px; font-weight: 400; color: #8e8e93; }
.nav { width: 48px; height: 48px; border-radius: 12px; background: #1c1c1e; font-size: 24px; }
.nav:disabled { opacity: .25; }

.card { background: #1c1c1e; border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.card.pad { padding: 14px 16px; }
.label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #8e8e93; margin: 0 0 6px; }
.muted { color: #8e8e93; }
.accent { color: #e5383b; }

.rule { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 16px; text-align: left; border-bottom: 1px solid #2c2c2e; }
.rule:last-child { border-bottom: 0; }
.mark { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #636366; }
.rule.done .mark { background: #e5383b; border-color: #e5383b; }
.rule .title { flex: 1; }

.actions { display: flex; gap: 10px; margin-bottom: 12px; }
.btn { flex: 1; min-height: 52px; border-radius: 12px; background: #2c2c2e; font-weight: 600; }
.btn.main { background: #e5383b; color: #fff; }

.week .row { padding: 12px 16px; border-bottom: 1px solid #2c2c2e; }
.week .row:last-child { border-bottom: 0; }
.week .top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.week .count { flex: none; font-weight: 700; }
.cells { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; align-items: center; height: 26px; }
.cell { width: 22px; height: 22px; border-radius: 50%; }
.cell.done { background: #e5383b; }
.cell.missed { border: 2px solid #636366; }
.cell.none { width: 6px; height: 6px; background: #3a3a3c; }
.daynames { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: #8e8e93; padding: 10px 16px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #8e8e93; padding: 0 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .cell { width: 14px; height: 14px; }
.legend .cell.none { width: 6px; height: 6px; margin: 0 4px; }

#tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #000; border-top: 1px solid #2c2c2e; }
#tabs[hidden] { display: none; }
#tabs button { flex: 1; height: 48px; border-radius: 12px; background: #1c1c1e; color: #8e8e93; font-weight: 600; }
#tabs button.on { color: #fff; box-shadow: inset 0 0 0 2px #e5383b; }
.center { text-align: center; padding: 48px 16px; color: #8e8e93; }
.note { color: #e5383b; }
.btn.retry { display: block; width: 100%; margin-top: 16px; padding: 0 16px; color: #f2f2f2; }