/* Progress screen */
.p-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.p-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; min-width: 0; }
.p-tile .display { font-size: 34px; white-space: nowrap; }
.p-tile span { display: block; margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.p-tile.big { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(160deg, rgba(212, 255, 58, .22), var(--surface) 70%); border-color: rgba(212, 255, 58, .3); }
.p-tile.big .display { font-size: 84px; color: var(--volt); }
.p-tile.fire { background: linear-gradient(160deg, rgba(255, 106, 43, .16), var(--surface) 70%); }

.hm { display: flex; gap: 8px; padding: 16px; }
.hm-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; font-size: 9px; font-weight: 800; color: var(--faint); }
.hm-days span { display: flex; align-items: center; }
.hm-grid { flex: 1; display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.hm-col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; }
.hm-col i { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.hm-col i.on { background: var(--volt); box-shadow: 0 0 8px rgba(212, 255, 58, .45); }
.hm-col i.today { outline: 1.5px solid var(--text); outline-offset: 1px; }
.hm-col i.future { background: transparent; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar-v { font-size: 10px; font-weight: 700; color: var(--muted); }
.bar-fill { width: 100%; border-radius: 6px 6px 3px 3px; background: var(--volt); }
.bar-fill.B { background: var(--fire); }
.bar-x { font-size: 10px; color: var(--faint); font-weight: 700; }
.legend { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.A { background: var(--volt); } .legend i.B { background: var(--fire); }

.trends { padding: 6px 18px; }
.trend { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.trend:first-child { border-top: 0; }
.trend-info { flex: 1; min-width: 0; }
.trend-nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.spark { flex: 0 0 auto; }