.timer-container { text-align: center; padding: 5rem 2rem; position: relative; }
.timer-ring {
    width: 320px; height: 320px; margin: 0 auto 3.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-light);
    box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.5),
        0 0 0 15px var(--bg),
        0 0 0 18px var(--border);
    position: relative; transition: var(--transition);
}
.timer-ring.running {
    box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.5),
        0 0 0 15px var(--bg),
        0 0 0 18px var(--primary),
        0 0 40px var(--primary-glow);
}
.timer-display { 
    font-size: 6rem; font-weight: 900; color: #fff; 
    font-variant-numeric: tabular-nums; letter-spacing: -3px;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.timer-ring.running .timer-display { color: var(--primary); text-shadow: 0 0 30px var(--primary-glow); }

.timer-controls { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 4rem; }
.controls-btn { 
    padding: 0; width: 80px; height: 80px; border-radius: 50%; 
    font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
}
#start-btn { width: 140px; border-radius: var(--radius-full); }

.session-info { 
    font-size: 1.25rem; color: var(--text-light); background: var(--bg);
    padding: 2rem; border-radius: var(--radius-md); border: 1px solid var(--border);
}
.mode-toggle { 
    display: inline-flex; background: var(--bg); padding: 0.5rem;
    border-radius: var(--radius-full); margin-bottom: 4rem;
    border: 1px solid var(--border);
}
.mode-btn { 
    background: transparent; color: var(--text-light); border: none; 
    padding: 1rem 2.5rem; border-radius: var(--radius-full); font-weight: 800; 
    transition: var(--transition); cursor: pointer; font-size: 1.1rem;
}
.mode-btn:hover { color: #fff; }
.mode-btn.active { color: #fff; background: var(--primary); box-shadow: 0 0 15px var(--primary-glow); }

@media (max-width: 768px) {
    .timer-container { padding: 2rem 1rem; }
    .timer-ring { width: 260px; height: 260px; margin-bottom: 2.5rem; }
    .timer-display { font-size: 4.5rem; }
    .mode-toggle { flex-direction: column; width: 100%; border-radius: var(--radius-md); }
    .mode-btn { width: 100%; border-radius: var(--radius-md); }
    .timer-controls { flex-wrap: wrap; }
    #start-btn { width: 100%; order: -1; margin-bottom: 1rem; }
}