/* Xingque Studio 2026: visual layer only. Task, account and provider behavior remain in app.js. */
body.studio-redesign {
  --sq-bg: var(--ff-subtle);
  --sq-panel: var(--ff-surface);
  --sq-panel-soft: var(--ff-subtle);
  --sq-ink: var(--ff-ink);
  --sq-muted: var(--ff-muted);
  --sq-line: color-mix(in srgb, var(--ff-line-strong) 10%, transparent);
  --sq-sidebar: #0d0f12;
  --sq-sidebar-soft: #171a1f;
  --sq-accent: var(--ff-ink);
  --sq-accent-ink: #ffffff;
  --sq-shadow: 0 20px 60px color-mix(in srgb, var(--ff-shadow-ink) 10%, transparent);
  background: var(--sq-bg);
  color: var(--sq-ink);
}

:root[data-theme="dark"] body.studio-redesign {
  --sq-bg: #0b0d10;
  --sq-panel: #13161a;
  --sq-panel-soft: #1b1f24;
  --sq-ink: #f5f7fa;
  --sq-muted: var(--ff-muted);
  --sq-line: color-mix(in srgb, var(--ff-line) 10%, transparent);
  --sq-accent: var(--ff-secondary);
  --sq-accent-ink: var(--ff-ink);
  --sq-shadow: 0 22px 70px color-mix(in srgb, var(--ff-shadow-ink) 32%, transparent);
}

:root[data-theme="light"] body.studio-redesign {
  --sq-sidebar: var(--ff-surface);
  --sq-sidebar-soft: var(--ff-subtle);
}

body.studio-redesign,
body.studio-redesign button,
body.studio-redesign input,
body.studio-redesign textarea,
body.studio-redesign select {
  font-family: var(--ff-font, system-ui, sans-serif);
  letter-spacing: 0;
}

body.studio-redesign svg.lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  flex: 0 0 auto;
}

body.studio-redesign .legacy-drama-surface,
body.studio-redesign #page-drama,
body.studio-redesign #page-canvas,
body.studio-redesign .project-strip,
body.studio-redesign .history-dream,
body.studio-redesign .history-new {
  display: none !important;
}

/* Shell and navigation */
body.studio-redesign .app {
  min-height: 100vh;
  padding-left: 248px;
  background: var(--sq-bg);
  transition: padding-left .24s cubic-bezier(.2, .8, .2, 1);
}

body.studio-redesign .app.sidebar-collapsed {
  padding-left: 76px;
}

body.studio-redesign .sidebar {
  width: 248px;
  padding: 16px 12px 12px;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--ff-line) 8%, transparent);
  border-radius: 0;
  background: var(--sq-sidebar);
  color: #f5f7fa;
  box-shadow: none;
  backdrop-filter: none;
}

body.studio-redesign .sidebar.collapsed,
body.studio-redesign .sidebar.collapsed:hover {
  width: 76px;
  padding-inline: 10px;
}

body.studio-redesign .sidebar:not(.collapsed):hover,
body.studio-redesign .sidebar.menu-locked {
  width: 248px;
  box-shadow: 24px 0 60px color-mix(in srgb, var(--ff-shadow-ink) 20%, transparent);
}

body.studio-redesign .brand {
  height: 42px;
  margin: 0 4px 14px;
  padding: 0 4px 0 2px;
}

body.studio-redesign .brand .logo-line {
  gap: 10px;
  color: #fff;
}

body.studio-redesign .brand .logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--ff-surface);
  color: var(--ff-ink);
  font-size: 15px;
  font-weight: 850;
}

body.studio-redesign .brand-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

body.studio-redesign .brand-copy strong {
  font-size: 15px;
  line-height: 1.1;
}

body.studio-redesign .brand-copy small {
  color: var(--ff-muted);
  font-size: 9px;
  font-weight: 700;
}

body.studio-redesign .sidebar-toggle {
  width: 32px;
  height: 32px;
  color: var(--ff-muted);
  border-radius: 7px;
}

body.studio-redesign .sidebar-toggle:hover {
  color: #fff;
  background: #22262c;
}

body.studio-redesign .sidebar-new {
  height: 42px;
  margin: 0 2px 12px;
  padding: 0 13px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--sq-accent-ink);
  background: var(--sq-accent);
  font-size: 13px;
  font-weight: 780;
}

body.studio-redesign .sidebar-new:hover {
  background: #5edaf0;
}

body.studio-redesign .nav {
  display: grid;
  gap: 3px;
}

body.studio-redesign .nav button {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 7px;
  gap: 11px;
  color: var(--ff-muted);
  background: transparent;
  font-size: 13px;
  font-weight: 650;
}

body.studio-redesign .nav button:hover {
  color: #fff;
  background: #191c21;
}

body.studio-redesign .nav button.active {
  color: #fff;
  background: #23272d;
  box-shadow: inset 2px 0 0 var(--sq-accent);
}

body.studio-redesign .nav button > span {
  width: auto;
  height: auto;
  display: inline;
  color: inherit;
  background: transparent;
  font-size: inherit;
}

body.studio-redesign .history-head {
  margin: 24px 10px 9px;
  color: var(--ff-muted);
  font-size: 11px;
  font-weight: 720;
  text-transform: uppercase;
}

body.studio-redesign .history {
  min-height: 0;
  max-height: none;
  padding: 0 2px 12px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #333942 transparent;
}

body.studio-redesign .history.empty {
  display: block;
}

body.studio-redesign .history-card {
  margin-bottom: 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ff-muted);
  background: transparent;
}

body.studio-redesign .history-card:hover {
  border-color: color-mix(in srgb, var(--ff-line) 8%, transparent);
  background: #171a1f;
}

body.studio-redesign .history-card.active {
  border-color: rgba(36, 199, 232, .34);
  background: #1b2025;
}

body.studio-redesign .history-thumb {
  border-radius: 5px;
  overflow: hidden;
  background: #292e35;
}

body.studio-redesign .history-copy b {
  color: #edf0f4;
  font-size: 12px;
}

body.studio-redesign .history-copy small,
body.studio-redesign .empty-state span {
  color: var(--ff-muted);
  font-size: 10px;
}

body.studio-redesign .empty-state {
  margin: 4px 0;
  padding: 14px 11px;
  border: 1px dashed var(--ff-line-strong);
  border-radius: 7px;
  background: transparent;
}

body.studio-redesign .empty-state b {
  color: var(--ff-muted);
  font-size: 12px;
}

body.studio-redesign .sidebar-settings {
  position: relative;
  inset: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ff-line) 8%, transparent);
  background: var(--sq-sidebar);
}

body.studio-redesign .settings-main {
  width: 100%;
  height: 40px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  color: var(--ff-muted);
  background: transparent;
}

body.studio-redesign .settings-main:hover {
  color: #fff;
  background: #191c21;
}

body.studio-redesign .settings-panel {
  bottom: 54px;
  border-color: color-mix(in srgb, var(--ff-line) 10%, transparent);
  background: #171a1f;
  color: #fff;
  box-shadow: 0 20px 56px color-mix(in srgb, var(--ff-shadow-ink) 45%, transparent);
}

body.studio-redesign .sidebar.collapsed .sidebar-new {
  width: 44px;
  padding: 0;
  justify-content: center;
}

body.studio-redesign .sidebar.collapsed .sidebar-new span,
body.studio-redesign .sidebar.collapsed .brand-copy,
body.studio-redesign .sidebar.collapsed .nav button > span,
body.studio-redesign .sidebar.collapsed .settings-main > span {
  display: none;
}

body.studio-redesign .sidebar.collapsed .logo-line {
  display: flex;
}

body.studio-redesign .sidebar.collapsed .brand {
  justify-content: center;
}

body.studio-redesign .sidebar.collapsed .brand .logo,
body.studio-redesign .sidebar.collapsed .sidebar-toggle {
  display: none;
}

body.studio-redesign .sidebar.collapsed .nav button,
body.studio-redesign .sidebar.collapsed:hover .nav button,
body.studio-redesign .sidebar.collapsed .settings-main {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  font-size: 0;
}

body.studio-redesign .sidebar.collapsed .history-head,
body.studio-redesign .sidebar.collapsed .history {
  opacity: 0;
  pointer-events: none;
}

/* Main workspace */
body.studio-redesign .main {
  min-width: 0;
  background: var(--sq-bg);
}

body.studio-redesign .topbar {
  height: 58px;
  padding: 0 30px;
  color: var(--sq-ink);
  border-bottom: 1px solid var(--sq-line);
  background: color-mix(in srgb, var(--sq-bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
}

body.studio-redesign .topbar .crumb {
  color: var(--sq-muted);
  font-weight: 650;
}

body.studio-redesign .crumb {
  font-size: 13px;
  font-weight: 720;
}

body.studio-redesign .role {
  height: 30px;
  border: 1px solid var(--sq-line);
  border-radius: 6px;
  color: var(--sq-muted);
  background: var(--sq-panel);
  font-size: 11px;
}

body.studio-redesign .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: #272c33;
}

body.studio-redesign .page {
  min-height: calc(100vh - 58px);
  padding: 28px 30px 76px;
}

body.studio-redesign .page-create {
  padding: 0 0 76px;
}

body.studio-redesign .page-create .hero-bg {
  display: none;
}

body.studio-redesign .hero-content {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 30px 30px 0;
}

/* Featured work */
body.studio-redesign .showcase {
  width: 100%;
  min-height: 390px;
  margin: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 2fr);
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--ff-line) 7%, transparent);
  border-radius: 8px;
  overflow: hidden;
  background: #111316;
  box-shadow: 0 28px 90px color-mix(in srgb, var(--ff-shadow-ink) 24%, transparent);
}

body.studio-redesign .showcase-intro {
  min-width: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  border-radius: 7px;
  color: #f7f9fb;
  background:
    linear-gradient(180deg, rgba(13, 15, 18, .08), rgba(13, 15, 18, .72)),
    url("./assets/showcase/xingque-ecommerce-studio-mosaic.jpg") 0 0 / 200% 200% no-repeat;
}

body.studio-redesign .showcase-intro .eyebrow {
  margin-bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sq-accent);
  font-size: 11px;
  font-weight: 760;
}

body.studio-redesign .showcase-intro h2 {
  margin: 42px 0 10px;
  font-size: 26px;
  line-height: 1.22;
  font-weight: 760;
}

body.studio-redesign .showcase-intro p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  line-height: 1.55;
}

body.studio-redesign .showcase-create {
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sq-accent-ink);
  background: var(--sq-accent);
  font-size: 12px;
  font-weight: 760;
}

body.studio-redesign .showcase-track {
  min-width: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
  scroll-snap-type: none;
}

body.studio-redesign .showcase-card {
  --motion-y: 0px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ff-line) 8%, transparent);
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  color: #fff;
  background: #1b1e23;
  box-shadow: none;
  transform: translate3d(0, var(--motion-y), 0) !important;
  opacity: 1 !important;
  isolation: isolate;
}

body.studio-redesign .showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("./assets/showcase/xingque-ecommerce-studio-mosaic.jpg");
  background-size: 200% 200%;
  background-repeat: no-repeat;
  filter: saturate(.92) contrast(1.02);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

body.studio-redesign .showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02) 34%, rgba(3, 5, 8, .82) 100%);
}

body.studio-redesign .showcase-card:nth-child(1)::before { background-position: 0 0; }
body.studio-redesign .showcase-card:nth-child(2)::before { background-position: 100% 0; }
body.studio-redesign .showcase-card:nth-child(3)::before { background-position: 0 100%; }
body.studio-redesign .showcase-card:nth-child(4)::before { background-position: 100% 100%; }

body.studio-redesign .showcase-card:hover::before,
body.studio-redesign .showcase-card:focus-visible::before {
  transform: scale(1.035);
  filter: saturate(1.03) contrast(1.04);
}

body.studio-redesign .showcase-index {
  position: absolute;
  left: 12px;
  top: 11px;
  width: auto;
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
  font-weight: 760;
}

body.studio-redesign .showcase-play {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--ff-line) 24%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 13, .4);
  backdrop-filter: blur(10px);
}

body.studio-redesign .showcase-play svg {
  width: 13px;
  height: 13px;
  margin-left: 1px;
  fill: currentColor;
}

body.studio-redesign .showcase-copy {
  width: min(100%, 320px);
  display: grid;
  gap: 4px;
  text-align: left;
}

body.studio-redesign .showcase-copy small {
  color: rgba(255, 255, 255, .64);
  font-size: 10px;
}

body.studio-redesign .showcase-copy strong {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

body.studio-redesign .showcase-arrow,
body.studio-redesign .showcase-dots {
  display: none;
}

/* Prompt composer */
body.studio-redesign .hero-title {
  margin: 54px auto 20px;
  text-align: left;
}

body.studio-redesign .hero-kicker,
body.studio-redesign .section-eyebrow {
  color: var(--sq-accent);
  font-size: 10px;
  font-weight: 800;
}

body.studio-redesign .hero-content h1 {
  margin: 7px 0 8px;
  color: var(--sq-ink);
  font-size: 36px;
  line-height: 1.18;
  font-weight: 750;
  text-shadow: none;
}

body.studio-redesign .hero-question::before {
  content: "，";
}

body.studio-redesign .hero-title p {
  margin: 0;
  color: var(--sq-muted);
  font-size: 14px;
}

body.studio-redesign .composer {
  width: 100%;
  min-height: 190px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--sq-line);
  border-radius: 8px;
  background: var(--sq-panel);
  box-shadow: var(--sq-shadow);
}

body.studio-redesign .composer:focus-within {
  border-color: rgba(36, 199, 232, .48);
  box-shadow: 0 26px 72px rgba(16, 22, 30, .16), 0 0 0 2px rgba(36, 199, 232, .1);
}

body.studio-redesign .prompt-editor {
  min-height: 104px;
  padding: 3px 5px 14px;
  color: var(--sq-ink);
  font-size: 14px;
  line-height: 1.75;
}

body.studio-redesign .prompt-editor:empty::before {
  color: color-mix(in srgb, var(--sq-muted) 72%, transparent);
}

body.studio-redesign .composer-tools {
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--sq-line);
}

body.studio-redesign .composer .round,
body.studio-redesign .composer .chip {
  min-height: 34px;
  border: 1px solid var(--sq-line);
  border-radius: 6px;
  color: var(--sq-muted);
  background: var(--sq-panel-soft);
  font-size: 11px;
}

body.studio-redesign .composer .round {
  width: 34px;
  height: 34px;
}

body.studio-redesign .composer .round:hover,
body.studio-redesign .composer .chip:hover,
body.studio-redesign .composer .chip.menu-open {
  color: var(--sq-ink);
  border-color: rgba(36, 199, 232, .38);
  background: color-mix(in srgb, var(--sq-panel-soft) 76%, var(--sq-accent));
}

body.studio-redesign .reference-mode-chip.active {
  color: var(--ff-ink);
  border-color: transparent;
  background: #82dceb;
}

body.studio-redesign .credit-cost {
  color: var(--sq-muted);
  font-size: 11px;
}

body.studio-redesign .send,
body.studio-redesign .arrow-send {
  width: 38px;
  height: 38px;
  min-width: 38px;
  margin-left: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sq-accent-ink);
  background: var(--sq-accent);
  box-shadow: 0 8px 22px rgba(36, 199, 232, .25);
}

body.studio-redesign .send:hover {
  background: #68dff2;
  transform: translateY(-1px);
}

/* Templates */
body.studio-redesign .template-library {
  margin: 58px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.studio-redesign .template-head {
  margin-bottom: 18px;
}

body.studio-redesign .template-head b {
  display: block;
  color: var(--sq-ink);
  font-size: 22px;
}

body.studio-redesign .template-head span {
  margin-top: 5px;
  color: var(--sq-muted);
  font-size: 12px;
}

body.studio-redesign .template-head input {
  width: min(260px, 100%);
  height: 38px;
  padding: 0 13px;
  border-radius: 6px;
  background: var(--sq-panel);
}

body.studio-redesign .template-tabs,
body.studio-redesign .template-subtabs {
  gap: 6px;
  margin-bottom: 16px;
}

body.studio-redesign .template-tabs button,
body.studio-redesign .template-subtabs button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--sq-line);
  border-radius: 6px;
  color: var(--sq-muted);
  background: transparent;
  font-size: 11px;
}

body.studio-redesign .template-tabs button:hover,
body.studio-redesign .template-tabs button.active,
body.studio-redesign .template-subtabs button:hover,
body.studio-redesign .template-subtabs button.active {
  color: var(--sq-ink);
  border-color: color-mix(in srgb, var(--sq-accent) 46%, var(--sq-line));
  background: color-mix(in srgb, var(--sq-accent) 12%, var(--sq-panel));
}

body.studio-redesign .template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.studio-redesign .template-card {
  min-height: 178px;
  padding: 17px;
  border: 1px solid var(--sq-line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 10px;
  text-align: left;
  color: var(--sq-ink);
  background: var(--sq-panel);
  box-shadow: none;
}

body.studio-redesign .template-card:hover,
body.studio-redesign .template-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(36, 199, 232, .4);
  box-shadow: 0 18px 42px rgba(15, 20, 28, .12);
}

body.studio-redesign .template-icon {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--sq-accent-ink);
  background: var(--sq-accent);
}

body.studio-redesign .template-icon svg {
  width: 15px;
  height: 15px;
}

body.studio-redesign .template-card > small {
  grid-column: 2;
  color: var(--sq-muted);
  font-size: 9px;
}

body.studio-redesign .template-card > b {
  grid-column: 2;
  margin-top: 2px;
  font-size: 14px;
}

body.studio-redesign .template-card > span:not(.template-icon) {
  grid-column: 1 / -1;
  margin-top: 14px;
  color: var(--sq-muted);
  font-size: 11px;
  line-height: 1.62;
}

body.studio-redesign .template-card em {
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sq-ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 720;
}

body.studio-redesign .template-card em svg {
  width: 13px;
  height: 13px;
}

body.studio-redesign .template-more-row {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

body.studio-redesign .template-more {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--sq-line);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sq-muted);
  background: var(--sq-panel);
  font-size: 11px;
  font-weight: 680;
}

body.studio-redesign .template-more:hover {
  color: var(--sq-ink);
  border-color: rgba(36, 199, 232, .4);
}

body.studio-redesign .template-more.expanded svg {
  transform: rotate(180deg);
}

/* Employee picks */
body.studio-redesign .creator-wall {
  margin-top: 68px;
  padding-top: 32px;
  border-top: 1px solid var(--sq-line);
}

body.studio-redesign .creator-wall .section-head {
  margin-bottom: 20px;
}

body.studio-redesign .creator-wall h2 {
  margin: 5px 0 4px;
  color: var(--sq-ink);
  font-size: 22px;
}

body.studio-redesign .creator-wall .section-head p {
  margin: 0;
  color: var(--sq-muted);
  font-size: 12px;
}

body.studio-redesign .creator-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 14px;
}

body.studio-redesign .creator-card {
  gap: 10px;
  border-radius: 8px;
}

body.studio-redesign .creator-thumb {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-image: url("./assets/showcase/xingque-ecommerce-studio-mosaic.jpg");
  background-size: 200% 200%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ff-shadow-ink) 8%, transparent);
}

body.studio-redesign .creator-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .36));
}

body.studio-redesign .creator-thumb-1,
body.studio-redesign .creator-thumb-5 { background-position: 0 0; }
body.studio-redesign .creator-thumb-2 { background-position: 100% 0; }
body.studio-redesign .creator-thumb-3,
body.studio-redesign .creator-thumb-6 { background-position: 0 100%; }
body.studio-redesign .creator-thumb-4 { background-position: 100% 100%; }

body.studio-redesign .creator-play {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(9, 11, 14, .62);
  backdrop-filter: blur(10px);
}

body.studio-redesign .creator-play svg {
  width: 12px;
  height: 12px;
  margin-left: 1px;
  fill: currentColor;
}

body.studio-redesign .creator-copy {
  display: grid;
  gap: 4px;
  padding: 0 2px;
}

body.studio-redesign .creator-copy b,
body.studio-redesign .creator-copy small {
  padding: 0;
}

body.studio-redesign .creator-copy b {
  color: var(--sq-ink);
  font-size: 13px;
}

body.studio-redesign .creator-copy small {
  color: var(--sq-muted);
  font-size: 10px;
}

/* Task mode keeps the established generation flow, but uses the new chrome. */
body.studio-redesign .page-create.task-mode .hero-content {
  width: min(1160px, 100%);
  padding-top: 28px;
}

body.studio-redesign .page-create.task-mode .composer {
  margin-top: 28px;
}

body.studio-redesign .video-task-card {
  border-color: var(--sq-line);
  color: var(--sq-ink);
}

body.studio-redesign .task-preview {
  border: 1px solid var(--sq-line);
  border-radius: 8px;
  background: #171a1f;
}

/* Player */
body.studio-redesign .video-dialog {
  width: min(1180px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ff-line) 12%, transparent);
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  background: #0b0d10;
  box-shadow: 0 36px 120px color-mix(in srgb, var(--ff-shadow-ink) 70%, transparent);
}

body.studio-redesign .video-dialog::backdrop {
  background: rgba(3, 5, 8, .82);
  backdrop-filter: blur(10px);
}

body.studio-redesign .video-player-shell {
  background: #0b0d10;
}

body.studio-redesign .video-frame {
  border-radius: 0;
  background: #07090b;
}

body.studio-redesign .video-frame video {
  object-fit: contain;
  background: #07090b;
}

body.studio-redesign .player-close {
  width: 34px;
  height: 34px;
  right: 12px;
  top: 12px;
  border: 1px solid color-mix(in srgb, var(--ff-line) 16%, transparent);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 10, 13, .62);
  font-size: 20px;
}

body.studio-redesign .player-play {
  width: 62px;
  height: 62px;
  border: 1px solid color-mix(in srgb, var(--ff-line) 24%, transparent);
  color: #fff;
  background: rgba(7, 9, 12, .62);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ff-shadow-ink) 36%, transparent);
  backdrop-filter: blur(12px);
}

body.studio-redesign .player-overlay {
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ff-line) 10%, transparent);
  border-radius: 7px;
  background: rgba(8, 10, 13, .72);
  backdrop-filter: blur(16px);
}

body.studio-redesign .player-actions button,
body.studio-redesign .player-mini-play {
  border: 0;
  border-radius: 5px;
  color: var(--ff-muted);
  background: color-mix(in srgb, var(--ff-surface) 8%, transparent);
}

body.studio-redesign .player-meta,
body.studio-redesign .task-detail-panel {
  border-color: color-mix(in srgb, var(--ff-line) 10%, transparent);
  background: #111418;
}

body.studio-redesign .player-meta span,
body.studio-redesign .task-detail-panel {
  color: var(--ff-muted);
}

/* Login */
body.studio-redesign .login {
  background: #0b0d10;
}

body.studio-redesign .login-bg {
  opacity: .55;
  background:
    linear-gradient(90deg, rgba(11, 13, 16, .76), rgba(11, 13, 16, .92)),
    url("./assets/showcase/xingque-ecommerce-studio-mosaic.jpg") center / cover no-repeat;
}

body.studio-redesign .login-bg::before {
  display: none;
}

body.studio-redesign .login-card {
  border: 1px solid color-mix(in srgb, var(--ff-line) 10%, transparent);
  border-radius: 8px;
  color: #f7f9fb;
  background: rgba(17, 20, 24, .88);
  box-shadow: 0 34px 120px color-mix(in srgb, var(--ff-shadow-ink) 55%, transparent);
  backdrop-filter: blur(22px);
}

body.studio-redesign .login-card p,
body.studio-redesign .login-card label {
  color: var(--ff-muted);
}

body.studio-redesign .login-card input {
  border-color: color-mix(in srgb, var(--ff-line) 12%, transparent);
  color: #fff;
  background: color-mix(in srgb, var(--ff-surface) 7%, transparent);
}

body.studio-redesign .login-card .primary {
  color: var(--sq-accent-ink);
  background: var(--sq-accent);
}

@media (max-width: 1180px) {
  body.studio-redesign .showcase {
    grid-template-columns: minmax(220px, .62fr) minmax(0, 1.5fr);
  }

  body.studio-redesign .template-grid,
  body.studio-redesign .creator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  body.studio-redesign .app,
  body.studio-redesign .app.sidebar-collapsed {
    padding-left: 0;
  }

  body.studio-redesign .sidebar,
  body.studio-redesign .sidebar.collapsed,
  body.studio-redesign .sidebar.collapsed:hover {
    position: sticky;
    left: auto;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 62px;
    min-height: 62px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ff-line) 8%, transparent);
    z-index: 40;
  }

  body.studio-redesign .sidebar .brand {
    width: auto;
    margin: 0 auto 0 0;
  }

  body.studio-redesign .sidebar .brand-copy,
  body.studio-redesign .sidebar .sidebar-toggle,
  body.studio-redesign .sidebar .history-head,
  body.studio-redesign .sidebar .history,
  body.studio-redesign .sidebar .sidebar-settings,
  body.studio-redesign .sidebar-new span,
  body.studio-redesign .nav button > span {
    display: none;
  }

  body.studio-redesign .sidebar-new {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  body.studio-redesign .nav {
    display: flex;
    gap: 4px;
  }

  body.studio-redesign .nav button,
  body.studio-redesign .sidebar.collapsed .nav button,
  body.studio-redesign .sidebar.collapsed:hover .nav button {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }

  body.studio-redesign .topbar {
    height: 48px;
    padding: 0 14px;
  }

  body.studio-redesign .hero-content {
    padding: 18px 14px 0;
  }

  body.studio-redesign .showcase {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  body.studio-redesign .showcase-intro {
    min-height: 230px;
  }

  body.studio-redesign .showcase-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.studio-redesign .showcase-card {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  body.studio-redesign .top-right .role:not(.credit-pill) {
    display: none !important;
  }

  body.studio-redesign .template-grid,
  body.studio-redesign .creator-grid {
    grid-template-columns: 1fr;
  }

  body.studio-redesign .showcase-intro {
    min-height: 218px;
    padding: 20px;
  }

  body.studio-redesign .showcase-track {
    display: flex;
    min-width: 0;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body.studio-redesign .showcase-track::-webkit-scrollbar {
    display: none;
  }

  body.studio-redesign .showcase-card {
    flex: 0 0 min(78vw, 310px);
    min-height: 152px;
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
  }

  body.studio-redesign .hero-title {
    margin-top: 30px;
  }

  body.studio-redesign .hero-content h1 {
    font-size: 28px;
  }

  body.studio-redesign .hero-question {
    display: block;
  }

  body.studio-redesign .hero-question::before {
    content: "";
  }

  body.studio-redesign .composer {
    min-height: 230px;
    padding: 14px;
  }

  body.studio-redesign .composer-tools {
    align-items: center;
  }

  body.studio-redesign .composer .chip {
    max-width: calc(50vw - 36px);
  }

  body.studio-redesign .send,
  body.studio-redesign .arrow-send {
    width: 38px;
    min-width: 38px;
    margin-left: auto;
  }

  body.studio-redesign .template-head {
    gap: 14px;
  }

  body.studio-redesign .template-head input {
    width: 100%;
  }

  body.studio-redesign .video-dialog {
    width: 100vw;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.studio-redesign .showcase-card::before,
  body.studio-redesign .template-card,
  body.studio-redesign .creator-thumb {
    transition: none !important;
  }
}

/* 2026-08-13 practical UI fixes: bounded content, reliable controls and theme parity. */
body.studio-redesign .sidebar.collapsed .brand {
  display: grid;
  place-items: center;
}

body.studio-redesign .sidebar.collapsed .brand .logo-line {
  display: none;
}

body.studio-redesign .sidebar.collapsed .sidebar-toggle {
  display: grid;
  place-items: center;
  margin: 0 auto;
  color: var(--ff-muted);
  pointer-events: auto;
}

body.studio-redesign .sidebar-toggle {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  pointer-events: auto;
  touch-action: manipulation;
}

body.studio-redesign .sidebar.collapsed .sidebar-toggle {
  display: grid !important;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body.studio-redesign .history-card,
body.studio-redesign .history-main {
  min-height: 46px;
  max-height: 46px;
}

body.studio-redesign .history-card {
  overflow: hidden;
}

body.studio-redesign .history-copy,
body.studio-redesign .history-copy b,
body.studio-redesign .history-copy small {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Keep the familiar homepage structure and add a compact visual work strip. */
body.studio-redesign .showcase {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body.studio-redesign .showcase-head {
  min-height: 38px;
  margin: 0 0 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  color: var(--sq-ink);
}

body.studio-redesign .showcase-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

body.studio-redesign .showcase-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sq-accent);
  font-size: 11px;
  font-weight: 760;
}

body.studio-redesign .showcase-head h2 {
  margin: 0;
  color: var(--sq-ink);
  font-size: 20px;
  line-height: 1.2;
}

body.studio-redesign .showcase-head p {
  margin: 0;
  color: var(--sq-muted);
  font-size: 12px;
}

body.studio-redesign .showcase-track {
  width: 100%;
  min-height: 156px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 156px;
  gap: 12px;
  overflow: hidden;
}

body.studio-redesign .showcase-card {
  height: 156px;
  min-height: 156px;
  padding: 14px;
  border-radius: 7px;
}

body.studio-redesign .showcase-card::before {
  background-image: var(--art, url("./assets/showcase/xingque-ecommerce-studio-mosaic.jpg"));
  background-size: cover;
  background-position: center;
}

body.studio-redesign .showcase-card:not([style]):nth-child(1)::before { background-size: 200% 200%; background-position: 0 0; }
body.studio-redesign .showcase-card:not([style]):nth-child(2)::before { background-size: 200% 200%; background-position: 100% 0; }
body.studio-redesign .showcase-card:not([style]):nth-child(3)::before { background-size: 200% 200%; background-position: 0 100%; }
body.studio-redesign .showcase-card:not([style]):nth-child(4)::before { background-size: 200% 200%; background-position: 100% 100%; }

/* Long prompts scroll inside the editor and never resize the whole feed. */
body.studio-redesign .composer {
  min-height: 0;
}

body.studio-redesign .prompt-editor {
  min-height: 116px;
  max-height: min(230px, 34vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: none;
  scrollbar-gutter: stable;
}

body.studio-redesign .task-prompt,
body.studio-redesign .task-prompt:hover,
body.studio-redesign .video-task-card .task-prompt:hover {
  width: auto;
  height: 3.4em;
  max-height: 3.4em;
  margin: 0 0 6px;
  padding: 0 5px 0 0;
  display: block;
  position: relative;
  z-index: auto;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.7;
}

/* Asset library: project groups, kind filters and real visual thumbnails. */
body.studio-redesign #page-assets .section-head {
  align-items: center;
}

body.studio-redesign #page-assets .section-head h2,
body.studio-redesign #page-admin .section-head h2 {
  color: var(--sq-ink);
}

body.studio-redesign .asset-filters {
  margin: 0 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.studio-redesign .asset-project-tabs,
body.studio-redesign .asset-kind-tabs {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

body.studio-redesign .asset-project-tabs::-webkit-scrollbar,
body.studio-redesign .asset-kind-tabs::-webkit-scrollbar {
  display: none;
}

body.studio-redesign .asset-filters button {
  height: 34px;
  padding: 0 12px;
  flex: 0 0 auto;
  border: 1px solid var(--sq-line);
  border-radius: 6px;
  color: var(--sq-muted);
  background: var(--sq-panel);
  font-size: 12px;
}

body.studio-redesign .asset-filters button:hover,
body.studio-redesign .asset-filters button.active {
  color: var(--sq-ink);
  border-color: rgba(36, 199, 232, .42);
  background: color-mix(in srgb, var(--sq-panel) 84%, var(--sq-accent));
}

body.studio-redesign .asset-grid {
  display: block;
}

body.studio-redesign .asset-group + .asset-group {
  margin-top: 30px;
}

body.studio-redesign .asset-group-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--sq-ink);
}

body.studio-redesign .asset-group-head span {
  color: var(--sq-muted);
  font-size: 12px;
}

body.studio-redesign .asset-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.studio-redesign .asset-card {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sq-line);
  border-radius: 7px;
  color: var(--sq-ink);
  background: var(--sq-panel);
}

body.studio-redesign .asset-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sq-panel-soft);
}

body.studio-redesign .asset-visual img,
body.studio-redesign .asset-visual video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.studio-redesign .asset-file-icon {
  color: var(--sq-muted);
}

body.studio-redesign .asset-video-mark {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #fff;
  background: rgba(5, 8, 12, .58);
  backdrop-filter: blur(8px);
}

body.studio-redesign .asset-copy {
  min-width: 0;
  padding: 12px;
  display: grid;
  gap: 4px;
}

body.studio-redesign .asset-copy b,
body.studio-redesign .asset-copy p,
body.studio-redesign .asset-copy span {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.studio-redesign .asset-copy p,
body.studio-redesign .asset-copy span {
  color: var(--sq-muted);
  font-size: 11px;
}

/* Player stays compact; controls and menus never create a horizontal scrollbar. */
body.studio-redesign .video-dialog {
  overflow: hidden;
}

body.studio-redesign .video-dialog.task-detail-dialog {
  width: min(1180px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
}

body.studio-redesign .video-dialog.task-detail-dialog .video-player-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 20px;
  overflow: hidden;
}

body.studio-redesign .video-dialog.task-detail-dialog :is(.video-frame, .player-meta, .task-detail-panel) {
  min-width: 0;
  max-width: 100%;
}

body.studio-redesign .player-close {
  z-index: 20;
  display: grid;
  place-items: center;
  pointer-events: auto;
  touch-action: manipulation;
}

body.studio-redesign .player-overlay {
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: visible;
}

body.studio-redesign .player-timeline {
  min-width: 0;
}

body.studio-redesign .player-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
}

body.studio-redesign .player-actions button {
  min-width: 42px;
  height: 30px;
  padding: 0 8px;
  white-space: nowrap;
}

body.studio-redesign .menu-dialog.player-picker-dialog {
  overflow: hidden;
  border-radius: 7px;
}

body.studio-redesign .menu-dialog.player-picker-dialog .player-picker-menu,
body.studio-redesign .menu-dialog.player-picker-dialog .menu {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: min(260px, 50vh);
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 7px;
}

body.studio-redesign .menu-dialog.player-picker-dialog .player-picker-menu {
  overflow-x: hidden;
}

body.studio-redesign .menu-dialog.player-picker-dialog .player-picker-menu button {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.studio-redesign .task-detail-panel p {
  max-height: min(330px, 44vh);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Modern scrollbars: invisible at rest and visible only while interacting. */
body.studio-redesign :is(.history, .prompt-editor, .task-prompt, .task-detail-panel p, .player-picker-menu, .settings-panel) {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body.studio-redesign :is(.history, .prompt-editor, .task-prompt, .task-detail-panel p, .player-picker-menu, .settings-panel):is(:hover, :focus, :focus-within) {
  scrollbar-color: color-mix(in srgb, var(--sq-muted) 55%, transparent) transparent;
}

body.studio-redesign :is(.history, .prompt-editor, .task-prompt, .task-detail-panel p, .player-picker-menu, .settings-panel)::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.studio-redesign :is(.history, .prompt-editor, .task-prompt, .task-detail-panel p, .player-picker-menu, .settings-panel)::-webkit-scrollbar-track {
  background: transparent;
}

body.studio-redesign :is(.history, .prompt-editor, .task-prompt, .task-detail-panel p, .player-picker-menu, .settings-panel)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: transparent;
}

body.studio-redesign :is(.history, .prompt-editor, .task-prompt, .task-detail-panel p, .player-picker-menu, .settings-panel):is(:hover, :focus, :focus-within)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sq-muted) 55%, transparent);
}

/* Explicit light-theme contrast for content inherited from the older surface. */
:root[data-theme="light"] body.studio-redesign .sidebar {
  color: var(--ff-ink);
  border-right-color: var(--ff-line);
  background: var(--sq-sidebar);
}

:root[data-theme="light"] body.studio-redesign .brand .logo-line,
:root[data-theme="light"] body.studio-redesign .brand-copy strong {
  color: var(--ff-ink);
}

:root[data-theme="light"] body.studio-redesign .brand .logo {
  color: #ffffff;
  background: #111318;
}

:root[data-theme="light"] body.studio-redesign :is(.sidebar-toggle, .nav button, .settings-main) {
  color: var(--ff-muted);
}

:root[data-theme="light"] body.studio-redesign :is(.sidebar-toggle, .nav button, .settings-main):hover {
  color: var(--ff-ink);
  background: var(--ff-subtle);
}

:root[data-theme="light"] body.studio-redesign .nav button.active {
  color: var(--ff-ink);
  background: var(--ff-subtle);
}

:root[data-theme="light"] body.studio-redesign .history-head {
  color: var(--ff-muted);
}

:root[data-theme="light"] body.studio-redesign .history-card {
  color: var(--ff-ink);
}

:root[data-theme="light"] body.studio-redesign .history-card:hover {
  border-color: var(--ff-line);
  background: var(--ff-subtle);
}

:root[data-theme="light"] body.studio-redesign .history-card.active {
  border-color: rgba(18, 155, 183, .42);
  background: var(--ff-subtle);
}

:root[data-theme="light"] body.studio-redesign .history-thumb {
  background: var(--ff-subtle);
}

:root[data-theme="light"] body.studio-redesign .history-copy b,
:root[data-theme="light"] body.studio-redesign .empty-state b {
  color: var(--ff-ink);
}

:root[data-theme="light"] body.studio-redesign .history-copy small,
:root[data-theme="light"] body.studio-redesign .empty-state span {
  color: var(--ff-muted);
}

:root[data-theme="light"] body.studio-redesign .empty-state {
  border-color: var(--ff-line);
}

:root[data-theme="light"] body.studio-redesign .sidebar-settings {
  border-top-color: var(--ff-line);
  background: var(--sq-sidebar);
}

:root[data-theme="light"] body.studio-redesign .settings-panel {
  color: var(--ff-ink);
  border-color: var(--ff-line);
  background: var(--ff-surface);
  box-shadow: 0 20px 56px color-mix(in srgb, var(--ff-shadow-ink) 16%, transparent);
}

:root[data-theme="light"] body.studio-redesign .settings-panel :is(label, span, small, p) {
  color: var(--ff-muted);
}

:root[data-theme="light"] body.studio-redesign .settings-panel :is(b, strong) {
  color: var(--ff-ink);
}

:root[data-theme="light"] body.studio-redesign select {
  color-scheme: light;
}

:root[data-theme="light"] body.studio-redesign select option,
:root[data-theme="light"] body.studio-redesign select optgroup {
  color: var(--ff-ink);
  background: var(--ff-surface);
}

:root[data-theme="dark"] body.studio-redesign select {
  color-scheme: dark;
}

:root[data-theme="dark"] body.studio-redesign select option,
:root[data-theme="dark"] body.studio-redesign select optgroup {
  color: #f5f7fa;
  background: #171a1f;
}

:root[data-theme="light"] body.studio-redesign :is(.page, .section-head, .task-day-title, .task-meta, .video-task-card, .template-library, .asset-group, .admin-grid) {
  color: var(--sq-ink);
}

:root[data-theme="light"] body.studio-redesign :is(.task-meta small, .section-head p, .empty-card, .empty-state, .asset-copy p, .asset-copy span) {
  color: var(--sq-muted);
}

:root[data-theme="light"] body.studio-redesign .settings-panel input {
  color: var(--ff-ink);
  background: var(--ff-surface);
}

:root[data-theme="light"] body.studio-redesign .hero-content h1,
:root[data-theme="light"] body.studio-redesign .hero-content h1 #userName,
:root[data-theme="light"] body.studio-redesign .hero-content h1 .hero-question {
  color: var(--ff-ink);
}

:root[data-theme="light"] body.studio-redesign .hero-title p {
  color: var(--ff-muted);
  text-shadow: none;
}

@media (max-width: 980px) {
  body.studio-redesign .showcase-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 148px);
  }

  body.studio-redesign .showcase-card {
    height: 148px;
    min-height: 148px;
  }

  body.studio-redesign .asset-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.studio-redesign .showcase-head p {
    display: none;
  }

  body.studio-redesign .showcase-track {
    display: flex;
    min-height: 154px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body.studio-redesign .showcase-track::-webkit-scrollbar {
    display: none;
  }

  body.studio-redesign .showcase-card {
    width: min(76vw, 300px);
    min-width: min(76vw, 300px);
    height: 154px;
    min-height: 154px;
    scroll-snap-align: start;
  }

  body.studio-redesign .asset-group-grid {
    grid-template-columns: 1fr;
  }

  body.studio-redesign .player-overlay {
    grid-template-columns: 1fr;
  }

  body.studio-redesign .player-actions {
    justify-content: flex-end;
  }

  body.studio-redesign .video-dialog.task-detail-dialog .video-player-shell {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }
}