/* Control workspace visual harmonization. Layout, DOM order and handlers stay unchanged. */
html body .control-page {
  --lg-control-canvas: #020a13;
  --lg-control-surface: rgba(8, 20, 34, .92);
  --lg-control-surface-2: rgba(12, 29, 48, .9);
  --lg-control-border: rgba(95, 174, 234, .24);
  --lg-control-border-strong: rgba(95, 190, 255, .48);
  --lg-control-ink: #e8f5ff;
  --lg-control-muted: #86a8c4;
  --lg-control-blue: #2f91e8;
  --lg-control-blue-hi: #55c2ff;
  background:
    radial-gradient(800px 420px at 52% -12%, rgba(39, 127, 202, .14), transparent 68%),
    var(--lg-control-canvas) !important;
  color: var(--lg-control-ink) !important;
}

html body .control-page .ctrl-header,
html body .control-page .home-tab-topbar {
  background: rgba(5, 16, 28, .94) !important;
  border-color: var(--lg-control-border) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html body .control-page .home-tab-topbar .topbar-item {
  background: rgba(12, 31, 50, .78) !important;
  border-color: rgba(95, 174, 234, .2) !important;
}

html body .control-page .ctrl-body,
html body .control-page .ctrl-screen-area,
html body .control-page .ctrl-sidebar-panel,
html body .control-page .ctrl-sidebar,
html body .control-page .ctrl-tab-content {
  background: transparent !important;
}

html body .control-page .ctrl-screen-area {
  background: linear-gradient(180deg, rgba(3, 13, 23, .96), rgba(2, 9, 16, .98)) !important;
  border-right: 1px solid rgba(95, 174, 234, .16) !important;
}

html body .control-page .ctrl-sidebar-panel {
  background: rgba(4, 14, 25, .92) !important;
  border-left: 1px solid rgba(95, 174, 234, .18) !important;
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 300px !important;
}
html body #root .control-page .ctrl-sidebar-panel {
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
}

/* Keep the reader colour controls directly below the reader/screen workspace. */
html body .control-page .ctrl-screen-area > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

html body .control-page .ctrl-screen-area > div:first-child > div:first-child {
  order: 2 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin-top: 8px !important;
  background: rgba(8, 20, 34, .92) !important;
  border-color: var(--lg-control-border) !important;
}

html body .control-page .ctrl-screen-area > div:first-child > div:nth-child(2) {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-height: 320px !important;
  width: 100% !important;
}

html body .control-page .sidebar-card,
html body .control-page .inj-panel,
html body .control-page .ctrl-tab-panel {
  background: var(--lg-control-surface) !important;
  border: 1px solid var(--lg-control-border) !important;
  border-radius: 13px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  color: var(--lg-control-ink) !important;
}

html body .control-page .sidebar-card-head {
  min-height: 30px !important;
  background: linear-gradient(180deg, rgba(17, 39, 62, .96), rgba(10, 25, 42, .96)) !important;
  border-bottom: 1px solid var(--lg-control-border) !important;
  color: var(--lg-control-ink) !important;
}

html body .control-page .sidebar-card-body {
  background: rgba(7, 19, 32, .86) !important;
  color: var(--lg-control-ink) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 9px !important;
}

html body .control-page .sidebar-card-body hr,
html body .control-page .sidebar-card-body .sidebar-divider {
  border-color: rgba(95, 174, 234, .22) !important;
  background: rgba(95, 174, 234, .22) !important;
}

html body .control-page .sidebar-btn,
html body .control-page .sidebar-btn-sm,
html body .control-page .ctrl-qbtn,
html body .control-page .ctrl-tab-action {
  background: linear-gradient(135deg, #176bc7, #14509e) !important;
  border: 1px solid rgba(113, 205, 255, .48) !important;
  border-radius: 9px !important;
  color: #f3fbff !important;
  box-shadow: 0 5px 13px rgba(0, 91, 172, .22), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .control-page .sidebar-card-body > .sidebar-btn,
html body .control-page .sidebar-card-body > .sidebar-btn-sm,
html body .control-page .sidebar-card-body > .sidebar-row,
html body .control-page .sidebar-card-body > div {
  min-width: 0 !important;
}

html body .control-page .sidebar-card-body .sidebar-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  min-width: 0 !important;
}

html body .control-page .sidebar-card-body .sidebar-row > * {
  min-width: 0 !important;
  width: 100% !important;
}

html body .control-page .sidebar-card-body .sidebar-btn,
html body .control-page .sidebar-card-body .sidebar-btn-sm {
  font-size: 10px !important;
  letter-spacing: 0 !important;
  padding: 0 7px !important;
  white-space: nowrap !important;
}

html body .control-page .sidebar-card-body .sidebar-row .sidebar-btn-sm {
  font-size: 9px !important;
  padding: 0 4px !important;
  gap: 2px !important;
}

/* The two unlock actions need a full-width row at compact widths. */
html body .control-page .sidebar-card-body div:has(> .sidebar-btn-sm + .sidebar-btn-sm) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

/* Match the neutral action buttons used by the right workspace controls. */
html body #root .control-page .sidebar-btn,
html body #root .control-page .sidebar-btn-sm,
html body #root .control-page .ctrl-qbtn,
html body #root .control-page .ctrl-tab-action {
  background: rgb(35, 37, 42) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 500 !important;
}

html body #root .control-page .sidebar-btn:hover,
html body #root .control-page .sidebar-btn-sm:hover,
html body #root .control-page .ctrl-qbtn:hover,
html body #root .control-page .ctrl-tab-action:hover {
  background: rgb(52, 56, 63) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22) !important;
}

html body #root .control-page .sidebar-btn:active,
html body #root .control-page .sidebar-btn-sm:active,
html body #root .control-page .ctrl-qbtn:active,
html body #root .control-page .ctrl-tab-action:active {
  background: rgb(28, 30, 34) !important;
  transform: translateY(1px) !important;
}

html body #root .control-page .sidebar-btn:disabled,
html body #root .control-page .sidebar-btn-sm:disabled,
html body #root .control-page .ctrl-qbtn:disabled,
html body #root .control-page .ctrl-tab-action:disabled {
  background: rgb(35, 37, 42) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .48) !important;
}

html body .control-page .sidebar-btn.green,
html body .control-page .sidebar-btn-sm.green {
  background: linear-gradient(135deg, #1688b2, #126b91) !important;
  border-color: rgba(103, 219, 240, .52) !important;
}

html body .control-page .sidebar-btn.danger,
html body .control-page .sidebar-btn-sm.danger,
html body .control-page .sidebar-btn.danger-dark {
  background: linear-gradient(135deg, #284e79, #1b3557) !important;
  border-color: rgba(126, 180, 230, .42) !important;
}

html body .control-page .sidebar-btn:hover,
html body .control-page .sidebar-btn-sm:hover,
html body .control-page .ctrl-qbtn:hover,
html body .control-page .ctrl-tab-action:hover {
  background: linear-gradient(135deg, #258ce5, #1a68bd) !important;
  border-color: var(--lg-control-border-strong) !important;
  box-shadow: 0 8px 18px rgba(31, 139, 222, .28), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

html body .control-page .sidebar-btn:disabled,
html body .control-page .sidebar-btn-sm:disabled {
  background: rgba(57, 88, 116, .45) !important;
  border-color: rgba(133, 170, 200, .2) !important;
  color: rgba(208, 229, 245, .52) !important;
  box-shadow: none !important;
}

html body .control-page .sidebar-input,
html body .control-page .sidebar-textarea,
html body .control-page input,
html body .control-page textarea,
html body .control-page select {
  background: rgba(5, 16, 28, .9) !important;
  border: 1px solid rgba(95, 174, 234, .3) !important;
  border-radius: 8px !important;
  color: var(--lg-control-ink) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2) !important;
}

html body .control-page .sidebar-input:focus,
html body .control-page .sidebar-textarea:focus,
html body .control-page input:focus,
html body .control-page textarea:focus,
html body .control-page select:focus {
  border-color: var(--lg-control-blue-hi) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(57, 167, 235, .18) !important;
}

html body .control-page .ctrl-phone-frame,
html body .control-page .ctrl-phone-screen {
  background: #01060b !important;
  border-color: rgba(95, 174, 234, .25) !important;
  box-shadow: 0 0 30px rgba(0, 95, 170, .1) inset !important;
}

html body .control-page .ctrl-phone-nav {
  background: rgba(8, 20, 34, .96) !important;
  border-top-color: rgba(95, 174, 234, .2) !important;
}

html body .control-page .ctrl-phone-nav button:hover {
  background: rgba(80, 180, 240, .16) !important;
}

html body .control-page .ctrl-empty-inline {
  border-color: rgba(95, 174, 234, .28) !important;
  background: radial-gradient(circle at 50% 38%, rgba(40, 125, 198, .08), transparent 62%) !important;
  color: var(--lg-control-muted) !important;
}

html body .control-page .topbar-label,
html body .control-page .ctrl-screen-label,
html body .control-page .sidebar-card-head span {
  color: var(--lg-control-muted) !important;
}

@media (max-width: 900px) {
  html body #root .control-page .ctrl-sidebar-panel { flex-basis: 248px !important; width: 248px !important; min-width: 248px !important; max-width: 248px !important; }
  html body .control-page .sidebar-card { border-radius: 11px !important; }
  html body .control-page .sidebar-card-body { padding: 7px !important; }
}