.pc-control-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pc-control-header h3, .pc-control-header p { margin: 4px 0; }
.pc-control-channels { display: flex; gap: 10px; flex-wrap: wrap; }
.pc-channel { display: grid; gap: 5px; text-align: left; min-width: 155px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--text); cursor: pointer; }
.pc-channel small { color: var(--muted); }
.pc-channel.selected { border-color: var(--accent); background: rgba(241,91,42,.10); }
.pc-control-layout { display: grid; grid-template-columns: minmax(270px, 310px) minmax(0,1fr); gap: 18px; margin-top: 18px; align-items: start; }
.pc-control-sidebar, .pc-control-main { min-width: 0; display: grid; gap: 16px; }
.pc-control-sidebar .panel { padding: 18px; margin: 0; }
.pc-control-sidebar label { display: grid; gap: 6px; margin: 10px 0; }
.pc-control-sidebar input, .pc-control-sidebar select { width: 100%; min-width: 0; }
.pc-control-sidebar h3 { font-size: 17px; margin: 0 0 12px; }
.pc-control-target { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 18px 22px; }
.pc-control-target h3 { margin: 6px 0; overflow-wrap: anywhere; }
.pc-control-target small { display: block; margin-top: 7px; color: var(--muted); overflow-wrap: anywhere; }
.pc-control-target > div:last-child { text-align: right; }
.pc-control-modules { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
.pc-control-module { min-width: 0; padding: 12px 7px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); color: var(--text); cursor: pointer; text-align: left; }
.pc-control-module strong, .pc-control-module small { display: block; }
.pc-control-module small { color: var(--muted); font-size: 11px; margin-top: 5px; line-height: 1.4; }
.pc-control-module.unavailable { opacity: .58; border-style: dashed; }
.pc-control-module.selected { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.pc-control-module.available strong::before { content: '● '; color: #39d98a; font-size: 10px; }
.pc-control-module.unavailable strong::before { content: '○ '; font-size: 10px; }
.pc-control-content { min-width: 0; }
.pc-control-content > .panel { margin: 0 0 16px; }
.pc-control-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.pc-control-actions button { white-space: normal; }
.pc-control-feedback { padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.04); color: var(--muted); overflow-wrap: anywhere; }
.pc-control-overview li { margin: 14px 0; line-height: 1.7; }
.pc-config-group { border: 1px solid var(--line); padding: 14px; border-radius: 10px; margin: 12px 0; }
.pc-config-group summary { cursor: pointer; font-weight: 600; }
.pc-config-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.pc-config-fields label { display: grid; gap: 6px; min-width: 0; }
.pc-config-fields input, .pc-config-fields select { min-width: 0; width: 100%; }
.pc-config-fields input[readonly] { opacity: .65; }
.pc-config-preview { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
.pc-control-device-list { display: grid; gap: 8px; margin-top: 14px; max-height: 550px; overflow: auto; }
.pc-control-device { text-align: left; display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; }
.pc-control-device small { color: var(--muted); overflow-wrap: anywhere; }
.pc-control-device .status-pill { justify-self: start; }
.pc-control-device.selected { border-color: var(--accent); background: rgba(241,91,42,.08); }
.pc-control-devices .nearby-table-wrap { max-height: 450px; overflow: auto; margin: 12px 0; }
.pc-control-devices .nearby-device-table { min-width: 0; width: 100%; }
.pc-control-devices .nearby-device-table th, .pc-control-devices .nearby-device-table td { padding: 10px 5px; font-size: 12px; }
.pc-control-devices .nearby-device-table small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.pc-control-content .pc-dongle-workbench { display: block; }
.pc-control-content .pc-output { max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-control-content .pc-raw-json-textarea, .pc-control-content .pc-frame-textarea { min-height: 150px; }
.pc-control-header button:disabled, .pc-control-layout button:disabled { cursor: not-allowed; opacity: .45; }
.pc-control-device:focus-visible, .pc-control-module:focus-visible, .pc-channel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1200px) {
  .pc-control-header { align-items: start; flex-direction: column; gap: 16px; }
  .pc-control-modules { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .pc-control-layout { grid-template-columns: minmax(0,1fr); }
  .pc-control-channels { display: grid; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  .pc-channel { min-width: 0; padding: 12px 8px; }
  .pc-channel small { font-size: 10px; }
  .pc-control-target { padding: 16px; flex-wrap: wrap; }
  .pc-control-target > div:last-child { text-align: left; }
  .pc-config-fields { grid-template-columns: minmax(0,1fr); }
  .pc-control-modules { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .pc-control-device-list, .pc-control-devices .nearby-table-wrap { max-height: 240px; }
}