/* Layout only: keep each page's existing theme, surfaces, and component states.
   DESIGN_VARIANCE=3, MOTION_INTENSITY=1, VISUAL_DENSITY=6.
   No layout animation or permanent compositor layers are introduced. */

/* Shared content frame. The canvas editor and embedded-tool wrappers are excluded. */
body.xc-home .wb-page,
body.xc-activity .wb-page,
body.xc-account .shell,
body.xc-assets > .wrap,
body.xc-film .film-wrap,
.xc-help-wrap,
.gal-wrap,
.mg-wrap {
  box-sizing: border-box;
  width: min(1920px, calc(100% - 48px)) !important;
  max-width: 1920px !important;
  margin-inline: auto;
}

/* Home: a compact creation area beside four usable shortcuts. */
body.xc-home .xc-ops {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
  padding-block: 24px 20px;
}
body.xc-home .xc-ops-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.xc-home .xc-create { padding: 28px 150px 28px 28px; min-height: 270px; }
body.xc-home .xc-create-mascots { right: 24px; }
body.xc-home .xc-side-card { min-width: 0; min-height: 126px; padding: 18px 64px 18px 18px; }
body.xc-home .xc-side-copy { min-width: 0; }
body.xc-home .xc-side-desc { overflow-wrap: anywhere; }
body.xc-home .xc-side-mascot { width: 58px; right: 6px; }
body.xc-home .xc-create-cta { flex-wrap: wrap; }

/* Account: short forms retain a readable line length even on wide displays. */
body.xc-account .xc-acc-dash { grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); }
body.xc-account .xc-acc-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.xc-account .xc-acc-entry { min-width: 0; height: auto; align-items: flex-start; justify-content: space-between; text-align: left; padding: 20px 16px; gap: 12px; border-radius: 16px; }
body.xc-account .xc-acc-entry .txt { min-width: 0; overflow-wrap: anywhere; }
body.xc-account .xc-acc-entry .txt b { display: block; }
body.xc-account .xc-acc-ledger[aria-label="邮箱绑定"] > :is(label, input, .actions, .hint) { max-width: 680px; }
body.xc-account #bindEmail { display: block; width: 100%; box-sizing: border-box; }
body.xc-account .xc-acc-ledger[aria-label="邮箱绑定"] .actions > button { flex: 0 0 auto; }
body.xc-account .xc-password-form { width: min(680px, 100%); }
body.xc-account .xc-acc-profile .profile-block { min-width: 0; overflow-wrap: anywhere; }
body.xc-account .table-scroll { max-width: 100%; overflow-x: auto; }

/* Asset library: filters and actions wrap inside the page instead of extending it. */
body.xc-assets .top { gap: 20px; }
body.xc-assets .top > :first-child { min-width: 0; }
body.xc-assets .tabs { flex-wrap: wrap; gap: 8px; }
body.xc-assets .tabs .count { margin-left: auto; white-space: nowrap; }
body.xc-assets .toolbar { gap: 10px; }
body.xc-assets .toolbar .search { flex: 1 1 240px; min-width: 0; max-width: 520px; }
body.xc-assets .toolbar .search input { width: 100%; min-width: 0; }
body.xc-assets .toolbar .libsel { max-width: 100%; }
body.xc-assets .cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
body.xc-activity .wb-act-head,
body.xc-activity .wb-act-toolbar { flex-wrap: wrap; gap: 16px; }
body.xc-activity .wb-act-tools { flex-wrap: wrap; }
.mg-head, .mg-bar { flex-wrap: wrap; gap: 12px; }
.mg-wrap { overflow-x: auto; }
.mg-modal { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
body.xc-film .film-main { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: 20px; }
body.xc-film .film-main > * { min-width: 0; }
body.xc-film .film-head { flex-wrap: wrap; }

/* Online generation: fixed desktop workspace, flowing form on smaller screens. */
body.sis-body .sis-app {
  width: min(1920px, calc(100% - 48px)) !important;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
  padding: 0 0 20px !important;
  column-gap: 20px !important;
  min-height: 0 !important;
}
body.sis-body .sis-topline { grid-column: 1 / -1; flex-wrap: wrap; gap: 12px; }
body.sis-body .sis-side { grid-column: 1 !important; grid-row: 2 !important; min-width: 0; }
body.sis-body .sis-main { grid-column: 2 !important; grid-row: 2 !important; min-width: 0; }
body.sis-body .canvas-head { flex-wrap: wrap; gap: 10px; }
body.sis-body .canvas-head > * { min-width: 0; }

/* Factory: one outer gutter, project directory left, working area right. */
body.vf-body #vf-root { box-sizing: border-box; max-width: 1920px; padding-inline: 24px; }
body.vf-body .vf-app { max-width: none; padding-inline: 0; }
body.vf-body .vf-head { flex-wrap: wrap; gap: 16px; }
body.vf-body .vf-work-area { min-width: 0; }
@media (min-width: 1180px) {
  body.vf-body .vf-workspace { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
  body.vf-body .vf-work-area .vf-main { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 20px; }
}

/* Workshop: preserve the history / player / settings composition and full-screen mode. */
body.sr-body .sr-app, body.sr-body .sr-pair-gallery { box-sizing: border-box; width: 100%; max-width: 1920px; margin-inline: auto; }
body.sr-body .sr-bar { flex-wrap: wrap; }
body.sr-body .sr-bar .sr-brand { min-width: 0; }
body.sr-body .sr-bar :is(select, input) { max-width: 100%; min-width: 0; }
body.sr-body .sr-bar .sr-brand small { overflow-wrap: anywhere; }
@media (min-width: 1260px) and (min-height: 580px) {
  body.sr-body .sr-work:not(:fullscreen) { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) minmax(320px, 360px); gap: 20px; }
}

@media (max-width: 1023px) {
  body.xc-home .xc-ops { grid-template-columns: minmax(0, 1fr); }
  body.xc-home .xc-ops-side { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.xc-home .xc-side-card { padding: 16px; min-height: 114px; }
  body.xc-home .xc-side-mascot { display: none; }
  body.xc-account .xc-acc-dash { grid-template-columns: minmax(0, 1fr); }
  body.xc-film .film-main { grid-template-columns: minmax(0, 1fr); }
  body.xc-api .api-header { display: flex !important; flex-direction: column; align-items: stretch; gap: 16px; }
  body.xc-api .header-metrics { display: flex; flex-wrap: wrap; min-width: 0; width: 100%; }
  body.xc-api .header-metrics > * { flex: 1; min-width: 0; }
}

@media (max-width: 960px) {
  html[data-studio-scale="off"]:has(> body.sis-body),
  html[data-studio-scale="off"] body.sis-body { height: auto !important; min-height: 100%; overflow: visible !important; }
  body.sis-body .sis-app {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(360px, auto) !important;
    row-gap: 16px !important;
    overflow: visible !important;
  }
  body.sis-body .sis-side { grid-column: 1 !important; grid-row: 2 !important; max-height: none; overflow: visible; }
  body.sis-body .sis-side-scroll { overflow: visible; }
  body.sis-body .sis-main { grid-column: 1 !important; grid-row: 3 !important; min-height: 420px !important; }
}

@media (max-width: 640px) {
  body.xc-home .wb-page, body.xc-activity .wb-page, body.xc-account .shell,
  body.xc-assets > .wrap, body.xc-film .film-wrap, .xc-help-wrap, .gal-wrap, .mg-wrap {
    width: calc(100% - 24px) !important;
    padding-inline: 0;
  }
  body.xc-home .xc-ops { padding-top: 16px; gap: 14px; }
  body.xc-home .xc-ops-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.xc-home .xc-create { padding: 22px; min-height: 240px; }
  body.xc-home .xc-create-mascots { display: none; }
  body.xc-account .xc-acc-entries { grid-template-columns: minmax(0, 1fr); }
  body.xc-account .xc-acc-entry { padding: 16px; align-items: center; }
  body.xc-account .xc-acc-profile { flex-wrap: wrap; gap: 14px; }
  body.xc-account .xc-acc-profile-acts { width: 100%; margin-left: 0; }
  body.xc-assets .top { flex-wrap: wrap; }
  body.xc-assets .tabs .count { flex-basis: 100%; margin: 4px 0 0; }
  body.xc-assets .toolbar .search { max-width: none; flex-basis: 100%; }
  body.xc-assets .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  body.xc-activity .wb-act-tools { width: 100%; }
  body.sis-body .sis-app { width: calc(100% - 24px) !important; }
  body.sis-body .sis-topline { padding-inline: 0; }
  body.vf-body #vf-root { padding-inline: 12px; }
  body.sr-body .sr-app, body.sr-body .sr-pair-gallery { padding-inline: 12px; }
  body.sr-body .sr-bar .sr-brand { flex-basis: 100%; }
}