/* ── RESET & BASE ─────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:       #F5F5F3;
  --surface:  #FFFFFF;
  --border:   #E0E0DC;
  --border2:  #C8C8C4;
  --text1:    #1A1A18;
  --text2:    #5A5A56;
  --text3:    #9A9A96;
  --accent:   #1A1A18;
  --core-bg:  #F0F4FF;
  --core-bd:  #B0B8D8;
  --core-tx:  #1E2A5A;
  --opt-bg:   #F8F8F4;
  --opt-bd:   #C8C8C0;
  --opt-tx:   #4A4A40;
  --warn:     #FFF8E6;
  --warn-bd:  #D4A017;
  --warn-tx:  #7A5500;
  --ok-bg:    #F0F8F0;
  --ok-bd:    #88BB88;
  --ok-tx:    #1A4A1A;
  --radius:   4px;
  --mono:     "IBM Plex Mono", monospace;
  --sans:     "IBM Plex Sans Arabic", sans-serif;
}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text1);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
}
input{font-family:var(--mono);outline:none}
button{font-family:var(--sans);cursor:pointer}

/* ── TOPBAR ──────────────────────────────────────────────────────── */
#topbar{
  background:var(--surface);
  border-bottom:2px solid var(--text1);
  position:sticky;top:0;z-index:100;
}
/* Row 1: brand + batch */
#topbar-row1{
  max-width:960px;margin:0 auto;
  padding:0 16px;
  display:flex;align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
}
.tb-brand{
  padding:10px 0;
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}
.tb-brand-icon{
  width:28px;height:28px;
  background:var(--text1);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;border-radius:2px;flex-shrink:0;
}
.tb-brand-name{font-weight:700;font-size:13px;letter-spacing:-.2px}
.tb-brand-sub{font-size:9px;color:var(--text3);font-family:var(--mono)}
.tb-batch{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.tb-batch label{font-size:10px;color:var(--text3);font-family:var(--mono)}
.tb-batch input{
  width:56px;border:none;
  border-bottom:2px solid var(--border2);
  background:transparent;
  font-size:18px;font-weight:700;
  text-align:center;color:var(--text1);padding:2px 0;
}
.tb-batch input:focus{border-bottom-color:var(--text1)}
.tb-batch-unit{font-size:10px;color:var(--text3);font-family:var(--mono)}
/* Row 2: app switcher — full width, 3 equal buttons */
#tb-apps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--border);
}
.tb-app{
  padding:8px 10px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;
  border-bottom:3px solid transparent;
  border-left:none;border-right:none;border-top:none;
  transition:border-color .15s,background .15s;
  background:transparent;text-align:center;
  border-left:1px solid var(--border);
}
.tb-app:first-child{border-left:none}
.tb-app:hover{background:#F8F8F6}
.tb-app.active{border-bottom-color:var(--text1);background:#FAFAF8}
.tb-app-icon{font-size:18px;line-height:1;flex-shrink:0}
.tb-app-name{font-size:13px;font-weight:600;color:var(--text1)}
.tb-app-sub{font-size:9px;color:var(--text3);font-family:var(--mono);display:none}

/* ── APP TABS ────────────────────────────────────────────────────── */
#apptabs-inner{
  max-width:960px;margin:0 auto;
  padding:0 16px;
  display:flex;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.atab{
  padding:10px 20px;
  font-size:12px;font-weight:500;color:var(--text3);
  border:none;background:transparent;
  border-bottom:2px solid transparent;
  transition:all .15s;margin-bottom:-1px;
}
.atab:hover{color:var(--text2)}
.atab.active{color:var(--text1);font-weight:600;border-bottom-color:var(--text1)}

/* ── MAIN CONTENT ─────────────────────────────────────────────────── */
#main{max-width:960px;margin:0 auto;padding:24px 20px}

/* ── WARNING BAR ──────────────────────────────────────────────────── */
.warnbar{
  background:var(--warn);border:1px solid var(--warn-bd);
  border-radius:var(--radius);
  padding:8px 14px;margin-bottom:16px;
  font-size:12px;color:var(--warn-tx);
  display:flex;gap:8px;align-items:flex-start;
}
.okbar{
  background:var(--ok-bg);border:1px solid var(--ok-bd);
  border-radius:var(--radius);
  padding:8px 14px;margin-bottom:16px;
  font-size:12px;color:var(--ok-tx);
  display:flex;gap:8px;
}

/* ── PHASE BLOCK ──────────────────────────────────────────────────── */
.phase-block{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:12px;
  overflow:hidden;
}
.phase-head{
  padding:8px 14px;
  background:#FAFAF8;
  border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.phase-label{
  font-size:10px;font-weight:700;font-family:var(--mono);
  letter-spacing:.5px;color:var(--text3);text-transform:uppercase;
}
.phase-name{font-size:13px;font-weight:600;color:var(--text1);margin-right:8px}
.phase-total{
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text2);
}

/* ── TABLE ────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
thead tr{border-bottom:1px solid var(--border)}
thead th{
  padding:6px 12px;
  font-size:10px;font-weight:600;font-family:var(--mono);
  color:var(--text3);text-align:right;white-space:nowrap;
  background:#FAFAF8;
}
tbody tr{border-bottom:1px solid #F0F0EC}
tbody tr:last-child{border-bottom:none}
tbody tr.core-row{background:var(--core-bg)}
tbody tr.opt-row{background:var(--surface)}
tbody tr.opt-off{opacity:.4}
td{padding:8px 12px;vertical-align:top}

/* ── INGREDIENT NAME CELL ──────────────────────────────────────────── */
.ing-inci{font-size:12px;font-weight:500;color:var(--text1);font-family:var(--mono)}
.ing-arabic{font-size:12px;color:var(--text2);margin-top:1px}
.ing-role{font-size:11px;color:var(--text3);margin-top:2px}
.badge{
  display:inline-block;
  font-size:9px;font-weight:700;font-family:var(--mono);
  padding:1px 5px;border-radius:2px;margin-top:3px;
  letter-spacing:.3px;
}
.badge-core{background:var(--core-bg);color:var(--core-tx);border:1px solid var(--core-bd)}
.badge-opt{background:var(--opt-bg);color:var(--opt-tx);border:1px solid var(--opt-bd)}
.badge-qs{background:var(--warn);color:var(--warn-tx);border:1px solid var(--warn-bd)}
.badge-am{background:#FFF8F0;color:#7A3500;border:1px solid #D4A078;font-size:9px}

/* ── PCT + GRAM CELL ──────────────────────────────────────────────── */
.pg-cell{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.pct-display{
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text1);
  min-width:60px;text-align:center;
}
.pct-input{
  width:58px;
  border:1px solid var(--border2);border-radius:var(--radius);
  padding:3px 6px;font-size:13px;font-weight:600;
  text-align:center;color:var(--text1);background:var(--surface);
  transition:border-color .15s;
}
.pct-input:focus{border-color:var(--text1)}
.pct-input:disabled{background:var(--bg);color:var(--text3);border-color:var(--border)}
.pct-unit{font-family:var(--mono);font-size:11px;color:var(--text3)}
.gram-badge{
  font-family:var(--mono);font-size:12px;font-weight:500;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);
  padding:3px 8px;min-width:80px;text-align:center;color:var(--text2);
}
.gram-badge.active{background:#F0F4F0;border-color:var(--ok-bd);color:var(--ok-tx)}

/* ── TOGGLE ───────────────────────────────────────────────────────── */
.toggle-cell{text-align:center}
.toggle{
  width:32px;height:18px;border-radius:9px;
  border:none;cursor:pointer;position:relative;
  transition:background .2s;flex-shrink:0;
  display:inline-block;
}
.toggle.on{background:var(--text1)}
.toggle.off{background:var(--border2)}
.toggle-knob{
  width:14px;height:14px;border-radius:50%;background:#fff;
  position:absolute;top:2px;transition:left .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle.on .toggle-knob{left:16px}
.toggle.off .toggle-knob{left:2px}

/* ── WHY ROW ──────────────────────────────────────────────────────── */
.why-row td{
  padding:0 12px 10px 12px;
  font-size:11px;color:var(--text2);line-height:1.65;
}
.why-inner{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 12px;
}
.why-note{color:var(--text3);margin-top:4px;font-style:italic}
.why-btn{
  font-size:10px;font-family:var(--mono);color:var(--text3);
  background:transparent;border:1px solid var(--border);
  border-radius:2px;padding:1px 6px;
  transition:all .15s;margin-top:4px;
}
.why-btn:hover{color:var(--text1);border-color:var(--text1)}

/* ── ALTS ─────────────────────────────────────────────────────────── */
.alts-btn{
  font-size:10px;font-family:var(--mono);color:var(--text3);
  background:transparent;border:1px solid var(--border);
  border-radius:2px;padding:1px 6px;margin-top:4px;margin-right:4px;
  transition:all .15s;
}
.alts-btn:hover{color:var(--text1);border-color:var(--text1)}
.alts-panel{
  margin-top:8px;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.alt-row{
  padding:7px 10px;border-bottom:1px solid var(--border);font-size:11px;
}
.alt-row:last-child{border-bottom:none}
.alt-name{font-weight:600;color:var(--text1);font-family:var(--mono)}
.alt-ar{color:var(--text2)}
.alt-why{color:var(--text3);margin-top:2px}

/* ── SUMMARY CARDS ────────────────────────────────────────────────── */
.summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;margin-top:16px;
}
.summary-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;
}
.summary-card.highlight{
  background:var(--text1);border-color:var(--text1);
}
.sc-label{font-size:10px;font-family:var(--mono);color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.sc-val{font-size:22px;font-weight:700;font-family:var(--mono);color:var(--text1);margin-top:3px}
.sc-sub{font-size:10px;color:var(--text3);margin-top:2px;font-family:var(--mono)}
.summary-card.highlight .sc-label{color:rgba(255,255,255,.5)}
.summary-card.highlight .sc-val{color:#fff}
.summary-card.highlight .sc-sub{color:rgba(255,255,255,.4)}
.sc-warn .sc-val{color:var(--warn-tx)}

/* ── OPTIONALS TAB ────────────────────────────────────────────────── */
.section-head{
  font-size:11px;font-weight:700;font-family:var(--mono);
  color:var(--text3);text-transform:uppercase;letter-spacing:.5px;
  margin:20px 0 8px;border-bottom:1px solid var(--border);padding-bottom:6px;
}
.opt-group{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:8px;overflow:hidden;
}
.og-head{
  padding:8px 14px;background:#FAFAF8;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.og-name{font-size:12px;font-weight:600}
.og-desc{font-size:11px;color:var(--text3);margin-top:1px}
.og-count{font-size:10px;font-family:var(--mono);color:var(--text3)}
.og-toggle-all{
  font-size:10px;font-family:var(--mono);color:var(--text2);
  background:transparent;border:1px solid var(--border);
  border-radius:2px;padding:2px 8px;
}
.og-toggle-all:hover{border-color:var(--text1);color:var(--text1)}
.opt-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--border2);
  cursor:pointer;transition:background .1s;
}
.opt-item:last-child{border-bottom:none}
.opt-item:hover{background:#FAFAF8}
.opt-item.on{background:var(--ok-bg)}
.oi-info{flex:1;min-width:0}
.oi-name{font-size:13px;font-weight:500;color:var(--text1)}
.oi-inci{font-size:11px;color:var(--text3);font-family:var(--mono);margin-top:1px}
.oi-why{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.55}
.oi-pct{
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text2);
  white-space:nowrap;text-align:left;padding-top:1px;
}
.oi-g{font-size:11px;color:var(--text3);font-family:var(--mono);text-align:left}

/* ── PRESERVATIVE / SUGAR SELECTORS ──────────────────────────────── */
.selector-block{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:8px;overflow:hidden;
}
.sel-head{
  padding:8px 14px;background:#FAFAF8;border-bottom:1px solid var(--border);
  font-size:12px;font-weight:600;
}
.sel-option{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .1s;
}
.sel-option:last-child{border-bottom:none}
.sel-option:hover{background:#FAFAF8}
.sel-option.on{background:var(--ok-bg)}
.sel-radio{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;transition:border-color .15s;
}
.sel-option.on .sel-radio{border-color:var(--text1);background:var(--text1)}
.sel-radio-dot{width:6px;height:6px;border-radius:50%;background:#fff}
.sel-name{font-size:13px;font-weight:500}
.sel-pct{font-size:11px;font-family:var(--mono);color:var(--text3)}
.sel-why{font-size:11px;color:var(--text2);margin-top:3px;line-height:1.5}

/* ── INFO NOTE ────────────────────────────────────────────────────── */
.info-note{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:14px;
  font-size:12px;color:var(--text2);line-height:1.7;
  background:var(--surface);
}
.info-note strong{color:var(--text1)}

/* ── MFG STEP ──────────────────────────────────────────────────────── */
.mfg-step-done{ text-decoration:line-through; color:var(--text3); }

/* ── RECIPE MODAL ──────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  z-index:500;display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.modal-box{
  background:var(--surface);border:2px solid var(--text1);
  border-radius:var(--radius);width:100%;max-width:400px;
  padding:20px;
}
.modal-title{font-size:14px;font-weight:700;margin-bottom:14px}
.modal-input{
  width:100%;border:1px solid var(--border2);border-radius:var(--radius);
  padding:8px 10px;font-size:14px;font-family:var(--sans);
  color:var(--text1);background:var(--surface);
  margin-bottom:12px;
}
.modal-input:focus{outline:none;border-color:var(--text1)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.btn{
  padding:7px 16px;font-size:13px;font-family:var(--sans);
  border-radius:var(--radius);cursor:pointer;font-weight:500;
  border:1px solid var(--border2);background:var(--surface);color:var(--text1);
  transition:all .15s;
}
.btn:hover{border-color:var(--text1)}
.btn-primary{background:var(--text1);color:#fff;border-color:var(--text1)}
.btn-primary:hover{background:#333}

/* ── RECIPES PANEL ─────────────────────────────────────────────────── */
.recipes-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:16px;overflow:hidden;
}
.rp-head{
  padding:10px 14px;background:#FAFAF8;
  border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.rp-head-title{font-size:12px;font-weight:700}
.recipe-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--border);
  transition:background .1s;
}
.recipe-item:last-child{border-bottom:none}
.recipe-item:hover{background:#FAFAF8}
.ri-name{font-size:13px;font-weight:600;flex:1}
.ri-meta{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:2px}
.ri-load{font-size:11px;font-family:var(--mono);padding:3px 10px;
  border:1px solid var(--border2);border-radius:2px;
  background:transparent;cursor:pointer;color:var(--text2);}
.ri-load:hover{border-color:var(--text1);color:var(--text1)}
.ri-del{font-size:11px;padding:3px 8px;border:1px solid transparent;
  border-radius:2px;background:transparent;cursor:pointer;color:var(--text3);}
.ri-del:hover{color:#C00;border-color:#C00}
.empty-recipes{padding:20px;text-align:center;font-size:12px;color:var(--text3);font-family:var(--mono)}

/* ── BATCH RECORD PRINT ─────────────────────────────────────────────── */
@media print {
  #topbar, #apptabs-inner, #main > .recipes-panel,
  .why-btn, .alts-btn, .toggle, .btn, #btn-save, #btn-recipes { display:none!important; }
  body { background:#fff!important; font-size:11pt; }
  .phase-block { break-inside:avoid; border:1px solid #999!important; margin-bottom:8pt; }
  .phase-head  { background:#eee!important; }
  .summary-card { border:1px solid #999!important; }
  #print-header { display:block!important; }
  #print-footer { display:block!important; }
  #main { padding:0!important; }
}
#print-header { display:none; }
#print-footer { display:none; }
.print-only   { display:none; }
@media print { .print-only { display:block!important; } }

/* ── COST TAB ──────────────────────────────────────────────────────── */
.cost-input{
  width:80px;border:1px solid var(--border2);border-radius:var(--radius);
  padding:3px 6px;font-size:13px;font-weight:600;text-align:center;
  color:var(--text1);background:var(--surface);font-family:var(--mono);
}
.cost-input:focus{outline:none;border-color:var(--text1)}
.cost-total{
  font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--text1);min-width:80px;text-align:left;
}
.cost-summary-big{
  font-family:var(--mono);font-size:28px;font-weight:700;color:var(--text1);
}
.currency-btn{
  padding:4px 10px;font-size:11px;font-family:var(--mono);
  border:1px solid var(--border2);border-radius:2px;
  background:transparent;cursor:pointer;color:var(--text2);
  transition:all .15s;
}
.currency-btn.active{
  background:var(--text1);color:#fff;border-color:var(--text1);
}

/* ── BATCH TYPE + HISTORY ──────────────────────────────────────────── */
.type-bar{
  background:var(--surface);border:1px solid var(--border);
  border-radius:4px;padding:10px 14px;margin-bottom:14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.type-btn{
  flex:1;min-width:100px;padding:9px 14px;font-size:13px;font-weight:600;
  font-family:var(--sans);border-radius:4px;cursor:pointer;
  border:2px solid var(--border2);background:var(--surface);
  color:var(--text2);transition:all .15s;text-align:center;
}
.type-btn.trial.active{
  background:#FFF8F0;border-color:#D4A017;color:#7A5500;
}
.type-btn.commercial.active{
  background:#F0F8F0;border-color:#1A6B1A;color:#1A6B1A;
}
.type-btn:hover{border-color:var(--text1)}
.type-label{font-size:11px;font-family:var(--mono);color:var(--text3);white-space:nowrap}
.batch-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:4px;padding:12px 14px;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:12px;
}
.batch-card:hover{background:#FAFAF8}
.bc-type{
  font-size:9px;font-weight:700;font-family:var(--mono);
  padding:2px 6px;border-radius:2px;flex-shrink:0;
  letter-spacing:.5px;text-transform:uppercase;
}
.bc-type.trial{background:#FFF8F0;color:#7A5500;border:1px solid #D4A017}
.bc-type.commercial{background:#F0F8F0;color:#1A6B1A;border:1px solid #88BB88}
.bc-info{flex:1;min-width:0}
.bc-name{font-size:13px;font-weight:600;color:var(--text1)}
.bc-meta{font-size:10px;font-family:var(--mono);color:var(--text3);margin-top:2px;line-height:1.7}
.bc-result{font-size:11px;color:var(--text2);margin-top:4px;font-style:italic}
.bc-del{font-size:11px;padding:3px 8px;border:1px solid transparent;
  border-radius:2px;background:transparent;cursor:pointer;color:var(--text3);flex-shrink:0;}
.bc-del:hover{color:#C00;border-color:#C00}
.empty-history{padding:24px;text-align:center;font-size:12px;
  color:var(--text3);font-family:var(--mono)}
.log-btn{
  padding:8px 18px;font-size:12px;font-family:var(--sans);font-weight:600;
  border-radius:4px;cursor:pointer;border:1px solid var(--text1);
  background:var(--text1);color:#fff;transition:background .15s;
}
.log-btn:hover{background:#333}
.note-input{
  width:100%;border:1px solid var(--border2);border-radius:4px;
  padding:7px 10px;font-size:12px;font-family:var(--sans);
  color:var(--text1);background:var(--surface);resize:none;height:60px;
}
.note-input:focus{outline:none;border-color:var(--text1)}

/* ── START SCREEN ──────────────────────────────────────────────────── */
#start-screen{
  position:fixed;inset:0;background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  z-index:999;padding:24px;
}
.start-logo{
  font-size:40px;margin-bottom:8px;
}
.start-title{
  font-size:18px;font-weight:700;color:var(--text1);
  margin-bottom:4px;text-align:center;
}
.start-sub{
  font-size:11px;font-family:var(--mono);color:var(--text3);
  margin-bottom:32px;text-align:center;
}
.start-card{
  background:var(--surface);border:2px solid var(--border);
  border-radius:6px;width:100%;max-width:420px;
  padding:20px;margin-bottom:10px;
}
.start-card-title{
  font-size:13px;font-weight:700;color:var(--text1);
  margin-bottom:16px;
}
.start-row{
  display:flex;gap:8px;margin-bottom:10px;
}
.start-app-btn{
  flex:1;padding:10px 6px;font-size:12px;font-weight:600;
  font-family:var(--sans);border-radius:4px;cursor:pointer;
  border:2px solid var(--border2);background:var(--surface);
  color:var(--text2);transition:all .15s;text-align:center;
}
.start-app-btn.active{
  border-color:var(--text1);background:var(--text1);color:#fff;
}
.start-type-btn{
  flex:1;padding:8px;font-size:12px;font-weight:500;
  font-family:var(--sans);border-radius:4px;cursor:pointer;
  border:1px solid var(--border2);background:var(--surface);
  color:var(--text2);transition:all .15s;text-align:center;
}
.start-type-btn.trial.active{
  border-color:#D4A017;background:#FFF8F0;color:#7A5500;
}
.start-type-btn.commercial.active{
  border-color:#1A6B1A;background:#F0F8F0;color:#1A6B1A;
}
.start-kg-input{
  width:90px;border:1px solid var(--border2);border-radius:4px;
  padding:7px 10px;font-size:18px;font-weight:700;text-align:center;
  font-family:var(--mono);color:var(--text1);background:var(--surface);
}
.start-kg-input:focus{outline:none;border-color:var(--text1)}
.start-go-btn{
  width:100%;padding:14px;font-size:15px;font-weight:700;
  font-family:var(--sans);border-radius:4px;cursor:pointer;
  border:none;background:var(--text1);color:#fff;
  transition:background .15s;margin-top:6px;
  letter-spacing:-.2px;
}
.start-go-btn:hover{background:#333}
.start-history-btn{
  width:100%;padding:11px;font-size:13px;font-weight:500;
  font-family:var(--sans);border-radius:4px;cursor:pointer;
  border:1px solid var(--border2);background:var(--surface);
  color:var(--text2);transition:all .15s;
}
.start-history-btn:hover{border-color:var(--text1);color:var(--text1)}
.start-recipe-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid var(--border);
  border-radius:4px;margin-bottom:6px;cursor:pointer;
  transition:background .15s;
}
.start-recipe-item:hover{background:#FAFAF8}
.sri-icon{font-size:18px;flex-shrink:0}
.sri-name{font-size:13px;font-weight:600;flex:1}
.sri-meta{font-size:10px;font-family:var(--mono);color:var(--text3)}
.sri-load{font-size:11px;font-family:var(--mono);padding:3px 10px;
  border:1px solid var(--border2);border-radius:2px;
  background:transparent;cursor:pointer;color:var(--text2);}
.sri-load:hover{border-color:var(--text1);color:var(--text1)}

/* ── INVENTORY PANEL ──────────────────────────────────────────────── */
#inv-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:800;display:flex;align-items:flex-start;justify-content:flex-end;
}
#inv-panel{
  background:var(--surface);width:min(420px,100vw);height:100vh;
  overflow-y:auto;border-left:2px solid var(--text1);
  display:flex;flex-direction:column;
}
.inv-head{
  padding:14px 16px;border-bottom:2px solid var(--text1);
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.inv-head-title{font-size:14px;font-weight:700}
.inv-close{
  font-size:14px;font-weight:700;padding:5px 10px;
  border:1px solid var(--border2);border-radius:4px;
  background:transparent;cursor:pointer;
}
.inv-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.inv-section-title{
  font-size:10px;font-weight:700;font-family:var(--mono);
  color:var(--text3);text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:8px;
}
.inv-item{
  display:flex;align-items:center;gap:10px;
  padding:6px 0;cursor:pointer;
}
.inv-item:hover{opacity:.8}
.inv-checkbox{
  width:18px;height:18px;border-radius:3px;flex-shrink:0;
  border:2px solid var(--border2);background:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.inv-checkbox.checked{
  background:var(--text1);border-color:var(--text1);
}
.inv-item-name{font-size:12px;color:var(--text1);flex:1}
.inv-item-cat{
  font-size:9px;font-family:var(--mono);color:var(--text3);
  background:var(--bg);border:1px solid var(--border);
  border-radius:2px;padding:1px 5px;
}
/* Quality badge in start screen */
.quality-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;
  margin-top:6px;
}
.quality-badge.lv4{background:#FFF8F0;color:#7A4500;border:1px solid #D4A017}
.quality-badge.lv3{background:#F0F4FF;color:#1E2A5A;border:1px solid #B0B8D8}
.quality-badge.lv2{background:#F0F8F0;color:#1A4A1A;border:1px solid #88BB88}
.quality-badge.lv1{background:#FAFAF8;color:#5A5A56;border:1px solid #C8C8C4}
.quality-badge.lv0{background:#FFF0F0;color:#8B0000;border:1px solid #E8A0A0}
.quality-suggestion{
  font-size:11px;color:var(--text3);margin-top:4px;font-style:italic;
}
.quality-missing{
  font-size:11px;color:#8B0000;margin-top:4px;
}