:root {
  --bg: #0d1420;
  --panel: #141d2e;
  --panel2: #1b2739;
  --text: #e8eef7;
  --dim: #8fa1b8;
  --accent: #ffc233;
  --green: #4ade80;
  --red: #f87171;
  --blue: #60a5fa;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}

/* ---------- HUD ---------- */
#hud {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 2px solid #000;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.hud-left h1 { font-size: 1.3rem; line-height: 1; }
.tagline { font-size: 0.7rem; color: var(--dim); }
.hud-stats { display: flex; gap: 14px; flex-wrap: wrap; flex: 1; }
.stat { display: flex; flex-direction: column; min-width: 64px; }
.stat-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.stat span:last-child { font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
#stat-rel.bad, #stat-money.bad { color: var(--red); }
.hud-controls { display: flex; gap: 6px; }
.hud-controls button {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid #2c3d57;
  border-radius: 8px;
  font-size: 1rem;
  width: 40px; height: 40px;
  cursor: pointer;
}
.hud-controls button:hover { background: #24344d; }

/* ---------- Canvases ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 12px; }
#city { width: 100%; height: auto; display: block; border-radius: 10px 10px 0 0; }
.chart-wrap { position: relative; background: #0a0f18; border-radius: 0 0 10px 10px; padding-bottom: 4px; }
#chart { width: 100%; height: auto; display: block; }
.chart-legend {
  position: absolute; top: 6px; left: 10px;
  display: flex; gap: 14px; font-size: 0.72rem; color: var(--dim);
}
.lg-demand { color: var(--accent); }
.lg-supply { color: var(--green); }
.lg-deficit { color: var(--red); }

/* ---------- Cash-flow bar ---------- */
#econ {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--panel);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.econ-item { display: flex; gap: 8px; align-items: baseline; }
.econ-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.econ-val { font-size: 0.95rem; font-weight: 600; color: var(--green); }
.econ-val.red { color: var(--red); }
.econ-val.bad { color: var(--red); }
.econ-today { margin-left: auto; }

/* ---------- Panels ---------- */
.panel { margin-top: 14px; background: var(--panel); border-radius: 10px; padding: 12px 14px; }
.panel h2 { font-size: 0.95rem; margin-bottom: 10px; color: var(--accent); }
.panel .hint { font-size: 0.7rem; color: var(--dim); font-weight: normal; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

/* plant cards */
.card {
  background: var(--panel2);
  border: 1px solid #2c3d57;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card .card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card .card-name { font-weight: 600; font-size: 0.88rem; }
.card .card-out { font-size: 0.8rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.card .bar { height: 8px; background: #0a0f18; border-radius: 4px; overflow: hidden; }
.card .bar-fill { height: 100%; width: 0%; background: var(--green); transition: width 0.2s linear; }
.card .bar-fill.charge { background: var(--blue); }
.card input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.card .toggle {
  background: #0a0f18; color: var(--text);
  border: 1px solid #2c3d57; border-radius: 8px;
  padding: 6px; font-size: 0.85rem; cursor: pointer;
}
.card .toggle.on { background: var(--green); color: #06220f; font-weight: 700; border-color: var(--green); }
.card .note { font-size: 0.68rem; color: var(--dim); }

/* build buttons */
.build-btn {
  background: var(--panel2);
  border: 1px solid #2c3d57;
  border-radius: 10px;
  padding: 10px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.build-btn:hover:not(:disabled) { background: #24344d; border-color: var(--accent); }
.build-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.build-btn .b-name { font-weight: 600; font-size: 0.88rem; }
.build-btn .b-cost { color: var(--accent); font-size: 0.8rem; }
.build-btn .b-run { color: var(--dim); font-weight: normal; font-size: 0.68rem; margin-left: 6px; }
.build-btn .b-desc { color: var(--dim); font-size: 0.68rem; }
.card .note.fuel { color: #fb923c; }

/* ---------- Toasts ---------- */
#toasts {
  position: fixed; top: 70px; right: 14px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 50; pointer-events: none;
}
.toast {
  background: var(--panel2);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  max-width: 300px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  animation: toast-in 0.25s ease-out, toast-out 0.4s ease-in 4.6s forwards;
}
.toast.bad { border-left-color: var(--red); }
.toast.good { border-left-color: var(--green); }
@keyframes toast-in { from { transform: translateX(30px); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(30px); opacity: 0; } }

/* ---------- Modals ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(5, 8, 14, 0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal.hidden { display: none; }
.modal-box {
  background: var(--panel);
  border: 1px solid #2c3d57;
  border-radius: 14px;
  padding: 26px;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box h2 { margin-bottom: 12px; }
.modal-box p.big { margin-bottom: 12px; line-height: 1.5; }
.modal-box ul { margin: 0 0 16px 20px; line-height: 1.7; font-size: 0.92rem; }
/* scenario picker */
#scenario-buttons { display: flex; flex-direction: column; gap: 8px; }
.scn-btn {
  background: var(--panel2);
  border: 1px solid #2c3d57;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.scn-btn:hover { background: #24344d; border-color: var(--accent); }
.scn-btn .b-name { font-weight: 700; font-size: 0.95rem; }
.scn-btn .b-cost { color: var(--accent); font-size: 0.8rem; }
.scn-btn .b-desc { color: var(--dim); font-size: 0.75rem; }

button.primary {
  background: var(--accent); color: #201500;
  font-weight: 700; font-size: 1rem;
  border: none; border-radius: 10px;
  padding: 12px 22px; cursor: pointer;
  width: 100%;
}
button.primary:hover { filter: brightness(1.1); }

/* report card */
#report { margin-bottom: 16px; }
#report .grade {
  font-size: 4rem; font-weight: 800; text-align: center;
  margin: 6px 0 14px;
}
#report .grade.A { color: var(--green); }
#report .grade.B { color: #a3e635; }
#report .grade.C { color: var(--accent); }
#report .grade.D { color: #fb923c; }
#report .grade.F { color: var(--red); }
#report table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
#report td { padding: 6px 4px; border-bottom: 1px solid #2c3d57; }
#report td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }