:root{
  --primary:#1b6eea; --primary-2:#2563eb; --accent:#22c55e;
  --bg:#f6f8ff; --text:#0f172a; --muted:#475569;
  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 14px 40px rgba(15,23,42,0.10);
  --shadow-soft: 0 10px 25px rgba(15,23,42,0.08);
  --card: rgba(255,255,255,0.95);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(37,99,235,0.18), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(34,197,94,0.14), transparent 60%),
    radial-gradient(900px 500px at 70% 90%, rgba(109,40,217,0.10), transparent 60%),
    var(--bg);
  color: var(--text);
}

body.lock{overflow:hidden}

.container{width:100%;max-width:1120px;margin:0 auto;padding:2rem}
.topbar{margin-bottom:1rem}
.brand{display:flex;align-items:center;gap:1rem}
.logo{
  width:52px;height:52px;border-radius:18px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display:flex;justify-content:center;align-items:center;
  font-weight:900;font-size:1.35rem;color:#fff;
  box-shadow: 0 12px 26px rgba(37,99,235,0.18);
}
h1{font-size: clamp(1.7rem, 3vw, 2.2rem);letter-spacing:-0.02em;line-height:1.05}
h1 span{background: linear-gradient(to right, var(--primary-2), var(--accent));-webkit-background-clip:text;color:transparent}
.subtitle{margin-top:.3rem;color: var(--muted);line-height:1.55;font-size:1rem}

.section{margin-top:1rem}
.grid{display:grid;grid-template-columns: repeat(12,1fr);gap:1rem}
.card{
  grid-column: span 12;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.25rem 1.25rem 1.05rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 980px){
  .card{ grid-column: span 6; }
  .card.full{ grid-column: span 12; }
}

.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.cols{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:980px){ .cols{grid-template-columns: 1fr 1fr} }

input,select{
  width:100%;
  padding:.62rem .85rem;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
  color: var(--text);
  outline:none;
  box-shadow: var(--shadow-soft);
}
select{max-width:240px}
input[readonly]{opacity:.9}

.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

.btn{
  appearance:none;border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.90);color: var(--text);
  padding: .62rem .95rem;border-radius: 999px;font-weight: 800;font-size: .92rem;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap: .55rem;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow-soft);
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px);border-color: rgba(37,99,235,0.25);}
.btn.primary{border-color: rgba(37,99,235,0.22);background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(34,197,94,0.10));}
.btn.strong{color:#fff;border-color: rgba(37,99,235,0.22);background: linear-gradient(135deg, var(--primary), var(--accent));box-shadow: 0 16px 35px rgba(37,99,235,0.22);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.alert{margin-top:.8rem;padding:.75rem 1rem;border-radius:16px;border:1px solid rgba(220,38,38,.22);background:rgba(220,38,38,.07);color:#991b1b;font-weight:800}
.alert.error strong{font-weight:900}

.recipe-title{text-align:center;font-weight:900;font-size: clamp(1.3rem, 2.6vw, 1.9rem);letter-spacing:-0.01em}
h2{font-size:1.05rem;font-weight:900;margin-bottom:.55rem;letter-spacing:-0.01em}
ul{padding-left:1.2rem}
li{margin:.25rem 0;color:var(--text);font-weight:650}

.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:18px;border:1px solid rgba(15,23,42,0.10)}
.table th{
  text-align:left;
  background: rgba(255,255,255,0.90);
  color: var(--text);
  font-weight:900;
  padding:.75rem .8rem;
  border-bottom:1px solid rgba(15,23,42,0.10)
}
.table td{
  padding:.75rem .8rem;
  border-bottom:1px solid rgba(15,23,42,0.07);
  vertical-align:top;
  color: var(--text);
  font-weight:650;
  background: rgba(255,255,255,0.92);
}
.table tr:last-child td{border-bottom:none}