#pomodoro-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(95vw, 420px); background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 40px 8px; z-index: 1; }
#pomodoro-pause { display: none; }

#pomodoro-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }

.pomodoro-tab { border: none; background: rgba(255, 255, 255, 0.08); color: white; border-radius: 6px; padding: 4px 11px; cursor: pointer; font-size: 18px; }
.pomodoro-tab.active { background: rgba(255, 255, 255, 0.25); }

#pomodoro-timer-wrapper { display: grid; gap: 6px; text-align: center; }

#pomodoro-time { font-size: clamp(48px, 10vw, 128px); margin: 0; }

#pomodoro-controls { display: grid; gap: 5px; margin-top: 3px; padding: 16px 0; }

.duration-row { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 18px; }

.duration-btn { display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; text-align: center; border-radius: 8px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.4); color: white; width: 32px; height: 32px; cursor: pointer; }

#pomodoro-actions { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
#pomodoro-actions button { border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.4); color: white; border-radius: 8px; padding: 4px 10px; cursor: pointer; }

.silent-btn { padding: 6px 12px; border-radius: 4px; background: #444; color: white; border: none; cursor: pointer; }
.silent-btn.silent-active { background: #e74c3c; }

@media all and (max-width: 767px) {
  #pomodoro-tabs { background: rgba(0, 0, 0, 0.45); border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.2); width: fit-content; margin: 0 auto; padding: 5px 10px; }
}