:root {
  color-scheme: light;
  --studio-bg: #f5f7fb;
  --studio-bg-soft: #eef3f8;
  --studio-surface: rgba(255, 255, 255, 0.94);
  --studio-surface-2: #f8fafc;
  --studio-line: #d9e2ee;
  --studio-text: #14243b;
  --studio-muted: #66758c;
  --studio-accent: #315fbe;
  --studio-accent-2: #8067d8;
  --studio-gold: #b67b21;
  --studio-danger: #d94848;
  --studio-shadow: 0 18px 46px rgba(41, 58, 88, 0.13);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --studio-bg: #0d1320;
  --studio-bg-soft: #121b2b;
  --studio-surface: rgba(20, 29, 45, 0.96);
  --studio-surface-2: #172236;
  --studio-line: #293950;
  --studio-text: #eef4ff;
  --studio-muted: #a8b4c7;
  --studio-accent: #88aef7;
  --studio-accent-2: #b39aff;
  --studio-gold: #d8ad5b;
  --studio-danger: #ff767b;
  --studio-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
}

body,
.app {
  background:
    radial-gradient(circle at 8% -12%, rgba(49, 95, 190, 0.13), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(182, 123, 33, 0.1), transparent 30%),
    linear-gradient(180deg, var(--studio-bg), var(--studio-bg-soft) 62%, var(--studio-bg));
  color: var(--studio-text);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app {
  background:
    radial-gradient(circle at 9% -12%, rgba(136, 174, 247, 0.14), transparent 34%),
    radial-gradient(circle at 90% 2%, rgba(216, 173, 91, 0.09), transparent 31%),
    linear-gradient(180deg, #0a101b, #0d1320 56%, #0a1018);
}

.studio-header {
  background: linear-gradient(110deg, #142b5f, #2f58b8 58%, #6d50c6) !important;
  box-shadow: 0 10px 26px rgba(30, 52, 116, 0.22);
}

html[data-theme="dark"] .studio-header {
  background: linear-gradient(110deg, #101827, #182743 55%, #2a2448) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.announcement-focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.header-right {
  gap: 10px !important;
}

.header-right .btn,
.studio-actions .btn,
.theme-toggle {
  box-shadow: none !important;
}

.theme-toggle {
  min-width: 58px;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}

.header-right .btn:not(.btn-primary):not(.recharge-btn),
.studio-actions .btn:not(.btn-primary):not(.btn-danger-sm) {
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--studio-text) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
}

html[data-theme="dark"] .header-right .btn:not(.btn-primary):not(.recharge-btn),
html[data-theme="dark"] .studio-actions .btn:not(.btn-primary):not(.btn-danger-sm) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--studio-text) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.recharge-btn {
  background: linear-gradient(135deg, #d39a38, #b66f16) !important;
  color: #fff !important;
  border: 0 !important;
}

.btn-primary,
.generate-btn {
  background: linear-gradient(135deg, var(--studio-accent), var(--studio-accent-2)) !important;
  border: 0 !important;
  box-shadow: 0 13px 28px rgba(49, 95, 190, 0.22) !important;
}

.studio-main {
  background: transparent !important;
}

.studio-output,
.studio-panel,
.studio-card,
.modal,
.viewer {
  background: var(--studio-surface) !important;
  border-color: var(--studio-line) !important;
  color: var(--studio-text) !important;
  box-shadow: var(--studio-shadow) !important;
}

.studio-topbar,
.task-summary-bar {
  border-color: var(--studio-line) !important;
}

.brand-title {
  color: transparent !important;
  background: linear-gradient(135deg, #10234c, #315fbe 48%, #a26f22);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0 !important;
  text-shadow: 0 10px 24px rgba(21, 45, 98, 0.1);
}

html[data-theme="dark"] .brand-title {
  background: linear-gradient(135deg, #f2f6ff, #9ebcff 50%, #e1bd73);
  -webkit-background-clip: text;
  background-clip: text;
}

.studio-card-title span,
.price-row-front,
.modal p,
.contact-card-title span,
.support-status-card p,
.empty-workspace {
  color: var(--studio-muted) !important;
}

.select,
.input,
.textarea {
  background: var(--studio-surface-2) !important;
  border-color: var(--studio-line) !important;
  color: var(--studio-text) !important;
}

.workspace-canvas {
  background:
    linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
    transparent !important;
}

html[data-theme="dark"] .workspace-canvas {
  background:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    transparent !important;
}

.gallery-item {
  border-color: var(--studio-line) !important;
  background: var(--studio-surface-2) !important;
  box-shadow: 0 14px 34px rgba(32, 47, 75, 0.15) !important;
}

html[data-theme="dark"] .gallery-item {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34) !important;
}

.gallery-fail {
  background: linear-gradient(180deg, #fff0f0, #ffe4e6 58%, #3c1d25) !important;
}

html[data-theme="dark"] .gallery-fail {
  background: linear-gradient(180deg, #3c151a, #261017 60%, #10080a) !important;
}

.fail-icon {
  background: var(--studio-danger) !important;
}

.gallery-meta {
  background: linear-gradient(180deg, transparent, rgba(8, 17, 34, 0.86)) !important;
}

.empty-icon {
  background: rgba(49, 95, 190, 0.08) !important;
  color: var(--studio-accent) !important;
}

.modal-mask {
  backdrop-filter: blur(9px);
}

.modal-kicker {
  color: var(--studio-accent) !important;
}