: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-sm: 10px;--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}button,input,textarea,select{font:inherit}button{border:none;cursor:pointer}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}.top-action-row{display:flex;justify-content:flex-end;gap:var(--spacing-sm)}.top-action-row-wrap{justify-content:space-between;align-items:center;flex-wrap:wrap}.top-action-row-tight{align-items:center;flex-wrap:wrap}.status-pill,.mode-banner{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 14px;border-radius:var(--radius-full);background:#d4a3731f;border:1px solid rgba(212,163,115,.2);color:var(--color-accent);font-size:.85rem;line-height:1.4}.status-pill-email{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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}.screen-header,.section-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md)}.section-title{font-size:1.6rem;margin:0}.screen-copy,.item-meta{color:var(--color-text-secondary);margin:var(--spacing-sm) 0 0 0;line-height:1.5}.mini-title{margin:0;font-size:1rem}.section-note{color:var(--color-text-secondary);font-size:.8rem;white-space:nowrap}.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}.primary-input-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.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)}.compact-group label{margin-left:0;font-size:.8rem}.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}.compact-input{padding:10px 12px;min-height:52px}.compact-input input{font-size:1.05rem}.unit{color:var(--color-text-secondary);font-weight:600;font-size:1.2rem}.compact-unit{font-size:.85rem}.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:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spacing-md);background:#d4a3731a;padding:var(--spacing-md);border-radius:var(--radius-md);margin-top:var(--spacing-sm);border:1px solid rgba(212,163,115,.2)}.recipe-summary-grid .summary-item{min-width:calc(50% - var(--spacing-md))}.summary-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;text-align:center}.summary-item .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--color-accent);margin-bottom:4px;line-height:1.2}.summary-item .value{font-size:1.2rem;font-weight:700;line-height:1.2;width:100%}.btn-primary,.btn-secondary,.btn-circle,.btn-ghost{transition:transform .1s,opacity .2s}.btn-primary:active,.btn-secondary:active,.btn-circle:active,.btn-ghost:active{transform:scale(.98)}.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled{cursor:not-allowed;opacity:.55;transform:none}.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)}.btn-ghost{background:#ffffff0d;color:var(--color-text-primary);border-radius:var(--radius-full);padding:10px 16px;white-space:nowrap}.btn-ghost:hover{background:#ffffff17}.btn-inline{width:auto;margin-top:0;padding:10px 16px}.button-row{display:flex;flex-direction:column;gap:var(--spacing-md)}.text-area-field,.input-wrapper select{width:100%;background:#ffffff0d;border:1px solid transparent;border-radius:var(--radius-md);color:var(--color-text-primary);padding:var(--spacing-md);outline:none}.text-area-field:focus,.input-wrapper select:focus{border-color:var(--color-accent)}.text-area-field{resize:vertical;min-height:110px}.discreet-note-field{min-height:96px;line-height:1.55;color:var(--color-text-primary);background:#ffffff0a;border-color:#ffffff14}.discreet-note-field::placeholder{color:#e0e0e061}.input-wrapper.read-only{opacity:.8}.detail-grid,.history-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-md)}.compact-history-list{gap:12px}.history-entry-card,.history-editor-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px}.review-entry-card{padding:20px}.history-entry-top{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md);margin-bottom:14px}.history-entry-title-block{display:flex;flex-direction:column;gap:4px}.history-compact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.history-metric{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px;min-width:0}.history-metric strong{font-size:1rem;line-height:1.2}.history-edit-grid{margin-bottom:4px}.history-note-card{margin-top:14px;padding:14px 15px;border-radius:14px;background:#ffffff06;border:1px solid rgba(255,255,255,.06)}.history-note-copy{margin:8px 0 0;color:#e0e0e0db;line-height:1.6;font-size:.95rem;white-space:pre-wrap}.modern-history-list{gap:12px}.history-entry-card-modern{padding:16px;border-radius:22px;background:linear-gradient(180deg,#ffffff0b,#ffffff04),#ffffff06;border-color:#ffffff0f;box-shadow:inset 0 1px #ffffff08,0 10px 30px #0000002e}.history-entry-actions{display:flex;flex-direction:column;gap:8px;width:96px}.history-action-btn{min-height:42px;padding:10px 12px}.history-entry-top-modern{align-items:center;margin-bottom:12px}.history-entry-title-block-modern{flex:1;min-width:0;gap:6px}.history-entry-title-block-modern strong{font-size:1.12rem;line-height:1.15;letter-spacing:-.02em}.history-entry-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--color-text-secondary);font-size:.82rem}.history-meta-divider{opacity:.4}.history-balance-text,.history-stage-text{color:#e0e0e0d1}.history-entry-actions-modern{width:auto;flex-direction:row;align-items:center}.history-action-btn-modern{min-height:38px;padding:8px 14px;border-radius:var(--radius-full);background:#ffffff09}.history-stats-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.history-metric-modern{padding:11px 12px;border-radius:16px;background:#ffffff08;border-color:#ffffff0d}.history-metric-modern strong{font-size:1rem;letter-spacing:-.02em}.history-note-card-modern{margin-top:12px;padding:12px 14px;border-radius:16px;background:#ffffff05;border-color:#ffffff0d}.history-note-card-modern .history-note-copy{margin-top:6px;font-size:.92rem;line-height:1.55;color:#e0e0e0c2}.history-delete-btn{color:#ff9b9b;border-color:#ef476f38;background:#ef476f08}.history-delete-btn:hover{background:#ef476f14;color:#ffd0d0}.detail-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;flex-direction:column;gap:4px}.detail-label{color:var(--color-text-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.section-block{display:flex;flex-direction:column;gap:var(--spacing-md)}.auth-panel{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.google-auth-shell{display:flex;flex-direction:column;gap:10px}.google-auth-button{width:100%;min-height:44px}.auth-helper-text,.mode-note{margin:0;color:var(--color-text-secondary);line-height:1.5}.section-block-tight{gap:var(--spacing-sm)}.step-list,.editable-step-list,.history-list,.history-steps-preview{display:flex;flex-direction:column;gap:var(--spacing-md)}.step-card,.editable-step-card,.history-item,.edit-panel{background:#ffffff08;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-md);padding:var(--spacing-md)}.step-card-header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.step-card-body p{margin:0 0 var(--spacing-sm) 0}.tag-row{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tag{display:inline-flex;align-items:center;background:#d4a37324;color:var(--color-accent);border:1px solid rgba(212,163,115,.2);border-radius:var(--radius-full);padding:6px 12px;font-size:.8rem}.step-edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-md)}.history-step-row{display:flex;justify-content:space-between;gap:var(--spacing-md);color:var(--color-text-secondary);font-size:.9rem}.saved-note{margin:0;color:var(--color-text-secondary);line-height:1.5}.empty-state{background:#ffffff08;border:1px dashed rgba(255,255,255,.12);border-radius:var(--radius-md);padding:var(--spacing-xl);text-align:center}.empty-state h3,.finished-message h3{font-size:1.8rem;color:var(--color-success);margin:0}.empty-state p{margin:var(--spacing-sm) 0 0 0;color:var(--color-text-secondary);line-height:1.5}.empty-state-action{margin-top:var(--spacing-lg)}.error-banner{margin:0;color:#ff9b9b;background:#ef476f1f;border:1px solid rgba(239,71,111,.22);border-radius:var(--radius-md);padding:12px 14px;line-height:1.5}.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}.timer-total-inline{align-self:flex-end;text-align:right;width:100%}.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}.next-step-title{margin-bottom:4px}.next-step-copy{color:var(--color-text-primary);opacity:.88;line-height:1.45}.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}.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}.made-by-card{text-align:center;font-size:.75rem;color:var(--color-text-secondary);opacity:.6;font-style:italic;margin-top:calc(var(--spacing-sm) * -1)}@media(max-width:640px){body{padding:12px}.card{padding:18px;gap:18px}.screen-header,.section-row,.history-step-row,.timer-header{flex-direction:column;align-items:stretch}.control-group-row{gap:12px}.primary-input-grid{gap:8px}.top-action-row-wrap{align-items:stretch}.status-pill-email,.mode-banner{max-width:100%;white-space:normal}.compact-group{gap:6px}.compact-input{padding:8px 10px;min-height:46px}.compact-input input{font-size:.95rem}.compact-unit{font-size:.75rem}.compact-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px;padding:12px}.compact-summary .summary-item .label{font-size:.68rem}.compact-summary .summary-item .value{font-size:1rem}.detail-grid,.history-summary-grid,.step-edit-grid{grid-template-columns:1fr}.history-compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.history-entry-top{flex-direction:column;align-items:stretch}.history-stats-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.history-entry-top-modern{align-items:flex-start;margin-bottom:10px;gap:10px}.history-entry-card-modern{padding:12px;border-radius:18px}.history-entry-title-block-modern{gap:4px}.history-entry-title-block-modern strong{font-size:1rem;line-height:1.15}.history-entry-meta{gap:4px;font-size:.74rem}.history-balance-text,.history-stage-text{font-size:.74rem}.history-entry-actions-modern{width:auto;justify-content:flex-end;flex-wrap:nowrap;gap:6px}.history-action-btn-modern{flex:0 0 auto;min-width:0;min-height:32px;padding:6px 10px;font-size:.82rem}.history-metric-modern{padding:9px 10px;border-radius:12px;gap:2px}.history-metric-modern .detail-label{font-size:.62rem;letter-spacing:.06em}.history-metric-modern strong{font-size:.9rem;line-height:1.1}.history-note-card-modern{margin-top:10px;padding:10px 11px;border-radius:12px}.history-note-card-modern .detail-label{font-size:.62rem}.history-note-card-modern .history-note-copy{font-size:.84rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.history-edit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.main-timer{font-size:4rem}.prep-count{font-size:6rem}}