/* Aurora Studio (studio.html) — editorial light UI polish */

body.studio-app {
  --studio-accent: #b8895a;
  --studio-accent-soft: rgba(184, 137, 90, 0.14);
  --studio-accent-border: rgba(184, 137, 90, 0.38);
  --studio-panel: rgba(255, 255, 255, 0.94);
  --studio-divider: rgba(20, 20, 24, 0.08);
}

/* All dark glass panels → light editorial panels */
body.studio-app .glass-dark {
  background: var(--studio-panel) !important;
  backdrop-filter: blur(20px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(165%) !important;
  border: 1px solid var(--aurora-border) !important;
  box-shadow: var(--aurora-shadow) !important;
  color: var(--aurora-text) !important;
}

body.studio-app .text-white {
  color: var(--aurora-text) !important;
}

body.studio-app .text-navy-100 {
  color: #4a4a52 !important;
}

body.studio-app .text-navy-200 {
  color: var(--aurora-muted) !important;
}

body.studio-app .text-flame-300,
body.studio-app .text-flame-400,
body.studio-app .text-flame-600 {
  color: var(--studio-accent) !important;
}

body.studio-app .bg-white\/10,
body.studio-app .bg-white\/15 {
  background: var(--aurora-inset) !important;
}

body.studio-app .bg-white\/15 {
  background: var(--studio-divider) !important;
}

body.studio-app .border-white\/10,
body.studio-app .border-white\/15,
body.studio-app .border-white\/60 {
  border-color: var(--aurora-border) !important;
}

body.studio-app .bg-flame-500\/20,
body.studio-app .bg-flame-500\/25 {
  background: var(--studio-accent-soft) !important;
}

body.studio-app .border-flame-500,
body.studio-app .hover\:border-flame-400:hover,
body.studio-app .hover\:border-flame-500:hover {
  border-color: var(--studio-accent-border) !important;
}

body.studio-app .from-flame-500,
body.studio-app .bg-flame-500,
body.studio-app .bg-gradient-to-r.from-flame-500 {
  --tw-gradient-from: #e8c9a0 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #a8764a var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #c8956c, var(--tw-gradient-to) !important;
  background-image: var(--aurora-gradient-accent) !important;
}

body.studio-app .from-flame-500.to-flame-300,
body.studio-app .from-flame-500.to-flame-400 {
  background-image: var(--aurora-gradient-accent) !important;
}

body.studio-app .glow {
  box-shadow: 0 8px 24px -8px rgba(184, 137, 90, 0.45) !important;
}

/* Canvas stage */
body.studio-app .studio-body > main {
  background-color: var(--aurora-canvas) !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(20, 20, 24, 0.07) 1px, transparent 0) !important;
  background-size: 22px 22px !important;
  border-color: var(--aurora-border) !important;
}

/* Dock & chips */
body.studio-app .dock-btn:hover {
  background: var(--aurora-hover) !important;
  color: var(--aurora-text) !important;
}

body.studio-app .dock-btn.active {
  background: var(--aurora-gradient-accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(184, 137, 90, 0.55) !important;
}

body.studio-app .dock-btn.active::before {
  background: var(--studio-accent) !important;
}

body.studio-app .chip:hover {
  border-color: var(--studio-accent-border) !important;
  color: var(--aurora-text) !important;
}

body.studio-app .chip.active {
  background: var(--aurora-text) !important;
  border-color: var(--aurora-text) !important;
  color: #fff !important;
}

/* Layers */
body.studio-app .layer-row:hover {
  background: var(--aurora-hover) !important;
}

body.studio-app .layer-row.sel {
  background: var(--studio-accent-soft) !important;
  border-color: var(--studio-accent-border) !important;
}

body.studio-app .layer-row.dragover {
  border-top-color: var(--studio-accent) !important;
}

/* Inspector & context bar fields */
body.studio-app #ctxBar .num,
body.studio-app #inspBody .num,
body.studio-app #rightPanel .num,
body.studio-app #rightPanel select.num,
body.studio-app #ctxBar select.num {
  border-color: var(--aurora-border) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--aurora-text) !important;
}

body.studio-app #ctxType {
  background: var(--studio-accent-soft) !important;
  color: var(--studio-accent) !important;
}

body.studio-app #rightPanel .sec-h,
body.studio-app #ctxBar label {
  color: var(--aurora-muted) !important;
}

body.studio-app #rightPanel b.text-flame-300,
body.studio-app #inspBody b.text-flame-300 {
  color: var(--studio-accent) !important;
}

/* Page strip active page */
body.studio-app #pageStrip button.border-flame-500 {
  background: var(--studio-accent-soft) !important;
  color: var(--aurora-text) !important;
  border-color: var(--studio-accent-border) !important;
}

/* Toast — keep readable on canvas */
body.studio-app #toast {
  background: rgba(20, 20, 24, 0.88) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.studio-app #toast.text-white {
  color: #fff !important;
}

/* Status bar */
body.studio-app .studio-body > main > .glass.pointer-events-none {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--aurora-border) !important;
}

/* Modal overlay */
body.studio-app #designsModal {
  background: rgba(20, 20, 24, 0.35) !important;
}

/* Mobile panel overlay — lighter */
body.studio-app.aurora-panel-open .aurora-panel-overlay {
  background: rgba(20, 20, 24, 0.28) !important;
}

/* Tooltips */
body.studio-app .tt:hover::after {
  background: #141418 !important;
  color: #fff !important;
}

/* Range inputs */
body.studio-app input[type="range"] {
  background: rgba(20, 20, 24, 0.08) !important;
}

body.studio-app input[type="range"]::-webkit-slider-thumb {
  border-color: var(--studio-accent) !important;
  box-shadow: 0 2px 8px rgba(184, 137, 90, 0.4) !important;
}

body.studio-app .num:focus {
  border-color: var(--studio-accent) !important;
  box-shadow: 0 0 0 3px rgba(184, 137, 90, 0.15) !important;
}

/* Accent buttons keep white label text */
body.studio-app .from-flame-500.text-white,
body.studio-app .bg-flame-500.text-white,
body.studio-app #btnExport,
body.studio-app #btnAiBg,
body.studio-app #dmSave {
  color: #fff !important;
}

/* Mobile — keep toolbar above panel overlay so Library/Inspector toggles stay clickable */
@media (max-width: 1023px) {
  body.studio-app .studio-shell > header.glass-dark {
    position: relative;
    z-index: 92;
  }

  body.studio-app .studio-rail {
    position: relative;
    z-index: 92;
  }
}

/* Local tool tag in header when shell active */
body.studio-app.aurora-has-shell .aurora-local-tool-tag {
  background: var(--aurora-inset) !important;
  border-color: var(--aurora-border) !important;
}

/* Panel & inspector dark buttons → editorial */
body.studio-app #panelBody .bg-navy-700,
body.studio-app #inspBody .bg-navy-700,
body.studio-app #rightPanel .bg-navy-700,
body.studio-app #panelBody button.bg-navy-700 {
  background: #141418 !important;
  color: #fff !important;
}

body.studio-app #panelBody .bg-navy-700:hover,
body.studio-app #inspBody .bg-navy-700:hover {
  background: #2a2a30 !important;
}

body.studio-app #panelBody button.hover\:bg-white:hover,
body.studio-app #inspBody button.hover\:bg-white:hover {
  background: var(--aurora-hover) !important;
  color: var(--aurora-text) !important;
}

body.studio-app #designsModal {
  background: rgba(20, 20, 24, 0.32) !important;
}

body.studio-app #dmName {
  min-width: 0;
}

/* Collab modal — light overlay */
body.studio-app #studioCollabModal {
  background: rgba(20, 20, 24, 0.35) !important;
}

body.studio-app #studioCollabModal .glass {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--aurora-border) !important;
}