:root {
  color-scheme:dark;
  --bg:#090b0d;
  --surface:#15191d;
  --surface-raised:#20252a;
  --surface-input:#0e1114;
  --surface-alt:#1a1f23;
  --surface-strong:#262c31;
  --line:#3d454b;
  --line-soft:#282e33;
  --line-strong:#596168;
  --text:#f0f2f2;
  --muted:#a7adb1;
  --accent:#f39a19;
  --accent-light:#ffb83e;
  --accent-dark:#9d5a0c;
  --accent-border:#c9780e;
  --focus-ring:#f39a1938;
  --green:#72c997;
  --red:#ff726d;
  --blue:#82c9ef;
  --radius-small:1px;
  --radius-control:2px;
  --radius-ui:2px;
  --radius-item:3px;
  --radius-panel:3px;
  --radius-pill:2px;
  --tag-height:26px;
  --shadow-panel:0 7px 18px #0005;
  --shadow-menu:0 12px 28px #000a;
}
* { box-sizing:border-box; } html { overflow-y:scroll; scrollbar-gutter:stable; } body { margin:0; color:var(--text); font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100vh; background:var(--bg); } main { max-width:1500px; margin:auto; padding:0 28px 56px; } .tabs { display:flex; gap:8px; margin:14px 0 18px; } .tab { border:1px solid transparent; border-radius:var(--radius-ui); background:transparent; color:var(--muted); padding:10px 17px; font-weight:700; } .tab:hover { background:#1a222d; color:var(--text); } .tab.active { background:var(--surface-raised); border-color:var(--line); color:var(--text); box-shadow:inset 0 -2px var(--accent); } .view { display:none; } .view.active { display:block; }

* {
  scrollbar-width:thin;
  scrollbar-color:var(--accent-dark) transparent;
}

*::-webkit-scrollbar {
  width:10px;
  height:10px;
  background:transparent !important;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner {
  border:0;
  background:transparent !important;
  box-shadow:none;
}

*::-webkit-scrollbar-thumb {
  min-height:42px;
  border:2px solid transparent;
  border-radius:2px;
  background:var(--accent-dark);
  background-clip:padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background:var(--accent);
  background-clip:padding-box;
}

*::-webkit-scrollbar-button {
  display:none;
  width:0;
  height:0;
  background:none;
}

html {
  scrollbar-color:var(--accent-dark) transparent;
}

.search-select-options {
  background:#151a1e;
  scrollbar-color:var(--accent-dark) #151a1e;
}

.combo-options {
  background:#1b2024;
  scrollbar-color:var(--accent-dark) #1b2024;
}

.table-wrap,
.recipe-dialog {
  scrollbar-color:var(--accent-dark) var(--surface);
}

html::-webkit-scrollbar-track,
html::-webkit-scrollbar-track-piece {
  background:transparent !important;
}

.search-select-options::-webkit-scrollbar-track,
.search-select-options::-webkit-scrollbar-track-piece {
  background:#151a1e !important;
}

.combo-options::-webkit-scrollbar-track,
.combo-options::-webkit-scrollbar-track-piece {
  background:#1b2024 !important;
}

.table-wrap::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track-piece,
.recipe-dialog::-webkit-scrollbar-track,
.recipe-dialog::-webkit-scrollbar-track-piece {
  background:var(--surface) !important;
}
.site-header {
  position:fixed;
  z-index:100;
  top:0;
  right:0;
  left:0;
  height:96px;
  padding-top:46px;
  padding-bottom:6px;
  overflow:hidden;
  border:0;
  background:
    repeating-linear-gradient(135deg,transparent 0 34px,#ffffff05 34px 35px),
    var(--bg);
  box-shadow:none;
}

.site-header .tabs {
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0 28px;
}

.main-tab-switch {
  display:inline-flex;
  flex:0 0 auto;
  align-items:stretch;
  height:44px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-ui);
  background:var(--surface-input);
}

.site-header .main-tab-switch .tab {
  height:42px;
  padding:0 18px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  font-size:.94rem;
}

.site-header .main-tab-switch .tab + .tab {
  border-left:0;
  box-shadow:inset 1px 0 var(--line);
}

.site-header .main-tab-switch .tab:hover {
  background:var(--surface-alt);
  color:var(--text);
}

.site-header .main-tab-switch .tab.active {
  border:0;
  border-radius:var(--radius-small);
  background:linear-gradient(180deg,#3a4147,var(--surface-strong));
  color:#fff;
}

.site-header .main-tab-switch .tab.active + .tab,
.site-header .main-tab-switch .tab + .tab.active {
  box-shadow:none;
}

.language-switcher {
  display:flex;
  align-items:center;
  width:auto;
  margin-left:0;
  color:var(--muted);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.global-search-slot {
  position:relative;
  width:clamp(160px,18vw,256px);
  margin-left:auto;
}

.global-search-slot[hidden] {
  display:none;
}

.global-search-slot input {
  height:34px;
  padding:6px 34px 6px 10px;
  border-color:var(--line-strong);
  background:var(--surface-input);
  font-size:.78rem;
}

#globalSearch::-webkit-search-cancel-button,
#globalSearch::-webkit-search-decoration {
  display:none;
  appearance:none;
  -webkit-appearance:none;
}

.global-search-slot .search-reset {
  top:6px;
  right:6px;
}

.recipe-filter-slot,
.overview-search-slot {
  display:none;
}

.language-switcher select {
  width:auto;
  min-width:108px;
  height:34px;
  padding:6px 30px 6px 10px;
  border-color:var(--line-strong);
  background-color:var(--surface-input);
  color:var(--text);
  font-size:.78rem;
  font-weight:700;
}

.sub-navigation.recipe-tabs {
  position:fixed;
  z-index:90;
  top:100px;
  left:50%;
  display:flex;
  align-items:flex-start;
  width:calc(100% - 56px);
  max-width:1444px;
  height:54px;
  min-height:54px;
  margin:0;
  padding:9px 10px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:linear-gradient(145deg,var(--surface) 0%,#111519 100%);
  box-shadow:var(--shadow-panel),inset 0 1px #ffffff08;
  transform:translateX(-50%);
}

.sub-navigation[hidden] {
  display:none !important;
}

main {
  padding-top:108px;
}

#addBtn {
  height:38px;
  padding-top:0;
  padding-bottom:0;
}

#addBtn:disabled {
  border-color:var(--line-strong);
  background:linear-gradient(180deg,#292f34,#20252a);
  color:var(--muted);
  box-shadow:none;
}

#settingsView {
  padding-top:56px;
}

.sub-navigation .recipe-tab {
  height:32px;
  padding:0 12px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  font-size:.84rem;
}
.recipe-tab-switch {
  display:inline-flex;
  flex:0 0 auto;
  align-items:stretch;
  height:34px;
  overflow:hidden;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-ui);
  background:var(--surface-input);
  box-shadow:inset 0 1px 4px #0008;
}
.sub-navigation .recipe-tab + .recipe-tab {
  border-left:1px solid var(--line);
}
.sub-navigation .recipe-tab:hover {
  background:var(--surface-alt);
  color:var(--text);
}
.sub-navigation .recipe-tab.active {
  border:0;
  border-radius:var(--radius-small);
  background:linear-gradient(180deg,#3a4147,var(--surface-strong));
  box-shadow:inset 0 1px #ffffff12;
  color:#fff;
}
.sub-navigation .recipe-tab.active + .recipe-tab,
.sub-navigation .recipe-tab + .recipe-tab.active {
  border-left:1px solid transparent;
}
.recipe-backup-tools {
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  margin-right:0;
}
.recipe-filter-slot {
  position:relative;
  display:flex;
  flex:0 0 auto;
  margin-left:10px;
}
.recipe-filter {
  width:clamp(165px,17.6vw,253px);
  height:34px;
  padding:6px 34px 6px 10px;
  border-color:var(--line-strong);
  background:var(--surface-input);
  font-size:.78rem;
}
.recipe-filter:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--focus-ring),inset 0 1px 5px #0008;
}
.recipe-filter::-webkit-search-cancel-button { display:none; -webkit-appearance:none; }
.search-reset { position:absolute; top:6px; right:6px; display:flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:0; background:transparent; color:#777e83; box-shadow:none; }
.search-reset[hidden] { display:none; }
.search-reset:hover { border-color:transparent; background:transparent; color:var(--accent-light); }
.search-reset svg { width:9px; height:9px; pointer-events:none; }
.search-reset path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.recipe-tool-button {
  height:34px;
  padding:6px 10px;
  border-color:var(--line-strong);
  background:var(--surface-input);
  color:var(--muted);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.035em;
  box-shadow:none;
}
.recipe-tool-button:hover {
  border-color:var(--accent-border);
  background:var(--surface-alt);
  color:var(--text);
  box-shadow:none;
}
.recipe-tool-button:active { transform:none; box-shadow:none; }
.transfer-icon-button svg {
  display:block;
  width:16px;
  height:16px;
  pointer-events:none;
}
.transfer-icon-button path {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#exportBtn svg,
#downloadBackupBtn svg,
#importBtn svg,
#loadBackupBtn svg {
  background:currentColor;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
#exportBtn svg,
#downloadBackupBtn svg {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
#importBtn svg,
#loadBackupBtn svg {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");
}
#exportBtn svg path,
#downloadBackupBtn svg path,
#importBtn svg path,
#loadBackupBtn svg path {
  display:none;
}
.backup-timestamp {
  color:var(--muted);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.035em;
  line-height:1.1;
  white-space:nowrap;
  text-transform:uppercase;
}
.source-timestamps {
  display:grid;
  gap:3px;
  margin-right:4px;
}
.backup-switch {
  display:flex;
  grid-template-columns:none;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 13px 0 10px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  background:var(--surface-input);
  color:var(--muted);
  cursor:pointer;
  font-size:.76rem;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.backup-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.backup-switch-track {
  position:relative;
  width:28px;
  height:16px;
  flex:0 0 auto;
  border:1px solid var(--line-strong);
  background:#090b0d;
}
.backup-switch-track span {
  position:absolute;
  top:2px;
  left:2px;
  width:10px;
  height:10px;
  background:var(--muted);
  transition:transform .15s,background .15s;
}
.backup-switch input:checked + .backup-switch-track { border-color:var(--accent-border); }
.backup-switch input:checked + .backup-switch-track span { transform:translateX(12px); background:var(--accent); }
.backup-switch:has(input:checked) { border-color:var(--accent-border); color:var(--text); }
.backup-switch:has(input:disabled),.recipe-tool-button:disabled { cursor:default; opacity:.45; }
select,input { height:38px; }
.grid { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; } .grid.panel { border-left:1px solid var(--line); } .grid .factory-summary { padding-left:18px; border-left:1px solid var(--line); } .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:20px; box-shadow:var(--shadow-panel); } h2 { margin:0 0 17px; font-size:1.02rem; letter-spacing:-.01em; } .add-form { display:grid; grid-template-columns:minmax(140px,.8fr) minmax(190px,1.2fr) 90px 105px auto; gap:11px; align-items:end; } .recipe-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; } .recipe-form .wide { grid-column:span 2; } label { display:grid; gap:6px; color:var(--muted); font-size:.78rem; font-weight:700; } select,input,textarea,button { font:inherit; border-radius:var(--radius-control); } select,input,textarea { width:100%; color:var(--text); background:var(--surface-input); border:1px solid var(--line); padding:9px 10px; outline:none; } select:disabled { cursor:not-allowed; opacity:.55; } textarea { min-height:74px; resize:vertical; } select:focus,input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); } button { cursor:pointer; border:1px solid var(--accent-border); padding:10px 14px; background:var(--accent); color:#17120a; font-weight:800; } button:hover { background:var(--accent-light); } button.secondary { border-color:var(--line); background:#222d3a; color:var(--text); } button.secondary:hover { background:#2b3948; } button.danger { border:0; background:transparent; color:var(--red); box-shadow:none; padding:6px; font-size:1rem; } .category-combo { position:relative; display:flex; } .category-combo input { padding-right:43px; } #machineToggle { position:absolute; right:3px; top:3px; bottom:3px; width:34px; padding:0; border:1px solid #40516a; background:#223246; color:#b9c9da; font-size:0; } #machineToggle::after { content:""; position:absolute; left:50%; top:calc(50% - 3px); width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translate(-50%,-50%) rotate(45deg); } #machineToggle:hover { color:var(--accent-light); background:#2d435d; } .category-menu { display:none; position:absolute; z-index:5; top:calc(100% + 5px); left:0; right:0; max-height:210px; overflow:auto; padding:4px; background:#202a36; border:1px solid #425166; border-radius:var(--radius-ui); box-shadow:var(--shadow-menu); } .category-menu.open { display:block; } .category-menu button { display:block; width:100%; border:0; padding:8px 10px; background:transparent; color:var(--text); text-align:left; font-weight:500; } .category-menu button:hover { background:#303d4d; color:var(--accent-light); } .hint,.muted { color:var(--muted); } .hint { font-size:.83rem; margin:13px 0 0; } .stat { color:var(--accent-light); font-size:2.6rem; font-weight:800; line-height:1; } .machine-types { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; } .chip { padding:4px 8px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#202a36; font-size:.78rem; color:#d5dde6; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin:31px 0 12px; } .section-title h2 { margin:0; } .table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); } table { width:100%; min-width:770px; border-collapse:collapse; } th { background:#202936; color:#aebac8; font-size:.75rem; text-align:left; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } th,td { padding:13px 14px; border-bottom:1px solid #293443; vertical-align:middle; } tbody tr:nth-child(even) { background:#111720; } tbody tr:hover { background:#1b2531; } tbody tr:last-child td { border:0; } td input { min-width:98px; padding:7px 8px; } .recipe-name { font-weight:750; } .machine { color:var(--muted); font-size:.83rem; margin-top:2px; } .io { font-size:.87rem; line-height:1.55; } .io.consume { color:#ffaaa5; } .io.produce { color:#93e2b4; } .empty,.overview-empty { text-align:center; padding:46px; color:var(--muted); }
.section-title .export-row { gap:6px; }
.section-title .export-row button { min-height:28px; padding:5px 9px; font-size:.78rem; line-height:1; }
.section-title .export-row .transfer-icon-button,
.recipe-backup-tools .transfer-icon-button {
  display:inline-flex;
  width:34px;
  min-width:34px;
  padding:0;
  align-items:center;
  justify-content:center;
}
.section-title-main,.tree-toggle-icons { display:flex; align-items:center; }
.section-title-main { gap:7px; }
.tree-toggle-icons { gap:1px; }
.section-title-main h2 { margin:0; }
button.tree-toggle-icon { position:relative; display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; padding:2px; border:0; border-radius:0; background:transparent; color:var(--muted); box-shadow:none; }
button.tree-toggle-icon:hover { background:transparent; color:var(--accent-light); }
button.tree-toggle-icon:disabled { visibility:hidden; }
button.tree-toggle-icon svg { display:block; width:11px; height:11px; pointer-events:none; }
button.tree-toggle-icon path { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
button.tree-toggle-icon::after { content:attr(data-tooltip); position:absolute; z-index:40; top:calc(100% + 6px); left:50%; padding:5px 7px; border:1px solid var(--line-strong); border-radius:var(--radius-control); background:#151a1e; color:var(--text); box-shadow:var(--shadow-menu); font-size:.7rem; font-weight:600; letter-spacing:0; line-height:1; text-transform:none; white-space:nowrap; opacity:0; pointer-events:none; transform:translateX(-50%); transition:opacity .12s; }
button.tree-toggle-icon:hover::after,button.tree-toggle-icon:focus-visible::after { opacity:1; }
button.tree-toggle-icon:active { background:transparent; box-shadow:none; transform:none; }
.amount { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:650; } .export-row { display:flex; flex-wrap:wrap; gap:8px; } #importFile { display:none; } .overview-head { display:flex; justify-content:space-between; gap:18px; align-items:end; margin:4px 0 13px; } .overview-head h2 { margin:0 0 4px; } .material-table td:last-child { font-weight:750; } .status-ok,.balance-positive { color:var(--green); } .status-missing,.balance-negative { color:var(--red); }
.supply-bar { position:relative; width:min(100%,360px); height:27px; overflow:hidden; border:1px solid #a94e4a; border-radius:var(--radius-small); background:#6f302f; color:#fff; font-variant-numeric:tabular-nums; }
.supply-bar-fill { position:absolute; inset:0 auto 0 0; min-width:0; background:#397d5b; }
.supply-bar.is-covered { border-color:#4b9c71; background:#242a2e; }
.supply-bar-value { position:absolute; z-index:2; inset:0; display:flex; align-items:center; justify-content:center; padding:0 8px; font-size:.8rem; font-weight:800; line-height:1; text-shadow:0 1px 2px #000; }
.material-name { display:inline-flex; align-items:center; gap:9px; }
.material-image { width:38px; height:38px; flex:0 0 38px; object-fit:contain; }
.overview-controls { display:flex; flex-wrap:nowrap; gap:8px; align-items:center; }
.overview-search-slot { position:relative; width:min(280px,100%); flex:0 1 280px; }
.overview-controls input { width:100%; padding-right:34px; }
.production-search::-webkit-search-cancel-button { display:none; -webkit-appearance:none; }
.overview-search-slot .search-reset { top:8px; right:7px; }
.overview-controls select { width:auto; min-width:165px; }
.overview-head { position:fixed; z-index:90; top:100px; left:50%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; width:calc(100% - 56px); max-width:1444px; min-height:54px; margin:0; padding:9px 10px; border:1px solid var(--line); border-radius:var(--radius-panel); background:linear-gradient(145deg,var(--surface) 0%,#111519 100%); box-shadow:var(--shadow-panel),inset 0 1px #ffffff08; transform:translateX(-50%); }
.overview-head .machine-types { justify-content:flex-end; margin-top:0; }
.overview-sort { width:auto; min-width:180px; justify-self:end; }
.overview-head input,.overview-head select { height:34px; border-color:var(--line-strong); background-color:var(--surface-input); font-size:.78rem; }
.overview-head input { padding:6px 34px 6px 10px; }
.overview-head select { padding:6px 30px 6px 10px; font-weight:700; }
.overview-search-slot .search-reset { top:6px; }
#overviewView { padding-top:56px; }
@media(max-width:1000px) { .overview-head .machine-types { display:none; } }
@media(max-width:850px) { .overview-head { width:calc(100% - 32px); } }
@media(max-width:620px) { .overview-head { grid-template-columns:minmax(0,1fr) auto; gap:8px; } .overview-controls { min-width:0; } .overview-search-slot { min-width:0; } .overview-controls select { min-width:135px; } .overview-sort { min-width:150px; } }
.search-reset,button.number-reset { transition:color .12s ease,transform .1s ease; }
.search-reset:active,button.number-reset:active { transform:scale(.78); box-shadow:none; }
@media(max-width:850px) { main { padding:0 16px 40px; } .grid { grid-template-columns:1fr; } .add-form { grid-template-columns:1fr 1fr; } .add-form button { grid-column:span 2; } .tab { padding:10px 12px; } }
@media(max-width:520px) { .add-form { grid-template-columns:1fr; } .add-form button { grid-column:auto; } }
/* The SVG chevron is centered by flexbox; no font-baseline offset. */
#machineToggle { display:flex; align-items:center; justify-content:center; font-size:inherit; }
#machineToggle::after { display:none; }
#machineToggle svg { display:block; width:14px; height:14px; }
#machineToggle path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.recipe-tabs { display:flex; gap:8px; margin-top:28px; border-bottom:1px solid var(--line); } .recipe-tab { border:0; border-radius:var(--radius-control) var(--radius-control) 0 0; background:transparent; color:var(--muted); padding:9px 14px; } .recipe-tab.active { color:var(--text); background:var(--surface-raised); box-shadow:inset 0 -2px var(--accent); } .recipe-list-view { display:none; } .recipe-list-view.active { display:block; } .recipe-actions { display:flex; gap:5px; } .recipe-actions button { padding:6px 9px; font-size:.8rem; }
.recipe-library { width:100%; } .recipe-library .recipe-tabs { margin-top:0; } .recipe-add-header { text-align:right; text-transform:none; } .recipe-add-header button { padding:7px 10px; font-size:.8rem; } .editor-actions { grid-column:span 2; display:flex; gap:10px; align-items:center; } .recipe-tab span { color:inherit; font-variant-numeric:tabular-nums; }
.editor-actions .editor-delete { margin-left:auto; border-color:#8e4543; color:var(--red); }
.editor-actions .editor-delete:hover { border-color:var(--red); color:#ffaaa5; }
.recipe-table table { table-layout:fixed; }
.recipe-table th:nth-child(1) { width:21%; }
.recipe-table th:nth-child(2) { width:11%; }
.recipe-table th:nth-child(3) { width:6%; }
.recipe-table th:nth-child(4) { width:18%; }
.recipe-table th:nth-child(5) { width:22%; }
.recipe-table th:nth-child(6) { width:22%; }
.recipe-table td { padding:14px; }
.recipe-table td:last-child { text-align:right; }
.recipe-identity { display:grid; justify-items:start; gap:6px; }
.recipe-table .recipe-name { max-width:100%; overflow:hidden; color:var(--text); font-size:.94rem; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.recipe-identity .source-badge { margin-left:0; }
.recipe-machine { color:var(--muted); font-size:.82rem; font-weight:650; }
.recipe-cycle { color:var(--muted); font-size:.82rem; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.recipe-io { font-size:.84rem; font-weight:650; line-height:1.55; }
.recipe-io.produce { color:var(--green); }
.recipe-io.consume { color:var(--red); }
.recipe-io b { color:inherit; font-variant-numeric:tabular-nums; }
.recipe-table .recipe-actions { justify-content:flex-end; }
.recipe-header-actions { display:flex; justify-content:flex-end; gap:5px; }
.recipe-header-actions button { height:36px; padding:0 9px; font-size:.7rem; }
.recipe-state-filter { display:inline-flex; align-items:center; gap:7px; }
.state-filter-track {
  position:relative;
  width:28px;
  height:16px;
  flex:0 0 28px;
  border:1px solid var(--line-strong);
  background:#090b0d;
}
.state-filter-track span {
  position:absolute;
  top:2px;
  left:2px;
  width:10px;
  height:10px;
  background:var(--muted);
  transition:transform .15s,background .15s;
}
.recipe-state-filter[aria-pressed="true"] {
  border-color:var(--accent-border);
  background:var(--surface-input);
  box-shadow:none;
  color:var(--text);
}
.recipe-state-filter[aria-pressed="true"] .state-filter-track { border-color:var(--accent-border); }
.recipe-state-filter[aria-pressed="true"] .state-filter-track span { transform:translateX(12px); background:var(--accent); }
.wiki-recipe-actions { flex-direction:column; align-items:stretch; }
.wiki-recipe-actions button { width:80%; margin-left:auto; padding:6px 8px; font-size:.73rem; }
.recipe-ignore-button { color:var(--muted); }
.recipe-ignored td:not(:last-child) { opacity:.38; }
.recipe-ignored { background:#0a0d0f; }
.recipe-ignored:hover { box-shadow:none; }
@media(max-width:900px) {
  .recipe-table table { min-width:770px; }
  .recipe-table td { padding:11px 9px; }
  .recipe-table td:last-child button { padding-right:9px; padding-left:9px; font-size:.74rem; }
}
.recipe-dialog { width:min(980px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-panel); color:var(--text); background:var(--surface); box-shadow:0 24px 80px #000b; } .recipe-dialog::backdrop { background:#05070bbd; backdrop-filter:blur(3px); } .recipe-dialog .panel { border:0; box-shadow:none; } .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; } .dialog-head h2 { margin:0; } .dialog-close { border:0; background:transparent; color:var(--muted); padding:3px 8px; font-size:1.5rem; line-height:1; } .dialog-close:hover { background:#25303d; color:var(--text); } @media(max-width:600px) { .recipe-dialog { width:calc(100vw - 16px); max-height:calc(100vh - 16px); } .recipe-dialog .recipe-form { grid-template-columns:1fr; } .recipe-dialog .recipe-form .wide,.recipe-dialog .editor-actions,.material-editor-pair { grid-column:auto; } .material-editor-pair { grid-template-columns:1fr; } .material-editor-pair .material-editor + .material-editor { border-left:0; border-top:1px solid #394146; } }
.material-editor-pair { grid-column:span 2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden; border:1px solid #394146; border-radius:var(--radius-panel); background:#0d1215; box-shadow:inset 0 1px #ffffff05; } .material-editor { display:grid; align-content:start; gap:9px; min-width:0; padding:14px; } .material-editor + .material-editor { border-left:1px solid #394146; } .material-editor>h3 { margin:-14px -14px 2px; padding:10px 14px; border-bottom:1px solid #394146; background:#20262a; color:#d5d8da; font:inherit; } .material-entry-head,.material-entry { display:grid; grid-template-columns:minmax(0,1fr) 110px 34px; gap:7px; } .material-entry { align-items:center; } .material-entry-head { align-items:end; color:#9fa5a9; font-size:.72rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; } .material-entry-head span:nth-child(2) { padding-left:1px; } .material-entries { display:grid; gap:7px; } .material-entry input { min-width:0; } .remove-material { align-self:center; justify-self:center; padding:0; border-color:var(--line); background:#202a36; color:var(--red); font-size:1.1rem; } .add-material { justify-self:start; padding:7px 10px; font-size:.82rem; }
@media(max-width:600px) { .recipe-dialog .material-editor-pair { grid-column:auto; grid-template-columns:1fr; } .recipe-dialog .material-editor-pair .material-editor + .material-editor { border-left:0; border-top:1px solid #394146; } }
.material-combo { position:relative; min-width:0; } .material-combo input { padding-right:38px; } .material-toggle { position:absolute; top:3px; right:3px; bottom:3px; width:30px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid #40516a; background:#223246; color:#b9c9da; } .material-toggle svg { width:13px; height:13px; } .material-toggle path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .material-toggle:hover { color:var(--accent-light); background:#2d435d; } .material-menu { display:none; position:absolute; z-index:7; top:calc(100% + 4px); left:0; right:0; max-height:200px; overflow:auto; padding:4px; border:1px solid #425166; border-radius:var(--radius-ui); background:#202a36; box-shadow:var(--shadow-menu); } .material-menu.open { display:block; } .material-menu button { display:block; width:100%; padding:7px 9px; border:0; border-radius:var(--radius-small); background:transparent; color:var(--text); text-align:left; font-weight:500; } .material-menu button:hover { background:#303d4d; color:var(--accent-light); }
.material-menu[popover] {
  position:fixed;
  inset:auto;
  margin:0;
  z-index:1000;
}
.backup-panel { margin-top:0; } .backup-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; } .source-status { padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-ui); background:var(--surface-input); color:var(--text); } button:disabled { cursor:default; opacity:.55; filter:none; } .source-badge { display:inline-block; margin-left:6px; padding:2px 6px; border:1px solid var(--line); border-radius:var(--radius-pill); color:var(--muted); font-size:.72rem; }
.machine-tree { display:grid; gap:14px; } .machine-group { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--surface); } .machine-group>summary,.recipe-group>summary { cursor:pointer; list-style:none; } .machine-group>summary::-webkit-details-marker,.recipe-group>summary::-webkit-details-marker { display:none; } .machine-group>summary { display:flex; align-items:center; gap:15px; padding:16px 18px; background:#202936; font-size:1rem; font-weight:800; } .machine-group>summary>span:first-of-type { flex:1; text-align:left; } .machine-group>summary::before,.recipe-group>summary::before { content:""; display:block; width:8px; height:8px; flex:0 0 8px; margin-right:9px; border-right:2px solid var(--accent-light); border-bottom:2px solid var(--accent-light); transform:rotate(-45deg); transform-origin:center; transition:transform .15s; } .recipe-group>summary::before { width:6px; height:6px; flex-basis:6px; margin-right:13px; } .machine-group[open]>summary::before,.recipe-group[open]>summary::before { transform:rotate(45deg); } .machine-group-body { display:grid; gap:10px; padding:12px; } .recipe-group { border:1px solid #293646; border-radius:var(--radius-item); background:#101720; } .recipe-group>summary { display:flex; align-items:center; padding:13px; color:#dfe7f0; font-weight:750; } .group-actions { display:flex; align-items:center; gap:7px; margin-left:auto; } .group-actions .danger { padding:4px 7px; font-size:.76rem; } .group-count { padding:3px 8px; border:1px solid #46546a; border-radius:var(--radius-pill); color:var(--muted); font-size:.76rem; white-space:nowrap; } .machine-instance-list { display:grid; gap:8px; padding:0 10px 10px; } .machine-instance { display:grid; grid-template-columns:minmax(120px,.5fr) minmax(240px,1.5fr) 120px 34px; gap:9px; align-items:center; padding:10px; border-top:1px solid #293443; } .machine-number { font-weight:750; text-align:left; } .machine-instance .danger { justify-self:end; } .unassigned { color:var(--accent-light); } @media(max-width:700px) { .machine-instance { grid-template-columns:1fr 34px; } .machine-instance select,.machine-instance label { grid-column:1 / -1; } }
.group-count,.power-badge,.shard-badge,.output-badge { display:inline-flex; align-items:center; height:var(--tag-height); padding:3px 8px; border:1px solid #46546a; border-radius:var(--radius-pill); font-size:.76rem; white-space:nowrap; } .power-badge { color:#8fd8ff; } .shard-badge { color:var(--accent-light); } .output-badge { color:var(--green); } .power-total { margin-top:20px; color:#8fd8ff; font-size:1.45rem; font-weight:800; } .machine-instance { grid-template-columns:60px minmax(240px,1fr) 120px minmax(160px,.55fr) minmax(175px,.75fr) 34px; } .machine-power { display:flex; flex-wrap:wrap; gap:5px; } @media(max-width:900px) { .machine-instance { grid-template-columns:60px minmax(190px,1fr) 110px minmax(140px,.7fr) 34px; } .machine-power { grid-column:2 / 5; grid-row:2; } .machine-instance>.icon-delete { grid-column:5; grid-row:1; } } @media(max-width:700px) { .machine-instance { grid-template-columns:1fr 34px; } .machine-instance select,.machine-instance label,.machine-recipe-select,.machine-instance>.number-control,.machine-output,.machine-power { grid-column:1 / -1; } .machine-power { grid-row:auto; } .machine-instance>.icon-delete { grid-column:2; grid-row:1; } }

.status-without-recipe { color:#f2ce58; }
.material-table .recipe-name > .status-without-recipe { margin-left:10px; }
.supply-bar.is-without-recipe { border-color:#c7a637; background:#66531e; }
.supply-bar.is-without-recipe .supply-bar-fill { background:#a88b2e; }
.production-location { min-width:160px; max-width:260px; }
#overviewView .overview-head { flex-wrap:wrap; }
.production-chevron { display:inline-block; font-size:1.4rem; transition:transform .15s; }
.production-material-toggle[aria-expanded="true"] .production-chevron { transform:rotate(90deg); }
.production-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:8px 16px; }
.production-details h3 { font-size:.9rem; margin:0 0 10px; }
.production-details ul { list-style:none; padding:0; margin:0; }
.production-details li { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--line); }
.production-details small,.production-recommendation small { display:block; color:var(--muted); font-size:.75rem; margin-top:4px; }
.production-recommendation { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.production-missing-tag { white-space:nowrap; font-size:.75rem; padding:4px 8px; }
.production-recipe-select { width:180px; min-width:120px; flex-shrink:0; }
.production-recommendation .production-missing-tag { flex-shrink:0; }
.production-detail-row { background:#ffffff04; }
.production-detail-row[hidden] { display:none; }
@media(max-width:700px) { .production-details { grid-template-columns:1fr; } }

.material-table .production-machine-count { text-align:center; }
.supply-bar-coverage { margin-left:6px; font-weight:600; }
.production-detail-numbers { display:block; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.data-pager { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 0; }
.data-pager button { padding:6px 12px; }
.data-pager button:disabled { opacity:.35; cursor:default; }
.data-page-note { color:#939da5; font-size:12px; margin:0 0 12px; }
#machineRows .recipe-page-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:4px 10px 0 38px; }
#machineRows .recipe-page-actions .data-pager { margin-left:auto; justify-content:flex-end; padding:0; gap:4px; color:var(--muted); font-size:11px; }
#machineRows .recipe-page-actions .data-pager button:disabled { opacity:.25; }