.home-screen { display: flex; flex-direction: column; gap: var(--space-lg); padding-top: max(var(--space-lg), env(safe-area-inset-top)); padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); }
.home-copy { display: grid; gap: var(--space-md); }
.home-copy p { max-width: 29rem; }
.home-action { display: grid; gap: var(--space-sm); }
.home-section { display: grid; gap: var(--space-sm); }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.today-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); }
.today-grid div { padding: var(--space-sm) 6px; border-radius: var(--radius-medium); background: var(--color-surface); text-align: center; box-shadow: var(--shadow-soft); }
.today-grid dt { color: var(--color-text-muted); font-size: .68rem; }
.today-grid dd { margin: 4px 0 0; font-size: 1.45rem; font-weight: 760; }
.recent-list, .history-list { display: grid; gap: var(--space-sm); }
.recent-item { display: grid; gap: 3px; width: 100%; padding: var(--space-sm); border-bottom: 1px solid var(--color-border); background: transparent; text-align: left; }
.recent-row, .history-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.recent-row time, .recent-duration, .history-card time, .history-meta { color: var(--color-text-muted); font-size: .76rem; }
.recent-purpose, .history-purpose { font-weight: 650; }
.recent-intent { overflow: hidden; color: var(--color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.empty-state { padding: var(--space-md); color: var(--color-text-muted); text-align: center; }
.session-notice { color: var(--color-primary); font-weight: 700; text-align: center; }
.intent-screen { display: flex; flex-direction: column; gap: var(--space-md); padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); }
.intent-header { display: grid; gap: var(--space-xs); }
.intent-form { display: flex; flex: 1; flex-direction: column; gap: var(--space-md); }
.form-section { display: grid; gap: var(--space-sm); }
.form-actions { display: grid; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-md); }
.active-screen { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); text-align: center; }
.active-actions { position: absolute; right: var(--space-md); bottom: max(var(--space-lg), env(safe-area-inset-bottom)); left: var(--space-md); }
.session-details { display: grid; gap: var(--space-sm); }
.session-app { color: var(--color-primary); font-size: 0.9rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.session-purpose { font-size: 1.5rem; font-weight: 750; }
.session-intent { padding-top: var(--space-sm); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.timer-label { color: var(--color-text-muted); font-size: 0.85rem; }
.timer { margin-top: var(--space-xs); font-size: clamp(3.4rem, 18vw, 5.6rem); font-variant-numeric: tabular-nums; font-weight: 760; letter-spacing: -0.06em; line-height: 1; }
.time-ended { color: var(--color-text-muted); }
.reflection-screen { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; gap: var(--space-lg); padding-top: max(12vh, env(safe-area-inset-top)); padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); }
.reflection-header { display: grid; gap: var(--space-xs); text-align: center; }
.reflection-actions { display: grid; gap: var(--space-sm); margin-top: auto; }
.extension-screen { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; gap: var(--space-md); padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); }
.extension-summary { display: grid; gap: var(--space-sm); }
.summary-label { color: var(--color-text-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.extension-form { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: var(--space-md); }
.extension-input { min-height: 140px; }
.history-screen, .detail-screen { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; gap: var(--space-md); padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); }
.page-header { display: grid; gap: var(--space-xs); padding-top: var(--space-sm); }
.history-card { display: grid; gap: 5px; width: 100%; color: inherit; text-align: left; }
.status-badge { padding: 3px 8px; border-radius: 999px; color: var(--color-primary); background: var(--color-secondary); font-size: .7rem; font-weight: 700; }
.detail-section { display: grid; gap: var(--space-sm); }
.detail-list { display: grid; gap: var(--space-sm); margin: 0; }
.detail-list div { display: grid; grid-template-columns: minmax(110px, .8fr) 1.2fr; gap: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); }
.detail-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.detail-list dt { color: var(--color-text-muted); font-size: .82rem; }
.detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 650; }
.extension-log { display: grid; gap: var(--space-sm); }
.extension-log h3 { margin: 0; font-size: 1rem; }
.delete-area { margin-top: auto; padding-top: var(--space-lg); text-align: center; }
.insight-summary { display: grid; gap: var(--space-md); }
.insight-total { color: var(--color-text-muted); }
.insight-total strong { margin-right: 6px; color: var(--color-text); font-size: 2.2rem; }
.insight-list { display: grid; gap: var(--space-sm); margin: 0; }
.insight-list div, .breakdown-list li { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); }
.insight-list dt { color: var(--color-text-muted); }
.insight-list dd { margin: 0; font-weight: 750; }
.breakdown-list { display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-md); border-radius: var(--radius-large); background: var(--color-surface); list-style: none; box-shadow: var(--shadow-soft); }
.settings-screen { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; gap: var(--space-md); padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); }
.settings-section { display: grid; gap: var(--space-sm); }
.settings-kicker { color: var(--color-primary); font-size: .72rem; font-weight: 750; letter-spacing: .14em; }
.duration-settings { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin: 0; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.duration-settings legend { padding: 0 4px; font-weight: 700; }
.duration-settings label { display: flex; align-items: center; gap: var(--space-xs); }
.duration-settings input { min-height: auto; }
.data-actions { display: grid; gap: var(--space-sm); }