@import "tailwindcss";

:root {
  --bg: #080b10;
  --surface: #0e141d;
  --surface-2: #111924;
  --surface-3: #151f2c;
  --line: #243141;
  --line-soft: rgba(148, 163, 184, .13);
  --text: #dbe3ea;
  --muted: #718096;
  --muted-2: #4c5a6b;
  --amber: #f59e0b;
  --amber-2: #fbbf24;
  --green: #34d399;
  --green-dark: #064e3b;
  --red: #fb7185;
  --red-dark: #4c0519;
  --blue: #5aa5d8;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
button, select, input { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .38; }

.game-shell {
  min-height: 100vh;
  background:
    linear-gradient(rgba(8, 11, 16, .3), rgba(8, 11, 16, .94)),
    radial-gradient(900px 520px at 50% -8%, #192738 0%, #0b1018 58%, #080b10 100%);
}
.game-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image: linear-gradient(rgba(120, 140, 158, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 140, 158, .025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(black, transparent 70%);
}

.hud {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 12, 18, .94);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .24);
}
.hud__inner {
  width: min(1480px, calc(100% - 36px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 255px; }
.brand-lockup > div:last-child { display: flex; flex-direction: column; }
.brand-lockup strong { font-size: 13px; letter-spacing: .16em; line-height: 1; }
.brand-lockup small { color: var(--amber); margin-top: 7px; font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: .2em; }
.brand-symbol { width: 36px; height: 36px; display: flex; align-items: end; gap: 3px; padding: 7px; background: var(--amber); border-radius: 5px; transform: skewY(-3deg); }
.brand-symbol span { display: block; width: 6px; background: #111720; }
.brand-symbol span:nth-child(1) { height: 10px; opacity: .65; }
.brand-symbol span:nth-child(2) { height: 16px; }
.brand-symbol span:nth-child(3) { height: 22px; }

.hud-metrics { min-width: 0; display: flex; align-self: stretch; flex: 1; border-left: 1px solid var(--line-soft); }
.hud-stat { min-width: 165px; padding: 0 22px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; justify-content: center; }
.hud-stat span { color: var(--muted-2); font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: .17em; margin-bottom: 8px; }
.hud-stat strong { font: 650 14px/1 var(--font-geist-mono), monospace; white-space: nowrap; }
.hud-stat--cash strong { color: var(--amber-2); font-size: 18px; }
.time-controls { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.time-scale { color: #8794a2; border: 1px solid var(--line); padding: 8px 10px; font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: .14em; }
.time-button { height: 38px; border: 1px solid transparent; padding: 0 15px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; transition: .2s ease; }
.time-button i { font-style: normal; font-size: 11px; }
.time-button--play { background: var(--amber); color: #15100a; box-shadow: 0 0 22px rgba(245, 158, 11, .13); }
.time-button--pause { background: #1c2937; color: #dbe3ea; border-color: #304153; }
.time-button:hover { filter: brightness(1.12); }
.reset-button { width: 38px; height: 38px; border: 1px solid var(--line); background: #141d28; color: #8b98a8; cursor: pointer; }
.reset-button--armed { width: 62px; color: #fecdd3; background: #3b101d; border-color: #7f1d1d; font-size: 10px; }

.tabs { width: min(1480px, calc(100% - 36px)); margin: 0 auto; display: flex; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; min-height: 41px; padding: 0 22px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #667486; cursor: pointer; font: 750 10px/1 var(--font-geist-mono), monospace; letter-spacing: .08em; text-transform: uppercase; transition: .2s; }
.tabs button i { color: #3e4a58; font-size: 7px; font-style: normal; margin-right: 9px; }
.tabs button:hover { color: #b5c0cc; background: rgba(255, 255, 255, .018); }
.tabs button.active { color: var(--amber-2); border-color: var(--amber); background: linear-gradient(to top, rgba(245,158,11,.06), transparent); }
.tabs button.active i { color: var(--amber); }

.game-content { width: min(1480px, calc(100% - 36px)); margin: 0 auto; padding: 24px 0 70px; position: relative; z-index: 1; }
.view-stack { display: flex; flex-direction: column; gap: 22px; }
.panel { background: linear-gradient(145deg, rgba(17,25,36,.98), rgba(12,18,26,.98)); border: 1px solid var(--line); box-shadow: 0 18px 46px rgba(0,0,0,.18); }
.panel-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 19px; border-bottom: 1px solid var(--line-soft); }
.panel-heading > div > span, .view-intro > div:first-child > span { display: block; color: var(--amber); font: 750 7px/1 var(--font-geist-mono), monospace; letter-spacing: .2em; margin-bottom: 8px; }
.panel-heading h1, .panel-heading h2 { margin: 0; font-size: 17px; line-height: 1; letter-spacing: -.015em; }
.panel-heading em { color: #5e6d7e; font: 700 7px/1 var(--font-geist-mono), monospace; font-style: normal; letter-spacing: .13em; text-align: right; }

.guide-card {
  min-height: 72px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(245, 158, 11, .35);
  background: linear-gradient(90deg, rgba(245,158,11,.09), rgba(14,20,29,.94) 38%, rgba(14,20,29,.94));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .17);
}
.guide-index { align-self: stretch; width: 112px; flex: 0 0 112px; display: grid; place-items: center; padding: 0 8px; color: var(--amber-2); border-right: 1px solid rgba(245, 158, 11, .25); font: 800 9px/1.35 var(--font-geist-mono), monospace; letter-spacing: .1em; text-align: center; }
.guide-copy { min-width: 0; flex: 1; padding: 12px 20px; display: flex; flex-direction: column; gap: 6px; }
.guide-copy strong { font-size: 14px; }
.guide-copy span { color: #8190a0; font-size: 11px; }
.guide-copy small { color: #526171; font: 700 8px/1 var(--font-geist-mono), monospace; letter-spacing: .08em; text-transform: uppercase; }
.guide-card > button { align-self: stretch; min-width: 150px; border: 0; border-left: 1px solid rgba(245,158,11,.2); background: transparent; color: var(--amber-2); cursor: pointer; font-size: 10px; font-weight: 800; }
.guide-card > button i { font-style: normal; margin-left: 9px; }
.guide-card > button:hover { background: rgba(245, 158, 11, .08); }
.guide-card--complete { border-color: rgba(16, 185, 129, .42); background: linear-gradient(90deg, rgba(16,185,129,.1), rgba(14,20,29,.94) 38%, rgba(14,20,29,.94)); }
.guide-card--complete .guide-index, .guide-card--complete > button { color: #6ee7b7; border-color: rgba(16,185,129,.25); }
.critical-banner { margin-bottom: 20px; padding: 12px 15px; border: 1px solid #7f1d1d; background: var(--red-dark); color: #fecdd3; font-size: 12px; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(330px, .75fr); gap: 22px; }
.overview-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.operations-map { min-width: 0; }
.chain-board { min-height: 590px; padding: 34px 24px; display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; position: relative; }
.chain-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(116,134,151,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(116,134,151,.055) 1px, transparent 1px); background-size: 36px 36px; }
.chain-board::after { content: ""; position: absolute; width: 430px; height: 430px; right: -180px; top: 80px; border: 1px solid rgba(245,158,11,.04); border-radius: 50%; box-shadow: 0 0 0 44px rgba(245,158,11,.018), 0 0 0 88px rgba(245,158,11,.012); }
.chain-lane { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(150px, 1fr) 86px minmax(150px, 1fr) 86px minmax(170px, 1.08fr); align-items: center; gap: 0; padding: 24px 13px 13px; border: 1px solid rgba(107, 127, 145, .12); background: linear-gradient(90deg, rgba(14,20,29,.66), rgba(17,25,36,.76)); }
.chain-lane--steel { border-left: 2px solid #9fa9ac; }
.chain-lane--aluminum { border-left: 2px solid #ced2ce; }
.chain-lane--oil { border-left: 2px solid #8f7840; }
.lane-label { position: absolute; top: 8px; left: 13px; color: #465466; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .2em; }
.chain-node, .chain-market { min-width: 0; height: 94px; padding: 12px; display: flex; align-items: center; gap: 11px; position: relative; border: 1px solid #283647; background: linear-gradient(145deg, #141e2a, #0d141d); box-shadow: 0 12px 26px rgba(0,0,0,.23); transition: .3s; }
.chain-node.locked { filter: saturate(.35); opacity: .55; }
.chain-node.leased { border-color: #3d4c5e; }
.chain-node.operating { border-color: rgba(52, 211, 153, .45); box-shadow: 0 12px 26px rgba(0,0,0,.23), 0 0 22px rgba(52,211,153,.045); }
.chain-node > div:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.chain-node > div:nth-child(2) > span { color: #6a7788; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .12em; margin-bottom: 6px; }
.chain-node.operating > div:nth-child(2) > span { color: var(--green); }
.chain-node strong, .chain-market strong { font-size: 11px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chain-node small, .chain-market small { color: #687587; font: 7px/1.3 var(--font-geist-mono), monospace; margin-top: 6px; }
.chain-node > em { position: absolute; right: 8px; bottom: 7px; color: #9faab6; font: 650 7px/1 var(--font-geist-mono), monospace; font-style: normal; }
.chain-market { flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 19px; border-color: rgba(245,158,11,.25); background: linear-gradient(135deg, rgba(245,158,11,.08), #0d141d 72%); }
.chain-market > span { color: var(--amber); font: 800 6px/1 var(--font-geist-mono), monospace; letter-spacing: .18em; }
.chain-link { height: 2px; position: relative; background: #293543; }
.chain-link > span { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--amber), var(--amber-2)); box-shadow: 0 0 9px rgba(245,158,11,.5); }
.chain-link.active > span { width: 100%; animation: linkFlow 2s ease-in-out infinite; }
.chain-link > i { position: absolute; right: -2px; top: 50%; transform: translateY(-51%); color: #435163; font-style: normal; font-size: 17px; }
.chain-link.active > i { color: var(--amber-2); }
.chain-link > small { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); color: #546273; font: 650 6px/1 var(--font-geist-mono), monospace; white-space: nowrap; }
.chain-board--converging { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .34fr); grid-template-rows: repeat(3, minmax(132px, auto)); gap: 28px 0; }
.chain-board--converging .chain-lane { grid-column: 1; grid-template-columns: minmax(150px, 1fr) 86px minmax(150px, 1fr) 118px; }
.chain-board--converging .chain-lane--steel { grid-row: 1; }
.chain-board--converging .chain-lane--aluminum { grid-row: 2; }
.chain-board--converging .chain-lane--oil { grid-row: 3; }
.factory-hub { grid-column: 2; grid-row: 1 / 4; min-width: 0; padding-left: 38px; display: flex; align-items: center; position: relative; z-index: 2; }
.factory-hub::before { content: ""; position: absolute; left: 0; top: 14.5%; bottom: 14.5%; width: 2px; background: #293543; }
.factory-hub::after { content: ""; position: absolute; left: 0; top: 50%; width: 38px; height: 2px; background: #293543; }
.factory-hub.active::before, .factory-hub.active::after { background: linear-gradient(var(--amber), var(--amber-2)); box-shadow: 0 0 9px rgba(245,158,11,.42); animation: linkFlow 2s ease-in-out infinite; }
.factory-hub > .chain-node { width: 100%; min-height: 112px; height: auto; border-color: rgba(245,158,11,.3); background: linear-gradient(145deg, rgba(245,158,11,.07), #0d141d 72%); }
.factory-hub > i { position: absolute; left: 27px; top: 50%; transform: translateY(-53%); color: #435163; font-size: 17px; font-style: normal; z-index: 2; }
.factory-hub.active > i { color: var(--amber-2); }
.factory-hub__label { position: absolute; left: 50px; top: calc(50% - 80px); color: var(--amber); font: 750 6px/1 var(--font-geist-mono), monospace; letter-spacing: .13em; }
.factory-hub__inputs { position: absolute; left: 50px; right: 10px; top: calc(50% + 65px); display: flex; flex-wrap: wrap; gap: 5px; }
.factory-hub__inputs span { padding: 4px 5px; border: 1px solid #273648; background: #0b1119; color: #667587; font: 650 5px/1 var(--font-geist-mono), monospace; letter-spacing: .07em; }

.summary-kpis { display: grid; grid-template-columns: 1fr 1fr; }
.summary-kpis > div { min-height: 100px; padding: 18px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line-soft); }
.summary-kpis > div:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.summary-kpis span { color: #647386; font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: .1em; }
.summary-kpis strong { margin: 9px 0 6px; color: var(--amber-2); font: 650 19px/1 var(--font-geist-mono), monospace; }
.summary-kpis small { color: #536174; font-size: 9px; }
.log-panel { flex: 1; min-height: 285px; }
.event-log { max-height: 340px; overflow-y: auto; padding: 9px 16px 16px; scrollbar-color: #344255 transparent; scrollbar-width: thin; }
.log-line { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(148,163,184,.07); font-size: 10px; line-height: 1.45; }
.log-line time { color: #455366; font: 650 7px/1.45 var(--font-geist-mono), monospace; }
.log-line span { color: #8592a1; }
.log-line--good span { color: #97cdb8; }
.log-line--warn span { color: #deb579; }

.view-intro { min-height: 118px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid var(--line); background: linear-gradient(90deg, #111924, #0d141d); }
.view-intro h1 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 38px); line-height: 1; letter-spacing: -.045em; }
.view-intro p { max-width: 720px; margin: 0; color: #758496; font-size: 12px; line-height: 1.55; }
.intro-note { max-width: 360px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(245,158,11,.25); background: rgba(245,158,11,.05); }
.intro-note i { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border: 1px solid var(--amber); color: var(--amber-2); font: 700 11px/1 var(--font-geist-mono), monospace; font-style: normal; }
.intro-note span { color: #9b8c73; font-size: 10px; line-height: 1.5; }
.market-clock { min-width: 210px; padding: 14px 17px; border-left: 2px solid var(--amber); background: #0b1119; display: flex; flex-direction: column; }
.market-clock span { color: #596779; font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: .13em; }
.market-clock strong { margin: 8px 0 5px; color: var(--amber-2); font-size: 12px; }
.market-clock small { color: #7c8998; font: 8px/1 var(--font-geist-mono), monospace; }

.enterprise-section { display: flex; flex-direction: column; gap: 10px; }
.section-label { display: flex; align-items: baseline; gap: 12px; padding: 0 2px; }
.section-label span { color: var(--amber); font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: .16em; text-transform: uppercase; }
.section-label h2 { margin: 0; font-size: 16px; }
.enterprise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.enterprise-grid--single { grid-template-columns: 1fr; }
.enterprise-card { min-width: 0; border: 1px solid #223040; background: linear-gradient(150deg, #101822, #0c121a); box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.enterprise-card--leased { border-color: #334458; }
.enterprise-card--operating { border-color: rgba(52,211,153,.38); }
.enterprise-top { min-height: 115px; padding: 16px; display: flex; gap: 13px; position: relative; border-bottom: 1px solid var(--line-soft); }
.enterprise-title { min-width: 0; padding-top: 3px; padding-right: 74px; display: flex; flex-direction: column; }
.enterprise-title > span { color: #536174; font: 750 6px/1 var(--font-geist-mono), monospace; letter-spacing: .18em; }
.enterprise-title h3 { margin: 8px 0 7px; font-size: 14px; line-height: 1.1; }
.enterprise-title small { color: #6f7c8c; font-size: 9px; line-height: 1.45; }
.status-badge { position: absolute; right: 13px; top: 13px; display: flex; align-items: center; gap: 5px; padding: 5px 7px; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .08em; }
.status-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-badge.online { color: var(--green); background: rgba(52,211,153,.07); border: 1px solid rgba(52,211,153,.2); }
.status-badge.waiting { color: var(--amber-2); background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.2); }
.status-badge.offline { color: #5f6b78; background: #131b25; border: 1px solid #263344; }

.lease-block { min-height: 150px; padding: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; }
.lease-block > div { min-width: 0; padding: 10px; background: #0b1119; border: 1px solid rgba(148,163,184,.08); display: flex; flex-direction: column; gap: 8px; }
.lease-block > div span { color: #4f5e70; font: 700 6px/1.2 var(--font-geist-mono), monospace; letter-spacing: .1em; }
.lease-block > div strong { color: #a9b5c1; font: 650 10px/1 var(--font-geist-mono), monospace; }
.lease-block > button { grid-column: 1 / -1; min-height: 39px; padding: 0 13px; display: flex; justify-content: space-between; align-items: center; border: 0; background: var(--amber); color: #171109; cursor: pointer; font-size: 10px; font-weight: 850; }
.lease-block > button i { font-style: normal; }
.lease-block > em { position: absolute; right: 21px; top: -107px; color: var(--amber-2); font: 750 6px/1 var(--font-geist-mono), monospace; font-style: normal; letter-spacing: .1em; }

.workforce-block, .inventory-block, .manufacturing-block { padding: 14px 15px; border-bottom: 1px solid var(--line-soft); }
.workforce-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.workforce-heading > div { display: flex; align-items: baseline; gap: 9px; }
.workforce-heading span, .block-label { color: #536174; font: 750 6px/1 var(--font-geist-mono), monospace; letter-spacing: .14em; }
.workforce-heading strong { font: 700 12px/1 var(--font-geist-mono), monospace; }
.workforce-heading small { color: #6c7989; font-size: 8px; }
.progress { height: 4px; overflow: hidden; background: #202b38; }
.progress span { display: block; height: 100%; transition: width .45s ease; }
.progress--amber span { background: linear-gradient(90deg, #bb6815, var(--amber-2)); box-shadow: 0 0 8px rgba(245,158,11,.35); }
.progress--green span { background: linear-gradient(90deg, #087451, var(--green)); box-shadow: 0 0 8px rgba(52,211,153,.3); }
.progress--red span { background: var(--red); }
.worker-controls { display: flex; gap: 6px; margin-top: 11px; }
.worker-controls button { height: 31px; padding: 0 10px; border: 1px solid #2a394a; background: #131d28; color: #9aa7b4; cursor: pointer; font-size: 9px; }
.worker-controls button:not(:disabled):hover { border-color: #53657a; color: white; }
.worker-controls .hire-team { flex: 1; color: var(--amber-2); border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.06); }
.worker-controls .power-toggle { margin-left: auto; }
.worker-controls .power-toggle.on { color: var(--green); border-color: rgba(52,211,153,.25); }
.worker-controls .power-toggle.off { color: var(--red); border-color: rgba(251,113,133,.25); }
.storage-list { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.storage-list > small { color: #4f5d6d; font-size: 9px; }
.storage-meter { min-width: 0; padding: 9px 10px; border: 1px solid rgba(148,163,184,.11); background: #0b1119; }
.storage-meter__heading, .storage-meter__amount { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.storage-meter__heading { margin-bottom: 8px; }
.storage-meter__heading > span { min-width: 0; display: flex; align-items: center; gap: 7px; color: #8794a3; font-size: 8px; }
.storage-meter__heading > span i { width: 7px; height: 7px; flex: 0 0 7px; transform: rotate(45deg); }
.storage-meter__heading > strong { color: #b8c3cd; white-space: nowrap; font: 700 7px/1 var(--font-geist-mono), monospace; }
.storage-meter .progress { height: 5px; }
.storage-meter__amount { margin-top: 7px; }
.storage-meter__amount span { color: #c1cad3; font: 650 8px/1 var(--font-geist-mono), monospace; }
.storage-meter__amount small { color: #596779; font: 6px/1 var(--font-geist-mono), monospace; }
.manufacturing-block { border-bottom: 0; }
.manufacturing-block--preview { background: rgba(245,158,11,.018); }
.recipe-grid { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recipe { min-width: 0; padding: 11px; display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(148,163,184,.12); background: #0b1119; }
.recipe-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.recipe-heading > div { display: flex; flex-direction: column; gap: 5px; }
.recipe-heading strong { font-size: 10px; }
.recipe-heading small { color: #657284; font-size: 7px; }
.recipe-heading em { padding: 4px 6px; border: 1px solid rgba(245,158,11,.18); color: var(--amber-2); font: 700 6px/1 var(--font-geist-mono), monospace; font-style: normal; white-space: nowrap; }
.recipe-quantity { min-height: 48px; padding: 7px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #263546; background: #0d151e; }
.recipe-quantity > div:first-child { display: flex; flex-direction: column; gap: 5px; }
.recipe-quantity > div:first-child span { color: #758394; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .1em; }
.recipe-quantity > div:first-child small { color: #526174; font-size: 6px; }
.recipe-quantity > div:last-child { display: grid; grid-template-columns: 30px 48px 30px; }
.recipe-quantity button { min-height: 31px; padding: 0; border: 1px solid #314154; background: #151f2b; color: var(--amber-2); cursor: pointer; font-size: 12px; }
.recipe-quantity button:disabled { opacity: .35; cursor: not-allowed; }
.recipe-quantity input { height: 31px; padding: 0 4px; border-left: 0; border-right: 0; text-align: center; font: 700 10px/1 var(--font-geist-mono), monospace; }
.recipe-requirements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.recipe-material { min-width: 0; padding: 7px; border: 1px solid #202c3a; background: #0d151e; display: flex; flex-direction: column; gap: 5px; }
.recipe-material > span { min-width: 0; display: flex; align-items: center; gap: 5px; color: #687789; font-size: 6px; line-height: 1.25; }
.recipe-material > span i { width: 5px; height: 5px; flex: 0 0 5px; transform: rotate(45deg); }
.recipe-material > strong { color: #c0c9d1; font: 700 8px/1 var(--font-geist-mono), monospace; }
.recipe-material > small { color: #705d5d; font-size: 6px; line-height: 1.25; }
.recipe-material.ready { border-color: rgba(52,211,153,.22); }
.recipe-material.ready > small { color: var(--green); }
.recipe-planning-note { padding: 7px 8px; border-left: 2px solid var(--amber); background: rgba(245,158,11,.04); color: #8e7d64; font-size: 7px; line-height: 1.4; }
.recipe > button { min-height: 32px; border: 1px solid rgba(245,158,11,.32); background: rgba(245,158,11,.08); color: var(--amber-2); padding: 7px 9px; cursor: pointer; font-size: 8px; }
.recipe > button:disabled { color: #566272; border-color: #263341; background: #111821; cursor: not-allowed; }
.build-progress { margin-top: 10px; padding: 10px; border: 1px solid rgba(52,211,153,.2); background: rgba(52,211,153,.04); }
.build-progress > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.build-progress strong { font-size: 10px; }
.build-progress span { color: var(--green); font: 7px/1 var(--font-geist-mono), monospace; }
.build-progress--batch { padding: 12px; }
.build-progress--batch > div:first-child > div { display: flex; flex-direction: column; gap: 6px; }
.build-progress--batch > div:first-child > div > span { color: #5f8d7e; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .1em; }
.build-progress--batch > div:first-child > em { color: var(--green); font: 700 8px/1 var(--font-geist-mono), monospace; font-style: normal; }
.build-progress--batch > small { display: block; margin-top: 8px; color: #607466; font-size: 7px; line-height: 1.4; }
.build-idle { margin-top: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; border: 1px dashed #304053; background: #0b1119; }
.build-idle strong { color: #8795a5; font-size: 9px; }
.build-idle span { color: #566577; font-size: 7px; }
.build-queue { margin-top: 10px; border: 1px solid rgba(148,163,184,.11); background: #0a1017; }
.build-queue__heading { min-height: 36px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.build-queue__heading span, .new-batch-label span { color: #596879; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .12em; }
.build-queue__heading strong { color: #8d9aa8; font: 700 7px/1 var(--font-geist-mono), monospace; }
.build-queue__empty { padding: 16px 10px; color: #4e5d6e; font-size: 8px; text-align: center; }
.build-queue__list { display: grid; grid-template-columns: 1fr 1fr; }
.build-queue__item { min-height: 56px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line-soft); }
.build-queue__item:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.build-queue__item > i { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border: 1px solid #334457; color: var(--amber-2); font: 700 7px/1 var(--font-geist-mono), monospace; font-style: normal; }
.build-queue__item > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.build-queue__item > div strong { color: #9da9b5; font-size: 8px; }
.build-queue__item > div span { color: #596879; font: 6px/1 var(--font-geist-mono), monospace; }
.build-queue__item > em { color: #657386; font: 650 5px/1 var(--font-geist-mono), monospace; font-style: normal; }
.new-batch-label { margin: 14px 1px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.new-batch-label small { color: #4f5d6e; font-size: 6px; }

.asset-glyph { width: 62px; height: 62px; flex: 0 0 62px; position: relative; overflow: hidden; border: 1px solid #293849; background: radial-gradient(circle at 50% 70%, rgba(245,158,11,.07), transparent 55%), #0b1119; }
.asset-glyph span { position: absolute; display: block; transition: .35s; }
.asset-glyph--active { border-color: rgba(245,158,11,.35); }
.asset-glyph--mine .glyph-a { left: 6px; bottom: 12px; width: 35px; height: 28px; background: #3d4449; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.asset-glyph--mine .glyph-b { right: 4px; bottom: 12px; width: 36px; height: 37px; background: #51504a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.asset-glyph--mine .glyph-c { left: 26px; bottom: 12px; width: 15px; height: 16px; border-radius: 8px 8px 0 0; background: #080b10; }
.asset-glyph--mine .glyph-d { left: 32px; bottom: 19px; width: 4px; height: 4px; border-radius: 50%; background: #555c5c; }
.asset-glyph--mine.asset-glyph--active .glyph-a, .asset-glyph--mine.asset-glyph--active .glyph-b { background: #796344; }
.asset-glyph--mine.asset-glyph--active .glyph-d { background: var(--amber-2); box-shadow: 0 0 9px var(--amber); }
.asset-glyph--oil .glyph-a { left: 27px; top: 7px; width: 4px; height: 45px; background: #5d6264; transform: rotate(13deg); transform-origin: bottom; }
.asset-glyph--oil .glyph-b { left: 19px; top: 8px; width: 35px; height: 4px; background: #62676a; transform: rotate(-15deg); transform-origin: left; }
.asset-glyph--oil .glyph-c { left: 20px; bottom: 9px; width: 31px; height: 3px; background: #4c5256; box-shadow: 0 -10px #4c5256, 0 -20px #4c5256; }
.asset-glyph--oil .glyph-d { right: 7px; top: 13px; width: 8px; height: 16px; border: 2px solid #61676a; border-radius: 50%; }
.asset-glyph--oil.asset-glyph--active .glyph-b { background: var(--amber); animation: pumpJack 1.5s ease-in-out infinite alternate; }
.asset-glyph--oil.asset-glyph--active .glyph-d { border-color: var(--amber); box-shadow: 0 0 10px rgba(245,158,11,.25); }
.asset-glyph--factory .glyph-a, .asset-glyph--refinery .glyph-a, .asset-glyph--machine .glyph-a { left: 7px; bottom: 10px; width: 47px; height: 27px; background: #444d54; clip-path: polygon(0 35%, 17% 0, 34% 35%, 51% 0, 68% 35%, 100% 35%, 100% 100%, 0 100%); }
.asset-glyph--factory .glyph-b, .asset-glyph--refinery .glyph-b, .asset-glyph--machine .glyph-b { right: 9px; bottom: 36px; width: 7px; height: 20px; background: #5b6267; }
.asset-glyph--factory .glyph-c, .asset-glyph--refinery .glyph-c, .asset-glyph--machine .glyph-c { left: 15px; bottom: 18px; width: 29px; height: 4px; background: repeating-linear-gradient(90deg, #151b20 0 5px, transparent 5px 10px); }
.asset-glyph--active.asset-glyph--factory .glyph-a, .asset-glyph--active.asset-glyph--refinery .glyph-a, .asset-glyph--active.asset-glyph--machine .glyph-a { background: #665439; }
.asset-glyph--active.asset-glyph--factory .glyph-c, .asset-glyph--active.asset-glyph--refinery .glyph-c, .asset-glyph--active.asset-glyph--machine .glyph-c { background: repeating-linear-gradient(90deg, var(--amber) 0 5px, transparent 5px 10px); filter: drop-shadow(0 0 5px var(--amber)); }
.asset-glyph--refinery .glyph-d { left: 9px; top: 9px; width: 9px; height: 27px; border: 2px solid #5c6266; border-radius: 5px 5px 0 0; }
.asset-glyph--machine .glyph-d { right: 5px; bottom: 6px; width: 17px; height: 17px; border: 3px dotted #737a7e; border-radius: 50%; }
/* Cargo truck: box trailer + cab + two wheels */
.asset-glyph--truck .glyph-a { left: 5px; top: 20px; width: 30px; height: 19px; background: linear-gradient(180deg, #7d6544, #5b4a33); border: 1px solid #8b704b; border-radius: 2px; }
.asset-glyph--truck .glyph-b { left: 37px; top: 25px; width: 19px; height: 14px; background: #b16b20; clip-path: polygon(0 0, 62% 0, 100% 45%, 100% 100%, 0 100%); border-radius: 2px; }
/* Tanker: cylindrical tank + cab */
.asset-glyph--tanker .glyph-a { left: 5px; top: 22px; width: 31px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #787f83, #454b4e); border: 1px solid #8a9296; }
.asset-glyph--tanker .glyph-b { left: 37px; top: 25px; width: 19px; height: 14px; background: #b16b20; clip-path: polygon(0 0, 62% 0, 100% 45%, 100% 100%, 0 100%); border-radius: 2px; }
/* Shared chassis + wheels */
.asset-glyph--truck .glyph-c, .asset-glyph--tanker .glyph-c { left: 5px; top: 39px; width: 51px; height: 3px; background: #2c3542; border-radius: 1px; }
.asset-glyph--truck .glyph-d, .asset-glyph--tanker .glyph-d { left: 12px; top: 40px; width: 10px; height: 10px; border: 2px solid #080b10; background: #87909a; border-radius: 50%; box-shadow: 28px 0 0 -2px #87909a, 28px 0 0 0 #080b10; }
.asset-glyph--active.asset-glyph--truck, .asset-glyph--active.asset-glyph--tanker { box-shadow: inset 0 0 20px rgba(245,158,11,.06); }
.asset-glyph--active.asset-glyph--tanker .glyph-a { border-color: rgba(245,158,11,.45); }

.asset-glyph--logistics .glyph-a { left: 10px; right: 10px; bottom: 10px; height: 29px; border: 2px solid #555f68; background: linear-gradient(180deg, #343e47, #202831); clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0 100%); }
.asset-glyph--logistics .glyph-b { left: 25px; bottom: 10px; width: 14px; height: 20px; border: 2px solid #68737c; background: #111820; }
.asset-glyph--logistics .glyph-c { left: 16px; bottom: 20px; width: 6px; height: 6px; background: #59636b; box-shadow: 26px 0 #59636b; }
.asset-glyph--logistics .glyph-d { left: 30px; top: 6px; width: 3px; height: 17px; background: #6f777d; }
.asset-glyph--logistics .glyph-d::before, .asset-glyph--logistics .glyph-d::after { content: ""; position: absolute; left: 50%; border: 1px solid #697178; border-radius: 50%; transform: translateX(-50%); }
.asset-glyph--logistics .glyph-d::before { top: 0; width: 13px; height: 7px; border-bottom-color: transparent; }
.asset-glyph--logistics .glyph-d::after { top: -5px; width: 22px; height: 15px; border-bottom-color: transparent; }
.asset-glyph--active.asset-glyph--logistics .glyph-a { border-color: #8a6b3d; background: linear-gradient(180deg, #5b4b35, #292b2c); }
.asset-glyph--active.asset-glyph--logistics .glyph-c { background: var(--green); box-shadow: 26px 0 var(--green), 0 0 8px rgba(52,211,153,.5), 26px 0 8px rgba(52,211,153,.5); }
.asset-glyph--active.asset-glyph--logistics .glyph-d, .asset-glyph--active.asset-glyph--logistics .glyph-d::before, .asset-glyph--active.asset-glyph--logistics .glyph-d::after { border-color: var(--amber); filter: drop-shadow(0 0 4px rgba(245,158,11,.45)); }

.logistics-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, .55fr); gap: 20px; align-items: start; }
.logistics-main, .fleet-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.route-mode { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 18px 0; gap: 8px; }
.route-mode button { min-height: 48px; padding: 9px 12px; border: 1px solid #263547; background: #0b121a; color: #68788a; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.route-mode button span { font: 750 8px/1 var(--font-geist-mono), monospace; letter-spacing: .08em; }
.route-mode button small { color: #526174; font-size: 8px; }
.route-mode button.active { border-color: rgba(245,158,11,.48); background: linear-gradient(90deg, rgba(245,158,11,.1), rgba(245,158,11,.025)); color: var(--amber-2); box-shadow: inset 2px 0 var(--amber); }
.route-mode button:disabled { opacity: .42; cursor: not-allowed; }
.route-steps { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.route-steps label, .dispatch-bar label { display: flex; flex-direction: column; gap: 8px; }
.route-steps label > span, .dispatch-bar label > span { color: #657386; font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: .11em; }
.route-steps label > span i { color: var(--amber); margin-right: 7px; font-style: normal; }
select, input { width: 100%; height: 42px; border: 1px solid #2b3a4c; background: #0a1017; color: #c8d1da; padding: 0 12px; font-size: 10px; }
select:disabled, input:disabled { opacity: .35; }
.dispatch-bar { padding: 16px 18px; border-top: 1px solid var(--line-soft); background: #0b1119; display: grid; grid-template-columns: 160px 1fr 1fr minmax(190px, 1.3fr); gap: 13px; align-items: end; }
.dispatch-bar label > div { display: flex; }
.dispatch-bar input { border-right: 0; }
.dispatch-bar label button { width: 50px; border: 1px solid #2b3a4c; background: #172332; color: var(--amber-2); cursor: pointer; font: 700 7px/1 var(--font-geist-mono), monospace; }
.dispatch-summary { min-height: 42px; padding: 5px 11px; border-left: 1px solid #2c3948; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.dispatch-summary span { color: #4f5d6d; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .1em; }
.dispatch-summary strong { font: 650 10px/1 var(--font-geist-mono), monospace; }
.dispatch-button { height: 42px; border: 0; background: var(--amber); color: #171109; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 10px; font-weight: 850; }
.dispatch-button i { font-style: normal; }
.route-warning { margin: 0 18px 17px; padding: 10px; border: 1px solid rgba(245,158,11,.22); background: rgba(245,158,11,.045); color: #af9369; font-size: 9px; line-height: 1.4; }
.routes-panel { min-height: 300px; }
.empty-state { min-height: 225px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 30px; }
.empty-route { width: 150px; height: 25px; position: relative; margin-bottom: 25px; }
.empty-route::before { content: ""; position: absolute; left: 9px; right: 9px; top: 12px; border-top: 1px dashed #344254; }
.empty-route span { position: absolute; top: 5px; width: 15px; height: 15px; border: 1px solid #405065; transform: rotate(45deg); background: #111a25; }
.empty-route span:first-child { left: 0; }
.empty-route span:nth-child(2) { right: 0; }
.empty-route i { position: absolute; left: 48%; top: 8px; width: 18px; height: 9px; background: #49576a; opacity: .5; }
.empty-state strong { color: #8996a5; font-size: 12px; }
.empty-state p { max-width: 330px; color: #566476; font-size: 9px; line-height: 1.5; }
.active-routes { padding: 8px 17px 17px; }
.active-route { min-height: 93px; display: grid; grid-template-columns: 132px 1fr 78px; gap: 15px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.route-vehicle { display: flex; align-items: center; gap: 8px; }
.route-vehicle .asset-glyph { width: 62px; height: 62px; flex: 0 0 62px; transform: scale(.77); transform-origin: left center; margin: -7px -14px -7px 0; }
.route-vehicle > span { color: #9ba7b4; font-size: 9px; }
.route-path > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.route-path strong { font-size: 9px; }
.route-path i { color: var(--amber); font-style: normal; }
.route-path small { display: block; margin-top: 8px; color: #627083; font: 7px/1 var(--font-geist-mono), monospace; }
.auto-badge { padding: 3px 5px; border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.08); color: var(--green); font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .09em; }
.route-eta { display: flex; flex-direction: column; gap: 7px; text-align: right; }
.route-eta span { color: #4f5e70; font: 650 6px/1 var(--font-geist-mono), monospace; }
.route-eta strong { color: var(--green); font: 650 10px/1 var(--font-geist-mono), monospace; }

.logistics-center-card { border-color: rgba(245,158,11,.23); background: linear-gradient(145deg, rgba(245,158,11,.035), transparent 55%), var(--panel); }
.logistics-center-card--online { border-color: rgba(52,211,153,.28); background: linear-gradient(145deg, rgba(52,211,153,.05), transparent 56%), var(--panel); box-shadow: 0 0 28px rgba(52,211,153,.03); }
.logistics-center-card .panel-heading em { color: var(--amber-2); }
.logistics-center-card--online .panel-heading em { color: var(--green); }
.center-body { padding: 15px; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.center-body > .asset-glyph { width: 64px; height: 64px; }
.center-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.center-info > strong { color: #b4bec9; font-size: 10px; line-height: 1.25; }
.center-info p { margin: 0; color: #657487; font-size: 8px; line-height: 1.5; }
.center-specs { display: flex; flex-wrap: wrap; gap: 5px 13px; padding-top: 2px; }
.center-specs span, .center-progress > span { color: #576679; font: 650 6px/1.3 var(--font-geist-mono), monospace; letter-spacing: .07em; }
.center-specs b, .center-progress > span b { color: #a4afba; font-weight: 650; }
.center-build-button { min-height: 36px; padding: 0 10px; border: 1px solid rgba(245,158,11,.38); background: rgba(245,158,11,.1); color: var(--amber-2); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.center-build-button span { font-size: 8px; font-weight: 750; }
.center-build-button strong { font: 700 8px/1 var(--font-geist-mono), monospace; }
.center-build-button:disabled { opacity: .35; cursor: not-allowed; }
.center-progress .progress { margin: 3px 0 1px; }
.center-online > strong { color: var(--green); }
.auto-route-list { padding: 7px 13px 13px; display: flex; flex-direction: column; gap: 9px; }
.auto-template { padding: 11px; border: 1px solid #253447; background: #0a1118; transition: opacity .2s, border-color .2s; }
.auto-template.active { border-left: 2px solid var(--green); }
.auto-template.paused { opacity: .58; }
.auto-template-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.auto-template-top strong { color: var(--green); font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .09em; }
.auto-template.paused .auto-template-top strong { color: #7d8996; }
.auto-template-top small { margin-left: auto; color: #526174; font: 650 6px/1 var(--font-geist-mono), monospace; }
.auto-template-path { display: flex; align-items: center; gap: 7px; }
.auto-template-path b { color: #a7b2bd; font-size: 8px; }
.auto-template-path i { color: var(--amber); font-style: normal; }
.auto-template-meta { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; color: #607084; font-size: 7px; }
.auto-template-actions { display: flex; gap: 7px; margin-top: 10px; }
.auto-template-actions button { height: 29px; flex: 1; border: 1px solid #2c3c4e; background: #131d28; color: #8d9baa; cursor: pointer; font-size: 7px; }
.auto-template-actions .danger { flex: 0 0 32px; color: #bc7777; border-color: rgba(248,113,113,.22); background: rgba(248,113,113,.04); font-size: 14px; }

.vehicle-offer { min-height: 116px; padding: 14px; display: grid; grid-template-columns: 62px 1fr; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.vehicle-offer > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.vehicle-offer > div:nth-child(2) strong { font-size: 11px; }
.vehicle-offer > div:nth-child(2) span, .vehicle-offer > div:nth-child(2) small { margin-top: 6px; color: #687789; font-size: 8px; }
.vehicle-offer > button { grid-column: 1 / -1; height: 36px; padding: 0 11px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(245,158,11,.28); background: rgba(245,158,11,.06); color: var(--amber-2); cursor: pointer; }
.vehicle-offer > button span { font-size: 9px; }
.vehicle-offer > button strong { font: 650 9px/1 var(--font-geist-mono), monospace; }
.mini-empty { padding: 30px; text-align: center; color: #4e5d6e; font-size: 10px; }
.fleet-row { min-height: 59px; padding: 9px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.fleet-dot { width: 7px; height: 7px; border-radius: 50%; }
.fleet-dot.free { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,.45); }
.fleet-dot.busy { background: var(--amber); box-shadow: 0 0 8px rgba(245,158,11,.4); }
.fleet-dot.auto { background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,.48); }
.fleet-row > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.fleet-row strong { font-size: 9px; }
.fleet-row small { color: #5c6a7b; font-size: 7px; }
.fleet-origin { display: inline-block; margin-left: 6px; padding: 2px 4px; border: 1px solid #2a3746; color: #667587; font: 650 5px/1 var(--font-geist-mono), monospace; }
.fleet-origin--manufactured { border-color: rgba(52,211,153,.24); color: var(--green); background: rgba(52,211,153,.04); }
.fleet-row em { color: #778697; font: 700 6px/1 var(--font-geist-mono), monospace; font-style: normal; letter-spacing: .09em; }

.contract-clock { min-width: 250px; padding: 14px 17px; border-left: 2px solid var(--green); background: #0b1119; display: flex; flex-direction: column; }
.contract-clock > span { color: #596779; font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: .13em; }
.contract-clock > strong { margin: 8px 0 5px; color: var(--green); font: 700 15px/1 var(--font-geist-mono), monospace; }
.contract-clock > small { color: #7c8998; font: 8px/1 var(--font-geist-mono), monospace; }
.contract-summary { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.contract-summary > div { min-height: 96px; padding: 17px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line-soft); }
.contract-summary > div:last-child { border-right: 0; }
.contract-summary span { color: #586779; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .1em; }
.contract-summary strong { margin: 9px 0 6px; color: #c1cad3; font: 700 16px/1 var(--font-geist-mono), monospace; }
.contract-summary small { color: #657386; font-size: 7px; }
.contracts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.contract-card { min-width: 0; padding: 15px; display: flex; flex-direction: column; background: linear-gradient(150deg, #101923, #0b1119); transition: border-color .2s, opacity .2s; }
.contract-card:hover { border-color: #3a4a5d; }
.contract-card--completed { opacity: .62; border-color: rgba(52,211,153,.26); }
.contract-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid var(--line-soft); }
.contract-card__top > span { color: #536174; font: 750 7px/1 var(--font-geist-mono), monospace; letter-spacing: .12em; }
.contract-priority { padding: 4px 6px; border: 1px solid #2d3a48; color: #758394; font: 700 5px/1 var(--font-geist-mono), monospace; font-style: normal; letter-spacing: .09em; }
.contract-priority--priority { border-color: rgba(245,158,11,.24); color: var(--amber-2); background: rgba(245,158,11,.04); }
.contract-priority--premium { border-color: rgba(96,165,250,.28); color: #93c5fd; background: rgba(96,165,250,.05); }
.contract-client { min-height: 82px; padding: 13px 0; display: flex; flex-direction: column; gap: 6px; }
.contract-client strong { color: #c0c9d2; font-size: 12px; }
.contract-client span { color: #798798; font-size: 8px; }
.contract-client small { color: #4f5d6f; font: 6px/1 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .08em; }
.contract-order { min-height: 82px; padding: 10px; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; border: 1px solid rgba(148,163,184,.11); background: #0a1017; }
.contract-order .asset-glyph { width: 62px; height: 62px; flex: 0 0 62px; transform: scale(.9); transform-origin: left center; margin: -3px -6px -3px 0; }
.contract-order > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.contract-order span { color: #526174; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .1em; }
.contract-order strong { color: #b7c1ca; font-size: 9px; }
.contract-order small { color: #687789; font: 6px/1 var(--font-geist-mono), monospace; }
.contract-progress { padding: 13px 0; }
.contract-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.contract-progress > div:first-child span { color: #536174; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .08em; }
.contract-progress > div:first-child strong { color: #aeb9c3; font: 700 8px/1 var(--font-geist-mono), monospace; }
.contract-progress > small { display: block; margin-top: 7px; color: #536174; font-size: 6px; line-height: 1.35; }
.contract-payout { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.contract-payout span { color: #5b697a; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .08em; }
.contract-payout strong { color: var(--green); font: 750 12px/1 var(--font-geist-mono), monospace; }
.contract-action { min-height: 38px; margin-top: auto; padding: 0 11px; border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.08); color: var(--green); display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 8px; font-weight: 750; }
.contract-action i { font-style: normal; }
.contract-action:disabled { border-color: #293646; background: #111821; color: #586575; cursor: not-allowed; }
.contract-card--completed .contract-action:disabled { border-color: rgba(52,211,153,.2); color: var(--green); background: rgba(52,211,153,.04); }

.market-panel { overflow: hidden; }
.market-head, .market-row { display: grid; grid-template-columns: 1.4fr 1fr .9fr .7fr minmax(180px, .9fr); align-items: center; gap: 14px; }
.market-head { min-height: 45px; padding: 0 18px; color: #506073; border-bottom: 1px solid var(--line); background: #0b1119; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .13em; }
.market-row { min-height: 88px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.market-row:last-child { border-bottom: 0; }
.commodity { display: flex; align-items: center; gap: 12px; }
.commodity > i { width: 13px; height: 13px; transform: rotate(45deg); box-shadow: 0 0 10px rgba(255,255,255,.08); }
.commodity > div { display: flex; flex-direction: column; gap: 7px; }
.commodity strong { font-size: 11px; }
.commodity small { color: #536174; font: 650 6px/1 var(--font-geist-mono), monospace; letter-spacing: .09em; }
.market-row > strong { font: 650 11px/1 var(--font-geist-mono), monospace; }
.market-price { display: flex; flex-direction: column; gap: 6px; }
.market-price strong { color: var(--amber-2); font: 650 12px/1 var(--font-geist-mono), monospace; }
.market-price small { color: #586678; font-size: 7px; }
.price-up, .price-down { font: 700 9px/1 var(--font-geist-mono), monospace; }
.price-up { color: var(--green); }
.price-down { color: var(--red); }
.market-row > button { height: 36px; border: 1px solid #314154; background: #141f2b; color: #9aa7b4; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; font-size: 8px; }
.market-row > button:not(:disabled):hover { border-color: rgba(245,158,11,.45); color: var(--amber-2); }
.market-row > button i { font-style: normal; }

@keyframes linkFlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes pumpJack { from { transform: rotate(-20deg); } to { transform: rotate(-7deg); } }

@media (max-width: 1180px) {
  .hud__inner { flex-wrap: wrap; gap: 0; padding: 11px 0; }
  .brand-lockup { flex: 1; }
  .hud-metrics { order: 3; width: 100%; flex-basis: 100%; border-top: 1px solid var(--line-soft); border-left: 0; margin-top: 10px; }
  .hud-stat { min-height: 51px; flex: 1; padding: 0 14px; }
  .overview-grid, .logistics-layout { grid-template-columns: 1fr; }
  .overview-side { display: grid; grid-template-columns: .8fr 1.2fr; }
  .enterprise-grid { grid-template-columns: 1fr 1fr; }
  .enterprise-grid--single { grid-template-columns: 1fr; }
  .fleet-column { display: grid; grid-template-columns: 1fr 1fr; }
  .contracts-grid { grid-template-columns: 1fr 1fr; }
  .contract-summary { grid-template-columns: 1fr 1fr; }
  .contract-summary > div:nth-child(2) { border-right: 0; }
  .contract-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 820px) {
  .game-content, .hud__inner, .tabs { width: min(100% - 22px, 1480px); }
  .brand-lockup { min-width: 0; }
  .time-scale { display: none; }
  .hud-stat:nth-child(3) { display: none; }
  .tabs button { padding: 0 14px; }
  .guide-card { align-items: stretch; }
  .guide-index { width: 70px; flex-basis: 70px; }
  .guide-card > button { min-width: 110px; }
  .chain-board { padding: 24px 14px; gap: 16px; }
  .chain-board--converging { grid-template-columns: minmax(0, 1fr) minmax(170px, .38fr); gap: 16px 0; }
  .chain-board--converging .chain-lane { grid-template-columns: minmax(120px, 1fr) 36px minmax(120px, 1fr) 56px; }
  .chain-lane { grid-template-columns: 1fr 36px 1fr; row-gap: 12px; }
  .chain-lane > :nth-child(6), .chain-lane > :nth-child(7) { grid-row: 2; }
  .chain-lane > :nth-child(6) { grid-column: 2; }
  .chain-lane > :nth-child(7) { grid-column: 3; }
  .chain-lane > :nth-child(5) { grid-column: 1; grid-row: 2; opacity: .4; }
  .chain-node, .chain-market { min-height: 90px; height: auto; }
  .chain-link { min-width: 30px; }
  .view-intro { flex-direction: column; align-items: flex-start; }
  .intro-note, .market-clock, .contract-clock { max-width: none; width: 100%; }
  .enterprise-grid { grid-template-columns: 1fr; }
  .route-steps, .dispatch-bar { grid-template-columns: 1fr; }
  .dispatch-summary { min-height: 35px; }
  .fleet-column, .overview-side { display: flex; }
  .market-head { display: none; }
  .market-row { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
  .market-row > button { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hud__inner { gap: 10px; }
  .brand-lockup strong { font-size: 11px; }
  .brand-lockup small { font-size: 6px; }
  .brand-symbol { width: 31px; height: 31px; }
  .time-button { padding: 0 10px; }
  .time-button i { display: none; }
  .hud-stat { min-width: 0; }
  .hud-stat strong { font-size: 11px; }
  .hud-stat--cash strong { font-size: 14px; }
  .guide-card { flex-wrap: wrap; }
  .guide-index { width: 64px; flex-basis: 64px; }
  .guide-copy { padding: 12px; }
  .guide-card > button { width: 100%; min-height: 38px; border-left: 0; border-top: 1px solid rgba(245,158,11,.2); }
  .panel-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .panel-heading em { max-width: none; text-align: left; line-height: 1.4; white-space: normal; }
  .chain-board { display: block; min-height: 0; }
  .chain-board.chain-board--converging { display: flex; flex-direction: column; gap: 0; }
  .chain-board--converging .chain-lane { display: flex; }
  .chain-lane { display: flex; flex-direction: column; gap: 6px; padding-top: 28px; margin-bottom: 14px; }
  .chain-node, .chain-market { width: 100%; }
  .chain-link { position: relative; width: 100%; height: 34px; background: transparent; display: flex; align-items: center; justify-content: center; gap: 10px; }
  .chain-link::before { content: ""; width: 2px; height: 100%; background: #293543; position: absolute; left: 50%; transform: translateX(-50%); }
  .chain-link > i { position: static; transform: rotate(90deg); color: #6b7a8c; font-size: 15px; z-index: 1; background: var(--panel-bg, #0d141d); padding: 0 4px; }
  .chain-link > small { position: static; transform: none; color: #7a8798; z-index: 1; background: #0b1119; padding: 2px 8px; letter-spacing: .14em; }
  .chain-link.active > span { height: 100%; width: 2px; left: 50%; transform: translateX(-50%); }
  .factory-hub { width: 100%; min-height: 170px; padding: 44px 0 0; flex-direction: column; align-items: stretch; }
  .factory-hub::before { left: 50%; top: 0; bottom: auto; width: 2px; height: 36px; }
  .factory-hub::after { display: none; }
  .factory-hub > i { left: 50%; top: 25px; transform: translate(-50%, -50%) rotate(90deg); }
  .factory-hub__label { left: 13px; top: 45px; }
  .factory-hub__inputs { position: static; margin-top: 8px; padding: 0 3px; }
  .lease-block { grid-template-columns: 1fr; }
  .lease-block > button { grid-column: 1; }
  .workforce-heading { align-items: flex-start; flex-direction: column; }
  .worker-controls { flex-wrap: wrap; }
  .worker-controls .hire-team { flex: 1 1 130px; }
  .recipe-grid { grid-template-columns: 1fr; }
  .build-queue__list { grid-template-columns: 1fr; }
  .build-queue__item:nth-child(odd) { border-right: 0; }
  .contracts-grid, .contract-summary { grid-template-columns: 1fr; }
  .contract-summary > div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .contract-summary > div:last-child { border-bottom: 0; }
  .active-route { grid-template-columns: 1fr; }
  .route-eta { text-align: left; }
  .market-row { grid-template-columns: 1fr; }
  .market-row > button { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Guided onboarding hints */
.guide-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.guide-actions .guide-hint-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.guide-spotlight { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.guide-spotlight__ring {
  position: fixed;
  border: 2px solid #f5a524;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.22), 0 0 24px rgba(245, 165, 36, 0.4);
  animation: guide-pulse 1.6s ease-in-out infinite;
}
@keyframes guide-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.18), 0 0 18px rgba(245, 165, 36, 0.3); }
  50% { box-shadow: 0 0 0 7px rgba(245, 165, 36, 0.1), 0 0 30px rgba(245, 165, 36, 0.55); }
}
.guide-spotlight__tip {
  position: fixed;
  transform: translate(-50%, -100%);
  max-width: 260px;
  width: max-content;
  background: #10151c;
  border: 1px solid rgba(245, 165, 36, 0.55);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  pointer-events: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.guide-spotlight__tip--below { transform: translate(-50%, 0); }
.guide-spotlight__tip strong { color: #f5a524; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.guide-spotlight__tip span { color: #e6ecf3; font-size: 13px; line-height: 1.35; }
.guide-spotlight__tip small { color: #94a3b3; font-size: 11px; line-height: 1.35; }
.guide-spotlight__tip button {
  justify-self: start;
  margin-top: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b3;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.guide-spotlight__pointer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -11px;
  color: rgba(245, 165, 36, 0.75);
  font-size: 12px;
  line-height: 1;
}
.guide-spotlight__tip--below .guide-spotlight__pointer { bottom: auto; top: -11px; }
@media (max-width: 640px) {
  .guide-spotlight__tip { max-width: 220px; padding: 8px 10px; }
  .guide-spotlight__tip span { font-size: 12px; }
}

/* --- Mobile swipe navigation --- */
.swipe-nav { display: none; }
.swipe-hint { display: none; }

@media (max-width: 820px) {
  .swipe-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 8px; padding: 6px 8px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
    background: rgba(255,255,255,0.03);
  }
  .swipe-nav__arrow {
    min-width: 38px; height: 32px; line-height: 1;
    font-size: 20px; color: #e6c07b;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px; cursor: pointer;
  }
  .swipe-nav__arrow:disabled { opacity: 0.3; }
  .swipe-nav__dots { display: flex; gap: 7px; }
  .swipe-nav__dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,0.22); transition: background 0.2s, transform 0.2s;
  }
  .swipe-nav__dots span.is-active { background: #e6c07b; transform: scale(1.35); }
  .swipe-hint {
    display: block; margin: 0 0 14px;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.32); text-align: center;
  }
  .game-content--swipe-left { animation: demo-swipe-left 0.28s ease-out; }
  .game-content--swipe-right { animation: demo-swipe-right 0.28s ease-out; }
}

@keyframes demo-swipe-left {
  from { opacity: 0.35; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes demo-swipe-right {
  from { opacity: 0.35; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .game-content--swipe-left, .game-content--swipe-right { animation: none; }
}

/* --- Touch target sizing (coarse pointers / small screens) --- */
@media (pointer: coarse), (max-width: 820px) {
  .time-button { height: 44px; padding: 0 16px; }
  .reset-button { width: 44px; height: 44px; }
  .reset-button--armed { width: 64px; }
  .tabs button { min-height: 48px; }
  .swipe-nav__arrow { min-width: 44px; height: 44px; font-size: 22px; }
  .guide-actions button { min-height: 44px; padding: 0 16px; }
  .game-shell button,
  .game-shell a[role="button"],
  .game-shell select,
  .game-shell input { min-height: 44px; }
  .game-shell .panel button { padding-top: 10px; padding-bottom: 10px; }
}