.channel-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
}

.channel-current span {
  color: #526077;
  font-size: 11px;
  font-weight: 700;
}

.channel-current strong {
  color: #312e81;
  font-size: 14px;
  text-align: right;
}

.channel-list-card {
  overflow: hidden;
}

.channel-table-wrap {
  max-height: none;
  overflow-x: hidden;
}

.channel-table-wrap > table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.channel-table-wrap > table > thead > tr > th:nth-child(1) { width: 16%; }
.channel-table-wrap > table > thead > tr > th:nth-child(2) { width: 12%; }
.channel-table-wrap > table > thead > tr > th:nth-child(3) { width: 6%; }
.channel-table-wrap > table > thead > tr > th:nth-child(4) { width: 7%; }
.channel-table-wrap > table > thead > tr > th:nth-child(5) { width: 10%; }
.channel-table-wrap > table > thead > tr > th:nth-child(6) { width: 13%; }
.channel-table-wrap > table > thead > tr > th:nth-child(7) { width: 14%; }
.channel-table-wrap > table > thead > tr > th:nth-child(8) { width: 22%; }

#channelsBody > tr:not(.channel-model-panel-row) > td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.model-table-wrap {
  max-height: 380px;
  overflow-x: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
}

.model-table-wrap > table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.model-table-wrap > table > thead > tr > th:nth-child(1) { width: 17%; }
.model-table-wrap > table > thead > tr > th:nth-child(2) { width: 29%; }
.model-table-wrap > table > thead > tr > th:nth-child(3) { width: 12%; }
.model-table-wrap > table > thead > tr > th:nth-child(4) { width: 12%; }
.model-table-wrap > table > thead > tr > th:nth-child(5) { width: 11%; }
.model-table-wrap > table > thead > tr > th:nth-child(6) { width: 11%; }
.model-table-wrap > table > thead > tr > th:nth-child(7) { width: 8%; }

.model-table-wrap td {
  min-width: 0;
  white-space: normal;
}

.channel-model-panel-row > td {
  padding: 0;
  background: #f8fafc;
  white-space: normal;
}

.channel-model-panel-row:hover > td {
  background: #f8fafc;
}

.channel-model-panel {
  padding: 14px 16px 16px;
  border-top: 2px solid #c7d2fe;
}

.channel-model-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.channel-model-panel-head strong,
.channel-model-panel-head span {
  display: block;
}

.channel-model-panel-head strong {
  color: #1e1b4b;
  font-size: 13px;
}

.channel-model-panel-head span {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}

.table-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.table-field > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.model-label-input {
  width: 100%;
  min-width: 0;
}

.model-images-input,
.model-price-input,
.model-sort-input {
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.model-enabled-input {
  width: 100%;
  min-width: 0;
}

.model-table-wrap input,
.model-table-wrap select {
  height: 36px;
  font-size: 12px;
}

.model-table-wrap input:disabled,
.model-table-wrap select:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

.model-id {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.channel-list-msg {
  margin: 0;
  padding: 0 16px 14px;
}

.channel-description {
  display: block;
  max-width: none;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.channel-disabled-row td {
  background: #fbfcff;
  color: #94a3b8;
}

.channel-row-highlight td {
  animation: channel-row-pulse 1.4s ease-out;
}

.channel-model-input,
.channel-key-input,
.channel-label-input,
.channel-note-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  font-size: 12px;
}

.channel-model-input,
.channel-key-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.channel-row-actions {
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-content: center;
}

.channel-row-actions .row-action {
  height: 29px;
  padding: 0 7px;
  font-size: 10px;
}

.key-mask {
  display: block;
  color: #166534;
  font-weight: 800;
}

.key-missing,
.muted-cell {
  color: #94a3b8;
}

.channel-note {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.55;
}

.channel-key-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #f8fafc;
}

.channel-key-status span {
  color: #526077;
  font-size: 11px;
  font-weight: 700;
}

.channel-key-status strong {
  color: #166534;
  font-size: 13px;
  text-align: right;
}

.channel-key-status strong.missing {
  color: #b45309;
}

.channel-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 800;
}

button:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: .62;
}

@keyframes channel-row-pulse {
  0% { background: #eef2ff; }
  100% { background: transparent; }
}

@media (max-width: 1000px) {
  .channel-table-wrap,
  .model-table-wrap {
    overflow-x: auto;
  }

  .channel-table-wrap > table {
    min-width: 1080px;
    table-layout: auto;
  }

  .model-table-wrap > table {
    min-width: 860px;
    table-layout: auto;
  }
}

@media (max-width: 640px) {
  .channel-current {
    align-items: flex-start;
    flex-direction: column;
  }

  .channel-key-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .channel-key-status strong {
    text-align: left;
  }

  .channel-current strong {
    text-align: left;
  }

  .channel-model-panel-head {
    align-items: flex-start;
  }
}