/* pomodoro.style.css - Final Golden Version */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #343A40; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #F0F4F8; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; }
#app-container { background-color: #ffffff; padding: 2rem; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); width: 100%; max-width: 450px; text-align: center; margin: 20px; }
.hidden { display: none !important; }
#mode-switcher { display: flex; justify-content: center; background-color: #e9ecef; border-radius: 99px; padding: 5px; margin: 1rem auto; width: fit-content; }
.mode-btn { padding: 8px 20px; border: none; background-color: transparent; border-radius: 99px; font-weight: 700; color: #495057; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.mode-btn.active { background-color: #ffffff; color: #1976D2; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.stopwatch-active .timer-mode-only { display: none !important; }
#welcome-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 20px; box-sizing: border-box; }
#welcome-box { background: white; padding: 2rem 3rem; border-radius: 16px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.2); width: 100%; max-width: 400px; box-sizing: border-box; }
#ios-install-popup { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; border-top: 1px solid #ddd; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); z-index: 2000; padding: 20px; box-sizing: border-box; transform: translateY(100%); transition: transform 0.3s ease-in-out; }
#ios-install-popup.visible { transform: translateY(0); }
#ios-install-box { text-align: center; width: 100%; max-width: 350px; margin: 0 auto; }
#ios-install-box h3 { margin-top: 0; font-size: 1.2rem; }
#ios-install-box p { margin: 0.5rem 0 1rem 0; line-height: 1.5; }
#welcome-message { margin: 0; font-size: 1.5rem; color: #343A40; font-weight: 700; }
#logo-container { margin-bottom: 1rem; }
#welcome-logo, #logo { max-height: 60px; width: auto; }
#phase-indicator { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; }
.work-mode #phase-indicator { color: #2E7D32; }
.break-mode #phase-indicator { color: #1976D2; }
#motivational-message { font-size: 1rem; color: #6c757d; height: 24px; margin: 0.5rem 0 1rem 0; font-style: italic; }
#timer-display { font-size: 6rem; font-weight: 700; line-height: 1.1; margin: 1rem 0; }
.button-look, #timer-controls button, #continue-btn, #ios-install-close-btn, #enable-notifications-btn { font-size: 1rem; font-weight: 700; padding: 12px 25px; margin: 5px 8px; border-radius: 8px; border: none; cursor: pointer; transition: transform 0.1s ease, background-color 0.2s ease; text-decoration: none; display: inline-block; color: white; }
.button-look:hover, #timer-controls button:hover, #continue-btn:hover, #ios-install-close-btn:hover, #enable-notifications-btn:hover { transform: translateY(-2px); }
#start-btn, #continue-btn, #enable-notifications-btn { background-color: #1976D2; }
#stop-btn { background-color: #D32F2F; }
#ios-install-close-btn, .button-look { background-color: #6c757d; color: white !important; }
#timer-controls button:disabled, #enable-notifications-btn:disabled { background-color: #BDBDBD; color: #757575; transform: none; cursor: not-allowed; }
#name-input { display: block; width: 100%; padding: 12px; margin: 1rem 0; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; box-sizing: border-box; }
select, input[type="number"] { padding: 8px; border-radius: 6px; border: 1px solid #ccc; font-family: 'Inter', sans-serif; font-size: 1rem; }
input[type="number"] { width: 80px; }
#category-section, #pattern-selector, #custom-inputs, #reports-link-container, #game-info, #settings-container { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid #E0E0E0; display: flex; flex-direction: column; align-items: center; gap: 15px; }
#category-section, #custom-inputs { flex-direction: row; justify-content: center; }
label { font-weight: 700; }
#add-category-btn, #delete-category-btn { background: none; border: 1px solid #ccc; font-size: 1.2rem; font-weight: 700; cursor: pointer; padding: 5px 10px; border-radius: 6px; line-height: 1; margin: 0; width: auto; }
#add-category-btn { color: #2E7D32; border-color: #2E7D32; }
#delete-category-btn { color: #D32F2F; border-color: #D32F2F; padding: 5px 8px; }
#game-info h3, #settings-container h4 { margin: 0 0 1rem 0; font-size: 1.5rem; width: 100%; text-align: center; }
#game-info p { margin: 0.25rem 0; }
#xp-bar-container { width: 100%; max-width: 300px; background-color: #e9ecef; border-radius: 99px; height: 12px; overflow: hidden; }
#xp-bar { height: 100%; background-color: #ffc107; border-radius: 99px; width: 0%; transition: width 0.5s ease-in-out; }
#settings-container { gap: 10px; }
.settings-item { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 320px; }
.notification-controls { display: flex; align-items: center; gap: 10px; }
#notification-status-text { font-size: 0.9rem; color: #6c757d; font-style: italic; }
footer { border-top: 1px solid #E0E0E0; color: #6c757d; font-size: 0.8rem; margin-top: 2rem; padding-top: 1rem; }