* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif; font-size: 14px;
  background: #1a1d21; color: #e6e6e6;
}
header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: #23272e; border-bottom: 1px solid #333;
}
header h1 { font-size: 18px; margin: 0; }
.ports { margin-left: auto; color: #9aa; font-size: 12px; }
.ports b { color: #cde; }
.conn { padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.conn.on { background: #1d5b2b; color: #9f9; }
.conn.off { background: #5b1d1d; color: #f99; }

main {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: auto 1fr;
  gap: 10px; padding: 10px; height: calc(100vh - 53px);
}
.panel { background: #23272e; border: 1px solid #333; border-radius: 6px; padding: 10px; overflow: auto; }
.topview { grid-column: 1; grid-row: 1; }
.sideview { grid-column: 1; grid-row: 2; }
.control { grid-column: 2; grid-row: 1 / 3; }
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #8ab; margin: 0 0 8px; }
.hint { text-transform: none; color: #667; font-weight: normal; letter-spacing: 0; }

/* ── Top view ───────────────────────────────────────────── */
#top-view { position: relative; }
.trailer { position: relative; background: #15171a; border: 1px solid #444; border-radius: 4px; }
.cab {
  position: absolute; border: 1px solid #556; border-radius: 3px;
  background: #2c323b; display: flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer; color: #bcd; overflow: hidden;
}
.cab:hover { outline: 1px solid #6af; }
.cab.sel { outline: 2px solid #6af; }
.cab.exlight { box-shadow: 0 0 10px 2px #fd6 inset; border-color: #fd6; }
.exlamp { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #443; border: 1px solid #665; }
.exlamp.on { background: #fd6; border-color: #fd6; box-shadow: 0 0 8px 2px #fd6; }
.aisle { position: absolute; background: repeating-linear-gradient(90deg,#222,#222 8px,#2a2a2a 8px,#2a2a2a 16px); }
.aisle.open { background: #173a17; outline: 1px dashed #5c5; }
.aisle-label { position: absolute; font-size: 10px; color: #777; }
.reardoor { position: absolute; background: #443; border: 1px solid #776; font-size: 9px; display: flex; align-items: center; justify-content: center; color: #ddb; }
.reardoor.open { background: #173a17; border-color: #5c5; color: #9f9; }
.blinker { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #443; border: 1px solid #666; }
.blinker.on { background: #fa0; box-shadow: 0 0 8px 2px #fa0; }

/* ── Side view ──────────────────────────────────────────── */
.side-block { margin-bottom: 14px; }
.side-block > h3 { font-size: 12px; color: #9ab; margin: 0 0 6px; }
.cab-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cab-col { border: 1px solid #3a3f47; border-radius: 4px; background: #1b1e22; min-width: 92px; }
.cab-col > .cab-title { font-size: 11px; text-align: center; padding: 3px; color: #9bd; border-bottom: 1px solid #333; background:#262b32; }
.cab-col > .exlight-bar { height: 6px; border-radius: 4px 4px 0 0; background: #3a3320; cursor: pointer; }
.cab-col > .exlight-bar:hover { background: #4a4126; }
.cab-col > .exlight-bar.on { background: #fd6; box-shadow: 0 0 8px 2px #fd6; }
.comp {
  position: relative; border-bottom: 1px solid #2a2e34; padding: 4px 5px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-height: 30px;
}
.comp:last-child { border-bottom: none; }
.comp:hover { background: #20242a; }
.comp .row1 { display: flex; justify-content: space-between; font-size: 10px; color: #99a; }
.comp .cid { color: #cde; }
.comp .size { background: #334; border-radius: 3px; padding: 0 4px; }
.comp.usage-nonparcel { opacity: .55; }
.comp.occ { background: #243a45; }
.comp.occ:hover { background: #2a4250; }
.comp.light::after { content: ''; position: absolute; inset: 0; box-shadow: 0 0 8px 1px #fd6 inset; pointer-events: none; border-radius: 2px; }
.comp.dooropen { border-left: 4px solid #5c5; }
.comp.lockopen { outline: 1px solid #fa6; outline-offset: -1px; }
.parcel { font-size: 14px; }
.badges { display: flex; gap: 4px; }
.badge { font-size: 9px; padding: 0 3px; border-radius: 2px; }
.b-door { background:#1d5b2b; color:#9f9; }
.b-lock { background:#5b431d; color:#fc9; }
.b-light{ background:#5b551d; color:#ff9; }

/* ── Control panel ──────────────────────────────────────── */
.ctl-group { margin-bottom: 14px; }
.ctl-group h3 { font-size: 11px; text-transform: uppercase; color: #789; margin: 0 0 6px; }
button.act {
  background: #2f3540; color: #cde; border: 1px solid #455; border-radius: 4px;
  padding: 5px 10px; cursor: pointer; font-size: 12px;
}
button.act:hover { background: #3a4250; }
button.act.on { background: #1d5b2b; border-color: #5c5; color: #9f9; }
button.act.danger { background:#5b1d1d; border-color:#a55; color:#f99; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.row input[type=text] { background:#15171a; border:1px solid #445; color:#cde; border-radius:4px; padding:4px 6px; flex:1; }
.kv { display:flex; justify-content:space-between; font-size:11px; padding:2px 0; color:#9ab; }
.kv b { color:#cde; font-weight:600; }
.side-toggle button { background:#2f3540; color:#bcd; border:1px solid #455; padding:3px 10px; cursor:pointer; }
.side-toggle button.active { background:#36506e; color:#fff; }
.side-toggle { display:inline-flex; border-radius:4px; overflow:hidden; }
.sideview-head { display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.sideview-head h2 { margin:0; }
.legend { display:flex; gap:10px; font-size:10px; color:#89a; margin-left:auto; }
.legend i.sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:3px; vertical-align:middle; }
.sw.occ{ background:#243a45; border:1px solid #4a7; }
.sw.light{ background:#fd6; }
.sw.open{ background:#5c5; }
.sw.lock{ background:#fa6; }

#message-log { font-family: ui-monospace, monospace; font-size: 11px; max-height: 260px; overflow:auto; background:#15171a; border:1px solid #2a2e34; border-radius:4px; padding:6px; }
#message-log .ln { padding:1px 0; color:#9ab; white-space:nowrap; }
#message-log .t { color:#566; }