*{box-sizing:border-box;color:#333;margin:0;padding:0}body.app{font-family:"Nunito",sans-serif}.app__container{background-color:#fdf6e3;box-shadow:0 10px 30px 0 rgba(70,80,99,.1);margin:0 auto;width:540px}@media screen and (max-width:540px){.app__container{max-width:100%}}.app__host{min-height:calc(100vh - 132px);padding:1rem;padding-bottom:80px;display:grid;grid-template-columns:1fr;gap:1rem;width:100%}.app__header{align-items:center;background-color:#ff6f61;color:white;display:flex;height:72px;justify-content:center;width:100%}.app__title{color:#fff;font-size:1.8rem;font-weight:600}.recipe-card{background:#fff;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.05);margin-bottom:1rem;overflow:hidden;transition:transform 0.2s}.recipe-card:last-child{margin-bottom:0}.recipe-card:hover{transform:translateY(-3px)}.recipe-card__img-wrapper{cursor:pointer;position:relative;width:100%;padding-top:75%;background-color:#ccc;overflow:hidden}.recipe-card__img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.recipe-card__content{padding:0.75rem 1rem}.recipe-card__title{font-size:1.2rem;margin-bottom:0.5rem;font-weight:600}.recipe-card__btn{background-color:#ff6f61;color:white;border:none;padding:0.5rem 1rem;border-radius:5px;cursor:pointer;font-size:0.9rem}.recipe-card__btn:hover{opacity:0.9}.bottom-nav{position:fixed;bottom:0;width:540px;height:60px;display:flex;background-color:#fff;border-top:1px solid #ccc}@media screen and (max-width:540px){.bottom-nav{width:100%}}.bottom-nav__btn{align-items:center;background:none;border:none;cursor:pointer;display:flex;font-size:1rem;font-weight:500;justify-content:center;width:100%}.bottom-nav__btn svg{height:1.5rem;margin-right:0.5rem;width:1.5rem}.bottom-nav__btn svg path{stroke:#333}.bottom-nav__btn--active{background-color:#ff6f61;color:#fff}.bottom-nav__btn--active svg path{stroke:#fff}#recipe-modal{position:fixed;top:0;left:calc(50% - 270px);width:540px;height:100%;background:#fff;display:none;flex-direction:column;z-index:1000;animation:modalEnter 0.35s ease forwards}@media screen and (max-width:540px){#recipe-modal{left:0;width:100%}}#recipe-modal.closing{animation:modalExit 0.35s ease forwards}.modal-appbar{height:56px;display:flex;align-items:center;padding:0 1rem;border-bottom:1px solid #ddd;background:#f9f9f9;position:sticky;top:0;z-index:10}.modal-appbar span{flex:1;text-align:center;font-weight:600;font-size:1.1rem;padding-right:24px}.modal-back{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center}.modal-back svg{height:24px;width:24px}.modal-body{padding:1rem;overflow-y:auto;flex:1}.modal-imgwrap{width:100%;padding-top:56%;position:relative;margin-bottom:1rem;background:#eee}.modal-imgwrap img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:12px}.modal-body h3{font-size:1.1rem;margin-top:1rem;margin-bottom:0.5rem;font-weight:600}.modal-body ol{padding-left:1.2rem}.modal-body p{line-height:1.5;margin-top:0.5rem}@keyframes modalEnter{from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1}}@keyframes modalExit{from{transform:translateY(0);opacity:1} to{transform:translateY(100%);opacity:0}}.empty-state{text-align:center;padding:3rem 1rem;color:#666;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-state__icon{width:100px;height:100px;border-radius:50%;background-color:#f2f2f2;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:2.5rem;color:#bbb}.empty-state__icon img{width:120px;height:auto;opacity:0.9}.empty-state__title{font-size:1.2rem;font-weight:600;margin-bottom:0.3rem}.empty-state__text{font-size:0.95rem;color:#888;max-width:260px;margin:0 auto;line-height:1.4}.snackbar{position:fixed;left:50%;bottom:-50px;transform:translateX(-50%);background:#323232;color:#fff;padding:0.75rem 1.5rem;border-radius:6px;font-size:14px;opacity:0;transition:all 0.3s ease;z-index:9999;min-width:200px;max-width:80%;text-align:center;box-sizing:border-box}.snackbar--visible{bottom:30px;opacity:1}.not-found{text-align:center;padding:2rem}.not-found h1{font-size:5rem;margin:0;color:#e74c3c}.not-found p{margin:1rem 0;font-size:1.2rem}.transition-indicator{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:#333;color:#fff;font-size:0.9rem;padding:0.5rem 1rem;border-radius:6px;display:flex;align-items:center;gap:0.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.3);z-index:9999;opacity:1;transition:opacity 0.3s ease}.transition-indicator.hidden{opacity:0;pointer-events:none}.transition-indicator .spinner{width:14px;height:14px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}