*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
 --pri:#E67E22;--pri-l:#D35400;--pri-p:#FFF4E6;
 --acc:#F39C12;--acc-l:#E67E22;--acc-p:#FFF9F0;
 --bg:#FFF9F0;--bg-c:#FFFFFF;--bg-d:#2C1810;
 --tx:#2C1810;--tx-s:#5D4037;--tx-l:#8D6E63;
 --sh:0 2px 12px rgba(140,80,50,.1);--sh-lg:0 8px 30px rgba(140,80,50,.15);
 --sh-xl:0 16px 48px rgba(140,80,50,.2);
 --r:16px;--rs:12px;--rx:8px;
 --t:all .3s cubic-bezier(.4,0,.2,1);
 --grad:linear-gradient(135deg,#E67E22,#F39C12,#FF9F43);
 --safe-t:env(safe-area-inset-top,0px);
 --safe-b:env(safe-area-inset-bottom,0px);
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;overflow-x:hidden;min-height:100vh}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;font-family:inherit;background:none}
input,select,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#D7CCC8;border-radius:4px}
::selection{background:var(--pri-l);color:#fff}
.container{max-width:1440px;margin:0 auto;padding:0 20px}

/* ===== 🔧 ИСПРАВЛЕНИЕ: МОДАЛЬНЫЕ ОКНА И Z-INDEX ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(44,24,16,.5);z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:20px;backdrop-filter:blur(3px);overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-c);border-radius:var(--r);max-width:850px;width:100%;margin:20px auto;position:relative;animation:mIn .3s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column;max-height:95vh;z-index:2000 !important}
@keyframes mIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}

.header{position:sticky;top:0;z-index:1000;background:var(--grad);box-shadow:0 2px 20px rgba(140,80,50,.15);padding-top:var(--safe-t)}
.header-inner{display:flex;align-items:center;gap:12px;height:64px;padding:0 16px;max-width:1440px;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-icon{font-size:1.7rem}.logo-text{font-size:1.25rem;font-weight:800;color:#fff}.logo-text span{color:#FFF9C4}
.search-wrap{flex:1;max-width:500px;position:relative;min-width:0;transition:var(--t)}
.search-wrap .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:.95rem;opacity:.65;pointer-events:none;z-index:2;transition:var(--t)}
#searchInput{width:100%;padding:9px 16px 9px 40px;border:2px solid rgba(255,255,255,.2);border-radius:50px;background:rgba(255,255,255,.12);color:#0b0b0b;font-size:.88rem;transition:var(--t);-webkit-appearance:none}
#searchInput::placeholder{color:rgba(255,255,255,.6)}
#searchInput:focus{outline:none;background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
.header-actions{display:flex;gap:5px;flex-shrink:0}
.h-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.05rem;display:flex;align-items:center;justify-content:center;transition:var(--t);position:relative}
.h-btn:hover{background:rgba(255,255,255,.25);transform:scale(1.06)}
.h-btn .badge{position:absolute;top:-2px;right:-2px;background:var(--acc-l);color:#fff;font-size:.6rem;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 4px}
.h-btn .badge.show{display:flex}

.search-close{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(230,126,34,.2);border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;color:#fff;cursor:pointer;z-index:3;align-items:center;justify-content:center;transition:var(--t)}
.search-close:active{background:rgba(230,126,34,.4);transform:translateY(-50%) scale(.95)}
.search-overlay{display:none;position:fixed;inset:0;background:rgba(44,24,16,.5);z-index:999;opacity:0;transition:opacity .3s ease;backdrop-filter:blur(2px)}
.search-overlay.active{display:block;opacity:1}
body.search-open{overflow:hidden}

.hero{background:linear-gradient(135deg,#D35400 0%,#E67E22 40%,#F39C12 70%,#FF9F43);color:#fff;padding:48px 20px 36px;text-align:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:radial-gradient(circle at 30% 70%,rgba(255,255,255,.04),transparent 60%),radial-gradient(circle at 70% 30%,rgba(255,255,255,.03),transparent 50%);animation:heroF 12s ease-in-out infinite alternate}
@keyframes heroF{to{transform:translate(3%,-3%)}}.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.hero p{font-size:clamp(.85rem,2vw,1.05rem);opacity:.85;max-width:600px;margin:0 auto 20px}
.hero-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.hero-stat{text-align:center;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);padding:8px 18px;border-radius:50px;border:1px solid rgba(255,255,255,.18)}
.stat-num{font-size:1.1rem;font-weight:700;display:block}.stat-label{font-size:.72rem;opacity:.8}

.categories{display:flex;gap:8px;padding:16px 20px;max-width:1440px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.categories::-webkit-scrollbar{display:none}
.cat-btn{flex-shrink:0;padding:9px 18px;border-radius:50px;font-size:.82rem;font-weight:600;background:var(--bg-c);border:2px solid #E8D5C4;color:var(--tx);transition:var(--t);white-space:nowrap}
.cat-btn:hover{border-color:var(--pri-l);color:var(--pri-l)}
.cat-btn.active{background:var(--pri-l);color:#fff;border-color:var(--pri-l)}
.cat-btn:disabled{opacity:.5;cursor:not-allowed}

.toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 20px 10px;max-width:1440px;margin:0 auto;flex-wrap:wrap;gap:10px}
.toolbar-left .results-info{font-size:.85rem;color:var(--tx-l)}.toolbar-left .results-info strong{color:var(--tx)}
.toolbar-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sort-label{font-size:.82rem;color:var(--tx-l);font-weight:600;display:flex;align-items:center;gap:6px}
#sortSelect{padding:6px 10px;border:2px solid #E8D5C4;border-radius:var(--rx);font-size:.8rem;background:var(--bg-c);color:var(--tx);cursor:pointer}
#sortSelect:focus{outline:none;border-color:var(--pri-l)}
.view-toggle{display:flex;gap:3px}
.v-btn{width:32px;height:32px;border-radius:var(--rx);display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:var(--t);color:var(--tx-l)}
.v-btn.active{background:var(--pri-l);color:#fff}

.main-content{max-width:1440px;margin:0 auto;padding:10px 20px 30px}
.recipes-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));transition:all .3s ease}
.recipes-grid.list-view{grid-template-columns:1fr!important;gap:16px}
.recipes-grid.list-view .r-card{flex-direction:row!important;height:auto;min-height:150px}
.recipes-grid.list-view .r-img{width:200px!important;min-width:200px;height:150px!important;flex-shrink:0}
.recipes-grid.list-view .r-img img{position:static!important;width:100%;height:100%;object-fit:cover}
.recipes-grid.list-view .r-img .re{font-size:3rem}
.recipes-grid.list-view .r-body{flex:1;padding:12px 16px;display:flex;flex-direction:column;justify-content:center}
.recipes-grid.list-view .r-desc{-webkit-line-clamp:3;margin-bottom:10px}

.r-card{background:var(--bg-c);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:var(--t);cursor:pointer;display:flex;flex-direction:column;opacity:0;transform:translateY(12px);will-change:transform,opacity}
.r-card.visible{opacity:1;transform:none}
.r-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.r-img{height:190px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--grad)}
.r-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;position:absolute;top:0;left:0;z-index:1}
.r-card:hover .r-img img{transform:scale(1.08)}
.r-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent, rgba(44,24,16,.4));pointer-events:none;z-index:2}
.r-img .re{font-size:4.2rem;filter:drop-shadow(0 4px 8px rgba(140,80,50,.12));z-index:3}
.r-img img + .re{display:none}
.r-badge{position:absolute;left:10px;top:10px;z-index:4;background:rgba(255,255,255,.95);backdrop-filter:blur(4px);padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:700;color:var(--pri-l);box-shadow:0 2px 8px rgba(0,0,0,.15);white-space:nowrap}
.r-fav{position:absolute;right:10px;top:10px;z-index:4;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:var(--t)}
.r-fav:hover{transform:scale(1.1);background:#fff}.r-fav.is-fav{color:#e53935}
.r-rating{position:absolute;right:10px;bottom:10px;z-index:4;background:rgba(255,255,255,.95);backdrop-filter:blur(4px);padding:4px 8px;border-radius:20px;font-size:.75rem;font-weight:700;color:var(--tx);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.r-body{padding:14px;flex:1;display:flex;flex-direction:column}
.r-body h3{font-size:1rem;font-weight:700;margin-bottom:4px;color:var(--pri);line-height:1.3}
.r-body .r-desc{font-size:.78rem;color:var(--tx-s);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.r-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}.r-meta span{display:flex;align-items:center;gap:3px;font-size:.72rem;color:var(--tx-l)}
.r-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:1px solid #F5EEE6}
.r-diff{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:50px}.d-e{background:#FFF4E6;color:#D35400}.d-m{background:#FFF9F0;color:#E67E22}.d-h{background:#FFEBEE;color:#C62828}
.r-tags{display:flex;gap:4px;flex-wrap:wrap}.r-tag{background:var(--pri-p);color:var(--pri-l);padding:2px 7px;border-radius:50px;font-size:.62rem;font-weight:600}

.no-results{text-align:center;padding:50px 20px;display:none}.nr-emoji{font-size:3.5rem;margin-bottom:10px}
.no-results h3{font-size:1.1rem;color:var(--tx-s)}.no-results p{color:var(--tx-l);margin-top:4px}
.load-more-wrap{text-align:center;margin-top:20px;display:none}.load-more-wrap.show{display:block}
.load-more-btn{padding:12px 32px;border-radius:50px;background:var(--pri-l);color:#fff;font-weight:700;font-size:.9rem;transition:var(--t);opacity:1;transform:none}
.load-more-btn:hover{background:var(--pri);transform:translateY(-2px);box-shadow:var(--sh)}
.load-more-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none;background:#A98C7C}

.toast{position:fixed;top:76px;right:18px;z-index:5000;background:var(--bg-c);border-radius:var(--rs);box-shadow:var(--sh-lg);padding:12px 18px;display:flex;align-items:center;gap:8px;transform:translateX(120%);transition:transform .4s cubic-bezier(.4,0,.2,1);max-width:340px;border-left:4px solid var(--pri-l)}
.toast.show{transform:translateX(0)}.toast-icon{font-size:1.2rem}.toast-msg{font-size:.84rem;font-weight:600}

.modal-close{position:absolute;top:12px;right:12px;z-index:2010;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(5px);font-size:1.15rem;display:flex;align-items:center;justify-content:center;transition:var(--t);box-shadow:0 2px 10px rgba(140,80,50,.12)}
.modal-close:hover{transform:rotate(90deg);background:#fff}
.modal-hero{height:260px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;overflow:hidden;background:var(--grad)}
.modal-hero img{width:100%;height:100%;object-fit:cover}.hero-emoji{font-size:6.5rem;filter:drop-shadow(0 6px 12px rgba(140,80,50,.18))}
.modal-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:90px;background:linear-gradient(transparent,var(--bg-c));pointer-events:none}
.hero-actions{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2005;display:flex;gap:8px}
.ha-btn{padding:7px 14px;border-radius:50px;font-size:.78rem;font-weight:600;background:rgba(255,255,255,.9);backdrop-filter:blur(5px);transition:var(--t);box-shadow:0 2px 8px rgba(140,80,50,.1)}
.ha-btn:hover{background:#fff;transform:translateY(-2px)}.ha-btn.active{background:var(--pri-l);color:#fff}
.modal-body{padding:0 22px 22px;overflow-y:auto;flex:1}
.m-bc{font-size:.74rem;color:var(--tx-l);margin-bottom:6px}
.modal-body h1{font-size:clamp(1.3rem,3vw,1.7rem);color:var(--pri);margin-bottom:4px;line-height:1.3}
.m-sub{color:var(--tx-s);font-size:.88rem;margin-bottom:14px}
.m-stats-wrapper{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.m-stats-wrapper .ms{background:var(--pri-p);border-radius:var(--rx);padding:10px 4px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
.ms .v{font-size:0.95rem;font-weight:700;color:var(--pri-l);line-height:1.2}
.ms .l{font-size:0.6rem;color:var(--tx-l);margin-top:2px;text-transform:uppercase;letter-spacing:0.5px}
.ms.portions-box{background:#fff3e0;border:1px solid #ffe0b2}
.portions-ctrl{display:flex;align-items:center;gap:6px;margin-top:4px}
.p-btn{width:24px;height:24px;border-radius:50%;background:var(--pri-l);color:#fff;border:none;font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--t)}
.p-btn:hover{background:var(--pri);transform:scale(1.1)}.portions-num{font-size:1.1rem;font-weight:800;color:var(--tx);min-width:20px;text-align:center;transition:transform 0.2s ease,color 0.2s ease;display:inline-block}
.portions-num:active{transform:scale(1.1);color:var(--pri-l)}
.sec-t{font-size:1.05rem;font-weight:700;color:var(--pri);margin:18px 0 10px;display:flex;align-items:center;gap:7px}
.ing-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rx);transition:var(--t);border-bottom:1px solid #F5EEE6;cursor:pointer}
.ing-item:hover{background:#FFF9F5}.ing-item.checked{opacity:.45}.ing-item.checked .ing-name{text-decoration:line-through}
.ing-ch{width:20px;height:20px;border-radius:5px;border:2px solid #E8D5C4;display:flex;align-items:center;justify-content:center;transition:var(--t);flex-shrink:0;font-size:.6rem;color:transparent}
.ing-item.checked .ing-ch{background:var(--pri-l);border-color:var(--pri-l);color:#fff}
.ing-name{flex:1;font-size:.88rem}.ing-am{font-weight:600;color:var(--pri-l);font-size:.82rem;white-space:nowrap}
.step-list{display:flex;flex-direction:column;gap:12px}
.step-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#FFF9F5;border-radius:var(--rx);border-left:4px solid var(--pri-l);cursor:pointer;transition:var(--t)}
.step-item:hover{background:var(--pri-p)}.step-item.done{opacity:.5;background:#F5F5F5;border-left-color:#D7CCC8}.step-item.done .step-text{text-decoration:line-through}
.step-num{min-width:28px;height:28px;background:var(--grad);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.step-text{font-size:.9rem;line-height:1.5;flex:1}
.mode-toggle{text-align:center;margin:10px 0 15px;font-size:.85rem;color:var(--pri-l);cursor:pointer;font-weight:600;user-select:none}.mode-toggle:hover{text-decoration:underline}
.cooking-mode{display:none;flex-direction:column;align-items:center;padding:10px 0}.cooking-mode.active{display:flex}
.step-progress-bar{width:100%;height:6px;background:#f0f0f0;border-radius:3px;margin-bottom:15px;overflow:hidden}
.step-progress-fill{height:100%;background:var(--pri-l);width:0%;transition:width .3s ease}
.step-counter{font-size:.85rem;color:var(--tx-l);margin-bottom:8px;font-weight:600}
.step-display{font-size:1.05rem;line-height:1.6;margin:15px 0;min-height:70px;display:flex;align-items:center;justify-content:center;padding:0 5px;text-align:center;background:#FFF9F5;border-radius:var(--rx);width:100%;box-sizing:border-box}
.step-nav{display:flex;gap:12px;margin-top:5px;width:100%;justify-content:center}
.step-btn{padding:10px 24px;border-radius:50px;font-weight:600;font-size:.9rem;cursor:pointer;transition:var(--t);border:2px solid var(--pri-l);background:transparent;color:var(--pri-l);min-width:100px}
.step-btn:hover:not(:disabled){background:var(--pri-l);color:#fff}.step-btn:disabled{opacity:.4;cursor:not-allowed}
.step-btn.primary{background:var(--pri-l);color:#fff}.step-btn.primary:hover:not(:disabled){background:var(--pri)}
.tips{background:linear-gradient(135deg,#FFF8E1,#FFF3C4);border:1px solid #FFE082;border-radius:var(--rs);padding:16px;margin:16px 0}
.tips h3{color:#F57F17;margin-bottom:6px;font-size:.95rem;display:flex;align-items:center;gap:6px}
.tips p{font-size:.84rem;color:#6D5A00;line-height:1.7}
.modal-actions-footer{position:sticky;bottom:0;left:0;right:0;background:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0f0f0;z-index:2001;margin-top:20px;border-radius:0 0 16px 16px;box-shadow:0 -4px 10px rgba(0,0,0,0.05)}
.modal-actions-footer .ma{flex:1;margin:0 4px;justify-content:center;padding:10px 5px;font-size:.8rem}
.modal-actions-footer .ma-secondary{background:#FFF4E6;border:1px solid #E67E22;color:#D35400}.modal-actions-footer .ma-secondary:hover{background:#ffe0b2}

.panel-overlay{position:fixed;inset:0;background:rgba(44,24,16,.35);z-index:2400;display:none;backdrop-filter:blur(2px)}.panel-overlay.open{display:block}
.side-panel{position:fixed;top:0;right:-420px;width:380px;max-width:90vw;height:100%;background:var(--bg-c);z-index:2500;box-shadow:var(--sh-xl);transition:right .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.side-panel.open{right:0}
.panel-header{padding:16px 18px;border-bottom:1px solid #F5EEE6;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.panel-header h3{font-size:1.05rem;color:var(--pri)}.panel-close{font-size:1.2rem;color:var(--tx-l);padding:4px;transition:var(--t)}.panel-close:hover{color:var(--tx);transform:rotate(90deg)}
.panel-body{flex:1;overflow-y:auto;padding:14px 18px}
.panel-footer{padding:12px 18px;border-top:1px solid #F5EEE6;flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.pf-btn{width:100%;padding:10px;border-radius:var(--rx);font-weight:700;font-size:.82rem;transition:var(--t);background:var(--pri-l);color:#fff}.pf-btn:hover{background:var(--pri)}
.pf-btn.danger{background:#C62828}.pf-btn.danger:hover{background:#A31515}
.sl-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #F5EEE6}
.sl-ch{width:18px;height:18px;border-radius:4px;border:2px solid #E8D5C4;display:flex;align-items:center;justify-content:center;font-size:.55rem;color:transparent;cursor:pointer;transition:var(--t);flex-shrink:0}
.sl-item.checked .sl-ch{background:var(--pri-l);border-color:var(--pri-l);color:#fff}.sl-name{flex:1;font-size:.84rem}

/* ===== 🔧 ИСПРАВЛЕНИЕ: ТАЙМЕР ПОВЕРХ ВСЕГО ===== */
.timer-float{
    position:fixed !important;
    bottom:calc(18px + var(--safe-b, 0px)) !important;
    right:18px !important;
    z-index:9999 !important;
    display:none;
    pointer-events:auto !important
}
.timer-float.show{display:block !important}

/* Показывать таймер даже когда открыто модальное окно */
.modal.open ~ .timer-float.show,
#recipeModal.open ~ .timer-float.show,
.modal-overlay.open ~ .timer-float.show {
    display: block !important;
    z-index: 10000 !important;
}

/* Если таймер внутри модального окна */
.modal-body .timer-float {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 100 !important;
}

.timer-card{background:var(--bg-c);border-radius:var(--r);box-shadow:var(--sh-lg);padding:14px;width:240px;animation:slUp .3s ease}
@keyframes slUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.timer-card h4{font-size:.85rem;color:var(--pri);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.timer-x{font-size:.95rem;color:var(--tx-l);padding:2px;cursor:pointer}
.timer-inputs{display:flex;gap:5px;margin-bottom:6px}
.timer-inputs input{flex:1;padding:7px;border:2px solid #E8D5C4;border-radius:var(--rx);text-align:center;font-size:.9rem;font-weight:600}
.t-sep{font-size:1.2rem;font-weight:700;color:var(--tx-l);align-self:center}
.timer-display{font-size:2.2rem;font-weight:800;text-align:center;color:var(--pri-l);margin:6px 0;font-variant-numeric:tabular-nums;letter-spacing:2px}
.timer-btns{display:flex;gap:5px}.timer-btns button{flex:1;padding:8px;border-radius:var(--rx);font-weight:700;font-size:.78rem;transition:var(--t);cursor:pointer}
.tb-go{background:var(--pri-l);color:#fff}.tb-rst{background:#E8D5C4;color:var(--tx)}

.back-top{position:fixed;bottom:18px;left:18px;z-index:1500;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;font-size:1.1rem;display:none;align-items:center;justify-content:center;box-shadow:var(--sh);transition:var(--t)}
.back-top.show{display:flex}.back-top:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}

.footer{background:var(--bg-d);color:rgba(255,255,255,.65);padding:30px 20px;text-align:center;margin-top:30px}
.footer h3{color:#fff;font-size:1.15rem;margin-bottom:4px}.footer p{font-size:.82rem;margin-bottom:3px}
.footer-links{display:flex;justify-content:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.footer-links a{color:#FFB74D;font-size:.82rem;transition:var(--t)}

body.dark{--bg:#1A120B;--bg-c:#2C1810;--tx:#FFF9F0;--tx-s:#D7CCC8;--tx-l:#A98C7C;--sh:0 2px 12px rgba(0,0,0,.3)}
body.dark .cat-btn{background:#3E2723;border-color:#5D4037;color:#D7CCC8}
body.dark .ing-item{border-bottom-color:#3E2723}body.dark .ing-item:hover{background:#3E2723}
body.dark .step-item{background:#3E2723}body.dark .step-item:hover{background:#4E342E}
body.dark .m-stats-wrapper .ms{background:#3E2723}body.dark .ms .v{color:#FFB74D}
body.dark .r-card{background:#2C1810}
body.dark .tips{background:#2A2510;border-color:#4A4020}body.dark .tips p{color:#E6C35C}

.loader{text-align:center;padding:60px 20px}.loader-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid var(--pri-l);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 15px}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.loader p{color:var(--tx-s)}

/* ===== 📱 МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 768px) {
  .header-inner { flex-wrap: wrap; padding: 10px 12px; gap: 8px; height: auto; min-height: 64px; }
  .logo { order: 1; font-size: 1.1rem; }
  .logo-icon { font-size: 1.4rem; }
  .header-actions { order: 2; margin-left: auto; gap: 4px; }
  .h-btn { width: 36px; height: 36px; border-radius: 10px; font-size: .95rem; }
  .search-wrap { order: 3; flex: 0 1 auto; max-width: 160px; margin-top: 4px; }
  #searchInput { padding: 8px 14px 8px 36px; font-size: .85rem; min-height: 38px; border-radius: var(--rs); }
  .search-wrap .search-icon { left: 10px; font-size: .85rem; }
  .search-wrap.expanded {
    position: fixed; top: calc(64px + var(--safe-t) + 4px); left: 12px; right: 12px;
    max-width: none; z-index: 1001; animation: searchExpand .3s var(--t);
  }
  @keyframes searchExpand { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .search-wrap.expanded .search-icon { left: 16px; font-size: 1rem; opacity: 1; }
  .search-wrap.expanded #searchInput {
    padding: 14px 50px 14px 46px; font-size: 16px; border-radius: var(--rs);
    background: var(--bg-c); color: var(--tx); border: 2px solid var(--pri);
    box-shadow: var(--sh-lg); min-height: 52px;
  }
  .search-wrap.expanded .search-close { display: flex; right: 10px; width: 36px; height: 36px; pointer-events: auto; cursor: pointer; }
  .hero { padding-top: calc(76px + var(--safe-t)); }
  .hero h1 { font-size: 1.4rem; }
  .hero p { font-size: .9rem; margin-bottom: 16px; }
  .hero-stat { min-width: 90px; padding: 10px 14px; }
  .stat-num { font-size: 1.2rem; }
  .categories { padding: 10px 4px; background: var(--bg-c); border-bottom: 1px solid #eee; }
  .cat-btn { padding: 8px 14px; font-size: .8rem; min-height: 36px; }
  .toolbar { padding: 8px 12px; background: var(--bg-c); border-bottom: 1px solid #eee; position: sticky; top: calc(64px + var(--safe-t)); z-index: 900; }
  .toolbar-left .results-info { font-size: .8rem; }
  #sortSelect { font-size: .8rem; min-height: 36px; }
  .v-btn { width: 36px; height: 36px; }
  .recipes-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .r-card { touch-action: manipulation; }
  .r-card:active { transform: scale(.998); }
  .back-top { bottom: calc(16px + var(--safe-b)); }
  .modal { margin: 12px; max-height: calc(100vh - 24px - var(--safe-t) - var(--safe-b)); }
  .side-panel { width: min(320px, 85vw); }
  .timer-inputs input, .timer-btns button { min-height: 44px; font-size: 16px; }
  
  .toast {
    top: auto !important; bottom: calc(20px + var(--safe-b)) !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) translateY(100px) !important;
    width: auto !important; max-width: 90vw !important; min-width: 220px !important;
    margin: 0 !important; padding: 10px 16px !important; border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important; font-size: 0.9rem !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    z-index: 5000 !important; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .toast.show { transform: translateX(-50%) translateY(0) !important; opacity: 1; }
  .toast-icon { font-size: 1.1rem; flex-shrink: 0; }
  .toast-msg { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
}

@media (min-width: 769px) {
  .header-inner { flex-wrap: nowrap; }
  .search-wrap { order: unset; flex: 1; max-width: 500px; margin-top: 0; }
  #searchInput { font-size: .88rem; padding: 9px 16px 9px 40px; }
  .search-close, .search-overlay { display: none !important; }
  body.search-open { overflow: auto; }
}