@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:var( --custom-highlight-background, linear-gradient( 90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100% ) );transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media(prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}.history-skeleton{display:flex;flex-direction:column;gap:.125rem}.history-skeleton .skeleton-item{display:flex;align-items:center;height:40px;margin:.125rem 0;padding:0 1rem;border-left:3px solid transparent;box-sizing:border-box}.history-skeleton .skeleton-item .react-loading-skeleton{border-radius:8px}@media(max-width:768px){.history-skeleton{flex-direction:row;flex-wrap:wrap;gap:.5rem}.history-skeleton .skeleton-item{width:120px;height:32px;padding:0 .6rem;box-sizing:border-box}.history-skeleton .skeleton-item .react-loading-skeleton{border-radius:20px}}.layout{display:flex;min-height:100vh}.sidebar{width:280px;flex-shrink:0;background-color:var(--sidebar-bg);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));border-right:1px solid var(--sidebar-border);padding:var(--space-4);padding-top:calc(var(--space-4) + env(safe-area-inset-top));padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom));height:100vh;height:100dvh;position:fixed;top:0;left:0;overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column;overflow-x:hidden;transition:width var(--transition-base),padding var(--transition-base),transform var(--transition-base);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:50}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background-color:transparent}.sidebar:hover::-webkit-scrollbar-thumb{background-color:var(--border-color)}.sidebar.collapsed{width:72px;padding:var(--space-4) var(--space-2)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);padding:0 var(--space-2);height:40px}.sidebar-header-actions{display:flex;align-items:center;gap:var(--space-2);transition:gap var(--transition-base)}.sidebar.collapsed .sidebar-header-actions{gap:0}.theme-toggle,.sidebar-toggle{width:36px;height:36px;padding:0;background-color:transparent;border:1px solid transparent;border-radius:var(--radius-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sidebar-text);transition:var(--transition-base)}.theme-toggle:hover,.sidebar-toggle:hover{background-color:var(--sidebar-hover);color:var(--sidebar-text-light)}.theme-toggle:hover{color:var(--color-accent)}.sidebar.collapsed .theme-toggle{width:0;opacity:0;margin:0;border-width:0;pointer-events:none}.sidebar-logo-container{display:flex;align-items:center;gap:var(--space-3);padding-left:var(--space-1);width:auto;max-width:200px;opacity:1;overflow:hidden;transition:max-width var(--transition-base),opacity var(--transition-base)}.sidebar-logo{font-family:var(--font-family-heading);font-size:1.25rem;font-weight:700;color:var(--sidebar-text-light);margin:0;letter-spacing:-.02em;white-space:nowrap}.sidebar.collapsed .sidebar-logo-container{max-width:0;opacity:0;padding:0;width:0;pointer-events:none}.sidebar.collapsed .sidebar-header{justify-content:center}.sidebar-content{display:block;flex:1;min-height:0;overflow-y:auto;opacity:1;transition:opacity var(--transition-base)}.sidebar-content.collapsed{opacity:0;pointer-events:none}.new-recipe-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;margin:0 0 var(--space-6) 0;padding:.875rem 1rem;background:var(--color-primary);color:#fff;text-decoration:none;border:none;border-radius:var(--radius-xl);font-size:var(--font-size-sm);font-weight:600;transition:var(--transition-base);box-sizing:border-box;flex-shrink:0;white-space:nowrap;box-shadow:0 4px 6px -1px #10b9814d;overflow:hidden}.new-recipe-btn:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 8px 10px -2px #10b98166}.new-recipe-btn:active{transform:translateY(0)}.new-recipe-btn.collapsed{opacity:0;pointer-events:none;height:0;margin:0;padding:0}.new-recipe-icon{font-size:1.2rem}.sidebar-filters{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4);padding:0 var(--space-1);transition:opacity var(--transition-base)}.sidebar-filters.collapsed{opacity:0;pointer-events:none}.search-input{width:100%;padding:.5rem .75rem;background-color:var(--sidebar-input-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-lg);color:var(--sidebar-text-light);font-size:.9rem;box-sizing:border-box;transition:var(--transition-base);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{outline:none;background-color:var(--bg-surface);border-color:var(--color-primary);box-shadow:0 0 0 3px #10b98126}.favorites-filter{display:flex;align-items:center;gap:.6rem;padding:.6rem .875rem;background-color:transparent;border:1px solid var(--sidebar-border);border-radius:var(--radius-lg);color:var(--sidebar-text);font-size:.85rem;font-weight:500;cursor:pointer;transition:var(--transition-base)}.favorites-filter:hover{background-color:var(--sidebar-hover);color:var(--sidebar-text-light)}.favorites-filter.active{background-color:#f59e0b1a;border-color:#f59e0b4d;color:var(--color-accent)}.favorites-filter.active:hover{background-color:#f59e0b33}.history-list{display:flex;flex-direction:column;gap:2px}.history-item{display:flex;align-items:center;justify-content:space-between;text-decoration:none;padding:.6rem .75rem;margin:1px 0;border-radius:var(--radius-md);background-color:transparent;color:var(--sidebar-text);font-size:.9rem;font-weight:500;transition:var(--transition-fast);box-sizing:border-box;position:relative}.history-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.history-item:hover,.history-item:has(.history-item-menu-btn.active){background-color:var(--sidebar-hover);color:var(--sidebar-text-light)}.history-item.active{background-color:var(--sidebar-active);color:var(--color-primary-dark)}[data-theme=dark] .history-item.active{color:var(--color-primary-light)}.history-item-menu-container{position:relative;flex-shrink:0;margin-left:var(--space-2);display:flex}.history-item-menu-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;color:var(--text-muted);cursor:pointer;opacity:0;border-radius:var(--radius-sm);transition:var(--transition-fast)}.history-item:hover .history-item-menu-btn,.history-item-menu-btn:focus,.history-item-menu-btn.active,.history-item-menu-container:hover .history-item-menu-btn{opacity:1}.history-item-menu-btn:hover,.history-item-menu-btn.active{background-color:#0000000d;color:var(--sidebar-text-light)}.history-item-dropdown{position:absolute;right:0;top:100%;margin-top:4px;background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);min-width:160px;overflow:hidden;z-index:1000;animation:dropdownFadeIn .2s cubic-bezier(.16,1,.3,1);transform-origin:top right}@keyframes dropdownFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.history-dropdown-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:none;border:none;color:var(--sidebar-text);font-size:.85rem;font-weight:500;cursor:pointer;transition:background-color .15s;text-align:left}.history-dropdown-item:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.history-dropdown-item.is-favorite{color:var(--color-accent)}.history-dropdown-item.delete{color:var(--color-danger)}.history-dropdown-item.delete:hover{background-color:var(--color-danger-light)}.no-history,.history-loading{color:var(--text-muted);font-size:.85rem;padding:var(--space-4);text-align:center;font-style:italic}.sidebar-footer{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--sidebar-border);position:relative;transition:opacity var(--transition-base)}.sidebar-footer.collapsed{opacity:0;pointer-events:none}.profile-btn{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:.75rem;background-color:transparent;border:none;border-radius:var(--radius-lg);cursor:pointer;color:var(--sidebar-text);font-size:.9rem;font-weight:500;text-align:left;transition:var(--transition-base)}.profile-btn:hover{background-color:var(--sidebar-hover);color:var(--sidebar-text-light)}.profile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-dropdown{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden;animation:slideUpFade .2s cubic-bezier(.16,1,.3,1)}@keyframes slideUpFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.profile-dropdown .dropdown-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:.875rem 1rem;background:none;border:none;text-align:left;cursor:pointer;color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:background-color .15s}.profile-dropdown .dropdown-item:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.auth-actions{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-2)}.login-btn,.signup-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem;border-radius:var(--radius-lg);font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;transition:var(--transition-base);box-sizing:border-box}.login-btn{background-color:transparent;border:1px solid var(--sidebar-border);color:var(--sidebar-text)}.login-btn:hover{background-color:var(--sidebar-hover);color:var(--sidebar-text-light);border-color:var(--sidebar-text-light)}.signup-btn{background-color:var(--color-primary);border:1px solid var(--color-primary);color:#fff;box-shadow:var(--shadow-md)}.signup-btn:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.main-content{flex:1;margin-left:280px;padding:var(--space-10);display:flex;justify-content:center;transition:margin-left var(--transition-base);width:calc(100% - 280px)}.main-content:has(.home-page.centered){padding:0}.main-content>*{width:100%;max-width:900px}.sidebar-collapsed .main-content{margin-left:72px;width:calc(100% - 72px)}.mobile-logo{font-family:var(--font-family-heading);font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:0;flex:1;text-align:center}.sidebar-overlay{position:fixed;inset:0;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:49;touch-action:none;animation:fadeIn .3s ease}body.sidebar-open{overflow:hidden}.mobile-menu-toggle{position:fixed;top:calc(var(--space-3) + env(safe-area-inset-top));left:var(--space-4);z-index:101;width:40px;height:40px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;background-color:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-primary);box-shadow:var(--shadow-md);cursor:pointer;transition:var(--transition-base);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mobile-menu-toggle:hover{background-color:var(--bg-tertiary);transform:translateY(-1px)}.mobile-menu-toggle:active{transform:translateY(0)}@media(max-width:768px){.layout{padding-top:0}.sidebar{width:280px;padding:var(--space-4);z-index:1000;transform:translate(0);box-shadow:var(--shadow-xl)}.sidebar.collapsed{transform:translate(-100%);width:280px;padding:var(--space-4)}.sidebar:not(.collapsed) .new-recipe-btn.collapsed,.sidebar:not(.collapsed) .sidebar-filters.collapsed,.sidebar:not(.collapsed) .sidebar-footer.collapsed{opacity:1;pointer-events:auto;height:auto;margin:0 0 var(--space-6) 0;padding:.875rem 1rem}.sidebar:not(.collapsed) .sidebar-logo-container{max-width:200px;opacity:1;width:auto}.sidebar .sidebar-header{margin-bottom:var(--space-6)}.main-content{margin-left:0!important;width:100%;padding:var(--space-4)}.sidebar-collapsed .main-content{margin-left:0!important;width:100%}.history-item{height:44px}.history-item .history-item-menu-container{display:none}}.react-tooltip{background-color:var(--color-gray-800)!important;color:var(--color-gray-50)!important;font-size:.85rem!important;padding:.5rem .75rem!important;border-radius:var(--radius-md)!important;box-shadow:var(--shadow-lg)!important;opacity:1!important;z-index:100000!important}[data-theme=dark] .react-tooltip{background-color:var(--color-gray-100)!important;color:var(--color-gray-900)!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}