.si-win {
  position: fixed;
  left: 90px;
  top: 170px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 460px;
  min-width: 240px;
  min-height: 180px;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - 8px);
  overflow: hidden;
  background: linear-gradient(165deg, #24282d 0%, #17191d 45%, #0f1114 100%);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px #060708, 0 6px 18px rgba(0, 0, 0, 0.65);
  color: #cfd4d9;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

.si-win.dragging { opacity: 0.92; }

.si-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border-bottom: 1px solid #1d242b;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.si-win.dragging .si-head { cursor: grabbing; }

.si-title {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text, #d7dee5);
}

.si-mode { color: #5db8ff; font-size: 8pt; letter-spacing: 1px; }

.si-status {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #5b656e;
  font-size: 7.5pt;
}

.si-close {
  flex: none;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #93a0ab;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.si-close:hover { background: #7a2820; color: #fff; }

.si-bar { display: flex; padding: 6px 8px 0; }
.si-bar[hidden] { display: none; }

.si-slots { display: inline-flex; margin-left: auto; }

.si-slots button {
  min-height: 0;
  margin-left: -1px;
  padding: 1px 10px;
  border: 1px solid #1d242b;
  border-radius: 0;
  background: #10161b;
  color: #93a0ab;
  font: inherit;
  font-size: 7.5pt;
  cursor: pointer;
}

.si-slots button:first-child { margin-left: 0; border-radius: 3px 0 0 3px; }
.si-slots button:last-child { border-radius: 0 3px 3px 0; }
.si-slots button:hover { background: #1d5fae; color: #fff; }
.si-slots button[aria-pressed="true"] { background: var(--readout, #f2a93b); border-color: var(--readout, #f2a93b); color: #1a1206; font-weight: 600; }

.si-body {
  flex: 1;
  min-height: 0;
  padding: 6px 8px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2e343b #0d1013;
}

.si-body::-webkit-scrollbar { width: 7px; }
.si-body::-webkit-scrollbar-thumb { background: #2e343b; border-radius: 4px; }
.si-body::-webkit-scrollbar-track { background: #0d1013; }

.si-foot {
  padding: 3px 10px 4px;
  border-top: 1px solid #1d242b;
  color: #3f4850;
  font-size: 6.5pt;
  letter-spacing: 1px;
  text-align: right;
}

.si-live {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  align-items: stretch;
}

.si-live > .si-empty { grid-column: 1 / -1; }

.si-empty {
  padding: 8px 4px;
  color: #5b656e;
  font-size: 8pt;
  text-align: center;
}

.si-idle { margin-top: 8px; color: #3f4850; font-size: 9pt; }

.si-sec {
  display: flex;
  align-items: center;
  margin: 10px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #1d242b;
  color: #5b656e;
  font-size: 7pt;
  letter-spacing: 2px;
}

.si-clr {
  margin-left: auto;
  min-height: 0;
  padding: 0 7px;
  border: 0;
  border-radius: 3px;
  background: #10161b;
  box-shadow: 0 0 0 1px #1d242b;
  color: #93a0ab;
  font: inherit;
  font-size: 7pt;
  letter-spacing: 1px;
  cursor: pointer;
}

.si-clr:hover { background: #7a2820; color: #fff; }

.si-card {
  min-width: 0;
  container-type: inline-size;
  padding: 6px 8px 7px;
  background: #05080b;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #151b21;
  color: #93a0ab;
  transition: background-color 0.25s, box-shadow 0.25s;
}

.si-card.on {
  background: linear-gradient(180deg, #0c2340 0%, #081628 100%);
  box-shadow: inset 0 0 0 1px #2a6adf, inset 0 0 18px rgba(42, 106, 223, 0.35), 0 0 10px rgba(42, 106, 223, 0.3);
  color: #cfe3f2;
}

.si-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  font-size: 7.5pt;
  line-height: 12px;
}

.si-led {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14301c;
  box-shadow: inset 0 0 0 1px #0a160e;
}

.si-card.on .si-led { background: #3adb4a; box-shadow: 0 0 6px rgba(60, 220, 80, 0.8); }

.si-proto { color: #5db8ff; letter-spacing: 1px; }

.si-tg { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #93a0ab; }
.si-card.on .si-tg { color: #ffcf40; text-shadow: 0 0 6px rgba(255, 207, 64, 0.4); }

.si-time { margin-left: auto; color: #5b656e; white-space: nowrap; }
.si-card.on .si-time { color: #3adb4a; }

.si-call {
  margin-top: 3px;
  color: #f2f5f7;
  font-size: 15pt;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.15;
  text-shadow: 0 0 6px rgba(215, 232, 255, 0.35);
  overflow-wrap: anywhere;
}

.si-flag { margin-left: 8px; font-size: 12pt; font-weight: normal; vertical-align: 2px; text-shadow: none; }

.si-name { margin-bottom: 3px; color: #cfe3f2; font-size: 9pt; }

.si-tab { width: 100%; margin-top: 3px; border-collapse: collapse; font-size: 8pt; line-height: 1.35; }

.si-k {
  width: 1%;
  padding: 1px 10px 1px 0;
  color: #5b656e;
  font-size: 7pt;
  letter-spacing: 1px;
  white-space: nowrap;
  vertical-align: top;
}

.si-v { padding: 1px 0; color: #d9e6f2; overflow-wrap: anywhere; }
.si-v.dim { color: #5b656e; font-style: italic; }

.si-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.si-links a {
  padding: 1px 7px;
  border-radius: 3px;
  background: #10161b;
  box-shadow: 0 0 0 1px #1d242b;
  color: #93a0ab;
  font-size: 7.5pt;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.si-links a:hover { background: #1d5fae; color: #fff; }

.si-row {
  display: grid;
  grid-template-columns: 40px 58px 72px 1fr 24px auto;
  gap: 6px;
  align-items: center;
  padding: 2px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  font-size: 8pt;
  cursor: pointer;
}

.si-row:hover, .si-row.open { background: rgba(93, 184, 255, 0.08); }
.si-row > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.si-c-time { color: #5b656e; }
.si-c-proto { color: #5db8ff; font-size: 7pt; letter-spacing: 0.5px; }
.si-c-call { color: #f2f5f7; font-weight: 600; }
.si-c-name { color: #93a0ab; }
.si-c-cty { text-align: center; }
.si-c-tg { color: #b89a3c; text-align: right; }

.si-detail { margin: 3px 0 6px; }

@container (max-width: 260px) {
  .si-tab, .si-tab tbody, .si-tab tr, .si-tab td { display: block; width: auto; }
  .si-tab tr { margin-bottom: 3px; }
  .si-k { padding: 0; font-size: 6.5pt; white-space: normal; }
  .si-v { padding: 0; }
}

@media (max-width: 760px) {
  .si-win { left: 4px !important; right: 4px; width: auto !important; top: 70px; height: 60vh; }
  .si-row { grid-template-columns: 38px 70px 1fr 22px auto; }
  .si-c-proto { display: none; }
}