:root{--font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-base: 16px;--line-height-base: 1.6;--color-primary: #3b82f6;--color-primary-dark: #2563eb;--color-primary-light: #60a5fa;--color-secondary: #8b5cf6;--color-secondary-dark: #7c3aed;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-bg-primary: #1e293b;--color-bg-secondary: #0f172a;--color-bg-tertiary: #334155;--color-bg-hover: #475569;--color-text-primary: #f1f5f9;--color-text-secondary: #cbd5e1;--color-text-tertiary: #94a3b8;--color-text-inverse: #0f172a;--color-border: #334155;--color-border-light: #1e293b;--color-border-dark: #475569;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-modal: 300;--z-toast: 400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base)}body{font-family:var(--font-family);line-height:var(--line-height-base);color:var(--color-text-primary);background-color:var(--color-bg-secondary);margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--color-text-primary);margin:0}h1{font-size:2.5rem;letter-spacing:-.02em}h2{font-size:1.875rem;letter-spacing:-.01em}h3{font-size:1.5rem}h4{font-size:1.25rem}p{margin:0}button{font-family:inherit;font-size:1rem;font-weight:600;line-height:1.5;border-radius:var(--radius-lg);border:1px solid transparent;padding:.625rem 1.25rem;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);text-decoration:none;white-space:nowrap}button:disabled{opacity:.6;cursor:not-allowed}button:focus-visible{outline:3px solid var(--color-primary-light);outline-offset:2px}input,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;color:var(--color-text-primary);background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.625rem .875rem;transition:all var(--transition-fast);width:100%}input:hover,select:hover{border-color:var(--color-border-dark)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #f59e0b1a}input:disabled,select:disabled,textarea:disabled{background-color:var(--color-bg-tertiary);cursor:not-allowed;opacity:.6}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}label{display:block;font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes progressPulse{0%,to{box-shadow:0 0 #f59e0b66}50%{box-shadow:0 0 0 8px #f59e0b00}}@media(min-width:640px){h1{font-size:3rem}h2{font-size:2rem}}@media(min-width:1024px){h1{font-size:3.5rem}}.app{max-width:1200px;margin:0 auto;padding:var(--spacing-md);width:100%;flex:1;display:flex;flex-direction:column}.app-header{text-align:center;padding:var(--spacing-xl) var(--spacing-md);margin-bottom:var(--spacing-xl);animation:fadeIn var(--transition-slow)}.app-header h1{font-size:2.5rem;margin:0 0 var(--spacing-sm) 0;color:var(--color-primary);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-weight:800}.app-subtitle{font-size:1.125rem;color:var(--color-text-secondary);margin:0}.permission-banner{background:linear-gradient(135deg,var(--color-info) 0%,var(--color-secondary) 100%);color:#fff;padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-top:var(--spacing-lg);box-shadow:var(--shadow-md);animation:slideIn var(--transition-base)}.permission-banner p{margin-bottom:var(--spacing-md);font-weight:500}.permission-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.permission-buttons .btn-primary{background-color:#fff;color:var(--color-info);border:none}.permission-buttons .btn-primary:hover{background-color:#e0e7ff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.permission-buttons .btn-secondary{background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3)}.permission-buttons .btn-secondary:hover{background-color:#ffffff4d}.app-main{flex:1}.app-layout{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.input-section{display:flex;flex-direction:column;gap:var(--spacing-lg)}.egg-form{background:var(--color-bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:0 8px 24px #00000026,0 2px 6px #0000001a;border:1px solid rgba(59,130,246,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.egg-form h2{font-size:1.5rem;margin-bottom:var(--spacing-lg);color:var(--color-text-primary)}.egg-form form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-group{display:flex;flex-direction:column;text-align:left}.form-group label{display:flex;flex-direction:column;gap:var(--spacing-xs);font-size:.875rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.025em}.error-message{background-color:#ef44441a;color:#fca5a5;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:.875rem;font-weight:500;border-left:4px solid var(--color-error);animation:fadeIn var(--transition-fast)}.add-button{background-color:var(--color-primary);color:#fff;font-weight:700;padding:.75rem 1.5rem;margin-top:var(--spacing-sm);border:none;box-shadow:0 4px 12px #3b82f640;transition:all var(--transition-fast);border-radius:var(--radius-lg)}.add-button:hover:not(:disabled){background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 8px 20px #3b82f659}.add-button:active:not(:disabled){transform:translateY(0)}.form-disabled-message{font-size:.875rem;color:var(--color-text-tertiary);font-style:italic;margin-top:var(--spacing-sm)}.egg-list{background:var(--color-bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:0 8px 24px #00000026,0 2px 6px #0000001a;border:1px solid rgba(59,130,246,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.egg-list h3{font-size:1.25rem;margin-bottom:var(--spacing-md);color:var(--color-text-primary)}.egg-list-total{font-size:.875rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);font-weight:500}.egg-list-empty{color:var(--color-text-tertiary);text-align:center;padding:var(--spacing-2xl) var(--spacing-md);font-size:1rem}.egg-list-items{display:flex;flex-direction:column;gap:var(--spacing-md)}.egg-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);background:linear-gradient(135deg,var(--color-bg-secondary) 0%,rgba(30,41,59,.8) 100%);border:1px solid rgba(59,130,246,.15);border-radius:var(--radius-lg);transition:all var(--transition-fast);animation:fadeIn var(--transition-base);position:relative;box-shadow:0 2px 8px #0000001a}.egg-item:hover{border-color:var(--color-primary);box-shadow:0 4px 16px #3b82f633;transform:translateY(-2px)}.egg-item.active-egg,.egg-item.time-to-add{border-color:var(--color-success);background-color:#10b98126;box-shadow:0 0 0 3px #10b98133;animation:pulse 2s infinite}.egg-info{flex:1;text-align:left}.egg-main-info{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);flex-wrap:wrap}.egg-main-info span{font-size:.95rem;font-weight:600;color:var(--color-text-primary)}.egg-timing-info{display:flex;align-items:center;gap:var(--spacing-md);font-size:.875rem;color:var(--color-text-secondary);flex-wrap:wrap}.egg-main{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.egg-icon{font-size:1.5rem}.egg-details{font-size:.95rem;font-weight:600;color:var(--color-text-primary)}.egg-meta{font-size:.75rem;color:var(--color-text-secondary);display:flex;gap:var(--spacing-md);margin-left:2.5rem}.egg-actions{display:flex;gap:var(--spacing-sm)}.remove-button{background-color:#ef44441a;color:var(--color-error);border:1px solid rgba(239,68,68,.3);padding:.5rem 1rem;font-size:1rem;min-width:2.5rem;font-weight:700;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.remove-button:hover:not(:disabled){background-color:var(--color-error);color:#fff;border-color:transparent;transform:scale(1.05);box-shadow:0 4px 12px #ef444459}.remove-button:disabled{opacity:.5;cursor:not-allowed}.add-now-indicator{background-color:var(--color-success);color:#fff;padding:.375rem .75rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:700;animation:pulse 1.5s infinite;box-shadow:var(--shadow-md);margin-top:var(--spacing-sm);display:inline-flex;align-items:center;gap:var(--spacing-xs)}.delete-button{background-color:transparent;color:var(--color-error);border:1px solid var(--color-error);padding:.5rem 1rem;font-size:.875rem}.delete-button:hover:not(:disabled){background-color:var(--color-error);color:#fff}.add-now-badge{background-color:var(--color-success);color:#fff;padding:.375rem .75rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;animation:pulse 1s infinite}.timer-section{display:flex;flex-direction:column;gap:var(--spacing-xl)}.timer-display{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:0 12px 48px #3b82f64d,0 4px 16px #2563eb33;text-align:center;position:relative;overflow:hidden}.timer-display:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}.timer-status{font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--spacing-md);opacity:.9}.timer-time{font-size:4rem;font-weight:700;letter-spacing:-.02em;margin:var(--spacing-md) 0;font-variant-numeric:tabular-nums;text-shadow:0 2px 4px rgba(0,0,0,.1)}.timer-phase{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-lg);opacity:.9}.timer-progress{margin-top:var(--spacing-xl)}.progress-bar{width:100%;height:1rem;background-color:#fff3;border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-text-inverse) 0%,rgba(255,255,255,.9) 100%);border-radius:var(--radius-full);transition:width var(--transition-base);box-shadow:var(--shadow-sm)}.progress-label{font-size:.875rem;font-weight:600;margin-top:var(--spacing-sm);opacity:.9}.cooling-info{margin-top:var(--spacing-md);font-size:1rem;font-weight:500;padding:var(--spacing-sm);background-color:#ffffff26;border-radius:var(--radius-md)}.timer-controls{background:var(--color-bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:0 8px 24px #00000026,0 2px 6px #0000001a;border:1px solid rgba(59,130,246,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:center}.timer-controls button{min-width:120px;font-weight:600;padding:.875rem 1.75rem}.start-button{background-color:var(--color-success);color:#fff;border:none;box-shadow:0 4px 12px #10b98140;font-weight:700}.start-button:hover:not(:disabled){background-color:#059669;transform:translateY(-2px);box-shadow:0 8px 20px #10b98159}.pause-button{background-color:var(--color-warning);color:#fff;border:none;box-shadow:0 4px 12px #f59e0b40;font-weight:700}.pause-button:hover:not(:disabled){background-color:#d97706;transform:translateY(-2px);box-shadow:0 8px 20px #f59e0b59}.reset-button{background-color:transparent;color:var(--color-error);border:2px solid var(--color-error);font-weight:700}.reset-button:hover:not(:disabled){background-color:var(--color-error);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #ef444459}.no-eggs-message{color:var(--color-text-tertiary);font-size:.875rem;text-align:center;padding:var(--spacing-md);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);font-style:italic}.notification-container{position:fixed;top:var(--spacing-md);right:var(--spacing-md);z-index:var(--z-toast);max-width:400px;width:100%;display:flex;flex-direction:column;gap:var(--spacing-sm);pointer-events:none}.notification-banner{background-color:var(--color-bg-primary);border-left:4px solid var(--color-info);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);display:flex;align-items:flex-start;gap:var(--spacing-md);animation:slideIn var(--transition-base);pointer-events:auto}.notification-banner.type-add_egg{border-left-color:var(--color-success);background-color:#10b98126}.notification-banner.type-boiling_done{border-left-color:var(--color-primary);background-color:#3b82f626}.notification-banner.type-cooling_done{border-left-color:var(--color-info);background-color:#3b82f626}.notification-content{flex:1}.notification-message{font-weight:600;color:var(--color-text-primary);margin:0;font-size:.95rem}.notification-dismiss{background-color:transparent;border:none;color:var(--color-text-secondary);padding:0;min-width:auto;font-size:1.25rem;line-height:1;cursor:pointer;transition:color var(--transition-fast)}.notification-dismiss:hover{color:var(--color-text-primary)}.app-footer{text-align:center;padding:var(--spacing-xl) var(--spacing-md);margin-top:var(--spacing-2xl);color:var(--color-text-tertiary);font-size:.875rem;border-top:1px solid var(--color-border-light)}.app-footer strong{color:var(--color-text-secondary);font-weight:600}@media(min-width:640px){.app{padding:var(--spacing-xl)}.app-header h1{font-size:3rem}.app-subtitle{font-size:1.25rem}.egg-form form{display:grid;grid-template-columns:minmax(80px,120px) minmax(130px,1fr) minmax(150px,1fr) auto;gap:var(--spacing-md);align-items:end}.error-message,.form-disabled-message{grid-column:1 / -1}.timer-time{font-size:5rem}.notification-container{top:var(--spacing-xl);right:var(--spacing-xl)}}@media(min-width:1024px){.app{padding:var(--spacing-2xl)}.app-header h1{font-size:3.5rem}.app-layout{grid-template-columns:1fr 1fr;gap:var(--spacing-2xl)}.timer-time{font-size:6rem}.timer-section{position:sticky;top:var(--spacing-xl);align-self:start}}@media print{.permission-banner,.notification-container,.timer-controls,.delete-button,.add-button{display:none}}