.live-director {
  --ld-border: var(--nova-border, #303035);
  --ld-text: var(--nova-text, #efeff1);
  --ld-muted: var(--nova-muted, #96979e);
  --ld-control: var(--nova-surface, #222327);
  --ld-hover: var(--nova-hover, #2c2c30);
  --ld-accent: var(--nova-accent, #6261ef);
  display: grid;
  gap: 0;
  max-width: 1380px;
  margin: 0 auto;
  color: var(--ld-text);
  font-size: 13px;
}

.live-director * { box-sizing: border-box; }

.ld-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 4px 20px;
  border-bottom: 1px solid var(--ld-border);
}

.ld-intro h2 { margin: 0 0 5px; font-size: 23px; line-height: 1.2; }
.ld-intro p { margin: 0; color: var(--ld-muted); line-height: 1.45; }

.ld-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--ld-border);
  border-radius: 6px;
  color: var(--ld-muted);
  font-size: 12px;
  font-weight: 700;
}

.ld-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #74757d; }
.ld-status[data-state='connected'] { color: #60e5ba; border-color: #215b4c; }
.ld-status[data-state='connected']::before { background: #48d9aa; }
.ld-status[data-state='connecting'] { color: #f7cb67; border-color: #6d542a; }
.ld-status[data-state='connecting']::before { background: #f7cb67; }
.ld-status[data-state='error'] { color: #ff829a; border-color: #713044; }
.ld-status[data-state='error']::before { background: #ff6382; }

.ld-content-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  border-bottom: 1px solid var(--ld-border);
}

.ld-section { min-width: 0; padding: 22px 24px 26px; }
.ld-section:first-child { border-right: 1px solid var(--ld-border); }
.ld-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; font-size: 16px; }
.ld-section-title svg { width: 19px; height: 19px; color: #a0a0ff; }
.ld-section-desc { margin: 0 0 20px; color: var(--ld-muted); line-height: 1.5; }
.ld-form { display: grid; gap: 13px; }
.ld-field { display: grid; gap: 6px; min-width: 0; }
.ld-field > span { color: var(--ld-muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.ld-field input:not([type='checkbox']):not([type='range']),
.ld-field select,
.ld-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--ld-border);
  border-radius: 6px;
  outline: 0;
  background: var(--ld-control);
  color: var(--ld-text);
  font: inherit;
}
.ld-field textarea { min-height: 72px; resize: vertical; }
.ld-field input:focus-visible,
.ld-field select:focus-visible,
.ld-field textarea:focus-visible,
.live-director button:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }
.ld-inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ld-check { display: flex; align-items: center; gap: 9px; color: var(--ld-text); font-size: 12px; cursor: pointer; }
.ld-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ld-accent); }
.ld-hint { color: var(--ld-muted); font-size: 11px; line-height: 1.45; }
.ld-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.live-director button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 35px;
  padding: 7px 12px;
  border: 1px solid var(--ld-border);
  border-radius: 6px;
  background: var(--ld-control);
  color: var(--ld-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.live-director button:hover:not(:disabled) { background: var(--ld-hover); }
.live-director button:disabled { opacity: .46; cursor: not-allowed; }
.live-director button.ld-primary { border-color: #6b68ff; background: #5552d9; color: #fff; }
.live-director button.ld-primary:hover:not(:disabled) { background: #6865ee; }
.live-director button.ld-danger { color: #ff829a; }
.live-director button svg { width: 16px; height: 16px; }
.ld-message { min-height: 18px; margin: 10px 0 0; color: var(--ld-muted); font-size: 12px; }
.ld-message[data-tone='error'] { color: #ff829a; }
.ld-message[data-tone='success'] { color: #60e5ba; }
.ld-control-block + .ld-control-block { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ld-border); }
.ld-control-block h4 { margin: 0 0 10px; font-size: 13px; }
.ld-control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.ld-item-list { max-height: 170px; overflow: auto; margin-top: 9px; border-top: 1px solid var(--ld-border); }
.ld-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 4px 2px; border-bottom: 1px solid var(--ld-border); }
.ld-item-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-item-row button { min-width: 66px; min-height: 27px; padding: 3px 8px; font-size: 11px; }
.ld-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--ld-border); }
.ld-bottom-grid .ld-section:first-child { border-right: 1px solid var(--ld-border); }
.ld-value { color: #a0a0ff; font-weight: 700; }
.ld-rule-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.ld-rule-head p { margin: 0 0 12px; color: var(--ld-muted); }
.ld-rules-layout { display: grid; grid-template-columns: minmax(310px, 390px) minmax(0, 1fr); gap: 24px; }
.ld-rules-layout > * { min-width: 0; }
.ld-rules-layout > :first-child { padding-right: 24px; border-right: 1px solid var(--ld-border); }
.ld-rule-list { border-top: 1px solid var(--ld-border); }
.ld-rule-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ld-border); }
.ld-rule-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ld-rule-row small { display: block; margin-top: 4px; color: var(--ld-muted); font-size: 11px; }
.ld-rule-row .ld-actions { flex-wrap: nowrap; margin: 0; }
.ld-rule-row button { min-height: 29px; padding: 4px 7px; font-size: 11px; }
.ld-rule-row input[type='checkbox'] { width: 16px; height: 16px; accent-color: var(--ld-accent); }
.ld-empty { padding: 14px 0; color: var(--ld-muted); }
.ld-log { margin-top: 20px; }
.ld-log h4 { margin: 0 0 8px; font-size: 13px; }
.ld-log-row { display: flex; gap: 9px; padding: 6px 0; border-top: 1px solid var(--ld-border); color: var(--ld-muted); font-size: 11px; }
.ld-log-row[data-status='error'] { color: #ff829a; }
.ld-log-row b { color: var(--ld-text); }
.ld-rule-field[hidden] { display: none !important; }

@media (max-width: 1080px) {
  .ld-content-grid, .ld-bottom-grid, .ld-rules-layout { grid-template-columns: 1fr; }
  .ld-section:first-child, .ld-bottom-grid .ld-section:first-child, .ld-rules-layout > :first-child { border-right: 0; border-bottom: 1px solid var(--ld-border); }
  .ld-rules-layout > :first-child { padding-right: 0; padding-bottom: 20px; }
}

@media (max-width: 640px) {
  .ld-intro { align-items: flex-start; flex-direction: column; }
  .ld-section { padding: 18px 4px; }
  .ld-inline-fields, .ld-control-row { grid-template-columns: 1fr; }
}