/* ============================================================
   发个东西 — NIGHT FREIGHT TERMINAL
   货运调度台 / 面板+舱底 Private-set dark cockpit with waybill rows
   ============================================================ */

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('./fonts/martianmono-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------- tokens */
:root {
  /* surfaces — warm coal with a trace of bilge green */
  --void:    #0A0C09;
  --shell:   #0E110D;
  --panel:   #13170F;
  --raised:  #1A1F16;
  --raised-2:#222916;
  --well:    #0C0F0A;
  --edge:    #232B1E;
  --edge-2:  #354029;
  --edge-hot:#4A5738;

  /* ink */
  --ink:   #E7E8DE;
  --ink-2: #A3AB95;
  --ink-3: #6D7663;
  --ink-4: #4C5344;

  /* signal */
  --tape:   #EFC24B;   /* hazard amber — brand, outbound, primary */
  --signal: #AEE239;   /* dispatcher lime — live, inbound, links */
  --flare:  #FF6B4A;   /* sodium flare — faults, menace */

  /* node identity tints — all legible on coal */
  --n1:#EFC24B; --n2:#AEE239; --n3:#6FD3C7; --n4:#FF9C6E;
  --n5:#D4A5FF; --n6:#7FB4FF; --n7:#F7A8C4; --n8:#C8D96F;

  /* type */
  --mono: 'Martian Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --body: var(--mono), 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', sans-serif;

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 5px;

  --rail-w: 262px;
  --topbar-h: 54px;

  --ease: cubic-bezier(.22, .68, 0, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --tape-stripe: repeating-linear-gradient(135deg,
      var(--tape) 0 10px, #16130A 10px 20px);
}

/* ---------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  font-variant-ligatures: none;
}

button { font: inherit; color: inherit; }
::selection { background: var(--tape); color: #14110A; }

:focus-visible {
  outline: 2px solid var(--tape);
  outline-offset: 2px;
  border-radius: 1px;
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--edge-2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--edge-2);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 9px;
}
::-webkit-scrollbar-thumb:hover { background: var(--edge-hot); background-clip: padding-box; }

/* shared micro-label */
.label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------------------------------------------------------- atmosphere */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 400;
  background-image: var(--grain);
  opacity: .028;
  mix-blend-mode: screen;
}

.shell {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(1100px 620px at 12% -10%, #17200F 0%, transparent 62%),
    radial-gradient(900px 500px at 105% 110%, #131A0D 0%, transparent 60%),
    var(--shell);
}

/* hazard tape bridging the whole cockpit */
.shell::before {
  content: '';
  position: absolute;
  top: var(--topbar-h);
  left: 0; right: 0;
  height: 2px;
  background: var(--tape-stripe);
  opacity: .5;
  z-index: 3;
  pointer-events: none;
}

/* ============================================================ topbar */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  background: linear-gradient(180deg, #171C13, #101410);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 8px 26px -14px #000, inset 0 -1px 0 #20281C;
  position: relative;
  z-index: 4;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.brand__seal {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: #14110A;
  background: var(--tape);
  border-radius: 3px;
  flex: none;
  position: relative;
  overflow: hidden;
}
.brand__seal::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, #0000 0 5px, rgba(0,0,0,.16) 5px 10px);
}
.brand__seal svg { position: relative; z-index: 1; }

.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name {
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  color: var(--ink); white-space: nowrap;
}
.brand__sub {
  font-size: 8.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}

.topbar__meta { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-width: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 2px;
  white-space: nowrap;
}
.chip b { color: var(--tape); font-weight: 800; }
.chip--live { color: var(--signal); border-color: #33421E; background: #16200E; }
.chip--live b { color: var(--signal); }

.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(174,226,57,.55);
  animation: pulse 2.4s var(--ease) infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(174,226,57,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(174,226,57,0); }
  100% { box-shadow: 0 0 0 0 rgba(174,226,57,0); }
}

/* ============================================================ desk grid */
.desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: 10px;
  padding: 10px;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================ console (left) */
.left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.consol {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -26px #000, inset 0 1px 0 #222B1E;
  position: relative;
  overflow: hidden;
}

.consol__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, #1A2015, #151A11);
  flex: none;
}
.consol__title { display: flex; align-items: center; gap: 8px; }
.consol__title h2 {
  margin: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}
.consol__count {
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  color: var(--tape);
  background: #241E0B;
  border: 1px solid #3A3111;
  border-radius: 2px;
  padding: 1px 6px;
}
.consol__hint { font-size: 9px; letter-spacing: .1em; color: var(--ink-4); text-transform: uppercase; }

.chat-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 6px 14px;
  scroll-behavior: smooth;
  background-image: linear-gradient(transparent 95%, rgba(174,226,57,.018) 95%);
  background-size: 100% 22px;
}

/* --- empty state --- */
.empty {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 30px; text-align: center;
  color: var(--ink-4);
}
.empty__mark {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1px dashed var(--edge-2);
  border-radius: var(--r-lg);
  color: var(--edge-hot);
}
.empty__line { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.empty__sub { font-size: 11px; color: var(--ink-4); max-width: 330px; line-height: 1.7; }
.empty kbd {
  font-family: var(--mono); font-size: 10px;
  padding: 1px 5px; border: 1px solid var(--edge-2); border-radius: 2px;
  color: var(--ink-2); background: var(--raised);
}
.empty.is-hidden { display: none; }

/* ------------------------------------------------- waybill rows */
.wb {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 10px;
  padding: 9px 10px 9px 0;
  border: 1px solid transparent;
  border-left: 2px solid var(--n1);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(255,255,255,.022), transparent 40%);
  animation: wbIn .34s var(--ease) both;
}
.wb + .wb { margin-top: 3px; }
@keyframes wbIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* perforated measurement column (waybill stub) */
.wb__stub {
  grid-row: 1 / span 2;
  justify-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 5px;
  padding-top: 2px;
  border-right: 1px dashed var(--edge);
}
.wb__no {
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wb__dir {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--edge);
  border-radius: 2px;
  color: var(--ink-3);
  background: var(--raised);
}

.wb__meta {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 3px;
  min-width: 0;
}
.wb__from {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  color: var(--n1);
}
.wb__from::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 6px; margin-bottom: 1px;
  background: var(--n1);
  border-radius: 1px;
}
.wb__tag {
  font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 2px;
  color: var(--ink-3);
  border: 1px solid var(--edge);
}
.wb__tag--out { color: var(--tape); border-color: #3E3413; background: #221C08; }
.wb__tag--sys { color: var(--flare); border-color: #402018; background: #22100C; }
.wb__time {
  font-size: 9px; letter-spacing: .06em; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.wb__body { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.wb__payload { flex: 1 1 auto; min-width: 0; }

.wb__payload pre {
  margin: 0;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.wb__payload pre a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(174,226,57,.35);
  transition: background-color .18s, border-color .18s;
}
.wb__payload pre a:hover { background: rgba(174,226,57,.1); border-color: var(--signal); }

/* own (outbound) rows get the tape treatment */
.wb--own { border-left-color: var(--tape); }
.wb--own .wb__from { color: var(--tape); }
.wb--own .wb__from::before { background: var(--tape); }

.wb--sys {
  border-left-color: var(--flare);
  background: repeating-linear-gradient(135deg,
      rgba(255,107,74,.05) 0 9px, transparent 9px 18px);
}
.wb--sys .wb__payload pre { color: var(--ink-2); font-size: 12px; }

/* row action rail — revealed on hover, always available on touch */
.wb__acts { display: flex; align-items: center; gap: 2px; flex: none; opacity: 0; transition: opacity .18s; }
.wb:hover .wb__acts, .wb:focus-within .wb__acts { opacity: 1; }
@media (hover: none) { .wb__acts { opacity: 1; } }

.icon-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--ink-4);
  cursor: pointer;
  transition: color .18s, background-color .18s, border-color .18s;
}
.icon-btn:hover { color: var(--tape); background: var(--raised); border-color: var(--edge); }
.icon-btn--done { color: var(--signal) !important; }

/* ------------------------------------------------- attachments */
.att {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  max-width: 420px;
  background: var(--raised);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--signal);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color .18s, border-color .18s, transform .18s var(--ease);
}
.att:hover { background: var(--raised-2); border-color: var(--edge-hot); transform: translateX(2px); }

.att__thumb {
  width: 46px; height: 46px; flex: none;
  border-radius: 2px;
  overflow: hidden;
  background: var(--well);
  border: 1px solid var(--edge);
  display: grid; place-items: center;
  color: var(--signal);
  cursor: zoom-in;
}
.att__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.att__info { min-width: 0; flex: 1 1 auto; }
.att__name {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att__sub {
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 2px; display: flex; align-items: center; gap: 6px;
}
.att__size { color: var(--signal); font-weight: 700; }

.att__dl {
  flex: none; width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ink-3);
  border: 1px solid var(--edge);
  border-radius: 2px;
  cursor: pointer; background: none;
  transition: color .18s, border-color .18s, background-color .18s;
}
.att:hover .att__dl { color: var(--signal); border-color: #33421E; background: #17200E; }

/* inline image preview */
.img-att { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.img-att img {
  max-width: min(300px, 60vw);
  max-height: 300px;
  display: block;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge-hot);
  cursor: zoom-in;
  transition: transform .22s var(--ease), box-shadow .22s;
}
.img-att img:hover { transform: scale(1.014); box-shadow: 0 12px 30px -14px #000; }

/* ============================================================ compose */
.compose {
  flex: none;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: 0 -6px 26px -20px #000, inset 0 1px 0 #222B1E;
  overflow: hidden;
  position: relative;
}
.compose::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--tape), transparent 42%);
  opacity: .55;
}

.txt-msg {
  display: block;
  width: 100%;
  min-height: 82px;
  max-height: 210px;
  resize: vertical;
  padding: 12px 14px 8px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.65;
  caret-color: var(--tape);
}
.txt-msg::placeholder { color: var(--ink-4); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 9px;
  border-top: 1px solid var(--edge);
  background: linear-gradient(180deg, #151A11, #12170F);
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 5px; }

.toolbar-btn, .copy-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: var(--raised);
  color: var(--ink-2);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: color .18s, background-color .18s, border-color .18s, transform .12s var(--ease);
}
.toolbar-btn:hover, .copy-btn:hover {
  color: var(--tape); border-color: var(--edge-hot); background: var(--raised-2);
}
.toolbar-btn:active { transform: translateY(1px); }
.toolbar-btn svg { flex: none; }

.toolbar-btn--send {
  color: #14110A;
  background: var(--tape);
  border-color: var(--tape);
  padding: 0 15px;
}
.toolbar-btn--send:hover {
  color: #14110A;
  background: #F5CE63;
  border-color: #F5CE63;
  filter: brightness(1.06);
}
.toolbar-btn--send.is-ready { animation: readyIn .3s var(--ease) both; }
@keyframes readyIn { from { transform: scale(.96); } to { transform: none; } }

.copy-btn { padding: 0 7px; height: 26px; width: 26px; justify-content: center; }

/* ============================================================ node rail */
.right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -28px #000, inset 0 1px 0 #222B1E;
  overflow: hidden;
}

.rail__head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, #1A2015, #151A11);
}
.rail__head h2 {
  margin: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}
.rail__count {
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  color: var(--signal);
  background: #16200E;
  border: 1px solid #33421E;
  border-radius: 2px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

#users { flex: 1 1 auto; overflow-y: auto; list-style: none; padding: 8px; margin: 0; }

.node {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--raised);
  cursor: default;
  user-select: none;
  position: relative;
  transition: border-color .18s, background-color .18s, transform .2s var(--ease);
  animation: nodeIn .3s var(--ease) both;
}
.node + .node { margin-top: 5px; }
@keyframes nodeIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.node:hover { background: var(--raised-2); border-color: var(--edge-2); }

.node__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--edge-hot);
  flex: none;
  position: relative;
}
.node.is-live .node__dot {
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(174,226,57,.14);
}
.node.is-live .node__dot::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--signal);
  opacity: .5;
  animation: ring 2.6s var(--ease) infinite;
}
@keyframes ring {
  0%   { transform: scale(.7); opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.node.is-down .node__dot { background: var(--flare); box-shadow: 0 0 0 3px rgba(255,107,74,.12); }

.node__body { min-width: 0; }
.node__name {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node.is-me .node__name { color: var(--tape); }
.node__foot {
  display: flex; align-items: center; gap: 6px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 1px;
}
.node.is-live .node__foot { color: var(--signal); }
.node.is-down .node__foot { color: var(--flare); }

.rail__foot {
  flex: none;
  padding: 9px 12px;
  border-top: 1px solid var(--edge);
  background: var(--well);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rail__foot .label { font-size: 8px; }
.rail__legend { display: flex; gap: 9px; }
.rail__legend span { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.rail__legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* ============================================================ modals */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 5, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1000;
  animation: fadeIn .2s var(--ease) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--edge-2);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -30px #000, 0 0 0 1px rgba(255,255,255,.02);
  animation: modalIn .3s var(--ease) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* flex 居中容器内的子元素不能用 modalIn（它含 translate(-50%,-50%)，会把元素推偏） */
@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-content::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tape-stripe);
  opacity: .7;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.modal h3 {
  margin: 0;
  padding: 16px 18px 0;
  font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.modal h3::after {
  content: '';
  flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--edge-2), transparent);
}

.modal-body { padding: 14px 18px 4px; }
.modal-body .label { display: block; margin-bottom: 8px; }

.user-list { max-height: 264px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }

.user-select-item {
  padding: 0;
  margin: 5px 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--raised);
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
  overflow: hidden;
}
.user-select-item:hover { background: var(--raised-2); border-color: var(--edge-2); }
.user-select-item:has(input:checked) {
  border-color: var(--tape);
  background: #1F1B0A;
}
.user-select-item label {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  cursor: pointer;
  user-select: none;
}
.user-select-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none;
  margin: 0;
  border: 1px solid var(--edge-hot);
  border-radius: 2px;
  background: var(--well);
  cursor: pointer;
  position: relative;
  transition: background-color .16s, border-color .16s;
}
.user-select-item input[type="checkbox"]:checked { background: var(--tape); border-color: var(--tape); }
.user-select-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid #14110A; border-top: 0; border-left: 0;
  transform: rotate(42deg);
}
.user-select-item > label > span:last-child { flex: 1 1 auto; min-width: 0; }
.user-select-item .us__name {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-select-item .us__id { font-size: 8.5px; letter-spacing: .12em; color: var(--ink-4); text-transform: uppercase; }

.nickname-input-container { padding: 14px 18px 4px; }
.nickname-input-container input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--well);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13.5px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.nickname-input-container input::placeholder { color: var(--ink-4); }
.nickname-input-container input:focus {
  border-color: var(--tape);
  box-shadow: 0 0 0 3px rgba(239,194,75,.12);
}
.nickname-input-container input[type="password"] { letter-spacing: .22em; }
.field-note { font-size: 9.5px; color: var(--ink-4); letter-spacing: .06em; margin-top: 7px; }

.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 18px 16px;
  margin-top: 10px;
  border-top: 1px solid var(--edge);
}
.modal-footer button {
  height: 34px; padding: 0 18px;
  border: 1px solid var(--tape);
  border-radius: 2px;
  background: var(--tape);
  color: #14110A;
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: filter .18s, background-color .18s, border-color .18s, opacity .18s;
}
.modal-footer button:hover { filter: brightness(1.08); }
/* a secondary/ghost button only exists when there are 2+ buttons; a lone
   button is always the primary action */
.modal-footer button:first-child:not(:only-child) {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--edge-2);
}
.modal-footer button:first-child:not(:only-child):hover {
  color: var(--ink);
  border-color: var(--edge-hot);
  filter: none;
}
.modal-footer button.is-primary {
  background: var(--tape);
  color: #14110A;
  border-color: var(--tape);
}
.modal-footer button:disabled { opacity: .45; cursor: not-allowed; filter: none !important; }

/* ------------------------------------------------- transfer telemetry */
.progress-container { padding: 4px 18px 0; }
.progress-text {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.progress-text .pt-main { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-text .pt-stat { color: var(--signal); font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }

.progress-bar {
  height: 6px;
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.progress-bar-inner {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--signal) 0 7px, #8FC62A 7px 14px);
  box-shadow: 0 0 12px rgba(174,226,57,.35);
  transition: width .22s linear;
}
.progress-bar-inner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: sweep 1.15s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.telemetry {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 10px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.telemetry div { background: var(--well); padding: 7px 9px; }
.telemetry dt { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.telemetry dd {
  margin: 2px 0 0;
  font-size: 12px; font-weight: 800; color: var(--signal);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================ gate */
/* the gate reuses .modal-content styling; the modal wrapper must stay hidden */
body.gate .shell { display: none; }
#passwordModal { display: none; }
body.gate #passwordModal { display: flex; }

.gate-panel {
  position: fixed;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  padding: 24px;
  background:
    radial-gradient(700px 420px at 50% 22%, #16200E 0%, transparent 65%),
    var(--void);
  z-index: 900;
}
.gate-panel__tape {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--tape-stripe); opacity: .85;
}
.gate-card {
  width: min(392px, 100%);
  background: var(--panel);
  border: 1px solid var(--edge-2);
  border-radius: var(--r-lg);
  box-shadow: 0 44px 90px -34px #000;
  overflow: hidden;
  animation: popIn .34s var(--ease) both;
}
.gate-card__banner {
  padding: 15px 20px;
  border-bottom: 1px solid var(--edge);
  background:
    repeating-linear-gradient(135deg, rgba(239,194,75,.09) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #1A2015, #13180F);
  display: flex; align-items: center; gap: 11px;
}
.gate-card__banner .seal {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--tape); color: #14110A; border-radius: 3px;
}
.gate-card__banner strong { display: block; font-size: 13px; letter-spacing: .04em; }
.gate-card__banner span { font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.gate-card__body { padding: 18px 20px 20px; }
.gate-card__body .field { display: block; }
.gate-card__body .field .label { display: block; margin-bottom: 8px; }
.gate-card__body input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--well);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13.5px;
  outline: none;
  letter-spacing: .22em;
  transition: border-color .18s, box-shadow .18s;
}
.gate-card__body input[type="password"]::placeholder { letter-spacing: normal; color: var(--ink-4); }
.gate-card__body input[type="password"]:focus {
  border-color: var(--tape);
  box-shadow: 0 0 0 3px rgba(239,194,75,.12);
}
.gate-card__body .modal-footer { padding: 0; margin-top: 16px; border: 0; }
.gate-card__body .modal-footer button { width: 100%; }
.gate-card__room {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 11px; margin-bottom: 14px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
}
.gate-card__room b { color: var(--tape); font-size: 13px; letter-spacing: .05em; font-weight: 800; }
.gate-card__err {
  display: none;
  margin-top: 12px; padding: 8px 11px;
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--flare);
  background: #22100C; border: 1px solid #402018; border-radius: var(--r-sm);
}
.gate-card__err.is-on { display: block; animation: shake .32s var(--ease); }
@keyframes shake {
  0%,100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.gate-foot { margin-top: 16px; text-align: center; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }

/* ============================================================ drop curtain */
.dragtip {
  display: none;
  position: fixed; inset: 0;
  z-index: 950;
  pointer-events: none;
  background: rgba(8, 11, 7, .93);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
body.dragover .dragtip { display: flex; align-items: center; justify-content: center; }
.dragtip::before {
  content: '';
  position: absolute; inset: 16px;
  border: 3px dashed var(--tape);
  border-radius: 8px;
  opacity: .85;
  animation: breathe 1.9s var(--ease) infinite;
}
@keyframes breathe { 0%,100% { opacity: .5; } 50% { opacity: .95; } }
.dragtip__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 20px;
}
.dragtip h1 {
  margin: 0;
  font-size: clamp(22px, 4.4vw, 34px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--tape);
}
.dragtip p { margin: 0; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.dragtip__seal {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  color: #14110A;
  background: var(--tape);
  border-radius: 6px;
  box-shadow: 0 0 44px rgba(239,194,75,.3);
  animation: bob 1.9s var(--ease) infinite;
}
@keyframes bob { 0%,100% { transform: translateY(-3px) rotate(-3deg); } 50% { transform: translateY(3px) rotate(3deg); } }

/* ============================================================ lightbox */
.fold {
  position: fixed; inset: 0;
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  background: rgba(6, 8, 5, .95);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: fadeIn .22s var(--ease) both;
}
.fold img {
  max-width: 100%; max-height: 100%;
  border-radius: 3px;
  border: 1px solid var(--edge-2);
  box-shadow: 0 40px 90px -30px #000;
  animation: popIn .3s var(--ease) both;
}
.fold__close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--edge-2); border-radius: 2px;
  background: var(--panel); color: var(--ink-2);
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.fold__close:hover { color: var(--flare); border-color: #402018; }
.fold__name {
  position: absolute; bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* ============================================================ toasts */
.tower {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 1200;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
  max-width: min(340px, calc(100vw - 28px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  background: var(--panel);
  border: 1px solid var(--edge-2);
  border-left: 3px solid var(--tape);
  border-radius: var(--r-sm);
  box-shadow: 0 22px 44px -22px #000;
  animation: toastIn .28s var(--ease) both;
  pointer-events: auto;
}
.toast.is-out { animation: toastOut .24s var(--ease) both; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }
.toast--ok { border-left-color: var(--signal); }
.toast--bad { border-left-color: var(--flare); }
.toast__icon { color: var(--tape); flex: none; margin-top: 1px; }
.toast--ok .toast__icon { color: var(--signal); }
.toast--bad .toast__icon { color: var(--flare); }
.toast__body { min-width: 0; }
.toast__title { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.toast__msg { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }

/* ============================================================ mobile */
.mobile-only { display: none; }
.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(6, 8, 5, .62);
  z-index: 500;
}
body.show-users .mobile-overlay { display: block; }

@media (max-width: 860px) {
  :root { --topbar-h: 50px; }
  .mobile-only { display: inline-flex; }

  .desk {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px;
    gap: 8px;
  }
  .topbar { padding: 0 10px; gap: 10px; }
  .chip--channel { display: none; }
  .brand__sub { display: none; }

  .right {
    position: fixed;
    top: 0; right: 0;
    width: min(284px, 84vw);
    height: 100%;
    z-index: 520;
    border-radius: 0;
    transform: translateX(102%);
    transition: transform .3s var(--ease);
    box-shadow: -24px 0 60px -30px #000;
  }
  body.show-users .right { transform: none; }
  body.show-users .toggle-users-btn { color: var(--tape); border-color: var(--edge-hot); background: var(--raised-2); }

  .wb { grid-template-columns: 36px 1fr; gap: 0 8px; }
  .wb__stub { border-right-width: 1px; }
  .wb__dir { width: 18px; height: 18px; }
  .img-att img { max-width: 74vw; }
  .att { max-width: 100%; }
  .consol__hint { display: none; }
  .telemetry { grid-template-columns: 1fr 1fr; }
  .telemetry div:last-child { grid-column: 1 / -1; }
  .tower { right: 10px; bottom: 10px; left: 10px; max-width: none; }
}

@media (max-width: 420px) {
  .wb__payload pre { font-size: 12.5px; }
  .toolbar-btn span.btn-label { display: none; }
  .toolbar-btn { padding: 0 9px; }
}

/* tablet: rail inline but narrower */
@media (min-width: 861px) and (max-width: 1120px) {
  :root { --rail-w: 222px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}