:root{
  --bg:#f4e7d8; --card:#fffaf4; --border:#ecd9c4; --ink:#3a322c;
  --muted:#a08c70; --accent:#e98a3c; --accent-ink:#c5631b; --accent-soft:#fde7d2;
  --res:#1f7a4d;
}
*{box-sizing:border-box}
body{
  margin:0; padding:24px 14px; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px;
}
.app-card{
  max-width:580px; margin:0 auto; background:var(--card);
  border:1px solid var(--border); border-radius:18px; padding:18px 20px;
  box-shadow:0 8px 30px rgba(150,110,70,.10);
}
.app-top{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.app-logo{font-size:22px}
.app-name{font-weight:700; color:var(--accent-ink)}
.recipe-pick{margin-left:auto; display:flex; gap:6px; align-items:center}
.btn,.mini{
  border:1px solid var(--border); background:#fff; color:var(--ink);
  border-radius:9px; padding:6px 10px; cursor:pointer; font-size:14px;
}
.btn:hover,.mini:hover{background:var(--accent-soft)}
.mini{padding:4px 8px; color:var(--muted)}
#recipe-select{
  border:1px solid var(--border); border-radius:9px; padding:6px 8px;
  background:#fff; font-size:14px; max-width:180px;
}

.forms{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  padding:12px 14px; background:#f7ede0; border-radius:14px; margin-bottom:14px;
}
.form-line{display:flex; align-items:center; gap:8px}
.lbl{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.seg{display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:#fff}
.seg input{display:none}
.seg label{padding:5px 10px; font-size:14px; color:#6a5640; cursor:pointer}
.seg input:checked + label{background:var(--accent); color:#fff}
.num{
  width:58px; text-align:center; border:1px solid var(--border);
  border-radius:9px; padding:6px 4px; background:#fff; font-size:14px;
}
.muted{color:var(--muted); font-size:13px}
.coef{
  margin-left:auto; font-weight:700; color:var(--accent-ink); background:var(--accent-soft);
  padding:6px 14px; border-radius:999px; white-space:nowrap;
}

.section{margin-bottom:10px}
.section-head{display:flex; align-items:center; gap:8px; margin:14px 0 6px}
.section-title{
  flex:1; border:none; background:transparent; font-size:12px; text-transform:uppercase;
  letter-spacing:.05em; color:#b08a5e; font-weight:700; padding:2px 0;
}
.section-title:focus{outline:none; border-bottom:1px solid var(--border)}

.row{
  display:grid; grid-template-columns:1.5fr 64px 76px 18px 1fr 24px;
  align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed #efe0cf;
}
.row input,.row select{
  border:1px solid var(--border); border-radius:8px; padding:6px;
  background:#fff; font-size:14px; width:100%;
}
.row .name{color:var(--ink)}
.row .cell{text-align:center}
.arrow{text-align:center; color:#cdb393}
.res{font-weight:700; color:var(--res); text-align:right; font-size:14px}
.add{
  border:none; background:transparent; color:var(--accent-ink);
  cursor:pointer; font-size:14px; padding:8px 0;
}
.add:hover{text-decoration:underline}

@media (max-width:480px){
  .row{grid-template-columns:1.4fr 52px 62px 14px 1fr 22px; gap:5px; font-size:13px}
  .row input,.row select{padding:5px 4px}
  .recipe-pick{width:100%; margin-left:0}
  #recipe-select{flex:1; max-width:none}
}