@import url("fab-art.css");
/* 經營層樣式：全部選擇器以 .ty- 為前綴 */
:root {
  --ty-bg: var(--we-bg, #0f1623); --ty-panel: var(--we-panel, #182236); --ty-panel2: var(--we-panel2, #1f2c45); --ty-line: var(--we-line, #2c3b5a);
  --ty-fg: var(--we-fg, #e8eefc); --ty-mut: var(--we-mut, #93a4c6); --ty-acc: var(--we-accent, #4aa8ff); --ty-good: var(--we-good, #3ecf8e); --ty-bad: var(--we-bad, #ff6b6b); --ty-warn: var(--we-warn, #ffb84a);
  --ty-gold: var(--we-accent, #f4c95d);
}
.ty-root, body.ty-body { background: var(--ty-bg); color: var(--ty-fg); font: 15px/1.5 system-ui, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
body.ty-body { margin: 0; padding: 0 16px 48px; overscroll-behavior: contain; touch-action: manipulation; }
.ty-wrap { max-width: 960px; margin: 0 auto; }
.ty-wrap h1 { font-size: 18px; margin: 12px 0 4px; }
.ty-wrap h2 { font-size: 16px; margin: 0; }
.ty-muted { color: var(--ty-mut); font-size: 13px; margin: 4px 0; }
.ty-err, .ty-warn { color: var(--ty-warn); font-size: 13px; margin: 6px 0; }
.ty-warn--big { font-size: 15px; font-weight: 700; padding: 8px 10px; border: 2px solid var(--ty-warn); border-radius: 8px; background: rgba(255,184,74,.12); }

/* buttons */
.ty-btn { min-height: 44px; min-width: 44px; padding: 8px 14px; border: 1px solid var(--ty-line); border-radius: 10px; background: var(--ty-panel2); color: var(--ty-fg); font: inherit; cursor: pointer; touch-action: manipulation; }
.ty-btn:disabled { opacity: .45; cursor: not-allowed; }
.ty-btn:focus-visible, .ty-slot:focus-visible, .ty-tab:focus-visible, .ty-opt:focus-visible, .ty-stat--btn:focus-visible { outline: 2px solid var(--ty-acc); outline-offset: 2px; }
.ty-btn--primary { background: var(--ty-acc); color: #04101f; border-color: var(--ty-acc); font-weight: 600; }
.ty-btn--danger { border-color: var(--ty-bad); color: var(--ty-bad); }
.ty-clk { padding: 8px 10px; }
.ty-clk.is-on { background: var(--ty-acc); color: #04101f; }
.ty-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ty-choices .ty-btn { flex: 1 1 140px; }

/* HUD */
.ty-hud { position: sticky; top: 0; z-index: 20; background: var(--ty-bg); padding: 8px 0; border-bottom: 1px solid var(--ty-line); }
.ty-hud-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ty-stat { font-size: 14px; } .ty-stat b { font-variant-numeric: tabular-nums; color: var(--ty-gold); }
.ty-stat--btn { background: none; border: 0; color: inherit; font: inherit; min-height: 44px; padding: 0 4px; cursor: pointer; }
.ty-hud-clock { margin-top: 4px; }
.ty-time { font-variant-numeric: tabular-nums; margin-right: auto; font-size: 13px; }
.ty-inv-list { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ty-mut); }
.ty-inv-list[hidden] { display: none; }

/* tabs & head */
.ty-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 6px; scroll-snap-type: x proximity; }
.ty-tab { flex: 0 0 auto; min-width: 64px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--ty-line); background: var(--ty-panel); color: var(--ty-fg); border-radius: 10px; font: inherit; cursor: pointer; scroll-snap-align: start; }
.ty-tab small { color: var(--ty-mut); font-size: 11px; }
.ty-tab.is-on { border-color: var(--ty-acc); background: var(--ty-panel2); }
.ty-tab.is-locked { opacity: .65; border-style: dashed; }
.ty-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.ty-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--ty-panel2); border: 1px solid var(--ty-line); }
.ty-badge--warn { border-color: var(--ty-warn); color: var(--ty-warn); }
.ty-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.ty-kpi { background: var(--ty-panel); border-radius: 10px; padding: 6px 10px; }
.ty-kpi-k { font-size: 12px; color: var(--ty-mut); } .ty-kpi-v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ty-kpi-s { font-size: 11px; color: var(--ty-mut); }
.ty-kpi--good .ty-kpi-v { color: var(--ty-good); } .ty-kpi--bad .ty-kpi-v { color: var(--ty-bad); }

/* line */
.ty-line { position: relative; margin: 12px 0; border-radius: 12px; padding: 8px; overflow: hidden; } /* 背景（地板）見 fab-art.css */
.ty-cells { display: flex; }
.ty-cellwrap { flex: 0 0 var(--cell); display: block; }
.ty-slot, .ty-exit { box-sizing: border-box; width: calc(var(--cell) - 8px); margin: 34px 4px 0; min-height: 64px; border: 1px solid var(--ty-line); border-radius: 10px; background: var(--ty-panel2); color: var(--ty-fg); font: inherit; text-align: center; padding: 4px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.ty-exit { cursor: default; align-items: center; border-style: dashed; color: var(--ty-mut); }
.ty-slot-cat { font-size: 11px; color: var(--ty-mut); } .ty-slot-name { font-size: 13px; font-weight: 600; }
.ty-slot-sub { font-size: 10.5px; color: var(--ty-mut); } .ty-slot-empty { color: var(--ty-warn); font-weight: 600; }
.ty-slot.is-empty { border: 2px dashed var(--ty-warn); }
.ty-slot.is-busy { border-color: var(--ty-acc); box-shadow: 0 0 0 1px var(--ty-acc) inset; }
.ty-slot.is-bad { border-color: var(--ty-bad); background: #3a1d24; }
.ty-lots { position: absolute; left: 8px; top: 8px; right: 8px; bottom: 8px; pointer-events: none; } /* 天車軌道層；FOUP 樣式見 fab-art.css */

/* 窄螢幕：垂直蛇形，每槽一列 56px，Lot 沿 y 軸移動 */
.ty-line[data-mode="v"] .ty-cells { flex-direction: column; }
.ty-line[data-mode="v"] .ty-cellwrap { flex: 0 0 var(--cell); height: var(--cell); display: grid; grid-template-columns: 36px 1fr; align-items: center; }
.ty-line[data-mode="v"] .ty-lane { height: 100%; border-left: 2px dashed var(--ty-line); margin-left: 17px; }
.ty-line[data-mode="v"] .ty-slot, .ty-line[data-mode="v"] .ty-exit { margin: 2px 0; width: auto; height: 52px; min-height: 44px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; gap: 0 8px; padding: 2px 10px; }
.ty-line[data-mode="v"] .ty-exit { justify-content: center; }
.ty-line[data-mode="v"] .ty-lots { right: auto; width: 36px; }

.ty-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ty-advice, .ty-budget { padding: 12px 14px; margin: 8px 0; border: 1px solid var(--ty-line); border-left: 3px solid var(--ty-gold); background: var(--ty-panel); border-radius: 10px; }
.ty-advice > b { color: var(--ty-gold); }
.ty-advice .ty-btn { margin-top: 6px; }
.ty-ops-host, .ty-market, .ty-actions { scroll-margin-top: 150px; }

/* dialogs */
.ty-overlay[hidden] { display: none; }
.ty-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(5,10,20,.7); display: flex; align-items: flex-end; justify-content: center; }
.ty-dlg { box-sizing: border-box; width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; background: var(--ty-panel); border: 1px solid var(--ty-line); border-radius: 16px 16px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); animation: ty-up .2s ease-out; color: var(--ty-fg); }
.ty-dlg--modal { border-radius: 16px; margin: auto 12px; max-width: 520px; }
.ty-overlay:has(.ty-dlg--modal) { align-items: center; }
.ty-dlg:focus { outline: none; }
.ty-dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ty-dlg-x { background: none; border: 0; font-size: 24px; color: var(--ty-fg); }
@keyframes ty-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ty-dlg { animation: none; } }
.ty-opt { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 10px 12px; min-height: 44px; border-radius: 10px; border: 1px solid var(--ty-line); background: var(--ty-panel2); color: var(--ty-fg); font: inherit; cursor: pointer; }
.ty-opt:disabled { opacity: .45; }
.ty-opt-t { display: flex; justify-content: space-between; gap: 8px; } .ty-opt-t span { color: var(--ty-gold); }
.ty-opt-s { font-size: 12px; color: var(--ty-mut); }
.ty-cond { list-style: none; padding: 0; margin: 8px 0; } .ty-cond li { padding: 3px 0; }
.ty-ok { color: var(--ty-good); } .ty-no { color: var(--ty-bad); }
.ty-factcard { margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--ty-gold); background: var(--ty-panel2); border-radius: 6px; }
.ty-factcard-h { font-size: 12px; color: var(--ty-gold); font-weight: 700; } .ty-factcard p { margin: 4px 0 0; }
.ty-event-effect { font-size: 16px; }
.ty-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }

.ty-toasts { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 200; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.ty-toast { background: #000c; border: 1px solid var(--ty-line); padding: 8px 14px; border-radius: 10px; font-size: 13px; max-width: 520px; }

.ty-dev { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; padding: 8px; border: 1px dashed var(--ty-line); border-radius: 10px; }
.ty-dev h2 { width: 100%; font-size: 13px; color: var(--ty-mut); }

/* 市場與訂單、瓶頸、升級對照、轉速 */
.ty-sec { font-size: 15px; margin: 16px 0 6px; }
.ty-market { margin-top: 8px; }
.ty-mkt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ty-spark { letter-spacing: 1px; font-size: 14px; color: var(--ty-acc); }
.ty-inv-box { background: var(--ty-panel); border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 14px; }
.ty-sell .ty-btn { flex: 1 1 100%; }
.ty-contract { background: var(--ty-panel); border: 1px solid var(--ty-line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.ty-contract.is-active { border-color: var(--ty-gold); }
.ty-contract .ty-btn { margin-top: 6px; }
.ty-rate .ty-btn { flex: 1 1 calc(50% - 8px); text-align: left; }
.ty-rate .ty-btn.is-on { border-color: var(--ty-acc); box-shadow: 0 0 0 1px var(--ty-acc) inset; background: var(--ty-panel); }
.ty-bn { font-size: 13px; background: var(--ty-panel); border-left: 4px solid var(--ty-warn); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.ty-slot { position: relative; }
.ty-slot.is-bottleneck { border-color: var(--ty-warn); box-shadow: 0 0 0 2px var(--ty-warn) inset; }
.ty-tag { position: absolute; top: -9px; right: 4px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; line-height: 1.4; }
.ty-tag--bn { background: var(--ty-warn); color: #1b1200; }
.ty-tag--yl { background: var(--ty-panel2); color: var(--ty-warn); border: 1px solid var(--ty-warn); }
.ty-line[data-mode="v"] .ty-tag { top: -7px; }
.ty-upg table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ty-upg caption { text-align: left; color: var(--ty-mut); font-size: 12px; padding-bottom: 4px; }
.ty-upg th { text-align: left; font-weight: 400; color: var(--ty-mut); padding: 3px 4px 3px 0; }
.ty-upg td { padding: 3px 4px; white-space: nowrap; }

/* v3 營運控制：產線狀態、資金週轉、自動化、斷鏈救援 */
.ty-ops { margin-top: 8px; }
.ty-sub { font-size: 14px; margin: 12px 0 4px; }
.ty-modes .ty-btn { flex: 1 1 calc(50% - 8px); text-align: left; min-height: 56px; }
@media (min-width: 720px) { .ty-modes .ty-btn { flex: 1 1 calc(25% - 8px); } }
.ty-mode.is-on { border-color: var(--ty-acc); box-shadow: 0 0 0 1px var(--ty-acc) inset; background: var(--ty-panel); }
.ty-mode--pause.is-on, .ty-mode--mothball.is-on { border-color: var(--ty-warn); box-shadow: 0 0 0 1px var(--ty-warn) inset; }
.ty-mode:disabled:not(.is-on) { opacity: .55; }
.ty-badge--mode { border-color: var(--ty-acc); color: var(--ty-acc); font-weight: 700; }
.ty-badge--pause, .ty-badge--mothball { border-color: var(--ty-warn); color: var(--ty-warn); }
.ty-cashkpis { margin: 6px 0; }
.ty-contract.is-overdue { border-color: var(--ty-bad); }
.ty-stat--debt b { color: var(--ty-warn); } .ty-stat--debt.is-overdue b { color: var(--ty-bad); }
.ty-auto-row { margin: 6px 0; padding: 6px 10px; background: var(--ty-panel); border-radius: 10px; }
.ty-auto-row .ty-check { min-height: 44px; font-size: 13.5px; align-items: flex-start; padding-top: 6px; }
.ty-auto-ctl { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.ty-auto-ctl input[type="range"] { flex: 1; min-height: 32px; }
.ty-auto-ctl output { min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ty-gold); font-size: 13px; }
.ty-rescue-list { list-style: none; padding: 0; margin: 6px 0; max-height: 26vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ty-rescue-list .ty-btn { width: 100%; text-align: left; }
.ty-rescue .ty-choices .ty-btn { text-align: left; }
.we-tag--mode { border-color: var(--we-accent, #4aa8ff); color: var(--we-accent, #4aa8ff); }
.we-tag--pause, .we-tag--mothball { border-color: var(--we-warn, #ffb84a); color: var(--we-warn, #ffb84a); }
.ty-mode.is-on:disabled { opacity: 1; color: var(--ty-fg); }