.timer-display { display: flex; flex-direction: column; align-items: center; padding: var(--space-xl) 0; position: relative; }
.countdown-ring-container { position: relative; width: min(280px, calc(100vw - 3rem)); height: min(280px, calc(100vw - 3rem)); margin-bottom: var(--space-lg); }
.countdown-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown-ring-bg { fill: none; stroke: var(--bg-tertiary); stroke-width: 8; }
.countdown-ring-progress { fill: none; stroke: var(--color-work); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease; }
.countdown-ring-progress[data-type="rest"] { stroke: var(--color-rest); }
.countdown-ring-progress[data-type="prep"] { stroke: var(--color-prep); }
.countdown-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.countdown-time { font-size: 4rem; font-weight: 800; font-family: var(--font-mono); line-height: 1; letter-spacing: -0.02em; }
.countdown-label { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--space-xs); }
.countdown-label[data-type="work"] { color: var(--color-work); }
.countdown-label[data-type="rest"] { color: var(--color-rest); }
.countdown-label[data-type="prep"] { color: var(--color-prep); }
.timer-info { text-align: center; margin-bottom: var(--space-lg); }
.timer-round { font-size: 1.125rem; font-weight: 600; color: var(--text-secondary); }
.timer-total { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--space-xs); }
.timer-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-md); }
.timer-btn { width: 56px; height: 56px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); font-size: 1.25rem; }
.timer-btn:active { transform: scale(0.93); }
.timer-btn-play { width: 72px; height: 72px; background: var(--color-work); color: white; }
.timer-btn-play.paused { background: var(--color-prep); }
.timer-btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); }

/* State backgrounds with colorblind-friendly patterns */
.timer-display.state-work { background: var(--color-work-bg); border-radius: var(--radius-xl); }
.timer-display.state-rest { background: var(--color-rest-bg); border-radius: var(--radius-xl); }
.timer-display.state-prep { background: var(--color-prep-bg); border-radius: var(--radius-xl); }

/* Colorblind-friendly shape indicators */
.timer-display.state-work::before {
    content: '';
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
    background: repeating-linear-gradient(45deg, var(--color-work) 0px, var(--color-work) 2px, transparent 2px, transparent 6px);
    border-radius: 50%; border: 3px solid var(--color-work);
}
.timer-display.state-rest::before {
    content: '';
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
    background: radial-gradient(circle, var(--color-rest) 2px, transparent 2px) 0 0 / 6px 6px;
    border: 3px solid var(--color-rest);
}
.timer-display.state-prep::before {
    content: '';
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
    background: repeating-linear-gradient(0deg, var(--color-prep) 0px, var(--color-prep) 2px, transparent 2px, transparent 6px);
    border-radius: 4px; border: 3px solid var(--color-prep);
}

.interval-progress { display: flex; gap: 2px; margin-bottom: var(--space-md); padding: 0 var(--space-md); }
.interval-dot { flex: 1; height: 4px; background: var(--bg-tertiary); border-radius: 2px; transition: background var(--transition); }
.interval-dot.done { background: var(--color-work); }
.interval-dot.current { background: var(--color-accent); }
.rep-counter { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); padding: var(--space-md); background: var(--bg-secondary); border-radius: var(--radius-lg); }
.rep-count { font-size: 2rem; font-weight: 800; font-family: var(--font-mono); min-width: 60px; text-align: center; }
.rep-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-primary); color: var(--text-primary); font-size: 1.5rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
.rep-btn:active { transform: scale(0.9); }
.completion { text-align: center; padding: var(--space-2xl) var(--space-md); }
.completion-check { width: 80px; height: 80px; border-radius: 50%; background: var(--color-work); color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); font-size: 2rem; }
.completion h2 { margin-bottom: var(--space-md); }
.completion-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin: var(--space-lg) 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-day-header { text-align: center; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); padding: var(--space-xs) 0; }
.calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; border-radius: var(--radius-sm); color: var(--text-secondary); }
.calendar-day.today { font-weight: 700; color: var(--text-primary); }
.calendar-day.has-workout { background: var(--color-work-bg); color: var(--color-work); font-weight: 600; }
.calendar-day.has-workout.multi { background: var(--color-work); color: white; }
.streak-display { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.streak-flame { font-size: 1.5rem; }
.streak-count { font-size: 1.5rem; font-weight: 800; }
.streak-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
.hr-zones { display: flex; flex-direction: column; gap: var(--space-xs); }
.hr-zone { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: 0.8125rem; }
.hr-zone-bar { height: 8px; border-radius: 4px; flex: 1; }

/* Small phone adjustments */
@media (max-width: 375px) {
    .countdown-time { font-size: 3rem; }
    .countdown-label { font-size: 0.875rem; }
    .timer-btn { width: 48px; height: 48px; }
    .timer-btn-play { width: 64px; height: 64px; }
    .completion-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
}

/* Landscape mode */
@media (orientation: landscape) and (max-height: 500px) {
    .countdown-ring-container { width: min(200px, 40vh); height: min(200px, 40vh); }
    .countdown-time { font-size: 2.5rem; }
    .timer-display { padding: var(--space-sm) 0; }
}