.quick-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-habits { grid-column: 1 / -1; }
.quick-card.habit > i { color: #3d9c82; background: #e8f5f0; }

.session-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.session-main { min-width: 0; }
.session-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.session-time { color: var(--muted) !important; }
.session-card small + small { margin-top: 5px; }
.timer-actions { flex-wrap: wrap; justify-content: flex-end; }
.discard-timer-button { color: var(--muted) !important; }

.time-record-section { display: grid; grid-column: 1 / -1; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafafa; }
.check-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink); font-size: 10px; cursor: pointer; }
.check-row input { width: 15px; height: 15px; accent-color: #111; }
.check-row small { color: var(--muted); font-size: 9px; }
.time-range-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.time-range-fields.hidden { display: none; }
.movie-episodes-field.hidden, .movie-minutes-field.hidden { display: none; }
.media-progress { max-width: 520px; margin-top: 18px; }

.habit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.habit-card { position: relative; min-width: 0; padding: 18px; border: 1px solid var(--line); border-top: 3px solid currentColor; border-radius: 17px; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: .18s ease; }
.habit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.habit-card-head { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.habit-card-head .card-actions { top: 10px; right: 10px; }
.habit-card h3 { margin: 17px 0 6px; color: var(--ink); font-size: 17px; letter-spacing: -.03em; }
.habit-card > p { min-height: 35px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.habit-card-stats { display: flex; align-items: baseline; gap: 7px; margin-top: 20px; }
.habit-card-stats strong { color: currentColor; font-size: 23px; letter-spacing: -.05em; }
.habit-card-stats span { color: var(--muted); font-size: 9px; }
.habit-card-stats b { margin-left: auto; color: var(--faint); font-size: 10px; font-weight: 500; }
.habit-color-dot { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: currentColor; }
.habit-today-button { width: 100%; min-height: 34px; margin-top: 16px; border: 1px solid currentColor; border-radius: 9px; color: currentColor; background: transparent; font-size: 10px; font-weight: 700; }
.habit-today-button:hover, .habit-today-button.checked { color: #fff; background: currentColor; }
.habit-mini-list { display: grid; gap: 7px; margin-top: 14px; }
.habit-mini-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.habit-mini-main { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; }
.habit-mini-main span { min-width: 0; }
.habit-mini-main strong, .habit-mini-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-mini-main strong { font-size: 11px; }
.habit-mini-main small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.button.compact { min-height: 28px; padding: 0 10px; font-size: 9px; }

.habit-detail-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 25px; border: 1px solid var(--line); border-top: 3px solid currentColor; border-radius: 23px; background: #fff; }
.habit-hero-symbol { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 21px; color: currentColor; background: #f5f5f5; font-size: 27px; }
.habit-hero-symbol .habit-color-dot { width: 14px; height: 14px; margin-bottom: 3px; }
.habit-detail-hero h1 { margin: 9px 0 6px; color: var(--ink); font-size: clamp(26px, 4vw, 42px); letter-spacing: -.06em; }
.habit-detail-hero p { max-width: 650px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; white-space: pre-wrap; }
.habit-metrics { margin-top: 15px; }
.habit-detail-panel { margin-top: 15px; }
.habit-checkin-form { display: flex; align-items: end; gap: 9px; max-width: 440px; margin-top: 20px; }
.habit-checkin-form .field { flex: 1; }
.habit-checkin-form .button { min-height: 37px; }

.heatmap-scroll { overflow-x: auto; padding: 4px 0 2px; }
.heatmap-label-row { display: flex; align-items: center; gap: 5px; margin: 15px 0 9px; color: var(--faint); font-size: 8px; }
.heatmap-label-row span:first-child { margin-right: 3px; }
.heatmap-label-row span:last-child { margin-left: 3px; }
.heatmap-grid { display: grid; grid-template-rows: repeat(7, 13px); grid-auto-flow: column; grid-auto-columns: 13px; gap: 4px; min-width: max-content; }
.heatmap-cell { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 3px; background: #f0f0f0; cursor: pointer; }
.heatmap-cell:hover { outline: 2px solid #111; outline-offset: 1px; }
.heatmap-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--faint); font-size: 8px; }
.habit-heat-legend, .global-heat-legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.global-heatmap .heat-level-0 { background: #f0f0f0; }
.global-heatmap .heat-level-1 { background: #e3e3e3; }
.global-heatmap .heat-level-2 { background: #c9c9c9; }
.global-heatmap .heat-level-3 { background: #9f9f9f; }
.global-heatmap .heat-level-4 { background: #666; }
.global-heatmap .heat-level-5 { background: #111; }

.habit-color-mint { color: #3d9c82; }
.habit-color-mint .heat-level-1 { background: #e4f4ee; }
.habit-color-mint .heat-level-2 { background: #c8eadf; }
.habit-color-mint .heat-level-3 { background: #94d4c1; }
.habit-color-mint .heat-level-4 { background: #62b99f; }
.habit-color-mint .heat-level-5 { background: #31876f; }
.habit-color-sky { color: #438fc4; }
.habit-color-sky .heat-level-1 { background: #e4f1fa; }
.habit-color-sky .heat-level-2 { background: #c9e4f5; }
.habit-color-sky .heat-level-3 { background: #99cbe8; }
.habit-color-sky .heat-level-4 { background: #65abd5; }
.habit-color-sky .heat-level-5 { background: #3d80af; }
.habit-color-violet { color: #8069bd; }
.habit-color-violet .heat-level-1 { background: #eeeafb; }
.habit-color-violet .heat-level-2 { background: #dcd3f3; }
.habit-color-violet .heat-level-3 { background: #beafe5; }
.habit-color-violet .heat-level-4 { background: #9c89d2; }
.habit-color-violet .heat-level-5 { background: #7158ac; }
.habit-color-coral { color: #c86d55; }
.habit-color-coral .heat-level-1 { background: #fcedea; }
.habit-color-coral .heat-level-2 { background: #f6d4cb; }
.habit-color-coral .heat-level-3 { background: #edaa99; }
.habit-color-coral .heat-level-4 { background: #dc856e; }
.habit-color-coral .heat-level-5 { background: #b75c45; }
.habit-color-gold { color: #ad842b; }
.habit-color-gold .heat-level-1 { background: #fbf4df; }
.habit-color-gold .heat-level-2 { background: #f2e3b7; }
.habit-color-gold .heat-level-3 { background: #e3c979; }
.habit-color-gold .heat-level-4 { background: #c7a54a; }
.habit-color-gold .heat-level-5 { background: #9b741c; }
.habit-color-rose { color: #c36c86; }
.habit-color-rose .heat-level-1 { background: #f9eaf0; }
.habit-color-rose .heat-level-2 { background: #f1cfdb; }
.habit-color-rose .heat-level-3 { background: #e4a5b9; }
.habit-color-rose .heat-level-4 { background: #d27f9a; }
.habit-color-rose .heat-level-5 { background: #b75b76; }

.habit-overview-strip { display: flex; align-items: end; gap: 6px; min-height: 130px; overflow-x: auto; margin-top: 20px; padding: 5px 0 0; border-bottom: 1px solid var(--line); }
.habit-overview-cell { display: grid; width: 34px; min-width: 34px; height: 112px; grid-template-rows: 18px 1fr 15px; justify-items: center; gap: 6px; }
.habit-overview-cell b { color: var(--ink); font-size: 9px; }
.habit-overview-cell i { display: block; width: 18px; min-height: 3px; align-self: end; border-radius: 5px 5px 2px 2px; background: #eee; }
.habit-overview-cell i.heat-level-1 { height: 20%; background: #d8d8d8; }
.habit-overview-cell i.heat-level-2 { height: 38%; background: #bdbdbd; }
.habit-overview-cell i.heat-level-3 { height: 56%; background: #8d8d8d; }
.habit-overview-cell i.heat-level-4 { height: 75%; background: #555; }
.habit-overview-cell i.heat-level-5 { height: 100%; background: #111; }
.habit-overview-cell small { color: var(--faint); font-size: 8px; white-space: nowrap; }
.habit-stat-list { display: grid; gap: 5px; margin-top: 16px; }
.habit-stat-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 8px; border: 1px solid transparent; border-radius: 11px; color: var(--ink); background: transparent; text-align: left; }
.habit-stat-row:hover { border-color: var(--line); background: #fafafa; }
.habit-stat-row > span { min-width: 0; flex: 1; }
.habit-stat-row strong, .habit-stat-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-stat-row strong { font-size: 11px; }
.habit-stat-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.habit-stat-row b { color: currentColor; font-size: 10px; }
.habit-stat-row em { color: var(--faint); font-style: normal; }

.setting-tags button[data-action="edit-category"] { margin-left: 4px; }
.stats-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .quick-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .habit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 830px) {
  .mobile-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .habit-detail-hero { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 18px; }
  .habit-detail-hero > .button { grid-column: 1 / -1; width: 100%; }
  .timer-ribbon button[data-action="pause-timer"], .timer-ribbon button[data-action="resume-timer"], .timer-ribbon .discard-timer-button { display: inline-block; }
}

@media (max-width: 540px) {
  .stats-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-range-fields { grid-template-columns: 1fr; }
  .habit-grid { grid-template-columns: 1fr; }
  .habit-card h3 { font-size: 15px; }
  .habit-checkin-form { align-items: stretch; flex-direction: column; }
  .habit-checkin-form .button { width: 100%; }
  .habit-hero-symbol { width: 52px; height: 52px; border-radius: 17px; font-size: 21px; }
  .habit-detail-hero h1 { font-size: 24px; }
  .session-card-head { display: block; }
  .session-actions { margin-top: 8px; }
}