body{margin:0;font-family:system-ui,sans-serif;background:#0e1116;color:#222}html,body,#root{height:100%}.home{min-height:100dvh;display:grid;grid-template-rows:auto 1fr;color:#e6e7eb;background:radial-gradient(1200px 600px at 60% 10%,rgba(255,187,92,.06),transparent 60%),radial-gradient(1000px 500px at 10% 0%,rgba(92,122,255,.05),transparent 55%),#0e1116}.home__content{width:min(860px,92%);margin:0 auto;padding:12vh 16px 32px;display:flex;flex-direction:column;align-items:center;gap:24px}.mode-toggle{width:min(300px,100%);display:flex;gap:6px;padding:6px;background:#11141c;border:1px solid #242a36;border-radius:999px;box-shadow:0 1px 2px #00000040}.btn{flex:1 1 0;appearance:none;background:transparent;border:1px solid transparent;color:#a0a8b3;padding:12px 18px;border-radius:999px;font:600 1rem/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;cursor:pointer;transition:background-color .18s ease,color .18s ease,box-shadow .22s ease}.btn:hover{color:#cfd5de}.btn:active{transform:none}.btn--active{color:#0f141b!important;background:#ffb84f!important;border-color:transparent;box-shadow:none}.search__form{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.search__input{width:100%;padding:18px 20px;border:1px solid #242a36;border-radius:18px;background:#151922;color:#e6e7eb;outline:none;box-shadow:inset 0 1px 2px #00000040;transition:border-color .2s,box-shadow .2s,transform .12s;font-size:1rem}.search__input::placeholder{color:#8f97a3}.search__input:focus{border-color:#334155;box-shadow:0 0 0 3px #3b82f626,inset 0 1px 2px #00000040}.btn_getrecipe{appearance:none;border:0;padding:16px 26px;border-radius:16px;font:700 1rem/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:#ffb84f;color:#0b0e12;cursor:pointer;transition:transform 90ms ease,filter .2s ease}.btn_getrecipe:hover{transform:translateY(-1px)}.btn_getrecipe:active{transform:translateY(0)}.btn_getrecipe[disabled]{opacity:.6;cursor:not-allowed;filter:saturate(.85)}.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(0,0,0,.15);border-top-color:#0009;border-radius:50%;animation:spin .7s linear infinite}.chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 0;padding:2px 0 0;justify-content:center;align-items:center}.chip{padding:16px 18px;border-radius:999px;background:#1b2030;border:1px solid #242a36;color:#a0a8b3;font-size:.95rem;cursor:pointer;@keyframes spin{to{transform:rotate(360deg)}}@keyframes chip-spin{to{transform:rotate(1turn)}}transition:background-color .2s,color .2s,transform .06s ease}.chip *{box-sizing:border-box}.chip html,.chip body,.chip #root{height:100%}.chip .home{min-height:100dvh;display:grid;grid-template-rows:auto 1fr;color:#e6e7eb;background:radial-gradient(1200px 600px at 60% 10%,rgba(255,187,92,.06),transparent 60%),radial-gradient(1000px 500px at 10% 0%,rgba(92,122,255,.05),transparent 55%),#0e1116}.chip .home__content{width:min(900px,92%);margin:0 auto;min-height:calc(100dvh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:0 16px}.chip .mode-toggle{width:min(520px,100%);display:flex;gap:8px;padding:6px;background:#0f141b;border:1px solid #1f2532;border-radius:14px;box-shadow:none;align-self:center}.chip .btn{flex:1 1 0;appearance:none;background:#0f141b;border:1px solid #1f2532;color:#a0a8b3;padding:12px 16px;border-radius:10px;font:600 .98rem/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}.chip .btn:hover{background:#121925;color:#cfd5de}.chip .btn:active{transform:none}.chip .btn--active{background:#ffc562;border-color:#ffc562;color:#171a1f;box-shadow:none}.chip .search__form{width:min(900px,100%);margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.chip .search__input,.chip .btn_getrecipe{min-height:56px;font-size:1rem}.chip .search__input{width:100%;padding:0 20px;border:1px solid #242a36;border-radius:18px;background:#151922;color:#e6e7eb;outline:none;box-shadow:inset 0 1px 2px #00000040;transition:border-color .2s,box-shadow .2s,transform .12s}.chip .search__input::placeholder{color:#8f97a3}.chip .search__input:focus{border-color:#334155;box-shadow:0 0 0 3px #3b82f626,inset 0 1px 2px #00000040}.chip .btn_getrecipe{padding:0 28px;border:0;border-radius:16px;color:#0b0e12;background:linear-gradient(90deg,#ffd67a,#ff9393);box-shadow:0 16px 40px #ffb0608c;cursor:pointer;transition:transform 90ms ease,filter .2s ease}.chip .btn_getrecipe:hover{transform:translateY(-1px);filter:brightness(1.08)}.chip .btn_getrecipe:active{transform:translateY(0)}.chip .btn_getrecipe[disabled]{opacity:.6;cursor:not-allowed;filter:saturate(.85)}.chip .chips{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;padding-top:4px;justify-content:center;align-items:center}.chip .chip{position:relative;padding:14px 22px;border-radius:999px;background:#1b2030;border:1px solid #242a36;color:#c2c7d0;font-size:1rem;cursor:pointer;transition:background-color .2s,color .2s,transform .08s ease,border-color .2s;z-index:0}.chip .chip:hover{color:#e6e7eb;transform:translateY(-1px);border-color:transparent}.chip .chip:after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(from 0turn,#ffc562,#ff8b8b,#6ea8ff,#ffc562);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:0;transition:opacity .25s ease;z-index:-1}.chip .chip:hover:after{opacity:1;animation:chip-spin 1.6s linear infinite}@media (prefers-reduced-motion: reduce){.chip .chip:hover:after{animation:none}}@media (min-width: 768px){.chip .home__content{gap:26px}}.chip:hover{color:#e6e7eb;transform:translateY(-1px)}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width: 768px){.home__content{gap:26px;padding-top:14vh}}.header{position:sticky;top:0;z-index:50;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:14px clamp(12px,3vw,22px);background:#0e1116b3;border-bottom:1px solid #242a36;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.header__spacer{height:1px}.title{grid-column:1;margin:0;font-weight:800;font-size:clamp(19px,2.2vw,24px);letter-spacing:.2px;color:#e6e7eb;line-height:1.1;text-align:center}.actions{grid-column:3;display:flex;justify-content:flex-end;align-items:center;gap:10px}.btn-feedback{appearance:none;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid #2a3142;background:#151a23;color:#e6e7eb;font:600 .95rem/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;text-decoration:none;transition:background-color .2s ease,border-color .2s ease,transform .06s ease}.btn-feedback:hover{background:#1a2130;border-color:#3a4357;transform:translateY(-1px)}.btn-feedback:active{transform:translateY(0)}*{box-sizing:border-box}.recipe{background:#0e1116;color:#e6e7eb;max-width:1200px;margin:0 auto;padding:24px;min-height:100dvh}.recipe__grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;margin-top:50px}@media (min-width: 960px){.recipe__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:40px}}.recipe__media{aspect-ratio:3/3}.recipe__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:20px}.recipe__chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;list-style:none;padding-left:0}.chip{padding:8px 12px;border-radius:999px;background:#1b2030;border:1px solid #242a36;color:#c2c7d0;font-size:14px;line-height:1;display:inline-flex;align-items:center;gap:8px}.recipe__title{font-size:28px;font-weight:700;letter-spacing:.5px}.recipe__tabs{display:flex;gap:6px;background:#151922;border:1px solid #242a36;padding:6px;border-radius:999px}.tabs__btn{appearance:none;width:100%;border:1px solid transparent;background:transparent;color:#e6e7eb;padding:10px 16px;border-radius:999px;font-weight:600;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}.tabs__btn:hover{color:#d7dbe2}.tabs__btn--active{background:#ffc562;color:#171a1f;border-color:#ffc562}.recipe__panel{background:transparent}.ingredients,.steps{max-height:56vh;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#2c3446 #11151d}.ingredients::-webkit-scrollbar,.steps::-webkit-scrollbar{width:10px}.ingredients::-webkit-scrollbar-track,.steps::-webkit-scrollbar-track{background:#11151d;border-radius:10px}.ingredients::-webkit-scrollbar-thumb,.steps::-webkit-scrollbar-thumb{background:#2c3446;border-radius:10px;border:2px solid #11151d}.ingredients::-webkit-scrollbar-thumb:hover,.steps::-webkit-scrollbar-thumb:hover{background:#3a445a}.ingredients{list-style:none;margin-top:20px;display:grid;gap:14px;padding:0}.ingredients__item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 18px;background:#151922;border:1px solid #242a36;border-radius:16px}.ingredients__check{width:18px;height:18px;cursor:pointer}.ingredients__name{font-weight:600}.ingredients__qty{color:#9da3af;font-size:14px}.recipe__actions{margin:32px 0 24px}.action{appearance:none;border:1px solid #242a36;background:#151922;color:#e6e7eb;padding:12px 20px;border-radius:999px;font-weight:600;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.action:hover{background:#171b22;border-color:#334155;box-shadow:0 0 0 6px #3341552e}.steps{list-style:none;margin-top:20px;display:grid;gap:16px;padding-left:0}.steps__item{display:grid;grid-template-columns:1fr;align-items:start;gap:12px}.steps__card{background:#151922;border:1px solid #242a36;border-radius:16px;padding:14px 16px;box-shadow:0 6px 24px #00000059}.steps__text{margin:0;color:#e6e7eb;font-size:15px;line-height:1.6}.steps__actions{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.btn{appearance:none;border:none;background:none;color:#e6e7eb;font-weight:600;cursor:pointer}.btn--ghost{border:1px solid #242a36;background:#11151d;border-radius:10px;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.btn--compact{padding:6px 10px;font-size:13px}.btn--ghost:hover,.btn--ghost:focus-visible{outline:none;background:#151a23;border-color:#334155;box-shadow:0 0 0 6px #3341552e}.chip--mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;padding:6px 10px;border-radius:999px;background:#11151d;border:1px solid #242a36;color:#e6e7eb;font-size:13px;line-height:1}@media (prefers-reduced-motion: no-preference){.btn--ghost{transition:box-shadow .16s ease,border-color .16s ease,background-color .16s ease}}
