:root{--bg:#ece8df;--paper:#f7f5ef;--ink:#25302c;--green:#2e6c52;--lime:#c9db78;--line:#c9c5b9;--orange:#db6d44}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,PingFang SC,sans-serif}.app{width:min(1180px,calc(100% - 40px));margin:auto;padding:30px 0 70px}header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:17px;margin-bottom:28px}.mark{width:62px;height:62px;background:var(--green);color:#fff;border-radius:9px 23px 9px 9px;display:grid;place-items:center;font:900 21px Georgia}.mark span{color:var(--lime)}.kicker{font-size:9px;letter-spacing:.18em;color:#7c827d;margin:0 0 4px}h1{font:700 29px Georgia;margin:0}.save-state{font-size:11px;color:#777;display:flex;align-items:center;gap:7px}.save-state i{width:8px;height:8px;border-radius:50%;background:#aaa}.save-state.on i{background:var(--green);box-shadow:0 0 0 3px #2e6c521f}.recipe-head{background:var(--green);color:#fff;border-radius:22px 22px 5px 5px;padding:26px 30px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}.recipe-head label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#cbd9d1}.name-field input{display:block;width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:27px Georgia;padding:8px 0;outline:none}.name-field input::placeholder{color:#a9beb3}.servings{display:flex;align-items:flex-end;gap:14px}.servings label{text-align:center}.servings input{display:block;width:98px;height:48px;background:#f8f3e8;border:0;border-radius:6px;margin-top:7px;text-align:center;font-size:20px;font-weight:800;color:var(--ink)}.servings>span{margin-bottom:13px;color:var(--lime)}.servings>span b{font-size:19px}.global-error{background:#ffd9cc;color:#8d351b;padding:10px 16px;font-size:12px}.board{background:var(--paper);border:1px solid var(--line);border-top:0}.list-head,.ingredient{display:grid;grid-template-columns:2fr .85fr 1.15fr 1fr 66px;gap:15px;align-items:center}.list-head{height:40px;padding:0 22px;color:#8a8a83;font-size:9px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--line)}.ingredient{padding:17px 22px;border-bottom:1px solid #dedbd1;min-height:85px}.ingredient:last-child{border-bottom:0}.ingredient-name{display:flex;gap:14px;align-items:center;min-width:0}.ingredient-name em{font:10px Georgia;color:#aaa;font-style:normal}.ingredient-name div{min-width:0}.ingredient-name strong{display:block;font:700 17px Georgia;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ingredient-name small{color:#888;display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.value{display:flex;flex-direction:column;gap:4px}.value small{font-size:9px;color:#999}.value b{font-size:16px}.value b i,.summary i{font-style:normal;font-size:10px;font-weight:500}.value span{font-size:9px;color:var(--green)}.target b{color:var(--green);font-size:19px}.rounding{display:flex;flex-direction:column;gap:4px;color:var(--orange)}.rounding b{font-size:11px}.rounding span{font-size:9px;color:#999}.rounding.exact b{color:var(--green)}.row-actions{display:flex;gap:5px}.row-actions button{width:29px;height:29px;border:1px solid var(--line);background:transparent;border-radius:50%;cursor:pointer;color:#777}.row-actions button:hover{background:var(--ink);color:#fff}.empty{text-align:center;padding:60px 20px;display:flex;flex-direction:column;gap:8px}.empty span{font-size:12px;color:#888}.add-panel{background:#dad4c6;border-radius:5px 5px 18px 18px;padding:25px 30px;display:grid;grid-template-columns:200px 1fr;gap:25px}.add-title{display:flex;gap:12px;align-items:start}.add-title>b{width:32px;height:32px;border-radius:50%;background:var(--lime);display:grid;place-items:center}.add-title h2{font:19px Georgia;margin:1px 0 5px}.add-title p{font-size:10px;color:#777;margin:0}.add-grid{display:grid;grid-template-columns:1.2fr .55fr .6fr 1fr auto;gap:8px}.add-grid label{font-size:9px;color:#6f6c65}.add-grid input,.add-grid select{display:block;width:100%;height:39px;margin-top:6px;background:var(--paper);border:1px solid #c2bcaf;border-radius:4px;padding:0 9px;min-width:0}.add-button{align-self:end;height:39px;border:0;border-radius:4px;background:var(--ink);color:#fff;padding:0 17px;font-weight:700;cursor:pointer;white-space:nowrap}.form-error{grid-column:2;margin:0;color:#a43d24;min-height:15px;font-size:11px}.summary{margin:22px 0 0 auto;width:min(100%,550px);display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line)}.summary div{padding:17px 20px}.summary div+div{border-left:1px solid var(--line)}.summary span{font-size:9px;color:#888;display:block}.summary b{font:21px Georgia;display:block;margin-top:5px}.summary p{grid-column:1/-1;margin:0;padding:9px 20px;background:#dfdbcf;font-size:9px;color:#777}@media(max-width:850px){.app{width:min(100% - 20px,700px)}.recipe-head{grid-template-columns:1fr}.list-head{display:none}.ingredient{grid-template-columns:1.5fr 1fr 1.2fr;position:relative}.rounding{grid-column:2/4}.row-actions{position:absolute;right:10px;top:10px}.add-panel{grid-template-columns:1fr}.add-grid{grid-template-columns:1fr 1fr}.add-button{height:42px}.form-error{grid-column:1}.summary{width:100%}}@media(max-width:520px){header{grid-template-columns:auto 1fr}.save-state{grid-column:1/-1}.recipe-head{padding:21px 18px}.servings{gap:8px}.servings input{width:80px}.ingredient{grid-template-columns:1fr 1fr;padding:18px 14px}.ingredient-name,.rounding{grid-column:1/-1}.add-panel{padding:20px 15px}.add-grid,.summary{grid-template-columns:1fr}.summary div+div{border-left:0;border-top:1px solid var(--line)}}