:root{
  --bg:#f7f3ec;
  --paper:#ffffff;
  --ink:#3d2e25;
  --muted:#887b70;
  --gold:#b8892f;
  --gold-soft:#f5ead4;
  --line:#e6dbcf;
  --danger:#a84438;
  --success:#31734a;
  --shadow:0 14px 40px rgba(58,40,27,.07);
  --radius:20px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;min-width:0}
button,input,select{font:inherit}
button{cursor:pointer}
.app-header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px max(18px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line);
  background:rgba(247,243,236,.94);backdrop-filter:blur(14px)
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:48px;height:48px;border-radius:15px;background:var(--ink);color:white;display:grid;place-items:center;font:700 17px Georgia,serif;letter-spacing:.04em;box-shadow:var(--shadow)}
.brand-mark span{color:#e7bb5e}
.brand-title{font:700 20px Georgia,serif;white-space:nowrap}
.brand-sub{font-size:11px;color:var(--muted);margin-top:2px}
.header-controls{display:flex;gap:8px}
.mini-control{display:grid;gap:3px}
.mini-control span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mini-control select{height:36px;padding:0 30px 0 10px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);font-weight:800}
.app-shell{max-width:1180px;margin:0 auto;padding:28px 18px 110px}
.hero{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;margin:10px 0 24px}
.hero h1{font:700 clamp(35px,5vw,58px)/1.02 Georgia,serif;margin:6px 0 12px;max-width:760px;letter-spacing:-.03em}
.hero p{margin:0;max-width:760px;color:var(--muted);font-size:15px;line-height:1.6}
.kicker{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.summary-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:17px 18px;display:grid;gap:5px;box-shadow:0 7px 24px rgba(58,40,27,.03);min-width:0}
.summary-card small{font-size:11px;font-weight:800;color:var(--muted)}
.summary-card strong{font-size:28px;line-height:1.1;overflow-wrap:anywhere}
.summary-card span{font-size:11px;color:var(--muted)}
.summary-card.highlight{background:var(--ink);border-color:var(--ink)}
.summary-card.highlight small,.summary-card.highlight span{color:#d8cabf}
.summary-card.highlight strong{color:#e7bb5e}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0 0 16px;box-shadow:var(--shadow);min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.panel-head h2{font:700 28px/1.1 Georgia,serif;margin:4px 0 0}
.panel-head .muted{margin:8px 0 0}
.panel-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{border:1px solid var(--line);border-radius:12px;min-height:42px;padding:10px 14px;background:white;color:var(--ink);font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn.primary{background:var(--ink);border-color:var(--ink);color:white}
.btn.secondary{background:var(--gold);border-color:var(--gold);color:white}
.btn.ghost:hover{background:#faf6f0}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.field{display:grid;gap:6px;min-width:0}
.field>span{font-size:11px;font-weight:800;color:var(--muted)}
.field-wide{grid-column:span 2}
input,select{width:100%;min-width:0;height:46px;border:1px solid #ddd1c3;border-radius:11px;background:#fff;color:var(--ink);padding:0 11px;outline:none}
input:focus,select:focus{border-color:#b98a32;box-shadow:0 0 0 3px rgba(185,138,50,.11)}
.muted{color:var(--muted);font-size:12px;line-height:1.5}
.ingredient-head{align-items:flex-end}
.desktop-table-wrap{display:block;max-width:100%;overflow-x:auto}
.desktop-head,.desktop-row{display:grid;grid-template-columns:140px minmax(160px,1.35fr) minmax(180px,1fr) 130px 120px 135px 38px;gap:8px;align-items:center;min-width:940px}
.desktop-head{padding:0 4px 8px;color:var(--muted);font-size:9px;text-transform:uppercase;font-weight:900;letter-spacing:.04em}
.desktop-row{padding:9px 4px;border-top:1px solid #f0e8df}
.desktop-row input,.desktop-row select{height:42px}
.qty-unit{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:6px}
.desktop-row output{font-weight:900;text-align:right;white-space:nowrap}
.remove-btn{width:36px;height:36px;border:0;border-radius:10px;background:#fff2ef;color:var(--danger);font-size:22px;line-height:1}
.rows-mobile{display:none}
.empty-state{padding:42px 20px;text-align:center;color:var(--muted);display:grid;justify-items:center;gap:7px}
.empty-state b{font-size:18px;color:var(--ink)}
.empty-icon{width:54px;height:54px;border-radius:17px;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold);font:700 26px Georgia,serif;margin-bottom:4px}
.category-breakdown{display:grid;gap:8px}
.breakdown-row{display:grid;grid-template-columns:150px minmax(0,1fr) 120px;gap:12px;align-items:center}
.breakdown-label{font-size:12px;font-weight:800;overflow-wrap:anywhere}
.breakdown-track{height:10px;border-radius:99px;background:#f2ebe4;overflow:hidden}
.breakdown-fill{height:100%;background:linear-gradient(90deg,#c4963a,#e2bb6a);border-radius:inherit}
.breakdown-value{text-align:right;font-size:12px;font-weight:900;white-space:nowrap}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.result-card{border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:5px;min-width:0;background:#fff}
.result-card small{color:var(--muted);font-size:10px;font-weight:800;line-height:1.35}
.result-card strong{font-size:22px;overflow-wrap:anywhere}
.result-card.recommended{grid-column:span 2;background:var(--ink);border-color:var(--ink)}
.result-card.recommended small,.result-card.recommended span{color:#d8cabf}
.result-card.recommended strong{color:#e7bb5e;font-size:30px}
.result-card.recommended span{font-size:10px}
.sticky-actions{
  position:fixed;left:50%;bottom:max(12px,var(--safe-bottom));transform:translateX(-50%);z-index:40;
  width:min(720px,calc(100vw - 24px));padding:8px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  box-shadow:0 18px 55px rgba(58,40,27,.2);display:grid;grid-template-columns:repeat(3,1fr);gap:7px
}
.dialog{border:0;padding:0;background:transparent;width:min(700px,calc(100vw - 24px));max-height:85vh}
.dialog::backdrop{background:rgba(31,22,17,.48);backdrop-filter:blur(2px)}
.dialog-card{background:white;border:1px solid var(--line);border-radius:22px;padding:20px;max-height:85vh;overflow:auto;box-shadow:0 30px 90px rgba(31,22,17,.25)}
.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.dialog-head h2{font:700 27px Georgia,serif;margin:4px 0 0}
.icon-btn{border:0;background:#f6f0e9;width:40px;height:40px;border-radius:12px;font-size:22px}
.history-list{display:grid;gap:9px}
.history-item{border:1px solid var(--line);border-radius:14px;padding:13px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.history-item b{display:block;overflow-wrap:anywhere}
.history-item small{color:var(--muted)}
.history-actions{display:flex;gap:6px}
.history-actions button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 9px}
.toast{position:fixed;top:82px;left:50%;z-index:100;transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:#2f241e;color:white;padding:10px 14px;border-radius:12px;font-size:12px;font-weight:800;transition:.2s;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:900px){
  .summary-grid{grid-template-columns:1fr 1fr}
  .summary-card.highlight{grid-column:1/-1}
  .form-grid{grid-template-columns:1fr 1fr}
  .result-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .app-header{padding:10px 12px;gap:10px}
  .brand-mark{width:42px;height:42px;border-radius:13px}
  .brand-title{font-size:18px}
  .brand-sub{display:none}
  .mini-control span{display:none}
  .mini-control select{height:40px;padding-left:8px;padding-right:26px}
  .app-shell{padding:18px 12px 105px}
  .hero{display:grid;gap:14px;margin-top:6px}
  .hero h1{font-size:clamp(34px,10vw,46px)}
  .hero p{font-size:14px}
  .install-btn{width:100%}
  .summary-grid{grid-template-columns:1fr;gap:8px}
  .summary-card.highlight{grid-column:auto}
  .summary-card{padding:14px 15px}
  .summary-card strong{font-size:25px}
  .panel{padding:15px;border-radius:17px}
  .panel-head{display:grid;gap:11px;margin-bottom:14px}
  .panel-head h2{font-size:26px}
  .panel-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .ingredient-head .btn{width:100%}
  .form-grid{grid-template-columns:1fr 1fr;gap:10px}
  .field-wide{grid-column:1/-1}
  input,select{height:48px;font-size:16px}
  .desktop-table-wrap{display:none}
  .rows-mobile{display:grid;gap:10px}
  .mobile-row-card{border:1px solid var(--line);border-radius:16px;padding:13px;background:#fff;display:grid;gap:11px;box-shadow:0 6px 20px rgba(58,40,27,.035)}
  .mobile-row-head{display:grid;grid-template-columns:29px minmax(0,1fr) 36px;gap:7px;align-items:center}
  .row-index{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--gold-soft);color:#9b7124;font-size:11px;font-weight:900}
  .mobile-name{font-weight:900;background:#fffaf3;border-color:#eadfcf}
  .two-col{display:grid;grid-template-columns:1fr 90px;gap:8px}
  .two-col+.two-col{grid-template-columns:1fr 1fr}
  .mobile-cost-line{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;border-top:1px solid #eee5dc;padding-top:11px}
  .mobile-cost-line span{font-size:11px;color:var(--muted);font-weight:800}
  .mobile-cost-line output{font-size:20px;font-weight:900;color:#a67621;white-space:nowrap}
  .breakdown-row{grid-template-columns:110px minmax(0,1fr);gap:8px}
  .breakdown-value{grid-column:2;text-align:left;margin-top:-4px}
  .result-grid{grid-template-columns:1fr}
  .result-card.recommended{grid-column:auto}
  .sticky-actions{grid-template-columns:1fr 1fr}
  .sticky-actions .btn.primary{grid-column:1/-1;grid-row:1}
}
@media(max-width:420px){
  .header-controls{gap:5px}
  .mini-control select{max-width:70px}
  .form-grid{grid-template-columns:1fr}
  .field-wide{grid-column:auto}
  .two-col,.two-col+.two-col{grid-template-columns:1fr}
  .panel-actions{grid-template-columns:1fr}
}
@media print{
  .app-header,.hero .install-btn,.panel-actions,.ingredient-head .btn,.sticky-actions,.remove-btn,.dialog,.toast{display:none!important}
  body,.app-shell{background:#fff}
  .app-shell{max-width:none;padding:0}
  .panel,.summary-card{box-shadow:none;break-inside:avoid}
  .desktop-table-wrap{display:block!important}
  .rows-mobile{display:none!important}
}