:root{--color-bg: #0f172a;--color-surface: #1e293b;--color-surface-alt: #334155;--color-surface-hover: #475569;--color-primary: #06b6d4;--color-primary-hover: #0891b2;--color-primary-light: rgba(6, 182, 212, .1);--color-secondary: #8b5cf6;--color-secondary-hover: #7c3aed;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-text-dark: #1e293b;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-border: #334155;--color-border-light: #475569;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(6, 182, 212, .3);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--max-width: 1400px;--header-height: 64px;--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out;--z-dropdown: 100;--z-sticky: 200;--z-modal: 300;--z-tooltip: 400}*{margin:0;padding:0;box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh;background-image:radial-gradient(circle at 80% 0%,rgba(6,182,212,.08),transparent 28rem)}.skip-link{position:fixed;top:0;left:1rem;z-index:1000;transform:translateY(-120%);padding:.75rem 1rem;background:var(--color-primary);color:var(--color-text-dark);border-radius:0 0 var(--radius-md) var(--radius-md)}.skip-link:focus{transform:translateY(0)}.lang-btn.active,.nav-link.active{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-light)}.app-intro{max-width:var(--max-width);margin:0 auto;padding:var(--spacing-xl) var(--spacing-lg) 0;display:flex;align-items:end;justify-content:space-between;gap:var(--spacing-lg)}.app-intro h1{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15}.app-intro p{max-width:38rem;color:var(--color-text-muted)}.eyebrow{color:var(--color-primary);font-size:var(--text-xs);font-weight:800;letter-spacing:.14em}.header{background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-alt) 100%);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) 0;position:sticky;top:0;z-index:var(--z-sticky);box-shadow:var(--shadow-md)}.header-content{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.logo{font-size:var(--text-2xl);font-weight:700;color:var(--color-primary);text-decoration:none;display:flex;align-items:center;gap:var(--spacing-sm)}.logo:hover{color:var(--color-primary-hover)}.nav{display:flex;gap:var(--spacing-md);align-items:center;flex-wrap:wrap}.nav-link{color:var(--color-text);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast);font-weight:500}.nav-link:hover{background:var(--color-primary-light);color:var(--color-primary)}.lang-buttons{display:flex;gap:var(--spacing-xs)}.lang-btn{background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--spacing-xs)}.lang-btn:hover{background:var(--color-surface-hover);border-color:var(--color-primary)}.lang-btn img{width:18px;height:12px}.app{min-height:calc(100vh - var(--header-height))}.app-container{max-width:var(--max-width);margin:0 auto;padding:var(--spacing-lg);display:grid;grid-template-columns:320px 1fr 320px;gap:var(--spacing-lg);min-height:calc(100vh - var(--header-height))}.app-container>*,.sidebar-left,.sidebar-right,.recipe-detail{min-width:0}.sidebar-left{display:flex;flex-direction:column;gap:var(--spacing-md)}.search-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md)}.search-panel h2{margin-bottom:var(--spacing-sm);font-size:var(--text-xl)}.filter-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);color:var(--color-text-muted);font-size:var(--text-sm)}.favorite-filter{padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-text-muted);background:transparent;border:1px solid var(--color-border);border-radius:999px;cursor:pointer}.favorite-filter.active{color:var(--color-warning);border-color:var(--color-warning);background:#f59e0b1a}.search-box{position:relative;margin-bottom:var(--spacing-md)}.search-icon{position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#searchInput{width:100%;padding:var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 2.5rem;background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-base);transition:all var(--transition-fast)}#searchInput:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.clear-btn{position:absolute;right:var(--spacing-sm);top:50%;transform:translateY(-50%);background:var(--color-surface-alt);color:var(--color-text-muted);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:var(--text-sm);display:none;align-items:center;justify-content:center;transition:all var(--transition-fast)}.clear-btn:not([hidden]){display:flex}.clear-btn.visible{display:flex}.clear-btn:hover{background:var(--color-error);color:#fff}.quantity-control{margin-bottom:var(--spacing-md)}.quantity-control label{display:block;margin-bottom:var(--spacing-sm);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500}.quantity-buttons{display:flex;gap:var(--spacing-xs);align-items:center}.quantity-buttons button{background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);width:36px;height:36px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-lg);font-weight:600;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.quantity-buttons button:hover{background:var(--color-primary);color:var(--color-text-dark);border-color:var(--color-primary)}.quantity-buttons input{flex:1;padding:var(--spacing-sm);background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);text-align:center;font-size:var(--text-base);min-width:60px}.quantity-buttons input:focus{outline:none;border-color:var(--color-primary)}.btn-small{width:auto!important;padding:0 var(--spacing-sm)!important;font-size:var(--text-sm)!important}.filter-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.filter-btn{background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-xs);transition:all var(--transition-fast);white-space:nowrap}.filter-btn:hover{background:var(--color-surface-hover);color:var(--color-text)}.filter-btn.active{background:var(--color-primary);color:var(--color-text-dark);border-color:var(--color-primary);font-weight:600}.recipes-list{flex:1;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-sm);overflow-y:auto;max-height:calc(100vh - 280px);min-height:300px}.recipe-item{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast);margin-bottom:var(--spacing-xs);display:flex;align-items:center;gap:var(--spacing-sm);border:1px solid transparent}.recipe-select{min-width:0;flex:1;display:flex;align-items:center;gap:var(--spacing-sm);padding:0;border:0;color:inherit;background:transparent;text-align:left;cursor:pointer}.recipe-item-content span{display:block}.recipe-item:hover{background:var(--color-surface-hover);border-color:var(--color-border)}.recipe-item.active{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.recipe-item-image{width:40px;height:40px;object-fit:contain;border-radius:var(--radius-sm);background:var(--color-bg);flex-shrink:0}.recipe-item-content{flex:1;min-width:0}.recipe-item-name{font-weight:500;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recipe-item-category{font-size:var(--text-xs);color:var(--color-text-muted)}.recipe-item-favorite{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-lg);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}.recipe-item-favorite:hover{color:var(--color-warning);transform:scale(1.2)}.recipe-item-favorite.active{color:var(--color-warning)}.loading{text-align:center;padding:var(--spacing-xl);color:var(--color-text-muted)}.empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-muted)}.recipe-detail{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);overflow-y:auto;max-height:calc(100vh - 120px)}.detail-quantity{padding:var(--spacing-md);margin-bottom:var(--spacing-xl);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg)}.detail-quantity>label{display:block;margin-bottom:var(--spacing-sm);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:700}.detail-actions{display:flex;justify-content:center}.ingredient-type{margin-left:auto;padding:.15rem .45rem;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-muted);font-size:var(--text-xs);white-space:nowrap}.ingredient-subrecipe{border-color:#06b6d473!important}.ingredient-link{border:0;color:var(--color-primary);background:none;font:inherit;font-weight:700;text-align:left;cursor:pointer}.resource-dot{display:inline-block;width:.45rem;height:.45rem;margin-right:.5rem;border-radius:50%;background:var(--color-secondary)}.error-message{padding:var(--spacing-xl);color:var(--color-error);text-align:center}.recipe-detail-image{width:150px;height:150px;object-fit:contain;background:var(--color-bg);border-radius:var(--radius-lg);padding:var(--spacing-md);margin:0 auto var(--spacing-lg);display:block}.recipe-detail-header{text-align:center;margin-bottom:var(--spacing-lg)}.recipe-detail-title{font-size:var(--text-2xl);font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-sm)}.recipe-detail-category{display:inline-block;background:var(--color-primary-light);color:var(--color-primary);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;margin-bottom:var(--spacing-md)}.recipe-detail-description{color:var(--color-text-muted);text-align:center;margin-bottom:var(--spacing-lg);line-height:1.6}.recipe-detail-section{margin-bottom:var(--spacing-xl)}.recipe-detail-section-title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-text);display:flex;align-items:center;gap:var(--spacing-sm)}.ingredients-list{list-style:none;padding:0}.ingredients-list li{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);display:flex;justify-content:space-between;align-items:center}.ingredient-name{font-weight:500}.ingredient-quantity{color:var(--color-primary);font-weight:600}.sub-recipes{margin-top:var(--spacing-md);padding-left:var(--spacing-lg);border-left:3px solid var(--color-primary)}.sub-recipe{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);cursor:pointer;transition:all var(--transition-fast)}.sub-recipe:hover{border-color:var(--color-primary);transform:translate(4px)}.sub-recipe-title{font-weight:600;color:var(--color-primary);margin-bottom:var(--spacing-sm)}.sub-recipe-ingredients{font-size:var(--text-sm);color:var(--color-text-muted)}.favorite-btn{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:var(--text-xl);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.favorite-btn:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}.favorite-btn.active{color:var(--color-warning);border-color:var(--color-warning)}.recipe-detail-wrapper{position:relative}.recap-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);position:sticky;top:calc(var(--header-height) + var(--spacing-lg));max-height:calc(100vh - 120px);overflow-y:auto}.recap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border)}.recap-header h2{font-size:var(--text-xl);font-weight:700;color:var(--color-primary)}.toggle-btn{background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.toggle-btn:hover{background:var(--color-surface-hover)}.toggle-btn.collapsed{transform:rotate(-90deg)}.recap-content{transition:all var(--transition-normal)}.recap-content.collapsed{display:none}.recap-empty{text-align:center;padding:var(--spacing-xl);color:var(--color-text-muted);font-size:var(--text-sm)}.recap-total{display:flex;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary-light);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-weight:600}.recap-list{list-style:none;padding:0}.recap-item{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm)}.recap-item-name{flex:1;font-weight:500}.recap-item-quantity{color:var(--color-primary);font-weight:600;margin-left:var(--spacing-sm)}.recap-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.recap-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);font-weight:500;transition:all var(--transition-fast)}.recap-btn:hover,.recap-btn-primary{background:var(--color-primary);color:var(--color-text-dark);border-color:var(--color-primary)}.recap-btn-primary:hover{background:var(--color-primary-hover)}@media(max-width:1024px){.app-container{grid-template-columns:280px 1fr}.sidebar-right{grid-column:1 / -1}.recap-panel{position:static;max-height:none}}@media(max-width:767px){.app-intro{align-items:start;flex-direction:column;padding-top:var(--spacing-lg)}.app-container{grid-template-columns:1fr;padding:var(--spacing-md)}.header-content{gap:var(--spacing-sm)}.logo{width:100%;justify-content:center}.nav{flex:1;gap:0}.lang-btn span{display:none}.recipe-detail{max-height:none}.recipes-list{max-height:300px}.recipe-detail-image{width:120px;height:120px}}@media(max-width:420px){.header-content{padding:0 var(--spacing-sm)}.nav-link{padding-inline:var(--spacing-sm)}.recipe-detail{padding:var(--spacing-md)}.ingredients-list li{flex-wrap:wrap;gap:var(--spacing-xs)}.ingredient-type{order:3;margin-left:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.recipe-item{animation:fadeIn var(--transition-fast) ease-in-out}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}