:root {
  --bg: #070b18;
  --panel: #0d1425;
  --panel-2: #121b30;
  --line: #263653;
  --line-2: #3a4c70;
  --text: #f4f7ff;
  --muted: #98a8c2;
  --violet: #7c5cff;
  --violet-2: #5436d8;
  --cyan: #2dd4ff;
}

html,
body {
  background: var(--bg);
}

.studio-shell {
  background:
    radial-gradient(circle at 48% 22%, rgba(91, 71, 255, .13), transparent 34%),
    radial-gradient(circle at 72% 42%, rgba(45, 212, 255, .06), transparent 28%),
    linear-gradient(145deg, #070b18, #080d1b 62%, #090b18);
}

.studio-header {
  border-color: #253653;
  background: rgba(7, 11, 24, .97);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  border: 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 7px 16px rgba(67, 139, 255, .27));
  box-shadow: none;
}

.brand-lockup h1 {
  color: #f6f8ff;
  letter-spacing: .12em;
}

.brand-lockup p {
  color: #8fa4c7;
}

.system-state a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

#tempo-input {
  width: 58px;
  min-width: 58px;
  padding: 0 2px;
  overflow: visible;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

#tempo-input::-webkit-inner-spin-button,
#tempo-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.zone {
  background: rgba(11, 17, 32, .94);
}

.zone-monitor {
  background: rgba(8, 13, 26, .94);
}

.zone-left,
.zone-right,
.studio-workspace,
.zone-timeline {
  border-color: #253653;
}

.zone-timeline {
  background: #0a1020;
}

.monitor-frame {
  border-color: #304566;
  background:
    radial-gradient(circle at center, rgba(88, 61, 157, .22), transparent 36%),
    linear-gradient(145deg, #0b1427, #050914 70%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .5), 0 12px 36px rgba(0, 0, 0, .18);
}

.monitor-logo {
  width: 112px;
  height: 112px;
  margin-bottom: 14px;
  object-fit: contain;
  border: 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 14px 28px rgba(70, 92, 255, .3));
  box-shadow: none;
}

.field-compact,
.icon-button,
.button-quiet,
.tab-list,
.search-field,
textarea,
select,
.inspector-form input:not([type="checkbox"]),
.metrics-grid div,
.library-item {
  border-color: #2a3a58;
  background: #0c1425;
}

.button-primary {
  background: linear-gradient(135deg, #7357ff, #5535d6 56%, #263cab);
  border-color: #8f7aff;
  box-shadow: 0 8px 24px rgba(84, 54, 216, .3);
}

.button-primary:hover:not(:disabled) {
  border-color: #50d8ff;
  box-shadow: 0 10px 30px rgba(45, 212, 255, .17), 0 8px 24px rgba(84, 54, 216, .28);
}

.tab.is-active,
.mode-switch button.is-active {
  background: linear-gradient(135deg, #25345e, #32245b);
}

.planning-card,
.engine-contract,
.voice-card {
  border-color: #344366;
  background: linear-gradient(145deg, #121a31, #0a1020);
}

.timeline-scroll,
.track-lane {
  border-color: #293b5c;
  background-color: #070d19;
}

.track-label {
  background: #0d1526;
  border-color: #293b5c;
}

.format-pill,
.agent-presence {
  border-color: #324665;
  background: #0c1424;
}

#studio-sign-in[hidden] { display: none !important; }

@media (max-width: 1100px) and (min-width: 821px) {
  :root { --left: 204px; --right: 310px; }
  .studio-header { grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); gap: 10px; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .system-state { gap: 5px; }
  .button { padding-inline: 9px; }
}

@media (max-width: 820px) {
  .studio-header { grid-template-columns: minmax(0, 1fr) auto; }
  .system-state #engine-status,
  .system-state [data-status-dot],
  #refresh-studio { display: none; }
  .system-state .button { display: inline-flex; align-items: center; justify-content: center; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .monitor-logo { width: 94px; height: 94px; }
}

@media (max-width: 470px) {
  .brand-lockup p { display: none; }
  .brand-lockup h1 { max-width: 132px; font-size: 9px; }
  .system-state { gap: 4px; }
  .system-state .button { min-height: 32px; padding-inline: 8px; font-size: 9px; }
}