*,:before,:after{box-sizing:border-box}body{color:#e0e0e0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#121212;margin:0}#root{width:100%}h1,h2,h3,h4,p{margin:0}button{cursor:pointer}:root{--bg:#121212;--card:#1a1a1a;--surface:#262626;--border:#333;--border-light:#2a2a2a;--accent:#d4a373;--accent-dim:#d4a37338;--accent-glow:#d4a37347;--text:#e0e0e0;--text-muted:#a0a0a0;--text-dim:#555;--serif:"Noto Serif JP", "Hiragino Mincho ProN", serif;--sans:"Noto Sans JP", "Hiragino Sans", system-ui, sans-serif}.app{background:var(--bg);max-width:900px;min-height:100vh;font-family:var(--sans);margin:0 auto;padding:60px 20px 100px}.app-header{text-align:center;margin-bottom:70px}.app-header h1{font-family:var(--serif);letter-spacing:.1em;color:var(--accent);margin-bottom:10px;font-size:3rem;font-weight:300}.app-header p{color:var(--text-muted);letter-spacing:.15em;font-size:.9rem}.step{flex-direction:column;gap:40px;display:flex}.section-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.25em;border-bottom:2px solid var(--accent);padding-bottom:15px;font-size:1rem;font-weight:700}.category-tabs{border-bottom:1px solid var(--border);gap:0;display:flex}.tab-btn{color:var(--text-muted);letter-spacing:.1em;cursor:pointer;font-size:.85rem;font-weight:700;font-family:var(--sans);white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 24px;transition:all .2s}.tab-btn:hover:not(.active){color:var(--text)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.ingredient-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:25px;display:grid}.ingredient-btn{background:var(--card);text-align:center;cursor:pointer;border:1px solid var(--border);font-family:var(--sans);border-radius:15px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:25px 15px;transition:all .4s ease-out;display:flex;position:relative;overflow:hidden}.ingredient-btn:before{content:"";background:var(--accent);width:100%;height:4px;transition:transform .4s ease-out;position:absolute;top:0;left:0;transform:translateY(-100%)}.ingredient-btn:hover{border-color:var(--accent);transform:translateY(-8px);box-shadow:0 15px 30px #0009}.ingredient-btn:hover:before{transform:translateY(0)}.ingredient-btn.selected{border-color:var(--accent);background:var(--accent-dim)}.ingredient-btn.selected:before{transform:translateY(0)}.icon-placeholder{background:var(--surface);border:2px solid var(--surface);width:80px;height:80px;color:var(--accent);font-size:.7rem;font-family:var(--sans);letter-spacing:.02em;border-radius:50%;justify-content:center;align-items:center;transition:border-color .3s;display:flex;box-shadow:0 5px 10px #0006}.ingredient-btn.selected .icon-placeholder{border-color:var(--accent)}.ingredient-name{color:var(--text-muted);font-size:.9rem;font-family:var(--sans);font-weight:500;line-height:1.3}.ingredient-btn.selected .ingredient-name{color:var(--accent)}.seasoning-toggle{background:var(--card);border:1px solid var(--border);width:100%;color:var(--text-muted);letter-spacing:.1em;cursor:pointer;font-size:.85rem;font-weight:700;font-family:var(--sans);border-radius:10px;justify-content:space-between;align-items:center;padding:14px 20px;transition:all .25s;display:flex}.seasoning-toggle:hover{border-color:var(--accent);color:var(--accent)}.toggle-arrow{color:var(--text-dim);font-size:9px}.seasoning-section{background:var(--card);border-left:6px solid var(--accent);border-radius:18px;padding:28px 30px}.seasoning-label{color:var(--accent);letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;font-size:.7rem;font-weight:700}.seasoning-hint{color:var(--text-dim);text-transform:none;letter-spacing:0;margin-left:8px;font-size:.7rem;font-weight:400}.seasoning-list{flex-wrap:wrap;gap:12px;display:flex}.seasoning-btn{background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:.85rem;font-family:var(--sans);opacity:.55;border:1px solid #0000;border-radius:25px;padding:10px 22px;text-decoration:line-through;transition:all .3s}.seasoning-btn.selected{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);opacity:1;text-decoration:none}.seasoning-btn:hover{opacity:1;border-color:var(--accent)}.selected-summary{background:var(--card);border:1px solid var(--border);border-radius:14px;justify-content:space-between;align-items:center;padding:18px 28px;display:flex}.selected-count{color:var(--text-muted);font-size:.9rem;font-family:var(--sans)}.selected-actions{align-items:center;gap:12px;display:flex}.clear-btn{color:var(--text-muted);border:1px solid var(--border);letter-spacing:.05em;cursor:pointer;font-size:.8rem;font-weight:700;font-family:var(--sans);background:0 0;border-radius:8px;padding:10px 20px;transition:all .2s}.clear-btn:hover{border-color:var(--text-muted);color:var(--text)}.selected-count em{color:var(--accent);font-size:1.8rem;font-style:normal;font-weight:300;font-family:var(--serif);margin-right:6px}.genre-selector{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;display:grid}.genre-btn{border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:1rem;font-weight:700;font-family:var(--sans);letter-spacing:.05em;border-radius:15px;align-items:center;gap:16px;padding:24px 28px;transition:all .4s ease-out;display:flex;position:relative;overflow:hidden}.genre-btn span:first-child{font-size:1.8rem;line-height:1}.genre-btn:before{content:"";background:var(--accent);width:100%;height:4px;transition:transform .4s ease-out;position:absolute;top:0;left:0;transform:translateY(-100%)}.genre-btn:hover{border-color:var(--accent);transform:translateY(-8px);box-shadow:0 15px 30px #0009}.genre-btn:hover:before{transform:translateY(0)}.genre-btn.selected{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);transform:translateY(-8px);box-shadow:0 15px 30px #00000080}.genre-btn.selected:before{transform:translateY(0)}.step-actions{justify-content:space-between;gap:14px;display:flex}.next-btn{background:var(--accent);color:#121212;letter-spacing:.1em;cursor:pointer;font-size:.9rem;font-weight:700;font-family:var(--sans);border:none;border-radius:8px;padding:14px 32px;transition:all .25s;box-shadow:0 4px 18px #d4a37340}.next-btn:hover:not(:disabled){box-shadow:0 6px 24px var(--accent-glow);background:#e0b584;transform:translateY(-2px)}.next-btn:active:not(:disabled){transform:scale(.97)}.next-btn:disabled{color:var(--text-dim);box-shadow:none;cursor:default;background:#2a2a2a}.back-btn{color:var(--text-muted);border:1px solid var(--border);letter-spacing:.05em;cursor:pointer;font-size:.9rem;font-weight:700;font-family:var(--sans);background:0 0;border-radius:8px;padding:14px 26px;transition:all .2s}.back-btn:hover{border-color:var(--text-muted);color:var(--text)}.reset-btn{color:var(--accent);border:1px solid var(--accent);letter-spacing:.05em;cursor:pointer;font-size:.9rem;font-weight:700;font-family:var(--sans);background:0 0;border-radius:8px;padding:14px 26px;transition:all .2s}.reset-btn:hover{background:var(--accent-dim)}.result-filters{background:var(--card);border:1px solid var(--border);border-radius:15px;flex-direction:column;gap:20px;padding:24px 28px;display:flex}.filter-row{align-items:flex-start;gap:16px;display:flex}.filter-label{color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;min-width:60px;padding-top:8px;font-size:.7rem;font-weight:700}.filter-chips{flex-wrap:wrap;gap:8px;display:flex}.filter-chip{background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:.8rem;font-family:var(--sans);border:1px solid #0000;border-radius:20px;padding:7px 18px;transition:all .25s}.filter-chip:hover{border-color:var(--accent);color:var(--text)}.filter-chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.result-header{justify-content:space-between;align-items:center;display:flex}.result-count{color:var(--text-muted);font-size:.9rem;font-family:var(--sans)}.near-miss-count{color:var(--text-dim);font-size:.8rem}.shuffle-btn{color:var(--accent);border:1px solid var(--accent);letter-spacing:.05em;cursor:pointer;font-size:.8rem;font-weight:700;font-family:var(--sans);background:0 0;border-radius:25px;padding:10px 24px;transition:all .25s}.shuffle-btn:hover{background:var(--accent-dim);transform:translateY(-2px);box-shadow:0 4px 12px #d4a37333}.shuffle-pick{position:relative}.shuffle-pick-label{color:var(--accent);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;font-size:.75rem;font-weight:700}.shuffle-pick .recipe-card{border-color:var(--accent);box-shadow:0 0 30px #d4a37326}.shuffle-pick .recipe-card:before{transform:translateY(0)}.other-recipes-details{margin-top:-10px}.other-recipes-summary{color:var(--text-dim);cursor:pointer;letter-spacing:.05em;font-size:.8rem;font-family:var(--sans);padding:12px 0;transition:color .2s}.other-recipes-summary:hover{color:var(--text-muted)}.other-recipes-details[open] .other-recipes-summary{margin-bottom:20px}.no-results{text-align:center;background:var(--card);border:1px solid var(--border);border-radius:15px;padding:80px 20px}.no-results p{color:var(--text-muted);font-size:1rem;font-family:var(--serif);letter-spacing:.05em}.no-results-sub{margin-top:10px;color:var(--text-dim)!important;font-size:.85rem!important}.near-miss-section{flex-direction:column;gap:20px;margin-top:10px;display:flex}.near-miss-header{color:var(--text-muted);letter-spacing:.25em;text-transform:uppercase;border-bottom:1px dashed var(--border);padding-bottom:14px;font-size:.75rem;font-weight:700}.recipe-list{flex-direction:column;gap:20px;display:flex}.recipe-card{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:30px;transition:all .4s ease-out;position:relative;overflow:hidden}.recipe-card:before{content:"";background:var(--accent);width:100%;height:4px;transition:transform .4s ease-out;position:absolute;top:0;left:0;transform:translateY(-100%)}.recipe-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 15px 30px #0009}.recipe-card:hover:before{transform:translateY(0)}.recipe-card.near-miss{border-color:#3a3a3a}.recipe-card-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.recipe-name{font-family:var(--serif);color:var(--text);letter-spacing:.05em;font-size:1.3rem;font-weight:400;line-height:1.5}.recipe-meta{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:6px;display:flex}.recipe-genre-tag{background:var(--accent-dim);color:var(--accent);letter-spacing:.15em;white-space:nowrap;text-transform:uppercase;border-radius:4px;padding:4px 12px;font-size:.7rem;font-weight:700}.recipe-time{color:var(--text-dim);letter-spacing:.08em;font-size:.75rem}.missing-banner{color:var(--accent);letter-spacing:.04em;background:#d4a3731a;border:1px solid #d4a3734d;border-radius:8px;margin-bottom:18px;padding:12px 16px;font-size:.85rem}.recipe-section{border-top:1px solid var(--border-light);margin-top:18px;padding-top:18px}.recipe-section h4{color:var(--text-dim);text-transform:uppercase;letter-spacing:.25em;margin-bottom:12px;font-size:.65rem;font-weight:700}.ingredient-list{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.ingredient-list li{background:var(--surface);color:var(--text-muted);font-size:.8rem;font-family:var(--sans);border:1px solid var(--border-light);border-radius:4px;padding:5px 14px}.ingredient-list li.missing{color:#d07070;background:#b432321f;border-color:#b4323240}.seasoning-used-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.seasoning-used-list li{color:var(--text-muted);flex-direction:column;gap:5px;font-size:.85rem;display:flex}.substitute-note{color:var(--accent);background:var(--accent-dim);border-left:2px solid var(--accent);border-radius:4px;padding:5px 12px;font-size:.75rem}.steps-list{counter-reset:steps;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;display:flex}.steps-list li{color:var(--text-muted);counter-increment:steps;font-size:.875rem;line-height:1.8;font-family:var(--sans);gap:14px;display:flex}.steps-list li:before{content:counter(steps);min-width:24px;height:24px;color:var(--accent);border:1px solid var(--accent);font-size:.75rem;font-weight:700;font-family:var(--serif);background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:3px;display:flex}