.recipe-view{line-height:var(--line-height-relaxed);animation:.4s ease-out fadeInUp}.recipe-view.streaming h1,.recipe-view.streaming .recipe-description,.recipe-view.streaming .recipe-stats,.recipe-view.streaming h2,.recipe-view.streaming .ingredient-groups,.recipe-view.streaming>ul,.recipe-view.streaming .instructions-list,.recipe-view.streaming .notes-list{animation:.35s ease-out both contentFadeIn}.recipe-view.streaming .ingredient-item,.recipe-view.streaming .instructions-list li,.recipe-view.streaming .notes-list li{animation:.25s ease-out both contentSlideIn}@keyframes contentFadeIn{0%{opacity:0}to{opacity:1}}@keyframes contentSlideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.recipe-view h1{margin-top:0;margin-bottom:var(--space-4);font-family:var(--font-family-heading);font-size:var(--font-size-4xl);color:var(--text-primary);letter-spacing:-.03em;font-weight:800;line-height:var(--line-height-tight)}.recipe-byline{font-size:var(--font-size-sm);color:var(--text-muted);margin:0 0 var(--space-4) 0;align-items:center;gap:var(--space-2);display:flex}.recipe-stats{align-items:center;gap:var(--space-6);margin-bottom:var(--space-8);font-size:var(--font-size-sm);color:var(--text-secondary);background-color:var(--bg-surface);padding:var(--space-4) var(--space-6);border-radius:var(--radius-xl);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);flex-wrap:wrap;display:flex}.recipe-stats .stat-item{align-items:center;gap:var(--space-2);display:flex}.recipe-stats .stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}.recipe-stats .stat-value{color:var(--text-primary);font-weight:700;font-size:var(--font-size-base)}.macros-row{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.recipe-description{font-size:var(--font-size-base);color:var(--text-secondary);margin-bottom:var(--space-8);font-weight:400;line-height:1.8}.recipe-action-buttons{gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.recipe-action-btn{padding:var(--space-3);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-secondary);cursor:pointer;transition:var(--transition-base);box-shadow:var(--shadow-sm);justify-content:center;align-items:center;display:flex}.recipe-action-btn-skeleton{width:38px;height:38px}.recipe-action-btn:hover{background-color:var(--bg-tertiary);color:var(--text-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.recipe-action-btn.is-favorite{color:var(--color-accent);background-color:#f59e0b0d;border-color:#f59e0b4d}.recipe-action-btn.is-favorite:hover{background-color:#f59e0b1a}.recipe-action-btn.is-active{color:var(--color-info);background-color:#3b82f60d;border-color:#3b82f64d}.recipe-action-btn.is-active:hover{background-color:#3b82f61a}.recipe-mobile-header{display:none}.recipe-action-buttons-desktop{display:block}@media screen and (width<=768px){.recipe-mobile-header{padding:calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3) calc(56px + var(--space-4));background-color:var(--glass-bg);-webkit-backdrop-filter:blur(var(--blur-md));z-index:100;border-bottom:1px solid var(--glass-border);box-shadow:var(--shadow-sm);justify-content:flex-end;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.recipe-mobile-header .recipe-action-buttons{margin-bottom:0}.recipe-mobile-header .recipe-action-btn{box-shadow:none;background:0 0;border:none}.recipe-mobile-header .recipe-action-btn:hover{background-color:var(--bg-tertiary);box-shadow:none;transform:none}.recipe-mobile-header .recipe-action-btn-skeleton{width:44px;height:44px}.recipe-action-buttons-desktop{display:none}}.recipe-view h2{margin-top:var(--space-8);margin-bottom:var(--space-6);font-family:var(--font-family-heading);font-size:var(--font-size-2xl);color:var(--text-primary);align-items:center;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--border-color);text-transform:uppercase;font-variant:all-small-caps;letter-spacing:.15em;font-weight:700;display:flex}.ingredient-groups,.instructions-list{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-2xl);padding:var(--space-8);box-shadow:var(--shadow-md);transition:var(--transition-base);margin-bottom:var(--space-8);list-style:none}.ingredient-groups:hover,.instructions-list:hover{box-shadow:var(--shadow-lg);border-color:var(--color-primary-light)}.ingredient-group{margin-bottom:var(--space-6)}.ingredient-group ul,.recipe-view>ul{margin:0;padding:0;list-style:none}.ingredient-group:last-child{margin-bottom:0}.ingredient-group-title{font-size:var(--font-size-sm);color:var(--accent-color);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3);margin-top:0;font-weight:700}.ingredient-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-2);border-radius:var(--radius-md);margin-bottom:0;transition:opacity .2s,transform .2s;display:flex}.ingredient-item:active{opacity:.6;transform:scale(.98)}.ingredient-checkbox{appearance:none;cursor:pointer;border:2px solid var(--border-color);background-color:#0000;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;margin-top:.15rem;transition:all .2s;display:flex;position:relative}.ingredient-checkbox:checked{background-color:var(--accent-color);border-color:var(--accent-color)}.ingredient-checkbox:checked:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:6px;height:10px;transform:rotate(45deg)translate(-1px,-1px)}.ingredient-checkbox:hover{border-color:var(--accent-color)}.ingredient-text{color:var(--text-primary);cursor:pointer;flex:1;font-size:17px;line-height:1.6;transition:opacity .2s,-webkit-text-decoration .2s,text-decoration .2s}.ingredient-text.checked{opacity:.5;color:var(--text-muted);text-decoration:line-through}.instructions-list{counter-reset:instruction-counter;gap:var(--space-8);flex-direction:column;list-style:none;display:flex}.instructions-list li{color:var(--text-primary);line-height:1.8;font-size:var(--font-size-base);cursor:pointer;margin-left:40px;padding-left:0;transition:opacity .2s,transform .2s;position:relative}.instructions-list li.completed{opacity:.5}.instructions-list li.completed span{text-decoration:line-through}.instructions-list li.completed:before{background-color:var(--color-gray-400);transform:scale(.9)}.instructions-list li:before{counter-increment:instruction-counter;content:counter(instruction-counter);background-color:var(--accent-color);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.9rem;font-weight:700;display:flex;position:absolute;top:0;left:-40px}.notes-list{padding:0;gap:var(--space-3);flex-direction:column;margin:0;padding-inline-start:0;list-style:none;display:flex}.notes-list li{color:var(--text-secondary);background-color:var(--bg-tertiary);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);line-height:1.7;font-size:var(--font-size-sm);font-style:italic}@media screen and (width<=768px){.recipe-view h1{font-size:var(--font-size-3xl)}.ingredient-groups,.instructions-list{box-shadow:none;margin-bottom:var(--space-6);background-color:#0000;border:none;border-radius:0;padding:0}.ingredient-groups:hover,.instructions-list:hover{box-shadow:none;border-color:#0000}.ingredient-item{padding:var(--space-3) 0;margin-bottom:0}.ingredient-item:last-child{border-bottom:none}.ingredient-group{margin-bottom:var(--space-8)}.ingredient-group-title{margin-bottom:var(--space-4);margin-top:var(--space-2)}.recipe-stats{gap:var(--space-4);padding:var(--space-4);box-shadow:none;border-radius:var(--radius-lg);border:none;grid-template-columns:repeat(2,1fr);align-items:start;display:grid}.recipe-stats .stat-item{flex-direction:column;align-items:flex-start;gap:0}.macros-row{gap:var(--space-4);padding-top:var(--space-2);border-top:1px solid var(--border-color);grid-column:span 2;grid-template-columns:repeat(2,1fr);width:100%;display:grid}.macros-row .stat-item{align-items:baseline;gap:var(--space-2);flex-direction:row}.recipe-action-btn{min-width:44px;min-height:44px}.instructions-list li:before{width:28px;height:28px;font-size:.9rem}.instructions-list li{padding-left:0;padding-bottom:var(--space-4);margin-left:40px}.notes-list li{padding:var(--space-3) 0;border-bottom:1px solid var(--border-color);background-color:#0000;border-radius:0}.notes-list li:last-child{border-bottom:none}}.recipe-image{margin-bottom:var(--space-6);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);transition:transform var(--transition-base);position:relative;overflow:hidden}.recipe-image:hover{transform:scale(1.01)}.recipe-image img{object-fit:cover;width:100%;height:auto;display:block}.recipe-image.clickable{cursor:pointer}.recipe-image-skeleton{aspect-ratio:var(--recipe-image-aspect-ratio,16 / 9);width:100%;display:block}.recipe-image-overlay{z-index:9999;width:100vw;height:100vh;padding:var(--space-4);-webkit-backdrop-filter:blur(5px);background-color:#000000f2;justify-content:center;align-items:center;animation:.3s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.recipe-image-overlay-content{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.recipe-image-overlay-content img{object-fit:contain;border-radius:var(--radius-lg);width:auto;max-width:100%;height:auto;max-height:100%;animation:.3s ease-out scaleIn;box-shadow:0 0 20px #00000080}.close-overlay-btn{top:var(--space-4);right:var(--space-4);color:#fff;cursor:pointer;z-index:10000;-webkit-backdrop-filter:blur(4px);background:#ffffff26;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex;position:absolute}.close-overlay-btn:hover{background:#ffffff40;transform:scale(1.05)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media screen and (width<=768px){.recipe-image-overlay{background-color:#000;padding:0}.recipe-image-overlay-content img{border-radius:0;width:100%}.close-overlay-btn{top:calc(var(--space-4) + env(safe-area-inset-top));right:var(--space-4)}}.streaming-indicator{padding:var(--space-4) 0;align-items:center;display:flex}.dot-pulse{gap:6px;display:inline-flex}.dot-pulse:before,.dot-pulse:after,.dot-pulse{position:relative}.dot-pulse:before,.dot-pulse:after{content:"";background-color:var(--color-primary);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite both dotPulse;display:inline-block}.dot-pulse:before{animation-delay:-.32s}.dot-pulse:after{animation-delay:.16s}@keyframes dotPulse{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.personal-notes-section{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-color)}.personal-notes-title{font-family:var(--font-family-heading);font-size:var(--font-size-base);color:var(--text-primary);margin:0 0 var(--space-4);font-weight:700}.personal-notes-list{margin:0 0 var(--space-4);padding:0;list-style:none}.personal-note-item{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:var(--bg-tertiary);border-radius:var(--radius-lg);margin-bottom:var(--space-2);display:flex}.personal-note-text{color:var(--text-secondary);font-size:var(--font-size-sm);flex:1;line-height:1.5}.personal-note-delete{color:var(--text-muted);cursor:pointer;padding:var(--space-2);border-radius:var(--radius-md);transition:var(--transition-base);background:0 0;border:none;flex-shrink:0}.personal-note-delete:hover{color:var(--color-danger);background-color:var(--color-danger-light)}.personal-note-add{display:flex;position:relative}.personal-note-add input{padding:var(--space-3) var(--space-4);padding-right:calc(var(--space-4) + 32px + var(--space-3));background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-size-sm);transition:var(--transition-base);flex:1}.personal-note-add input:focus{border-color:var(--color-primary);box-shadow:var(--shadow-glow);outline:none}.personal-note-add button{--button-size:32px;right:var(--space-3);width:var(--button-size);height:var(--button-size);background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 2px 4px #00000026}.personal-note-add button:hover:not(:disabled){background-color:var(--color-primary-hover)}.personal-note-add button:disabled{opacity:.5;cursor:not-allowed}.personal-notes-error{color:var(--color-danger);font-size:var(--font-size-sm);margin-top:var(--space-2)}.scroll-to-top-btn{bottom:var(--space-6);right:var(--space-6);z-index:99;background:var(--glass-bg);width:44px;height:44px;-webkit-backdrop-filter:blur(var(--blur-md));border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--transition-base), transform var(--transition-base), background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);justify-content:center;align-items:center;display:flex;position:fixed;transform:translateY(8px)}.scroll-to-top-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.scroll-to-top-btn:hover{background-color:var(--bg-tertiary);color:var(--text-primary);box-shadow:var(--shadow-lg);transform:translateY(-2px)}@media (width<=768px){.scroll-to-top-btn{bottom:calc(var(--space-6) + env(safe-area-inset-bottom));right:var(--space-4)}}