:root{--color-bg-dark: #121212;--color-bg-card: #1e1e1e;--color-text-primary: #e0e0e0;--color-text-secondary: #a0a0a0;--color-accent: #d4a373;--color-accent-hover: #b08968;--color-danger: #ef476f;--color-success: #06d6a0;--font-family-base: "Inter", system-ui, -apple-system, sans-serif;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-md: 12px;--radius-lg: 24px;--radius-full: 9999px;--shadow-card: 0 4px 20px rgba(0, 0, 0, .5);--shadow-elevation: 0 8px 30px rgba(0, 0, 0, .6)}*{box-sizing:border-box}body{margin:0;background-color:var(--color-bg-dark);color:var(--color-text-primary);font-family:var(--font-family-base);display:flex;justify-content:center;min-height:100vh;padding:var(--spacing-md)}.app-container{width:100%;max-width:480px;margin:auto}.card{background-color:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--spacing-lg);transition:transform .2s ease,box-shadow .2s ease}.header{text-align:center;margin-bottom:var(--spacing-sm)}.header h1{font-size:2rem;margin:0;color:var(--color-accent);font-weight:700;letter-spacing:-.5px}.subtitle{color:var(--color-text-secondary);margin:var(--spacing-sm) 0 0 0;font-size:.9rem;letter-spacing:1px;text-transform:uppercase}.control-group-row{display:flex;gap:var(--spacing-md)}.control-group.half{flex:1}.control-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.control-group label{font-size:.9rem;font-weight:600;color:var(--color-text-secondary);margin-left:var(--spacing-sm)}.input-wrapper{display:flex;align-items:center;background:#ffffff0d;border-radius:var(--radius-md);padding:var(--spacing-md);border:1px solid transparent;transition:border-color .2s}.input-wrapper:focus-within{border-color:var(--color-accent)}.input-wrapper input{background:transparent;border:none;color:var(--color-text-primary);font-size:1.5rem;width:100%;outline:none;font-weight:700}.unit{color:var(--color-text-secondary);font-weight:600;font-size:1.2rem}.toggle-group{display:flex;background:#ffffff0d;border-radius:var(--radius-md);padding:4px;gap:4px}.toggle-group button{flex:1;background:transparent;color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-sm);border-radius:var(--radius-sm);font-weight:500;transition:all .2s;font-size:.9rem}.toggle-group button.active{background-color:var(--color-accent);color:var(--color-bg-dark);font-weight:700;box-shadow:0 2px 8px #0003}.helper-text{font-size:.8rem;color:var(--color-text-secondary);margin:0;margin-left:var(--spacing-sm);font-style:italic;min-height:1.2em}.recipe-summary{display:flex;justify-content:space-between;background:#d4a3731a;padding:var(--spacing-md);border-radius:var(--radius-md);margin-top:var(--spacing-sm);border:1px solid rgba(212,163,115,.2)}.summary-item{display:flex;flex-direction:column;align-items:center}.summary-item .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--color-accent);margin-bottom:4px}.summary-item .value{font-size:1.2rem;font-weight:700}.btn-primary,.btn-secondary,.btn-circle{transition:transform .1s,opacity .2s}.btn-primary:active,.btn-secondary:active,.btn-circle:active{transform:scale(.98)}.btn-primary{background-color:var(--color-accent);color:var(--color-bg-dark);padding:var(--spacing-md);border-radius:var(--radius-md);font-size:1.1rem;font-weight:700;width:100%;margin-top:var(--spacing-sm);box-shadow:0 4px 15px #d4a3734d}.btn-primary:hover{background-color:var(--color-accent-hover)}.btn-secondary{background:transparent;color:var(--color-text-secondary);border:1px solid rgba(255,255,255,.1);padding:var(--spacing-md);border-radius:var(--radius-md);width:100%}.btn-secondary:hover{background:#ffffff0d;color:var(--color-text-primary)}.timer-container{height:100%;justify-content:space-between}.prep-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.prep-display{text-align:center;animation:pulse 1s infinite}.prep-count{font-size:8rem;font-weight:800;color:var(--color-accent)}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}to{transform:scale(1);opacity:1}}.timer-header{display:flex;justify-content:space-between;align-items:center;width:100%}.total-time-small{font-size:.8rem;color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.next-step-preview{margin-top:var(--spacing-md);padding:8px;background:#d4a3731a;border-radius:var(--radius-sm);color:var(--color-accent);font-size:.9rem;opacity:0;transform:translateY(10px);transition:all .3s ease}.next-step-preview.visible{opacity:1;transform:translateY(0)}.next-step-preview p{margin:0}.timer-badge{background:#ffffff1a;padding:4px 12px;border-radius:var(--radius-full);font-size:.8rem;text-transform:uppercase;letter-spacing:1px}.main-timer{font-size:5rem;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;color:var(--color-text-primary);text-shadow:0 0 30px rgba(0,0,0,.5);padding:var(--spacing-lg) 0}.instruction-box{text-align:center;background:#ffffff08;border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.step-instruction{font-size:1.4rem;margin:0 0 var(--spacing-md) 0;color:var(--color-accent)}.water-stats{display:flex;justify-content:center;align-items:center;gap:var(--spacing-lg)}.stat{display:flex;flex-direction:column}.stat.divider{width:1px;height:30px;background:#ffffff1a}.stat .label{font-size:.8rem;color:var(--color-text-secondary);margin-bottom:4px}.stat .value{font-size:1.5rem;font-weight:700}.progress-bar-container{display:flex;gap:4px;height:8px;width:100%;margin-bottom:var(--spacing-lg);background:#ffffff0d;border-radius:var(--radius-full);overflow:hidden}.progress-segment{background-color:#ffffff1a;transition:background-color .3s}.progress-segment.active{background-color:var(--color-accent);box-shadow:0 0 10px var(--color-accent)}.progress-segment.completed{background-color:var(--color-accent-hover);opacity:.5}.action-buttons{display:flex;flex-direction:column;gap:var(--spacing-md)}.btn-primary.pause{background-color:#ffffff1a;color:var(--color-text-primary);box-shadow:none}.finished-message h3{font-size:1.8rem;color:var(--color-success);margin:0}.recipe-footer{margin-top:auto;padding-top:var(--spacing-md);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;align-items:center;gap:var(--spacing-sm);font-size:.75rem;color:var(--color-text-secondary);width:100%;flex-wrap:wrap}.recipe-footer .divider{color:#fff3}