/* 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;
}