:root{color-scheme:dark;--bg:#10130f;--panel:#191d18;--panel-light:#20251f;--line:#30372d;--text:#eef0e7;--muted:#9ba392;--dim:#727e69;--accent:#eab45f;--accent-bright:#fac879;--green:#a9c78a;--danger:#f0a191;--sans:Inter,"Segoe UI",Arial,sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-family:var(--sans);font-size:14px;line-height:1.5;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,summary{cursor:pointer}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.42}a{color:inherit;text-decoration:none}button,input,select,summary,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,svg:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{transition:background .15s,border-color .15s,transform .15s}button:not(:disabled):active{transform:translateY(1px)}h1,h2,h3,p{margin:0}select,input{min-width:0;border:1px solid #3a4334;border-radius:6px;background:#121710;color:var(--text);padding:10px 11px;min-height:41px}select{padding-right:28px}input::placeholder{color:#77816e}input[type=number]{font-family:var(--mono);font-size:13px}input[type=checkbox]{min-height:auto;width:15px;height:15px;accent-color:var(--accent);flex-shrink:0}label{display:grid;gap:7px;font-size:11px;font-weight:600;color:#bcc4b2}input:disabled{opacity:.35}.muted{color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--accent)}.site-header{height:84px;display:flex;align-items:center;gap:24px;padding:0 38px;border-bottom:1px solid var(--line);max-width:1800px;margin:auto}.brand{display:flex;align-items:center;gap:11px;font-size:30px;font-weight:800;letter-spacing:-1.2px}.brand-mark{width:32px;height:36px;display:grid;place-items:center;color:#171b13;background:var(--accent);font-size:24px;font-weight:900;clip-path:polygon(24% 0,76% 0,100% 25%,100% 75%,76% 100%,24% 100%,0 75%,0 25%)}.brand-period{color:var(--accent)}.header-divider{width:1px;height:23px;background:var(--line)}.header-description{color:var(--muted);font-size:12px}.header-status{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px #a9c78a22;flex-shrink:0}.app-shell{max-width:1800px;margin:auto;display:grid;grid-template-columns:360px minmax(0,1fr);align-items:start}.planner-panel{background:#171b15;border-right:1px solid var(--line);padding:33px 27px;min-height:calc(100vh - 84px)}.panel-intro h1{font-size:32px;letter-spacing:-1.4px;line-height:1.2;margin:10px 0 12px}.panel-intro p{font-size:12px;color:var(--muted);max-width:275px;line-height:1.7}.form-section{padding-top:26px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:13px}.section-heading h2,.section-title{font-size:12px;font-weight:650;display:flex;align-items:center;gap:9px}.step-number{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--accent);display:inline-flex;border:1px solid #645135;border-radius:4px;padding:2px 4px;line-height:1.3}.unit-label{font-family:var(--mono);font-size:9px;color:var(--dim);white-space:nowrap}.targets{display:grid;gap:8px}.target-row{display:grid;grid-template-columns:minmax(0,1fr) 73px 23px;gap:6px;align-items:center}.target-row select{font-size:12px;padding-left:9px}.target-row input{width:100%;padding:10px 7px}.remove-target{background:none;border:none;padding:0;width:23px;height:32px;font-size:19px;color:var(--dim)}.remove-target:hover{color:var(--danger)}.text-button{background:transparent;border:0;padding:10px 0;color:var(--accent);font-size:11px;font-weight:650;display:inline-flex;align-items:center;gap:6px}.text-button:hover{color:var(--accent-bright)}.text-button span{font-size:17px}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.preset-button{position:relative;text-align:left;border:1px solid var(--line);border-radius:6px;padding:10px 9px;background:#1b2018;font-size:11px;min-height:42px;display:flex;align-items:center;gap:8px;color:#b9c2ae}.preset-button:hover{border-color:#657252;background:#242c1e}.preset-button[aria-pressed=true]{border-color:#a67b41;background:#30291b;color:#f1c882}.preset-icon{font-size:15px;color:var(--accent);width:17px;text-align:center}.preset-button:last-child{grid-column:span 2}.field-help{font-size:10px;line-height:1.65;color:var(--dim);margin:9px 0 0}.equipment-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.equipment-grid select{font-size:11px;padding-left:8px}.inputs-section{border-top:1px solid var(--line);margin-top:23px;padding-top:20px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}.inputs-section summary{display:flex;justify-content:space-between;align-items:center;gap:10px}.inputs-section summary .section-heading{margin:0;flex:1}.details-chevron{color:var(--dim);font-size:20px;line-height:1}.inputs-section details[open] .details-chevron{transform:rotate(180deg)}.count-pill{font-size:10px;font-family:var(--mono);background:#30372a;color:var(--green);padding:2px 6px;border-radius:4px}.search-label{margin:12px 0}.search-label input{width:100%;min-height:36px;padding:7px 10px;font-size:11px}.input-list-heading{display:flex;justify-content:space-between;font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);padding-bottom:8px}.input-list{max-height:300px;overflow:auto;scrollbar-width:thin;scrollbar-color:#48533d #181c16;padding-right:4px}.input-row{display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:8px;align-items:center;padding:5px 0}.input-row label{display:flex;gap:7px;align-items:center;font-size:11px;font-weight:400}.input-row input[type=number]{width:68px;min-height:30px;padding:5px;font-size:10px}.input-row[hidden]{display:none}.input-summary{color:var(--muted)}.generate-area{margin-top:24px}.primary-button,.secondary-button{display:inline-flex;justify-content:center;align-items:center;gap:9px;padding:11px 16px;border-radius:6px;font-weight:700;font-size:12px;min-height:43px;white-space:nowrap}.primary-button{background:var(--accent);color:#201c13;border:1px solid var(--accent)}.primary-button:hover:not(:disabled){background:var(--accent-bright);border-color:var(--accent-bright)}.secondary-button{background:#23291e;border:1px solid #465139;color:#d7decc}.secondary-button:hover:not(:disabled){background:#2d3625;border-color:#667553}#generate{width:100%;justify-content:space-between;padding:13px 15px}#generate>span:last-child{font-size:19px;line-height:1}.local-note{font-size:9px;display:flex;gap:6px;align-items:center;justify-content:center;color:var(--dim);margin-top:11px}.local-note .status-dot{width:4px;height:4px}.form-error{background:#39231e;border:1px solid #704537;border-radius:5px;color:#fac1af;padding:12px;font-size:12px;margin-top:16px;line-height:1.6}.scope-note{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}.scope-badge{font-size:8px;letter-spacing:1.2px;color:var(--dim);border:1px solid #404836;border-radius:3px;padding:3px 5px}.scope-note p{font-size:10px;color:var(--dim);line-height:1.75;margin-top:10px}.workspace{padding:35px 35px 22px;min-width:0}.workspace-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:23px}.workspace-header h2{font-size:26px;line-height:1.3;font-weight:650;letter-spacing:-.9px;margin-top:7px}.plan-status{display:flex;align-items:center;gap:6px;border:1px solid #38482d;border-radius:25px;color:var(--green);padding:5px 9px;font-size:9px;white-space:nowrap}.plan-status:before{content:"";width:5px;height:5px;border-radius:100%;background:currentColor}.plan-status[data-state=error]{color:var(--danger);border-color:#6e4439}.plan-status[data-state=busy]{color:var(--accent);border-color:#715c36}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:9px;background:linear-gradient(125deg,#1e241a,#191e16);margin-bottom:20px;overflow:hidden}.metric{padding:17px 19px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:111px}.metric:last-child{border:0}.metric-label{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:#a2af95}.metric strong{font-size:29px;letter-spacing:-1px;font-weight:600;margin-top:4px;line-height:1.3}.metric-detail{font-size:9px;color:var(--dim);margin-top:4px}.preview-card{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#151a12}.preview-toolbar{height:51px;display:flex;align-items:center;padding:0 16px;gap:13px;border-bottom:1px solid var(--line);background:#1b2117}.preview-heading{display:flex;gap:8px;align-items:center;white-space:nowrap}.preview-heading h3{font-size:11px;font-weight:550}.tiny-grid{font-size:19px;color:var(--green)}.preview-select-label{margin-left:auto;max-width:220px}.preview-select-label select{font-size:10px;padding:5px 25px 5px 9px;min-height:28px;height:29px;max-width:220px}.preview-version{font-family:var(--mono);font-size:9px;color:var(--dim);border-left:1px solid var(--line);padding-left:13px}.preview-container{height:390px;position:relative;overflow:hidden;background-color:#12170f;background-image:linear-gradient(#26302077 1px,transparent 1px),linear-gradient(90deg,#26302077 1px,transparent 1px);background-size:24px 24px}.preview-container svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.preview-container svg:active{cursor:grabbing}.preview-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;gap:6px;color:var(--dim);font-size:11px}.preview-placeholder[hidden]{display:none}.placeholder-icon{font-size:53px;font-weight:200;color:#4c5c3f;line-height:1.4}.preview-placeholder strong{color:#b4c3a6;font-size:13px;font-weight:500}.preview-controls{position:absolute;bottom:15px;right:15px;display:flex;background:#1d2518;border:1px solid #445238;border-radius:5px;overflow:hidden;box-shadow:0 4px 10px #0003}.preview-controls button{border:0;border-right:1px solid #445238;background:none;font-size:15px;width:31px;height:29px;color:#b4c6a3}.preview-controls button:nth-child(2){font-size:10px}.preview-controls button:last-child{border:0}.preview-controls button:hover{background:#333f28}.canvas-caption{position:absolute;bottom:21px;left:16px;font-family:var(--mono);font-size:8px;letter-spacing:1.3px;color:#697a59;pointer-events:none}.preview-legend{padding:10px 15px;display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);font-size:9px;color:var(--muted);background:#191f15}.preview-legend>span{display:flex;gap:5px;align-items:center}.legend-ports{margin-left:auto}.legend-swatch{display:block;width:8px;height:8px;border-radius:1px}.legend-swatch.assembler{background:#8ea77b}.legend-swatch.belt{background:#c3a265}.legend-swatch.inserter{background:#64b4b0}.legend-swatch.power{background:#a98a60}.port-dot{width:7px;height:7px;display:block;border-radius:50%;border:1px solid var(--accent)}.connection-notice{display:flex;gap:10px;align-items:flex-start;margin:13px 0 19px;color:#b8bea9;font-size:10px;line-height:1.65}.connection-notice>span{color:var(--accent);font-size:22px;line-height:1.1}.connection-notice strong{color:#dcc49e;font-weight:600}.warnings:empty{display:none}.warning-item{background:#30291a;border:1px solid #64512b;color:#e6c788;padding:10px 12px;font-size:11px;border-radius:5px;margin-bottom:10px;line-height:1.6}.results-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-top:17px}.result-card{border:1px solid var(--line);border-radius:8px;background:#191f15;overflow:hidden;min-width:0}.result-heading{padding:14px 15px;display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid var(--line)}.result-heading h3{font-size:11px;font-weight:600}.subtle-badge{font-family:var(--mono);font-size:8px;letter-spacing:.2px;color:var(--dim);white-space:nowrap}.production-list,.supply-list{padding:5px 15px}.production-row,.supply-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #2b3525}.production-row:last-child,.supply-row:last-child{border:0}.production-row{width:100%;text-align:left;border-top:0;border-left:0;border-right:0;background:none;color:var(--text)}.production-row:hover{background:#252f1e}.item-icon{display:grid;place-items:center;width:29px;height:29px;border:1px solid #445439;background:#303d27;color:#c2d7ad;border-radius:5px;font-size:10px;font-family:var(--mono);flex-shrink:0}.item-icon[data-tone=copper]{background:#453027;color:#dfa77c;border-color:#634235}.item-icon[data-tone=iron]{background:#303c3c;color:#b4cccb;border-color:#455857}.item-icon[data-tone=circuit]{background:#263d2c;color:#9dc89d;border-color:#3c5d42}.row-name{font-size:11px;min-width:0;flex:1}.row-detail{font-size:9px;display:block;color:var(--dim);margin-top:2px}.row-rate{text-align:right;font-family:var(--mono);font-size:11px;color:#cbd6be;white-space:nowrap}.row-rate small{display:block;font-family:var(--sans);font-size:9px;color:var(--dim);margin-top:2px}.supply-shortfall{color:var(--danger)}.empty-result{font-size:11px;color:var(--dim);padding:15px 0}.materials-details{border-top:1px solid var(--line);margin-top:4px}.materials-details summary{padding:11px 15px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}#materials{padding:0 15px 9px}.material-row{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;gap:8px;padding:5px 0}.material-row strong{font-family:var(--mono);font-weight:400;color:#d1ddc4}.export-card{border:1px solid #4f4a30;border-radius:9px;background:linear-gradient(115deg,#292a1b,#1e2519);margin-top:19px;padding:23px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}.export-card .eyebrow{font-size:8px;letter-spacing:1.6px}.export-card h3{font-size:20px;letter-spacing:-.5px;margin:5px 0 6px;font-weight:600}.export-card p{font-size:10px;color:var(--muted);max-width:330px;line-height:1.7}.export-card p strong{color:#cbd2bf;font-weight:500}.export-actions{margin-left:auto;display:grid;grid-template-columns:auto auto;gap:8px}.export-actions .primary-button,.export-actions .secondary-button{font-size:10px;padding:10px 12px;min-height:37px}.export-actions .text-button{grid-column:span 2;justify-content:flex-end;font-size:9px;padding:1px 0}.export-status{width:100%;min-height:0;color:var(--accent)!important;margin-top:-10px!important}.export-status:empty{display:none}.verification-note{color:var(--dim);font-size:9px;line-height:1.75;margin-top:14px;max-width:800px}.site-footer{border-top:1px solid var(--line);padding:20px 38px;display:flex;align-items:center;gap:20px;font-size:10px;color:var(--dim);max-width:1800px;margin:auto}.footer-brand{font-size:21px;font-weight:800;letter-spacing:-1px;color:#8e9a81}.site-footer>span:last-child{margin-left:auto;font-family:var(--mono);font-size:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.svg-entity{vector-effect:non-scaling-stroke}.svg-block-label{fill:#c2d4af;font-family:var(--mono);font-size:.7px;font-weight:600}.svg-port-label{fill:#e5c489;font-family:var(--mono);font-size:.55px}.svg-machine-mark{fill:#d0dfbe;font-size:.55px;font-family:var(--mono);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.canvas-caption{max-width:calc(100% - 130px);line-height:1.6}.layout-details{border:1px solid #404933;border-radius:6px;background:#1d2417;color:var(--muted);font-size:10px;margin-bottom:16px}.layout-details summary{padding:10px 12px;display:flex;gap:10px;justify-content:space-between;color:#bdc9ae}.layout-details summary span{color:var(--dim);font-size:9px}.layout-details ul{padding:0 15px 10px 30px;margin:0}.layout-details li{padding:4px 0;line-height:1.7}
@media(min-width:1450px){.app-shell{grid-template-columns:390px minmax(0,1fr)}.planner-panel{padding:38px 32px}.workspace{padding:40px 45px 26px}.preview-container{height:470px}.workspace-header h2{font-size:30px}.metric{padding:20px 23px}.metric-label{font-size:9px}.metric strong{font-size:34px}.metric-detail{font-size:10px}.result-heading h3{font-size:12px}.production-row,.supply-row{padding:13px 0}}
@media(max-width:1100px){.site-header{padding:0 24px}.header-description{display:none}.app-shell{grid-template-columns:320px minmax(0,1fr)}.planner-panel{padding:28px 22px}.workspace{padding:29px 22px 20px}.workspace-header h2{font-size:22px}.workspace-header{align-items:flex-start}.workspace-header .eyebrow{font-size:8px}.plan-status{font-size:8px;padding:4px 7px;margin-top:4px}.metric{padding:14px 12px}.metric-label{font-size:7px;letter-spacing:.6px}.metric strong{font-size:25px}.metric-detail{font-size:8px}.preview-toolbar{padding:0 11px;gap:8px}.preview-select-label{max-width:160px}.preview-select-label select{max-width:160px}.preview-version{display:none}.preview-container{height:340px}.preview-legend{gap:11px;font-size:8px}.legend-ports{margin-left:0}.results-grid{grid-template-columns:1fr}.export-card{padding:18px}.export-actions{width:100%;margin-left:0;grid-template-columns:1fr 1fr}.export-actions .text-button{justify-content:center}.site-footer{padding:18px 24px}}
@media(max-width:760px){.site-header{height:68px;padding:0 18px;gap:14px}.brand{font-size:25px}.brand-mark{width:27px;height:30px;font-size:20px}.header-divider{display:none}.header-status{font-size:8px}.header-status .muted{display:none}.app-shell{display:block}.planner-panel{border-right:0;border-bottom:1px solid var(--line);min-height:0;padding:26px 20px}.panel-intro h1{font-size:30px}.panel-intro p{max-width:100%;font-size:12px}.form-section{padding-top:23px}.target-row{grid-template-columns:minmax(0,1fr) 90px 28px}.target-row select{font-size:13px}.preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.preset-button{font-size:10px;padding:10px 7px}.preset-button:last-child{grid-column:auto}.equipment-grid select{font-size:12px}.inputs-section{padding-top:17px;margin-top:19px}.generate-area{margin-top:21px}.scope-note{margin-top:20px;padding-top:14px}.scope-note p{margin-top:7px}.workspace{padding:26px 18px 20px}.workspace-header h2{font-size:23px}.workspace-header .eyebrow{font-size:8px}.metrics{margin-bottom:16px}.metric{min-height:99px;padding:13px 10px}.metric-label{font-size:7px;letter-spacing:.2px}.metric strong{font-size:26px}.metric-detail{font-size:8px;line-height:1.5}.preview-container{height:360px}.preview-legend{font-size:8px;gap:11px}.canvas-caption{font-size:7px;letter-spacing:.8px}.preview-heading h3{font-size:11px}.connection-notice{font-size:10px;margin-bottom:17px}.results-grid{grid-template-columns:1fr 1fr;gap:10px}.result-heading{padding:12px;flex-wrap:wrap;gap:4px}.production-list,.supply-list{padding:3px 11px}.row-name{font-size:10px}.row-rate{font-size:10px}.item-icon{width:24px;height:24px;font-size:8px}.production-row,.supply-row{gap:7px}.export-card{gap:15px}.export-actions{width:auto;margin-left:auto;grid-template-columns:auto auto}.export-card h3{font-size:22px}.site-footer{padding:18px;gap:10px}.site-footer>span:last-child{display:none}}
@media(max-width:430px){.preset-grid{grid-template-columns:1fr 1fr}.preset-button:last-child{grid-column:span 2}.workspace-header{gap:8px}.workspace-header h2{font-size:21px}.plan-status{padding:4px 6px;font-size:7px}.metric-label{font-size:6px;letter-spacing:.1px}.metric strong{font-size:24px}.metric-detail{font-size:7px}.preview-select-label{max-width:145px}.preview-select-label select{max-width:145px;font-size:9px}.preview-heading{gap:5px}.preview-container{height:310px}.results-grid{grid-template-columns:1fr}.result-heading{flex-wrap:nowrap}.export-actions{width:100%;margin:0;grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* The recipe picker follows Factorio's beveled crafting-window layout. */
.choose-products-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 11px;
  padding: 11px 12px;
  border: 1px solid #6d6b61;
  border-radius: 3px;
  background: linear-gradient(#51524c, #3d3e39);
  box-shadow: inset 0 1px #ffffff24, inset 0 -2px #0005, 0 2px 3px #0003;
  color: #f0e7d0;
  text-align: left;
  font-size: 12px;
  font-weight: 650;
}
.choose-products-button:hover { background: linear-gradient(#68624e, #514a36); border-color: #cda35b; }
.crafting-grid-mark { font-size: 29px; line-height: 1; color: #e4bb6b; }
.choose-products-help { display: block; font-size: 9px; color: #c1c0b4; font-weight: 400; margin-top: 2px; }
.choose-products-arrow { margin-left: auto; font-size: 22px; color: #e7bf78; }
.selected-product-row { grid-template-columns: minmax(0, 1fr) 73px 23px; }
.selected-product {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 45px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 11px;
  color: #d7ddcd;
}
.selected-product:hover { color: #f5c879; }
.selected-product span:not(.product-artwork) { line-height: 1.35; }
.product-artwork { object-fit: contain; flex: 0 0 auto; }
.selected-product .product-artwork { width: 35px; height: 35px; padding: 2px; background: #31342c; border: 1px solid #5c604e; border-radius: 2px; }
.product-artwork-fallback { display: inline-grid; place-items: center; font-family: var(--mono); font-size: 15px; color: #f2d18b; }
.no-production-goals { display: flex; gap: 12px; align-items: center; padding: 14px 10px; border: 1px dashed #4e5744; border-radius: 4px; color: #d4ddc8; font-size: 12px; }
.no-production-goals > span { font-size: 32px; color: #778769; }
.no-production-goals p > span { font-size: 10px; color: var(--muted); }
body.picker-open { overflow: hidden; }
.recipe-picker {
  padding: 0;
  border: 1px solid #111;
  border-radius: 3px;
  width: min(820px, calc(100vw - 32px));
  max-width: none;
  max-height: min(810px, calc(100dvh - 40px));
  background: #373934;
  color: #e6e4d8;
  box-shadow: 0 16px 65px #000b, 0 0 0 2px #727469, inset 0 0 0 1px #96978a;
  overflow: hidden;
  font-family: 'Titillium Web', var(--sans);
}
.recipe-picker::backdrop { background: #080b08c7; backdrop-filter: blur(2px); }
.recipe-window { display: flex; flex-direction: column; max-height: min(806px, calc(100dvh - 44px)); }
.recipe-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 12px 0 16px;
  border-bottom: 2px solid #21231f;
  background: linear-gradient(#56594f, #42453d);
  box-shadow: inset 0 1px #969b8655, 0 1px #767a6c;
}
.recipe-titlebar > div { display: flex; align-items: center; gap: 10px; }
.recipe-titlebar h2 { font-size: 18px; font-weight: 700; color: #f0ead9; text-shadow: 0 1px #0008; }
.recipe-title-icon { font-size: 24px; color: #e1bb76; }
.recipe-window-label { font: 9px var(--mono); letter-spacing: 1.8px; color: #c3c6b9; }
.recipe-close {
  width: 33px; height: 32px; border: 1px solid #20221e; border-radius: 2px;
  background: linear-gradient(#73766b, #53564d); box-shadow: inset 0 1px #b2b5a06b, inset 0 -2px #0005;
  font-size: 25px; color: #f0ecde; line-height: 1;
}
.recipe-close:hover { background: linear-gradient(#d27e50, #9a4c2f); }
.recipe-body { min-height: 0; overflow: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: #777a6c #30332c; }
.recipe-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 13px; }
.recipe-controls > p { font-size: 11px; line-height: 1.55; color: #c3c4b7; }
.recipe-search-label { position: relative; flex: 0 1 220px; }
.recipe-search-label > svg { position: absolute; left: 10px; top: 10px; color: #b7bbaa; pointer-events: none; }
.recipe-search-label input {
  width: 100%; min-height: 36px; height: 36px; padding: 8px 8px 8px 33px;
  font-size: 12px; background: #23251f; color: #f2eeda;
  border: 1px solid #171a15; border-radius: 2px; box-shadow: inset 0 2px 3px #0007, 0 1px #727666;
}
.recipe-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #22251f; box-shadow: 0 1px #606458; }
.recipe-tab {
  min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 57px; padding: 7px 10px;
  border: 1px solid #1f221c; border-radius: 2px;
  background: linear-gradient(#64675c, #45483e); color: #d9dccd; box-shadow: inset 0 1px #92978180, inset 0 -2px #0006;
  font-size: 11px; font-weight: 600; text-align: left; text-shadow: 0 1px #0009;
}
.recipe-tab .product-artwork { width: 35px; height: 35px; filter: drop-shadow(0 2px 1px #0007); }
.recipe-tab:hover { background: linear-gradient(#897a54, #655737); color: #fff1c8; }
.recipe-tab[aria-selected=true] { border-color: #e3aa45; background: linear-gradient(#bc8b3c, #8c6228); color: #fff2ce; box-shadow: inset 0 1px #f6d08d8c, inset 0 -2px #4f361c, 0 0 0 1px #1d201a; }
.recipe-content { display: grid; grid-template-columns: minmax(0, 1fr) 222px; gap: 13px; align-items: start; }
.recipe-catalog { min-width: 0; min-height: 326px; padding: 10px; border: 1px solid #1b1e18; border-radius: 2px; background: #282b25; box-shadow: inset 0 2px 5px #0005, 0 1px #666c5a; }
.recipe-catalog-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 11px; font-weight: 650; color: #e0dfd0; }
#recipe-result-count { font-size: 9px; color: #929b85; font-weight: 400; white-space: nowrap; }
.recipe-subgroup + .recipe-subgroup { margin-top: 14px; }
.recipe-subgroup h3 { font-size: 9px; font-weight: 500; color: #a4ad96; margin: 0 0 5px; }
.recipe-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; align-items: start; }
.recipe-slot {
  position: relative; display: grid; place-items: center; min-width: 0; width: 100%; aspect-ratio: 1;
  padding: 2px; border: 1px solid #151811; border-radius: 1px;
  background: linear-gradient(145deg, #767b6a, #4b5142 48%, #3d4335);
  box-shadow: inset 1px 1px #a2a88f91, inset -1px -2px #1c21156b, 0 1px #0009;
  transition: background .08s, border-color .08s;
}
.recipe-slot .product-artwork { width: 100%; max-height: 100%; aspect-ratio: 1; filter: drop-shadow(0 2px 1px #0008); }
.recipe-slot:not(:disabled):hover { z-index: 1; background: linear-gradient(145deg, #e9bc6c, #ac7a36); border-color: #f7d78c; box-shadow: inset 1px 1px #ffebb7, inset -1px -2px #79501f, 0 0 0 1px #1a1d15; }
.recipe-slot.is-selected { background: linear-gradient(145deg, #d2a64e, #956b2c 62%, #73501f); border-color: #f2c36c; box-shadow: inset 1px 1px #ffe09e9c, inset -1px -2px #5e421c, 0 0 0 1px #25271c; }
.recipe-slot:disabled { opacity: .36; filter: grayscale(.5); }
.recipe-slot-check { display: none; position: absolute; top: 1px; right: 2px; font: 700 12px var(--sans); color: #fff2c8; text-shadow: 0 1px 2px #31200b, 1px 0 2px #31200b; }
.recipe-slot.is-selected .recipe-slot-check { display: block; }
.recipe-slot-amount { position: absolute; right: 2px; bottom: 1px; font: 9px var(--mono); color: #fff5d3; text-shadow: 0 1px 2px #000, 1px 0 2px #000; pointer-events: none; }
.recipe-inspector { min-height: 260px; padding: 12px; border: 1px solid #20231c; border-radius: 2px; background: linear-gradient(#44483b, #34392d); box-shadow: inset 0 1px #70775d, 0 2px 5px #0004; }
.recipe-inspector-title { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid #24291e; box-shadow: 0 1px #68705466; }
.recipe-inspector-title .product-artwork { width: 40px; height: 40px; filter: drop-shadow(0 2px 1px #0006); }
.recipe-inspector-title strong { display: block; color: #f0d69e; font-size: 13px; line-height: 1.35; }
.recipe-inspector-title span { display: block; color: #b9c1a9; font-size: 9px; margin-top: 4px; }
.recipe-time { display: flex; align-items: center; gap: 5px; color: #dbdfcf; font-size: 10px; padding: 11px 0 6px; }
.recipe-time > span { font-size: 17px; color: #b5c698; }
.recipe-inspector h3 { font-size: 10px; font-weight: 600; color: #a9b899; margin: 5px 0 8px; }
.recipe-inspector ul { padding: 0; margin: 0; list-style: none; }
.recipe-inspector li { display: flex; align-items: center; gap: 6px; margin: 7px 0; font-size: 10px; color: #d0d6c3; }
.recipe-inspector li .product-artwork { width: 23px; height: 23px; }
.recipe-inspector li > span { min-width: 0; flex: 1; }
.recipe-inspector li > strong { font: 10px var(--mono); color: #f1e9cc; white-space: nowrap; }
.recipe-result { border-top: 1px solid #252b1e; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; margin-top: 11px; font-size: 10px; }
.recipe-result > span { color: #a9b899; }
.recipe-result strong { color: #e3e8d9; font-weight: 500; }
.recipe-inspector > p { color: #9ca68c; font-size: 9px; line-height: 1.7; margin-top: 12px; }
.recipe-selection-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 11px; color: #e4cb96; }
.recipe-clear { border: 0; background: none; color: #c9cbbd; font-size: 10px; padding: 3px 0; text-decoration: underline; text-underline-offset: 3px; }
.recipe-clear:hover { color: #f0c36d; }
.recipe-footer { flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid #24271f; background: #41463a; box-shadow: inset 0 1px #737a63; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.recipe-footer > span { max-width: 390px; font-size: 10px; color: #bbc3ad; line-height: 1.5; }
.recipe-done { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 11px 15px; min-height: 39px; flex-shrink: 0; background: linear-gradient(#a2bd70, #79944e); border: 1px solid #28371a; border-radius: 2px; box-shadow: inset 0 1px #d9ecb0a6, inset 0 -2px #4a6331, 0 1px 3px #0005; color: #1c2a13; font-weight: 700; font-size: 11px; }
.recipe-done:hover { background: linear-gradient(#b7d582, #91ad63); }
.recipe-done > span { font-size: 17px; }
.recipe-no-results { min-height: 225px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #aeb99c; font-size: 11px; }
.recipe-no-results > span:first-child { font-size: 36px; color: #7e8d6c; }
.recipe-no-results > strong { color: #e2e7d7; font-weight: 500; }
@media (max-width: 760px) {
  .recipe-picker { width: calc(100vw - 22px); max-height: calc(100dvh - 24px); }
  .recipe-window { max-height: calc(100dvh - 28px); }
  .recipe-body { padding: 12px; }
  .recipe-content { grid-template-columns: minmax(0, 1fr) 205px; gap: 10px; }
  .recipe-tab { flex-direction: column; gap: 4px; padding: 7px 4px; font-size: 10px; text-align: center; }
  .recipe-tab .product-artwork { width: 33px; height: 33px; }
  .recipe-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .recipe-controls > p { font-size: 10px; max-width: 190px; }
}
@media (max-width: 560px) {
  .recipe-titlebar { min-height: 48px; padding-left: 12px; }
  .recipe-titlebar h2 { font-size: 17px; }
  .recipe-window-label { display: none; }
  .recipe-controls { align-items: stretch; flex-direction: column; gap: 9px; margin-bottom: 10px; }
  .recipe-controls > p { max-width: none; }
  .recipe-search-label { flex-basis: auto; width: 100%; }
  .recipe-search-label input { font-size: 14px; }
  .recipe-content { grid-template-columns: minmax(0, 1fr); }
  .recipe-catalog { min-height: 205px; }
  .recipe-inspector { min-height: 0; padding: 10px; }
  .recipe-inspector-title { padding-bottom: 7px; }
  .recipe-inspector-title .product-artwork { width: 31px; height: 31px; }
  .recipe-inspector > p { display: none; }
  .recipe-inspector ul { display: flex; flex-wrap: wrap; gap: 6px 12px; }
  .recipe-inspector li { margin: 2px 0; flex: 1 1 130px; }
  .recipe-inspector .recipe-time { padding-top: 7px; }
  .recipe-result { margin-top: 7px; padding-top: 7px; }
  .recipe-tabs { gap: 3px; margin-bottom: 10px; }
  .recipe-tab { font-size: 8px; min-height: 67px; }
  .recipe-tab .product-artwork { width: 29px; height: 29px; }
  .recipe-footer { padding: 10px 12px; align-items: center; gap: 10px; }
  .recipe-footer > span { font-size: 9px; }
  .recipe-done { padding: 10px; gap: 10px; font-size: 10px; }
  .selected-product-row { grid-template-columns: minmax(0, 1fr) 76px 24px; }
}
/* Atlas wrappers retain each item's native tile; only the wrapper sets size. */
.selected-product .factorio-item-icon { --icon-size: 32px; padding: 0; width: var(--icon-size); height: var(--icon-size); border: 0; background: none; }
.recipe-tab .factorio-item-icon { --icon-size: 32px; width: var(--icon-size); height: var(--icon-size); }
.recipe-slot .factorio-item-icon { --icon-size: 40px; width: var(--icon-size); height: var(--icon-size); max-height: none; }
.recipe-inspector-title .factorio-item-icon { --icon-size: 40px; width: var(--icon-size); height: var(--icon-size); }
.recipe-inspector li .factorio-item-icon { --icon-size: 24px; width: var(--icon-size); height: var(--icon-size); }
@media (max-width: 760px) {
  .recipe-slot .factorio-item-icon { --icon-size: 32px; }
  .recipe-tab .factorio-item-icon { --icon-size: 30px; }
}
@media (max-width: 560px) {
  .recipe-inspector-title .factorio-item-icon { --icon-size: 32px; }
  .recipe-tab .factorio-item-icon { --icon-size: 28px; }
}
.recipe-inspector li > .factorio-item-icon { flex: 0 0 var(--icon-size); }
.recipe-inspector-title > .factorio-item-icon { display: inline-block; margin: 0; }
.recipe-picker,
.choose-products-button,
.selected-product { font-family: "Titillium Web", var(--sans); }

/* Available inputs use the same item picker, with optional external supply caps. */
.selected-input-list { margin-top: 3px; padding-right: 5px; }
.selected-input-row { grid-template-columns: minmax(0, 1fr) 68px 20px; gap: 5px; padding: 4px 0; border-bottom: 1px solid #2d3627; }
.selected-input-row:last-child { border-bottom: 0; }
.selected-input-row .selected-product { height: 38px; font-size: 10px; gap: 7px; }
.selected-input-row .factorio-item-icon { --icon-size: 28px; }
.selected-input-row .remove-target { width: 20px; font-size: 18px; }
.selected-input-row input[type=number] { min-height: 32px; }
#choose-inputs { margin-top: 13px; }
.external-supply-badge { margin: 13px 0 10px; padding: 4px 7px; display: inline-block; border: 1px solid #65784c; background: #303d25; color: #d2e4bd; font-size: 10px; }
.recipe-inspector .external-supply-description { display: block; font-size: 11px; color: #c9d2b9; line-height: 1.65; margin: 7px 0 12px; }
@media (max-width: 560px) {
  .recipe-inspector .external-supply-description { display: block; font-size: 10px; }
}