:root{--primary-color: #FF8C69;--secondary-color: #FFDAB9;--background-color: #FFF8E1;--text-color: #4A4A4A;--accent-color: #FFA07A;--card-background: #FFFFFF;--border-color: #E0E0E0;--shadow-color: rgba(0, 0, 0, .1);--hover-color: rgba(255, 140, 105, .2);--active-tab-color: #FF6347;--svg-icon-color: #6D4C41;--svg-icon-hover: #FF8C69;--selected-border-color: var(--primary-color);--card-hover-overlay-bg: rgba(255, 255, 255, .7);--loading-spinner-color: var(--primary-color);--error-icon-color: #f44336}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;background-color:var(--background-color);color:var(--text-color);line-height:1.6;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;box-sizing:border-box}.app-container{width:100%;max-width:960px;margin:20px 0;background-color:var(--card-background);border-radius:12px;box-shadow:0 8px 24px var(--shadow-color);overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - 40px)}.app-header{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:#fff;padding:20px 30px;text-align:center;border-bottom:2px solid var(--secondary-color);position:relative;border-radius:12px 12px 0 0;display:flex;flex-direction:column;align-items:center}.header-content{display:flex;align-items:center;gap:15px;margin-bottom:15px}.header-icon{width:36px;height:36px;stroke:#fff;opacity:.9}.app-header h1{margin:0;font-size:2.2em;text-shadow:1px 1px 3px rgba(0,0,0,.2)}.header-decor-lines{position:absolute;bottom:-10px;left:0;right:0;height:20px;background:repeating-linear-gradient(45deg,var(--secondary-color),var(--secondary-color) 5px,transparent 5px,transparent 10px);opacity:.6}.tab-buttons{display:flex;gap:15px;margin-top:10px;z-index:1}.tab-button{background-color:#fff3;color:#fff;border:none;padding:10px 20px;border-radius:25px;cursor:pointer;font-size:1.1em;display:flex;align-items:center;gap:8px;transition:background-color .3s ease,transform .2s ease,box-shadow .3s ease;text-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 2px 5px #0000001a}.tab-button:hover{background-color:#fff6;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.tab-button.active{background-color:#fff;color:var(--primary-color);font-weight:700;transform:translateY(-2px);box-shadow:0 6px 12px #0003}.tab-button svg{width:20px;height:20px;stroke:currentColor}.search-container{position:relative;margin-top:20px;width:80%;max-width:400px}.search-container input{width:100%;padding:10px 40px 10px 15px;border:1px solid var(--border-color);border-radius:25px;font-size:1em;background-color:#fffc;box-shadow:inset 0 2px 4px var(--shadow-color);transition:box-shadow .3s ease}.search-container input:focus{outline:none;box-shadow:inset 0 2px 4px var(--shadow-color),0 0 0 3px var(--hover-color)}.search-container svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-color);opacity:.7}.app-content{padding:30px;flex-grow:1}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:300px;font-size:1.2em;color:var(--primary-color);text-align:center;gap:15px}.spinner{width:50px;height:50px;animation:rotate 2s linear infinite}.spinner .path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite;stroke:var(--loading-spinner-color);stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.error-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:300px;text-align:center;color:var(--error-icon-color);padding:20px}.error-container svg{width:60px;height:60px;stroke:var(--error-icon-color);margin-bottom:15px}.error-container p{font-size:1.2em;margin-bottom:20px}.retry-button{background-color:var(--error-icon-color);color:#fff;border:none;padding:12px 25px;border-radius:25px;font-size:1em;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.retry-button:hover{background-color:#d32f2f;transform:translateY(-2px)}.empty-state,.no-results-state{text-align:center;padding:50px 20px;color:#888;font-size:1.2em}.no-results-state p{font-style:italic}.recipes-list,.stories-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}.recipe-card,.story-card{background-color:var(--card-background);border-radius:10px;box-shadow:0 4px 12px var(--shadow-color);padding:20px;transition:transform .3s ease,box-shadow .3s ease,border .3s ease;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;height:220px;position:relative;overflow:hidden}.recipe-card:hover,.story-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000026}.recipe-card.selected,.story-card.selected{border:3px solid var(--selected-border-color);transform:translateY(-5px);box-shadow:0 10px 25px #0003}.card-hover-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle,transparent 50%,var(--card-hover-overlay-bg) 100%);opacity:0;transition:opacity .3s ease;pointer-events:none}.recipe-card:hover .card-hover-overlay,.story-card:hover .card-hover-overlay{opacity:1}.recipe-card-header,.story-card-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;z-index:2}.recipe-emoji,.story-emoji{font-size:2.5em;line-height:1}.recipe-title,.story-title{margin:0;font-size:1.6em;color:var(--primary-color);flex-grow:1;z-index:2}.recipe-meta,.story-date{font-size:.95em;color:#777;margin-bottom:15px;display:flex;gap:10px;z-index:2}.recipe-difficulty,.recipe-time{background-color:var(--secondary-color);padding:4px 10px;border-radius:15px;font-weight:500;box-shadow:0 1px 3px #0000001a}.recipe-card-footer,.story-card-footer{text-align:right;margin-top:auto;z-index:2}.recipe-card-footer svg,.story-card-footer svg{width:24px;height:24px;stroke:var(--svg-icon-color);transition:stroke .3s ease}.recipe-card:hover .recipe-card-footer svg,.story-card:hover .story-card-footer svg{stroke:var(--svg-icon-hover)}.recipe-detail{background-color:var(--card-background);border-radius:10px;box-shadow:0 4px 12px var(--shadow-color);padding:30px}.recipe-detail-header{display:flex;align-items:center;gap:15px;margin-bottom:20px;border-bottom:2px dashed var(--border-color);padding-bottom:15px;position:relative}.back-button{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:background-color .3s ease,transform .2s ease;z-index:10}.back-button:hover{background-color:var(--hover-color);transform:scale(1.1)}.back-button svg{width:28px;height:28px;stroke:var(--primary-color)}.recipe-emoji-large,.story-emoji-large{font-size:3.5em;line-height:1;opacity:.8}.recipe-detail h2{margin:0;font-size:2.5em;color:var(--primary-color);flex-grow:1}.recipe-info{display:flex;gap:15px;margin-bottom:25px;font-size:1.1em;font-weight:500}.recipe-difficulty-detail,.recipe-time-detail{background-color:var(--secondary-color);padding:6px 15px;border-radius:20px;box-shadow:0 1px 3px #0000001a}.recipe-section{margin-bottom:25px;padding-left:10px}.recipe-section h4{margin-top:0;margin-bottom:15px;color:var(--primary-color);font-size:1.5em;display:flex;align-items:center;gap:10px}.recipe-section h4>svg{width:24px;height:24px;stroke:var(--primary-color);margin-right:8px}.ingredients-list,.steps-list{list-style:none;padding-left:20px}.ingredients-list li,.steps-list li{margin-bottom:10px;font-size:1.1em}.steps-list li{position:relative;padding-left:35px;line-height:1.8}.steps-list li:before{content:counter(step);counter-increment:step;position:absolute;left:0;top:50%;transform:translateY(-50%);width:28px;height:28px;background-color:var(--secondary-color);color:var(--primary-color);border-radius:50%;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:.9em;border:2px solid var(--primary-color);box-shadow:0 2px 5px var(--shadow-color)}.tip-section{background-color:var(--secondary-color);padding:15px 20px;border-radius:8px;border-left:5px solid var(--primary-color);box-shadow:0 2px 8px #00000014}.tip-section h4{color:var(--primary-color);margin-bottom:10px}.tip-section p{margin:0;font-style:italic}.related-story-section{margin-top:30px;padding-top:20px;border-top:2px dashed var(--border-color)}.related-story-section h4{color:var(--primary-color);font-size:1.5em;margin-bottom:15px;display:flex;align-items:center;gap:10px}.story-card-related{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:8px;padding:15px;display:flex;align-items:center;gap:15px;cursor:pointer;transition:box-shadow .3s ease,transform .2s ease;box-shadow:0 2px 8px #0000000d}.story-card-related:hover{box-shadow:0 4px 10px #0000001a;transform:translateY(-2px)}.story-emoji-related{font-size:3em;line-height:1}.story-content-related{flex-grow:1}.story-title-related{margin:0 0 5px;font-size:1.3em;color:var(--primary-color);font-weight:700}.story-date-related{font-size:.9em;color:#888;margin-bottom:5px}.story-excerpt-related{font-size:1em;color:var(--text-color)}.story-detail{background-color:var(--card-background);border-radius:10px;box-shadow:0 4px 12px var(--shadow-color);padding:30px}.story-detail-header{display:flex;align-items:center;gap:15px;margin-bottom:20px;border-bottom:2px dashed var(--border-color);padding-bottom:15px;position:relative}.story-emoji-large{font-size:3.5em;line-height:1;opacity:.8}.story-detail h2{margin:0;font-size:2.5em;color:var(--primary-color);flex-grow:1}.story-date-detail{font-size:1.1em;color:#777;margin-bottom:25px}.story-content{font-size:1.15em;line-height:1.8;white-space:pre-wrap}.story-footer{text-align:center;margin-top:30px;padding-top:20px;border-top:2px dashed var(--border-color)}.story-footer svg{width:30px;height:30px;stroke:var(--primary-color)}@media (max-width: 768px){.app-container{margin:10px 0;min-height:calc(100vh - 20px);border-radius:0}.app-header,.app-footer{border-radius:0}.app-header h1{font-size:1.8em}.tab-buttons{flex-wrap:wrap;justify-content:center}.tab-button{font-size:1em;padding:8px 15px}.search-container{width:90%}.app-content{padding:20px}.recipe-card,.story-card{height:auto;min-height:200px}.recipe-detail,.story-detail{padding:20px}.recipe-detail-header,.story-detail-header{flex-wrap:wrap;justify-content:center;gap:10px}.recipe-detail h2,.story-detail h2{font-size:2em;width:100%}.recipe-emoji-large,.story-emoji-large{font-size:3em}.back-button{position:absolute;top:20px;left:20px}.recipe-section h4,.related-story-section h4{font-size:1.3em}.ingredients-list li,.steps-list li{font-size:1em}.story-content{font-size:1.1em}.recipe-card-header,.story-card-header{flex-wrap:wrap;justify-content:center;text-align:center}.recipe-title,.story-title{width:100%;font-size:1.4em}.recipe-meta,.story-date{justify-content:center;width:100%}.story-card-related{flex-wrap:wrap;justify-content:center;text-align:center}.story-emoji-related{font-size:2.5em}}@media (max-width: 480px){.app-header h1{font-size:1.5em}.tab-button{font-size:.9em;padding:8px 12px;gap:5px}.tab-button svg{width:18px;height:18px}.search-container input{padding:8px 35px 8px 12px}.search-container svg{right:10px}.app-content,.recipe-detail,.story-detail{padding:15px}.recipe-detail h2,.story-detail h2{font-size:1.8em}.recipe-emoji-large,.story-emoji-large{font-size:2.8em}.back-button{top:15px;left:15px}.back-button svg{width:26px;height:26px}.recipe-section h4{font-size:1.2em}.ingredients-list li,.steps-list li,.story-content{font-size:1em}.recipe-card,.story-card{padding:15px}.recipe-title,.story-title{font-size:1.2em}.recipe-meta,.story-date{font-size:.9em}.recipe-difficulty,.recipe-time{padding:3px 8px}}