:root {
  --bg: #070b0f !important;
  --panel: #0c1217 !important;
  --panel2: #101820 !important;
  --panel3: #141e26 !important;
  --line: #22313a !important;
  --line2: #304752 !important;
  --cyan: #42dfcf !important;
  --cyan2: #7ce9df !important;
  --text: #e6edf0 !important;
  --muted: #8e9ca4 !important;
  --danger: #ff727d !important;
  --warn: #e8bd5a !important;
  --ok: #58d69c !important;
  --shadow: rgba(0,0,0,.3) !important;
}

* { scrollbar-width: thin !important; scrollbar-color: #35464e transparent !important; }
*::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
*::-webkit-scrollbar-track { background: transparent !important; border: 0 !important; }
*::-webkit-scrollbar-thumb { background: #35464e !important; border: 2px solid #0b1116 !important; border-radius: 999px !important; box-shadow: none !important; }

html, body {
  background: #070b0f !important;
  color: var(--text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

button, input, select, textarea { font: inherit !important; }
.app {
  height: 100% !important;
  gap: 14px !important;
  padding: 24px clamp(18px, 2.3vw, 38px) 28px !important;
  background: radial-gradient(circle at 76% -10%, rgba(66,223,207,.055), transparent 34%), #070b0f !important;
}

.topbar {
  grid-template-columns: minmax(270px,.8fr) minmax(520px,1.65fr) auto !important;
  gap: 24px !important;
  align-items: end !important;
  padding: 0 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.brand small {
  color: var(--cyan) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
}
.brand h1 { margin: 7px 0 0 !important; font-size: clamp(27px,2.1vw,36px) !important; letter-spacing: -.035em !important; line-height: 1 !important; }
.brand p { margin-top: 8px !important; color: #9aa7ae !important; font-size: 13px !important; line-height: 1.45 !important; }
.scene-fields { gap: 12px !important; }
.field label, .stat small, .table-note, .muted {
  color: #788991 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .105em !important;
}
.field input, .field select, .field textarea,
td input, td select, td textarea,
.manifest-fields input, .manifest-fields select {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #0a1015 !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
}
.field input:focus, .field select:focus, .field textarea:focus,
td input:focus, td select:focus, td textarea:focus { border-color: rgba(66,223,207,.62) !important; box-shadow: 0 0 0 3px rgba(66,223,207,.08) !important; }

.actions { gap: 9px !important; }
.btn, .tab {
  min-height: 40px !important;
  padding: 9px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #0d151b !important;
  color: #c9d4d9 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.btn:hover, .tab:hover { border-color: #49616b !important; color: #fff !important; background: #111c23 !important; }
.btn.primary, .tab.active {
  border-color: rgba(66,223,207,.42) !important;
  background: rgba(66,223,207,.105) !important;
  color: #6eebe0 !important;
}
.btn.danger { border-color: rgba(255,114,125,.35) !important; color: #ff9ba3 !important; background: rgba(255,114,125,.06) !important; }
.btn.small { min-height: 32px !important; padding: 6px 10px !important; font-size: 10px !important; }

.tabs {
  gap: 5px !important;
  padding: 5px !important;
  width: max-content !important;
  max-width: 100% !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: #0a1015 !important;
}
.tab { min-width: 155px !important; border-color: transparent !important; background: transparent !important; }
.tab.active { border-color: rgba(66,223,207,.25) !important; }
.content { padding: 0 4px 0 0 !important; }

.panel, .contact-summary, .manifest-item, .history-item, .repair-item, .section-card {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #0c1217 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
}
.panel { padding: 20px !important; margin-bottom: 14px !important; }
.panel-head { margin-bottom: 16px !important; align-items: center !important; }
.panel h2 { font-size: 21px !important; letter-spacing: -.02em !important; }
.panel h3 { font-size: 17px !important; letter-spacing: -.015em !important; }
.panel-head p { margin-top: 6px !important; color: #8d9aa1 !important; font-size: 13px !important; line-height: 1.5 !important; }

.stat-grid, .resource-strip { gap: 10px !important; }
.stat {
  min-height: 90px !important;
  padding: 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: #101820 !important;
}
.stat strong { margin-top: 8px !important; color: #f2f6f7 !important; font-size: 20px !important; letter-spacing: -.025em !important; }
.bar { height: 7px !important; margin-top: 10px !important; overflow: hidden !important; border: 0 !important; border-radius: 999px !important; background: #1a252b !important; }
.bar > span { border-radius: inherit !important; background: linear-gradient(90deg,#2fbeb2,#65e7da) !important; }
.pill {
  padding: 6px 9px !important;
  border-color: var(--line) !important;
  border-radius: 999px !important;
  background: #101820 !important;
  color: #aebbc1 !important;
  font: 700 10px/1.2 Inter, sans-serif !important;
}
.empty { padding: 42px 24px !important; border: 1px dashed #2b3b43 !important; border-radius: 10px !important; background: #0a1015 !important; color: #87969d !important; font-size: 13px !important; }

.grid2, .grid3, .section-cards { gap: 14px !important; }
.section-card { padding: 16px !important; }
.section-card h4 { margin-bottom: 12px !important; color: #e4ebee !important; font-size: 14px !important; }
.check { gap: 7px !important; color: #aebbc1 !important; font-size: 12px !important; }
.check input { accent-color: var(--cyan) !important; }

.table-wrap { overflow: auto !important; border: 1px solid var(--line) !important; border-radius: 10px !important; }
table { background: #0a1015 !important; }
th, td { padding: 11px 12px !important; border-bottom: 1px solid #1c2930 !important; }
th { background: #111a21 !important; color: #80929a !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .08em !important; }
td { color: #c9d2d6 !important; font-size: 12px !important; }

.sensor-console-head {
  margin-bottom: 14px !important;
  padding: 0 0 17px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
.sensor-console-head h2 { font-size: 22px !important; letter-spacing: -.02em !important; }
.sensor-console-head p { margin-top: 5px !important; color: #8d9aa1 !important; font-size: 13px !important; }
.sensor-status-strip { gap: 7px !important; }
.sensor-status-chip {
  padding: 7px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: #0f171d !important;
  color: #8d9ca3 !important;
  font: 700 10px/1.2 Inter,sans-serif !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
.sensor-layout { grid-template-columns: minmax(560px,1.4fr) minmax(340px,.6fr) !important; gap: 14px !important; }
.radar-panel { min-height: 650px !important; padding: 0 !important; border-color: var(--line) !important; box-shadow: none !important; overflow: hidden !important; }
.radar-toolbar { gap: 10px !important; padding: 14px !important; border-bottom: 1px solid var(--line) !important; background: #101820 !important; box-shadow: none !important; }
.radar-stage { height: 575px !important; background: radial-gradient(circle at 50% 48%,#112720,#07100f 65%,#050909) !important; }
.radar-stage::before { opacity: .35 !important; }
.radar-hud, .radar-drag-note {
  border: 1px solid rgba(94,143,126,.3) !important;
  border-radius: 7px !important;
  background: rgba(6,15,13,.82) !important;
  color: #87a99c !important;
  font: 700 9px/1.35 Inter,sans-serif !important;
  box-shadow: none !important;
}
.contact-summary { padding: 15px !important; }
.contact-summary h4 { color: #e6edef !important; font-size: 14px !important; }
.contact-summary .meta { gap: 7px !important; color: #94a3aa !important; font: 11px/1.4 Inter,sans-serif !important; }

.cargo-layout { grid-template-columns: minmax(370px,.82fr) minmax(520px,1.18fr) !important; gap: 14px !important; }
.manifest-list, .history-list, .repair-list { gap: 9px !important; }
.manifest-item, .history-item, .repair-item { padding: 14px !important; box-shadow: none !important; }
.manifest-fields { gap: 9px !important; }
.transfer-preview {
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(66,223,207,.22) !important;
  border-radius: 10px !important;
  background: rgba(66,223,207,.055) !important;
}

.player-overlay { background: #050809 !important; font-family: inherit !important; }
.player-overlay-head { padding: 13px 18px !important; border-bottom: 1px solid #263831 !important; background: #0b1210 !important; }
.player-contact-list { padding: 14px !important; border-left: 1px solid #263831 !important; background: #080d0b !important; }
.player-contact-card { margin-bottom: 9px !important; padding: 13px !important; border: 1px solid #293b34 !important; border-radius: 9px !important; background: #0d1713 !important; color: #c8d5cf !important; }
.player-contact-card span { font: 11px/1.4 Inter,sans-serif !important; }
.toast { right: 22px !important; bottom: 22px !important; padding: 11px 15px !important; border: 1px solid rgba(66,223,207,.42) !important; border-radius: 9px !important; background: #101a1f !important; color: #dcf4f1 !important; box-shadow: 0 14px 32px rgba(0,0,0,.3) !important; }

@media (max-width:1180px) {
  .topbar { grid-template-columns: 1fr !important; }
  .actions { justify-content: flex-start !important; }
  .sensor-layout, .cargo-layout { grid-template-columns: 1fr !important; }
  .radar-side { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:720px) {
  .app { padding: 14px 10px 18px !important; }
  .topbar { gap: 16px !important; }
  .scene-fields, .grid2, .field-grid, .manifest-fields, .radar-side { grid-template-columns: 1fr !important; }
  .tabs { width: 100% !important; overflow-x: auto !important; }
  .tab { min-width: 132px !important; }
  .panel { padding: 15px !important; }
  .radar-stage { height: 430px !important; }
}