@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@500;700;900&display=swap";:root{--bg: #0A0014;--surface: #1A0028;--primary: #00F5FF;--primary-dark: #00C2D1;--accent: #FF006E;--text: #F0F0FF;--text-muted: #A8A8C8;--border: #2A1845;--success: #10B981;--warning: #F59E0B;--danger: #FF006E;--radius: 4px;--shadow: 0 12px 36px rgba(0,0,0,.4), 0 0 28px #00F5FF26}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#0a0014,#1a0028),repeating-linear-gradient(0deg,transparent,transparent 39px,#00F5FF11 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#FF006E08 40px),var(--bg);color:var(--text);font-family:JetBrains Mono,SF Mono,Consolas,monospace;min-height:100vh;padding:20px}.container{max-width:1040px;margin:0 auto;position:relative}.header{display:flex;align-items:center;gap:12px;margin-bottom:24px;position:relative;border-bottom:1px solid var(--border);padding-bottom:12px}.header-deco{position:absolute;top:-10px;left:-10px;width:80px;height:80px;background:radial-gradient(circle at 30% 30%,rgba(0,245,255,.12),transparent 70%);border-radius:50%;pointer-events:none}.title{font-family:Orbitron,JetBrains Mono,monospace;font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,#00f5ff,#ff006e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(0,245,255,.4);letter-spacing:2px}.sync-badge{font-size:.7rem;color:var(--primary);background:var(--surface);padding:4px 10px;border-radius:20px;border:1px solid var(--border);margin-left:auto;transition:all .3s}.sync-badge.loading{animation:pulse 1.2s infinite;border-color:var(--warning)}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.shortcuts{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--text-muted);margin-bottom:16px;flex-wrap:wrap}.shortcuts kbd{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:0 6px;font-family:inherit;font-size:.65rem;line-height:1.6;color:var(--primary)}.search-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:20px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s}.search-bar:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #00f5ff2e,0 0 24px #00f5ff1a}.search-input{flex:1;background:transparent;border:none;font-family:inherit;font-size:.9rem;color:var(--text);outline:none}.search-input::placeholder{color:var(--text-muted)}.category-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.cat-btn{background:var(--surface);border:1px solid var(--border);padding:6px 18px;border-radius:20px;font-family:inherit;font-size:.75rem;color:var(--text-muted);cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.cat-btn.active{background:var(--primary);color:#0a0014;border-color:var(--primary);font-weight:700;box-shadow:0 0 16px #00f5ff66}.cat-btn:hover:not(.active){border-color:var(--primary);color:var(--primary)}.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:80px}.recipe-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,box-shadow .15s;border:1px solid transparent}.recipe-card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 12px 40px #00f5ff26}.card-image{background:linear-gradient(135deg,#1a0028,#2a1845);height:120px;display:flex;align-items:center;justify-content:center}.card-body{padding:14px}.card-name{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:4px}.card-meta{display:flex;align-items:center;gap:12px;font-size:.7rem;color:var(--text-muted);margin-bottom:6px}.card-meta svg{width:14px;height:14px}.card-category{display:inline-block;background:#00f5ff1f;color:var(--primary);font-size:.65rem;padding:2px 10px;border-radius:10px;font-weight:500}.skeleton-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;animation:shimmer 1.5s infinite linear}.skeleton-img{height:120px;background:#2a1845}.skeleton-body{padding:14px}.skeleton-line{height:12px;background:#2a1845;border-radius:8px;margin-bottom:8px}.skeleton-name{width:60%}.skeleton-meta{width:40%}@keyframes shimmer{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.empty-state{display:flex;flex-direction:column;align-items:center;padding:80px 20px;gap:16px}.empty-msg{font-size:.9rem;color:var(--text-muted);text-align:center}.bottom-nav{display:flex;gap:0;position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#1a0028e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius);padding:6px;box-shadow:0 0 40px #00f5ff26;border:1px solid var(--border)}.nav-btn{display:flex;align-items:center;gap:8px;background:none;border:none;padding:10px 24px;border-radius:var(--radius);font-family:inherit;font-size:.85rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .2s}.nav-btn.active{background:var(--primary);color:#0a0014;box-shadow:0 0 20px #00f5ff80}.nav-btn:hover{background:#00f5ff1a}.detail-page{animation:fadeUp .3s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);padding:8px 18px;border-radius:20px;font-family:inherit;font-size:.8rem;color:var(--text-muted);cursor:pointer;margin-bottom:16px;transition:all .2s}.back-btn:hover{background:#00f5ff1a;border-color:var(--primary);color:var(--primary)}.detail-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.detail-name{font-family:Orbitron,JetBrains Mono,monospace;font-size:1.4rem;font-weight:800;color:var(--text);text-shadow:0 0 12px rgba(0,245,255,.3)}.detail-category{background:#00f5ff1f;color:var(--primary);font-size:.7rem;padding:3px 12px;border-radius:12px;display:inline-block}.detail-meta{display:flex;gap:24px;font-size:.8rem;color:var(--text-muted);margin-bottom:20px}.detail-meta svg{vertical-align:middle;margin-right:4px}.timer-widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}.timer-display{display:flex;align-items:center;gap:10px;margin-bottom:12px}.timer-icon{color:var(--primary);filter:drop-shadow(0 0 8px var(--primary))}.timer-time{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--primary);text-shadow:0 0 12px rgba(0,245,255,.5)}.timer-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.timer-input-group{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-muted)}.timer-input{width:50px;padding:4px 8px;background:#0a0014;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:.8rem;text-align:center}.timer-input:disabled{opacity:.5}.timer-buttons{display:flex;gap:8px}.timer-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:.75rem;cursor:pointer;transition:all .2s}.timer-btn.start{border-color:var(--primary);color:var(--primary)}.timer-btn.start:hover{background:#00f5ff26}.timer-btn.pause{border-color:var(--warning);color:var(--warning)}.timer-btn.pause:hover{background:#f59e0b26}.timer-btn.reset{border-color:var(--accent);color:var(--accent)}.timer-btn.reset:hover{background:#ff006e26}.detail-ingredients{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px}.detail-ingredients h3{font-size:.9rem;font-weight:700;margin-bottom:10px;color:var(--primary);text-shadow:0 0 8px rgba(0,245,255,.3)}.ingredient-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px}.ingredient-item{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:#2a184599;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.ingredient-item:hover{background:#00f5ff14}.check-box{width:16px;height:16px;border:1.5px solid var(--text-muted);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.check-box.checked{background:var(--primary);border-color:var(--primary);color:#0a0014}.check-box svg{stroke:#0a0014}.ingredient-text{font-size:.8rem;color:var(--text);transition:color .2s,text-decoration .2s}.ingredient-text.checked-text{color:var(--text-muted);text-decoration:line-through}.detail-steps{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px}.detail-steps h3{font-size:.9rem;font-weight:700;margin-bottom:10px;color:var(--primary);text-shadow:0 0 8px rgba(0,245,255,.3)}.steps ol{list-style:none}.step-item{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}.step-num{flex-shrink:0;background:var(--primary);color:#0a0014;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;box-shadow:0 0 8px #00f5ff66}.step-text{font-size:.85rem;color:var(--text);line-height:1.6}.fav-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);border:1px solid var(--border);padding:12px 24px;border-radius:20px;font-family:inherit;font-size:.85rem;color:var(--text);cursor:pointer;transition:all .2s;width:100%}.fav-btn:hover{border-color:var(--primary);color:var(--primary)}.fav-btn.fav-active{border-color:var(--primary);background:#00f5ff14;color:var(--primary)}.favorites-page{animation:fadeUp .3s ease}.fav-title{font-family:Orbitron,JetBrains Mono,monospace;font-size:1.3rem;font-weight:700;margin-bottom:16px;color:var(--text)}.favorites-page .back-btn{margin-top:20px}@media (max-width: 600px){.recipe-grid{grid-template-columns:1fr 1fr}.bottom-nav{padding:4px}.nav-btn{padding:8px 16px;font-size:.75rem}.timer-widget{padding:12px}}