/* ---------- daily: stat tiles ---------- */
.tiles { display: flex; gap: 8px; margin-top: 8px; }
.tiles.two { display: flex; }
.tile {
  flex: 1 1 0;
  min-width: 0;
  max-width: 168px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px 11px;
  text-align: left;
}
.tile:active { background: var(--line2); }
.tile .num { display: block; font-size: 21px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.tile .lbl { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.warn .num { color: var(--warn); }

/* ---------- record list ---------- */
.day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink3);
  margin: 22px 4px 8px;
}
.day-head:first-child { margin-top: 6px; }

.rec-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rec {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--line2);
  align-items: flex-start;
  background: var(--card);
}
.rec:last-child { border-bottom: 0; }
.rec:active { background: var(--line2); }
.rec .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex: 0 0 6px; }
.rec .body { flex: 1; min-width: 0; display: block; }
.rec .head { display: flex; gap: 8px; align-items: baseline; }
.rec .tname { font-size: 12px; font-weight: 500; }
.rec .time { font-size: 11.5px; color: var(--ink3); margin-left: auto; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.rec .text { display: block; font-size: 13.5px; line-height: 1.6; margin-top: 3px; color: var(--ink); word-break: break-word; }
.rec .who { display: block; font-size: 12px; color: var(--ink3); margin-top: 3px; }
.rec .thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); flex: 0 0 46px; }
.rec.done .text { text-decoration: line-through; color: var(--ink3); }

.tick {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  flex: 0 0 21px;
  margin-top: 2px;
  color: transparent;
}
.tick.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tick svg { width: 12px; height: 12px; }

/* ---------- collect ---------- */
.progress { height: 5px; border-radius: 3px; background: var(--line2); overflow: hidden; margin-top: 6px; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.25s ease; }
.progress.low i { background: var(--sakura); }

.col-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line2); background: var(--card);
}
.col-row:last-child { border-bottom: 0; }
.col-row:active { background: var(--line2); }
.col-row .nm { flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-row.miss .nm { color: var(--ink); }
.col-row:not(.miss) .nm { color: var(--ink3); }

/* ---------- picker rows ---------- */
.pk-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 2px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line2);
}
.pk-row:last-child { border-bottom: 0; }
.pk-row .nm { flex: 1; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-check {
  width: 21px; height: 21px; border-radius: 6px;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  flex: 0 0 21px; color: transparent;
}
.pk-check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pk-check svg { width: 13px; height: 13px; }

/* ---------- record editor ---------- */
.type-row { display: flex; gap: 6px; flex-wrap: wrap; }
.type-chip {
  height: 33px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 12.5px; color: var(--ink2);
}
.type-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--card); overflow: hidden; }
.stepper button { width: 46px; height: 42px; font-size: 19px; color: var(--ink2); }
.stepper button:active { background: var(--line2); }
.stepper .val { flex: 1; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 500; }

.photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.photos .ph { position: relative; width: 62px; height: 62px; }
.photos img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); }
.photos .rm {
  position: absolute; top: -5px; right: -5px;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(35,35,31,0.82); color: #fff;
  display: grid; place-items: center; font-size: 11px;
}
.photos .rm svg { width: 10px; height: 10px; }

.link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--accent); padding: 4px 0;
}
.link-btn svg { width: 15px; height: 15px; }

.rec-detail { font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

/* ---------- misc ---------- */
.hint-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); margin-top: 6px; }
.chip.sm { height: 27px; padding: 0 9px; font-size: 12.5px; }
.search.sm { height: 36px; margin-bottom: 10px; }
.rec { cursor: pointer; }
.seg.seg4 button { font-size: 13px; padding: 0 2px; }

@media (min-width: 900px) {
  .fab { right: max(18px, calc(50% - 420px + 18px)); }
}