.ship,.sectors-panel,.event-panel{border-top:1px solid var(--line);padding-top:18px;margin-top:26px}.ship h2,.sectors-panel h2,.event-panel h2{font:500 11px Unbounded,sans-serif;margin:0 0 10px}.ship-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ship-grid div{border:1px solid #303a3c;padding:8px;background:#101416}.ship-grid span{display:block;font-size:8px;color:var(--muted)}.ship-grid b{font:500 11px Unbounded,sans-serif;display:block;margin:5px 0}.ship-grid i{display:block;height:3px;background:linear-gradient(90deg,var(--blue) var(--value),#222 0)}.sectors-panel p,.event-panel p{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 11px}.sectors{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sector,.event-choices article{border:1px solid #333b3d;background:#101415;padding:10px;min-height:74px;cursor:pointer}.sector:hover,.event-choices article:hover{border-color:var(--blue);background:#141b1d}.sector.unknown{opacity:.38;cursor:not-allowed}.sector.here{border-color:var(--sand);cursor:default}.sector b,.event-choices b{display:block;font:500 9px Unbounded,sans-serif}.sector small,.event-choices small{display:block;font-size:8px;line-height:1.45;color:var(--muted);margin-top:6px}.sector i{display:block;font-size:8px;font-style:normal;color:var(--sand);margin-top:7px}.event-panel{border-left:2px solid var(--danger);padding-left:12px}.event-choices{display:grid;gap:7px}.event-choices article{min-height:0}.event-choices b{color:#e8e4d6}@media(max-width:760px){.ship-grid,.sectors{grid-template-columns:1fr}.ship-grid{gap:5px}}

.store.has-production {
  flex-wrap: wrap;
  row-gap: 8px;
}

.store-production {
  flex: 0 0 100%;
  min-width: 0;
}

.store-production > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  color: #9fb7b6;
  font-size: 9px;
}

.store-production em {
  color: var(--production-color);
  font-style: normal;
}

.store-production > i {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border: 1px solid #2b3c3e;
  background: #080c0d;
}

.store-production > i::after {
  position: absolute;
  inset: 0 auto 0 0;
  /* Driven entirely by JS (updateProductionMeters in app.js), one write per
     animation frame — no CSS animation here, so nothing resets/restarts
     when the surrounding markup gets rebuilt by renderStorage(). */
  width: var(--production-progress, 0%);
  content: '';
  background: linear-gradient(90deg, color-mix(in srgb, var(--production-color) 55%, transparent), var(--production-color));
  box-shadow: 0 0 10px color-mix(in srgb, var(--production-color) 55%, transparent);
}

.store-production.paused > i::after {
  opacity: .45;
}

@media(max-width:760px) {
  .store-production > div {
    font-size: 8px;
  }
}