#welcome-panel { max-width: 1120px; }
.ship-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.ship-heading h1 { margin-bottom: 9px; font-size: clamp(22px, 3vw, 34px); }
.ship-heading p { margin: 0; color: var(--muted); font-size: 17px; }
.ship-heading > div:last-child { display: grid; gap: 5px; text-align: right; }
.ship-heading > div:last-child strong { color: var(--primary); font: 600 22px/1.2 var(--font-display); }
.ship-heading > div:last-child span { color: var(--muted); font: 14px/1 var(--font-mono); }
.ship-rename { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; margin-top: 15px; }
.ship-rename input { font-size: 16px; }
.ship-rename .ship-action { margin-top: 0; }
.ship-rename em { display: block; margin-top: 4px; color: var(--highlight); font: normal 12px/1 var(--font-mono); text-transform: lowercase; }
.ship-vitals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.ship-vitals > span { padding: 17px; background: rgba(41, 43, 42, .6); color: var(--muted); font-size: 14px; }
.ship-vitals strong { display: block; margin-top: 7px; color: var(--primary); font: 15px/1 var(--font-mono); }
.ship-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 34px; }
.ship-slot { min-height: 155px; border-top: 1px solid var(--line); padding: 20px; background: rgba(41, 43, 42, .6); }
.ship-slot small, .ship-slot span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ship-slot strong { display: block; margin: 13px 0 9px; color: #eff8f0; font: 600 22px/1.25 var(--font-display); }
.ship-slot.is-empty { border-top-color: rgba(244, 197, 95, .45); }
.ship-action { margin-top: 15px; padding: 10px 16px; color: var(--primary); font: 12px/1.3 var(--font-mono); text-transform: uppercase; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.section-heading h2 { margin: 0; color: #eff8f0; font: 600 24px/1.2 var(--font-display); }
.section-heading > span { max-width: 520px; color: var(--muted); font: 13px/1.5 var(--font-mono); text-align: right; }
.cargo-section { margin-bottom: 36px; }
.cargo-grid { display: grid; position: relative; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(62px, 1fr)); gap: 5px; min-height: 275px; border: 1px solid rgba(129, 210, 138, .38); padding: 6px; background: rgba(14, 18, 15, .72); }
.cargo-x-0 { grid-column-start: 1; }
.cargo-x-1 { grid-column-start: 2; }
.cargo-x-2 { grid-column-start: 3; }
.cargo-x-3 { grid-column-start: 4; }
.cargo-x-4 { grid-column-start: 5; }
.cargo-x-5 { grid-column-start: 6; }
.cargo-x-6 { grid-column-start: 7; }
.cargo-x-7 { grid-column-start: 8; }
.cargo-y-0 { grid-row-start: 1; }
.cargo-y-1 { grid-row-start: 2; }
.cargo-y-2 { grid-row-start: 3; }
.cargo-y-3 { grid-row-start: 4; }
.cargo-w-1 { grid-column-end: span 1; }
.cargo-w-2 { grid-column-end: span 2; }
.cargo-w-3 { grid-column-end: span 3; }
.cargo-h-1 { grid-row-end: span 1; }
.cargo-h-2 { grid-row-end: span 2; }
.cargo-h-3 { grid-row-end: span 3; }
.cargo-cell { border: 1px solid rgba(129, 210, 138, .25); background: rgba(129, 210, 138, .055); box-shadow: inset 0 0 12px rgba(129, 210, 138, .025); }
.is-dragging .cargo-cell { border-color: rgba(244, 197, 95, .48); background: rgba(244, 197, 95, .055); }
.is-dragging .ship-slot { border-color: var(--highlight); }
.is-dragging .cargo-cell.is-drop-target { border-color: var(--highlight); background: rgba(244, 197, 95, .3); box-shadow: inset 0 0 18px rgba(244, 197, 95, .2), 0 0 9px rgba(244, 197, 95, .38); }
.is-dragging .ship-slot.is-drop-target { background: rgba(244, 197, 95, .12); box-shadow: inset 0 0 24px rgba(244, 197, 95, .12); }
.cargo-item { z-index: 1; display: flex; overflow: visible; position: relative; flex-direction: column; justify-content: center; border: 1px solid var(--primary); padding: 8px; background: rgba(38, 69, 43, .94); color: var(--text); cursor: grab; }
.cargo-item:active { cursor: grabbing; }
.cargo-item.is-part { border-color: var(--secondary); background: rgba(35, 61, 65, .96); }
.part-context-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(10, 12, 10, .38); }
.part-context-menu { display: grid; width: min(300px, 100%); gap: 8px; border: 1px solid var(--highlight); padding: 16px; background: #161a17; box-shadow: 0 14px 38px rgba(0, 0, 0, .72), 0 0 18px rgba(244, 197, 95, .12); }
.part-context-menu > strong { margin-bottom: 3px; color: var(--text); font: 600 13px/1.25 var(--font-display); }
.part-context-action { width: 100%; padding: 9px 13px; text-align: left; }
.part-context-action span, .part-context-action em { display: block; }
.part-context-action em { margin-top: 4px; color: var(--highlight); font: normal 10px/1 var(--font-mono); }
.part-context-action.is-danger { border-color: var(--danger); color: var(--danger); }
.cargo-item strong { overflow: hidden; font: 600 13px/1.25 var(--font-display); text-overflow: ellipsis; }
.cargo-item > span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.cargo-install { align-self: flex-start; margin-top: 7px; border: 0; border-bottom: 1px solid var(--highlight); padding: 2px 0; background: transparent; color: var(--highlight); font: 8px/1 var(--font-mono); cursor: pointer; text-transform: uppercase; }
.cargo-install:disabled { cursor: default; opacity: .45; }
.cargo-info { position: absolute; top: 5px; right: 5px; margin: 0; }
.cargo-info > button { width: 20px; height: 20px; border: 1px solid var(--highlight); border-radius: 50%; background: var(--surface-deep); color: var(--highlight); font: 12px/1 var(--font-mono); cursor: help; }
.cargo-tooltip { display: none; position: absolute; z-index: 8; top: 25px; right: 0; width: 260px; border-left: 2px solid var(--highlight); padding: 13px; background: #161a17; box-shadow: 0 12px 35px rgba(0, 0, 0, .65); }
.cargo-tooltip strong, .cargo-tooltip span, .cargo-tooltip em { display: block; overflow: visible; color: var(--text); font-size: 11px; font-style: normal; line-height: 1.45; white-space: normal; }
.cargo-tooltip span { margin-top: 7px; color: var(--muted); }
.cargo-tooltip em { margin-top: 8px; color: var(--highlight); }
.cargo-info:hover .cargo-tooltip, .cargo-info:focus-within .cargo-tooltip { display: block; }
.parts-store { margin-bottom: 20px; }
.parts-offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.part-offer { border-top: 1px solid var(--line); padding: 17px; background: rgba(41, 43, 42, .55); }
.part-offer small, .part-offer span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.part-offer strong { display: block; margin: 10px 0 7px; color: #eff8f0; font: 600 19px/1.25 var(--font-display); }
.part-offer p { margin: 0 0 8px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.part-offer .ship-action span { color: inherit; font: inherit; }
.part-offer .ship-action em { display: block; margin-top: 5px; color: var(--highlight); font: normal 11px/1 var(--font-mono); text-transform: lowercase; }
.ship-status { min-height: 18px; margin: 14px 0; color: var(--primary); font: 13px/1.4 var(--font-mono); }
.ship-status.is-error { color: var(--danger); }
.ship-recommendation { margin-top: 20px; }

@media (max-width: 900px) {
  .ship-vitals { grid-template-columns: repeat(2, 1fr); }
  .cargo-grid { grid-template-rows: repeat(4, minmax(43px, 1fr)); min-height: 190px; }
}

@media (max-width: 650px) {
  .ship-heading { flex-direction: column; }
  .ship-heading > div:last-child { text-align: left; }
  .ship-slots, .parts-offers { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .cargo-grid { gap: 2px; min-height: 160px; padding: 2px; }
  .cargo-item { padding: 4px; }
  .cargo-item span { display: none; }
  .part-context-menu span, .part-context-menu em { display: block; }
}