/* style.css — dark industrial 3-column layout for the RBMK simulator */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  background: #0d0f12;
  color: #cfd8dc;
  overflow: hidden;
}

#app {
  display: flex;
  height: 100vh;
  gap: 0;
}

.panel {
  background: #161a1f;
  border-right: 1px solid #262b31;
  padding: 12px;
  overflow-y: auto;
  flex-shrink: 0;
}
.panel.left { width: 300px; }
.panel.right { width: 320px; border-right: none; border-left: 1px solid #262b31; }

.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0c0f;
  padding: 8px;
  min-width: 0;
}

.title { font-size: 20px; margin: 0 0 10px; color: #e8f0f3; letter-spacing: 1px; }
.title .sub { font-size: 13px; color: #7fd06f; font-weight: normal; }

.section { margin-bottom: 14px; border: 1px solid #23282e; background: #12151a; padding: 8px; border-radius: 4px; }
.section-title { font-size: 12px; font-weight: bold; color: #9fb6bd; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }

.readout { font-size: 12px; line-height: 1.6; color: #b9c6cc; font-family: "Consolas", monospace; }
.readout .bad { color: #ff4b4b; font-weight: bold; }

#fluxGraph { display: block; width: 100%; border: 1px solid #1d2a1f; background: #0d2010; margin-bottom: 4px; }

.color-row { display: flex; gap: 6px; margin-bottom: 8px; }
.color-btn { width: 28px; height: 28px; border: 2px solid #000; border-radius: 50%; cursor: pointer; }
.color-btn:hover { filter: brightness(1.2); }

.row { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.row label { font-size: 12px; color: #9fb6bd; }
.row input[type=number] { width: 70px; background: #0d1013; color: #e8f0f3; border: 1px solid #2a3138; padding: 3px; border-radius: 3px; }
.check { font-size: 12px; color: #9fb6bd; }

.btn { background: #232a31; color: #d6e0e5; border: 1px solid #39434c; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.btn:hover { background: #2d3841; }
.btn.primary { background: #1c6b3a; border-color: #2f9c54; color: #fff; }
.btn.primary:hover { background: #228146; }

.az5 {
  display: block; width: 100%; margin: 6px 0 2px;
  background: radial-gradient(circle at 30% 30%, #e05c50, #b0212a);
  color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 2px;
  border: 2px solid #7a1414; border-radius: 8px; padding: 12px;
  cursor: pointer; text-shadow: 0 1px 2px #500;
}
.az5:hover { filter: brightness(1.12); }
.az5-status { font-size: 12px; color: #ffca66; min-height: 16px; }
.melt-warn { color: #ff4b4b; font-weight: bold; font-size: 14px; margin: 4px 0; padding: 6px; background: rgba(120,0,0,0.3); border: 1px solid #802020; border-radius: 4px; }
.controls { justify-content: space-between; }

.grid-wrap { border: 2px solid #2a3138; background: #12151a; box-shadow: 0 0 30px rgba(0,0,0,0.6); }
#grid { display: block; image-rendering: pixelated; }

.toolbar { width: 100%; max-width: 470px; text-align: center; font-size: 12px; color: #7d8b92; padding: 4px; }
.toolbar.bottom { border-top: 1px solid #1d2227; color: #9fb6bd; font-family: monospace; }

.palette { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.palette-item {
  background: #20262c; color: #cfd8dc; border: 1px solid #35404a;
  padding: 6px 5px; font-size: 11px; text-align: left; cursor: pointer; border-radius: 3px;
}
.palette-item:hover { background: #2b343c; }
.palette-item.active { background: #1c5a80; border-color: #3aa0d0; color: #fff; }

.inspector { font-size: 12px; }
.inspector h3 { margin: 0 0 6px; font-size: 13px; color: #e8f0f3; }
.inspector .hint { color: #7d8b92; }
.inspector-body { line-height: 1.6; color: #b9c6cc; }
.inspector-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.inspector-row span { min-width: 64px; color: #9fb6bd; font-size: 11px; }
.inspector select { flex: 1; background: #0d1013; color: #e8f0f3; border: 1px solid #2a3138; padding: 3px; border-radius: 3px; font-size: 11px; }
.inspector input[type=number] { width: 70px; background: #0d1013; color: #e8f0f3; border: 1px solid #2a3138; padding: 3px; border-radius: 3px; font-size: 11px; }
.inspector button { background: #232a31; color: #d6e0e5; border: 1px solid #39434c; padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; }

.dials { max-height: 40vh; overflow-y: auto; }
.dial-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0; }
.dial-row label { font-size: 11px; color: #9fb6bd; }
.dial-row input[type=number] { width: 76px; background: #0d1013; color: #e8f0f3; border: 1px solid #2a3138; padding: 3px; border-radius: 3px; font-size: 11px; }
.dial-row input[type=checkbox] { transform: scale(1.2); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #12151a; }
::-webkit-scrollbar-thumb { background: #333b42; border-radius: 4px; }

/* ---- new: tabbed inspector, fuel card, export/import, AI ---- */
.full { width: 100% !important; }
.inspector-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.inspector-tab {
  background: #20262c; color: #cfd8dc; border: 1px solid #35404a; padding: 4px 8px;
  font-size: 11px; cursor: pointer; border-radius: 4px 4px 0 0;
}
.inspector-tab.active { background: #1c5a80; border-color: #3aa0d0; color: #fff; font-weight: bold; }
.inspector-panel { border-top: 2px solid #2a5a7a; padding-top: 8px; }
.panel-head { font-weight: bold; color: #7fd06f; margin-bottom: 6px; font-size: 12px; }
.inspector-line { font-size: 11px; color: #b9c6cc; line-height: 1.7; border-bottom: 1px dashed #23282e; padding: 2px 0; }
.inspector-line .dim { color: #74838b; }
.mini-btn { background: #232a31; color: #d6e0e5; border: 1px solid #39434c; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; }
.mini-btn:hover { background: #2d3841; }
.dim { color: #74838b; font-size: 11px; }
.hl { color: #f5c542; }
.rod-detail { font-size: 11px; line-height: 1.7; color: #c6d0d6; background: #0f1216; border: 1px solid #262b31; padding: 8px; border-radius: 4px; margin: 6px 0; }
.rod-detail .dim { font-size: 10px; }
.rod-detail b { color: #7fd06f; font-size: 12px; }
#fuelRodSel.full { background: #0d1013; color: #e8f0f3; border: 1px solid #2a3138; padding: 5px; border-radius: 3px; font-size: 12px; width: 100%; }
.text { display: block; width: 100%; background: #0d1013; color: #e8f0f3; border: 1px solid #2a3138; padding: 5px; border-radius: 3px; font-size: 11px; margin: 3px 0; }
.codebox { display: block; width: 100%; height: 62px; resize: vertical; background: #0a0c0f; color: #9fd6a0; border: 1px solid #2a3138; border-radius: 3px; font-family: monospace; font-size: 10px; padding: 4px; margin: 3px 0; }
.divider { margin: 6px 0 2px; font-size: 11px; color: #9fb6bd; border-top: 1px solid #23282e; padding-top: 6px; }
.io-status { font-size: 11px; color: #9fb6bd; margin-top: 4px; min-height: 14px; }
.io-status.ok { color: #7fd06f; }
.io-status.warn { color: #f5c542; }
.io-status.err { color: #ff6b6b; }
.btn.ignore { display: block; width: 100%; background: #7a1414; border: 2px solid #b02a2a; color: #fff; margin: 6px 0; padding: 8px; font-weight: bold; }
.btn.ignore:hover { background: #9a1c1c; }

/* ---- digamma meltdown easter egg ---- */
#fxLayer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; pointer-events: none; display: none; }
#shockwave { position: absolute; left: 50vw; top: 50vh; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: radial-gradient(circle, rgba(255,70,40,0.98), rgba(255,0,0,0.55) 55%, rgba(255,0,0,0) 72%); box-shadow: 0 0 40px 24px rgba(255,0,0,0.75); opacity: 0; }
#shockwave.go { animation: rbmk_shock 1.6s ease-out forwards; }
@keyframes rbmk_shock { 0% { transform: scale(0.25); opacity: 1; } 100% { transform: scale(32); opacity: 0; } }
#glassBreak { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 8%, rgba(210,225,255,0.10) 38%, rgba(170,200,255,0.24) 70%, rgba(200,220,255,0.5) 100%); opacity: 0; transition: opacity 0.7s; }
#glassBreak.show { opacity: 1; }
#glassBreak svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }