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