/* layout */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.page{background:linear-gradient(135deg,#0f172a,#4c1d95,#312e81);min-height:100vh;color:#fff}
/* cards & UI */
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.2);overflow:hidden}
.pad{padding:1rem}.mb{margin-bottom:1rem}.mt{margin-top:1rem}
.btn{border:1px solid rgba(255,255,255,.2);padding:.65rem 1rem;border-radius:12px;color:#fff}
.btn.primary{background:linear-gradient(90deg,#a855f7,#ec4899);border:none}
.btn.warn{background:linear-gradient(90deg,#f59e0b,#ef4444);border:none}
.btn.ghost{background:transparent}
.input{width:100%;padding:.75rem 1rem;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:.75rem}
.row{display:flex;gap:.75rem}.between{justify-content:space-between}.center{justify-content:center;align-items:center}
.wrap{flex-wrap:wrap}.gap{gap:.75rem}
.title{font-size:2rem;font-weight:800}
.h2{font-size:1.5rem;font-weight:700}.h3{font-size:1.25rem;font-weight:700}.h4{font-size:1.1rem;font-weight:700}
.muted{color:#cbd5e1}.error{color:#fecaca}.ok{color:#86efac}.ko{color:#fca5a5}
.grid3 .card.hover:hover{border-color:#a855f7}
.recipe .thumb{position:relative;height:180px;background:#111}
.recipe .thumb img{width:100%;height:100%;object-fit:cover}
.recipe .fav{position:absolute;right:.5rem;top:.5rem;background:rgba(0,0,0,.45);border:none;border-radius:999px;width:36px;height:36px;color:#fff}
.recipe .fav.on{background:#ef4444}
.tag{display:inline-block;background:rgba(168,85,247,.25);color:#e9d5ff;padding:.2rem .5rem;border-radius:999px;margin:.1rem .2rem 0 0}
.thumb.big img{width:100%;max-height:420px;object-fit:cover;border-radius:16px}
.step{display:flex;gap:.5rem;align-items:flex-start;margin:.5rem 0}
.badge{display:inline-block;width:28px;height:28px;border-radius:999px;background:rgba(168,85,247,.6);text-align:center;line-height:28px}
@media (max-width:1024px){.grid3{grid-template-columns:repeat(2,1fr)}.grid7{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}
@media (max-width:640px){.grid3{grid-template-columns:1fr}}