/* OpenArt-matched chrome (SovoGen branding). Sidebar, homepage wash, wizards, audio, character. */

.sidebar-nav {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sidebar-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.nav-block { margin: 0 0 4px; }
.nav-section--toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 10px 4px 4px !important;
  padding: 0 6px !important;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.nav-section--toggle span:first-child {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--oa-faint, #6b6b6b);
}
.nav-section__chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--oa-faint, #6b6b6b);
  border-bottom: 1.5px solid var(--oa-faint, #6b6b6b);
  transform: rotate(45deg);
  margin-top: -4px;
  opacity: 0.8;
}
.nav-block.is-collapsed .nav-section__chev {
  transform: rotate(-45deg);
  margin-top: 0;
}
.nav-block.is-collapsed .nav-group { display: none !important; }

.nav-group.is-agents {
  display: grid;
  gap: 8px;
  padding: 2px 2px 8px;
}
.nav-link--agent {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--oa-border) !important;
  background: var(--oa-elev, #1a1a1a) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 10px !important;
}
.nav-link--agent.is-active,
a.nav-link--agent[href*="/director"].is-active {
  border-color: color-mix(in srgb, var(--oa-pink) 70%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--oa-pink) 40%, transparent), 0 0 18px color-mix(in srgb, var(--oa-pink) 22%, transparent);
}

.nav-group.is-grid {
  gap: 6px !important;
  padding: 0 2px;
}
.nav-group.is-grid .nav-link {
  min-height: 36px;
  border: 1px solid var(--oa-border) !important;
  background: var(--oa-elev, #1a1a1a) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  padding: 7px 8px !important;
}

body.page-home {
  background:
    radial-gradient(1200px 420px at 50% 118%, rgba(255, 45, 143, 0.38), transparent 58%),
    radial-gradient(900px 380px at 18% 108%, rgba(124, 58, 237, 0.32), transparent 55%),
    radial-gradient(820px 340px at 88% 112%, rgba(59, 130, 246, 0.18), transparent 50%),
    linear-gradient(180deg, #050508 0%, #07070c 55%, #0a0610 100%) !important;
}
body.page-home .content {
  background: transparent;
}
.page-home .sg-hero {
  padding-bottom: 28px;
}
.page-home .sg-hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -40%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255, 45, 143, 0.28), transparent 72%);
  filter: blur(8px);
  z-index: 0;
}
.page-home .sg-hero > * { position: relative; z-index: 1; }

.oa-empty {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: min(62vh, 560px);
  color: var(--oa-muted);
  gap: 8px;
  padding: 32px 16px;
}
.oa-empty__art {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  position: relative;
}
.oa-empty__art::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  opacity: 0.7;
}
.oa-empty h2 {
  margin: 0;
  color: var(--oa-text);
  font-size: 1.45rem;
  font-weight: 600;
}
.oa-empty p { margin: 0; font-size: 14px; }

/* Feature wizard overlay */
.oa-wiz {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,0.62);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.oa-wiz[hidden] { display: none !important; }
.oa-wiz__card {
  width: min(1080px, 100%);
  max-height: min(92vh, 820px);
  overflow: auto;
  scrollbar-width: none;
  background: #141416;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.oa-wiz__card::-webkit-scrollbar { display: none; }
.oa-wiz__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}
.oa-wiz__preview {
  position: relative;
  min-height: 420px;
  background: #0c0c0e;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.oa-wiz__preview.is-portrait { min-height: 560px; }
.oa-wiz__frame {
  width: min(78%, 420px);
  aspect-ratio: 16/10;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(160deg, #2a2438, #151018 55%, #1a1020);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  position: relative;
}
.oa-wiz__preview.is-portrait .oa-wiz__frame {
  width: min(52%, 280px);
  aspect-ratio: 9/16;
}
.oa-wiz__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  font-size: 11px;
  color: #fff;
}
.oa-wiz__copy {
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oa-wiz__copy h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: #fff;
}
.oa-wiz__copy h1 em {
  font-style: normal;
  color: var(--oa-pink, #ff2d8f);
}
.oa-wiz__lead { margin: 0; color: #9a9a9a; }
.oa-wiz__fields { display: grid; gap: 14px; }
.oa-wiz__cta {
  margin-top: auto;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4db8, #c026d3);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.oa-treat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 28px;
}
.oa-treat__card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  background: #101012;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.oa-treat__card.is-on { outline: 2px solid var(--oa-pink); }
.oa-treat__shot {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #333, #111);
}
.oa-treat__card strong, .oa-treat__card span {
  display: block;
  padding: 10px 12px 0;
}
.oa-treat__card span { padding-bottom: 14px; color: #9a9a9a; font-size: 12px; }

.oa-gen {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  min-height: calc(100vh - 88px);
  gap: 0;
}
.oa-gen__rail {
  border-right: 1px solid var(--oa-border);
  background: var(--oa-panel);
  padding: 16px 16px 96px;
  overflow: auto;
  scrollbar-width: none;
}
.oa-gen__rail::-webkit-scrollbar { display: none; }
.oa-gen__stage {
  background: var(--oa-bg);
}

.oa-voice {
  display: grid;
  gap: 14px;
}
.oa-voice__pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--oa-border);
  background: var(--oa-elev);
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.oa-voice__avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fde68a, #86efac);
  color: #111;
  font-weight: 700;
}
.oa-voice__meta small { color: var(--oa-muted); display: block; }
.oa-slider { display: grid; gap: 6px; }
.oa-slider header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.oa-slider input[type="range"] { width: 100%; accent-color: var(--oa-pink); }

.oa-sheet {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(0,0,0,0.45);
  display: grid;
  justify-content: end;
}
.oa-sheet[hidden] { display: none !important; }
.oa-sheet__panel {
  width: min(420px, 100%);
  height: 100%;
  background: #141416;
  border-left: 1px solid rgba(255,255,255,0.08);
  padding: 18px 16px 32px;
  overflow: auto;
}
.oa-voice-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.oa-voice-row:hover, .oa-voice-row.is-on { background: rgba(255,255,255,0.06); }

.oa-char {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  min-height: calc(100vh - 88px);
}
.oa-char__rail {
  border-right: 1px solid var(--oa-border);
  padding: 16px;
  overflow: auto;
  scrollbar-width: none;
}
.oa-char__rail::-webkit-scrollbar { display: none; }
.oa-char__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.oa-char__tile {
  border: 1px solid var(--oa-border);
  border-radius: 16px;
  background: var(--oa-elev);
  min-height: 110px;
  padding: 14px 12px;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.oa-char__tile strong { display: block; margin-top: 8px; font-size: 13px; }
.oa-tool-list { display: grid; gap: 8px; }
.oa-tool-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.oa-tool-row:hover { background: rgba(255,255,255,0.04); }
.oa-tool-row img, .oa-tool-row .oa-tool-row__art {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: #222;
  flex-shrink: 0;
}
.oa-tool-row small { color: var(--oa-muted); display: block; }

.oa-modal {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(0,0,0,0.62);
  display: grid;
  place-items: center;
  padding: 20px;
}
.oa-modal[hidden] { display: none !important; }
.oa-modal__card {
  width: min(980px, 100%);
  background: #161618;
  border-radius: 24px;
  padding: 28px 24px 24px;
  position: relative;
}
.oa-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.oa-modal__opt {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  background: #101012;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: center;
}
.oa-modal__opt img, .oa-modal__shot {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #222;
}
.oa-modal__opt span { display: block; padding: 12px; font-weight: 600; }
.oa-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.oa-lib-card {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.oa-lib-card img, .oa-lib-card .oa-lib-card__art {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 14px;
  object-fit: cover;
  background: #222;
  display: block;
}
.oa-lib-card strong { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; }

.oa-chip-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.oa-chip-or > span { text-align: center; color: var(--oa-muted); font-size: 12px; }

@media (max-width: 1024px) {
  .oa-wiz__card, .oa-gen, .oa-char { grid-template-columns: 1fr; }
  .oa-wiz__preview.is-portrait, .oa-wiz__preview { min-height: 240px; }
  .oa-treat { grid-template-columns: 1fr; }
  .oa-modal__grid { grid-template-columns: 1fr; }
}
body.page-audio .sg-page__head,
body.page-character .sg-page__head,
body.page-production .content > .sg-page__head { display: none; }
body.page-audio .guest-banner,
body.page-character .guest-banner { margin: 8px 16px; }
body.page-audio .sg-tools,
body.page-character .sg-tools {
  display: flex;
  gap: 6px;
  padding: 8px 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.page-audio .sg-tools__tab,
body.page-character .sg-tools__tab {
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--oa-muted);
}
body.page-audio .sg-tools__tab.is-on,
body.page-character .sg-tools__tab.is-on {
  background: var(--oa-elev);
  color: var(--oa-text);
}

.sidebar .sidebar-nav {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sidebar,
.sidebar-footer {
  overflow: hidden;
}

.oa-studio-tabs {
  display: flex;
  gap: 4px;
  padding: 4px 4px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.oa-studio-tabs::-webkit-scrollbar { display: none; }
.oa-studio-tabs a {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--oa-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.oa-studio-tabs a.is-on {
  background: var(--oa-elev);
  color: var(--oa-text);
}

.oa-hero-card {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 16px 18px;
  border-radius: 18px;
  background:
    linear-gradient(105deg, rgba(244, 114, 182, 0.35), rgba(88, 28, 135, 0.55) 55%, rgba(15, 15, 18, 0.9));
  border: 1px solid rgba(255,255,255,0.08);
}
.oa-hero-card strong {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.oa-voice__heading {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 650;
}
.oa-slider__ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--oa-muted);
}
[data-prompt-count] {
  display: block;
  text-align: right;
}

.oa-tool-row {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.oa-char__tile {
  width: 100%;
}
.oa-rail-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}
.oa-rail-foot a {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--oa-border);
  color: var(--oa-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.oa-rail-foot a.is-on {
  background: var(--oa-elev);
  color: var(--oa-text);
}
.oa-char {
  min-height: calc(100vh - 72px);
}
.oa-char__rail {
  display: flex;
  flex-direction: column;
}

body.page-audio .content,
body.page-character .content,
body.page-production .content {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
body.page-audio .sg-page,
body.page-production .sg-prod {
  gap: 0;
}
body.page-audio .sg-studio__editor,
body.page-audio .sg-stage,
body.page-production .oa-gen__rail,
body.page-production .oa-gen__stage {
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.page-audio .sg-studio__editor,
body.page-production .oa-gen__rail,
body.page-character .oa-char__rail {
  background: var(--oa-panel);
  border-right: 1px solid var(--oa-border) !important;
}
body.page-audio [data-sg-panel="tts"] .sg-compose__head,
body.page-audio [data-sg-panel="tts"] .sg-wave,
body.page-audio .sg-stage__tabs,
body.page-audio .sg-sheet-launch,
body.page-production .sg-stage__tabs {
  display: none !important;
}
body.page-audio .sg-studio__body {
  gap: 0;
  min-height: calc(100vh - 72px);
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
}
body.page-audio .sg-generate {
  padding: 12px 16px 20px;
  background: var(--oa-panel);
}
body.page-audio .sg-generate .btn-primary,
body.page-production .sg-generate .btn-primary,
.oa-wiz__cta {
  width: 100%;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff4db8, #c026d3) !important;
  border: 0 !important;
}

.oa-wiz__card--treat {
  display: block;
  width: min(1080px, 100%);
}

@media (max-width: 720px) {
  .oa-char__tiles { grid-template-columns: 1fr; }
  .nav-link--agent { min-height: 40px !important; }
  body.page-audio .sg-studio__body { grid-template-columns: 1fr; }
}