.container,
.admin-panel,
.control-panel,
.instructions-panel,
.live-panel,
.photo-booth,
.control-cluster,
.empty-state,
.artwork-card,
.featured-placeholder {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-panel);
}

.container,
.admin-panel,
.control-panel,
.instructions-panel,
.live-panel,
.photo-booth,
.control-cluster,
.empty-state {
  background: var(--surface-panel);
  backdrop-filter: blur(10px);
}

.container,
.admin-panel,
.control-panel,
.instructions-panel,
.live-panel,
.artwork-card,
.featured-placeholder {
  border-radius: var(--radius-xl);
}

.photo-booth,
.control-cluster,
.control-panel,
.editor-stage,
.image-frame,
.artwork-stage {
  border-radius: var(--radius-lg);
}

.eyebrow,
.panel-kicker,
.cluster-title,
.control-panel-title,
.experience-eyebrow {
  color: rgba(255, 232, 159, 0.92);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

button:not(.color-button),
.control-link,
.tool-button,
.control-button {
  --button-bg: var(--button-primary-bg);
  --button-bg-hover: var(--button-primary-bg-hover);
  --button-text: var(--button-primary-text);
  --button-border-color: var(--button-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-radius);
  background: var(--button-bg);
  color: var(--button-text);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    background var(--transition-base),
    color var(--transition-fast),
    border-color var(--transition-fast),
    filter var(--transition-fast),
    box-shadow var(--transition-fast);
}

button:not(.color-button):hover,
.control-link:hover,
.tool-button:hover,
.control-button:hover {
  transform: translateY(-1px);
  background: var(--button-bg-hover);
  box-shadow: var(--button-shadow-hover);
}

button:not(.color-button):active,
.control-link:active,
.tool-button:active,
.control-button:active {
  transform: translateY(0);
  box-shadow: var(--button-shadow-pressed);
}

button.secondary,
.control-button.secondary,
.tool-button.secondary,
.control-link.secondary {
  --button-bg: var(--button-secondary-bg);
  --button-bg-hover: var(--button-secondary-bg-hover);
  --button-text: var(--button-secondary-text);
  --button-border-color: var(--button-secondary-border);
}

button.ghost,
.control-button.ghost,
.tool-button.ghost,
.control-link.ghost {
  --button-bg: var(--button-ghost-bg);
  --button-bg-hover: var(--button-ghost-bg-hover);
  --button-text: var(--button-ghost-text);
  --button-border-color: var(--button-ghost-border);
}

button.danger,
.control-button.danger,
.tool-button.danger,
.control-link.danger {
  --button-bg: var(--button-danger-bg);
  --button-bg-hover: var(--button-danger-bg-hover);
  --button-text: var(--button-danger-text);
  --button-border-color: transparent;
}

button:not(.color-button):disabled,
.tool-button:disabled,
.control-button:disabled,
.control-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  filter: saturate(0.8);
  box-shadow: none;
}

.control-link,
.control-access-link {
  text-underline-offset: 0.18em;
}

.login-row input,
.admin-card input,
.settings-row input,
.settings-row select,
#confirmationForm input {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-ink-strong);
}

.join-qrcode,
.control-access-qr,
.control-qr-box {
  background: rgba(255, 255, 255, 0.98);
}

.status-pill,
.artwork-badge,
.selection-chip {
  border-radius: var(--radius-pill);
}

.feedback,
.status-message,
.live-status,
.tracking-status {
  color: var(--color-ink-soft);
}