@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap";*,:before,:after{box-sizing:border-box}body{margin:0;font-family:DM Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.modal{background-color:var(--color-overlay);z-index:100;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:background-color var(--transition);justify-content:center;align-items:center;padding:1.2rem;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-surface-2);border-radius:var(--radius-lg);width:100%;max-width:42rem;max-height:85vh;box-shadow:var(--shadow-card);border:1px solid var(--shadow-card);transition:background var(--transition);opacity:.9;flex-direction:column;display:flex;overflow:hidden}.modal-header,.modal-footer{justify-content:center;padding:10px;display:flex}.modal-title{margin:.5rem;padding-left:1rem}.modal-body{text-align:center;overflow-y:auto}.show-allergy,.show-nutrition{text-align:start}.modal-list{text-align:start;transition:color var(--transition);margin-left:-1.2rem}.modal-list li{color:var(--color-teal-dark)}.modal-list li span{color:var(--color-text);transition:color var(--transition);font-size:1rem;line-height:1.5}.modal-close{cursor:pointer;border-radius:var(--radius-md);background:#00698f;border:3px solid #00698f;padding-top:.15rem;padding-left:.5rem;padding-right:.5rem}.recipe-link{justify-content:space-between;margin:.7rem;padding-bottom:.7rem;padding-left:1rem;display:flex}.recipe-link-dot{background:var(--color-teal-dark);border-radius:50%;width:.5rem;height:.5rem;margin-top:.4rem;margin-right:.5rem}.modal-close{background-color:var(--color-surface-2);color:var(--color-teal);border:1.5px solid var(--color-teal);border-radius:var(--radius-sm);transition:background var(--transition), color var(--transition);gap:6px;margin-right:.8rem;padding:.5rem .8rem;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex}.modal-close:hover{cursor:pointer;background:var(--color-teal);color:#fff}.modal-full-recipe{background-color:var(--color-teal);color:#fff;border:1.5px solid var(--color-teal);border-radius:var(--radius-sm);transition:background var(--transition), color var(--transition);gap:6px;margin-right:.8rem;padding:.5rem .8rem;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex}.modal-full-recipe:hover{cursor:pointer;background:var(--color-surface-2);color:var(--color-teal)}.modal-section{border-bottom:1px solid var(--color-stone);transition:border-color var(--transition);padding:18px 24px}.modal-section:last-child{border-bottom:none}.modal-section-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-mid);transition:color var(--transition);text-align:start;margin-bottom:12px;font-size:11px;font-weight:600}.show-allergy ul{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.show-allergy li{color:var(--color-teal-dark);background:var(--color-teal-light);transition:color var(--transition), background var(--transition);border:1px solid #0000;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:500}[data-theme=dark] .show-allergy li{color:var(--color-teal);background:#2ab3cc1f}.show-nutrition{grid-template-columns:1fr 1fr;gap:4px 16px;display:grid}.show-nutrition ul{margin:0;padding:0;list-style:none;display:contents}.show-nutrition li{color:var(--color-text);border-bottom:1px solid var(--color-stone);transition:color var(--transition), border-color var(--transition);justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;font-size:13px;display:flex}.show-nutrition li:after{content:attr(data-value);color:var(--color-text);transition:color var(--transition);flex-shrink:0;font-weight:500}@media (width<=375px){.modal-content{max-height:82vh}}.recipe-tile{background:var(--color-surface-2);border-radius:var(--radius-md);box-shadow:var(--shadow-card);transition:transform var(--transition), box-shadow var(--transition);cursor:default;flex-direction:column;display:flex}.recipe-tile:hover{border:1px solid var(--color-teal)}.recipe-img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md) var(--radius-md) 0 0;width:100%;display:block}.recipe-card-body{flex-direction:column;flex:1;gap:.5rem;padding:16px 18px 18px;display:flex}.recipe-label{color:var(--color-text);margin-bottom:0;font-size:14px;font-weight:500}.recipe-meta{color:var(--color-text-mid);align-items:center;padding-bottom:.2rem;font-size:12px;font-weight:400;display:flex}.recipe-meta-dot{background:var(--color-teal);border-radius:50%;width:3px;height:3px;display:inline-block}.recipe-button{justify-content:flex-end;padding-bottom:1rem;padding-right:1rem;display:flex}.details-button{color:var(--color-teal);border:1.5px solid var(--color-teal);font-family:var(--font);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;align-self:flex-start;margin-top:auto;padding:7px 14px;font-size:13px;font-weight:500}.details-button:hover{background:var(--color-teal);color:var(--color-white)}@media (width<=560px){.recipe-label{margin-bottom:0;font-size:1.2rem}.recipe-meta{margin-top:0;font-size:1rem}}.container{flex-direction:column;justify-content:center;align-items:center;padding:40px 20px;display:flex}.user-input{background-color:var(--color-input-box);min-width:600px;max-width:100vw;color:var(--color-input-text);box-shadow:var(--shadow-card);border:2px solid var(--shadow-card);padding:9px 16px;font-size:15px}.search-button{color:#fff;cursor:pointer;background:#02aff0;border:2px solid #02aff0;border-radius:4px;margin:10px;padding:9px 16px;font-size:15px}.search-button:hover{color:#02aff0;cursor:pointer;background:#fff;border:2px solid #02aff0;border-radius:4px;margin:10px;padding:9px 16px;font-size:15px}.recipe-list{grid-template-columns:repeat(4,1fr);gap:4rem;width:100%;max-width:1200px;margin-top:4rem;display:grid}.instruction-text{color:var(--color-text-mid);letter-spacing:.01em;margin-top:1rem;font-size:14px;font-weight:300}.empty-state{text-align:center;color:var(--color-text-mid);margin-top:5rem;font-size:14px;font-weight:300}@media (width<=1200px){.recipe-list{grid-template-columns:repeat(3,1fr)}}@media (width<=900px){.recipe-list{grid-template-columns:repeat(2,1fr)}}@media (width<=744px){.search-form{max-width:100%}.user-input{min-width:30rem;padding:11px 16px;font-size:14px}.search-button{padding:11px 20px;font-size:13px}}@media (width<=560px){.recipe-list{grid-template-columns:1fr;gap:16px;margin-top:36px}.search-form{border-radius:var(--radius-md);flex-direction:column;width:80vw;margin-left:-3rem}.user-input{border-bottom:1px solid var(--color-stone);min-width:28rem;padding-top:.8rem;font-size:15px}.search-button,.search-button:hover{border-radius:var(--radius-md);width:100%;padding:12px 16px;font-size:14px}.instruction-text{margin-left:-1rem;font-size:13px}}@media (width<=402px){.search-form{border-radius:var(--radius-md);flex-direction:column;width:80vw;margin-left:-1.2rem}.user-input{border-bottom:1px solid var(--color-stone);min-width:21rem;padding-top:.8rem;font-size:15px}.instruction-text{text-align:center;padding-left:.6rem}.user-input::placeholder{font-size:13px}}@media (width<=375px){.search-form{border-radius:var(--radius-md);flex-direction:column;width:80vw;margin-left:-2rem}.user-input{border-bottom:1px solid var(--color-stone);min-width:20rem;padding-top:.8rem;font-size:15px}.search-button,.search-button:hover{border-radius:var(--radius-md);width:100%;padding:12px 16px;font-size:14px}.instruction-text{margin-left:-1rem;font-size:13px}.user-input::placeholder{font-size:12px}}:root{--color-accent:#8800b5;--color-accent-dark:#610082;--color-teal:#148ca0;--color-teal-dark:#0e6e7e;--color-teal-light:#e6f5f7;--color-charcoal:#282828;--color-surface:#f5f8f9;--color-surface-2:#f5f8f9;--color-white:#fff;--color-input-box:white;--color-input-text:black;--color-stone:#e0eaec;--color-text:#282828;--color-text-mid:#5a7378;--color-overlay:#0e6e7e80;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--shadow-card:0 2px 12px #148ca014, 0 1px 3px #148ca00d;--shadow-card-hover:0 8px 32px #148ca029, 0 2px 8px #148ca014;--shadow-modal:0 24px 64px #0e6e7e47;--font:"DM Sans", system-ui, sans-serif;--transition:.16s ease}[data-theme=dark]{--color-accent:#9c05ce;--color-accent-dark:#7a03a1;--color-teal:#2ab3cc;--color-teal-dark:#1e92a8;--color-teal-light:#2ab3cc26;--color-charcoal:#202122;--color-input-box:#1a2c30;--color-input-text:white;--color-surface:#0f1a1c;--color-surface-2:#1a2c30;--color-stone:#2a4048;--color-text:#e8eef0;--color-text-mid:#7aaab4;--color-overlay:#000000b3;--shadow-card:0 2px 12px #086cdf59, 0 1px 3px #0179a840;--shadow-card-hover:0 8px 32px #00000080, 0 2px 8px #0000004d;--shadow-modal:0 24px 64px #0009}*{box-sizing:border-box}body{font-family:var(--font);background-color:var(--color-surface);color:var(--color-text);-webkit-font-smoothing:antialiased;transition:background-color .25s,color .25s}.App{background-color:var(--color-surface);min-height:100vh;transition:background-color .25s}.theme-toggle{z-index:200;background:var(--color-surface-2);border:1.5px solid var(--color-stone);border-radius:var(--radius-lg);cursor:pointer;font-family:var(--font);color:var(--color-text-mid);box-shadow:var(--shadow-card);transition:border-color var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition);align-items:center;gap:8px;padding:7px 10px;font-size:13px;font-weight:500;display:flex;position:fixed;top:1.3rem;right:1.3rem}.theme-toggle:hover{border-color:var(--color-teal);color:var(--color-teal);box-shadow:var(--shadow-card-hover)}.theme-toggle-icon{flex-shrink:0;width:1.1rem;height:1.1rem}